<template>
|
<div class="contacts-info">
|
<el-row class="add-button" v-if="addorupdate === '01'">
|
<el-col :span="24">
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-circle-plus-outline"
|
@click="handleAddCus"
|
class="add_btn"
|
>新增</el-button>
|
</el-col>
|
</el-row>
|
|
<EditTable
|
ref="cusForm"
|
:isAutoIndex="true"
|
:rules="operation === '01'? rules : {}"
|
:tableData="records"
|
:columns="columns"
|
:noHistory="noHistory"
|
:pageInfo="editPageInfo"
|
operateLabel="操作"
|
@handleCurrentChange="handleEditCurrentChange"
|
@handleSizeChange="handleEditSizeChange"
|
@handleOperateClick="handleOperateClick"
|
/>
|
|
<Dialog
|
v-model="isCancle"
|
title="取消确认"
|
:buttons="[{text: '否'},{text: '是', type: 'primary'}]"
|
@handleClick="clickCancle"
|
:contentText="`当前有数据未保存，是否放弃保存?`"
|
></Dialog>
|
<!-- <ProTable
|
:pageInfo="pageInfo"
|
@doAction="doAction"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
:isAutoIndex="true"
|
:list="records"
|
:header="tableHeader"
|
:loading="loading"
|
/>-->
|
</div>
|
</template>
|
|
<script>
|
import ProTable from "@/views/components/ProTable";
|
import EditTable from "@/views/components/EditTable";
|
import Dialog from "../components/Dialog";
|
|
import {
|
qryCusContactList,
|
cusContactUpdate,
|
delCusContact,
|
getDictionaryList
|
} from "@/http/api.js";
|
import {
|
enterpriseCusOtherShareholder,
|
contactsConfigInfo
|
} from "../config/column.config";
|
import { contactInfoRules } from "../config/rules.config";
|
const ADDITEMS = {
|
relationShip: "",
|
relativeCustomerName: "",
|
phone: "",
|
isEidt: true,
|
operate: [
|
{ label: "保存", type: "save", isShow: true },
|
{ label: "修改", type: "edit", isShow: false },
|
{ label: "删除", type: "delete", isShow: true }
|
]
|
};
|
export default {
|
components: {
|
ProTable,
|
EditTable,
|
Dialog
|
},
|
props: {
|
tableHeader: {
|
type: [Object, Array],
|
default: () => {
|
return [];
|
}
|
},
|
addorupdate: {
|
type: [String],
|
default: ""
|
},
|
noHistory: {
|
type: Boolean,
|
default: () => {
|
return false;
|
}
|
},
|
screenWidth: {
|
type: Number,
|
default: () => {
|
return 1280;
|
}
|
}
|
},
|
created() {
|
this.init();
|
// this.getDictionaryList();
|
},
|
data() {
|
return {
|
operateBtns: [
|
{ label: "修改", type: "EDIT", value: true },
|
{ label: "删除", type: "DELETE", value: true }
|
],
|
columnConfig: [...enterpriseCusOtherShareholder],
|
loading: false,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
editPageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
columns: [...contactsConfigInfo],
|
rules: { ...contactInfoRules(true) },
|
records: [],
|
customerId: "",
|
setOptions: [],
|
isCancle: false,
|
operation: ""
|
};
|
},
|
methods: {
|
async init() {
|
const { $route, editPageInfo } = this;
|
const { query } = $route;
|
const { customerId, operation } = query;
|
this.columns = operation === '01' ? [...contactsConfigInfo] :[ ...contactsConfigInfo.slice(0,-1)]
|
this.operation = operation;
|
this.customerId = customerId;
|
const params = {
|
customerId,
|
...editPageInfo
|
};
|
const { result } = await qryCusContactList(params);
|
const records = result.records.map(item => {
|
const newItem = { ...item };
|
// 原同事封装的组件。下拉框有描述值时,将描述值字段赋值给isdeleteValue,否则无法显示下拉框的值
|
newItem.isdeleteValue = newItem.relationShipDesc;
|
newItem.operate = [
|
{ label: "保存", type: "save", isShow: false },
|
{ label: "修改", type: "edit", isShow: true },
|
{ label: "删除", type: "delete", isShow: true }
|
];
|
return newItem;
|
});
|
this.$set(this, "records", records);
|
this.$set(this.editPageInfo, "total", result.total);
|
this.getDictionaryList();
|
},
|
async getDictionaryList() {
|
const { result } = await getDictionaryList({
|
codeNo: "CustomerRelationShip"
|
});
|
const list = result.map(item => {
|
return {
|
label: item.itemname,
|
value: item.itemno
|
};
|
});
|
this.setOptions = [...list];
|
this.updateValue("relationShip", { options: list });
|
},
|
updateValue(index, info) {
|
const { columns } = this;
|
const nameIndex = columns.findIndex(({ name }) => name === index);
|
if (nameIndex > -1) {
|
const preInfo = columns[nameIndex];
|
this.$set(columns, nameIndex, { ...preInfo, ...info });
|
}
|
// console.log(nameIndex, info);
|
},
|
handleAddCus() {
|
const { records, $set } = this;
|
if (records.length > 0 && records.some(da => da.isEidt)) {
|
this.$message.error("您还有未保存的客群清单，请先保存");
|
return false;
|
}
|
let newList = [{ ...ADDITEMS }, ...records];
|
const newColumns = [...this.columns];
|
if (newList.length > 10) {
|
newList = newList.slice(0, 10);
|
}
|
$set(this.editPageInfo, "total", this.editPageInfo.total + 1);
|
$set(this, "columns", newColumns);
|
$set(this, "records", newList);
|
},
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val;
|
this.init();
|
},
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val;
|
this.init();
|
},
|
// 修改编辑表格翻页条数
|
handleEditSizeChange(val) {
|
this.editPageInfo.pageSize = val;
|
this.init("edit");
|
},
|
|
// 修改编辑表格翻页数
|
handleEditCurrentChange(val) {
|
this.editPageInfo.currentPage = val;
|
this.init("edit");
|
},
|
// 操作
|
async handleOperateClick(type, data, index) {
|
const { records, $set, columns, setOptions } = this;
|
if (type === "save") {
|
const { customerId } = this;
|
const {
|
phone,
|
relationShip,
|
relativeCustomerName,
|
serialno = ""
|
} = data;
|
const params = {
|
customerId,
|
relationShip,
|
relativeCustomerName,
|
phone,
|
serialno
|
};
|
|
if (!relationShip) {
|
this.validateMessages("请选择联系人关系");
|
return false;
|
}
|
if (!relativeCustomerName) {
|
this.validateMessages("请输入联系人姓名");
|
return false;
|
}
|
if (!phone) {
|
this.validateMessages("请输入联系人手机号");
|
return false;
|
}
|
await cusContactUpdate(params);
|
this.$message.success("保存成功");
|
this.init();
|
}
|
if (type === "edit") {
|
const newData = [...records];
|
const newDataItem = newData.filter((item, i) => i === index)[0];
|
newDataItem.isEidt = true;
|
newDataItem.operate = [
|
{ label: "保存", type: "save", isShow: true },
|
{ label: "修改", type: "edit", isShow: false },
|
{ label: "取消", type: "cancle", isShow: true }
|
];
|
newData[index] = newDataItem;
|
const newColumns = [...columns];
|
$set(this, "columns", newColumns);
|
$set(this, "records", [...newData]);
|
}
|
if (type === "delete") {
|
const newData = records.filter((item, i) => i !== index);
|
const { isEidt = false, serialno } = data;
|
if (!isEidt) {
|
this.toDelete(serialno);
|
}
|
this.init();
|
$set(this, "records", [...newData]);
|
}
|
if (type === "cancle") {
|
this.isCancle = true;
|
}
|
},
|
async toDelete(serialno) {
|
const delRes = await delCusContact({ serialno });
|
if (delRes.code !== "00") {
|
return;
|
}
|
this.$message({
|
showClose: true,
|
message: "删除成功",
|
type: "success"
|
});
|
},
|
validateMessages(message) {
|
const refCusForm = this.$refs.cusForm;
|
refCusForm.$refs["form"].validate(valid => {
|
if (!valid) {
|
this.$message.warning(message);
|
}
|
});
|
},
|
clickCancle(index) {
|
if (index === 0) {
|
this.isCancle = false;
|
} else {
|
this.isCancle = false;
|
this.init();
|
}
|
},
|
// 取消修改
|
toCancle() {},
|
// 表单事件回调
|
async doAction(name, item, { type }) {
|
if (type === "EDIT") {
|
|
}
|
if (type === "DETAIL") {
|
|
}
|
if (type === "DELETE") {
|
this.boardname = item.boardname;
|
this.boardno = item.boardno;
|
this.docno = item.docno;
|
this.delDialogVisible = true;
|
}
|
},
|
async handleClickRowBtn(type, item) {
|
|
// 编辑详情
|
// if (type === "EDIT") {
|
// this.$router.push({
|
// name: "clientsModify",
|
// query: { from: "edit", ...item }
|
// });
|
// }
|
// // 处理详情
|
// if (type === "DETAIL") {
|
// this.$router.push({
|
// name: "clientsDetail",
|
// query: { from: "edit", ...item }
|
// });
|
// }
|
// if (type === "DELETE") {
|
// const params = {
|
// dirno: item.dirno
|
// };
|
// const delRes = await delBusinessImageCatalog(params);
|
// if (delRes && delRes.code === "00") {
|
// this.$message.success("删除成功");
|
// this.$refs.imageTablelist.getTableList();
|
// }
|
// }
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.contacts-info {
|
& .add-button {
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
