351 lines
11 KiB
Vue
351 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="编辑工单" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body ref="dialog">
|
|
<el-card class="box-card">
|
|
<!-- 卡片头 -->
|
|
<div slot="header" class="clearfix">
|
|
<i class="el-icon-plus"/>
|
|
<span>工单信息</span>
|
|
</div>
|
|
<!-- 卡片内容 -->
|
|
<div>
|
|
<el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
订单编号
|
|
</template>
|
|
{{ info.ticketNo }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
维修类别
|
|
</template>
|
|
<dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="info.repairType"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
状态
|
|
</template>
|
|
<dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="info.ticketsWorkStatus"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
客户名称
|
|
</template>
|
|
{{ info.userName }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
车牌号
|
|
</template>
|
|
{{ info.carNo }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
车系
|
|
</template>
|
|
{{ info.carBrandName }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
手机号
|
|
</template>
|
|
{{ info.userMobile }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
创建时间
|
|
</template>
|
|
{{ parseTime(info.createTime, '{y}-{m}-{d}') }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
预计完工
|
|
</template>
|
|
{{ parseTime(info.outTime, '{y}-{m}-{d}') }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
合计金额
|
|
</template>
|
|
{{ info.totalPrice }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
参考成本
|
|
</template>
|
|
{{ info.cost }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
参考毛利
|
|
</template>
|
|
{{ info.profit }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
领料状态
|
|
</template>
|
|
<dict-tag :type="DICT_TYPE.REPAIR_PART_STATUS" v-model="info.partStatus"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
服务顾问
|
|
</template>
|
|
{{ info.adviserName }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
所属门店
|
|
</template>
|
|
{{ info.corpId }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
工单状态
|
|
</template>
|
|
<dict-tag :type="DICT_TYPE.REPAIR_TICKETS_STATUS" v-model="info.ticketsStatus"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
备注
|
|
</template>
|
|
{{ info.remark }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="box-card">
|
|
<!-- 卡片头 -->
|
|
<div slot="header" class="clearfix">
|
|
<i class="el-icon-plus"/>
|
|
<span>项目信息</span>
|
|
<div style="float: right; padding: 3px 0">
|
|
<el-button type="primary" size="small" @click="handleAdd('project')">
|
|
添加项目
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 卡片内容 -->
|
|
<div>
|
|
<TicketItemShow :is-edit="true" :list="projects" list-type="project" @remove="handleRemove" @success="open"/>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="box-card">
|
|
<!-- 卡片头 -->
|
|
<div slot="header" class="clearfix">
|
|
<i class="el-icon-plus"/>
|
|
<span>配件信息</span>
|
|
<div style="float: right; padding: 3px 0">
|
|
<el-switch v-if="wares.length > 0"
|
|
v-model="info.partShow"
|
|
active-text="客户可见"
|
|
inactive-text="客户不可见"
|
|
active-value="1"
|
|
inactive-value="0"
|
|
@change="changeShow"
|
|
>
|
|
</el-switch>
|
|
<el-button type="primary" size="small" style="margin-left: 1rem" @click="handleAdd('ware')">
|
|
添加配件
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 卡片内容 -->
|
|
<div>
|
|
<TicketItemShow :is-edit="true" :list="wares" list-type="ware" @remove="handleRemove" @success="open"/>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="box-card">
|
|
<!-- 卡片头 -->
|
|
<div slot="header" class="clearfix">
|
|
<i class="el-icon-plus"/>
|
|
<span>其他信息</span>
|
|
<div style="float: right; padding: 3px 0">
|
|
<el-button type="primary" size="small" @click="handleAdd('other')">
|
|
添加其他
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 卡片内容 -->
|
|
<div>
|
|
<TicketItemShow :is-edit="true" :list="others" list-type="other" @remove="handleRemove" @success="open"/>
|
|
</div>
|
|
</el-card>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="addTitle" :visible.sync="addDialog" width="80%" v-dialogDrag append-to-body ref="addDialog">
|
|
<TicketItem :export-column="['addBtn']" :in-list-data="projectList" v-if="addType === 'project'" item-type="project" @tableData="projectData"/>
|
|
<TicketItem :export-column="['addBtn']" :in-list-data="waresList" v-if="addType === 'ware'" item-type="part" @tableData="partData"/>
|
|
<TicketItem :export-column="['addBtn']" :in-list-data="otherList" v-if="addType === 'other'" item-type="other" @tableData="otherData"/>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
|
<el-button @click="addDialog = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getTicketsById, updateShow, addItems} from "@/api/repair/tickets/Tickets";
|
|
import {removeItemById} from "@/api/repair/tickets/TicketsItem";
|
|
import TicketItemShow from "@/views/repair/tickets/Components/TicketItemShow.vue";
|
|
import other from "@/views/repair/other/index.vue";
|
|
import TicketItem from "@/views/repair/tickets/Components/TicketItem.vue";
|
|
|
|
export default {
|
|
name: "EditTickets",
|
|
computed: {
|
|
other() {
|
|
return other
|
|
}
|
|
},
|
|
components: {TicketItem, TicketItemShow},
|
|
data() {
|
|
return {
|
|
info: {},
|
|
dialogVisible: false,
|
|
loadingInstance: null,
|
|
projects:[],
|
|
wares:[],
|
|
others: [],
|
|
addTitle: null,
|
|
addType: null,
|
|
addDialog: false,
|
|
formData: {
|
|
id: null,
|
|
itemList: []
|
|
},
|
|
projectList: [],
|
|
waresList: [],
|
|
otherList: [],
|
|
}
|
|
},
|
|
methods: {
|
|
async open(row) {
|
|
try {
|
|
this.dialogVisible = true
|
|
this.loadingInstance = this.$loading({
|
|
target: this.$refs.dialog.$el,
|
|
})
|
|
const res = await getTicketsById(row?.id || row)
|
|
const data = res.data.items
|
|
this.projects = data.filter(item => item.project)
|
|
this.wares = data.filter(item => item.ware)
|
|
this.others = data.filter(item => item.other)
|
|
this.info = res.data
|
|
} finally {
|
|
this.loadingInstance.close()
|
|
}
|
|
},
|
|
async changeShow(){
|
|
try {
|
|
await updateShow(this.info.id, this.info.partShow)
|
|
}catch {}
|
|
},
|
|
async handleRemove(id){
|
|
try {
|
|
await this.$modal.confirm("确认删除数据吗？")
|
|
const ticketId = this.info.id
|
|
await removeItemById(id)
|
|
this.$modal.msgSuccess("删除成功")
|
|
await this.open(ticketId)
|
|
}catch{}
|
|
},
|
|
handleAdd(type){
|
|
this.formData.id = this.info.id
|
|
this.addType = type
|
|
switch (type){
|
|
case "project":
|
|
this.addTitle = "添加项目"
|
|
break
|
|
case "ware":
|
|
this.addTitle = "添加配件"
|
|
break
|
|
case "other":
|
|
this.addTitle = "添加其他"
|
|
}
|
|
this.dialogVisible = false
|
|
this.addDialog = true
|
|
},
|
|
projectData(data) {
|
|
this.projectList = [...data]
|
|
this.projectList.pop()
|
|
},
|
|
partData(data) {
|
|
this.waresList = [...data]
|
|
this.waresList.pop()
|
|
},
|
|
otherData(data) {
|
|
this.otherList = [...data]
|
|
this.otherList.pop()
|
|
},
|
|
async handleConfirm(){
|
|
try {
|
|
this.createItemInit()
|
|
await addItems(this.formData)
|
|
this.addDialog = false
|
|
this.$modal.msgSuccess("新增成功")
|
|
await this.open(this.formData.id)
|
|
}catch{}
|
|
},
|
|
// 新增子表信息init
|
|
createItemInit() {
|
|
this.formData.itemList = []
|
|
// 项目
|
|
this.formData.itemList = [...this.formData.itemList, ...this.formatItem("project", this.projectList)]
|
|
// 配件
|
|
this.formData.itemList = [...this.formData.itemList, ...this.formatItem("part", this.partList)]
|
|
// 其他
|
|
this.formData.itemList = [...this.formData.itemList, ...this.formatItem("other", this.otherList)]
|
|
},
|
|
// 子表信息预处理
|
|
formatItem(type, list) {
|
|
if (!(list && list.length > 0)) {
|
|
return []
|
|
}
|
|
return list.map(item => {
|
|
const temp = {
|
|
...item,
|
|
itemName: item.name,
|
|
itemCount: item?.count,
|
|
itemUnit: item.unit,
|
|
itemPrice: item.price,
|
|
itemDiscount: item.discount,
|
|
itemMoney: item.totalPrice,
|
|
repairIds: item?.repair.map(i => i.userId).join(','),
|
|
repairNames: item?.repair.map(i => i.userName).join(','),
|
|
saleId: item?.sale?.id,
|
|
saleName: item?.sale?.name,
|
|
itemTypeId: item?.type?.id,
|
|
remark: item.remark,
|
|
itemStatus: item.itemStatus,
|
|
id: null
|
|
}
|
|
switch (type) {
|
|
case 'project':
|
|
temp['itemType'] = "01"
|
|
break;
|
|
case 'part':
|
|
temp['itemType'] = "02"
|
|
break;
|
|
case 'other':
|
|
temp['itemType'] = "03"
|
|
break;
|
|
default:
|
|
return "";
|
|
}
|
|
temp[type + 'Id'] = item.id
|
|
return temp;
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.box-card {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|