<template>
|
<div>
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="formDia" title="客户满意度调查表"
|
width="70%" @close="closeFormDia">
|
<table border="1" cellspacing="10" class="tables">
|
<tr>
|
<td class="td-title">
|
<p>单位名称：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-input v-model="form.unitName" placeholder="请输入内容" size="small">
|
</el-input>
|
</td>
|
<td class="td-title">
|
<p>日期：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-date-picker v-model="form.fillDate" format="YYYY-MM-DD" placeholder="选择日期" size="small" type="date"
|
value-format="YYYY-MM-DD">
|
</el-date-picker>
|
</td>
|
</tr>
|
<tr>
|
<td class="td-title">
|
<p>客户：</p>
|
</td>
|
<td class="td-info">
|
<el-select v-model="form.orderId" filterable clearable size="small" style="width: 100%"
|
popper-class="customer-select-popper" placeholder="请选择客户（已完成委托单）" @change="onCustomerChange">
|
<el-option v-for="opt in customerOptions" :key="opt.id" :label="opt.company" :value="opt.id">
|
<div class="customer-card">
|
<div>客户：{{ opt.company }}</div>
|
<div class="customer-card-sub">委托单编号：{{ opt.entrustCode || '--' }}</div>
|
<div class="customer-card-sub">样品名称：{{ opt.sampleName || '--' }}</div>
|
</div>
|
</el-option>
|
</el-select>
|
</td>
|
<td class="td-title">
|
<p>部门：</p>
|
</td>
|
<td class="td-info">
|
<el-input v-model="form.department" placeholder="请输入内容" size="small">
|
</el-input>
|
</td>
|
<td class="td-title">
|
<p>联系电话：</p>
|
</td>
|
<td class="td-info">
|
<el-input v-model="form.contactNumber" placeholder="请输入内容" size="small">
|
</el-input>
|
</td>
|
</tr>
|
<tr>
|
<td class="td-title">
|
<p>服务态度：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-radio-group v-model="form.serviceAttitude">
|
<el-radio :value="0">满意</el-radio>
|
<el-radio :value="1">一般</el-radio>
|
<el-radio :value="2">不满意</el-radio>
|
</el-radio-group>
|
</td>
|
<td class="td-title">
|
<p>建议：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-input v-model="form.serviceAttitudeSuggestion" placeholder="请输入内容" size="small">
|
</el-input>
|
</td>
|
</tr>
|
<tr>
|
<td class="td-title">
|
<p>技术能力：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-radio-group v-model="form.technicalCompetence">
|
<el-radio :value="0">满意</el-radio>
|
<el-radio :value="1">一般</el-radio>
|
<el-radio :value="2">不满意</el-radio>
|
</el-radio-group>
|
</td>
|
<td class="td-title">
|
<p>建议：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-input v-model="form.technicalCompetenceSuggestion" placeholder="请输入内容" size="small">
|
</el-input>
|
</td>
|
</tr>
|
<tr>
|
<td class="td-title">
|
<p>检测工作：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-radio-group v-model="form.inspectionWork">
|
<el-radio :value="0">满意</el-radio>
|
<el-radio :value="1">一般</el-radio>
|
<el-radio :value="2">不满意</el-radio>
|
</el-radio-group>
|
</td>
|
<td class="td-title">
|
<p>建议：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-input v-model="form.inspectionWorkSuggestion" placeholder="请输入内容" size="small">
|
</el-input>
|
</td>
|
</tr>
|
<tr>
|
<td class="td-title">
|
<p>收费合理性：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-radio-group v-model="form.reasonableFees">
|
<el-radio :value="0">满意</el-radio>
|
<el-radio :value="1">一般</el-radio>
|
<el-radio :value="2">不满意</el-radio>
|
</el-radio-group>
|
</td>
|
<td class="td-title">
|
<p>建议：</p>
|
</td>
|
<td class="td-info" colspan="2">
|
<el-input v-model="form.reasonableFeesSuggestion" placeholder="请输入内容" size="small">
|
</el-input>
|
</td>
|
</tr>
|
<tr>
|
<td class="td-title">
|
<p>您对我们的希望：</p>
|
</td>
|
<td class="td-info" colspan="5">
|
<el-input v-model="form.remark" :rows="4" placeholder="请输入内容" size="small" type="textarea">
|
</el-input>
|
</td>
|
</tr>
|
</table>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="closeFormDia">取 消</el-button>
|
<el-button :loading="editLoad" type="primary" @click="handleEdit">提 交</el-button>
|
</span></template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
addClientSatisfaction,
|
updateClientSatisfaction
|
} from '@/api/cnas/systemManagement/customerSatisfaction.js'
|
import { selectCompletedOrders } from '@/api/business/productOrder'
|
export default {
|
name: 'formDialog',
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
// 这里存放数据
|
return {
|
formDia: false,
|
form: {
|
unitName: '',
|
fillDate: '',
|
userName: '',
|
department: '',
|
contactNumber: '',
|
serviceAttitude: '',
|
serviceAttitudeSuggestion: '',
|
technicalCompetence: '',
|
technicalCompetenceSuggestion: '',
|
inspectionWork: '',
|
inspectionWorkSuggestion: '',
|
reasonableFees: '',
|
reasonableFeesSuggestion: '',
|
remark: '',
|
clientSatisfactionId: '',
|
orderId: '',
|
entrustCode: '',
|
sampleName: ''
|
},
|
// 客户下拉选项：只包含"已下过委托单且已完成"的数据
|
customerOptions: [],
|
operationType: '',
|
editLoad: false,
|
|
};
|
},
|
// 方法集合
|
methods: {
|
async openDia(type, row) {
|
this.formDia = true;
|
this.operationType = type
|
await this.loadCustomerOptions()
|
if (this.operationType === 'edit') {
|
this.form = { ...row }
|
// 老数据没有关联委托单：合成一个选项把原来的值回显出来，不强制重选
|
if (row.orderId == null && row.userName) {
|
this.customerOptions.unshift({
|
id: 0,
|
company: row.userName,
|
entrustCode: row.entrustCode || '--',
|
sampleName: row.sampleName || '--'
|
})
|
this.form.orderId = 0
|
} else if (row.orderId && !this.customerOptions.some(o => o.id === row.orderId)) {
|
// 关联的委托单已不是"已完成"状态，用记录里的信息兜底回显
|
this.customerOptions.unshift({
|
id: row.orderId,
|
company: row.userName || '未知客户',
|
entrustCode: row.entrustCode || '--',
|
sampleName: row.sampleName || '--'
|
})
|
}
|
} else {
|
this.resetForm()
|
}
|
},
|
resetForm() {
|
this.form = {
|
unitName: '',
|
fillDate: '',
|
userName: '',
|
department: '',
|
contactNumber: '',
|
serviceAttitude: '',
|
serviceAttitudeSuggestion: '',
|
technicalCompetence: '',
|
technicalCompetenceSuggestion: '',
|
inspectionWork: '',
|
inspectionWorkSuggestion: '',
|
reasonableFees: '',
|
reasonableFeesSuggestion: '',
|
remark: '',
|
clientSatisfactionId: '',
|
orderId: '',
|
entrustCode: '',
|
sampleName: ''
|
}
|
},
|
// 下拉数据：后端只返回"已检验"的委托单（state=4）
|
loadCustomerOptions() {
|
this.customerOptions = []
|
return selectCompletedOrders().then(res => {
|
if (res.code === 200 && res.data) {
|
this.customerOptions = res.data.map(o => ({
|
id: o.id,
|
company: o.company,
|
entrustCode: o.entrustCode,
|
sampleName: o.sampleView
|
}))
|
}
|
}).catch(err => {
|
console.log('err---', err)
|
})
|
},
|
// 选中客户后：回填客户名并自动带出单位名称、委托单编号、样品名称
|
onCustomerChange(val) {
|
const opt = this.customerOptions.find(o => o.id === val)
|
if (!opt || opt.id === 0) {
|
return
|
}
|
this.form.userName = opt.company
|
this.form.entrustCode = opt.entrustCode
|
this.form.sampleName = opt.sampleName
|
this.form.unitName = opt.company
|
},
|
handleEdit() {
|
const orderIdEmpty = this.form.orderId === '' || this.form.orderId === null || this.form.orderId === undefined
|
if (orderIdEmpty) {
|
this.$message.warning('请选择客户')
|
return
|
}
|
if (!this.form.unitName) {
|
this.$message.warning('请填写单位名称')
|
return
|
}
|
if (!this.form.department) {
|
this.$message.warning('请填写部门')
|
return
|
}
|
this.editLoad = true
|
const payload = { ...this.form }
|
// 老数据合成的回显选项（id=0）不算真实关联，保存时仍保持未关联
|
if (payload.orderId === 0) {
|
payload.orderId = null
|
}
|
if (this.operationType === 'add') {
|
addClientSatisfaction(payload).then(res => {
|
this.editLoad = false
|
this.$message.success('提交成功')
|
this.closeFormDia()
|
}).catch(err => {
|
console.log('err---', err);
|
this.editLoad = false
|
})
|
} else {
|
updateClientSatisfaction(payload).then(res => {
|
this.editLoad = false
|
this.$message.success('提交成功')
|
this.closeFormDia()
|
}).catch(err => {
|
console.log('err---', err);
|
this.editLoad = false
|
})
|
}
|
},
|
closeFormDia() {
|
this.formDia = false;
|
this.$emit('closeFormDia')
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
:deep(.el-dialog) {
|
margin: 10vh auto 50px !important;
|
}
|
|
.tables {
|
table-layout: fixed;
|
width: 100%;
|
margin-top: 10px;
|
}
|
|
.td-title {
|
height: 40px;
|
width: 170px;
|
text-align: center;
|
font-size: 14px;
|
word-wrap: break-word;
|
white-space: normal;
|
padding: 6px;
|
}
|
|
.td-info {
|
padding: 6px;
|
}
|
|
.td-info1 {
|
display: inline-block;
|
width: 100%;
|
text-align: left;
|
font-size: 14px;
|
word-wrap: break-word;
|
white-space: normal;
|
}
|
|
.customer-card-sub {
|
color: #909399;
|
font-size: 12px;
|
}
|
</style>
|
|
<style>
|
/* 下拉卡片三行需要自适应高度，弹层 teleport 到 body，用自定义 popper-class 命中 */
|
.customer-select-popper .el-select-dropdown__item {
|
height: auto;
|
line-height: 1.7;
|
padding: 6px 12px;
|
}
|
</style>
|
