数据填报4个表的页面UI完成

minggao/src/page/recordForm/components/userSelect.vue

@@ -0,0 +1,137 @@
+<!-- 会员卡类型 -->
+<template>
+  <el-select
+    v-model="id"
+    filterable
+    remote
+    reserve-keyword
+    clearable
+    :multiple="multiple"
+    :placeholder="placeholder"
+    :remote-method="debounceFetch"
+    :loading="loading"
+    :disabled="disabled"
+    @change="handleChange"
+    @clear="debounceFetch"
+    size="mini"
+  >
+    <el-option
+      v-for="item in data"
+      :key="item.user_id"
+      :value="item.user_id"
+      :label="item.real_name"
+      :disabled="optionsDisabled(item.id)"
+    />
+  </el-select>
+</template>
+
+<script>
+import _ from 'lodash-es';
+
+export default {
+  name: 'UserIDSelect',
+  props: {
+    value: [String, Number, Array],
+    defaultData: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: [String],
+      default: '请选择'
+    },
+    multiple: {
+      type: [Boolean],
+      default: false
+    },
+    query: [Object],
+    autoFetch: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disabledOptions: {
+      type: Array
+    }
+  },
+  data() {
+    this.debounceFetch = _.debounce(this.fetch, 800);
+    return {
+      id: '',
+      loading: false,
+      data: [],
+      keyword: ''
+    };
+  },
+  computed: {
+    selectedData() {
+      if (_.isArray(this.id)) {
+        return _.filter(this.data, item => _.includes(this.id, item.id));
+      }
+      return _.find(this.data, { id: this.id });
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.id = newValue;
+    },
+    defaultData() {
+      this.data = _.uniqBy(_.concat(this.defaultData, this.data), 'user_id');
+    },
+    query() {
+      this.debounceFetch(this.keyword);
+    }
+  },
+  methods: {
+    fetch(value) {
+      this.loading = true;
+      this.keyword = value;
+      const payload = _.assign(
+        {
+          pageNum: 1,
+          page_item: 1000
+          // mobile: this.phoneVal, //电话
+          // org_id: this.org_id
+        },
+        { real_name: value },
+        this.query
+      );
+      return this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=sysmenage.usermanager.user_list',
+        data: this.qs.stringify(payload)
+      })
+        .then(res => {
+          if (!res.data.data) {
+            return;
+          }
+
+          this.data = res.data.data.page_list || [];
+          return res.data.data.page_list;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    handleChange(value) {
+      this.$emit('input', value);
+      this.$emit('change', value, this.selectedData);
+    },
+    optionsDisabled(id) {
+      return _.includes(this.disabledOptions, id);
+    }
+  },
+  mounted() {
+    if (this.autoFetch) {
+      this.fetch().then(() => {
+        this.data = _.uniqBy(_.concat(this.defaultData, this.data), 'user_id');
+      });
+    }
+  }
+};
+</script>
+
+<style></style>

minggao/src/page/recordForm/fieldSurveys.vue

@@ -0,0 +1,526 @@
+<!-- 踏查记录表  -->
+<template>
+  <div class="form-page">
+    <div class="form-page__search">
+      <el-row type="flex" justify="space-between" :gutter="20">
+        <el-col :span="18">
+          <el-select
+            v-model="queryInfo.org_name"
+            placeholder="请选择隶属组织"
+            size="mini"
+            clearable
+            @change="search"
+            filterable
+          >
+            <el-option
+              v-for="item in organizationList"
+              :key="item.org_name"
+              :label="item.org_name"
+              :value="item.org_name"
+            >
+            </el-option>
+          </el-select>
+          <UserIDSelectComponent v-model="queryInfo.user_id" />
+          <!-- <el-select
+            v-model="queryInfo.user_name"
+            placeholder="请选择调查人"
+            size="mini"
+            clearable
+            @change="search"
+            filterable
+          >
+            <el-option
+              v-for="item in organizationList"
+              :key="item.org_name"
+              :label="item.org_name"
+              :value="item.org_name"
+            >
+            </el-option>
+          </el-select> -->
+          <el-date-picker
+            v-model="queryInfo.select_time"
+            type="date"
+            placeholder="请选择鉴定时间"
+            @change="search"
+            size="mini"
+            :editable="false"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+          <el-button type="info" @click="search" size="mini">查询</el-button>
+          <el-button type="info" size="mini">导出</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <el-card style="margin-top: 15px">
+      <div class="form-page__table" v-loading="loading">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :stripe="true"
+          :height="48 * 13"
+          ref="gridTable"
+        >
+          <el-table-column prop="index" label="编号" width="60px">
+            <template slot-scope="scope">
+              <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="trap_number"
+            label="踏查点名称"
+          ></el-table-column>
+          <el-table-column prop="point_name" label="经度"> </el-table-column>
+          <el-table-column prop="point_name" label="纬度"> </el-table-column>
+          <el-table-column prop="point_name" label="海拔"> </el-table-column>
+          <el-table-column prop="point_name" label="踏查点面积">
+          </el-table-column>
+          <el-table-column prop="inducer_type" label="发生生境">
+          </el-table-column>
+          <el-table-column prop="pest_type_num" label="物种名称">
+          </el-table-column>
+          <el-table-column prop="pest_number" label="危害对象">
+          </el-table-column>
+          <el-table-column prop="user_name" label="发生面积"> </el-table-column>
+          <el-table-column prop="operation_type" label="是否设置标准样地">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="调查株数">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="危害株数">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="危害部位">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="危害率">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="是否采集样本编号">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="踏查人">
+          </el-table-column>
+          <el-table-column prop="report_time" label="提交时间" width="200">
+          </el-table-column>
+          <el-table-column label="操作" width="200">
+            <template slot-scope="scope">
+              <el-button type="info" size="mini" @click="handleEdit(scope.row)">
+                修改</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next,jumper"
+        :total="total"
+        :page-size="20"
+        @current-change="pageChange"
+        :current-page="queryInfo.page"
+      >
+      </el-pagination>
+    </el-card>
+    <!-- 弹框 -->
+    <el-dialog
+      title="表2：踏查记录表"
+      :visible.sync="dialogVisible"
+      width="800px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="160px"
+      >
+        <el-form-item label-width="20px">
+          <el-descriptions>
+            <el-descriptions-item label="踏查人">张三</el-descriptions-item>
+            <el-descriptions-item label="踏查时间"
+              >2023年2月15日</el-descriptions-item
+            >
+          </el-descriptions>
+        </el-form-item>
+        <el-form-item label="踏查点名称：" prop="desc">
+          <el-input v-model="ruleForm.desc"></el-input>
+        </el-form-item>
+        <el-form-item label="地理坐标：">
+          <el-row type="flex" align="center">
+            <el-form-item class="mr10" style="min-width: 180px">
+              <el-input v-model="ruleForm.desc"
+                ><template slot="append">经度</template></el-input
+              >
+            </el-form-item>
+            <el-form-item class="mr10" style="min-width: 180px">
+              <el-input v-model="ruleForm.desc"
+                ><template slot="append">纬度</template></el-input
+              >
+            </el-form-item>
+            <el-form-item style="min-width: 180px">
+              <el-input v-model="ruleForm.desc">
+                <template slot="append">海拔</template>
+              </el-input>
+            </el-form-item>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="踏查点面积：" prop="desc">
+          <el-input v-model="ruleForm.desc"
+            ><template slot="append">亩</template></el-input
+          >
+        </el-form-item>
+        <el-form-item label="发生生境：" prop="desc">
+          <el-checkbox-group v-model="ruleForm.addressList">
+            <el-row v-for="item in habitatList" :key="item.value">
+              <el-col>
+                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
+                <span
+                  class="character"
+                  v-if="item.children && item.children.length"
+                  >（</span
+                >
+                <template v-for="childItem in item.children">
+                  <el-checkbox
+                    :label="childItem.value"
+                    :key="childItem.value"
+                    >{{ childItem.label }}</el-checkbox
+                  >
+                </template>
+                <span
+                  class="character"
+                  v-if="item.children && item.children.length"
+                  >）</span
+                >
+              </el-col>
+            </el-row>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="物种名称：" prop="desc">
+          <el-input v-model="ruleForm.desc"
+            ><template slot="append">亩</template></el-input
+          >
+        </el-form-item>
+        <el-form-item label="危害对象：" prop="desc">
+          <el-input v-model="ruleForm.desc"
+            ><template slot="append">亩</template></el-input
+          >
+        </el-form-item>
+        <el-form-item label="发生面积：" prop="desc">
+          <el-input v-model="ruleForm.desc"
+            ><template slot="append">亩</template></el-input
+          >
+        </el-form-item>
+        <el-form-item label="是否设置标准样地：" prop="desc">
+          <el-radio-group v-model="ruleForm.isSet">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <el-form-item label="调查株数：" prop="desc">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="危害株数：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="危害部位：" prop="desc">
+          <el-input v-model="ruleForm.desc"></el-input>
+        </el-form-item>
+        <el-form-item label="危害率：" prop="desc">
+          <el-input v-model="ruleForm.desc"></el-input>
+        </el-form-item>
+        <el-form-item label="是否采集样本：" prop="desc">
+          <el-radio-group v-model="ruleForm.isSet">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="样本编号：" prop="desc">
+          <el-input v-model="ruleForm.desc"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('ruleForm')">取 消</el-button>
+        <el-button
+          :disabled="dialogSubmitLoading"
+          type="primary"
+          @click="submitForm('ruleForm')"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import UserIDSelectComponent from './components/userSelect.vue';
+
+export default {
+  components: { UserIDSelectComponent },
+  data() {
+    //这里存放数据
+    return {
+      queryInfo: {
+        page: 1,
+        select_time: '', //
+        org_name: '', //
+        user_id: '' //
+      },
+      tableData: [],
+      total: 10,
+      loading: false,
+      organizationList: [],
+      dialogVisible: false,
+      dialogSubmitLoading: false,
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+        // new
+        addressList: [],
+        tableList: []
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        date1: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择日期',
+            trigger: 'change'
+          }
+        ],
+        date2: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择时间',
+            trigger: 'change'
+          }
+        ],
+        type: [
+          {
+            type: 'array',
+            required: true,
+            message: '请至少选择一个活动性质',
+            trigger: 'change'
+          }
+        ],
+        resource: [
+          { required: true, message: '请选择活动资源', trigger: 'change' }
+        ],
+        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
+      },
+      habitatList: [
+        {
+          label: '公共绿地',
+          value: '1',
+          children: [
+            {
+              label: '学校',
+              value: '1-1'
+            },
+            {
+              label: '公园',
+              value: '1-2'
+            },
+            {
+              label: '医院',
+              value: '1-3'
+            },
+            {
+              label: '道路绿化带',
+              value: '1-4'
+            }
+          ]
+        },
+        {
+          label: '农地',
+          value: '2',
+          children: [
+            {
+              label: '水稻等农田作物种植区',
+              value: '2-1'
+            },
+            {
+              label: '蔬菜种植区',
+              value: '2-2'
+            },
+            {
+              label: '水果种植区',
+              value: '2-3'
+            }
+          ]
+        },
+        {
+          label: '农产品储蓄交易场所',
+          value: '3',
+          children: [
+            {
+              label: '粮食储备仓库',
+              value: '3-1'
+            },
+            {
+              label: '粮食加工厂',
+              value: '3-2'
+            },
+            {
+              label: '水果批发市场',
+              value: '3-3'
+            }
+          ]
+        },
+        {
+          label: '水库道路周边地块、荒地（待建地、城乡失管地等）',
+          value: '4'
+        }
+      ]
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getDataList() {
+      //获取设备列表
+      this.loading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.info.inspect_list',
+        data: this.qs.stringify({
+          page_item: 20,
+          page: this.queryInfo.page,
+          user_id: this.queryInfo.user_id, //
+          org_name: this.queryInfo.org_name, //
+          select_time: this.queryInfo.select_time //
+        })
+      }).then(res => {
+        this.loading = false;
+        console.log(res.data.data);
+        if (!res.data.data) {
+          return;
+        }
+
+        this.total = res.data.data.total_item;
+        this.tableData = res.data.data.page_list;
+
+        this.$nextTick(() => {
+          this.$refs.gridTable.bodyWrapper.scrollTop = 0;
+        });
+      });
+    },
+    search() {
+      this.queryInfo.page = 1;
+      this.getDataList();
+    },
+    pageChange(e) {
+      this.queryInfo.page = e;
+      this.getDataList();
+    },
+    handleEdit() {
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogVisible = false;
+    },
+    getOrganizationList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org'
+      }).then(res => {
+        console.log(res.data.data);
+        this.organizationList = res.data.data.org_list;
+      });
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getOrganizationList();
+    this.getDataList();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.form-page {
+  &__search {
+    // height: 40px;
+    /deep/.el-select {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-input {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-date-editor {
+      width: 250px !important;
+      margin-right: 15px;
+    }
+  }
+
+  &__table {
+    margin-top: 15px;
+    /deep/.el-table__header-wrapper {
+      th {
+        background-color: #fafafa;
+      }
+    }
+  }
+}
+
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+/deep/.el-date-editor {
+  cursor: pointer;
+  .el-range-input {
+    cursor: pointer;
+  }
+}
+
+.character {
+  font-size: 14px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+</style>

minggao/src/page/recordForm/sampleAppraisal.vue

@@ -0,0 +1,365 @@
+<!-- 样本鉴定记录表  -->
+<template>
+  <div class="form-page">
+    <div class="form-page__search">
+      <el-row type="flex" justify="space-between" :gutter="20">
+        <el-col :span="18">
+          <el-date-picker
+            v-model="queryInfo.select_time"
+            type="date"
+            placeholder="请选择鉴定时间"
+            @change="search"
+            size="mini"
+            :editable="false"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+          <el-button type="info" @click="search" size="mini">查询</el-button>
+        </el-col>
+        <el-col :span="6" style="text-align:right;">
+          <el-button type="danger" size="mini" @click="handleEdit">
+            新增</el-button
+          >
+          <el-button type="info" size="mini">批量导出当前页</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <el-card style="margin-top: 15px">
+      <div class="form-page__table" v-loading="loading">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :stripe="true"
+          :height="48 * 13"
+          ref="gridTable"
+        >
+          <el-table-column prop="index" label="编号" width="60px">
+            <template slot-scope="scope">
+              <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="sample_num" label="样本编号"></el-table-column>
+          <el-table-column prop="sample_name" label="样本名称">
+          </el-table-column>
+          <el-table-column prop="tag" label="标识"> </el-table-column>
+          <el-table-column prop="num" label="数量"> </el-table-column>
+          <el-table-column prop="check_1" label="检测项目与方法">
+          </el-table-column>
+          <el-table-column prop="check_2" label="形态学鉴定"> </el-table-column>
+          <el-table-column prop="check_3" label="分子生物学鉴定">
+          </el-table-column>
+          <el-table-column prop="result" label="鉴定结果"> </el-table-column>
+          <el-table-column prop="remarks" label="备注"> </el-table-column>
+          <el-table-column prop="check_time" label="鉴定时间" width="200">
+          </el-table-column>
+          <el-table-column label="操作" width="200">
+            <template slot-scope="scope">
+              <el-button type="info" size="mini" @click="handleEdit(scope.row)">
+                修改</el-button
+              >
+              <el-button type="info" size="mini">导出</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next,jumper"
+        :total="total"
+        :page-size="20"
+        @current-change="pageChange"
+        :current-page="queryInfo.page"
+      >
+      </el-pagination>
+    </el-card>
+    <!-- 弹框 -->
+    <el-dialog
+      title="表7：样本鉴定记录表"
+      :visible.sync="dialogVisible"
+      width="800px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form
+        :model="baseForm"
+        :rules="rules"
+        ref="baseForm"
+        label-width="140px"
+      >
+        <el-form-item label-width="20px" v-if="baseForm.sample_id">
+          <el-descriptions>
+            <el-descriptions-item label="鉴定日期"
+              >2023年2月15日</el-descriptions-item
+            >
+          </el-descriptions>
+        </el-form-item>
+
+        <!-- start -->
+        <el-form-item label="样本编号：" prop="sample_num">
+          <el-input v-model="baseForm.sample_num"></el-input>
+        </el-form-item>
+        <el-form-item label="样本名称：" prop="sample_name">
+          <el-input v-model="baseForm.sample_name"></el-input>
+        </el-form-item>
+        <el-form-item label="标识：" prop="tag">
+          <el-input v-model="baseForm.tag"></el-input>
+        </el-form-item>
+        <el-form-item label="数量：" prop="num">
+          <el-input
+            v-model="baseForm.num"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="检测项目与方法：" prop="check_1">
+          <el-input type="textarea" v-model="baseForm.check_1"></el-input>
+        </el-form-item>
+        <el-form-item label="形态学鉴定：" prop="check_2">
+          <el-input type="textarea" v-model="baseForm.check_2"></el-input>
+        </el-form-item>
+        <el-form-item label="分子生物学鉴定：" prop="check_3">
+          <el-input type="textarea" v-model="baseForm.check_3"></el-input>
+        </el-form-item>
+        <el-form-item label="鉴定结果：" prop="result">
+          <el-input type="textarea" v-model="baseForm.result"></el-input>
+        </el-form-item>
+        <el-form-item label="备注：" prop="remarks">
+          <el-input type="textarea" v-model="baseForm.remarks"></el-input>
+        </el-form-item>
+
+        <!-- end -->
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          @click="resetForm('baseForm')"
+          :disabled="dialogSubmitLoading"
+          >取 消</el-button
+        >
+        <el-button
+          :disabled="dialogSubmitLoading"
+          type="primary"
+          @click="submitForm('baseForm')"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { omit, assign } from 'lodash-es';
+
+export default {
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      queryInfo: {
+        page: 1,
+        select_time: ''
+      },
+      tableData: [],
+      total: 10,
+      loading: false,
+      dialogVisible: false,
+      dialogSubmitLoading: false,
+      baseForm: {
+        // new
+        sample_id: '',
+        sample_name: '',
+        sample_num: '',
+        num: '',
+        tag: '',
+        check_1: '',
+        check_2: '',
+        check_3: '',
+        result: '',
+        remarks: ''
+      },
+      rules: {
+        sample_name: [
+          { required: true, message: '请填写样本名称', trigger: 'blur' },
+          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+        ],
+        sample_num: [
+          { required: true, message: '请填写样本编号', trigger: 'change' }
+        ],
+        num: [{ required: true, message: '请填写数量', trigger: 'blur' }],
+        tag: [{ required: true, message: '请填写标识', trigger: 'blur' }],
+        check_1: [
+          { required: true, message: '请填写检测项目与方法', trigger: 'blur' }
+        ],
+        check_2: [
+          { required: true, message: '请填写形态学鉴定', trigger: 'blur' }
+        ],
+        check_3: [
+          { required: true, message: '请填写分子生物学鉴定', trigger: 'blur' }
+        ],
+        result: [
+          { required: true, message: '请填写鉴定结果', trigger: 'blur' }
+        ],
+        remarks: [{ required: true, message: '请填写备注', trigger: 'blur' }]
+      }
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getDataList() {
+      //获取设备列表
+      this.loading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.info.sample_check_list',
+        data: this.qs.stringify({
+          page_item: 20,
+          page: this.queryInfo.page,
+          select_time: this.queryInfo.select_time
+        })
+      }).then(res => {
+        console.log(res.data.data, 'get data list sample');
+
+        this.loading = false;
+        console.log(res.data.data);
+        if (!res.data.data) {
+          return;
+        }
+
+        this.total = res.data.data.total_item;
+        this.tableData = res.data.data.page_list;
+
+        this.$nextTick(() => {
+          this.$refs.gridTable.bodyWrapper.scrollTop = 0;
+        });
+      });
+    },
+    search() {
+      this.queryInfo.page = 1;
+      this.getDataList();
+    },
+    pageChange(e) {
+      this.queryInfo.page = e;
+      this.getDataList();
+    },
+    handleEdit(row) {
+      if (row.sample_id) {
+        this.baseForm = assign({}, row);
+      }
+
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.dialogSubmitLoading = true;
+
+          if (!this.baseForm.sample_id) {
+            // 添加
+            const payload = omit(this.baseForm, ['sample_id']);
+            this.$axios({
+              method: 'POST',
+              url: '/api/api_gateway?method=data_report.info.sample_check_add',
+              data: this.qs.stringify(payload)
+            })
+              .then(res => {
+                this.$message({
+                  type: 'success',
+                  message: '新增成功!',
+                  duration: 1500
+                });
+                this.resetForm(formName);
+                this.search();
+              })
+              .finally(() => {
+                this.dialogSubmitLoading = false;
+              });
+          } else {
+            // 编辑
+            // 添加
+            const payload = omit(this.baseForm, ['check_time']);
+            this.$axios({
+              method: 'POST',
+              url:
+                '/api/api_gateway?method=data_report.info.sample_check_modify',
+              data: this.qs.stringify(payload)
+            })
+              .then(res => {
+                this.$message({
+                  type: 'success',
+                  message: '更新成功!',
+                  duration: 1500
+                });
+                this.resetForm(formName);
+                this.search();
+              })
+              .finally(() => {
+                this.dialogSubmitLoading = false;
+              });
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogVisible = false;
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getDataList();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.form-page {
+  &__search {
+    // height: 40px;
+    /deep/.el-select {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-input {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-date-editor {
+      width: 250px !important;
+      margin-right: 15px;
+    }
+  }
+
+  &__table {
+    margin-top: 15px;
+    /deep/.el-table__header-wrapper {
+      th {
+        background-color: #fafafa;
+      }
+    }
+  }
+}
+
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+/deep/.el-date-editor {
+  cursor: pointer;
+  .el-range-input {
+    cursor: pointer;
+  }
+}
+</style>

minggao/src/page/recordForm/samplePlot.vue

@@ -0,0 +1,560 @@
+<!-- 样地调查表  -->
+<template>
+  <div class="form-page">
+    <div class="form-page__search">
+      <el-row type="flex" justify="space-between" :gutter="20">
+        <el-col :span="18">
+          <el-select
+            v-model="queryInfo.org_name"
+            placeholder="请选择隶属组织"
+            size="mini"
+            clearable
+            @change="search"
+            filterable
+          >
+            <el-option
+              v-for="item in organizationList"
+              :key="item.org_name"
+              :label="item.org_name"
+              :value="item.org_name"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            v-model="queryInfo.user_name"
+            placeholder="请选择调查人"
+            size="mini"
+            clearable
+            @change="search"
+            filterable
+          >
+            <el-option
+              v-for="item in organizationList"
+              :key="item.org_name"
+              :label="item.org_name"
+              :value="item.org_name"
+            >
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="queryInfo.select_time"
+            type="date"
+            placeholder="请选择鉴定时间"
+            @change="search"
+            size="mini"
+            :editable="false"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+          <el-button type="info" @click="search" size="mini">查询</el-button>
+        </el-col>
+        <el-col :span="6" style="text-align:right;">
+          <el-button type="info" size="mini">批量导出当前页</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <el-card style="margin-top: 15px">
+      <div class="form-page__table" v-loading="loading">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :stripe="true"
+          :height="48 * 13"
+          ref="gridTable"
+        >
+          <el-table-column prop="index" label="编号" width="60px">
+            <template slot-scope="scope">
+              <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="trap_number"
+            label="样本编号"
+          ></el-table-column>
+          <el-table-column prop="point_name" label="样本名称">
+          </el-table-column>
+          <el-table-column prop="inducer_type" label="标识"> </el-table-column>
+          <el-table-column prop="pest_type_num" label="数量"> </el-table-column>
+          <el-table-column prop="pest_number" label="检测项目与方法">
+          </el-table-column>
+          <el-table-column prop="user_name" label="形态学鉴定">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="分子生物学鉴定">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="鉴定结果">
+          </el-table-column>
+          <el-table-column prop="operation_type" label="备注">
+          </el-table-column>
+          <el-table-column prop="report_time" label="鉴定时间" width="200">
+          </el-table-column>
+          <el-table-column label="操作" width="200">
+            <template slot-scope="scope">
+              <el-button type="info" size="mini" @click="handleEdit(scope.row)">
+                修改</el-button
+              >
+              <el-button type="info" size="mini">导出</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next,jumper"
+        :total="total"
+        :page-size="20"
+        @current-change="pageChange"
+        :current-page="queryInfo.page"
+      >
+      </el-pagination>
+    </el-card>
+    <!-- 弹框 -->
+    <el-dialog
+      title="表5：外来入侵病虫害标准样地调查表"
+      :visible.sync="dialogVisible"
+      width="1000px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="140px"
+      >
+        <el-form-item label-width="20px">
+          <el-descriptions>
+            <el-descriptions-item label="调查人">张三</el-descriptions-item>
+            <el-descriptions-item label="调查时间"
+              >2023年2月15日</el-descriptions-item
+            >
+          </el-descriptions>
+        </el-form-item>
+
+        <!-- start -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="标准样地地点：" prop="desc">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="标准样地编号：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="标准样地面积：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="经度：" prop="desc">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="纬度：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="海拔：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="发生生境：" prop="desc">
+          <el-checkbox-group v-model="ruleForm.addressList">
+            <el-row v-for="item in habitatList" :key="item.value">
+              <el-col>
+                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
+                <span
+                  class="character"
+                  v-if="item.children && item.children.length"
+                  >（</span
+                >
+                <template v-for="childItem in item.children">
+                  <el-checkbox
+                    :label="childItem.value"
+                    :key="childItem.value"
+                    >{{ childItem.label }}</el-checkbox
+                  >
+                </template>
+                <span
+                  class="character"
+                  v-if="item.children && item.children.length"
+                  >）</span
+                >
+              </el-col>
+            </el-row>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="物体名称（中文）：" prop="desc">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="拉丁学名：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="当地俗名：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="是否需要辅助调查：" prop="desc">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="危害对象：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="危害植物：" prop="desc">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="危害部位：" prop="region">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-table :data="ruleForm.tableList" border style="margin-bottom:20px;">
+          <el-table-column label="样方/样线编号" align="center">
+            <template slot-scope="scope">
+              <el-checkbox :label="scope.row.id"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="1" align="center" width="120">
+            <template slot-scope="scope">
+              <el-checkbox :label="scope.row.id"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="2" align="center" width="120">
+            <template slot-scope="scope">
+              <el-checkbox :label="scope.row.id"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="3" align="center" width="120">
+            <template slot-scope="scope">
+              <el-checkbox :label="scope.row.id"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="4" align="center" width="120">
+            <template slot-scope="scope">
+              <el-checkbox :label="scope.row.id"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="5" align="center" width="120">
+            <template slot-scope="scope">
+              <el-checkbox :label="scope.row.id"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="平均值" align="center" width="120">
+            <template slot-scope="scope">
+              <el-checkbox :label="scope.row.id"></el-checkbox>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="是否采集标本：" prop="desc">
+              <el-input v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- end -->
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('ruleForm')">取 消</el-button>
+        <el-button
+          :disabled="dialogSubmitLoading"
+          type="primary"
+          @click="submitForm('ruleForm')"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      queryInfo: {
+        page: 1,
+        select_time: '', //
+        org_name: '', //
+        user_name: '' //
+      },
+      tableData: [],
+      total: 10,
+      loading: false,
+      organizationList: [],
+      dialogVisible: false,
+      dialogSubmitLoading: false,
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+        // new
+        addressList: [],
+        tableList: []
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        date1: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择日期',
+            trigger: 'change'
+          }
+        ],
+        date2: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择时间',
+            trigger: 'change'
+          }
+        ],
+        type: [
+          {
+            type: 'array',
+            required: true,
+            message: '请至少选择一个活动性质',
+            trigger: 'change'
+          }
+        ],
+        resource: [
+          { required: true, message: '请选择活动资源', trigger: 'change' }
+        ],
+        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
+      },
+      habitatList: [
+        {
+          label: '公共绿地',
+          value: '1',
+          children: [
+            {
+              label: '学校',
+              value: '1-1'
+            },
+            {
+              label: '公园',
+              value: '1-2'
+            },
+            {
+              label: '医院',
+              value: '1-3'
+            },
+            {
+              label: '道路绿化带',
+              value: '1-4'
+            }
+          ]
+        },
+        {
+          label: '农地',
+          value: '2',
+          children: [
+            {
+              label: '水稻等农田作物种植区',
+              value: '2-1'
+            },
+            {
+              label: '蔬菜种植区',
+              value: '2-2'
+            },
+            {
+              label: '水果种植区',
+              value: '2-3'
+            }
+          ]
+        },
+        {
+          label: '农产品储蓄交易场所',
+          value: '3',
+          children: [
+            {
+              label: '粮食储备仓库',
+              value: '3-1'
+            },
+            {
+              label: '粮食加工厂',
+              value: '3-2'
+            },
+            {
+              label: '水果批发市场',
+              value: '3-3'
+            }
+          ]
+        },
+        {
+          label: '水库道路周边地块、荒地（待建地、城乡失管地等）',
+          value: '4'
+        }
+      ]
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getDataList() {
+      //获取设备列表
+      this.loading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.report.get_trap_list',
+        data: this.qs.stringify({
+          page_item: 20,
+          page: this.queryInfo.page,
+          trap_number: this.queryInfo.trap_number, //              非必传(string)               设备编号 搜索项
+          point_name: this.queryInfo.point_name, //                  非必传(string)               设备所属监测点 搜索项
+          org_name: this.queryInfo.org_name, //                    非必传(string)               设备所属组织   搜索项
+          user_name: this.queryInfo.user_name, //                   非必传(string)               填报人名字 搜索项
+          start_time: this.queryInfo.start_time, //                  非必传(string)               开始时间 搜索项
+          end_time: this.queryInfo.end_time //                    非必传(string)               结束时间 搜索项
+        })
+      }).then(res => {
+        this.loading = false;
+        console.log(res.data.data);
+        if (!res.data.data) {
+          return;
+        }
+
+        this.total = res.data.data.total_item;
+        this.tableData = res.data.data.page_list;
+
+        this.$nextTick(() => {
+          this.$refs.gridTable.bodyWrapper.scrollTop = 0;
+        });
+      });
+    },
+    search() {
+      this.queryInfo.page = 1;
+      this.getDataList();
+    },
+    pageChange(e) {
+      this.queryInfo.page = e;
+      this.getDataList();
+    },
+    handleEdit() {
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogVisible = false;
+    },
+    getOrganizationList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org'
+      }).then(res => {
+        console.log(res.data.data);
+        this.organizationList = res.data.data.org_list;
+      });
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getOrganizationList();
+    this.getDataList();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.form-page {
+  &__search {
+    // height: 40px;
+    /deep/.el-select {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-input {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-date-editor {
+      width: 250px !important;
+      margin-right: 15px;
+    }
+  }
+
+  &__table {
+    margin-top: 15px;
+    /deep/.el-table__header-wrapper {
+      th {
+        background-color: #fafafa;
+      }
+    }
+  }
+}
+
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+/deep/.el-date-editor {
+  cursor: pointer;
+  .el-range-input {
+    cursor: pointer;
+  }
+}
+
+.character {
+  font-size: 14px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+</style>

minggao/src/page/recordForm/trapRecord.vue

@@ -0,0 +1,526 @@
+<!-- 诱捕法调查表  -->
+<template>
+  <div class="form-page">
+    <div class="form-page__search">
+      <el-row type="flex" justify="space-between" :gutter="20">
+        <el-col :span="18">
+          <el-select
+            v-model="queryInfo.org_name"
+            placeholder="请选择隶属组织"
+            size="mini"
+            clearable
+            @change="search"
+            filterable
+          >
+            <el-option
+              v-for="item in organizationList"
+              :key="item.org_name"
+              :label="item.org_name"
+              :value="item.org_name"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            v-model="queryInfo.user_name"
+            placeholder="请选择调查人"
+            size="mini"
+            clearable
+            @change="search"
+            filterable
+          >
+            <el-option
+              v-for="item in organizationList"
+              :key="item.org_name"
+              :label="item.org_name"
+              :value="item.org_name"
+            >
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="queryInfo.select_time"
+            type="date"
+            placeholder="请选择时间"
+            @change="search"
+            size="mini"
+            :editable="false"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+          <el-button type="info" @click="search" size="mini">查询</el-button>
+        </el-col>
+        <el-col :span="6" style="text-align:right;">
+          <el-button type="info" size="mini">批量导出当前页</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <el-card style="margin-top: 15px">
+      <div class="form-page__table" v-loading="loading">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :stripe="true"
+          :height="48 * 13"
+          ref="gridTable"
+        >
+          <el-table-column prop="index" label="编号" width="60px">
+            <template slot-scope="scope">
+              <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="trap_number"
+            label="标准样地地点"
+          ></el-table-column>
+          <el-table-column
+            prop="trap_number"
+            label="标准样地编号"
+          ></el-table-column>
+          <el-table-column
+            prop="trap_number"
+            label="标准样地面积(亩)"
+          ></el-table-column>
+          <el-table-column prop="trap_number" label="经度"></el-table-column>
+          <el-table-column prop="trap_number" label="纬度"></el-table-column>
+          <el-table-column prop="trap_number" label="海拔"></el-table-column>
+          <el-table-column prop="point_name" label="诱虫灯设备名称">
+          </el-table-column>
+          <el-table-column prop="inducer_type" label="诱剂名称成分">
+          </el-table-column>
+          <el-table-column prop="pest_type_num" label="入侵害虫种类">
+          </el-table-column>
+          <el-table-column prop="pest_type_num" label="调查人">
+          </el-table-column>
+          <el-table-column prop="report_time" label="提交时间" width="200">
+          </el-table-column>
+          <el-table-column label="操作" width="150">
+            <template slot-scope="scope">
+              <el-button type="info" size="mini" @click="handleEdit(scope.row)">
+                修改</el-button
+              >
+              <el-button type="info" size="mini">导出</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next,jumper"
+        :total="total"
+        :page-size="20"
+        @current-change="pageChange"
+        :current-page="queryInfo.page"
+      >
+      </el-pagination>
+    </el-card>
+    <!-- 弹框 -->
+    <el-dialog
+      title="表6：农业外来入侵病虫诱捕器调查记录表"
+      :visible.sync="dialogVisible"
+      width="1000px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="140px"
+      >
+        <el-form-item label-width="20px">
+          <el-descriptions>
+            <el-descriptions-item label="调查人">张三</el-descriptions-item>
+            <el-descriptions-item label="调查时间"
+              >2023年2月15日</el-descriptions-item
+            >
+          </el-descriptions>
+        </el-form-item>
+
+        <el-card border style="margin-bottom:20px;">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="标准样地：" prop="desc">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="样地编号：" prop="region">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="样地面积：" prop="region">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="经度：" prop="desc">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="纬度：" prop="region">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="海拔：" prop="region">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="诱虫灯设备名称：" prop="desc">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="引诱剂名称：" prop="region">
+                <el-input v-model="ruleForm.desc"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <!-- start -->
+        <el-card style="margin-bottom:20px;" bodered>
+          <el-table
+            :data="ruleForm.tableList"
+            border
+            style="margin-bottom:20px;"
+          >
+            <el-table-column label="入侵害虫名称" align="center">
+              <template slot-scope="scope">
+                <el-form-item
+                  :prop="'tableList.' + scope.$index + '.paymentIds'"
+                  :rules="{
+                    validator: validateArrayRequired,
+                    trigger: 'change'
+                  }"
+                >
+                  <el-input v-model="scope.row.desc"></el-input>
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="危害作物" align="center" width="120">
+              <template slot-scope="scope">
+                <el-checkbox :label="scope.row.id"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="合计" align="center" width="120">
+              <template slot-scope="scope">
+                <el-checkbox :label="scope.row.id"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="雌" align="center" width="120">
+              <template slot-scope="scope">
+                <el-checkbox :label="scope.row.id"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="雄" align="center" width="120">
+              <template slot-scope="scope">
+                <el-checkbox :label="scope.row.id"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" width="120">
+              <template slot-scope="scope">
+                <el-checkbox :label="scope.row.id"></el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+        <!-- end -->
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('ruleForm')">取 消</el-button>
+        <el-button
+          :disabled="dialogSubmitLoading"
+          type="primary"
+          @click="submitForm('ruleForm')"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      queryInfo: {
+        page: 1,
+        select_time: '', //
+        org_name: '', //
+        user_name: '' //
+      },
+      tableData: [],
+      total: 10,
+      loading: false,
+      organizationList: [],
+      dialogVisible: false,
+      dialogSubmitLoading: false,
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+        // new
+        addressList: [],
+        tableList: []
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        date1: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择日期',
+            trigger: 'change'
+          }
+        ],
+        date2: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择时间',
+            trigger: 'change'
+          }
+        ],
+        type: [
+          {
+            type: 'array',
+            required: true,
+            message: '请至少选择一个活动性质',
+            trigger: 'change'
+          }
+        ],
+        resource: [
+          { required: true, message: '请选择活动资源', trigger: 'change' }
+        ],
+        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
+      },
+      habitatList: [
+        {
+          label: '公共绿地',
+          value: '1',
+          children: [
+            {
+              label: '学校',
+              value: '1-1'
+            },
+            {
+              label: '公园',
+              value: '1-2'
+            },
+            {
+              label: '医院',
+              value: '1-3'
+            },
+            {
+              label: '道路绿化带',
+              value: '1-4'
+            }
+          ]
+        },
+        {
+          label: '农地',
+          value: '2',
+          children: [
+            {
+              label: '水稻等农田作物种植区',
+              value: '2-1'
+            },
+            {
+              label: '蔬菜种植区',
+              value: '2-2'
+            },
+            {
+              label: '水果种植区',
+              value: '2-3'
+            }
+          ]
+        },
+        {
+          label: '农产品储蓄交易场所',
+          value: '3',
+          children: [
+            {
+              label: '粮食储备仓库',
+              value: '3-1'
+            },
+            {
+              label: '粮食加工厂',
+              value: '3-2'
+            },
+            {
+              label: '水果批发市场',
+              value: '3-3'
+            }
+          ]
+        },
+        {
+          label: '水库道路周边地块、荒地（待建地、城乡失管地等）',
+          value: '4'
+        }
+      ]
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getDataList() {
+      //获取设备列表
+      this.loading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.report.get_trap_list',
+        data: this.qs.stringify({
+          page_item: 20,
+          page: this.queryInfo.page,
+          trap_number: this.queryInfo.trap_number, //              非必传(string)               设备编号 搜索项
+          point_name: this.queryInfo.point_name, //                  非必传(string)               设备所属监测点 搜索项
+          org_name: this.queryInfo.org_name, //                    非必传(string)               设备所属组织   搜索项
+          user_name: this.queryInfo.user_name, //                   非必传(string)               填报人名字 搜索项
+          start_time: this.queryInfo.start_time, //                  非必传(string)               开始时间 搜索项
+          end_time: this.queryInfo.end_time //                    非必传(string)               结束时间 搜索项
+        })
+      }).then(res => {
+        this.loading = false;
+        console.log(res.data.data);
+        if (!res.data.data) {
+          return;
+        }
+
+        this.total = res.data.data.total_item;
+        this.tableData = res.data.data.page_list;
+
+        this.$nextTick(() => {
+          this.$refs.gridTable.bodyWrapper.scrollTop = 0;
+        });
+      });
+    },
+    search() {
+      this.queryInfo.page = 1;
+      this.getDataList();
+    },
+    pageChange(e) {
+      this.queryInfo.page = e;
+      this.getDataList();
+    },
+    handleEdit() {
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogVisible = false;
+    },
+    getOrganizationList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org'
+      }).then(res => {
+        console.log(res.data.data);
+        this.organizationList = res.data.data.org_list;
+      });
+    },
+    validateSingleInputNumber(rule, value, callback) {
+      if (!value) {
+        callback();
+      } else {
+        if (Number(value) > 0) {
+          callback();
+        } else {
+          callback(new Error('请输入大于0的数'));
+        }
+      }
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getOrganizationList();
+    this.getDataList();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.form-page {
+  &__search {
+    // height: 40px;
+    /deep/.el-select {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-input {
+      width: 220px;
+      margin-right: 15px;
+    }
+    /deep/.el-date-editor {
+      width: 250px !important;
+      margin-right: 15px;
+    }
+  }
+
+  &__table {
+    margin-top: 15px;
+    /deep/.el-table__header-wrapper {
+      th {
+        background-color: #fafafa;
+      }
+    }
+  }
+}
+
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+/deep/.el-date-editor {
+  cursor: pointer;
+  .el-range-input {
+    cursor: pointer;
+  }
+}
+
+.character {
+  font-size: 14px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+</style>

minggao/src/router/index.js

@@ -72,6 +72,12 @@ import monitoringTrack from '@/page/monitoring/monitoringTrack'; //监测轨迹
 import monitoringPest from '@/page/monitoring/monitoringPest/index'; //有害生物数据
 import monitoringPestDetail from '@/page/monitoring/monitoringPest/detail'; //有害生物数据详情
 
+//*********************数据填报********************
+import sampleAppraisalForm from '@/page/recordForm/sampleAppraisal';
+import samplePlotForm from '@/page/recordForm/samplePlot';
+import trapRecordForm from '@/page/recordForm/trapRecord';
+import fieldSurveysRecordForm from '@/page/recordForm/fieldSurveys';
+
 Vue.use(Router);
 
 export default new Router({
@@ -342,6 +348,23 @@ export default new Router({
         {
           path: 'monitoringPestDetail/:id',
           component: monitoringPestDetail
+        },
+        //-------------------数据填报--------------------
+        {
+          path: 'sampleAppraisal',
+          component: sampleAppraisalForm
+        },
+        {
+          path: 'samplePlot',
+          component: samplePlotForm
+        },
+        {
+          path: 'trapRecord',
+          component: trapRecordForm
+        },
+        {
+          path: 'fieldSurveys',
+          component: fieldSurveysRecordForm
         }
       ]
     }