feat: 新增任务完成

src/api/index.js

@@ -2,6 +2,7 @@ import { request, METHOD, formatObj } from '@/utils';
 export * from './menu';
 export * from './system';
 export * from './task';
+export * from './xunjian';
 
 export function getUserDetailInfoApi() {
     return request('/api/v1/detail', METHOD.GET);

src/api/xunjian.js

+import { getReq, postReq } from '@/utils/requestUtil';
+import langUtils from '@/utils/langUtils';
+
+export function getXunJianDownloadUrlApi(idList) {
+    return getReq('/ranger/inspection/api/v1/jobs/export', { jobIdList: idList.join(',') });
+}
+
+export function getAreaListDataApi() {
+    return getReq(`/ranger/inspection/api/v1/region/list`);
+}
+
+export function getBusinessListApi() {
+    return getReq(
+        `/api/v1/parameters/business/list?paramModule=rpis_route_schedule&paramCode=inspection_state&paramLocale=${langUtils.get()}`,
+    );
+}
+
+export function getBanZuListApi() {
+    return getReq(
+        `/api/v1/parameters/business/list?paramModule=rpis_route_schedule&paramCode=shift_type&paramLocale=${langUtils.get()}`,
+    );
+}
+
+export function getTaskTypeApi() {
+    return getReq(
+        `/api/v1/parameters/business/list?paramModule=rpis_route_schedule&paramCode=job_type&paramLocale=${langUtils.get()}`,
+    );
+}
+
+export function addXunJianTaskApi(data) {
+    return postReq('/ranger/inspection/api/v1/jobs/temporary', data);
+}

src/components/MySelect/search_select.vue

+<template>
+    <a-select
+        show-search
+        placeholder="input search text"
+        :default-active-first-option="false"
+        :show-arrow="false"
+        :filter-option="false"
+        @search="handleSearch"
+        allowClear
+        :options="options"
+        :mode="mode"
+        v-on="$listeners"
+    />
+</template>
+
+<script>
+import { getReq } from '@/utils/requestUtil';
+import { formatObj } from '@/utils';
+
+export default {
+    props: {
+        url: String,
+        searchField: String,
+        formatData: Object,
+        mode: String,
+    },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    data() {
+        return {
+            options: [],
+        };
+    },
+    mounted() {
+        this.getData('');
+    },
+    methods: {
+        async getData(searchString) {
+            this.options = formatObj(
+                await getReq(this.url, { [this.searchField]: searchString }),
+                this.formatData,
+            );
+        },
+        handleSearch(value) {
+            if (this.timeOut) clearTimeout(this.timeOut);
+            this.timeOut = setTimeout(() => {
+                if (value) this.getData(value);
+            }, 300);
+        },
+    },
+};
+</script>

src/components/MySelect/url_select.vue

+<template>
+    <a-select
+        style="width: 100%"
+        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+        placeholder="Please select"
+        allow-clear
+        :options="options"
+        v-on="$listeners"
+        v-bind="$attrs"
+    />
+</template>
+
+<script>
+import { getReq } from '@/utils/requestUtil';
+import { formatObj } from '@/utils';
+
+export default {
+    props: {
+        url: String,
+        labelFiled: String,
+        valueFiled: String,
+    },
+    data: () => ({
+        options: [],
+    }),
+
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+
+    watch: {
+        url: 'getData',
+    },
+
+    methods: {
+        async getData() {
+            if (this.url) {
+                this.options = formatObj(await getReq(this.url), {
+                    label: this.labelFiled,
+                    value: this.valueFiled,
+                    key: this.valueFiled,
+                });
+            }
+        },
+    },
+
+    mounted() {
+        this.getData();
+    },
+};
+</script>

src/components/table/table.vue

 <template>
     <div>
-        <my-card v-if="$scopedSlots.search">
+        <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" />
@@ -9,13 +9,6 @@
 
             <div class="tw-text-right tw-mt-2">
                 <a-space>
-                    <a-popover title="Title">
-                        <template slot="content">
-                            <p>Content</p>
-                            <p>Content</p>
-                        </template>
-                        <a-button>高级查询</a-button>
-                    </a-popover>
                     <a-button @click="reset">重置</a-button>
                     <a-button type="primary" @click="getData">查询</a-button>
                 </a-space>
@@ -23,9 +16,9 @@
         </my-card>
 
         <my-card>
-            <a-space :class="{ 'tw-mb-2.5': !!$scopedSlots.search }">
-                <a-button type="primary" v-if="addBtn" @click="addBtnClick">
-                    {{ typeof addBtn === 'object' ? addBtn.text : '新增' }}
+            <a-space class="tw-mb-2">
+                <a-button type="primary" v-if="newBtn" @click="addBtnClick">
+                    {{ newBtn.text || '新增' }}
                 </a-button>
                 <slot name="operation" />
             </a-space>
@@ -37,6 +30,7 @@
                 :rowKey="rowKey"
                 :pagination="pagination"
                 @change="pageChange"
+                :row-selection="selected ? rowSelection : undefined"
             >
                 <slot />
                 <a-table-column title="操作" v-if="buttons">
@@ -56,8 +50,9 @@
             :width="600"
             @close="hidden"
             :maskClosable="false"
+            :title="title"
         >
-            <slot name="drawer" :hidden="hidden" />
+            <slot name="drawer" :hidden="hidden" :refresh="getData" />
         </a-drawer>
     </div>
 </template>
@@ -70,6 +65,8 @@ const initQuery = {
     pageNum: 1,
 };
 
+const defaultTitle = '新增';
+
 export default {
     props: {
         url: String,
@@ -78,9 +75,11 @@ export default {
         noPage: Boolean,
         formatData: Function,
         rowKey: [String, Function],
+        selected: Array,
     },
 
     data() {
+        const newBtn = this.addBtn ? (typeof this.addBtn === 'object' ? this.addBtn : {}) : this.addBtn;
         return {
             initQuery: {
                 ...initQuery,
@@ -90,7 +89,7 @@ export default {
             loading: false,
             total: 0,
             visible: false,
-            title: '新增',
+            title: newBtn.title ?? defaultTitle,
             drawerStyle: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -108,6 +107,9 @@ export default {
     },
 
     computed: {
+        newBtn() {
+            return this.addBtn ? (typeof this.addBtn === 'object' ? this.addBtn : {}) : this.addBtn;
+        },
         pagination() {
             return this.noPage
                 ? false
@@ -118,6 +120,13 @@ export default {
                       showQuickJumper: true,
                   };
         },
+        rowSelection() {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    this.$emit('update:selected', [selectedRowKeys, selectedRows]);
+                },
+            };
+        },
     },
 
     methods: {
@@ -151,21 +160,29 @@ export default {
 
         hidden() {
             this.visible = false;
+            this.title = this.addBtn?.title ?? defaultTitle;
         },
+
         show({ title } = {}) {
             this.visible = true;
             if (title) this.title = title;
         },
+
         reset() {
             this.queryForm = {};
             this.initQuery = { ...initQuery };
             this.getData();
         },
+
         addBtnClick() {
             const { click } = typeof this.addBtn === 'object' ? this.addBtn : {};
             click && click();
             this.visible = true;
         },
+
+        getFormRef(ref) {
+            console.log(ref);
+        },
     },
 };
 </script>

src/components/table/wraper.vue

@@ -31,6 +31,10 @@ export default {
             type: Function,
             default: EMPTY_FUN,
         },
+        refresh: {
+            type: Function,
+            default: EMPTY_FUN,
+        },
     },
     data: () => ({
         loading: false,
@@ -43,9 +47,14 @@ export default {
 
         async ok() {
             this.loading = true;
-            await this.onOk();
+            try {
+                await this.onOk();
+                this.hidden();
+                this.refresh();
+            } catch (error) {
+                // todo
+            }
             this.loading = false;
-            this.hidden();
         },
     },
 };

src/pages/xunjian/task_managment/center/common/index.js

+export const areaFormatData = {
+    label: 'regionName',
+    value: 'regionId',
+    key: 'regionId',
+};
+
+export const statusFormtData = {
+    label: 'paramName',
+    value: 'paramValue',
+    key: 'paramValue',
+};
+
+export const banZuFormatData = {
+    label: 'paramName',
+    value: 'paramValue',
+    key: 'paramValue',
+};

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

 <template>
-    <h1>新增</h1>
+    <Wraper :hidden="hidden" :onOk="submit" :refresh="refresh">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
+            <a-form-model-item label="地区" prop="regionId">
+                <RequestSelect
+                    :request="getAreaListDataApi"
+                    :formatData="areaFormatData"
+                    v-model="form.regionId"
+                />
+            </a-form-model-item>
+
+            <a-form-model-item label="线路" prop="routeId">
+                <UrlSelect
+                    :url="xianLuUrl"
+                    labelFiled="routeName"
+                    valueFiled="routeId"
+                    v-model="form.routeId"
+                />
+            </a-form-model-item>
+
+            <a-form-model-item label="班组" prop="shiftType">
+                <RequestSelect
+                    :request="getBanZuListApi"
+                    :formatData="banZuFormatData"
+                    v-model="form.shiftType"
+                />
+            </a-form-model-item>
+
+            <a-form-model-item label="任务时间" prop="jobTime">
+                <a-date-picker
+                    showTime
+                    class="tw-w-full"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    v-model="form.jobTime"
+                />
+            </a-form-model-item>
+
+            <a-form-model-item label="巡检人" prop="inspectionIdList">
+                <SearchSelect
+                    url="/api/v1/users/searching"
+                    searchField="userName"
+                    :formatData="formatXunJianRenData"
+                    v-model="form.inspectionIdList"
+                    mode="multiple"
+                />
+            </a-form-model-item>
+        </a-form-model>
+    </Wraper>
 </template>
+
+<script>
+import Wraper from '@/components/table/wraper.vue';
+import RequestSelect from '@/components/MySelect/RequestSelect.vue';
+import SearchSelect from '@/components/MySelect/search_select.vue';
+import UrlSelect from '@/components/MySelect/url_select.vue';
+import { getAreaListDataApi, getBanZuListApi, addXunJianTaskApi } from '@/api';
+import { areaFormatData, banZuFormatData } from './common';
+
+export default {
+    props: {
+        hidden: Function,
+        refresh: Function,
+    },
+    components: { Wraper, RequestSelect, SearchSelect, UrlSelect },
+    data() {
+        return {
+            getAreaListDataApi,
+            banZuFormatData,
+            getBanZuListApi,
+            form: {},
+            rules: {
+                inspectionIdList: [{ required: true }],
+                jobTime: [{ required: true }],
+                shiftType: [{ required: true }],
+                routeId: [{ required: true }],
+                regionId: [{ required: true }],
+            },
+            areaFormatData,
+            formatXunJianRenData: {
+                value: 'userId',
+                label: 'userName',
+                key: 'userId',
+            },
+        };
+    },
+    computed: {
+        xianLuUrl() {
+            return this.form.regionId
+                ? `/ranger/inspection/api/v1/routes/regions/${this.form.regionId}/list`
+                : '';
+        },
+    },
+    methods: {
+        async submit() {
+            await this.$refs.form.validate();
+            return addXunJianTaskApi(this.form);
+        },
+    },
+};
+</script>

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

 <template>
-    <Table url="/ranger/inspection/api/v1/jobs" :buttons="buttons" rowKey="jobId" addBtn>
+    <Table
+        url="/ranger/inspection/api/v1/jobs"
+        :buttons="buttons"
+        rowKey="jobId"
+        :addBtn="addBtn"
+        :selected.sync="selected"
+    >
         <template #search="{query}">
             <my-form-item label="开始时间">
                 <a-date-picker
@@ -9,10 +15,71 @@
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
             </my-form-item>
+            <my-form-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="地区">
+                <RequestSelect
+                    :request="getAreaListDataApi"
+                    :formatData="areaFormatData"
+                    v-model="query.regionId"
+                />
+            </my-form-item>
+            <my-form-item label="专业">
+                <RequestSelect
+                    :request="getAreaListDataApi"
+                    :formatData="areaFormatData"
+                    v-model="query.regionId"
+                />
+            </my-form-item>
+            <my-form-item label="线路">
+                <RequestSelect
+                    :request="getAreaListDataApi"
+                    :formatData="areaFormatData"
+                    v-model="query.regionId"
+                />
+            </my-form-item>
+            <my-form-item label="班组">
+                <RequestSelect
+                    :request="getBanZuListApi"
+                    :formatData="banZuFormatData"
+                    v-model="query.shiftType"
+                />
+            </my-form-item>
+            <my-form-item label="巡检状态">
+                <RequestSelect
+                    :request="getBusinessListApi"
+                    :formatData="statusFormtData"
+                    v-model="query.inspectionState"
+                />
+            </my-form-item>
+            <my-form-item label="任务类型">
+                <RequestSelect
+                    :request="getTaskTypeApi"
+                    :formatData="taskTypeFormatData"
+                    v-model="query.jobType"
+                />
+            </my-form-item>
+            <my-form-item label="巡检人">
+                <RequestSelect
+                    :request="getBusinessListApi"
+                    :formatData="statusFormtData"
+                    v-model="query.lastInspectionStaffId"
+                />
+            </my-form-item>
         </template>
 
-        <template #drawer="hidden">
-            <Form :hidden="hidden" />
+        <template #operation>
+            <a-button @click="download">导出</a-button>
+        </template>
+
+        <template #drawer="drawer">
+            <Form v-bind="drawer" />
         </template>
 
         <a-table-column title="线路名称" data-index="routeName" />
@@ -31,11 +98,24 @@
 <script>
 import Table from '@/components/table/table.vue';
 import Form from './form.vue';
+import { getXunJianDownloadUrlApi } from '@/api';
+import { downloadFileByUrl } from '@/utils';
+import RequestSelect from '@/components/MySelect/RequestSelect.vue';
+import { getAreaListDataApi, getBusinessListApi, getBanZuListApi, getTaskTypeApi } from '@/api';
+import { areaFormatData, statusFormtData, banZuFormatData } from './common';
 
 export default {
-    components: { Table, Form },
+    components: { Table, Form, RequestSelect },
     data() {
         return {
+            getAreaListDataApi,
+            getBusinessListApi,
+            getBanZuListApi,
+            banZuFormatData,
+            getTaskTypeApi,
+            addBtn: {
+                title: '新建临时任务',
+            },
             buttons: [
                 {
                     label: '详情',
@@ -43,7 +123,22 @@ export default {
                 { label: '进度' },
                 { type: 'confirm' },
             ],
+            selected: [],
+            areaFormatData,
+            statusFormtData,
+            taskTypeFormatData: {
+                label: 'paramName',
+                value: 'paramValue',
+                key: 'paramValue',
+            },
         };
     },
+    methods: {
+        async download() {
+            if (!this.selected.length) return this.$message.error('请选择需要导出的数据');
+            const url = await getXunJianDownloadUrlApi(this.selected[0]);
+            downloadFileByUrl(`${this.$fileUrl}${url}`);
+        },
+    },
 };
 </script>

src/utils/index.js

@@ -114,9 +114,9 @@ export function arrayToTree(options) {
 }
 
 // select组件 数据格式化
-export const formatObj = async (ArrObj, obj) => {
+export const formatObj = (ArrObj, obj) => {
     const newData = [...ArrObj];
-    const newDataOne = await newData.map(i => {
+    const newDataOne = newData.map(i => {
         const newObj = { ...i };
         Object.keys(obj).forEach(key => {
             newObj[key] = i[obj[key]];
@@ -125,3 +125,14 @@ export const formatObj = async (ArrObj, obj) => {
     });
     return newDataOne;
 };
+
+/**
+ * 下载文件
+ * @param {String} url 下载路径
+ */
+export function downloadFileByUrl(url) {
+    const aEle = document.createElement('a');
+    aEle.setAttribute('download', true);
+    aEle.setAttribute('href', url);
+    aEle.click();
+}