Przeglądaj źródła

数据报表填报信息编辑功能完成,导出功能对接调试完成

yf_zhb 2 lat temu
rodzic
commit
699ad28f46

+ 32 - 25
minggao/src/assets/css/global.css

@@ -19,7 +19,7 @@ li {
 }
 
 p {
-  margin: 0
+  margin: 0;
 }
 
 .el-breadcrumb {
@@ -33,8 +33,8 @@ p {
 }
 
 .el-dialog__header {
-  background: #F2F2F2;
-  border-bottom: 1px solid #CACACA;
+  background: #f2f2f2;
+  border-bottom: 1px solid #cacaca;
 }
 
 .el-main {
@@ -51,7 +51,7 @@ p {
 }
 
 .is-background .el-pager li.active {
-  background-color: #17BB89 !important;
+  background-color: #17bb89 !important;
 }
 
 .el-col {
@@ -60,15 +60,14 @@ p {
 
 /* 解决elementUI的table的闪动问题 */
 .el-table__body {
-  width: 100% !important
+  width: 100% !important;
 }
 
 /* 去掉e-card组件的padding */
 .pad0 .el-card__body {
-  padding: 0px !important
+  padding: 0px !important;
 }
 
-
 /* 时间段宽度设置 */
 .el-date-editor--daterange.el-input__inner {
   width: 220px !important;
@@ -107,7 +106,6 @@ p {
   margin: 0 auto;
 }
 
-
 /* 溯源系统的公共样式 */
 
 .bread_act .el-breadcrumb__inner {
@@ -117,8 +115,8 @@ p {
 /* 
 /* 蓝色 */
 .el-button.el-button--blueInfo {
-  background: #3EAFB9;
-  border-color: #3EAFB9;
+  background: #3eafb9;
+  border-color: #3eafb9;
   color: #fff;
 }
 
@@ -126,22 +124,22 @@ p {
 .el-button.el-button--blueInfo:focus,
 .el-button.el-button--blueInfo:active {
   background: #47bcc7;
-  border-color: #3EAFB9;
+  border-color: #3eafb9;
   color: #fff;
 }
 
 .el-button.el-button--blueInfo.is-plain {
-  border: 1px solid #3EAFB9;
+  border: 1px solid #3eafb9;
   background: #fff;
-  color: #3EAFB9;
+  color: #3eafb9;
 }
 
 .el-button.el-button--blueInfo.is-plain:hover,
 .el-button.el-button--blueInfo.is-plain:focus,
 .el-button.el-button--blueInfo.is-plain:active {
   color: #fff;
-  border: 1px solid #3EAFB9;
-  background-color: #3EAFB9;
+  border: 1px solid #3eafb9;
+  background-color: #3eafb9;
 }
 
 /* 绿色 */
@@ -222,8 +220,8 @@ p {
 
 /* 灰色 */
 .el-button.el-button--grayInfo {
-  background: #ECF1F4;
-  border-color: #B6C1C5;
+  background: #ecf1f4;
+  border-color: #b6c1c5;
   color: #333;
 }
 
@@ -266,12 +264,12 @@ p {
 }
 
 .el-button--primary:hover {
-  color: #FFF !important;
+  color: #fff !important;
   background-color: #14a478 !important;
 }
 
 .el-button--primary:focus {
-  color: #FFF !important;
+  color: #fff !important;
   background-color: #14a478 !important;
 }
 
@@ -292,27 +290,36 @@ p {
 
 /* 灰色 禁用灰*/
 .el-button.el-button--grayDisable {
-  background: #BBBBBB;
-  border-color: #BBBBBB;
+  background: #bbbbbb;
+  border-color: #bbbbbb;
   color: #fff;
 }
 
 .el-button.el-button--grayDisable:hover,
 .el-button.el-button--grayDisable:focus,
 .el-button.el-button--grayDisable:active {
-  background: #BBBBBB;
-  border-color: #BBBBBB;
+  background: #bbbbbb;
+  border-color: #bbbbbb;
   color: #fff;
 }
 
 .serch-item-box .el-select .el-input__inner:focus {
-  border-color: #3eb984
+  border-color: #3eb984;
 }
 
 .serch-item-box .el-select .el-input.is-focus .el-input__inner {
-  border-color: #3eb984
+  border-color: #3eb984;
 }
 
 .el-select-dropdown__item.selected {
   color: #3eb984 !important;
 }
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: '';
+}
+.clearfix:after {
+  clear: both;
+}

+ 142 - 29
minggao/src/page/recordForm/fieldSurveys.vue

@@ -4,7 +4,7 @@
     <div class="form-page__search">
       <el-row type="flex" justify="space-between" :gutter="20">
         <el-col :span="18">
-          <el-select
+          <!-- <el-select
             v-model="queryInfo.org_name"
             placeholder="请选择隶属组织"
             size="mini"
@@ -19,7 +19,7 @@
               :value="item.org_name"
             >
             </el-option>
-          </el-select>
+          </el-select> -->
           <UserIDSelectComponent v-model="queryInfo.user_id" />
           <!-- <el-select
             v-model="queryInfo.user_name"
@@ -48,7 +48,13 @@
           >
           </el-date-picker>
           <el-button type="info" @click="search" size="mini">查询</el-button>
-          <el-button type="info" size="mini">导出</el-button>
+          <el-button
+            type="info"
+            size="mini"
+            @click="exportData"
+            :disabled="exportLoading"
+            ><i v-if="exportLoading" class="el-icon-loading"></i>导出</el-button
+          >
         </el-col>
       </el-row>
     </div>
@@ -61,7 +67,13 @@
           :height="48 * 13"
           ref="gridTable"
         >
-          <el-table-column prop="index" label="编号" width="60px">
+          <el-table-column
+            prop="index"
+            label="编号"
+            align="center"
+            width="60px"
+            fixed="left"
+          >
             <template slot-scope="scope">
               <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
             </template>
@@ -69,18 +81,37 @@
           <el-table-column
             prop="inspect_name"
             label="踏查点名称"
+            fixed="left"
+            width="120"
+            show-overflow-tooltip
           ></el-table-column>
-          <el-table-column prop="lng" label="经度"> </el-table-column>
-          <el-table-column prop="lat" label="纬度"> </el-table-column>
-          <el-table-column prop="height" label="海拔"> </el-table-column>
-          <el-table-column prop="inspect_area" label="踏查点面积">
+          <el-table-column prop="lng" label="经度" width="80">
+          </el-table-column>
+          <el-table-column prop="lat" label="纬度" width="80">
+          </el-table-column>
+          <el-table-column prop="height" label="海拔" width="80">
+          </el-table-column>
+          <el-table-column
+            prop="inspect_area"
+            label="踏查点面积"
+            min-width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="occurs"
+            label="发生生境"
+            min-width="140"
+            align="center"
+          >
+            <template slot-scope="scope">
+              {{ getOccursName(scope.row.occurs) }}
+            </template>
           </el-table-column>
-          <el-table-column prop="occurs" label="发生生境"> </el-table-column>
           <el-table-column prop="pest_name" label="物种名称"> </el-table-column>
           <el-table-column prop="harm_obj" label="危害对象"> </el-table-column>
           <el-table-column prop="occurs_area" label="发生面积">
           </el-table-column>
-          <el-table-column prop="is_std" label="是否设置标准样地">
+          <el-table-column prop="is_std" label="是否设置标准样地" width="140">
           </el-table-column>
           <el-table-column prop="check_num" label="调查株数"> </el-table-column>
           <el-table-column prop="harm_num" label="危害株数"> </el-table-column>
@@ -92,7 +123,7 @@
           <el-table-column prop="user_name" label="踏查人"> </el-table-column>
           <el-table-column prop="submit_time" label="提交时间" width="200">
           </el-table-column>
-          <el-table-column label="操作" width="200">
+          <el-table-column label="操作" width="80" align="center" fixed="right">
             <template slot-scope="scope">
               <el-button type="info" size="mini" @click="handleEdit(scope.row)">
                 修改</el-button
@@ -162,11 +193,13 @@
             ><template slot="append">亩</template></el-input
           >
         </el-form-item>
-        <el-form-item label="发生生境:" prop="occurs_name">
-          <el-checkbox-group v-model="baseForm.occurs_list">
+        <el-form-item label="发生生境:" prop="occurs_list">
+          <el-checkbox-group v-model="baseForm.occurs_list" :max="1">
             <el-row v-for="item in habitatList" :key="item.value">
               <el-col>
-                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
+                <el-checkbox :label="item.value" :disabled="!!item.children">{{
+                  item.label
+                }}</el-checkbox>
                 <span
                   class="character"
                   v-if="item.children && item.children.length"
@@ -189,14 +222,10 @@
           </el-checkbox-group>
         </el-form-item>
         <el-form-item label="物种名称:" prop="pest_name">
-          <el-input v-model="baseForm.pest_name"
-            ><template slot="append">亩</template></el-input
-          >
+          <el-input v-model="baseForm.pest_name"></el-input>
         </el-form-item>
         <el-form-item label="危害对象:" prop="harm_obj">
-          <el-input v-model="baseForm.harm_obj"
-            ><template slot="append">亩</template></el-input
-          >
+          <el-input v-model="baseForm.harm_obj"></el-input>
         </el-form-item>
         <el-form-item label="发生面积:" prop="occurs_area">
           <el-input v-model="baseForm.occurs_area"
@@ -205,19 +234,25 @@
         </el-form-item>
         <el-form-item label="是否设置标准样地:" prop="is_std">
           <el-radio-group v-model="baseForm.is_std">
-            <el-radio :label="1">是</el-radio>
-            <el-radio :label="0">否</el-radio>
+            <el-radio label="是">是</el-radio>
+            <el-radio label="否">否</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-row :gutter="20">
           <el-col :span="10">
             <el-form-item label="调查株数:" prop="check_num">
-              <el-input v-model="baseForm.check_num"></el-input>
+              <el-input
+                v-model="baseForm.check_num"
+                onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+              ></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="10">
             <el-form-item label="危害株数:" prop="harm_num">
-              <el-input v-model="baseForm.harm_num"></el-input>
+              <el-input
+                v-model="baseForm.harm_num"
+                onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -251,7 +286,9 @@
 </template>
 
 <script>
+import { assign, omit, flatMap, concat, find, map } from 'lodash-es';
 import UserIDSelectComponent from './components/userSelect.vue';
+import { downFile } from '@/util/downloadFile.js';
 
 export default {
   components: { UserIDSelectComponent },
@@ -261,7 +298,7 @@ export default {
       queryInfo: {
         page: 1,
         select_time: '', //
-        org_name: '', //
+        // org_name: '', //
         user_id: '' //
       },
       tableData: [],
@@ -387,7 +424,8 @@ export default {
           label: '水库道路周边地块、荒地(待建地、城乡失管地等)',
           value: '4'
         }
-      ]
+      ],
+      exportLoading: false
     };
   },
   //监听属性 类似于data概念
@@ -396,6 +434,60 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 导出
+    exportData() {
+      if (this.exportLoading) {
+        return;
+      }
+
+      if (!this.queryInfo.user_id) {
+        this.$message.error('请选择踏查人');
+        return;
+      }
+
+      if (!this.queryInfo.select_time) {
+        this.$message.error('请选择踏查时间');
+        return;
+      }
+
+      this.exportLoading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.info.export_inspect_info',
+        responseType: 'blob',
+        data: this.qs.stringify({
+          user_id: this.queryInfo.user_id,
+          select_time: this.queryInfo.select_time // 查询时间
+        })
+      })
+        .then(res => {
+          downFile({
+            data: res.data,
+            fileName: `踏查记录表-${this.queryInfo.select_time}.docx`
+          });
+
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        })
+        .catch(err => {
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        });
+    },
+    getOccursName(value) {
+      const transformHabits = flatMap(this.habitatList, item =>
+        concat(
+          omit(item, ['children']),
+          map(item.children, chidItem =>
+            assign({}, chidItem, { label: item.label + '/' + chidItem.label })
+          ) || []
+        )
+      );
+
+      return value ? find(transformHabits, { value }).label : '-';
+    },
     getDataList() {
       //获取设备列表
       this.loading = true;
@@ -432,7 +524,13 @@ export default {
       this.queryInfo.page = e;
       this.getDataList();
     },
-    handleEdit() {
+    handleEdit(row) {
+      if (row.inspect_id) {
+        this.baseForm = assign({}, row, {
+          occurs_list: row.occurs ? [row.occurs] : []
+        });
+      }
+
       this.dialogVisible = true;
     },
     submitForm(formName) {
@@ -442,7 +540,11 @@ export default {
 
           if (!this.baseForm.inspect_id) {
             // 添加
-            const payload = omit(this.baseForm, ['inspect_id']);
+            const payload = omit(this.baseForm, [
+              'inspect_id',
+              'submit_time',
+              'user_name'
+            ]);
             this.$axios({
               method: 'POST',
               url: '/api/api_gateway?method=data_report.info.inspect_add',
@@ -463,7 +565,18 @@ export default {
           } else {
             // 编辑
             // 添加
-            const payload = omit(this.baseForm, ['check_time']);
+            const payload = omit(this.baseForm, [
+              'check_time',
+              'submit_time',
+              'user_name'
+            ]);
+
+            if (payload.occurs_list && payload.occurs_list.length > 0) {
+              payload.occurs = payload.occurs_list[0];
+            }
+
+            console.log(payload, 'submit payload');
+
             this.$axios({
               method: 'POST',
               url: '/api/api_gateway?method=data_report.info.inspect_modify',

+ 62 - 7
minggao/src/page/recordForm/sampleAppraisal.vue

@@ -20,7 +20,14 @@
           <el-button type="danger" size="mini" @click="handleEdit">
             新增</el-button
           >
-          <el-button type="info" size="mini">批量导出当前页</el-button>
+          <el-button
+            type="info"
+            @click="exportData('all')"
+            :disabled="exportLoading"
+            size="mini"
+            ><i v-if="exportLoading" class="el-icon-loading"></i
+            >批量导出当前页</el-button
+          >
         </el-col>
       </el-row>
     </div>
@@ -57,7 +64,13 @@
               <el-button type="info" size="mini" @click="handleEdit(scope.row)">
                 修改</el-button
               >
-              <el-button type="info" size="mini">导出</el-button>
+              <el-button
+                type="info"
+                size="mini"
+                :disabled="exportLoading"
+                @click="exportData('single', scope.row)"
+                >导出</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -88,9 +101,9 @@
       >
         <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-item label="鉴定日期">{{
+              baseForm.check_time
+            }}</el-descriptions-item>
           </el-descriptions>
         </el-form-item>
 
@@ -146,7 +159,8 @@
 </template>
 
 <script>
-import { omit, assign } from 'lodash-es';
+import { omit, assign, map } from 'lodash-es';
+import { downFile } from '@/util/downloadFile.js';
 
 export default {
   components: {},
@@ -198,7 +212,8 @@ export default {
           { required: true, message: '请填写鉴定结果', trigger: 'blur' }
         ],
         remarks: [{ required: true, message: '请填写备注', trigger: 'blur' }]
-      }
+      },
+      exportLoading: false
     };
   },
   //监听属性 类似于data概念
@@ -207,6 +222,46 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 导出
+    exportData(type, row) {
+      if (this.exportLoading) {
+        return;
+      }
+
+      let payload = {
+        sample_ids: ''
+      };
+
+      if (type === 'all') {
+        payload.sample_ids = map(this.tableData, 'sample_id').join(',');
+      } else {
+        payload.sample_ids = row.sample_id;
+      }
+
+      this.exportLoading = true;
+      this.$axios({
+        method: 'POST',
+        url:
+          '/api/api_gateway?method=data_report.info.export_sample_check_info',
+        responseType: 'blob',
+        data: this.qs.stringify(payload)
+      })
+        .then(res => {
+          downFile({
+            data: res.data,
+            fileName: `样本鉴定记录表.docx`
+          });
+
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        })
+        .catch(err => {
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        });
+    },
     getDataList() {
       //获取设备列表
       this.loading = true;

+ 224 - 18
minggao/src/page/recordForm/samplePlot.vue

@@ -34,7 +34,14 @@
           <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-button
+            type="info"
+            size="mini"
+            @click="exportData('all')"
+            :disabled="exportLoading"
+            ><i v-if="exportLoading" class="el-icon-loading"></i
+            >批量导出当前页</el-button
+          >
         </el-col>
       </el-row>
     </div>
@@ -47,7 +54,7 @@
           :height="48 * 13"
           ref="gridTable"
         >
-          <el-table-column prop="index" label="编号" width="60px">
+          <el-table-column prop="index" label="编号" width="60px" fixed="left">
             <template slot-scope="scope">
               <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
             </template>
@@ -55,10 +62,14 @@
           <el-table-column
             prop="sample_addr"
             label="标准样地地点"
+            fixed="left"
+            width="120"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
             prop="sample_num"
             label="标准样地编号"
+            width="120"
           ></el-table-column>
           <el-table-column
             prop="sample_area"
@@ -71,23 +82,34 @@
           <el-table-column prop="pest_name" label="物种名称"> </el-table-column>
           <el-table-column prop="pest_name_2" label="当地俗名">
           </el-table-column>
-          <el-table-column prop="is_check" label="是否需要辅助调查">
+          <el-table-column prop="is_check" label="是否需要辅助调查" width="140">
           </el-table-column>
           <el-table-column prop="harm_obj" label="危害对象"> </el-table-column>
           <el-table-column prop="harm_place" label="危害部位">
           </el-table-column>
-          <el-table-column prop="is_gather" label="是否采集样本">
+          <el-table-column prop="is_gather" label="是否采集样本" width="120">
           </el-table-column>
           <el-table-column prop="user_name" label="调查人"> </el-table-column>
-          <el-table-column prop="submit_time" label="调查时间">
+          <el-table-column prop="check_time" label="调查时间" min-width="140">
           </el-table-column>
 
-          <el-table-column label="操作" width="200">
+          <el-table-column
+            label="操作"
+            width="180"
+            align="center"
+            fixed="right"
+          >
             <template slot-scope="scope">
               <el-button type="info" size="mini" @click="handleEdit(scope.row)">
                 修改</el-button
               >
-              <el-button type="info" size="mini">导出</el-button>
+              <el-button
+                type="info"
+                size="mini"
+                :disabled="exportLoading"
+                @click="exportData('single', scope.row)"
+                >导出</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -122,7 +144,7 @@
               baseForm.user_name
             }}</el-descriptions-item>
             <el-descriptions-item label="调查时间">{{
-              baseForm.submit_time
+              baseForm.check_time
             }}</el-descriptions-item>
           </el-descriptions>
         </el-form-item>
@@ -163,7 +185,7 @@
           </el-col>
         </el-row>
         <el-form-item label="发生生境:" prop="occurs_list">
-          <el-checkbox-group v-model="baseForm.occurs_list">
+          <el-checkbox-group v-model="baseForm.occurs_list" :max="1">
             <el-row v-for="item in habitatList" :key="item.value">
               <el-col>
                 <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
@@ -237,32 +259,97 @@
           </el-table-column>
           <el-table-column label="1" align="center" width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.num1"></el-input>
+              <el-form-item
+                :prop="'tableList.' + scope.$index + '.num_1'"
+                label-width="0"
+                :rules="{
+                  validator: validateSingleInputNumber,
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  @change="value => handleInputChange(value, scope.row)"
+                  v-model="scope.row.num_1"
+                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+                ></el-input>
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="2" align="center" width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.num1"></el-input>
+              <el-form-item
+                :prop="'tableList.' + scope.$index + '.num_2'"
+                label-width="0"
+                :rules="{
+                  validator: validateSingleInputNumber,
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  @change="value => handleInputChange(value, scope.row)"
+                  v-model="scope.row.num_2"
+                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+                ></el-input>
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="3" align="center" width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.num1"></el-input>
+              <el-form-item
+                :prop="'tableList.' + scope.$index + '.num_3'"
+                label-width="0"
+                :rules="{
+                  validator: validateSingleInputNumber,
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  @change="value => handleInputChange(value, scope.row)"
+                  v-model="scope.row.num_3"
+                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+                ></el-input>
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="4" align="center" width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.num1"></el-input>
+              <el-form-item
+                :prop="'tableList.' + scope.$index + '.num_4'"
+                label-width="0"
+                :rules="{
+                  validator: validateSingleInputNumber,
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  @change="value => handleInputChange(value, scope.row)"
+                  v-model="scope.row.num_4"
+                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+                ></el-input>
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="5" align="center" width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.num1"></el-input>
+              <el-form-item
+                :prop="'tableList.' + scope.$index + '.num_5'"
+                label-width="0"
+                :rules="{
+                  validator: validateSingleInputNumber,
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  @change="value => handleInputChange(value, scope.row)"
+                  v-model="scope.row.num_5"
+                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+                ></el-input>
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="平均值" align="center" width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.num1"></el-input>
+              <el-input v-model="scope.row.num_6" disabled></el-input>
             </template>
           </el-table-column>
         </el-table>
@@ -296,7 +383,9 @@
 </template>
 
 <script>
+import { assign, omit, map } from 'lodash-es';
 import UserIDSelectComponent from './components/userSelect.vue';
+import { downFile } from '@/util/downloadFile.js';
 
 export default {
   components: { UserIDSelectComponent },
@@ -512,7 +601,8 @@ export default {
           label: '水库道路周边地块、荒地(待建地、城乡失管地等)',
           value: '4'
         }
-      ]
+      ],
+      exportLoading: false
     };
   },
   //监听属性 类似于data概念
@@ -521,6 +611,46 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 导出
+    exportData(type, row) {
+      if (this.exportLoading) {
+        return;
+      }
+
+      let payload = {
+        as_ids: ''
+      };
+
+      if (type === 'all') {
+        payload.as_ids = map(this.tableData, 'as_id').join(',');
+      } else {
+        payload.as_ids = row.as_id;
+      }
+
+      this.exportLoading = true;
+      this.$axios({
+        method: 'POST',
+        url:
+          '/api/api_gateway?method=data_report.info.export_alien_specie_info',
+        responseType: 'blob',
+        data: this.qs.stringify(payload)
+      })
+        .then(res => {
+          downFile({
+            data: res.data,
+            fileName: '外来入侵病虫害标准样地调查表.docx'
+          });
+
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        })
+        .catch(err => {
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        });
+    },
     getDataList() {
       //列表
       this.loading = true;
@@ -557,7 +687,66 @@ export default {
       this.queryInfo.page = e;
       this.getDataList();
     },
-    handleEdit() {
+    averageValue(key, len) {
+      let total = 0;
+      for (let i = 1; i <= len; i++) {
+        total += this.baseForm[key + '_' + i] * 1;
+      }
+
+      return (total / len).toFixed(2);
+    },
+    handleInputChange(value, row) {
+      console.log('input value', value, 'iiiiii', row);
+
+      const total =
+        row.num_1 * 1 +
+        row.num_2 * 1 +
+        row.num_3 * 1 +
+        row.num_4 * 1 +
+        row.num_5 * 1;
+
+      row.num_6 = (total / 5).toFixed(2);
+    },
+    handleEdit(row) {
+      if (row.as_id) {
+        this.baseForm = assign({}, row, {
+          occurs_list: row.occurs ? [row.occurs] : []
+        });
+
+        this.baseForm.tableList = [
+          {
+            row_name: '调查株数/样线长度',
+            row_key: 'check_num',
+            num_1: this.baseForm.check_num_1 || '',
+            num_2: this.baseForm.check_num_2 || '',
+            num_3: this.baseForm.check_num_3 || '',
+            num_4: this.baseForm.check_num_4 || '',
+            num_5: this.baseForm.check_num_5 || '',
+            num_6: this.averageValue('check_num', 5) || ''
+          },
+          {
+            row_name: '受害株数/受害病株所垮长度',
+            row_key: 'harm_num',
+            num_1: this.baseForm.harm_num_1 || '',
+            num_2: this.baseForm.harm_num_2 || '',
+            num_3: this.baseForm.harm_num_3 || '',
+            num_4: this.baseForm.harm_num_4 || '',
+            num_5: this.baseForm.harm_num_5 || '',
+            num_6: this.averageValue('harm_num', 5) || ''
+          },
+          {
+            row_name: '危害率(%)',
+            row_key: 'harm_rate',
+            num_1: this.baseForm.harm_rate_1 || '',
+            num_2: this.baseForm.harm_rate_2 || '',
+            num_3: this.baseForm.harm_rate_3 || '',
+            num_4: this.baseForm.harm_rate_4 || '',
+            num_5: this.baseForm.harm_rate_5 || '',
+            num_6: this.averageValue('harm_rate', 5) || ''
+          }
+        ];
+      }
+
       this.dialogVisible = true;
     },
     submitForm(formName) {
@@ -588,7 +777,12 @@ export default {
           } else {
             // 编辑
             // 添加
-            const payload = omit(this.baseForm, ['check_time']);
+            const payload = omit(this.baseForm, [
+              'check_time',
+              'submit_time',
+              'user_name'
+            ]);
+
             this.$axios({
               method: 'POST',
               url:
@@ -626,6 +820,18 @@ export default {
         console.log(res.data.data);
         this.organizationList = res.data.data.org_list;
       });
+    },
+    validateSingleInputNumber(rule, value, callback) {
+      console.log(value, 'validateSingleInputNumber');
+      if (!value) {
+        callback(new Error('请输入大于0的数'));
+      } else {
+        if (Number(value) > 0) {
+          callback();
+        } else {
+          callback(new Error('请输入大于0的数'));
+        }
+      }
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前

+ 227 - 26
minggao/src/page/recordForm/trapRecord.vue

@@ -4,7 +4,7 @@
     <div class="form-page__search">
       <el-row type="flex" justify="space-between" :gutter="20">
         <el-col :span="18">
-          <el-select
+          <!-- <el-select
             v-model="queryInfo.org_name"
             placeholder="请选择隶属组织"
             size="mini"
@@ -19,7 +19,7 @@
               :value="item.org_name"
             >
             </el-option>
-          </el-select>
+          </el-select> -->
           <UserIDSelectComponent v-model="queryInfo.user_id" />
           <el-date-picker
             v-model="queryInfo.select_time"
@@ -34,7 +34,14 @@
           <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-button
+            type="info"
+            size="mini"
+            @click="exportData('all')"
+            :disabled="exportLoading"
+            ><i v-if="exportLoading" class="el-icon-loading"></i
+            >批量导出当前页</el-button
+          >
         </el-col>
       </el-row>
     </div>
@@ -47,7 +54,7 @@
           :height="48 * 13"
           ref="gridTable"
         >
-          <el-table-column prop="index" label="编号" width="60px">
+          <el-table-column prop="index" label="编号" width="60px" fixed="left">
             <template slot-scope="scope">
               <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
             </template>
@@ -55,6 +62,9 @@
           <el-table-column
             prop="sample_addr"
             label="标准样地地点"
+            fixed="left"
+            width="120"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
             prop="sample_num"
@@ -62,26 +72,42 @@
           ></el-table-column>
           <el-table-column
             prop="sample_area"
+            width="140"
             label="标准样地面积(亩)"
           ></el-table-column>
           <el-table-column prop="lng" label="经度"></el-table-column>
           <el-table-column prop="lat" label="纬度"></el-table-column>
           <el-table-column prop="height" label="海拔"></el-table-column>
-          <el-table-column prop="trap_number" label="诱虫灯设备名称">
+          <el-table-column
+            prop="trap_number"
+            label="诱虫灯设备名称"
+            width="150"
+          >
           </el-table-column>
           <el-table-column prop="inducer_name" label="诱剂名称成分">
           </el-table-column>
           <el-table-column prop="pest_type_num" label="入侵害虫种类">
           </el-table-column>
           <el-table-column prop="user_name" label="调查人"> </el-table-column>
-          <el-table-column prop="submit_time" label="提交时间" width="200">
+          <el-table-column prop="check_time" label="提交时间" width="200">
           </el-table-column>
-          <el-table-column label="操作" width="150">
+          <el-table-column
+            label="操作"
+            width="150"
+            align="center"
+            fixed="right"
+          >
             <template slot-scope="scope">
               <el-button type="info" size="mini" @click="handleEdit(scope.row)">
                 修改</el-button
               >
-              <el-button type="info" size="mini">导出</el-button>
+              <el-button
+                type="info"
+                size="mini"
+                :disabled="exportLoading"
+                @click="exportData('single', scope.row)"
+                >导出</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -116,7 +142,7 @@
               baseForm.user_name
             }}</el-descriptions-item>
             <el-descriptions-item label="调查时间">{{
-              baseForm.submit_time
+              baseForm.check_time
             }}</el-descriptions-item>
           </el-descriptions>
         </el-form-item>
@@ -172,6 +198,14 @@
 
         <!-- start -->
         <el-card style="margin-bottom:20px;" bodered>
+          <div slot="header" class="clearfix">
+            <el-button
+              @click="handleAddNewPestInfo"
+              style="float: right; padding: 3px 0"
+              type="text"
+              >新增</el-button
+            >
+          </div>
           <el-table
             :data="baseForm.pest_list"
             border
@@ -181,38 +215,111 @@
               <template slot-scope="scope">
                 <el-form-item
                   :prop="'pest_list.' + scope.$index + '.pest_id'"
+                  label-width="0"
                   :rules="{
-                    validator: validateArrayRequired,
+                    validator: validateSingleInput,
                     trigger: 'change'
                   }"
                 >
-                  <el-input v-model="scope.row.pest_name"></el-input>
+                  <el-select
+                    v-model="scope.row.pest_id"
+                    placeholder="请选择"
+                    @change="value => handleChange(value, scope.row)"
+                  >
+                    <el-option
+                      v-for="item in pestListOptions"
+                      :key="item.pest_id"
+                      :label="item.pest_name"
+                      :value="item.pest_id"
+                    >
+                    </el-option>
+                  </el-select>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="危害作物" align="center" width="120">
               <template slot-scope="scope">
-                <el-checkbox :label="scope.row.harm_crop"></el-checkbox>
+                <el-form-item
+                  :prop="'pest_list.' + scope.$index + '.harm_crop'"
+                  label-width="0"
+                  :rules="{
+                    validator: validateSingleInput,
+                    trigger: 'change'
+                  }"
+                >
+                  <el-input v-model="scope.row.harm_crop"></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.pest_total"></el-checkbox>
+                <el-form-item
+                  :prop="'pest_list.' + scope.$index + '.pest_total'"
+                  label-width="0"
+                >
+                  <el-input v-model="scope.row.pest_total" disabled></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.female_num"></el-checkbox>
+                <el-form-item
+                  :prop="'pest_list.' + scope.$index + '.female_num'"
+                  label-width="0"
+                  :rules="{
+                    validator: validateSingleInputNumber,
+                    trigger: 'change'
+                  }"
+                >
+                  <el-input
+                    @change="value => handleInputChange(value, scope.row)"
+                    v-model="scope.row.female_num"
+                    onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+                  ></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.male_num"></el-checkbox>
+                <el-form-item
+                  :prop="'pest_list.' + scope.$index + '.male_num'"
+                  label-width="0"
+                  :rules="{
+                    validator: validateSingleInputNumber,
+                    trigger: 'change'
+                  }"
+                >
+                  <el-input
+                    v-model="scope.row.male_num"
+                    @change="value => handleInputChange(value, scope.row)"
+                    onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+                  ></el-input>
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center">
+              <template slot-scope="scope">
+                <el-form-item
+                  :prop="'pest_list.' + scope.$index + '.remarks'"
+                  label-width="0"
+                  :rules="{
+                    validator: validateSingleInput,
+                    trigger: 'change'
+                  }"
+                >
+                  <el-input v-model="scope.row.remarks"></el-input>
+                </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="备注" align="center" width="120">
+            <el-table-column label="操作" align="center">
               <template slot-scope="scope">
-                <el-checkbox :label="scope.row.remarks"></el-checkbox>
+                <el-form-item label-width="0">
+                  <el-button
+                    type="danger"
+                    @click="handleDelete(scope.row, scope.$index)"
+                    >删除</el-button
+                  >
+                </el-form-item>
               </template>
             </el-table-column>
           </el-table>
@@ -233,6 +340,8 @@
 </template>
 
 <script>
+import { downFile } from '@/util/downloadFile.js';
+import { assign, omit, find, map } from 'lodash-es';
 import UserIDSelectComponent from './components/userSelect.vue';
 
 export default {
@@ -319,11 +428,7 @@ export default {
             message: '请至少选择一个活动性质',
             trigger: 'change'
           }
-        ],
-        resource: [
-          { required: true, message: '请选择活动资源', trigger: 'change' }
-        ],
-        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
+        ]
       },
       habitatList: [
         {
@@ -388,7 +493,9 @@ export default {
           label: '水库道路周边地块、荒地(待建地、城乡失管地等)',
           value: '4'
         }
-      ]
+      ],
+      pestListOptions: [],
+      exportLoading: false
     };
   },
   //监听属性 类似于data概念
@@ -397,6 +504,85 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 导出
+    exportData(type, row) {
+      if (this.exportLoading) {
+        return;
+      }
+
+      let payload = {
+        tc_ids: ''
+      };
+
+      if (type === 'all') {
+        payload.tc_ids = map(this.tableData, 'tc_id').join(',');
+      } else {
+        payload.tc_ids = row.tc_id;
+      }
+
+      this.exportLoading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.info.export_trap_check_info',
+        responseType: 'blob',
+        data: this.qs.stringify(payload)
+      })
+        .then(res => {
+          downFile({
+            data: res.data,
+            fileName: '农业外来入侵害虫诱捕法调查记录表.docx'
+          });
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        })
+        .catch(err => {
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        });
+    },
+    handleChange(value, row) {
+      const pestInfo = find(this.pestListOptions, { pest_id: value }) || {};
+      row.pest_name = pestInfo.pest_name || '';
+    },
+    handleAddNewPestInfo() {
+      this.baseForm.pest_list.push({
+        pest_id: '', //害虫id
+        pest_name: '', // 害虫名称
+        harm_crop: '', // 危害农作物
+        pest_total: 0, // 害虫总数
+        male_num: 0, // 雄性数量
+        female_num: 0, // 雌性数量
+        remarks: '' // 备注
+      });
+    },
+    handleDelete(row, index) {
+      this.baseForm.pest_list.splice(index, 1);
+    },
+    handleInputChange(value, row) {
+      row.pest_total = Math.floor(row.male_num * 1 + row.female_num * 1);
+    },
+    getPestList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=sysmenage.maintain.pest_list',
+        data: this.qs.stringify({
+          page: 1, // 页码
+          page_item: '1000000000000000000000000000', // 每页条目数,默认10
+          pest_name: '' // 有害生物
+        })
+      })
+        .then(res => {
+          if (res.data.data.total_item !== 0) {
+            var data = res.data.data;
+            this.pestListOptions = data.page_list;
+          }
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
     getDataList() {
       //获取设备列表
       this.loading = true;
@@ -433,7 +619,12 @@ export default {
       this.queryInfo.page = e;
       this.getDataList();
     },
-    handleEdit() {
+    handleEdit(row) {
+      //tc_id
+      if (row.tc_id) {
+        this.baseForm = assign({}, row);
+      }
+
       this.dialogVisible = true;
     },
     submitForm(formName) {
@@ -464,7 +655,8 @@ export default {
           } else {
             // 编辑
             // 添加
-            const payload = omit(this.baseForm, ['check_time']);
+            const payload = omit(this.baseForm, ['check_time', 'user_name']);
+            payload.pest_list = JSON.stringify(payload.pest_list);
             this.$axios({
               method: 'POST',
               url: '/api/api_gateway?method=data_report.info.trap_check_modify',
@@ -504,7 +696,7 @@ export default {
     },
     validateSingleInputNumber(rule, value, callback) {
       if (!value) {
-        callback();
+        callback(new Error('请输入大于0的数'));
       } else {
         if (Number(value) > 0) {
           callback();
@@ -512,6 +704,14 @@ export default {
           callback(new Error('请输入大于0的数'));
         }
       }
+    },
+
+    validateSingleInput(rule, value, callback) {
+      if (!value) {
+        callback(new Error('请输入/选择'));
+      } else {
+        callback();
+      }
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -522,6 +722,7 @@ export default {
   mounted() {
     this.getOrganizationList();
     this.getDataList();
+    this.getPestList();
   },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后

+ 2 - 1
minggao/src/util/downloadFile.js

@@ -1,6 +1,7 @@
 import { BLOB_TYPE, ENMU_BLOB_TYPE } from '@/util/constants';
 
-export const downFile = ({ data, type = ENMU_BLOB_TYPE.XLS, fileName }) => {
+export const downFile = ({ data, type = ENMU_BLOB_TYPE.DOCX, fileName }) => {
+  console.log(data, 'download file', data instanceof Blob);
   //
   const blob = new Blob([data], {
     type: BLOB_TYPE[type]

+ 68 - 62
minggao/src/util/http.js

@@ -1,76 +1,82 @@
-import axios from 'axios'
-import {
-  DOMIN,
-  mapJson,
-  wsUrl
-} from './server.js'
-import router from '@/router'
-import {
-  Message
-} from "element-ui"
-import qs from 'qs'
-
+import axios from 'axios';
+import { DOMIN, mapJson, wsUrl } from './server.js';
+import router from '@/router';
+import { Message } from 'element-ui';
+import qs from 'qs';
 
 // Vue.use(router);
 // import Login from '@/page/login/login'
 
-import Vue from 'vue'
-Vue.prototype.DOMIN = DOMIN
-Vue.prototype.wsUrl = wsUrl // 实时通信Url
-Vue.prototype.mapJson = mapJson //请求地图json,不带端口号
+import Vue from 'vue';
+Vue.prototype.DOMIN = DOMIN;
+Vue.prototype.wsUrl = wsUrl; // 实时通信Url
+Vue.prototype.mapJson = mapJson; //请求地图json,不带端口号
 // console.log(DOMIN)
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+axios.defaults.headers.post['Content-Type'] =
+  'application/x-www-form-urlencoded;charset=UTF-8';
 axios.defaults.timeout = 30000;
-axios.defaults.withCredentials = true //axios请求时携带session
-axios.defaults.crossDomain = true
-axios.defaults.baseURL = DOMIN
-
+axios.defaults.withCredentials = true; //axios请求时携带session
+axios.defaults.crossDomain = true;
+axios.defaults.baseURL = DOMIN;
 
 // axios请求前的拦截
-axios.interceptors.request.use(req => {
-  // 判断当前请求url为weatherCondition或ipLocation时就不将axios的请求地址更换
-  let session = localStorage.getItem('session');
-  // console.log(session)
-  // let session = 'd5npOg/04dWL6f2YiywzUSyOzqayqnj7Qx8GNMyJhXMc='
-  let url;
-  if (req.url.split('=')[1]) {
-    url = req.url.split('=')[1]
-  } else {
-    url = req.url.split('api/')[1]
-  }
-  // if (req.method === 'post') {
-  //   // req.data = qs.stringify(req.data)
-  //   if (req.url !== '/api/api_gateway?method=user.login.login_user') {
-  //     req.data = req.data ? req.data + '&token=' + session : 'token=' + session;
-  //   }
-  // }
-  url = req.url.split('=')[1]
-  if (url !== 'sysmenage.usermanager.user_login' && url !== 'monitor_manage.cbd_manage.add_img' && req.url.indexOf('trap_export') == -1 && url !== "monitor_manage.home_map.home_theme"&& req.url.indexOf('monitor_point_export') == -1) {
-    req.data = req.data ? req.data + '&token=' + session : 'token=' + session;
+axios.interceptors.request.use(
+  req => {
+    // 判断当前请求url为weatherCondition或ipLocation时就不将axios的请求地址更换
+    let session = localStorage.getItem('session');
+    // console.log(session)
+    // let session = 'd5npOg/04dWL6f2YiywzUSyOzqayqnj7Qx8GNMyJhXMc='
+    let url;
+    if (req.url.split('=')[1]) {
+      url = req.url.split('=')[1];
+    } else {
+      url = req.url.split('api/')[1];
+    }
+    // if (req.method === 'post') {
+    //   // req.data = qs.stringify(req.data)
+    //   if (req.url !== '/api/api_gateway?method=user.login.login_user') {
+    //     req.data = req.data ? req.data + '&token=' + session : 'token=' + session;
+    //   }
+    // }
+    url = req.url.split('=')[1];
+    if (
+      url !== 'sysmenage.usermanager.user_login' &&
+      url !== 'monitor_manage.cbd_manage.add_img' &&
+      req.url.indexOf('trap_export') == -1 &&
+      url !== 'monitor_manage.home_map.home_theme' &&
+      req.url.indexOf('monitor_point_export') == -1
+    ) {
+      req.data = req.data ? req.data + '&token=' + session : 'token=' + session;
+    }
+    return req;
+  },
+  error => {
+    return Promise.reject(error);
   }
-  return req
-}, error => {
-  return Promise.reject(error)
-})
+);
 
 // //axios请求后的拦截
-axios.interceptors.response.use(res => {
-  if (res.data.data) {
-    // res.data.data.session_key && localStorage.setItem('session', res.data.data.session_key);
-  }
-  // console.log(res.data.message)
-  if (res.data.message != "" && res.data.message != undefined) {
-    if(res.data.errorCode==403){
-      setTimeout(()=>{
-        router.push("/Login");
-      },3000)
+axios.interceptors.response.use(
+  res => {
+    if (res.data.data) {
+      // res.data.data.session_key && localStorage.setItem('session', res.data.data.session_key);
     }
-    if (document.getElementsByClassName("el-message").length == 0) {
-      Message.warning(res.data.message);
+    // console.log(res.data.message)
+    if (res.data.message != '' && res.data.message != undefined) {
+      if (res.data.errorCode == 403) {
+        setTimeout(() => {
+          router.push('/Login');
+        }, 3000);
+      }
+      if (document.getElementsByClassName('el-message').length == 0) {
+        Message.warning(res.data.message);
+      }
+
+      return Promise.reject(res.data.message);
     }
-    
+    return res;
+  },
+  error => {
+    return Promise.reject(error);
   }
-  return res
-}, error => {
-  return Promise.reject(error)
-})
+);