|
|
<template>
|
|
|
<div>
|
|
|
<xy-dialog ref="dialog"
|
|
|
:is-show.sync="isShow"
|
|
|
type="form"
|
|
|
:title="type === 'add' ? '新增回访' : '编辑回访'"
|
|
|
:form="form"
|
|
|
:rules="rules"
|
|
|
@submit="submit">
|
|
|
<template v-slot:way>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
回访方式 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.way"
|
|
|
clearable
|
|
|
placeholder="请选择回访方式"
|
|
|
style="width: 300px;">
|
|
|
<el-option v-for="item in ways"
|
|
|
:key="item.id"
|
|
|
:label="item.value"
|
|
|
:value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:is_coherent>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
是否接通 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-switch v-model="form.is_coherent"
|
|
|
:active-value="1"
|
|
|
:inactive-value="0"
|
|
|
active-text="是"
|
|
|
inactive-text="否"
|
|
|
></el-switch>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:visit_time>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>
|
|
|
回访时间 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-date-picker v-model="form.visit_time"
|
|
|
placeholder="请选择回访时间"
|
|
|
style="width: 300px;"
|
|
|
type="datetime"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
></el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:is_serve>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
是否服务 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-switch v-model="form.is_serve"
|
|
|
:active-value="1"
|
|
|
:inactive-value="0"
|
|
|
active-text="是"
|
|
|
inactive-text="否"
|
|
|
></el-switch>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:satisfy>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>
|
|
|
满意度 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.satisfy"
|
|
|
clearable
|
|
|
placeholder="请选择满意度"
|
|
|
style="width: 300px;">
|
|
|
<el-option v-for="item in satisfys"
|
|
|
:key="item.id"
|
|
|
:label="item.value"
|
|
|
:value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:is_standard>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
服务规范 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-switch v-model="form.is_standard"
|
|
|
:active-value="1"
|
|
|
:inactive-value="0"
|
|
|
active-text="规范"
|
|
|
style="width: 300px;"
|
|
|
inactive-text="不规范"
|
|
|
></el-switch>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:remark>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
回访备注 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input type="textarea"
|
|
|
:autosize="{minRows:2}"
|
|
|
v-model="form.remark"
|
|
|
clearable
|
|
|
placeholder="请输入回访备注"
|
|
|
style="width: 300px;"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:file_ids>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
回访照片 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-upload
|
|
|
style="width: 320px;"
|
|
|
class="upload-demo"
|
|
|
:action="action"
|
|
|
:on-success="(response, file, fileList) => successHandle(response, file, fileList, 'file_ids')"
|
|
|
:before-upload="uploadBefore"
|
|
|
:file-list="file_ids"
|
|
|
:on-remove="(file, fileList) => removeHande(file, fileList, 'file_ids')"
|
|
|
list-type="picture-card">
|
|
|
<i slot="default" class="el-icon-plus"></i>
|
|
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过20MB</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getForm, save } from "@/api/callbacks";
|
|
|
export default {
|
|
|
props: {
|
|
|
ways: {
|
|
|
type: Array,
|
|
|
default: () => [
|
|
|
{
|
|
|
id: 1,
|
|
|
value: "上门"
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
value: "电话"
|
|
|
}
|
|
|
],
|
|
|
},
|
|
|
satisfys: {
|
|
|
type: Array,
|
|
|
default: () => [
|
|
|
{
|
|
|
id: 1,
|
|
|
value: "非常满意"
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
value: "满意"
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
value: "一般"
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
value: "不满意"
|
|
|
}
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
id: "",
|
|
|
type: "",
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
file_ids: [],
|
|
|
|
|
|
form: {
|
|
|
schedule_list_id: "",
|
|
|
way: "",
|
|
|
is_coherent: "",
|
|
|
visit_time: "",
|
|
|
is_serve: "",
|
|
|
satisfy: "",
|
|
|
is_standard: "",
|
|
|
remark: "",
|
|
|
file_ids: "",
|
|
|
},
|
|
|
rules: {
|
|
|
visit_time: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请填写回访时间",
|
|
|
},
|
|
|
],
|
|
|
satisfy: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请填写满意度",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
show() {
|
|
|
this.isShow = true;
|
|
|
},
|
|
|
hidden() {
|
|
|
this.isShow = false;
|
|
|
},
|
|
|
init() {
|
|
|
for (let key in this.form) {
|
|
|
if (this.form[key] instanceof Array) {
|
|
|
this.form[key] = [];
|
|
|
} else {
|
|
|
this.form[key] = "";
|
|
|
}
|
|
|
}
|
|
|
this.$refs["dialog"].clearValidate();
|
|
|
},
|
|
|
setId(id) {
|
|
|
if (typeof id == "number") {
|
|
|
this.id = id;
|
|
|
} else {
|
|
|
console.error("error typeof id: " + typeof id);
|
|
|
}
|
|
|
},
|
|
|
getId() {
|
|
|
return this.id;
|
|
|
},
|
|
|
setType(type = "add") {
|
|
|
let types = ["add", "editor"];
|
|
|
if (types.includes(type)) {
|
|
|
this.type = type;
|
|
|
} else {
|
|
|
console.warn("Unknown type: " + type);
|
|
|
}
|
|
|
},
|
|
|
setForm(key = [], value = []) {
|
|
|
if (key instanceof Array) {
|
|
|
key.forEach((key, index) => {
|
|
|
this.form[key] = value[index] ?? "";
|
|
|
});
|
|
|
}
|
|
|
if (typeof key === "string") {
|
|
|
this.form[key] = value;
|
|
|
}
|
|
|
if (!key) {
|
|
|
this.init();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//上传
|
|
|
successHandle(response, file, fileList, key) {
|
|
|
this[key] = fileList;
|
|
|
},
|
|
|
removeHande(file, fileList, key) {
|
|
|
this[key] = fileList;
|
|
|
},
|
|
|
uploadBefore(file) {
|
|
|
console.log(file);
|
|
|
if (file.size / 1000 > 20 * 1024) {
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: "上传图片大小超过20MB！",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async getDetail() {
|
|
|
const res = await getForm(this.id);
|
|
|
this.$integrateData(this.form, res);
|
|
|
this.file_ids = res.files.map(i => ({
|
|
|
url: i.url,
|
|
|
name: i.original_name,
|
|
|
response: i
|
|
|
}))
|
|
|
},
|
|
|
|
|
|
submit() {
|
|
|
if (this.type === "add") {
|
|
|
if (this.form.hasOwnProperty("id")) {
|
|
|
delete this.form.id;
|
|
|
}
|
|
|
}
|
|
|
if (this.type === "editor") {
|
|
|
Object.defineProperty(this.form, "id", {
|
|
|
value: this.id,
|
|
|
enumerable: true,
|
|
|
configurable: true,
|
|
|
writable: true,
|
|
|
});
|
|
|
}
|
|
|
this.form.file_ids = this.file_ids.map(i => i.response.id)
|
|
|
save(this.form).then((res) => {
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: this.type === "add" ? "新增回访" : "编辑回访" + "成功",
|
|
|
});
|
|
|
this.isShow = false;
|
|
|
this.$emit("refresh");
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(val) {
|
|
|
if (val) {
|
|
|
if (this.type === "editor") {
|
|
|
this.getDetail();
|
|
|
}
|
|
|
} else {
|
|
|
this.id = "";
|
|
|
this.type = "";
|
|
|
this.init();
|
|
|
this.file_ids = [];
|
|
|
this.$refs["dialog"].clearValidate();
|
|
|
delete this.form.id;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
::v-deep .el-input__inner {
|
|
|
text-align: left;
|
|
|
}
|
|
|
</style>
|
