372 lines
8.4 KiB
Vue
372 lines
8.4 KiB
Vue
<template>
|
|
<fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
|
|
<fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
|
|
<WorkDialog ref="workDialogRef" :rowData="rowData"/>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import {reactive, shallowRef} from 'vue';
|
|
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
|
import WorkDialog from '../components/WorkDialog.vue';
|
|
import {orderdDetele, orderdClose} from "@/api/order/order.js"
|
|
|
|
const rowData = ref()
|
|
const workDialogRef = ref()
|
|
const router = useRouter()
|
|
const tableIns = ref()
|
|
//todo 外部模拟数据, 接口一出来, 直接在下方 tableConfig 的api处填写就行
|
|
const mockData = ref([
|
|
{
|
|
workOrderNumber: 1211,
|
|
workOrderTime: '2022-02-09 00 : 12',
|
|
state: 0,
|
|
callState: 0
|
|
},
|
|
{
|
|
workOrderNumber: 232,
|
|
state: 1,
|
|
callState: 1
|
|
}
|
|
])
|
|
const auths = reactive({
|
|
detail: ['order:order:detail'],
|
|
close: ['order:order:close'],
|
|
delete: ['order:order:del'],
|
|
})
|
|
const searchConfig = reactive([
|
|
{
|
|
label: '工单号',
|
|
prop: 'orderNumber',
|
|
props: {
|
|
placeholder: '请输入工单号查询',
|
|
clearable: true,
|
|
checkStrictly: true
|
|
},
|
|
component: 'el-input',
|
|
},
|
|
// {
|
|
// label: '工单名称',
|
|
// prop: 'orderName',
|
|
// props: {
|
|
// placeholder: '请输入工单名查询',
|
|
// clearable: true,
|
|
// checkStrictly: true
|
|
// },
|
|
// component: 'el-input',
|
|
// },
|
|
{
|
|
label: '工单状态',
|
|
prop: 'orderState',
|
|
props: {
|
|
placeholder: '请选择工单状态查询',
|
|
cacheKey: 'work_order_status',
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
component: shallowRef(fvSelect),
|
|
}, {
|
|
label: '处理人',
|
|
prop: 'operationUser',
|
|
props: {
|
|
placeholder: '请输入处理人查询',
|
|
clearable: true,
|
|
checkStrictly: true
|
|
},
|
|
component: 'el-input',
|
|
},
|
|
// {
|
|
// label: '关单人',
|
|
// prop: 'knotter',
|
|
// props: {
|
|
// placeholder: '请输入关单人查询',
|
|
// clearable: true,
|
|
// checkStrictly: true
|
|
// },
|
|
// component: 'el-input',
|
|
// },
|
|
{
|
|
label: '创建时间',
|
|
prop: 'createdTime',
|
|
props: {
|
|
placeholder: '请选择创建时间',
|
|
type: 'datetime',
|
|
clearable: true,
|
|
checkStrictly: true,
|
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
},
|
|
component: 'el-date-picker',
|
|
},
|
|
{
|
|
label: '处理时间',
|
|
prop: 'processedTime',
|
|
props: {
|
|
placeholder: '请选择处理时间',
|
|
type: 'datetime',
|
|
clearable: true,
|
|
checkStrictly: true,
|
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
},
|
|
component: 'el-date-picker',
|
|
}, {
|
|
label: '完成时间',
|
|
prop: 'completionTime',
|
|
props: {
|
|
placeholder: '请选择完成时间',
|
|
type: 'datetime',
|
|
clearable: true,
|
|
checkStrictly: true,
|
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
},
|
|
component: 'el-date-picker',
|
|
}
|
|
])
|
|
|
|
const tableConfig = reactive({
|
|
columns: [
|
|
{
|
|
prop: 'index',
|
|
type: 'index',
|
|
label: '序号',
|
|
align: 'center',
|
|
width: 80,
|
|
},
|
|
{
|
|
prop: 'orderNumber',
|
|
label: '工单号',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
// {
|
|
// prop: 'orderName',
|
|
// label: '工单名称',
|
|
// align: 'center',
|
|
// width: 200
|
|
// },
|
|
{
|
|
prop: 'orderContent',
|
|
label: '工单内容',
|
|
align: 'center',
|
|
width: 250
|
|
},
|
|
{
|
|
prop: 'alarmUnit',
|
|
label: '拨打单位',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
prop: 'alarmObject',
|
|
label: '拨打对象',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
prop: 'orderState',
|
|
label: '工单状态',
|
|
align: 'center',
|
|
showOverflowTooltip: false,
|
|
currentRender: ({row, index}) => {
|
|
if (row.orderState !== null) {
|
|
return (<Tag dictType={'work_order_status'} value={row.orderState}/>)
|
|
} else {
|
|
return '--'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
prop: 'callState',
|
|
label: '电话拨打状态',
|
|
align: 'center',
|
|
width: 150,
|
|
showOverflowTooltip: false,
|
|
currentRender: ({row, index}) => {
|
|
if (row.callState !== null) {
|
|
return (<Tag dictType={'call_status'} value={row.callState}/>)
|
|
} else {
|
|
return '--'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
prop: 'operationUser',
|
|
label: '处理人',
|
|
align: 'center',
|
|
currentRender: ({row, index}) => {
|
|
if (row.operationUser) {
|
|
return row.operationUser
|
|
} else {
|
|
return '--'
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
prop: 'processedContent',
|
|
label: '处理内容',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'createdTime',
|
|
label: '创建时间',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
prop: 'processedTime',
|
|
label: '处理时间',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
prop: 'completionTime',
|
|
label: '完成时间',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
// {
|
|
// prop: 'knotter',
|
|
// label: '关单人',
|
|
// align: 'center'
|
|
// },
|
|
{
|
|
prop: 'oper',
|
|
label: '操作',
|
|
align: 'center',
|
|
fixed: 'right',
|
|
width: 150,
|
|
showOverflowTooltip: false,
|
|
currentRender: ({row, index}) => {
|
|
// console.log(row);
|
|
|
|
let btn = []
|
|
btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
|
|
btn.push({label: '关单', prem: auths.close, func: () => handleClose(row), type: 'primary'})
|
|
btn.push({label: '删除', prem: auths.delete, func: () => handleDelete(row), type: 'danger'})
|
|
return (
|
|
<div style={{width: '100%'}}>
|
|
{
|
|
btn.map(item => (
|
|
<el-button
|
|
type={item.type}
|
|
v-perm={item.prem}
|
|
onClick={() => item.func()}
|
|
link
|
|
>
|
|
{item.label}
|
|
</el-button>
|
|
))
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
api: '/order/list',
|
|
params: {},
|
|
btns: [
|
|
// {name: '新增', key: 'add', color: '#DED0B2', auth: auths.report},
|
|
]
|
|
})
|
|
const search = (val) => {
|
|
let obj = {...val}
|
|
if (obj.dateValue) {
|
|
obj.startTime = obj.dateValue[0]
|
|
obj.endTime = obj.dateValue[1]
|
|
delete obj.dateValue
|
|
}
|
|
tableConfig.params = obj
|
|
tableIns.value.refresh()
|
|
}
|
|
const headBtnClick = (key) => {
|
|
// console.log(key);
|
|
|
|
switch (key) {
|
|
case 'add':
|
|
handleAdd()
|
|
break;
|
|
}
|
|
}
|
|
|
|
const handleDetail = (row) => {
|
|
// console.log(row);
|
|
|
|
workDialogRef.value.open()
|
|
rowData.value = row
|
|
}
|
|
|
|
const handleClose = async (row) => {
|
|
if (row.orderState !== '2') {
|
|
ElMessageBox.confirm(
|
|
'确定要关单吗?',
|
|
'温馨提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
.then(async () => {
|
|
const info = await orderdClose(
|
|
{
|
|
orderNumber: row.orderNumber,
|
|
alarmObject: row.alarmObject,
|
|
alarmUnit: row.alarmUnit
|
|
})
|
|
// console.log(info);
|
|
if (info.code === 1000) {
|
|
tableIns.value.refresh()
|
|
ElMessage({
|
|
message: '关闭成功',
|
|
type: 'success',
|
|
})
|
|
} else {
|
|
ElMessage({
|
|
message: info.msg,
|
|
type: 'warning',
|
|
})
|
|
}
|
|
})
|
|
|
|
} else {
|
|
ElMessageBox.alert('此工单已被关闭！', '温馨提示', {
|
|
// if you want to disable its autofocus
|
|
// autofocus: false,
|
|
type: 'warning',
|
|
confirmButtonText: '确定',
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
const handleDelete = async (row) => {
|
|
|
|
ElMessageBox.confirm(
|
|
'确定要删除吗?',
|
|
'温馨提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
.then(async () => {
|
|
const info = await orderdDetele(row.orderNumber)
|
|
console.log(info);
|
|
if (info.code === 1000) {
|
|
tableIns.value.refresh()
|
|
ElMessage({
|
|
message: '删除成功',
|
|
type: 'success',
|
|
})
|
|
} else {
|
|
ElMessage({
|
|
message: info.msg,
|
|
type: 'warning',
|
|
})
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|