159 lines
4.1 KiB
Vue
159 lines
4.1 KiB
Vue
<template>
|
|
<div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
|
|
<el-button type="primary" @click="addTicket" native-type="button">新增</el-button>
|
|
<el-table
|
|
class="common-table"
|
|
:data="tableData"
|
|
stripe
|
|
max-height="500px"
|
|
style="width: 100%;margin-top: 25px">
|
|
<el-table-column
|
|
prop="gdh"
|
|
label="工单号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="title"
|
|
label="工单标题"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="question"
|
|
min-width="300"
|
|
show-overflow-tooltip
|
|
label="问题描述">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="handleStatus"
|
|
label="处理状态">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="submitName"
|
|
label="提交人">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="handleName"
|
|
label="处理人">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="submitTime"
|
|
label="提交时间">
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
label="操作"
|
|
width="150">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
@click="editTicket(scope.row.gdh)"
|
|
type="warning"
|
|
size="mini">
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
@click="deleteTicket(scope.row)"
|
|
type="danger"
|
|
size="small">
|
|
废弃
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<add-ticket ref="addTicket" :mode="mode"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
|
|
import AddTicket from './AddTicket.vue'
|
|
export default {
|
|
name: "Ticket",
|
|
components: {AddTicket},
|
|
data() {
|
|
return {
|
|
mode:'',//新增、修改工单
|
|
editTicketId:'',
|
|
loading:false,
|
|
tableData:[
|
|
{gdh:'0001',title:'工单一',question:'问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述',handleStatus:'处理完成',submitName:'张三',handleName:'李四',submitTime:'2025/06/20'}
|
|
]
|
|
}
|
|
},
|
|
methods:{
|
|
addTicket(){
|
|
this.mode = 'add';
|
|
this.$refs.addTicket.dialogTableVisible = true;
|
|
},
|
|
editTicket(id){
|
|
this.mode = 'add';
|
|
this.editTicketId = id
|
|
this.$refs.addTicket.dialogTableVisible = true;
|
|
},
|
|
deleteTicket(row){
|
|
console.log('表格行数据',row)
|
|
this.$confirm(`确认要废弃工单${row.title}吗?`, {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
showClose:false,
|
|
closeOnClickModal:false,
|
|
type: 'warning',
|
|
beforeClose: (action, instance, done) => {
|
|
if (action === 'confirm') {
|
|
instance.confirmButtonLoading = true;
|
|
setTimeout(() => {
|
|
// todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
|
|
done();
|
|
// setTimeout(() => {
|
|
instance.confirmButtonLoading = false;
|
|
// }, 300);
|
|
}, 3000);
|
|
} else {
|
|
done();
|
|
}
|
|
}
|
|
}).then(() => {
|
|
//只有在废弃成功的情况下会走到这里
|
|
this.$message({
|
|
type: 'success',
|
|
message: '废弃成功!'
|
|
});
|
|
//调用接口 更新表格数据
|
|
}).catch(() => {
|
|
//取消关机
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ems-content-container{
|
|
display: flex;
|
|
padding:24px;
|
|
padding-right: 0;
|
|
.map-container{
|
|
flex:auto;
|
|
}
|
|
.zd-msg-container{
|
|
width: 500px;
|
|
padding: 24px;
|
|
.single-zd-name{
|
|
font-weight: 500;
|
|
line-height: 23px;
|
|
color: #FFBD00;
|
|
font-size: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.single-square-box-container{
|
|
height: 78px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 10px;
|
|
}
|
|
.single-zd-info-container{
|
|
font-size: 12px;
|
|
margin-top: 10px;
|
|
color:#666666;
|
|
}
|
|
}
|
|
}
|
|
</style>
|