From a3bf1b58e274498eed363cf05a546184b8a7681f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E8=90=BD=28YangLei=29?= <lzi.love@icloud.com>
Date: Fri, 9 Jul 2021 16:36:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=BB=E5=8A=A1=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MySelect/search_select.vue     |   1 +
 src/components/table/more_item.vue            |  14 ++
 src/components/table/table.vue                |  73 ++++++--
 .../xunjian/task_managment/center/detail.vue  | 158 ++++++++++++++++++
 .../xunjian/task_managment/center/index.vue   |  73 +++++---
 .../task_managment/center/progress.vue        |   2 -
 6 files changed, 289 insertions(+), 32 deletions(-)
 create mode 100644 src/components/table/more_item.vue
 create mode 100644 src/pages/xunjian/task_managment/center/detail.vue

diff --git a/src/components/MySelect/search_select.vue b/src/components/MySelect/search_select.vue
index 2ae0aae..a2fb3ff 100644
--- a/src/components/MySelect/search_select.vue
+++ b/src/components/MySelect/search_select.vue
@@ -1,6 +1,7 @@
 <template>
     <a-select
         show-search
+        class="tw-w-full"
         placeholder="input search text"
         :default-active-first-option="false"
         :show-arrow="false"
diff --git a/src/components/table/more_item.vue b/src/components/table/more_item.vue
new file mode 100644
index 0000000..b471524
--- /dev/null
+++ b/src/components/table/more_item.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <label>{{ label }}</label>
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        label: String,
+    },
+};
+</script>
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index c20272e..456ac1f 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -1,14 +1,20 @@
 <template>
     <div>
         <my-card v-if="$scopedSlots.search" class="tw-mb-2.5">
-            <a-form-model :model="queryForm" layout="horizontal">
-                <a-row :gutter="16">
-                    <slot name="search" :query="queryForm" />
-                </a-row>
+            <a-form-model :model="queryForm" layout="inline">
+                <slot name="search" :query="queryForm" />
             </a-form-model>
 
             <div class="tw-text-right tw-mt-2">
                 <a-space>
+                    <a-popover v-if="$scopedSlots.moreSearch" trigger="click">
+                        <template slot="content">
+                            <div :class="$style.moreSearch">
+                                <slot name="moreSearch" :query="queryForm" />
+                            </div>
+                        </template>
+                        <a-button>更多查询</a-button>
+                    </a-popover>
                     <a-button @click="reset">重置</a-button>
                     <a-button type="primary" @click="getData">查询</a-button>
                 </a-space>
@@ -27,15 +33,20 @@
                 :data-source="data"
                 :loading="loading"
                 v-bind="$attrs"
+                :scroll="scroll"
                 :rowKey="rowKey"
                 :pagination="pagination"
                 @change="pageChange"
                 :row-selection="selected ? rowSelection : undefined"
             >
                 <slot />
-                <a-table-column title="操作" v-if="buttons">
+                <a-table-column
+                    :title="newButtons.title"
+                    v-if="this.newButtons"
+                    v-bind="this.newButtons.options"
+                >
                     <template #default="row">
-                        <my-ac-btn :row="row" :buttons="buttons" />
+                        <my-ac-btn :row="row" :buttons="newButtons.data" />
                     </template>
                 </a-table-column>
             </a-table>
@@ -52,6 +63,7 @@
             @close="hidden"
             :maskClosable="false"
             :title="title"
+            :afterVisibleChange="afterVisibleChange"
         >
             <slot name="drawer" :hidden="hidden" :refresh="getData" :type="type" :row="row" />
         </a-drawer>
@@ -74,7 +86,7 @@ export default {
     props: {
         url: String,
         addBtn: [Object, Boolean],
-        buttons: Array,
+        buttons: [Array, Object],
         noPage: Boolean,
         formatData: Function,
         rowKey: [String, Function],
@@ -84,6 +96,7 @@ export default {
             default: 600,
         },
         noPadding: Boolean,
+        scroll: Object,
     },
 
     data() {
@@ -107,7 +120,7 @@ export default {
                 flex: 1,
                 overflow: 'hidden',
             },
-            type: 'add',
+            type: null,
             row: null,
         };
     },
@@ -120,6 +133,13 @@ export default {
         newBtn() {
             return this.addBtn ? (typeof this.addBtn === 'object' ? this.addBtn : {}) : this.addBtn;
         },
+        newButtons() {
+            return this.buttons
+                ? Array.isArray(this.buttons)
+                    ? { data: this.buttons, title: '操作' }
+                    : this.buttons
+                : null;
+        },
         pagination() {
             return this.noPage
                 ? false
@@ -170,9 +190,13 @@ export default {
 
         hidden() {
             this.visible = false;
-            this.title = this.addBtn?.title ?? defaultTitle;
-            this.type = 'add';
-            this.row = null;
+        },
+        afterVisibleChange(visible) {
+            if (!visible) {
+                this.title = this.addBtn?.title ?? defaultTitle;
+                this.type = null;
+                this.row = null;
+            }
         },
 
         show(params) {
@@ -189,8 +213,35 @@ export default {
         addBtnClick() {
             const { click } = typeof this.addBtn === 'object' ? this.addBtn : {};
             click && click();
+            this.type = 'add';
             this.visible = true;
         },
     },
 };
 </script>
+
+<style module lang="less">
+.moreSearch {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    padding: 15px 0 0 0;
+
+    > div {
+        display: flex;
+        align-items: center;
+        @apply tw-mb-3;
+
+        > label {
+            color: rgba(0, 0, 0, 0.85);
+            width: 6em;
+            text-align: right;
+            margin-right: 1em;
+
+            &::after {
+                content: ':';
+            }
+        }
+    }
+}
+</style>
diff --git a/src/pages/xunjian/task_managment/center/detail.vue b/src/pages/xunjian/task_managment/center/detail.vue
new file mode 100644
index 0000000..99a4737
--- /dev/null
+++ b/src/pages/xunjian/task_managment/center/detail.vue
@@ -0,0 +1,158 @@
+<template>
+    <Wraper :hidden="hidden" noFooter>
+        <Table :url="tableUrl" rowKey="taskId" noPadding :buttons="buttons" :scroll="scroll">
+            <template #search="{ query }">
+                <a-form-model-item label="开始时间">
+                    <a-date-picker
+                        class="tw-w-full"
+                        show-time
+                        v-model="query.startTime"
+                        valueFormat="YYYY-MM-DD HH:mm:ss"
+                    />
+                </a-form-model-item>
+                <a-form-model-item label="结束时间">
+                    <a-date-picker
+                        class="tw-w-full"
+                        show-time
+                        v-model="query.endTime"
+                        valueFormat="YYYY-MM-DD HH:mm:ss"
+                    />
+                </a-form-model-item>
+            </template>
+
+            <template #moreSearch="{ query }">
+                <MoreItem label="开始时间">
+                    <a-date-picker
+                        class="tw-w-full"
+                        show-time
+                        v-model="query.startTime"
+                        valueFormat="YYYY-MM-DD HH:mm:ss"
+                    />
+                </MoreItem>
+                <MoreItem label="结束时间">
+                    <a-date-picker
+                        class="tw-w-full"
+                        show-time
+                        v-model="query.endTime"
+                        valueFormat="YYYY-MM-DD HH:mm:ss"
+                    />
+                </MoreItem>
+                <MoreItem label="地点">
+                    <UrlSelect
+                        v-model="query.placeId"
+                        :url="`/ranger/inspection/api/v1/place/regions/${row.regionId}/list`"
+                        labelFiled="placeName"
+                        valueFiled="placeId"
+                    />
+                </MoreItem>
+
+                <MoreItem label="单元">
+                    <UrlSelect
+                        v-model="query.unitId"
+                        :url="
+                            query.placeId
+                                ? `/ranger/inspection/api/v1/units/places/${query.placeId}/list`
+                                : ''
+                        "
+                        labelFiled="unitName"
+                        valueFiled="unitId"
+                    />
+                </MoreItem>
+
+                <MoreItem label="项目">
+                    <UrlSelect
+                        v-model="query.itemId"
+                        :url="
+                            query.unitId ? `/ranger/inspection/api/v1/items/units/${query.unitId}/list` : ''
+                        "
+                        labelFiled="itemName"
+                        valueFiled="itemId"
+                    />
+                </MoreItem>
+
+                <MoreItem label="巡检状态">
+                    <UrlSelect
+                        v-model="query.inspectionState"
+                        :url="zhuangTaiUrl"
+                        labelFiled="paramName"
+                        valueFiled="paramValue"
+                    />
+                </MoreItem>
+
+                <MoreItem label="巡查结果">
+                    <UrlSelect
+                        :url="xunChaJieGuoUrl"
+                        v-model="query.inspectionResultName"
+                        labelFiled="paramName"
+                        valueFiled="paramValue"
+                    />
+                </MoreItem>
+
+                <MoreItem label="巡检人">
+                    <SearchSelect
+                        url="/api/v1/users/searching"
+                        searchField="userName"
+                        v-model="query.lastInspectionStaffId"
+                        labelFiled="userName"
+                        valueFiled="userId"
+                    />
+                </MoreItem>
+            </template>
+
+            <a-table-column title="巡检项目" data-index="taskName" />
+            <a-table-column title="参考值" data-index="referenceValue" width="150px" />
+            <a-table-column title="采集数据" data-index="value" width="150px" />
+            <a-table-column title="巡查结果" data-index="inspectionResultName" width="100px" />
+            <a-table-column title="巡查时间" data-index="inspectionTime" width="200px" />
+            <a-table-column title="巡检人" data-index="inspectionStaffName" width="100px" />
+            <a-table-column title="状态" data-index="inspectionStateName" width="100px" />
+        </Table>
+    </Wraper>
+</template>
+<script>
+import Table from '@/components/table/table.vue';
+import Wraper from '@/components/table/wraper.vue';
+import UrlSelect from '@/components/MySelect/url_select.vue';
+import SearchSelect from '@/components/MySelect/search_select.vue';
+import langUtils from '@/utils/langUtils';
+import MoreItem from '@/components/table/more_item.vue';
+
+export default {
+    props: { hidden: Function, row: Object },
+    components: { Table, Wraper, SearchSelect, UrlSelect, MoreItem },
+    data() {
+        return {
+            scroll: { x: 1200 },
+            buttons: {
+                title: '备注 & 附件',
+                options: {
+                    fixed: 'right',
+                    width: 150,
+                },
+                data: [
+                    {
+                        label: '查看',
+                        click: this.viewDetail,
+                    },
+                ],
+            },
+        };
+    },
+    computed: {
+        tableUrl() {
+            return `/ranger/inspection/api/v1/jobs/tasks?jobId=${this.row.jobId}`;
+        },
+        xunChaJieGuoUrl() {
+            return `/api/v1/parameters/business/list?paramModule=rpis_task&paramCode=inspection_result&paramLocale=${langUtils.get()}`;
+        },
+        zhuangTaiUrl() {
+            return `/api/v1/parameters/business/list?paramModule=rpis_route_schedule&paramCode=inspection_state&paramLocale=${langUtils.get()}`;
+        },
+    },
+    methods: {
+        viewDetail(row) {
+            console.log(row);
+        },
+    },
+};
+</script>
diff --git a/src/pages/xunjian/task_managment/center/index.vue b/src/pages/xunjian/task_managment/center/index.vue
index ae7f348..c722128 100644
--- a/src/pages/xunjian/task_managment/center/index.vue
+++ b/src/pages/xunjian/task_managment/center/index.vue
@@ -9,31 +9,59 @@
         :drawerWidth="800"
     >
         <template #search="{ query }">
-            <my-form-item label="开始时间">
+            <a-form-model-item label="开始时间">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.startTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </my-form-item>
-            <my-form-item label="结束时间">
+            </a-form-model-item>
+            <a-form-model-item label="结束时间">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.endTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </my-form-item>
-            <my-form-item label="地区">
+            </a-form-model-item>
+            <a-form-model-item label="地区">
                 <RequestSelect
+                    style="width: 220px"
                     :request="getAreaListDataApi"
                     v-model="query.regionId"
                     labelFiled="regionName"
                     valueFiled="regionId"
                 />
-            </my-form-item>
-            <my-form-item label="专业">
+            </a-form-model-item>
+        </template>
+
+        <template #moreSearch="{ query }">
+            <MoreItem label="开始时间">
+                <a-date-picker
+                    class="tw-w-full"
+                    show-time
+                    v-model="query.startTime"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                />
+            </MoreItem>
+            <MoreItem label="结束时间">
+                <a-date-picker
+                    class="tw-w-full"
+                    show-time
+                    v-model="query.endTime"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                />
+            </MoreItem>
+            <MoreItem label="地区">
+                <RequestSelect
+                    :request="getAreaListDataApi"
+                    v-model="query.regionId"
+                    labelFiled="regionName"
+                    valueFiled="regionId"
+                />
+            </MoreItem>
+            <MoreItem label="专业">
                 <UrlSelect
                     :url="
                         query.regionId
@@ -44,8 +72,8 @@
                     labelFiled="specialityName"
                     valueFiled="specialityId"
                 />
-            </my-form-item>
-            <my-form-item label="线路">
+            </MoreItem>
+            <MoreItem label="线路">
                 <UrlSelect
                     :url="
                         query.regionId
@@ -56,32 +84,32 @@
                     valueFiled="routeId"
                     v-model="query.routeId"
                 />
-            </my-form-item>
-            <my-form-item label="班组">
+            </MoreItem>
+            <MoreItem label="班组">
                 <RequestSelect
                     :request="getBanZuListApi"
                     v-model="query.shiftType"
                     labelFiled="paramName"
                     valueFiled="paramValue"
                 />
-            </my-form-item>
-            <my-form-item label="巡检状态">
+            </MoreItem>
+            <MoreItem label="巡检状态">
                 <RequestSelect
                     :request="getBusinessListApi"
                     v-model="query.inspectionState"
                     labelFiled="paramName"
                     valueFiled="paramValue"
                 />
-            </my-form-item>
-            <my-form-item label="任务类型">
+            </MoreItem>
+            <MoreItem label="任务类型">
                 <RequestSelect
                     :request="getTaskTypeApi"
                     v-model="query.jobType"
                     labelFiled="paramName"
                     valueFiled="paramValue"
                 />
-            </my-form-item>
-            <my-form-item label="巡检人">
+            </MoreItem>
+            <MoreItem label="巡检人">
                 <SearchSelect
                     url="/api/v1/users/searching"
                     searchField="userName"
@@ -89,7 +117,7 @@
                     labelFiled="userName"
                     valueFiled="userId"
                 />
-            </my-form-item>
+            </MoreItem>
         </template>
 
         <template #operation>
@@ -99,6 +127,7 @@
         <template #drawer="{ hidden, refresh, type, row }">
             <Form :hidden="hidden" :refresh="refresh" v-if="type === 'add'" />
             <Progress v-if="type === 'progress'" :hidden="hidden" :row="row" />
+            <Detail v-if="type === 'detail'" :hidden="hidden" :row="row" />
         </template>
 
         <a-table-column title="线路名称" data-index="routeName" />
@@ -124,9 +153,11 @@ 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';
+import Detail from './detail.vue';
+import MoreItem from '@/components/table/more_item.vue';
 
 export default {
-    components: { Table, Form, RequestSelect, UrlSelect, SearchSelect, Progress },
+    components: { Table, Form, RequestSelect, UrlSelect, SearchSelect, Progress, Detail, MoreItem },
     data() {
         return {
             getAreaListDataApi,
@@ -139,6 +170,7 @@ export default {
             buttons: [
                 {
                     label: '详情',
+                    click: this.viewDetail,
                 },
                 { label: '进度', click: this.viewProgress },
                 {
@@ -162,6 +194,9 @@ export default {
         viewProgress(row) {
             this.$refs.table.show({ title: '任务进度', type: 'progress', row });
         },
+        viewDetail(row) {
+            this.$refs.table.show({ title: '任务明细', type: 'detail', row });
+        },
     },
 };
 </script>
diff --git a/src/pages/xunjian/task_managment/center/progress.vue b/src/pages/xunjian/task_managment/center/progress.vue
index 8003985..75538e9 100644
--- a/src/pages/xunjian/task_managment/center/progress.vue
+++ b/src/pages/xunjian/task_managment/center/progress.vue
@@ -37,8 +37,6 @@
     </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';
-- 
GitLab