接口联调
This commit is contained in:
白菜
110
src/views/ems/ticket/AddTicket.vue
Normal file
110
src/views/ems/ticket/AddTicket.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑todo 工单名称` " :close-on-click-modal="false" :show-close="false">
|
||||
<el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||||
<el-form-item label="工单号" prop="gdh">
|
||||
<el-input :disabled="mode !=='add'" v-model="formData.gdh" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工单标题" prop="title" required>
|
||||
<el-input v-model="formData.title" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题描述" prop="question" required>
|
||||
<el-input v-model="formData.question" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理状态" prop="handleStatus">
|
||||
<el-select v-model="formData.handleStatus" placeholder="请选择">
|
||||
<el-option :label="value" :value="key" v-for="(value,key) in handleStatusOptions" :key="key+'handleStatusOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="提交人" prop="submitName" required>
|
||||
<el-input v-model="formData.submitName" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理人" prop="handleName" required>
|
||||
<el-input v-model="formData.handleName" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="提交时间" prop="submitTime" required>
|
||||
<el-input v-model="formData.submitTime" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="saveDialog">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
mode:{
|
||||
type:String,
|
||||
default:"add"
|
||||
},
|
||||
//todo 修改数据时，从接口获取工单详情还是从列表中返回？
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogTableVisible:false,
|
||||
handleStatusOptions:{'0':'处理完成','1':'处理中','2':'未处理'},
|
||||
formData: {
|
||||
gdh: '',//工单号
|
||||
title: '',//工单标题
|
||||
question: '',
|
||||
handleStatus:'',
|
||||
submitName:'',
|
||||
handleName: '',
|
||||
submitTime: '',
|
||||
},
|
||||
rules: {
|
||||
gdh: [{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
saveDialog() {
|
||||
this.$refs.addTempForm.validate(valid => {
|
||||
if (!valid) return
|
||||
this.closeDialog()
|
||||
})
|
||||
},
|
||||
closeDialog(){
|
||||
// 清空所有数据
|
||||
this.$refs.addTempForm.resetFields()
|
||||
this.formData={
|
||||
gdh: '',//工单号
|
||||
title: '',//工单标题
|
||||
question: '',
|
||||
handleStatus:'',
|
||||
submitName:'',
|
||||
handleName: '',
|
||||
submitTime: '',
|
||||
}
|
||||
this.dialogTableVisible=false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.ems-dialog{
|
||||
.el-dialog{
|
||||
max-width: 700px;
|
||||
}
|
||||
.add-time-form{
|
||||
.el-input{
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
src/views/ems/ticket/index.vue
Normal file
158
src/views/ems/ticket/index.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user