<!-- 产品客群清单列表 -->
|
<template>
|
<div class="customers_main">
|
<el-row v-if="!isView" class="add-button">
|
<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
|
v-if="!isView"
|
ref="cusForm"
|
:isAutoIndex="true"
|
:rules="rules"
|
:tableData="tableData"
|
:columns="columns"
|
:noHistory="noHistory"
|
:pageInfo="editPageInfo"
|
operateLabel="操作"
|
@handleCurrentChange="handleEditCurrentChange"
|
@handleSizeChange="handleEditSizeChange"
|
@handleOperateClick="handleOperateClick"
|
/>
|
<ProTable
|
v-if="isView"
|
:pageInfo="pageInfo"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
:isAutoIndex="true"
|
:noHistory="noHistory"
|
:list="tableData"
|
:header="tableHeader"
|
:loading="loading"
|
/>
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogTipVisible"
|
width="450"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
center
|
custom-class="tip_dialog"
|
>
|
<div style="text-align: center;">当前有数据未保存，是否放弃保存？</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogTipVisible = false">否</el-button>
|
<el-button type="primary" @click="tipCancelSave">是</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {
|
CUSTOMERSCOLUMNS,
|
CUSTOMERSRULES,
|
VIEWCUSTOMERSCOLUMNS
|
} from "../../utils/customersColumnsConfig.js";
|
import {
|
qryCondition,
|
addOrUpdateCustomerBase,
|
delCustomerBase,
|
qryCustomerBaseList
|
} from "../../api/productManage.api.js";
|
import EditTable from "../../components/EditTable";
|
import ProTable from "../../components/ProTable.vue";
|
const ADDITEMS = {
|
customersNo: "",
|
customersName: "",
|
isdelete: "0",
|
isdeleteValue: "生效",
|
isEidt: true,
|
serialno: "",
|
operate: [
|
{ label: "保存", type: "SAVE", isShow: true },
|
{ label: "修改", type: "EDIT", isShow: false },
|
{ label: "删除", type: "DELETE", isShow: true }
|
]
|
};
|
export default {
|
props: {
|
edit: {
|
type: Boolean,
|
default: () => {
|
return false;
|
}
|
},
|
isView: {
|
type: Boolean,
|
default: () => {
|
return false;
|
}
|
},
|
noHistory: {
|
type: Boolean,
|
default: () => {
|
return false;
|
}
|
}
|
},
|
watch: {
|
edit: {
|
handler(val) {
|
if (val) {
|
this.getCustomerBaseList();
|
}
|
},
|
deep: true
|
}
|
},
|
created() {
|
this.getCondition();
|
},
|
mounted() {
|
this.initColumns();
|
if (this.isView || this.edit) {
|
this.getCustomerBaseList();
|
}
|
},
|
methods: {
|
// 处理变更标志显示
|
initColumns() {
|
const { objecttype } = this.$parent._data;
|
const { columns, tableHeader, noHistory } = this;
|
const isModify = objecttype === "jbo.app.BUSINESS_TYPE_CHANGE";
|
const newColumns =
|
isModify && !noHistory
|
? columns
|
: columns.filter(col => col.prop !== "changeflag");
|
const newTableHeader =
|
isModify && !noHistory
|
? tableHeader
|
: tableHeader.filter(col => col.prop !== "changeflag");
|
this.$set(this, "columns", newColumns);
|
this.$set(this, "tableHeader", newTableHeader);
|
},
|
/**
|
* 获取下拉选择项
|
*/
|
async getCondition() {
|
const params = { conditionName: "IsDelete" };
|
const res = await qryCondition(params);
|
if (res.code !== "00") {
|
return false;
|
}
|
const { columns } = this;
|
const newColumns = [...columns];
|
newColumns.forEach(item => {
|
if (item.name === "isdelete") {
|
item.options = res.result;
|
}
|
});
|
this.$set(this, "selOptions", res.result);
|
this.$set(this, "columns", newColumns);
|
},
|
// 清空table数据
|
restTable() {
|
this.tableData = [];
|
},
|
async getCustomerBaseList(edit) {
|
const { productid, serialno } = this.$parent._data;
|
const { currentPage, pageSize } = this.pageInfo;
|
this.loading = true;
|
const params = {
|
currentPage: edit ? this.editPageInfo.currentPage : currentPage,
|
objectno: serialno,
|
pageSize: edit ? this.editPageInfo.pageSize : pageSize,
|
productid
|
};
|
const listRes = await qryCustomerBaseList(params);
|
this.loading = false;
|
if (!listRes || listRes.code !== "00") {
|
return false;
|
}
|
// let = listRes.result && listRes.result.records
|
// if (this.edit) {
|
// }
|
const newList =
|
listRes.result &&
|
listRes.result.records.map(item => {
|
const newItem = { ...item };
|
newItem.isdeleteValue = newItem.isdelete === "1" ? "失效" : "生效";
|
newItem.operate = [
|
{ label: "保存", type: "SAVE", isShow: false },
|
{ label: "修改", type: "EDIT", isShow: true },
|
{ label: "删除", type: "DELETE", isShow: true }
|
];
|
return newItem;
|
});
|
// console.log('newList==========',newList);
|
this.$set(this.pageInfo, "total", listRes.result && listRes.result.total);
|
this.$set(
|
this.editPageInfo,
|
"total",
|
listRes.result && listRes.result.total
|
);
|
this.$set(this, "tableData", newList);
|
},
|
tipCancelSave() {
|
this.dialogTipVisible = false;
|
this.getCustomerBaseList();
|
},
|
async initProduct() {
|
if (!this.$parent.serialno) {
|
await this.$parent.handleSave("init", "customer");
|
if (!this.$parent.typeno) {
|
return false;
|
}
|
return false;
|
}
|
return true;
|
},
|
async handleAddCus() {
|
const isInit = await this.initProduct();
|
if (!isInit) {
|
return false;
|
}
|
const { tableData, $set } = this;
|
if (tableData.length > 0 && tableData.some(da => da.isEidt)) {
|
this.$message.error("您还有未保存的客群清单，请先保存");
|
return false;
|
}
|
let newList = [{ ...ADDITEMS }, ...tableData];
|
const newColumns = [...this.columns];
|
newColumns.forEach(item => {
|
if (item.name === "isdelete") {
|
item.options = this.selOptions.filter(ob => ob.value === "0");
|
}
|
});
|
if (newList.length > 10) {
|
newList = newList.slice(0, 10);
|
}
|
$set(this.editPageInfo, "total", this.editPageInfo.total + 1);
|
$set(this, "columns", newColumns);
|
$set(this, "tableData", newList);
|
},
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val;
|
this.getCustomerBaseList();
|
},
|
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val;
|
this.getCustomerBaseList();
|
},
|
// 修改编辑表格翻页条数
|
handleEditSizeChange(val) {
|
this.editPageInfo.pageSize = val;
|
this.getCustomerBaseList("edit");
|
},
|
|
// 修改编辑表格翻页数
|
handleEditCurrentChange(val) {
|
this.editPageInfo.currentPage = val;
|
this.getCustomerBaseList("edit");
|
},
|
async handleOperateClick(type, data, index) {
|
const { tableData, $set } = this;
|
if (type === "SAVE") {
|
const { customerscode, customersname, serialno, isdelete } = data;
|
const { typeno, objecttype } = this.$parent;
|
const params = {
|
customerscode,
|
customersname,
|
isdelete,
|
objectno: this.$parent.serialno,
|
objecttype,
|
productid: typeno,
|
serialno
|
};
|
if (!customerscode) {
|
const refCusForm = this.$refs.cusForm;
|
refCusForm.$refs["form"].validate(valid => {
|
if (!valid) {
|
this.$message.warning("请输入客群编码！");
|
}
|
});
|
return false;
|
}
|
if (!customersname) {
|
const refCusForm = this.$refs.cusForm;
|
refCusForm.$refs["form"].validate(valid => {
|
if (!valid) {
|
this.$message.warning("请输入客群名称！");
|
}
|
});
|
return false;
|
}
|
const saveRes = await addOrUpdateCustomerBase(params);
|
if (saveRes.code !== "00") {
|
return;
|
}
|
this.$message({
|
showClose: true,
|
message: "保存成功",
|
type: "success"
|
});
|
const newData = [...this.tableData];
|
const newDataItem = newData.filter((item, i) => i === index)[0];
|
newDataItem.serialno = saveRes.result.serialno;
|
newDataItem.isEidt = false;
|
newDataItem.isdeleteValue =
|
newDataItem.isdelete === "1" ? "失效" : "生效";
|
newDataItem.operate = !this.isView
|
? [
|
{ label: "保存", type: "SAVE", isShow: false },
|
{ label: "修改", type: "EDIT", isShow: true },
|
{ label: "删除", type: "DELETE", isShow: true }
|
]
|
: [];
|
newData[index] = newDataItem;
|
this.$set(this.editPageInfo, "total", newData.length);
|
await this.getCustomerBaseList();
|
// $set(this, "tableData", [...newData]);
|
}
|
if (type === "EDIT") {
|
const newData = [...tableData];
|
const newDataItem = newData.filter((item, i) => i === index)[0];
|
newDataItem.isEidt = true;
|
newDataItem.isdeleteValue =
|
newDataItem.isdelete === "1" ? "失效" : "生效";
|
newDataItem.operate = [
|
{ label: "保存", type: "SAVE", isShow: true },
|
{ label: "修改", type: "EDIT", isShow: false },
|
{ label: "取消", type: "CANCEL", isShow: true }
|
];
|
newData[index] = newDataItem;
|
const newColumns = [...this.columns];
|
newColumns.forEach(item => {
|
if (item.name === "isdelete") {
|
item.options = this.selOptions;
|
}
|
});
|
$set(this, "columns", newColumns);
|
$set(this, "tableData", [...newData]);
|
}
|
if (type === "CANCEL") {
|
this.dialogTipVisible = true;
|
}
|
if (type === "DELETE") {
|
const newData = tableData.filter((item, i) => i !== index);
|
const { isEidt, serialno } = data;
|
if (!isEidt) {
|
const params = {
|
serialno
|
};
|
const delRes = await delCustomerBase(params);
|
if (delRes.code !== "00") {
|
return;
|
}
|
this.$message({
|
showClose: true,
|
message: "删除成功",
|
type: "success"
|
});
|
}
|
this.getCustomerBaseList();
|
$set(this, "tableData", [...newData]);
|
}
|
}
|
},
|
components: {
|
EditTable,
|
ProTable
|
},
|
data() {
|
return {
|
columns: [...CUSTOMERSCOLUMNS],
|
tableData: [],
|
loading: true,
|
rules: { ...CUSTOMERSRULES },
|
dialogTipVisible: false,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
editPageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
selOptions: [],
|
isEidt: this.edit,
|
tableHeader: [...VIEWCUSTOMERSCOLUMNS]
|
};
|
}
|
};
|
</script>
|
<style lang="stylus" scoped>
|
.customers_main {
|
background: #fff;
|
padding: 10px 20px 20px 20px;
|
& >>> .tip_dialog {
|
width: 450px;
|
& .el-dialog__body {
|
& .form_main {
|
& .el-form {
|
& .el-form-item {
|
& .el-form-item__label {
|
line-height: 32px;
|
}
|
}
|
}
|
}
|
}
|
& .el-dialog__footer {
|
& .dialog-footer {
|
& .el-button--default {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
& .el-button--primary {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
background: #0081f0;
|
border-color: #0081f0;
|
border-radius: 4px;
|
margin-left: 40px;
|
}
|
}
|
}
|
}
|
& .add-button {
|
padding: 20px 0 30px 0;
|
}
|
&.add_btn {
|
height: 34px;
|
}
|
}
|
</style>
|
