Commit a3bf1b58 authored by 水落(YangLei)'s avatar 水落(YangLei)

feat: 任务中心完成

parent 3068d45c
<template> <template>
<a-select <a-select
show-search show-search
class="tw-w-full"
placeholder="input search text" placeholder="input search text"
:default-active-first-option="false" :default-active-first-option="false"
:show-arrow="false" :show-arrow="false"
......
<template>
<div>
<label>{{ label }}</label>
<slot />
</div>
</template>
<script>
export default {
props: {
label: String,
},
};
</script>
<template> <template>
<div> <div>
<my-card v-if="$scopedSlots.search" class="tw-mb-2.5"> <my-card v-if="$scopedSlots.search" class="tw-mb-2.5">
<a-form-model :model="queryForm" layout="horizontal"> <a-form-model :model="queryForm" layout="inline">
<a-row :gutter="16">
<slot name="search" :query="queryForm" /> <slot name="search" :query="queryForm" />
</a-row>
</a-form-model> </a-form-model>
<div class="tw-text-right tw-mt-2"> <div class="tw-text-right tw-mt-2">
<a-space> <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 @click="reset">重置</a-button>
<a-button type="primary" @click="getData">查询</a-button> <a-button type="primary" @click="getData">查询</a-button>
</a-space> </a-space>
...@@ -27,15 +33,20 @@ ...@@ -27,15 +33,20 @@
:data-source="data" :data-source="data"
:loading="loading" :loading="loading"
v-bind="$attrs" v-bind="$attrs"
:scroll="scroll"
:rowKey="rowKey" :rowKey="rowKey"
:pagination="pagination" :pagination="pagination"
@change="pageChange" @change="pageChange"
:row-selection="selected ? rowSelection : undefined" :row-selection="selected ? rowSelection : undefined"
> >
<slot /> <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"> <template #default="row">
<my-ac-btn :row="row" :buttons="buttons" /> <my-ac-btn :row="row" :buttons="newButtons.data" />
</template> </template>
</a-table-column> </a-table-column>
</a-table> </a-table>
...@@ -52,6 +63,7 @@ ...@@ -52,6 +63,7 @@
@close="hidden" @close="hidden"
:maskClosable="false" :maskClosable="false"
:title="title" :title="title"
:afterVisibleChange="afterVisibleChange"
> >
<slot name="drawer" :hidden="hidden" :refresh="getData" :type="type" :row="row" /> <slot name="drawer" :hidden="hidden" :refresh="getData" :type="type" :row="row" />
</a-drawer> </a-drawer>
...@@ -74,7 +86,7 @@ export default { ...@@ -74,7 +86,7 @@ export default {
props: { props: {
url: String, url: String,
addBtn: [Object, Boolean], addBtn: [Object, Boolean],
buttons: Array, buttons: [Array, Object],
noPage: Boolean, noPage: Boolean,
formatData: Function, formatData: Function,
rowKey: [String, Function], rowKey: [String, Function],
...@@ -84,6 +96,7 @@ export default { ...@@ -84,6 +96,7 @@ export default {
default: 600, default: 600,
}, },
noPadding: Boolean, noPadding: Boolean,
scroll: Object,
}, },
data() { data() {
...@@ -107,7 +120,7 @@ export default { ...@@ -107,7 +120,7 @@ export default {
flex: 1, flex: 1,
overflow: 'hidden', overflow: 'hidden',
}, },
type: 'add', type: null,
row: null, row: null,
}; };
}, },
...@@ -120,6 +133,13 @@ export default { ...@@ -120,6 +133,13 @@ export default {
newBtn() { newBtn() {
return this.addBtn ? (typeof this.addBtn === 'object' ? this.addBtn : {}) : this.addBtn; 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() { pagination() {
return this.noPage return this.noPage
? false ? false
...@@ -170,9 +190,13 @@ export default { ...@@ -170,9 +190,13 @@ export default {
hidden() { hidden() {
this.visible = false; this.visible = false;
},
afterVisibleChange(visible) {
if (!visible) {
this.title = this.addBtn?.title ?? defaultTitle; this.title = this.addBtn?.title ?? defaultTitle;
this.type = 'add'; this.type = null;
this.row = null; this.row = null;
}
}, },
show(params) { show(params) {
...@@ -189,8 +213,35 @@ export default { ...@@ -189,8 +213,35 @@ export default {
addBtnClick() { addBtnClick() {
const { click } = typeof this.addBtn === 'object' ? this.addBtn : {}; const { click } = typeof this.addBtn === 'object' ? this.addBtn : {};
click && click(); click && click();
this.type = 'add';
this.visible = true; this.visible = true;
}, },
}, },
}; };
</script> </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>
<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>
...@@ -9,31 +9,59 @@ ...@@ -9,31 +9,59 @@
:drawerWidth="800" :drawerWidth="800"
> >
<template #search="{ query }"> <template #search="{ query }">
<my-form-item label="开始时间"> <a-form-model-item label="开始时间">
<a-date-picker <a-date-picker
class="tw-w-full" class="tw-w-full"
show-time show-time
v-model="query.startTime" v-model="query.startTime"
valueFormat="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
/> />
</my-form-item> </a-form-model-item>
<my-form-item label="结束时间"> <a-form-model-item label="结束时间">
<a-date-picker <a-date-picker
class="tw-w-full" class="tw-w-full"
show-time show-time
v-model="query.endTime" v-model="query.endTime"
valueFormat="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
/> />
</my-form-item> </a-form-model-item>
<my-form-item label="地区"> <a-form-model-item label="地区">
<RequestSelect <RequestSelect
style="width: 220px"
:request="getAreaListDataApi" :request="getAreaListDataApi"
v-model="query.regionId" v-model="query.regionId"
labelFiled="regionName" labelFiled="regionName"
valueFiled="regionId" valueFiled="regionId"
/> />
</my-form-item> </a-form-model-item>
<my-form-item label="专业"> </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 <UrlSelect
:url=" :url="
query.regionId query.regionId
...@@ -44,8 +72,8 @@ ...@@ -44,8 +72,8 @@
labelFiled="specialityName" labelFiled="specialityName"
valueFiled="specialityId" valueFiled="specialityId"
/> />
</my-form-item> </MoreItem>
<my-form-item label="线路"> <MoreItem label="线路">
<UrlSelect <UrlSelect
:url=" :url="
query.regionId query.regionId
...@@ -56,32 +84,32 @@ ...@@ -56,32 +84,32 @@
valueFiled="routeId" valueFiled="routeId"
v-model="query.routeId" v-model="query.routeId"
/> />
</my-form-item> </MoreItem>
<my-form-item label="班组"> <MoreItem label="班组">
<RequestSelect <RequestSelect
:request="getBanZuListApi" :request="getBanZuListApi"
v-model="query.shiftType" v-model="query.shiftType"
labelFiled="paramName" labelFiled="paramName"
valueFiled="paramValue" valueFiled="paramValue"
/> />
</my-form-item> </MoreItem>
<my-form-item label="巡检状态"> <MoreItem label="巡检状态">
<RequestSelect <RequestSelect
:request="getBusinessListApi" :request="getBusinessListApi"
v-model="query.inspectionState" v-model="query.inspectionState"
labelFiled="paramName" labelFiled="paramName"
valueFiled="paramValue" valueFiled="paramValue"
/> />
</my-form-item> </MoreItem>
<my-form-item label="任务类型"> <MoreItem label="任务类型">
<RequestSelect <RequestSelect
:request="getTaskTypeApi" :request="getTaskTypeApi"
v-model="query.jobType" v-model="query.jobType"
labelFiled="paramName" labelFiled="paramName"
valueFiled="paramValue" valueFiled="paramValue"
/> />
</my-form-item> </MoreItem>
<my-form-item label="巡检人"> <MoreItem label="巡检人">
<SearchSelect <SearchSelect
url="/api/v1/users/searching" url="/api/v1/users/searching"
searchField="userName" searchField="userName"
...@@ -89,7 +117,7 @@ ...@@ -89,7 +117,7 @@
labelFiled="userName" labelFiled="userName"
valueFiled="userId" valueFiled="userId"
/> />
</my-form-item> </MoreItem>
</template> </template>
<template #operation> <template #operation>
...@@ -99,6 +127,7 @@ ...@@ -99,6 +127,7 @@
<template #drawer="{ hidden, refresh, type, row }"> <template #drawer="{ hidden, refresh, type, row }">
<Form :hidden="hidden" :refresh="refresh" v-if="type === 'add'" /> <Form :hidden="hidden" :refresh="refresh" v-if="type === 'add'" />
<Progress v-if="type === 'progress'" :hidden="hidden" :row="row" /> <Progress v-if="type === 'progress'" :hidden="hidden" :row="row" />
<Detail v-if="type === 'detail'" :hidden="hidden" :row="row" />
</template> </template>
<a-table-column title="线路名称" data-index="routeName" /> <a-table-column title="线路名称" data-index="routeName" />
...@@ -124,9 +153,11 @@ import RequestSelect from '@/components/MySelect/RequestSelect.vue'; ...@@ -124,9 +153,11 @@ import RequestSelect from '@/components/MySelect/RequestSelect.vue';
import SearchSelect from '@/components/MySelect/search_select.vue'; import SearchSelect from '@/components/MySelect/search_select.vue';
import { getAreaListDataApi, getBusinessListApi, getBanZuListApi, getTaskTypeApi } from '@/api'; import { getAreaListDataApi, getBusinessListApi, getBanZuListApi, getTaskTypeApi } from '@/api';
import Progress from './progress.vue'; import Progress from './progress.vue';
import Detail from './detail.vue';
import MoreItem from '@/components/table/more_item.vue';
export default { export default {
components: { Table, Form, RequestSelect, UrlSelect, SearchSelect, Progress }, components: { Table, Form, RequestSelect, UrlSelect, SearchSelect, Progress, Detail, MoreItem },
data() { data() {
return { return {
getAreaListDataApi, getAreaListDataApi,
...@@ -139,6 +170,7 @@ export default { ...@@ -139,6 +170,7 @@ export default {
buttons: [ buttons: [
{ {
label: '详情', label: '详情',
click: this.viewDetail,
}, },
{ label: '进度', click: this.viewProgress }, { label: '进度', click: this.viewProgress },
{ {
...@@ -162,6 +194,9 @@ export default { ...@@ -162,6 +194,9 @@ export default {
viewProgress(row) { viewProgress(row) {
this.$refs.table.show({ title: '任务进度', type: 'progress', row }); this.$refs.table.show({ title: '任务进度', type: 'progress', row });
}, },
viewDetail(row) {
this.$refs.table.show({ title: '任务明细', type: 'detail', row });
},
}, },
}; };
</script> </script>
...@@ -37,8 +37,6 @@ ...@@ -37,8 +37,6 @@
</Wraper> </Wraper>
</template> </template>
unitNum, itemNum, abnormalNum, placeNum, finishedPercent: formatFloat((finishedNum / unitNum * 100), 2),
<script> <script>
import Wraper from '@/components/table/wraper.vue'; import Wraper from '@/components/table/wraper.vue';
import Table from '@/components/table/table.vue'; import Table from '@/components/table/table.vue';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment