index.vue

<template>
  <div class="benefits">
    <div class="none-label mar-bottom10">
      <a-button type="primary" @click="editBenefitData(null)">
        <Icon name="ssiadd" :size="14" />新增福利
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :locale="{ emptyText: 'No Data' }"
      :data-source="benefitData"
      row-key="benefitCode"
      :pagination="false"
    >
      <template slot="operation" slot-scope="record">
        <a-button type="link" @click.stop="editBenefitData(record)">修改</a-button>
        <a-popconfirm
          title="你确定要删除吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteData(record)"
        >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm>
      </template>
      <template slot="expandedRowRender" slot-scope="record">
        <condition :form-data="{ ...record, conditionType: '01' }" />
      </template>
    </a-table>
    <a-modal
      title="福利管理"
      v-model="isBenefitEditShow"
      :footer="null"
      width="50%"
      @cancel="isBenefitEditShow = false"
    >
      <a-form-model ref="editForm" layout="vertical" :model="editForm" :rules="editRule">
        <a-row :gutter="20">
          <a-col :md="12">
            <a-form-model-item label="客户公司名称" prop="corpCode">
              <a-input disabled v-model="editForm.corpCode"> </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <a-form-model-item label="保险计划" prop="planCode">
              <a-input disabled v-model="editForm.planCode"> </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <a-form-model-item label="保险责任" prop="coverageCode">
              <a-input disabled v-model="editForm.coverageCode"> </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <a-form-model-item label="福利项目" prop="benefitCode">
              <a-select v-model="editForm.benefitCode" show-search allow-clear @filterOption="filterCode">
                <a-select-option v-for="item in benefitCode" :key="item.benefitCode" :vlaue="item.benefitCode">
                  {{ item.description }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <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-col>
          <a-col :md="12">
            <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-col>
          <a-col :md="12">
            <a-form-model-item label="等待期">
              <a-input-number v-model="editForm.waitingPeriod">
              </a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <a-form-model-item label="是否天数">
              <a-input-number v-model="editForm.isdays"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <a-form-model-item label="英文描述">
              <a-input v-model="editForm.englishDesc"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <a-form-model-item label="描述">
              <a-input v-model="editForm.loaDesc"> </a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :md="12">
            <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"
                  :vlaue="item.code"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col> -->
        </a-row>

        <a-form-model-item label="备注">
          <a-textarea v-model="editForm.remarks" :autoSize="{ minRows: 2, maxRows: 5 }"></a-textarea>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="saveBenefitData">
            <Icon name="ssiadd" :size="14" />保存
          </a-button>
          <a-button class="mar-left10" @click="isBenefitEditShow = false">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import condition from "../condition";
import moment from 'moment'

export default {
  props: {
    formData: {
      type: Object,
      required: true,
    },
  },
  components: {
    condition,
  },
  data() {
    const dateFormat = (val) => {
      return val && moment(val).format('YYYY-MM-DD')
    }
    const columns = [
      { title: "责任项目明细", dataIndex: "benefitDesc" },
      // { title: "预授权申请", dataIndex: "index" },
      { title: "更新日期", dataIndex: "modifierDate", width: 180 },
      { title: "开始日期", dataIndex: "startDate", customRender: dateFormat },
      { title: "结束日期", dataIndex: "endDate", customRender: dateFormat },
      { title: "备注", dataIndex: "remark", width: 180 },
      {
        title: "操作",
        key: "operation",
        width: "175px",
        fixed: "right",
        scopedSlots: { customRender: "operation" },
      },
    ];
    return {
      columns,
      isBenefitEditShow: false,
      benefitData: [],
      benefitCode: [],
      editForm: {},
      editRule: {
        benefitCode: [{ required: true, message: "请选择福利项" }],
        startDate: [{ required: true, message: "请选择开始时间" }],
        endDate: [{ required: true, message: "请选择结束时间" }],
      },
    };
  },
  mounted() {
    this._getBenefitList();
  },
  methods: {
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 新增或编辑benefit数据
    editBenefitData(data) {
      data = data || {
        payorCode: this.formData.payorCode,
        corpCode: this.formData.corpCode,
        planCode: this.formData.planCode,
        coverageCode: this.formData.coverageCode,
        isDirect: "N",
        status: "1",
      };
      this._getBenefitCode();
      this.editForm = this.$lodash.cloneDeep(data);
      this.isBenefitEditShow = true;
    },
    deleteData(record) {
      const data = this.$lodash.cloneDeep(record);
      data.status = "2"; // 置为无效状态即删除
      this._editBenefitData(data);
    },
    saveBenefitData() {
      this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false;
        }
      });
      this._editBenefitData(this.editForm);
    },
    _editBenefitData(data) {
      const fn = data.id || data.id === 0 ? this.$apis.EDITBENEFITLIST : this.$apis.ADDBENEFITLIST;
      fn(data).then((res) => {
        if (res.returnCode === "0000") {
          this.$message.success(res.returnMsg || "操作成功");
          this._getBenefitList();
          this.isBenefitEditShow = false;
        } else {
          this.$message.error(res.returnMsg || "操作失败");
        }
      });
    },
    _getBenefitList() {
      const { corpCode, coverageCode, payorCode, planCode } = this.formData;
      const data = { corpCode, coverageCode, payorCode, planCode };
      this.$apis.GETBENEFITLIST(data).then((res) => {
        this.benefitData = res.content || [];
      });
    },
    _getBenefitCode() {
      if (this.benefitCode && this.benefitCode.length) {
        return true;
      }
      this.$apis.GETBENEGITTYPE().then((res) => {
        this.benefitCode = res.content || [];
      });
    },
  },
};
</script>

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