完善功能

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

@@ -8,7 +8,7 @@
                 <n-grid :cols="7" :x-gap="10">
                     <n-grid-item>
                         <n-select placeholder="请选择街道" v-model:value="search.select.area.value"
-                            :options="search.select.area.options" :clearable="true" @update:value="onAreaValueUpdate"/>
+                            :options="search.select.area.options" :clearable="true" @update:value="onAreaValueUpdate" />
                     </n-grid-item>
                     <n-grid-item>
                         <n-select placeholder="请选择社区" v-model:value="search.select.community.value"
@@ -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,
@@ -72,14 +74,14 @@ import {
     NButton,
     NDataTable,
     NModal,
-    NSpin, 
+    NSpin,
     useMessage,
     useDialog,
 } from 'naive-ui';
 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;
@@ -912,7 +963,7 @@ export default {
         listArea() {
             let vueSelf = this;
             vueSelf.$axios.get(`api/kpi/list-area`, {
-            }).then(({data}) => {
+            }).then(({ data }) => {
                 let optionArray = [];
                 data.forEach((item, index) => {
                     optionArray.push({
@@ -931,12 +982,12 @@ export default {
         listCommunity(areaId) {
             let vueSelf = this;
             vueSelf.search.select.community.value = null;
-            if(!areaId) {
+            if (!areaId) {
-                vueSelf.search.select.community.options = []; 
+                vueSelf.search.select.community.options = [];
-                return;        
+                return;
             }
             vueSelf.$axios.get(`api/kpi/list-community/area-id/${areaId}`, {
-            }).then(({data}) => {
+            }).then(({ data }) => {
                 let optionArray = [];
                 data.forEach((item, index) => {
                     optionArray.push({
@@ -953,15 +1004,8 @@ 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,
+            }).then(({ data }) => {
-                    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;
                     item.F = item.E === 0 ? 0 : item.D / item.E;
@@ -971,7 +1015,7 @@ export default {
                     item.S = item.R * 0.2;
                 })
                 this.table.data = data;
-            }).catch(({data}) => {
+            }).catch(({ data }) => {
                 vueSelf.message.error(data.msg);
             }).finally(() => {
                 vueSelf.dataLoading = false;

src/components/utils/common.js

@@ -28,4 +28,32 @@ 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;
     }
 }