feat: 任务中心进度页面完成

src/components/table/table.vue

@@ -15,7 +15,7 @@
             </div>
         </my-card>
 
-        <my-card>
+        <my-card :class="noPadding ? 'tw-p-0' : ''">
             <a-space class="tw-mb-2">
                 <a-button type="primary" v-if="newBtn" @click="addBtnClick">
                     {{ newBtn.text || '新增' }}
@@ -42,17 +42,18 @@
         </my-card>
 
         <a-drawer
+            v-if="$scopedSlots.drawer"
             placement="right"
             :visible="visible"
             :drawerStyle="drawerStyle"
             :bodyStyle="bodyStyle"
             destroyOnClose
-            :width="600"
+            :width="drawerWidth"
             @close="hidden"
             :maskClosable="false"
             :title="title"
         >
-            <slot name="drawer" :hidden="hidden" :refresh="getData" />
+            <slot name="drawer" :hidden="hidden" :refresh="getData" :type="type" :row="row" />
         </a-drawer>
     </div>
 </template>
@@ -60,6 +61,8 @@
 <script>
 import { request, METHOD } from '@/utils/requestUtil';
 
+const assign = Object.assign;
+
 const initQuery = {
     pageSize: 10,
     pageNum: 1,
@@ -76,6 +79,11 @@ export default {
         formatData: Function,
         rowKey: [String, Function],
         selected: Array,
+        drawerWidth: {
+            type: Number,
+            default: 600,
+        },
+        noPadding: Boolean,
     },
 
     data() {
@@ -99,6 +107,8 @@ export default {
                 flex: 1,
                 overflow: 'hidden',
             },
+            type: 'add',
+            row: null,
         };
     },
 
@@ -161,11 +171,13 @@ export default {
         hidden() {
             this.visible = false;
             this.title = this.addBtn?.title ?? defaultTitle;
+            this.type = 'add';
+            this.row = null;
         },
 
-        show({ title } = {}) {
+        show(params) {
             this.visible = true;
-            if (title) this.title = title;
+            assign(this, params);
         },
 
         reset() {
@@ -179,10 +191,6 @@ export default {
             click && click();
             this.visible = true;
         },
-
-        getFormRef(ref) {
-            console.log(ref);
-        },
     },
 };
 </script>

src/components/table/wraper.vue

@@ -9,7 +9,7 @@
             <a-divider />
             <a-space class="tw-justify-end">
                 <a-button @click="cancel">取消</a-button>
-                <slot name="footer">
+                <slot name="footer" v-if="!noFooter">
                     <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
                 </slot>
             </a-space>
@@ -35,6 +35,10 @@ export default {
             type: Function,
             default: EMPTY_FUN,
         },
+        noFooter: {
+            type: Boolean,
+            default: false,
+        },
     },
     data: () => ({
         loading: false,

src/pages/frame/view/login/Login.vue

@@ -89,11 +89,23 @@ export default {
             checked: true,
             logging: false,
             form: this.$form.createForm(this),
+            back: null,
         };
     },
     created() {
         clearToken();
     },
+
+    beforeRouteEnter(to, from, next) {
+        const {
+            query: { back },
+        } = to;
+        const { fullPath } = from;
+        next((vm) => {
+            if (back) vm.back = fullPath;
+        });
+    },
+
     computed: {
         applicationName() {
             return this.$store.state.settingModule.systemName;
@@ -102,7 +114,7 @@ export default {
     methods: {
         onSubmit(e) {
             e.preventDefault();
-            this.form.validateFields(async err => {
+            this.form.validateFields(async (err) => {
                 if (!err) {
                     this.logging = true;
                     const userName = this.form.getFieldValue('userName');
@@ -113,7 +125,7 @@ export default {
                         setToken(token);
                         setUserId(userId);
                         await setUserInfoByRequest();
-                        this.$router.replace('/');
+                        this.$router.replace(this.back ? this.back : '/');
                     } catch (error) {
                         // todo
                     }

src/pages/xunjian/task_managment/center/index.vue

@@ -5,8 +5,10 @@
         rowKey="jobId"
         :addBtn="addBtn"
         :selected.sync="selected"
+        ref="table"
+        :drawerWidth="800"
     >
-        <template #search="{query}">
+        <template #search="{ query }">
             <my-form-item label="开始时间">
                 <a-date-picker
                     class="tw-w-full"
@@ -94,8 +96,9 @@
             <a-button @click="download">导出</a-button>
         </template>
 
-        <template #drawer="drawer">
-            <Form v-bind="drawer" />
+        <template #drawer="{ hidden, refresh, type, row }">
+            <Form :hidden="hidden" :refresh="refresh" v-if="type === 'add'" />
+            <Progress v-if="type === 'progress'" :hidden="hidden" :row="row" />
         </template>
 
         <a-table-column title="线路名称" data-index="routeName" />
@@ -120,9 +123,10 @@ import { downloadFileByUrl } from '@/utils';
 import RequestSelect from '@/components/MySelect/RequestSelect.vue';
 import SearchSelect from '@/components/MySelect/search_select.vue';
 import { getAreaListDataApi, getBusinessListApi, getBanZuListApi, getTaskTypeApi } from '@/api';
+import Progress from './progress.vue';
 
 export default {
-    components: { Table, Form, RequestSelect, UrlSelect, SearchSelect },
+    components: { Table, Form, RequestSelect, UrlSelect, SearchSelect, Progress },
     data() {
         return {
             getAreaListDataApi,
@@ -136,8 +140,12 @@ export default {
                 {
                     label: '详情',
                 },
-                { label: '进度' },
-                { type: 'confirm' },
+                { label: '进度', click: this.viewProgress },
+                {
+                    type: 'confirm',
+                    url: (row) => `/ranger/inspection/api/v1/jobs/${row.jobId}`,
+                    after: this.refresh,
+                },
             ],
             selected: [],
         };
@@ -148,6 +156,12 @@ export default {
             const url = await getXunJianDownloadUrlApi(this.selected[0]);
             downloadFileByUrl(`${this.$fileUrl}${url}`);
         },
+        refresh() {
+            this.$refs['table'].getData();
+        },
+        viewProgress(row) {
+            this.$refs.table.show({ title: '任务进度', type: 'progress', row });
+        },
     },
 };
 </script>

src/pages/xunjian/task_managment/center/progress.vue

+<template>
+    <Wraper noFooter :hidden="hidden">
+        <a-space class="tw-mb-6" size="large">
+            <span>
+                地点
+                <span class="tw-text-blue-500 tw-mx-1">{{ row.placeNum }}</span>
+                个
+            </span>
+            <span>
+                单元
+                <span class="tw-text-blue-500 tw-mx-1">{{ row.unitNum }}</span>
+                个
+            </span>
+            <span>
+                项目
+                <span class="tw-text-blue-500 tw-mx-1">{{ row.itemNum }}</span>
+                个
+            </span>
+            <span>
+                异常
+                <span class="tw-text-red-500 tw-mx-1">{{ row.abnormalNum }}</span>
+                个
+            </span>
+            <span>
+                完成率
+                <span class="tw-text-blue-500 tw-mx-1">
+                    {{ row.unitNum ? (row.finishedNum / row.unitNum).toFixed(2) : 0 }}
+                </span>
+            </span>
+        </a-space>
+        <Table :url="tableUrl" rowKey="progressId" noPadding>
+            <a-table-column title="地点名称" data-index="placeName" />
+            <a-table-column title="开始时间" data-index="inspectionStartTime" />
+            <a-table-column title="结束时间" data-index="inspectionEndTime" />
+            <a-table-column title="状态" data-index="inspectionStateName" />
+        </Table>
+    </Wraper>
+</template>
+
+unitNum, itemNum, abnormalNum, placeNum, finishedPercent: formatFloat((finishedNum / unitNum * 100), 2),
+
+<script>
+import Wraper from '@/components/table/wraper.vue';
+import Table from '@/components/table/table.vue';
+
+export default {
+    props: { hidden: Function, row: Object },
+    components: { Wraper, Table },
+    mounted() {
+        console.log(this.row);
+    },
+    computed: {
+        tableUrl() {
+            return `/ranger/inspection/api/v1/jobs/progress?jobId=${this.row.jobId}`;
+        },
+    },
+};
+</script>

src/utils/requestUtil.js

@@ -18,7 +18,7 @@ axios.defaults.baseURL = '/api';
  */
 function loadResponseInterceptor({ router }) {
     axios.interceptors.request.use(
-        function(config) {
+        function (config) {
             // 在发送请求之前做些什么
             config.headers = {
                 ...config.headers,
@@ -27,7 +27,7 @@ function loadResponseInterceptor({ router }) {
             };
             return config;
         },
-        function(error) {
+        function (error) {
             // 对请求错误做些什么
             return Promise.reject(error);
         },
@@ -35,7 +35,7 @@ function loadResponseInterceptor({ router }) {
 
     // 添加响应拦截器
     axios.interceptors.response.use(
-        function(response) {
+        function (response) {
             const { data } = response;
             // 2xx 范围内的状态码都会触发该函数。
             // 对响应数据做点什么
@@ -44,21 +44,21 @@ function loadResponseInterceptor({ router }) {
             }
 
             if (data.code === 'error.system.authc') {
-                router.push('/login');
+                router.push({ path: '/login', query: { back: true } });
             }
             notification.error({
                 message: data.code,
-                description: h => h('pre', data.message),
+                description: (h) => h('pre', data.message),
             });
 
             return Promise.reject(data.message);
         },
-        function(error) {
+        function (error) {
             // 超出 2xx 范围的状态码都会触发该函数。
             // 对响应错误做点什么
             notification.error({
                 message: `${error.response.status} ${error.response.statusText}`,
-                description: h => h('pre', error.message),
+                description: (h) => h('pre', error.message),
             });
             return Promise.reject(error);
         },