<template>
|
<div class="page-list-container">
|
<!--数据Table-->
|
<yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :action-field="actionField" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes">
|
<template slot="common-column-slot" slot-scope="{row, col}">
|
<template v-if="col.prop == 'acceptResult'">
|
<el-tag :color="setStatusBgColor(row[col.prop])" :style="setStatusColor(row[col.prop])">
|
{{ row[col.prop] }}
|
</el-tag>
|
</template>
|
<!--图片列处理-->
|
<template v-else-if="['wayBillPicture', 'packagePicture', 'receiptPicture'].indexOf(col.prop)>=0">
|
<template v-for="(pic, index) in getPicList(row[col.prop])">
|
<img :key="index" :src="showSmallPic(pic)" class="pic" @click="showBigPic(pic)">
|
</template>
|
</template>
|
<!--连接字段-->
|
<template v-else-if="col.prop==dataOptions.linkColumn">
|
<el-link type="primary" @click.native="()=>{linkEditor(row[dataOptions.idField]);}">{{ row[col.prop] }}</el-link>
|
</template>
|
<template v-else-if="col.dropdown_Id>0">
|
{{ $refs[dataListRef].translateText(col.prop, row[col.prop], col.dropdown_Id) }}
|
</template>
|
<template v-else>
|
<template v-if="['date', 'datetime'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatDate(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else-if="['byte', 'int32', 'int64', 'decimal', 'double'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatNumber(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else>
|
{{ row[col.prop] }}
|
</template>
|
</template>
|
</template>
|
</yrt-data-list>
|
<!--数据编辑器Editor-->
|
<yrt-editor :ref="editorRef" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :top.sync="editorOptions.top" :visible.sync="editorOptions.config.visible" :auth-nodes="authNodes" :btn-read-only="btnReadOnly">
|
</yrt-editor>
|
<!--预览图片-->
|
<el-dialog v-dialogDrag :visible.sync="dialogPicVisible" :append-to-body="true">
|
<img :src="dialogImageUrl" style="max-width:100%;">
|
</el-dialog>
|
<el-dialog :visible.sync="dialogFormVisible" title="查看记录" width="700px">
|
<el-table :data="data">
|
<el-table-column prop="createDate" label="记录时间" width="180">
|
<template slot-scope="{ row, col }">
|
{{ common.formatDate(row["createDate"], "YYYY-MM-DD HH:mm:ss") }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="creator" label="记录人" width="180">
|
</el-table-column>
|
<el-table-column prop="claimAcceptanceDesc" label="记录内容" width="180">
|
</el-table-column>
|
<el-table-column prop="claimAcceptanceType" label="处理结果" width="180">
|
</el-table-column>
|
<el-table-column prop="acceptanceWay" label="通知方式" width="180">
|
</el-table-column>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible=false">取 消</el-button>
|
<el-button type="primary" @click="continueAccept">继续受理</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog v-dialogDrag :visible.sync="sendBoxVisible" title="受理" width="700px">
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-form-item label="受理内容">
|
<el-input v-model="form.contect" type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item label="受理结果">
|
<el-select v-model="form.value" placeholder="请选择" @change="changeTemp">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="comfirmClaim" label="赔付金额">
|
<el-input v-model="claimMoney" type="number" style="width:100px;"></el-input>
|
</el-form-item>
|
<el-form-item label="短信内容">
|
<el-input v-model="form.desc" :readonly="readonlyTrue" type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item label="通知方式">
|
<el-checkbox-group v-model="form.checkList">
|
<el-checkbox label="短信"></el-checkbox>
|
<el-checkbox label="邮件"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="sendBoxVisible=false">取 消</el-button>
|
<el-button type="primary" @click="sendMsg('处理中')">受理中</el-button>
|
<el-button type="primary" @click="sendMsg('处理完成')">处理完成</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import baseLayout from "@/components/common/base-layout.vue";
|
|
export default {
|
name: "tms-service-claim",
|
components: {},
|
mixins: [baseLayout],
|
data() {
|
return {
|
dialogFormVisible: false, // 跟进记录
|
sendBoxVisible: false, // 跟进记录
|
data: [],
|
claimMoney: null, // 赔付金额
|
actionField: {
|
prop: "_action",
|
label: "操作",
|
width: "150",
|
headerAlign: "center",
|
align: "center",
|
action: [
|
{
|
type: "button",
|
action: "edit",
|
label: "跟进记录",
|
onClick: function(btnInfo, rowData, colInfo, the) {
|
// if (rowData.PanelType === "普通组板") {
|
// the.openStopBoard();
|
// the.data = rowData;
|
// } else {
|
// the.editor.editData(rowData.Abnormal_Id);
|
// }
|
the.getClaimList(rowData.claim_Id);
|
the.dialogFormVisible = true;
|
return true;
|
}
|
},
|
{
|
type: "button",
|
action: "sendMsg",
|
label: "受理",
|
onClick: function(btnInfo, rowData, colInfo, the) {
|
the.sendBoxVisible = true;
|
the.form.row = rowData;
|
return true;
|
}
|
}
|
],
|
hidden: false
|
},
|
authNodes: {
|
add: true,
|
delete: true,
|
export: true,
|
save: true
|
},
|
// 域名地址
|
BASE_API: process.env.BASE_API,
|
comfirmClaim: false, // 赔付金额
|
// 显示图片放大窗口
|
dialogPicVisible: false,
|
// 图片放大地址
|
dialogImageUrl: null,
|
options: [
|
{
|
value: "已受理",
|
label: "已受理"
|
},
|
{
|
value: "不予受理",
|
label: "不予受理"
|
},
|
{
|
value: "确认赔付",
|
label: "确认赔付"
|
},
|
{
|
value: "不予赔付",
|
label: "不予赔付"
|
}
|
],
|
form: {
|
value: "",
|
desc: "",
|
row: {},
|
checkList: [],
|
contect: "" // 内容
|
},
|
readonlyTrue: true,
|
// 状态值
|
statusValueList: [
|
{
|
status: "未受理",
|
bgColor: "#ff6633",
|
color: "#fff"
|
},
|
{
|
status: "已受理",
|
bgColor: "#3366ff",
|
color: "#fff"
|
},
|
{
|
status: "确认赔付",
|
bgColor: "#6666ff",
|
color: "#fff"
|
},
|
{
|
status: "不予受理",
|
bgColor: "#99cc33",
|
color: "#000"
|
},
|
{
|
status: "已受理",
|
bgColor: "#33ff00",
|
color: "#000"
|
}
|
]
|
};
|
},
|
methods: {
|
// 状态背景颜色
|
setStatusBgColor(status) {
|
var colorItem = this.statusValueList.find(item => {
|
return item.status === status;
|
});
|
var bgColor = "#ffffff";
|
if (colorItem) bgColor = colorItem.bgColor;
|
|
return bgColor;
|
},
|
// 状态字体颜色
|
setStatusColor(status) {
|
var colorItem = this.statusValueList.find(item => {
|
return item.status === status;
|
});
|
var color = "#888";
|
if (colorItem) color = colorItem.color;
|
|
return {
|
border: 0,
|
color: color
|
};
|
},
|
// 继续受理
|
continueAccept() {
|
this.form = {
|
value: "",
|
desc: "",
|
row: {},
|
checkList: [],
|
contect: "" // 内容
|
};
|
this.sendBoxVisible = true;
|
this.dialogFormVisible = false;
|
},
|
// 将图片字符串转为数组
|
getPicList(pics) {
|
var picList = pics ? pics.split(",") : [];
|
return picList;
|
},
|
// 显示小图
|
showSmallPic(pic) {
|
if (pic) {
|
if (pic.indexOf("http") >= 0) {
|
return pic + "?x-oss-process=style/small";
|
} else {
|
return this.BASE_API + pic + "?x-oss-process=style/small";
|
}
|
} else {
|
return "";
|
}
|
},
|
// 显示大图
|
showBigPic(pic) {
|
this.dialogPicVisible = true;
|
if (pic) {
|
if (pic.indexOf("http") >= 0) {
|
this.dialogImageUrl = pic + "?x-oss-process=style/big";
|
} else {
|
this.dialogImageUrl = this.BASE_API + pic + "?x-oss-process=style/big";
|
}
|
} else {
|
this.dialogImageUrl = "";
|
}
|
},
|
// 发送信息
|
sendMsg(state) {
|
if (!this.form.row.claim_Id) {
|
this.$message.error("当运单不存在，重新操作！");
|
return;
|
}
|
if (this.form.checkList.indexOf("短信") !== -1) {
|
if (!this.form.row.mobile) {
|
this.$message({
|
showClose: true,
|
message: "受理人联系手机为空，不能发送短信！",
|
type: "error"
|
});
|
return;
|
}
|
var phoneReg = /^(134[012345678]\d{7}|1[345789][012356789]\d{8})$/;
|
if (!phoneReg.test(this.form.row.mobile)) {
|
this.$message({
|
showClose: true,
|
message: "受理人联系手机格式有误，不能发送短信！",
|
type: "error"
|
});
|
return;
|
}
|
}
|
if (this.form.checkList.indexOf("邮件") !== -1) {
|
if (!this.form.row.email) {
|
this.$message({
|
showClose: true,
|
message: "受理人邮箱为空，不能发送邮件！",
|
type: "error"
|
});
|
return;
|
}
|
var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
|
if (!emailReg.test(this.form.row.email)) {
|
this.$message({
|
showClose: true,
|
message: "受理人邮箱格式有误，不能发送邮件！",
|
type: "error"
|
});
|
return;
|
}
|
}
|
if (this.comfirmClaim) {
|
if (!this.claimMoney) {
|
this.$message({
|
showClose: true,
|
message: "请填写赔付金额!",
|
type: "error"
|
});
|
return;
|
}
|
}
|
const url = "/api/tms/claim/acceptanceOrder";
|
const params = {
|
claim_Id: this.form.row.claim_Id,
|
backWay: this.form.value, // 受理结果
|
descText: this.form.contect, // 受理内容
|
acceptanceWay: this.form.checkList.join(","), // 受理方式
|
state: state,
|
claimAmount: this.claimMoney
|
};
|
var callback = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.sendBoxVisible = false; // 关闭窗口
|
if (this.form.checkList.indexOf("短信") !== -1) {
|
this.sendPhone();
|
}
|
if (this.form.checkList.indexOf("邮件") !== -1) {
|
this.sendEmail();
|
}
|
}
|
this.form = {
|
value: "",
|
desc: "",
|
row: {},
|
checkList: [],
|
contect: "" // 内容
|
};
|
this.claimMoney = null;
|
this.dataList.reloadData();
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 发短信
|
sendPhone() {
|
const url = "/api/tms/claim/sendMsgToMobile";
|
const params = {
|
claim_Id: this.form.row.claim_Id,
|
backWay: this.form.value
|
};
|
var callback = res => {
|
if (res.result) {
|
// this.$message({
|
// showClose: true,
|
// message: "受理成功！",
|
// type: "success"
|
// });
|
} else {
|
this.$message({
|
showClose: true,
|
message: "短信发送失败！",
|
type: "error"
|
});
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 发邮件
|
sendEmail() {
|
const url = "/api/tms/claim/sendEmaliToFriend";
|
const params = {
|
email: this.form.row.email,
|
descText: this.form.desc
|
};
|
var callback = res => {
|
if (res.result) {
|
// this.$message({
|
// showClose: true,
|
// message: "受理成功！",
|
// type: "success"
|
// });
|
} else {
|
this.$message({
|
showClose: true,
|
message: "邮件发送失败！",
|
type: "error"
|
});
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 选择模板
|
changeTemp() {
|
var descText = "";
|
var code = "";
|
if (this.form.row.expressCode === null) {
|
code = this.form.row.wayBillCode;
|
} else {
|
code = this.form.row.expressCode;
|
}
|
if (this.form.value === "已受理") {
|
this.comfirmClaim = false;
|
descText =
|
"尊敬的" +
|
this.form.row.contacts +
|
"先生/女士，您好,单号为" +
|
code +
|
"的索赔申请已受理,后续理赔进展将于三个工作日内告知您，请您注意查收。(澳德物流)";
|
this.$set(this.form, "desc", descText);
|
} else if (this.form.value === "不予受理") {
|
this.comfirmClaim = false;
|
descText =
|
"尊敬的" +
|
this.form.row.contacts +
|
"先生/女士，抱歉的通知您:单号为" +
|
code +
|
"的索赔因资料不全暂无法受理,详情请见邮件通知。(澳德物流)";
|
this.$set(this.form, "desc", descText);
|
} else if (this.form.value === "确认赔付") {
|
this.comfirmClaim = true;
|
descText =
|
"尊敬的" +
|
this.form.row.contacts +
|
"先生/女士，您好，单号" +
|
code +
|
"已确认赔付,详情请见赔付通知邮件,为给您带来不便再次致歉。(澳德物流)";
|
this.$set(this.form, "desc", descText);
|
} else {
|
this.comfirmClaim = false;
|
descText =
|
" 尊敬的" +
|
this.form.row.contacts +
|
"先生/女士，您好,单号" +
|
code +
|
"经核实由于不符合我司可理赔标准，判定不予赔付,给您带来不便再次致歉。(澳德物流)";
|
this.$set(this.form, "desc", descText);
|
}
|
},
|
getClaimList(claim_Id) {
|
var url = "/api/tms/claim/getClaimList";
|
var params = { claim_Id: claim_Id };
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.data = res.data;
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
@import "@/styles/yrt-data-list.scss";
|
.pic {
|
width: 40px;
|
height: 40px;
|
cursor: pointer;
|
}
|
</style>
|
