完善功能

src/components/Index.vue

@@ -5,10 +5,10 @@
                 <n-button type="info" @click="onUpdateClick">更新</n-button>
                 <span>工作考核细则：</span>
                 <n-button ghost @click="onWgyClick">街道社区4-5级网格</n-button>
-                <n-button ghost @click="onDdyClick">区级与街道指挥调度中心（调度专管员）</n-button>
+                <!-- <n-button ghost @click="onDdyClick">区级与街道指挥调度中心（调度专管员）</n-button> -->
-                <n-button ghost @click="onZfGAClick">执法局、公安分局</n-button>
+                <!-- <n-button ghost @click="onZfGAClick">执法局、公安分局</n-button> -->
-                <n-button ghost @click="onWgy3Click">3 级网格长</n-button>
+                <!-- <n-button ghost @click="onWgy3Click">3 级网格长</n-button> -->
-                <n-button ghost @click="onZnbmClick">其他职能部门</n-button>
+                <!-- <n-button ghost @click="onZnbmClick">其他职能部门</n-button> -->
             </n-space>
         </n-layout-header>
         <n-layout-content>

src/components/table/Wgy.vue

@@ -32,7 +32,8 @@
                     <n-grid-item>
                         <n-space>
                             <n-button type="primary" @click="onSearchClick">搜索</n-button>
-                            <n-button type="info">导出</n-button>
+                            <n-button type="default" @click="onSaveClick">保存</n-button>
+                            <n-button type="info" @click="onExportClick" :disabled="btnExportDisabled">导出</n-button>
                         </n-space>
                     </n-grid-item>
                 </n-grid>
@@ -45,7 +46,8 @@
     </n-spin>
     <n-modal preset="dialog" style="width: 800px" :show="modal.distance.show" :show-icon="false" :mask-closable="true"
         :closable="false" :on-update-show="onDistancenCloseClick">
-        <wgy-work :user-id="search.userId" :user-name="search.userName" :year="search.select.year.value" :month="search.select.month.value" :level="search.select.wgy.value"/>
+        <wgy-work :user-id="search.userId" :user-name="search.userName" :year="search.select.year.value"
+            :month="search.select.month.value" :level="search.select.wgy.value" />
     </n-modal>
     <n-modal preset="dialog" style="width: 800px" :show="modal.reportDay.show" :show-icon="false" :mask-closable="true"
         :closable="false" :on-update-show="onReportDayCloseClick">
@@ -61,7 +63,7 @@
 </template>
 
 <script>
-import { h } from 'vue';
+import { createElementBlock, h } from 'vue';
 import {
     NSpace,
     NGrid,
@@ -79,7 +81,7 @@ import {
 import WgyWork from '../common/WgyWork.vue'
 import WgyReportDay from '../common/WgyReportDay.vue'
 import Scoring from '../common/Scoring.vue';
-import { listYear, listMonth, getCurrentYear, getCurrentMonth } from '../utils/common'
+import { listYear, listMonth, getCurrentYear, getCurrentMonth, download } from '../utils/common'
 
 export default {
     name: 'Wgy',
@@ -105,6 +107,8 @@ export default {
             message: useMessage(),
             dialog: useDialog(),
             dataLoading: false,
+            btnExportDisabled: false,
+            isEdit: false,
             search: {
                 userId: null,
                 userName: null,
@@ -682,7 +686,7 @@ export default {
         // 片区巡查打开
         onDistanceClick(row, index) {
             let distance = row.C;
-            this.search.userId = row.user_id;
+            this.search.userId = row.userId;
             this.search.userName = row.B;
             this.modal.distance.show = true;
         },
@@ -903,6 +907,53 @@ export default {
         onSearchClick() {
             this.listData();
         },
+        onSaveClick() {
+            let vueSelf = this;
+            let tableDatas = [];
+            vueSelf.table.data.forEach(item => {
+                item.AE = vueSelf.computeAE(item);
+                item.AG = (item.AE * item.AF / 100).toFixed(2);
+                tableDatas.push({...item});
+            })
+            vueSelf.dialog.warning({
+                title: "提示",
+                content: "确定更新吗？",
+                positiveText: "确定",
+                negativeText: "取消",
+                onPositiveClick: () => {
+                    vueSelf.dataLoading = true;
+                    vueSelf.$axios.put(`api/kpi/khxz/update-wgy/${vueSelf.search.select.wgy.value}`, {
+                        datas: tableDatas
+                    }).then( resp => {
+                        vueSelf.message.info('保存成功');
+                    }).catch( ({data}) => {
+                        console.error(resp);
+                        vueSelf.message.error(data.data.msg);
+                    }).finally(() => {
+                        vueSelf.dataLoading = false;
+                    });
+                },
+                onNegativeClick: () => {
+                }
+            })
+        },
+        getQuery() {
+            return {
+                areaId: this.search.select.area.value,
+                communityId: this.search.select.community.value,
+                khYear: this.search.select.year.value,
+                khMonth: this.search.select.month.value,
+                wgyLevel: this.search.select.wgy.value,
+                keywords: this.search.input.keywords
+            }
+        },
+        onExportClick() {
+            let vueSelf = this;
+            vueSelf.btnExportDisabled = true;
+            download(vueSelf.$axios, `api/kpi/khxz/export-wgy`, vueSelf.getQuery(), () => {
+                vueSelf.btnExportDisabled = false;
+            });
+        },
         resize() {
             let body = document.body;
             this.table.minHeight = body.clientHeight - 408;
@@ -953,14 +1004,7 @@ export default {
             let vueSelf = this;
             vueSelf.dataLoading = true;
             vueSelf.$axios.get(`api/kpi/khxz/list-wgy`, {
-                params: {
+                params: vueSelf.getQuery()
-                    areaId: vueSelf.search.select.area.value,
-                    communityId: vueSelf.search.select.community.value,
-                    khYear: vueSelf.search.select.year.value,
-                    khMonth: vueSelf.search.select.month.value,
-                    wgyLevel: vueSelf.search.select.wgy.value,
-                    keywords: vueSelf.search.input.keywords
-                }
             }).then(({ data }) => {
                 data.forEach((item, index) => {
                     item.A = index + 1;

src/components/utils/common.js

@@ -29,3 +29,31 @@ export const listMonth = () => {
     }
     return array;
 }
+
+export const download = ($axios, url, params, callback) => {
+    $axios.get(url, {
+        params: params,
+        responseType: 'blob'
+    }).then(resp => {
+        const href = window.URL.createObjectURL(new Blob([resp.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}));
+        let contentDisposition = resp.headers['content-disposition'];  
+        let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
+        let result = patt.exec(contentDisposition);
+        let filename = decodeURI(result[1]);
+        let downloadElement = document.createElement('a');
+        downloadElement.style.display = 'none';
+        downloadElement.href = href;
+        //下载后文件名
+        downloadElement.download = filename ; 
+        document.body.appendChild(downloadElement);
+        //点击下载
+        downloadElement.click(); 
+        //下载完成移除元素
+        document.body.removeChild(downloadElement); 
+        window.URL.revokeObjectURL(href);
+    }).catch(resp => {
+        console.error(resp);
+    }).finally(() => {
+        callback ? callback() : '';
+    });
+}

src/main.js

@@ -26,7 +26,7 @@ const router = createRouter({
 const createAxios = {
     install(app, options) {
         axios.defaults.baseURL = 'http://127.0.0.1:8087/bigdata';
-        axios.defaults.timeout = 6000;
+        axios.defaults.timeout = 20000;
         app.config.globalProperties.$axios = axios;
     }
 }