companyDiscount.vue

<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>