<template>
<!--折扣信息-->
<div class="discount-container">
<div class="flex btns-div">
<div class="title-div">折扣信息</div>
<div class="flex btns">
<a-button type="primary" icon="plus" @click.stop="editEvt({})">新增折扣信息</a-button>
<!-- <a-button type="primary">医科理赔申请书模版</a-button>
<a-button type="primary">齿科理赔申请书模版</a-button>
<a-button type="primary">预授权申请书模版</a-button> -->
</div>
</div>
<a-table :columns="columns" :data-source="tableList" :scroll="{ x: 'max-content' }" :pagination="false" >
<div v-for="col in columns" :slot="col.dataIndex" slot-scope="text, record, index" :key="col.dataIndex">
<template v-if="col.dataIndex == 'operation'">
<a-button type="link" @click.stop="editEvt(record)">修改</a-button>
<a-button type="link" class="danger" @click.stop="delRecord(index)">删除</a-button>
</template>
<template v-else-if="col.dataIndex == 'benefits'" slot-scope="text, record">
<a-select v-if="record.edit" v-model="record.benefits2" placeholder="请选择" mode="multiple">
<a-select-option :value="item.benefitCode" v-for="item in benefitType" :key="item.benefitCode">{{ item.description }}</a-select-option>
</a-select>
<span v-else>{{ filterType(record.benefits2) }}</span>
</template>
<template v-else>
<a-input v-if="record.edit" placeholder="请输入" v-model="record[col.dataIndex]"/>
<span v-else>{{ text }}</span>
</template>
</div>
</a-table>
<!--分页-->
<BurtPagination :pagination="pagination" @pageChange="getTableList" />
<a-modal :title="editFormObj.id?'编辑':'新增'" :visible="dialogShow" width="60%" :maskClosable="false"
okText="确定" cancelText="取消" @ok="handleEditOK" @cancel="dialogShow = false">
<a-form-model layout="vertical" ref="editForm" :model="editFormObj" :rules="editRules">
<a-row :gutter="30">
<a-col :lg="12" :xs="24">
<a-form-model-item label="项目" prop="benefits">
<a-select v-model="editFormObj.benefits2" placeholder="请选择" mode="multiple">
<a-select-option :value="item.benefitCode" v-for="item in benefitType" :key="item.benefitCode">{{ item.description }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :lg="12" :xs="24">
<a-form-model-item label="折扣比例%" prop="ratio">
<a-input v-model.trim="editFormObj.ratio" placeholder="折扣比例%" type="number" :min="0" />
</a-form-model-item>
</a-col>
<a-col :xs="24">
<a-form-model-item label="备注" prop="remark">
<a-input type="textarea" v-model.trim="editFormObj.remark" placeholder="备注" />
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</a-modal>
</div>
</template>
<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
const columns = [
{ title: "序号", dataIndex: "id", width: 205},
{ title: "项目",dataIndex: "benefits", ellipsis: true, scopedSlots: { customRender: "benefits" },width: 310, },
{ title: "折扣比例%", dataIndex: "ratio", ellipsis: true, scopedSlots: { customRender: "ratio" },width: 190,},
{ title: "备注", dataIndex: "remark", scopedSlots: { customRender: "remark" }, width: 180,},
{ title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" },fixed: "right", width: "170px", align: "center" },
];
export default {
props: {
detailObj: {
discountList: []
}
},
data() {
return {
dialogShow: false,
columns,
pagination: {
pageNum: 1,
pageSize: 5,
total: 0,
},
dataList: [],//所有的折扣信息
tableList: [], //显示
benefitType: [], //福利类型
benefitTypeObj: {}, //福利类型对象
editFormObj: {
id: "",
benefits2: [],
ratio: "",
remark: ""
},
editRules: {
benefits2: [{ required: true, message: "请选择", trigger: "blur" }],
ratio: [{ required: true, message: "请输入", trigger: "blur" }],
},
};
},
components: {
BurtPagination,
},
watch: {
detailObj: {
handler(newVal){
let list = newVal.discountList || [];
this.pagination.total = list.length;
this.dataList = list;
this.getTableList();
},
immediate: true,
deep: true
}
},
async created() {
this.getBenefitType();
},
methods: {
//过滤器
filterType(val) {
let txt = (val || []).map((item) => {
return this.benefitTypeObj[item] || "";
});
return txt.join("，");
},
//获取福利类型列表
getBenefitType() {
return new Promise((resolve, reject) => {
this.$apis.GETBENEGITTYPE().then((res) => {
if (res.returnCode == "0000") {
this.benefitType = res.content || [];
(res.content || []).forEach((item) => {
this.benefitTypeObj[item.benefitCode] = item.description;
});
resolve();
} else {
this.$message.error(res.returnMsg);
reject();
}
});
});
},
//分页
getTableList() {
let list = this.dataList.slice(
(this.pagination.pageNum - 1) * this.pagination.pageSize,
this.pagination.pageNum * this.pagination.pageSize
);
this.tableList = list.map((item) => {
return {
...item,
benefits2: item.benefits ? item.benefits.split(",") : [],
};
});
},
//编辑
editEvt(record) {
this.editFormObj = {
id: record.id || "",
benefits2: record.benefits2 || [],
ratio: record.ratio || "",
remark: record.remark || ""
};
this.dialogShow = true;
},
//编辑保存
handleEditOK() {
this.$refs.editForm.validate((valid) => {
if (valid) {
let funcName = this.editFormObj.id? 'PAYORADDDISCOUNTBENEFIT': 'PAYORADDDISCOUNT';
this.$apis[funcName]({
payorId: this.detailObj.id,
id: this.editFormObj.id,
ratio: this.editFormObj.ratio,
remark: this.editFormObj.remark,
discountBenefitList: (this.editFormObj.benefits2 || []).map((item) => {
return {
benefitCode: item,
discountId: this.editFormObj.id,
};
}),
})
.then((res) => {
if (res.returnCode == "0000") {
this.$message.success("编辑成功");
this.dialogShow = false;
this.$emit('getDetail');
} else {
this.$message.error(res.returnMsg);
}
});
}
});
},
//删除
delRecord(index) {
this.$modal.confirm({
title: "删除",
content: "确定删除该条记录？",
okText: "确定",
cancelText: "取消",
onOk: () => {
this.$apis.PAYORDISCOUNTDELETE({
id: this.tableList[index].id,
})
.then((res) => {
if (res.returnCode == "0000") {
this.$message.success("删除成功");
this.tableList.splice(index, 1);
} else {
this.$message.error(res.returnMsg);
}
});
},
});
},
},
};
</script>
<style lang="less" scoped>
.discount-container {
margin-top: 16px;
}
.title-div {
line-height: 52px;
color: #252631;
font-weight: bold;
}
.btns-div{
justify-content: space-between;
.ant-btn{
margin-left: 30px;
}
}
</style>