index.vue

<template>
  <div>
    <!-- 分类 -->
    <div class="classify clearfix">
      <div class="classify-btns">
        <a-button @click="specialtyChange(null)" :type="!type || !type.length ? 'primary' : ''">
          全部
        </a-button>
        <a-button @click="specialtyChange(item.specialtyCode)" :type="type.indexOf(item.specialtyCode) > -1 ? 'primary' : ''" v-for="item in welfareType" :key="item.specialtyCode">
          {{ item.specialtyDesc }}
        </a-button>
      </div>
      <div class="save-btn">
        <!-- <a-button type="primary" @click="addNew">
          <Icon name="ssiadd" :size="14" />新增
        </a-button> -->
        <!-- <a-button type="primary">
          <Icon name="ssidownload" :size="14" />保存
        </a-button> -->
        <a-button type="primary" @click="totEditWelfare">编辑福利信息</a-button>
      </div>
    </div>
    <a-collapse v-model="activeKeys" expand-icon-position="right" :bordered="false">
      <a-collapse-panel v-for="item in coverageData" :key="item.coverageCode" :header="item.coverageDesc">
        <div>
          <a-row class="policy_line" :gutter="10">
            <a-col :span="6">是否开放直付：{{ item.isDirect | yesFilters }}</a-col>
            <!-- <a-col :span="6">直付刷卡上限：</a-col> -->
            <a-col :span="6">事先授权：</a-col>
            <a-col :span="6">等待期：{{ item.waitingPeriod }}</a-col>
            <a-col :span="6">赔付比例：</a-col>
          </a-row>
        </div>
        <condition class="conditions" :formData="{ ...item, conditionType: '02' }" />
        <benefits :formData="item" />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import benefits from "../benefits";
import condition from "../condition";

export default {
  props: {
    formData: {
      type: Object,
      required: true,
    },
  },
  components: {
    condition,
    benefits,
  },
  data() {
    return {
      activeKeys: "",
      coverageData: [],
      expandedRowKeys: [],
      type: [],
      welfareType: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      coverageCode: [],
    };
  },
  filters: {
    yesFilters(value) {
      const data = {
        Y: '是',
        N: '否'
      };
      return data[value]||'否';
    },
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler: function () {
        this.type = [];
        this._getCoverageList();
      },
    },
  },
  created() {
    this._getSpecialtyCode();
    // this._getCoverageList();
  },
  methods: {
    addNew() {
      const item = { isEdit: true, isNew: true };
      this.pager.pageSize++;
      this._getCoverageCode(); // 获取责任项目码表
      this.coverageData.unshift(item);
    },
    editData(record) {
      this._getCoverageCode(); // 获取责任项目码表
      const { coverageCode } = record;
      const index = this.expandedRowKeys.indexOf(coverageCode);
      if (index > -1) {
        this.expandedRowKeys.splice(index, 1);
      }
      this.$set(record, "isEdit", true);
    },
    saveEditData(record) {
      record.isEdit = undefined;
    },
    deleteData(record, index) {
      if (record.isNew) {
        this.coverageData.splice(index, 1);
        return true;
      }
      this.coverageData.splice(index, 1);
    },
    specialtyChange(code) {
      if (code || code == 0) {
        this.type.push(code)
      } else {
        this.type = [];
      }
      console.log(code, code || code == 0, this.type)
      this._getCoverageList();
    },
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 编辑福利信息
    totEditWelfare() {
      this.$router.push({
        name: 'welfareEdit',
        query: {
          payorCode: this.formData.payorCode,
          corpCode: this.formData.corpCode,
          planCode: this.formData.planCode,
        }
      })
    },
    _getSpecialtyCode() {
      this.$apis.GETSPECIALTYLIST().then((res) => {
        this.welfareType = res.content || [];
      });
    },
    _getCoverageList() {
      const { corpCode, payorCode, planCode } = this.formData;
      this.$apis.GETCOVERAGELIST({
          corpCode,
          payorCode,
          planCode,
          specialtyCode: this.type ? this.type.join(';') : this.type,
        }).then((res) => {
          this.coverageData = res.content || [];
        });
    },
    _getCoverageCode() {
      if (this.coverageCode && this.coverageCode.length) {
        return true;
      }
      this.$apis.GETCOVERAGECODE().then((res) => {
        this.coverageCode = res.content || [];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.none-label {
  text-align: right;
}
.policy_line {
  .pa(0, 30, 0, 30);
  line-height: 60px;
  .ant-col{
    border-bottom: 1px solid #f8fafb;
  }
}
.classify {
  .pa(0, 20, 0, 20);
  .mg-t(30);
  .mg-b(10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8fafb;
  .ant-btn:not(:first-child) {
    .mg-l(30);
  }
  .classify-btns{
    .pa(10, 0, 10, 0);
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
  }
  .save-btn {
    width: 160px;
    text-align: center;
    float: right;
  }
}
.conditions{
  .pa(0, 30, 0, 30)
}
.icon-class {
  .mg-r(10);
}
</style>