Merge pull request 'master' (#17) from master into test
Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/17
This commit is contained in:
springlog
@@ -1,14 +1,18 @@
|
||||
<template>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search">
|
||||
<FvSelect></FvSelect>
|
||||
</fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
|
||||
<WorkEdit ref="workEditRef"></WorkEdit>
|
||||
<WorkDialog ref="workDialogRef"></WorkDialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import WorkEdit from '../components/WorkEdit.vue';
|
||||
import { shallowRef } from 'vue';
|
||||
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
||||
import WorkDialog from '../components/WorkDialog.vue';
|
||||
|
||||
const workEditRef = ref()
|
||||
const workDialogRef = ref()
|
||||
const router = useRouter()
|
||||
const tableIns = ref()
|
||||
//todo 外部模拟数据, 接口一出来, 直接在下方 tableConfig 的api处填写就行
|
||||
@@ -55,8 +59,9 @@ const searchConfig = reactive([
|
||||
cacheKey: 'work_order_status',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
filterable: true,
|
||||
},
|
||||
component:shallowRef(fvSelect)
|
||||
component: shallowRef(fvSelect),
|
||||
}, {
|
||||
label: '处理人',
|
||||
prop: 'requirementName',
|
||||
@@ -80,7 +85,7 @@ const searchConfig = reactive([
|
||||
label: '创建日期',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '',
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
@@ -89,7 +94,7 @@ const searchConfig = reactive([
|
||||
label: '处理时间',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '',
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
@@ -98,7 +103,7 @@ const searchConfig = reactive([
|
||||
label: '完成时间',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '',
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
@@ -232,7 +237,7 @@ const headBtnClick = (key) => {
|
||||
}
|
||||
|
||||
const handleDetail = (row) => {
|
||||
workEditRef.value.open(row)
|
||||
workDialogRef.value.open(row)
|
||||
}
|
||||
|
||||
const handleClose = (row) => {
|
||||
|
||||
229
src/views/task-management/components/WorkDialog.vue
Normal file
229
src/views/task-management/components/WorkDialog.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { MoreFilled } from "@element-plus/icons-vue";
|
||||
import { time } from "echarts";
|
||||
//控制显示隐藏
|
||||
const dialogVisible = ref(false);
|
||||
const open = (row) => {
|
||||
dialogVisible.value = true;
|
||||
console.log(row);
|
||||
};
|
||||
|
||||
const test = [
|
||||
{
|
||||
content: "待处理",
|
||||
timestamp: "2022-07-20 20:00",
|
||||
color: "#0bbd87",
|
||||
},
|
||||
{
|
||||
content: "已处理",
|
||||
timestamp: "2022-07-20 20:00",
|
||||
type: "primary",
|
||||
icon: MoreFilled,
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "结单",
|
||||
timestamp: "2022-07-20 20:00",
|
||||
size: "large",
|
||||
},
|
||||
];
|
||||
|
||||
const test2 = [
|
||||
{
|
||||
|
||||
date: '2024-8-31',
|
||||
type: "primary",
|
||||
icon: MoreFilled,
|
||||
size: "large",
|
||||
}, {
|
||||
content: "结单",
|
||||
size: "large",
|
||||
}
|
||||
];
|
||||
const data = [
|
||||
{
|
||||
number: '17628661307',
|
||||
state: '通话中',
|
||||
time: '18 : 32',
|
||||
},
|
||||
{
|
||||
number: '17628661307',
|
||||
state: '已接通',
|
||||
time: '18 : 32',
|
||||
},
|
||||
{
|
||||
number: '17628661307',
|
||||
state: '已接通',
|
||||
time: '18 : 32',
|
||||
}]
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" show-close="true" title="工单详情" width="80%" :before-close="handleClose" overflow:
|
||||
auto>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header class="header"><span>工单号 :</span>
|
||||
<span>666</span>
|
||||
</el-header>
|
||||
<el-container class="main-container">
|
||||
<el-aside width="200px" :style="{ position: 'static' }">
|
||||
<div class="aside-content">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in test" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size"
|
||||
:hollow="activity.hollow" :timestamp="activity.timestamp">
|
||||
{{ activity.content }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main :style="{ position: 'static' }" class="main-content">
|
||||
<div class="top">
|
||||
<div class="info">
|
||||
<span>创始人 :</span>
|
||||
<span>处理人 :</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>工单名称 :</span>
|
||||
<span>关单人 :</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div>
|
||||
<div>工单内容 :</div>
|
||||
<div class="text"></div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div>工单内容 :</div>
|
||||
<div class="text"></div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div>工单内容 :</div>
|
||||
<div class="text"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div>电话拨打记录 :</div>
|
||||
<div class="timebox">
|
||||
<div>
|
||||
<el-scrollbar height="20vh">
|
||||
<el-timeline style="max-width: 99%" class="timeline">
|
||||
<el-timeline-item v-for="(activity, index) in test2" :key="index"
|
||||
:icon="activity.icon" :type="activity.type" :color="activity.color"
|
||||
:size="activity.size">
|
||||
<div class="custom-card">
|
||||
<div>{{ activity.date }}</div>
|
||||
<div v-for="(info, index) in data" :key="index">
|
||||
<div>
|
||||
<span :style="{color:'#a8abb2'}">{{ info.number }}</span>
|
||||
<span :style="{ color: info.state === '通话中' ? '#6cc23a' : '#409eff' }">{{ info.state }}</span>
|
||||
<span class="span-3th" :style="{color:'#a8abb2'}">{{ info.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
font-size: 27px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
.main-content span {
|
||||
padding-bottom: 5px;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main-content .info {
|
||||
border-bottom: 1.5px solid #e4e7ed;
|
||||
margin-bottom: 50px
|
||||
}
|
||||
|
||||
.main-content .body {
|
||||
font-size: 17px;
|
||||
color: black
|
||||
}
|
||||
|
||||
.main-content .body .text {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
border: 1.5px solid #e4e7ed;
|
||||
resize: none;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
}
|
||||
|
||||
.main-content .footer {
|
||||
color: black;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.main-content .timebox {
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
border: 1.5px solid #e4e7ed;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
// overflow-x: hidden;
|
||||
}
|
||||
|
||||
.main-content .timeline {
|
||||
// width: 100%;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
// background-color: red;
|
||||
|
||||
}
|
||||
|
||||
.custom-card{
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.custom-card span {
|
||||
padding-top: 10px;
|
||||
width: 20%;
|
||||
margin: 2px;
|
||||
|
||||
}
|
||||
|
||||
.custom-card .span-3th {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElDrawer } from 'element-plus'
|
||||
|
||||
//控制显示隐藏
|
||||
const visible = ref(false)
|
||||
const open = (row) => {
|
||||
visible.value = true
|
||||
console.log(111);
|
||||
|
||||
console.log(row);
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer v-model="visible"
|
||||
size="50%"
|
||||
title="工单详情" :direction="direction" :before-close="handleClose">
|
||||
<span>Hi, there!</span>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,13 +1,292 @@
|
||||
<template>
|
||||
历史工单
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search">
|
||||
<FvSelect></FvSelect>
|
||||
</fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
|
||||
<WorkDialog ref="workDialogRef"></WorkDialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index"
|
||||
<script setup lang="jsx">
|
||||
import { shallowRef } from 'vue';
|
||||
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
||||
import WorkDialog from '../components/WorkDialog.vue';
|
||||
|
||||
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({
|
||||
report: ['mosr:collect:reported'],
|
||||
})
|
||||
const searchConfig = reactive([
|
||||
{
|
||||
label: '工单号',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入工单号查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
}, {
|
||||
label: '工单名称',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入工单名查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
}, {
|
||||
label: '工单状态',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择工单状态查询',
|
||||
cacheKey: 'work_order_status',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
filterable: true,
|
||||
},
|
||||
component: shallowRef(fvSelect),
|
||||
}, {
|
||||
label: '处理人',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入处理人查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
}, {
|
||||
label: '关单人',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入关单人查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
},
|
||||
{
|
||||
label: '创建日期',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-date-picker',
|
||||
}, {
|
||||
label: '处理时间',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-date-picker',
|
||||
}, {
|
||||
label: '完成时间',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-date-picker',
|
||||
}
|
||||
])
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '工单号',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '工单名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '工单内容',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '工单状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({ row, index }) => {
|
||||
if (row.state !== null) {
|
||||
return (<Tag dictType={'work_order_status'} value={row.state} />)
|
||||
} else {
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'callState',
|
||||
label: '电话拨打状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({ row, index }) => {
|
||||
if (row.callState !== null) {
|
||||
return (<Tag dictType={'call_status'} value={row.callState} />)
|
||||
} else {
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '处理人',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '处理内容',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'workOrderTime',
|
||||
label: '处理时间',
|
||||
align: 'center',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'workOrderTime',
|
||||
label: '完成时间',
|
||||
align: 'center',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({ row, index }) => {
|
||||
let btn = []
|
||||
btn.push({ label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary' })
|
||||
btn.push({ label: '关单', prem: auths.detail, func: () => handleClose(row), type: 'primary' })
|
||||
btn.push({ label: '删除', prem: auths.detail, func: () => handleDelete(row), type: 'primary' })
|
||||
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: '',
|
||||
params: {},
|
||||
btns: [
|
||||
// {name: '新增', key: 'add', color: '#DED0B2', auth: auths.report},
|
||||
]
|
||||
})
|
||||
const headBtnClick = (key) => {
|
||||
console.log(key);
|
||||
|
||||
switch (key) {
|
||||
case 'add':
|
||||
handleAdd()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const handleDetail = (row) => {
|
||||
workDialogRef.value.open(row)
|
||||
}
|
||||
|
||||
const handleClose = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要关单吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '关闭成功',
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '关闭失败',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要删除吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '删除失败',
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,13 +1,292 @@
|
||||
<template>
|
||||
待处理工单
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search">
|
||||
<FvSelect></FvSelect>
|
||||
</fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
|
||||
<WorkDialog ref="workDialogRef"></WorkDialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index"
|
||||
<script setup lang="jsx">
|
||||
import { shallowRef } from 'vue';
|
||||
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
||||
import WorkDialog from '../components/WorkDialog.vue';
|
||||
|
||||
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({
|
||||
report: ['mosr:collect:reported'],
|
||||
})
|
||||
const searchConfig = reactive([
|
||||
{
|
||||
label: '工单号',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入工单号查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
}, {
|
||||
label: '工单名称',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入工单名查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
}, {
|
||||
label: '工单状态',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择工单状态查询',
|
||||
cacheKey: 'work_order_status',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
filterable: true,
|
||||
},
|
||||
component: shallowRef(fvSelect),
|
||||
}, {
|
||||
label: '处理人',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入处理人查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
}, {
|
||||
label: '关单人',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请输入关单人查询',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-input',
|
||||
},
|
||||
{
|
||||
label: '创建日期',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-date-picker',
|
||||
}, {
|
||||
label: '处理时间',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-date-picker',
|
||||
}, {
|
||||
label: '完成时间',
|
||||
prop: 'requirementName',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
checkStrictly: true
|
||||
},
|
||||
component: 'el-date-picker',
|
||||
}
|
||||
])
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '工单号',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '工单名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '工单内容',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '工单状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({ row, index }) => {
|
||||
if (row.state !== null) {
|
||||
return (<Tag dictType={'work_order_status'} value={row.state} />)
|
||||
} else {
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'callState',
|
||||
label: '电话拨打状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({ row, index }) => {
|
||||
if (row.callState !== null) {
|
||||
return (<Tag dictType={'call_status'} value={row.callState} />)
|
||||
} else {
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '处理人',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '处理内容',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'workOrderTime',
|
||||
label: '处理时间',
|
||||
align: 'center',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'workOrderTime',
|
||||
label: '完成时间',
|
||||
align: 'center',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({ row, index }) => {
|
||||
let btn = []
|
||||
btn.push({ label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary' })
|
||||
btn.push({ label: '关单', prem: auths.detail, func: () => handleClose(row), type: 'primary' })
|
||||
btn.push({ label: '删除', prem: auths.detail, func: () => handleDelete(row), type: 'primary' })
|
||||
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: '',
|
||||
params: {},
|
||||
btns: [
|
||||
// {name: '新增', key: 'add', color: '#DED0B2', auth: auths.report},
|
||||
]
|
||||
})
|
||||
const headBtnClick = (key) => {
|
||||
console.log(key);
|
||||
|
||||
switch (key) {
|
||||
case 'add':
|
||||
handleAdd()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const handleDetail = (row) => {
|
||||
workDialogRef.value.open(row)
|
||||
}
|
||||
|
||||
const handleClose = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要关单吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '关闭成功',
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '关闭失败',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要删除吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '删除失败',
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user