index.vue

<template>
  <div class="condition">
    <div class="none-label mar-bottom10">
      <a-button type="primary" @click="editConditionData(null)">
        <Icon name="ssiadd" :size="14" />新增条件
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :locale="{ emptyText: 'No Data' }"
      :data-source="conditionList"
      row-key="id"
      :pagination="false"
    >
      <template slot="operation" slot-scope="record">
        <a-button type="link" @click.stop="editConditionData(record)">修改</a-button>
        <a-popconfirm
          title="你确定要删除吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteData(record)"
        >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <a-modal
      title="条件管理"
      v-model="isConditionEditShow"
      :footer="null"
      @cancel="cancel"
    >
      <a-form-model ref="editForm" layout="vertical" :model="editForm" :rules="editRule">
        <a-form-model-item label="保障限制" prop="frequencyCode">
          <a-select v-model="editForm.frequencyCode" show-search allow-clear :filterOption="filterCode">
            <a-select-option v-for="item in frequencyCode" :key="item.frequencyCode + item.frequencyDesc" :value="item.frequencyCode">
              {{ item.frequencyDesc }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="保障福利" prop="limitCode">
          <a-select v-model="editForm.limitCode" show-search allow-clear :filterOption="filterCode">
            <a-select-option v-for="item in limitCode" :key="item.limitCode + item.limitDesc" :value="item.limitCode">
              {{ item.limitDesc }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="福利限制">
          <a-input-number v-model="editForm.maxValue"> </a-input-number>
        </a-form-model-item>
        <!-- <a-form-model-item label="开始时间" prop="startDate">
          <a-date-picker v-model="editForm.startDate" placeholder="请选择开始时间" value-format="YYYY-MM-DD 00:00:00"></a-date-picker>
        </a-form-model-item>
        <a-form-model-item label="结束时间" prop="endDate">
          <a-date-picker v-model="editForm.endDate" placeholder="请选择结束时间" value-format="YYYY-MM-DD 00:00:00"></a-date-picker>
        </a-form-model-item> -->
        <!-- <a-row :gutter="10">
          <a-col :span="8">
            <a-form-model-item label="年限额">
              <a-input-number v-model="editForm.minValue"> </a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="最大值">
              <a-input-number v-model="editForm.maxValue"> </a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="赔付比率">
              <a-input-number v-model="editForm.familyMaxValue">
              </a-input-number>
            </a-form-model-item>
          </a-col>
        </a-row> -->
        <a-form-model-item label="币种">
          <a-select v-model="editForm.currency" show-search allow-clear :filterOption="filterCode">
            <a-select-option v-for="item in currencyCode" :key="item.code + item.name" :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="状态">
          <a-select
            v-model="editForm.status"
            show-search
            allow-clear
            :filterOption="filterCode"
          >
            <a-select-option
              v-for="item in statusCode"
              :key="item.code"
              :value="item.code"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item> -->
        <a-form-model-item label="备注" prop="remark">
          <a-textarea v-model="editForm.remark" :autoSize="{ minRows: 2, maxRows: 5 }"></a-textarea>
        </a-form-model-item>
        <a-form-model-item class="text-r">
          <a-button type="primary" @click="saveConditionData">
            <Icon name="ssiadd" :size="14" />保存
          </a-button>
          <a-button class="mar-left10" @click="cancel">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>

export default {
  props: {
    formData: {
      type: Object,
      required: true,
    },
  },
  data() {
    const columns = [
      { title: "条件类型", dataIndex: "frequencyDesc" },
      { title: "条件内容", dataIndex: "limitDesc" },
      { title: "状态", dataIndex: "status", customRender: (val) => {
        for(let i = 0; i < this.statusCode.length; i ++) {
          if (val === this.statusCode[i].code) {
            return this.statusCode[i].name
          }
        }
        return val;
      } },
      // { title: "限额或限次", dataIndex: "index" },
      { title: "最大值", dataIndex: "maxValue", customRender: (val, row) => {
        if (row.limitCode.indexOf('07') === 0) {
          return val + '%'
        }
        return val
      } },
      { title: "备注", dataIndex: "remark" },
      {
        title: "操作",
        key: "operation",
        width: "175px",
        fixed: "right",
        align: 'center',
        scopedSlots: { customRender: "operation" },
      },
    ];
    return {
      columns,
      conditionList: [],
      isConditionEditShow: false,
      editForm: {},
      frequencyCode: [],
      limitCode: [],
      currencyCode: [
        { code: "RMB", name: "人民币" },
        { code: "US", name: "美金" },
      ],
      statusCode: [
        { code: "1", name: "有效" },
        { code: "2", name: "无效" },
      ],
      editRule: {
        frequencyCode: [{ required: true, message: "请选择限额" }],
        limitCode: [{ required: true, message: "请选择保障福利" }],
      },
    };
  },
  mounted() {
    this._getConditionList();
  },
  methods: {
    // 选择框筛选
    filterCode(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    editConditionData(data) {
      const { planCode, payorCode, coverageCode, corpCode, benefitCode, conditionType } = this.formData;
      data = data || {
        planCode,
        payorCode,
        coverageCode,
        corpCode,
        benefitCode,
        conditionType,
        currency: "RMB",
        status: "1",
      };
      this.editForm = this.$lodash.cloneDeep(data);
      this._getFrequencyCode();
      this._getLimitCode();
      this.isConditionEditShow = true;
    },
    saveConditionData() {
      this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.editForm.id || this.editForm.id === 0) {
          this._editConditionData(this.editForm);
        } else {
          this._addConditionData(this.editForm);
        }
      });
    },
    cancel() {
      this.$refs.editForm.resetFields();
      this.isConditionEditShow = false;
    },
    deleteData(record) {
      const data = this.$lodash.cloneDeep(record);
      data.status = "2"; // 置为无效状态即删除
      this._editConditionData(data);
    },
    _getConditionList() {
      const { planCode, payorCode, coverageCode, corpCode, benefitCode, conditionType } = this.formData;
      const data = { planCode, payorCode, coverageCode, corpCode, benefitCode, conditionType };
      this.$apis.GETCONDITIONLIST(data).then((res) => {
        this.conditionList = res.content || [];
      });
    },
    _getFrequencyCode() {
      if (this.frequencyCode && this.frequencyCode.length) {
        return true;
      }
      this.$apis.GETFREQUENCYCODE().then((res) => {
        this.frequencyCode = res.content || [];
      });
    },
    _getLimitCode() {
      if (this.limitCode && this.limitCode.length) {
        return true;
      }
      this.$apis.GETLIMITCODE().then((res) => {
        this.limitCode = res.content || [];
      });
    },
    _addConditionData(data) {
      this.$apis.ADDCONDITIONDATA(data).then((res) => {
        if (res.returnCode === "0000") {
          this._getConditionList();
          this.$message.success(res.returnMsg || "操作成功");
          this.isConditionEditShow = false;
        } else {
          this.$message.error(res.returnMsg || "操作失败");
        }
      });
    },
    _editConditionData(data) {
      this.$apis.EDITCONDITIONDATA(data).then((res) => {
        if (res.returnCode === "0000") {
          this._getConditionList();
          this.$message.success(res.returnMsg || "操作成功");
          this.isConditionEditShow = false;
        } else {
          this.$message.error(res.returnMsg || "操作失败");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.condition {
  .pa(0, 20, 10, 20);
  background-color: #fff;
}
</style>