表格编辑新增功能实现，福利信息页面处理

src/api/apis_moudles/base.js

@@ -5,4 +5,5 @@ export default {
   corporateCodeList: "/backstage/auth/corporateList",
   planCodeList: "/backstage/auth/planList",
   uploadImg: "/common/upload",
+  specialtyList: "/backstage/auth/specialtyList",
 };

src/api/apis_moudles/customer.js

@@ -3,4 +3,5 @@ export default {
   getCustomerList: "/backstage/auth/patientList",
   updateCustomList: "/backstage/auth/updatePatientPolicy",
   createCustomer: "/backstage/auth/createPatient",
+  customerDetail: "/backstage/auth/patientDetail",
 };

src/api/apis_moudles/welfare.js

 // 福利管理api
-export default {};
+export default {
+  benefitType: "/backstage/auth/benefitMasterList",
+  coverageList: "/backstage/auth/coverageList",
+};

src/api/funcs_modules/base.js

@@ -8,21 +8,29 @@ const GETUSERINFO = (params) => {
     params,
   });
 };
+
 // 保险公司下拉数据
 const GETPAYORCODE = (data) => {
   return req.post(apis.payorCodeList, {
     data,
   });
 };
+
 // get corporate Code 根据保险公司获取客户公司
 const GETCORPORATECODE = (data) => {
   return req.post(apis.corporateCodeList, data);
 };
+
 // get plan Code 根据客户公司获取保险计划
 const GETPLANCODE = (data) => {
   return req.post(apis.planCodeList, data);
 };
 
+// 科室信息
+const GETSPECIALTYLIST = (data) => {
+  return req.post(apis.specialtyList, data);
+};
+
 // 上传图片
 const UPLOADIMG = (data) => {
   return req.post(apis.uploadImg, data);
@@ -34,5 +42,6 @@ export default {
   GETPAYORCODE,
   GETCORPORATECODE,
   GETPLANCODE,
+  GETSPECIALTYLIST,
   UPLOADIMG,
 };

src/api/funcs_modules/customer.js

@@ -7,6 +7,11 @@ const GETCUSTOMERLIST = function (data) {
   return req.post(apis.getCustomerList, data);
 };
 
+// get custom detail
+const GETCUSTOMERDETAIL = function (data) {
+  return req.post(apis.customerDetail, data);
+};
+
 // add or update custom data
 const UPDATECUSTOMDATA = function (data) {
   return req.post(apis.updateCustomList, data);
@@ -17,4 +22,9 @@ const CREATENEWCUSTOMER = function (data) {
   return req.post(apis.createCustomer, data);
 };
 
-export default { GETCUSTOMERLIST, UPDATECUSTOMDATA, CREATENEWCUSTOMER };
+export default {
+  GETCUSTOMERLIST,
+  GETCUSTOMERDETAIL,
+  UPDATECUSTOMDATA,
+  CREATENEWCUSTOMER,
+};

src/api/funcs_modules/welfare.js

 // 福利管理函数库
-// import apis from "../apis_moudles/index";
-// import req from "../request";
+import apis from "../apis_moudles/welfare.js";
+import req from "../request";
+
+const GETBENEGITTYPE = () => {
+  return req.post(apis.benefitType);
+};
+
+const GETCOVERAGELIST = (data) => {
+  return req.post(apis.coverageList, data);
+};
 
 // 对象数组
-export default {};
+export default { GETBENEGITTYPE, GETCOVERAGELIST };

src/assets/style/reset.less

@@ -170,6 +170,13 @@ select {
   vertical-align: middle;
 }
 
+.success.ant-btn-link {
+  color: #4cd964;
+}
+.danger.ant-btn-link {
+  color: #ff3b30;
+}
+
 // 菜单默认样式及激活样式重置
 .menu {
     .icon-class {
@@ -244,6 +251,11 @@ select {
         //   .fs(21);
         .pa(0, 8, 0, 8)
     }
+    // 编辑的时候字体颜色修改
+    .ant-input,
+    .ant-select{
+      color: #2B63FF;
+    }
 }
 .ant-btn-primary{
     background-color: #2B63FF;
@@ -267,7 +279,7 @@ select {
   }
 }
 
-.custom-info {
+.ant-pagination {
   .ant-pagination-item-active {
     .fs(16);
     border: none;
@@ -284,6 +296,15 @@ select {
   .ant-pagination-item:not(.ant-pagination-item-active) {
     display: none;
   }
+  .current-page {
+    color: #4d7cfe;
+  }
+  .size-change {
+    .w(107);
+    .mg-l(40);
+    background-color: #f8fafb;
+    border: none;
+  }
 }
 
 .ant-radio-group{

src/components/Icon/icon.vue

 <template>
-  <div
-    class="icon-class"
-    :style="`font-size:${size}px`"
-    @click.stop="clickEvent"
-  >
+  <div class="icon-class" :style="`font-size:${size}px`" @click="clickEvent">
     <svg class="icon" aria-hidden="true">
       <use :xlink:href="iconName" />
     </svg>

src/router/modules/welfare.js

 // 福利管理路由表,分包名称:welfare
 export default {
   path: "/welfare",
-  name: "Welfare",
+  name: "welfare",
   component: () => {
     return import(/* webpackChunkName: "Welfare" */ "@/views/welfare");
   },

src/views/customer/edit/index.vue

@@ -53,7 +53,7 @@
           </a-form-model-item>
         </a-col>
         <a-col :xl="6" :lg="6" :sm="12">
-          <a-form-model-item label="客户公司名称" prop="payorName">
+          <a-form-model-item label="客户公司名称" prop="corpName">
             <a-select
               v-model="form.corpName"
               placeholder="请选择客户公司名称"
@@ -214,7 +214,7 @@
             </div>
           </a-form-model-item>
         </a-col>
-        <a-col :xl="24" :lg="18" :sm="12" class="none-label">
+        <a-col :xl="24" :lg="18" :sm="12" class="none-label clearfix">
           <a-form-model-item label="button">
             <a-button type="primary">
               <Icon name="ssiprint" :size="14" />打印理赔申请书
@@ -273,7 +273,12 @@ export default {
         this.$apis.CREATENEWCUSTOMER(this.form).then((res) => {
           if (res.returnCode === "0000") {
             this.$message.success("新建成功");
-            this.$router.push("/customer");
+            const { id, patientPolicyId } = res.content || {};
+            this.$router.push({
+              name: "welfare",
+              query: { id, patientPolicyId },
+            });
+            // this.$router.push("/customer");
           } else {
             this.$message.success(res.returnMsg || "新建失败");
           }

src/views/customer/info/index.vue

@@ -3,12 +3,12 @@
     <!-- form -->
     <a-form-model ref="form" layout="vertical" :model="form">
       <a-row :gutter="30">
-        <a-col :xl="5" :lg="6" :sm="12">
+        <a-col :xl="6" :lg="6" :sm="12">
           <a-form-model-item label="病历号码">
             <a-input v-model="form.mrnNo" placeholder="请输入病历号"></a-input>
           </a-form-model-item>
         </a-col>
-        <a-col :xl="5" :lg="6" :sm="12">
+        <a-col :xl="6" :lg="6" :sm="12">
           <a-form-model-item label="客户姓名">
             <a-input
               v-model="form.patientName"
@@ -24,7 +24,7 @@
             ></a-date-picker>
           </a-form-model-item>
         </a-col>
-        <a-col :xl="4" :lg="6" :sm="12">
+        <a-col :xl="5" :lg="6" :sm="12">
           <a-form-model-item label="保险公司">
             <a-select v-model="form.payorId" placeholder="请选择保险公司">
               <a-select-option
@@ -37,7 +37,7 @@
             </a-select>
           </a-form-model-item>
         </a-col>
-        <a-col :xl="5" :lg="6" :sm="12">
+        <a-col :xl="6" :lg="6" :sm="12">
           <a-form-model-item label="保单号码">
             <a-input
               v-model="form.policyNo"
@@ -45,7 +45,7 @@
             ></a-input>
           </a-form-model-item>
         </a-col>
-        <a-col :xl="24" :lg="18" :sm="12" class="none-label">
+        <a-col :xl="18" :lg="18" :sm="12" class="none-label">
           <a-form-model-item label="button">
             <a-button type="primary" @click="addNewCustom"
               ><Icon name="ssiadd" :size="14" />新建客户信息</a-button
@@ -65,10 +65,19 @@
       row-key="mrnNo"
       :scroll="{ x: true }"
       :pagination="pagination"
+      :customRow="handlerRowClick"
       @change="onChange"
     >
-      <template slot="operation" slot-scope="">
-        <a-button type="link">修改</a-button>
+      <template slot="operation" slot-scope="record">
+        <a-button
+          v-if="record.isEdit"
+          type="link"
+          @click.stop="saveChange(record)"
+          >保存</a-button
+        >
+        <a-button v-else type="link" @click.stop="changeDataStatus(record)"
+          >修改</a-button
+        >
         <a-button type="link" class="success">新增</a-button>
         <a-popconfirm
           title="你确定要关闭吗？"
@@ -87,26 +96,34 @@
 export default {
   data() {
     const columns = [
-      { title: "病历号", dataIndex: "mrnNo", width: 180 },
+      {
+        title: "病历号",
+        dataIndex: "mrnNo",
+        width: 180,
+        customRender: (val, row) => {
+          if (row.isEdit) {
+            return <a-input v-model={row.mrnNo}></a-input>;
+          }
+          return val;
+        },
+      },
       {
         title: "客户姓名",
         dataIndex: "patientName",
         width: 120,
+        customRender: (val, row) => {
+          if (row.isEdit) {
+            return <a-input v-model={row.patientName}></a-input>;
+          }
+          return val;
+        },
       },
       { title: "出生日期", dataIndex: "birthday", width: 180 },
       { title: "性别", dataIndex: "sex", width: 80 },
       { title: "保险公司", dataIndex: "payorName", width: 180 },
       { title: "保单号码", dataIndex: "policyNo", width: 190 },
-      {
-        title: "保险有效日期",
-        dataIndex: "startDate",
-        width: 180,
-      },
-      {
-        title: "保险终止日期",
-        dataIndex: "endDate",
-        width: 180,
-      },
+      { title: "保险有效日期", dataIndex: "startDate", width: 180 },
+      { title: "保险终止日期", dataIndex: "endDate", width: 180 },
       {
         title: "操作",
         key: "operation",
@@ -134,9 +151,6 @@ export default {
   },
   computed: {
     pagination() {
-      // if (!this.pager || !this.dataList.length) {
-      //   return false;
-      // }
       const { pageNum, pageSize } = this.pager;
       const pages = Math.ceil(this.total / pageSize);
       return {
@@ -156,8 +170,6 @@ export default {
             if (current !== pageNum) {
               return undefined;
             }
-            // originalElement.children = undefined;
-            // originalElement.text = `${current} / ${pages}`;
             return (
               <p>
                 <span class="current-page">{current}</span> / {pages}
@@ -179,11 +191,37 @@ export default {
           }
           return originalElement;
         },
-        onChange: (pager) => this.onChange(pager),
       };
     },
   },
   methods: {
+    handlerRowClick(record) {
+      const { id, patientPolicyId } = record;
+      return {
+        style: {
+          color: record.isEdit ? "#2B63FF" : "#252631",
+        },
+        on: {
+          click: () => {
+            if (record.isEdit) {
+              return true;
+            }
+            this.$router.push({
+              name: "welfare",
+              query: { id, patientPolicyId },
+            });
+          },
+        },
+      };
+    },
+    // 修改按钮
+    changeDataStatus(record) {
+      this.$set(record, "isEdit", true);
+    },
+    saveChange(record) {
+      record.isEdit = undefined;
+      record.isNew = undefined;
+    },
     // customDeal(columns) {
     //   return columns.map((item) => {
     //     return {
@@ -259,22 +297,7 @@ export default {
     opacity: 0;
   }
 }
-.current-page {
-  color: #4d7cfe;
-}
-.size-change {
-  .w(107);
-  .mg-l(40);
-  background-color: #f8fafb;
-  border: none;
-}
 .ant-btn .icon-class {
   .mg-r(10);
 }
-.success.ant-btn-link {
-  color: #4cd964;
-}
-.danger.ant-btn-link {
-  color: #ff3b30;
-}
 </style>

src/views/welfare/components/coverages/index.vue

+<template>
+  <div>
+    <!-- 分类 -->
+    <div class="classify clearfix">
+      <a-button :type="!type ? 'primary' : ''">全部</a-button>
+      <a-button
+        :type="item.code === type ? 'primary' : ''"
+        v-for="item in welfareType"
+        :key="item.code"
+      >
+        {{ item.name }}
+      </a-button>
+      <div class="save-btn">
+        <a-button type="danger" @click="addNew">
+          <Icon name="ssiadd" :size="14" />新增
+        </a-button>
+        <a-button type="primary">
+          <Icon name="ssidownload" :size="14" />保存
+        </a-button>
+      </div>
+    </div>
+    <!-- table -->
+    <a-table
+      :columns="columns"
+      :data-source="dataList"
+      row-key="mrnNo"
+      :scroll="{ x: true }"
+      :pagination="pagination"
+      @change="onWelfareChange"
+    >
+      <template slot="operation" slot-scope="text, record, index">
+        <a-button
+          v-if="record.isEdit"
+          type="link"
+          @click.stop="saveEditData(record)"
+        >
+          保存
+        </a-button>
+        <a-button v-else type="link" @click.stop="editData(record, index)">
+          修改
+        </a-button>
+        <a-button type="link" class="success">新增</a-button>
+        <a-popconfirm
+          title="你确定要关闭吗？"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="deleteData(record, index)"
+        >
+          <a-button type="link" class="danger">删除</a-button>
+        </a-popconfirm>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    coverageForm: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    const columns = [
+      {
+        title: "责任项目",
+        dataIndex: "coverageCode",
+        width: 180,
+        customRender: (val, row) => {
+          if (row.isEdit) {
+            return <a-input v-model={row.coverageCode}></a-input>;
+          }
+          return val;
+        },
+      },
+      { title: "责任项目列表", dataIndex: "patientName", width: 120 },
+      {
+        title: "是否直付",
+        dataIndex: "isdirect",
+        width: 180,
+        customRender: (val, row) => {
+          if (row.isEdit) {
+            return (
+              <a-radio-group
+                v-model={row.isdirect}
+                default-value={row.isdirect}
+                button-style="solid"
+              >
+                <a-radio-button value="Y"> 是 </a-radio-button>
+                <a-radio-button class="mar-left10" value="N">
+                  否
+                </a-radio-button>
+              </a-radio-group>
+            );
+          }
+          return val;
+        },
+      },
+      { title: "单位", dataIndex: "sex", width: 80 },
+      { title: "年限额", dataIndex: "payorName", width: 180 },
+      { title: "剩余额度（￥）", dataIndex: "policyNo", width: 190 },
+      { title: "次限额（￥）", dataIndex: "startDate", width: 180 },
+      //   { title: "次免赔额（￥）", dataIndex: "endDate", width: 180 },
+      //   { title: "自付比例", dataIndex: "endDate", width: 180 },
+      //   { title: "备注", dataIndex: "endDate", width: 180 },
+      {
+        title: "操作",
+        key: "operation",
+        width: "175px",
+        fixed: "right",
+        scopedSlots: { customRender: "operation" },
+      },
+    ];
+    return {
+      columns,
+      dataList: [{}],
+      type: "",
+      welfareType: [],
+      pager: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    };
+  },
+  watch: {
+    coverageForm: {
+      deep: true,
+      handler: function () {
+        this.type = "";
+        this._getCoverageList();
+      },
+    },
+  },
+  mounted() {
+    this._getSpecialtyCode();
+    // this._getCoverageList();
+  },
+  computed: {
+    pagination() {
+      return this.initPageConfig(
+        { ...this.pager, total: this.total },
+        this.onWelfareSizeChange
+      );
+    },
+  },
+  methods: {
+    addNew() {
+      const item = { isEdit: true, isNew: true };
+      this.pager.pageSize++;
+      this.dataList.unshift(item);
+    },
+    editData(record) {
+      this.$set(record, "isEdit", true);
+    },
+    saveEditData(record) {
+      record.isEdit = undefined;
+    },
+    deleteData(record, index) {
+      if (record.isNew) {
+        this.dataList.splice(index, 1);
+        return true;
+      }
+      this.dataList.splice(index, 1);
+    },
+    initPageConfig(pager, sizeChange) {
+      const { pageNum, pageSize, total } = pager;
+      const pages = Math.ceil(total / pageSize);
+      return {
+        current: pageNum,
+        pageSize,
+        size: "large",
+        position: "bottom",
+        align: "right",
+        total: this.total,
+        hideOnSinglePage: false,
+        itemRender: (current, type, originalElement) => {
+          if (type === "prev") {
+            originalElement.children = undefined;
+            originalElement.text = "上一页";
+          }
+          if (type === "page") {
+            if (current !== pageNum) {
+              return undefined;
+            }
+            return (
+              <p>
+                <span class="current-page">{current}</span> / {pages}
+              </p>
+            );
+          }
+          if (type === "next") {
+            originalElement.children = undefined;
+            originalElement.text = "下一页";
+            return (
+              <div>
+                {originalElement}
+                <a-input-number
+                  onblur={sizeChange}
+                  class="size-change"
+                ></a-input-number>
+              </div>
+            );
+          }
+          return originalElement;
+        },
+      };
+    },
+    onWelfareChange(pager) {
+      const { current } = pager;
+      // console.log(pager);
+      this.pager.pageNum = current;
+      // this._getCustomerList();
+    },
+    onWelfareSizeChange(e) {
+      e && e.stopPropagation();
+      const val = e.target.value * 1;
+      if (!val || val < 0) {
+        return false;
+      }
+      this.pager.pageSize = val;
+    },
+    _getSpecialtyCode() {
+      this.$apis.GETSPECIALTYLIST().then((res) => {
+        this.welfareType = res.content || [];
+      });
+    },
+    _getCoverageList() {
+      const { corpCode, payorCode, planCode } = this.coverageForm;
+      this.$apis
+        .GETCOVERAGELIST({
+          corpCode,
+          payorCode,
+          planCode,
+          specialtyCode: this.type,
+        })
+        .then((res) => {
+          this.dataList = res.content || [];
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.none-label {
+  text-align: right;
+}
+.classify {
+  .pa(10, 20, 10, 20);
+  .mg-t(30);
+  .mg-b(10);
+  background-color: #f8fafb;
+  .ant-btn:not(:first-child) {
+    .mg-l(30);
+  }
+  .save-btn {
+    float: right;
+  }
+}
+.icon-class {
+  .mg-r(10);
+}
+</style>