<template>
|
<div class="customers-white-main">
|
<TableList
|
ref="commontable"
|
:condtionConfig="condtionConfig"
|
:columnConfig="columnConfig"
|
:condformdefConfig="condformdefConfig"
|
:operateBtns="operateBtns"
|
:formItemsConfig="formItemsConfig"
|
:defValuesConfig="defValuesConfig"
|
:formRulesConfig="formRulesConfig"
|
:userDefined="false"
|
:isAutoIndex="false"
|
:isMultipleSelect="true"
|
:buttonsArr="buttonsArr"
|
dialogTitle="白名单信息"
|
rowKeyName="serialno"
|
@handleSelectionChange="handleSelectionChange"
|
@handleBtnClick="handleBtnClick"
|
@handleSelFocus="handleSelFocus"
|
@handleSelOnChange="handleSelOnChange"
|
listApiName="qryWhiteCustomerList"
|
delApiName="deleteWhiteCustomer"
|
saveApiName="saveWhiteCusInfo"
|
updateApiName="updateWhiteCusInfo"
|
deleteKey="serialno"
|
deleteType="ARRAY"
|
:isListEdit="true"
|
/>
|
<el-dialog
|
title="批量导入"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
:show-close="false"
|
width="450"
|
center
|
custom-class="school_dialog_footer_set"
|
>
|
<el-upload
|
class="upload-main"
|
drag
|
action=""
|
:headers="uploadHeader"
|
:http-request="handleUpload"
|
:show-file-list="false"
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">
|
<a @click="downloadFile">模板下载</a>
|
</div>
|
</el-upload>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="批量删除确认"
|
:visible.sync="delDialogVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
:show-close="false"
|
width="450"
|
center
|
custom-class="cusm_dialog_footer_set del_dialog"
|
>
|
<div style="text-align: center">
|
请确认是否删除客户白名单数据：{{ deleteSum }}条，是否继续？
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="delDialogVisible = false">否</el-button>
|
<el-button type="primary" @click="deleteListItem">是</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters, mapActions } from "vuex";
|
import TableList from "../components/TableList.vue";
|
import {
|
CUSTOMERSWHITECOND,
|
CUSTOMERSWHITECONDDEF
|
} from "./config/condtion.config";
|
import { CUSTOMERSWHITECOLUMN } from "./config/column.config";
|
import { CUSTOMERSWHITEFORMS } from "./config/formItem.config";
|
import { CUSTOMERSWHITEDEFVALUES } from "./config/defValues.config";
|
import { CUSTOMERSWHITERULES } from "./config/rules.config";
|
import {
|
downloadTemplateForWhiteCus,
|
whiteCustomerBatchImport,
|
deleteWhiteCustomer,
|
qryCustomerBaseList,
|
getAllProjectList
|
} from "@/http/api";
|
import { Message } from "element-ui";
|
export default {
|
props: {},
|
provide() {
|
return {
|
getconfigInfo: this.getconfigInfo,
|
getconfigForm: this.getconfigForm
|
};
|
},
|
data() {
|
return {
|
condtionConfig: [...CUSTOMERSWHITECOND],
|
columnConfig: [...CUSTOMERSWHITECOLUMN],
|
condformdefConfig: { ...CUSTOMERSWHITECONDDEF },
|
formItemsConfig: [...CUSTOMERSWHITEFORMS],
|
defValuesConfig: { ...CUSTOMERSWHITEDEFVALUES },
|
formRulesConfig: { ...CUSTOMERSWHITERULES(true) },
|
buttonsArr: [
|
{ type: "import", value: "批量导入", icon: "el-icon-upload" },
|
{ type: "delete", value: "批量删除", icon: "el-icon-delete-solid" }
|
],
|
operateBtns: [
|
{ label: "详情", type: "DETAIL", value: true },
|
{ label: "修改", type: "EDIT", value: true },
|
{ label: "删除", type: "DELETE", value: true }
|
],
|
selecteData: [],
|
deleteSum: 0,
|
delDialogVisible: false,
|
optionsArr: ["productNames", "DataSource", "productList", "projectList"],
|
dialogVisible: false,
|
YesNoOption: [
|
{ value: "0", label: "有效" },
|
{ value: "1", label: "无效" }
|
],
|
uploadHeader: {
|
"Content-Type": "multipart/form-data; boundary=ReaquestHeader"
|
}
|
};
|
},
|
watch: {
|
optionsMap: {
|
handler(options) {
|
this.optionsData = options;
|
this.getconfigInfo(options);
|
},
|
deep: true
|
}
|
},
|
computed: {
|
// 获取state值
|
...mapState("rlc", {
|
optionsMap: state => state.OPTIONSMAP
|
}),
|
// 通过getters获取值
|
...mapGetters("rlc", ["getOptionsMap"])
|
},
|
async created() {
|
this.getOptionsData(this.optionsArr);
|
this.getUserInfo();
|
},
|
mounted() {},
|
methods: {
|
...mapActions("rlc", [
|
// 将 `this.setOptionsMap()` 映射为 `this.$store.dispatch('setOptionsMap')`
|
"getOptionsData",
|
"getUserInfo"
|
]),
|
async getconfigInfo(opts = this.optionsData) {
|
const items = {
|
productnames: "productNames",
|
datasource: "DataSource",
|
productno: "productList",
|
isDelete: "YesNoOption",
|
projectserialno: "AllProject"
|
};
|
if (!opts || opts.length < 1) {
|
return;
|
}
|
if (!this.AllProject) {
|
let { result } = await getAllProjectList({});
|
this.AllProject = result.map(res => {
|
return {
|
label: res.projectname,
|
value: res.serialno
|
};
|
});
|
}
|
const options = {
|
...opts,
|
YesNoOption: this.YesNoOption,
|
AllProject: this.AllProject
|
};
|
this.condtionConfig = [...CUSTOMERSWHITECOND].map(form => {
|
const newForm = { ...form };
|
if (newForm.type === "select" || newForm.type === "multipleSelect") {
|
newForm.options = options[items[newForm.name]];
|
}
|
return newForm;
|
});
|
this.formItemsConfig = [...CUSTOMERSWHITEFORMS].map(form => {
|
const newForm = { ...form };
|
if (newForm.type === "select" || newForm.type === "multipleSelect") {
|
newForm.options = options[items[newForm.name]];
|
}
|
return newForm;
|
});
|
this.formRulesConfig = { ...CUSTOMERSWHITERULES(true) };
|
},
|
getconfigForm(opts = this.optionsData) {
|
const items = {
|
datasource: "DataSource",
|
productno: "productList",
|
isDelete: "YesNoOption",
|
projectserialno: "AllProject"
|
};
|
if (!opts || opts.length < 1) {
|
return;
|
}
|
const options = {
|
...opts,
|
YesNoOption: this.YesNoOption,
|
AllProject: this.AllProject
|
};
|
this.formItemsConfig = [...CUSTOMERSWHITEFORMS].map(form => {
|
const newForm = { ...form };
|
// newForm.readonly = true;
|
newForm.placeholder = "";
|
if (newForm.type === "select" || newForm.type === "multipleSelect") {
|
newForm.options = options[items[newForm.name]];
|
}
|
return newForm;
|
});
|
this.formRulesConfig = { ...CUSTOMERSWHITERULES(false) };
|
},
|
async qryCustomerBaseList(productid) {
|
const customRes = await qryCustomerBaseList({ productid });
|
if (customRes && customRes.code === "00") {
|
this.formItemsConfig = [...this.formItemsConfig].map(form => {
|
const newForm = { ...form };
|
if (newForm.name === "productcustomerbasenameSel") {
|
newForm.options = customRes.result;
|
}
|
return newForm;
|
});
|
}
|
},
|
handleSelOnChange(name, value, label) {
|
const refForm = this.$refs.commontable.$refs.dialogForm.$refs[
|
"createForm"
|
];
|
if (name === "productno") {
|
refForm.model.productname = label;
|
refForm.model.productno = value;
|
this.qryCustomerBaseList(value);
|
}
|
if (name === "projectserialno") {
|
refForm.model.projectname = label;
|
refForm.model.projectserialno = value;
|
}
|
if (name === "isDelete") {
|
refForm.model.isDelete = value;
|
}
|
if (name === "productCustomerBase") {
|
refForm.model.productcustomerbasename = label;
|
refForm.model.productCustomerBase = value;
|
}
|
},
|
handleSelFocus(name, options = []) {
|
const refForm = this.$refs.commontable.$refs.dialogForm.$refs[
|
"createForm"
|
];
|
const roductnoVal = refForm.model.productno;
|
if (options.length < 1 && !roductnoVal) {
|
refForm.validateField("productno", errorMessage => {
|
this.$message.warning(errorMessage);
|
});
|
}
|
},
|
operateHandleClick() {
|
this.$router.push({ name: "addImageDataConfig" });
|
},
|
async handleBtnClick(type) {
|
if (type === "import") {
|
this.dialogVisible = true;
|
}
|
if (type === "delete") {
|
const { selecteData } = this;
|
if (selecteData.length < 1) {
|
this.$message.warning("请选择需要删除的白名单");
|
return false;
|
}
|
this.deleteSum = selecteData.length;
|
this.delDialogVisible = true;
|
}
|
},
|
async deleteListItem() {
|
const { selecteData } = this;
|
const deleteSelectRes = await deleteWhiteCustomer({
|
serialno: selecteData.map(({ serialno }) => {
|
return serialno;
|
})
|
});
|
if (deleteSelectRes && deleteSelectRes.code === "00") {
|
this.$refs.commontable.getTableList();
|
this.delDialogVisible = false;
|
setTimeout(() => {
|
this.$message.success("删除成功");
|
}, 10);
|
}
|
},
|
handleSelectionChange(val) {
|
this.selecteData = val;
|
},
|
async handleUpload(file) {
|
if (file.file) {
|
const formData = new FormData();
|
formData.append("file", file.file);
|
await whiteCustomerBatchImport(formData).then(res => {
|
if (res.code === "00") {
|
this.$message.success("导入成功");
|
this.dialogVisible = false;
|
this.$refs.commontable.getTableList();
|
}
|
});
|
}
|
},
|
handleUploadFile() {},
|
async downloadFile() {
|
await downloadTemplateForWhiteCus({ fileName: "批量导入白名单模板" });
|
Message.closeAll();
|
}
|
},
|
components: { TableList }
|
};
|
</script>
|
|
<style lang="less">
|
.customers-white-main {
|
& .el-upload__tip {
|
color: #409eff;
|
& a {
|
cursor: pointer;
|
}
|
}
|
& .cusm_dialog_footer_set {
|
width: 400px;
|
& .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;
|
}
|
}
|
}
|
}
|
& .school_dialog_footer_set {
|
& .el-dialog__body {
|
text-align: center;
|
}
|
}
|
& .del_dialog {
|
width: 450px;
|
}
|
}
|
</style>
|
