Browse Source

封装导入组件

ljb 11 months ago
parent
commit
7ea1624b83

+ 85 - 0
src/components/upload-excel-dialog/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-dialog
+    title="数据导入"
+    append-to-body
+    :visible.sync="excelBox"
+    width="555px"
+  >
+    <avue-form
+      :option="options"
+      v-model="excelForm"
+      :upload-after="handleUploadAfter"
+    >
+      <template slot="excelTemplate">
+        <el-button type="primary" @click="handleTemplate">
+          点击下载<i class="el-icon-download el-icon--right"></i>
+        </el-button>
+      </template>
+    </avue-form>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "UploadExcelDialog",
+  props: {
+    uploadAfter: Function,
+  },
+  data() {
+    return {
+      excelBox: false,
+      url: "",
+      excelParams: {},
+    };
+  },
+  computed: {
+    options() {
+      return {
+        submitBtn: false,
+        emptyBtn: false,
+
+        column: [
+          {
+            label: "模板上传",
+            prop: "excelFile",
+            type: "upload",
+            drag: true,
+            loadText: "模板上传中,请稍等",
+            span: 24,
+            propsHttp: {
+              res: "data",
+            },
+            data: this.excelParams,
+            tip: "请上传 .xls,.xlsx 标准格式文件",
+            action: this.url,
+          },
+          {
+            label: "模板下载",
+            prop: "excelTemplate",
+            formslot: true,
+            span: 24,
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    open(url, excelParams) {
+      this.excelBox = true;
+      this.url = url;
+      this.excelParams = excelParams;
+    },
+    handleUploadAfter(res, done, loading, column) {
+      this.excelBox = false;
+      this.uploadAfter && this.uploadAfter(res, done, loading, column);
+      done();
+    },
+    handleTemplate() {
+      this.$message.warning("暂未设置模板");
+      // exportBlob(`/api/kd-system/region/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
+      //   downloadXls(res.data, "技术人员花名册.xlsx");
+      // });
+    },
+  },
+};
+</script>

+ 9 - 58
src/views/high-tech-person-sum-list/index.vue

@@ -44,6 +44,8 @@
       
       
     </avue-crud>
     </avue-crud>
 
 
+    <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
+
     <el-dialog title="年度高新科技人员导入"
     <el-dialog title="年度高新科技人员导入"
       append-to-body
       append-to-body
       :visible.sync="excelBox"
       :visible.sync="excelBox"
@@ -63,9 +65,8 @@
 <script>
 <script>
 import {exportBloByPost} from "@/api/common";
 import {exportBloByPost} from "@/api/common";
 import YearMonthSelect from "@/components/year-month-select";
 import YearMonthSelect from "@/components/year-month-select";
+import UploadExcelDialog from "@/components/upload-excel-dialog";
 import moment from "moment";
 import moment from "moment";
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
 import {getToken} from "@/util/auth";
 import {getToken} from "@/util/auth";
 import {downloadXls} from "@/util/util";
 import {downloadXls} from "@/util/util";
 
 
@@ -73,16 +74,14 @@ import {downloadXls} from "@/util/util";
 export default window.$crudCommon({
 export default window.$crudCommon({
   components: {
   components: {
     YearMonthSelect,
     YearMonthSelect,
+    UploadExcelDialog
   },
   },
   data() {
   data() {
     return {
     return {
       params: {
       params: {
         yearAndMonth: moment(new Date()).format('YYYY'),
         yearAndMonth: moment(new Date()).format('YYYY'),
       },
       },
-      excelBox: false,
-      excelForm: {},
       
       
-      isSelAnnual: false, // 是否选择全年
     };
     };
   },
   },
   watch: {
   watch: {
@@ -91,68 +90,20 @@ export default window.$crudCommon({
       this.getList(this.page);
       this.getList(this.page);
     }
     }
   },
   },
-  computed: {
-    excelOption() {
-      return {
-        submitBtn: false,
-        emptyBtn: false,
-        column: [
-          {
-            label: '模板上传',
-            prop: 'excelFile',
-            type: 'upload',
-            drag: true,
-            loadText: '模板上传中,请稍等',
-            span: 24,
-            propsHttp: {
-              res: 'data'
-            },
-            data: {
-              yearAndMonth: this.params.yearAndMonth,
-            },
-            tip: '请上传 .xls,.xlsx 标准格式文件',
-            action: '/api/kd-scientific/technician/import'
-          },
-          {
-            label: '模板下载',
-            prop: 'excelTemplate',
-            formslot: true,
-            span: 24,
-          }
-        ]
-      }    
-    },
-  },
   methods: {
   methods: {
     handleImport() {
     handleImport() {
-      this.excelBox = true;
-      this.excelForm.yearAndMonth = this.params.yearAndMonth;
+      let excelParams = { yearAndMonth: this.params.yearAndMonth };
+      this.$refs.uploadExcelDialog.open('/api/kd-scientific/technician/import', excelParams);
     },
     },
-    uploadAfter(res, done, loading, column) {
-      this.excelBox = false;
+    uploadAfter() {
       this.page.currentPage = 1;
       this.page.currentPage = 1;
       this.getList(this.page);
       this.getList(this.page);
-      done();
     },
     },
     handleExport() {
     handleExport() {
-      this.$confirm("是否导出?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        NProgress.start();
-        exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
-          downloadXls(res.data, `${this.params.yearAndMonth}年度高新科技人员汇总表.xlsx`);
-          NProgress.done();
-        })
+      exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
+        downloadXls(res.data, `技术人员花名册${this.params.yearAndMonth}.xlsx`);
       });
       });
     },
     },
-    handleTemplate() {
-      this.$message.warning("暂未配置模板");
-      // exportBlob(`/api/kd-system/region/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
-      //   downloadXls(res.data, "技术人员花名册.xlsx");
-      // });
-    },
   },
   },
 }, {
 }, {
   // 模块路径
   // 模块路径

+ 8 - 68
src/views/technician-month-avg-sales/index.vue

@@ -56,19 +56,7 @@
       
       
     </avue-crud>
     </avue-crud>
 
 
-    <el-dialog title="数据导入"
-      append-to-body
-      :visible.sync="excelBox"
-      width="555px"
-    >
-      <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
-        <template slot="excelTemplate">
-          <el-button type="primary" @click="handleTemplate">
-            点击下载<i class="el-icon-download el-icon--right"></i>
-          </el-button>
-        </template>
-      </avue-form>
-    </el-dialog>
+    <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
   </basic-container>
   </basic-container>
 </template>
 </template>
 
 
@@ -77,9 +65,8 @@ import { getLastMonthData } from "@/api/technicianMonthAvgSales";
 import {exportBloByPost} from "@/api/common";
 import {exportBloByPost} from "@/api/common";
 import YearMonthSelect from "@/components/year-month-select";
 import YearMonthSelect from "@/components/year-month-select";
 import UpdatedText from "@/components/updated-text";
 import UpdatedText from "@/components/updated-text";
+import UploadExcelDialog from "@/components/upload-excel-dialog";
 import moment from "moment";
 import moment from "moment";
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
 import {getToken} from "@/util/auth";
 import {getToken} from "@/util/auth";
 import {downloadXls} from "@/util/util";
 import {downloadXls} from "@/util/util";
 import Decimal from "decimal.js";
 import Decimal from "decimal.js";
@@ -89,14 +76,13 @@ export default window.$crudCommon({
   components: {
   components: {
     YearMonthSelect,
     YearMonthSelect,
     UpdatedText,
     UpdatedText,
+    UploadExcelDialog,
   },
   },
   data() {
   data() {
     return {
     return {
       params: {
       params: {
         yearAndMonth: moment(new Date()).format('YYYY'),
         yearAndMonth: moment(new Date()).format('YYYY'),
       },
       },
-      excelBox: false,
-      excelForm: {},
 
 
       operateType: '',
       operateType: '',
       watchUpdateKey: ["averageMonthlySalary", "pensionInsurance", "medicalInsurance", "unemploymentInsurance", "injuryInsurance", "maternityInsurance", "providentFund"],
       watchUpdateKey: ["averageMonthlySalary", "pensionInsurance", "medicalInsurance", "unemploymentInsurance", "injuryInsurance", "maternityInsurance", "providentFund"],
@@ -110,39 +96,6 @@ export default window.$crudCommon({
       this.getList(this.page);
       this.getList(this.page);
     }
     }
   },
   },
-  computed: {
-    excelOption() {
-      return {
-        submitBtn: false,
-        emptyBtn: false,
-        
-        column: [
-          {
-            label: '模板上传',
-            prop: 'excelFile',
-            type: 'upload',
-            drag: true,
-            loadText: '模板上传中,请稍等',
-            span: 24,
-            propsHttp: {
-              res: 'data'
-            },
-            data: {
-              yearAndMonth: this.params.yearAndMonth,
-            },
-            tip: '请上传 .xls,.xlsx 标准格式文件',
-            action: '/api/kd-scientific/technician/import'
-          },
-          {
-            label: '模板下载',
-            prop: 'excelTemplate',
-            formslot: true,
-            span: 24,
-          }
-        ]
-      }    
-    },
-  },
   created() {
   created() {
     let newOption = { ...this.option };
     let newOption = { ...this.option };
     // 姓名下拉框,设置监听事件
     // 姓名下拉框,设置监听事件
@@ -210,31 +163,18 @@ export default window.$crudCommon({
       return delArr;
       return delArr;
     },
     },
     handleImport() {
     handleImport() {
-      this.excelBox = true;
-      this.excelForm.yearAndMonth = this.params.yearAndMonth;
+      let excelParams = { yearAndMonth: this.params.yearAndMonth };
+      this.$refs.uploadExcelDialog.open('/api/kd-scientific/salary/import', excelParams);
     },
     },
-    uploadAfter(res, done, loading, column) {
-      this.excelBox = false;
+    uploadAfter() {
       this.page.currentPage = 1;
       this.page.currentPage = 1;
       this.getList(this.page);
       this.getList(this.page);
-      done();
     },
     },
     handleExport() {
     handleExport() {
-      this.$confirm("是否导出吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        NProgress.start();
-        exportBloByPost(`/api/kd-scientific/salary/export-salary?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
-          downloadXls(res.data, `技术人员${this.params.yearAndMonth}年度平均工资.xlsx`);
-          NProgress.done();
-        })
+      exportBloByPost(`/api/kd-scientific/salary/export-salary?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
+        downloadXls(res.data, `技术人员${this.params.yearAndMonth}年度平均工资.xlsx`);
       });
       });
     },
     },
-    handleTemplate() {
-      this.$message.warning("暂未配置模板");
-    },
     handleReadyLastMonData() {
     handleReadyLastMonData() {
       this.$confirm("确认读取上年度工资明细吗?", "提示", {
       this.$confirm("确认读取上年度工资明细吗?", "提示", {
         confirmButtonText: "确定",
         confirmButtonText: "确定",

+ 8 - 74
src/views/technician-roster/index.vue

@@ -54,19 +54,7 @@
       
       
     </avue-crud>
     </avue-crud>
 
 
-    <el-dialog title="技术人员花名册导入"
-      append-to-body
-      :visible.sync="excelBox"
-      width="555px"
-    >
-      <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
-        <template slot="excelTemplate">
-          <el-button type="primary" @click="handleTemplate">
-            点击下载<i class="el-icon-download el-icon--right"></i>
-          </el-button>
-        </template>
-      </avue-form>
-    </el-dialog>
+    <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
   </basic-container>
   </basic-container>
 </template>
 </template>
 
 
@@ -74,9 +62,8 @@
 import { getLastMonthData } from "@/api/technicianRoster";
 import { getLastMonthData } from "@/api/technicianRoster";
 import {exportBloByPost} from "@/api/common";
 import {exportBloByPost} from "@/api/common";
 import YearMonthSelect from "@/components/year-month-select";
 import YearMonthSelect from "@/components/year-month-select";
+import UploadExcelDialog from "@/components/upload-excel-dialog";
 import moment from "moment";
 import moment from "moment";
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
 import {getToken} from "@/util/auth";
 import {getToken} from "@/util/auth";
 import {downloadXls} from "@/util/util";
 import {downloadXls} from "@/util/util";
 
 
@@ -84,15 +71,13 @@ import {downloadXls} from "@/util/util";
 export default window.$crudCommon({
 export default window.$crudCommon({
   components: {
   components: {
     YearMonthSelect,
     YearMonthSelect,
+    UploadExcelDialog,
   },
   },
   data() {
   data() {
     return {
     return {
       params: {
       params: {
         yearAndMonth: moment(new Date()).format('YYYYMM'),
         yearAndMonth: moment(new Date()).format('YYYYMM'),
       },
       },
-      excelBox: false,
-      excelForm: {},
-      
       isSelAnnual: false, // 是否选择全年
       isSelAnnual: false, // 是否选择全年
     };
     };
   },
   },
@@ -116,43 +101,6 @@ export default window.$crudCommon({
         delBtn: !this.isSelAnnual,
         delBtn: !this.isSelAnnual,
       };
       };
     },
     },
-    excelOption() {
-      return {
-        submitBtn: false,
-        emptyBtn: false,
-        column: [
-          {
-            label: '上传月份',
-            prop: 'yearAndMonth',
-            type: 'input',
-            span: 24,
-            disabled: true,
-          },
-          {
-            label: '模板上传',
-            prop: 'excelFile',
-            type: 'upload',
-            drag: true,
-            loadText: '模板上传中,请稍等',
-            span: 24,
-            propsHttp: {
-              res: 'data'
-            },
-            data: {
-              yearAndMonth: this.params.yearAndMonth,
-            },
-            tip: '请上传 .xls,.xlsx 标准格式文件',
-            action: '/api/kd-scientific/technician/import'
-          },
-          {
-            label: '模板下载',
-            prop: 'excelTemplate',
-            formslot: true,
-            span: 24,
-          }
-        ]
-      }    
-    },
   },
   },
   methods: {
   methods: {
     validCustom() {
     validCustom() {
@@ -177,33 +125,20 @@ export default window.$crudCommon({
       callback && callback();
       callback && callback();
     },
     },
     handleImport() {
     handleImport() {
-      this.excelBox = true;
-      this.excelForm.yearAndMonth = this.params.yearAndMonth;
+      let excelParams = { yearAndMonth: this.params.yearAndMonth };
+      this.$refs.uploadExcelDialog.open('/api/kd-scientific/technician/import', excelParams);
     },
     },
-    uploadAfter(res, done, loading, column) {
-      this.excelBox = false;
+    uploadAfter() {
       this.page.currentPage = 1;
       this.page.currentPage = 1;
       this.getList(this.page);
       this.getList(this.page);
-      done();
     },
     },
     handleExport() {
     handleExport() {
-      this.$confirm("是否导出当前月份技术人员花名册?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        NProgress.start();
-        exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
-          downloadXls(res.data, `技术人员花名册${this.params.yearAndMonth}.xlsx`);
-          NProgress.done();
-        })
+      exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
+        downloadXls(res.data, `技术人员花名册${this.params.yearAndMonth}.xlsx`);
       });
       });
     },
     },
     handleTemplate() {
     handleTemplate() {
       this.$message.warning("暂未配置模板");
       this.$message.warning("暂未配置模板");
-      // exportBlob(`/api/kd-system/region/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
-      //   downloadXls(res.data, "技术人员花名册.xlsx");
-      // });
     },
     },
     handleReadyLastMonData() {
     handleReadyLastMonData() {
       this.$confirm("确认要读取上个月的数据吗?", "提示", {
       this.$confirm("确认要读取上个月的数据吗?", "提示", {
@@ -211,7 +146,6 @@ export default window.$crudCommon({
         cancelButtonText: "取消",
         cancelButtonText: "取消",
         type: "warning"
         type: "warning"
       }).then(() => {
       }).then(() => {
-        // let lastMonth = moment(this.params.yearAndMonth).subtract(1, 'months').format("YYYY-MM");
         getLastMonthData({ yearAndMonth: this.params.yearAndMonth}).then(res => {
         getLastMonthData({ yearAndMonth: this.params.yearAndMonth}).then(res => {
           let data = res.data;
           let data = res.data;
           if (data.success) {
           if (data.success) {