peisweb/src/views/customerOrg/customerOrgGroup.vue

<template>
  <div>
    <div>
      <div class="contenttitle">
        体检登记 /<span class="contenttitleBold">单位分组</span>
      </div>
      <!--分组信息-->
      <div style="display: flex; font-size: 14px">
        <div :style="'display: block;width:' + (window.pageWidth - window.pageMarginWidth - 110 - 5) + 'px;'">
          <div style="display: flex">
            <div>
              <span>体检单位：</span>
              <el-select v-model="customerOrgId" placeholder="请选择体检单位" :filter-method="filterMethod" default-first-option
                clearable filterable @clear="customerOrg = deepCopy(customerOrgAll)" style="margin-left: 10px"
                @change="changeCustomerOrg" size="small">
                <el-option v-for="item in customerOrg" :key="item.id" :label="item.displayName" :value="item.id">
                  {{ item.displayName }}
                </el-option>
              </el-select>
            </div>
            <div style="margin-left: 20px">
              <span>单位体检次数：</span>
              <el-select v-model="customerOrgRegister" placeholder="次数" style="width: 60px; margin-left: 10px"
                size="small" @change="changeTimes" value-key="id">
                <el-option v-for="item in customerOrgRegisterList" :key="item.id" :label="item.medicalTimes"
                  :value="item" />
              </el-select>
            </div>
          </div>
          <div>
            <el-table :data="customerOrgGroups" ref="customerOrgGroups" style="margin-top: 2px" row-key="id" border
              height="240px" size="small" highlight-current-row :row-class-name="handleRowClassName"
              @row-click="rowClick">
              <el-table-column type="index" label="序号" width="50" align="center" />
              <el-table-column label="id" prop="id" min-width="200" align="center" />
              <el-table-column prop="displayName" label="名称" min-width="150" />
              <el-table-column prop="price" label="价格" min-width="60" align="center" />
              <el-table-column prop="canAddMoney" label="可自选金额" min-width="80" align="center" />
              <el-table-column prop="forSexId" label="适用性别" min-width="60" align="center">
                <template slot-scope="scope">
                  {{ dddw(dict.forSex, "id", scope.row.forSexId, "displayName") }}
                </template>
              </el-table-column>
              <el-table-column prop="maritalStatusId" label="适用婚姻状况" min-width="80" align="center">
                <template slot-scope="scope">
                  {{
                    dddw(
                      dict.forMaritalStatus,
                      "id",
                      scope.row.maritalStatusId,
                      "displayName"
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="creatorName" label="创建者" min-width="60" align="center" />
              <el-table-column label="创建时间" min-width="150" align="center">
                <template slot-scope="scope">
                  {{ scope.row.creationTime ? moment(scope.row.creationTime).format("yyyy-MM-DD HH:mm:ss") : "" }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template>
                  <el-tag class="move" style="
                      cursor: move;
                      background-color: rgb(245, 245, 245);
                      border: none;
                    " draggable="true">
                    <i class="el-icon-d-caret" style="width: 1rem; height: 1rem; color: rgb(113, 113, 113)"></i>
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--按钮-->
        <div style="display: block; margin-left: 5px">
          <div v-show="checkPagePriv(pagePriv.privs, '复制上次分组')" style="margin-top: 0px">
            <el-button class="commonbutton" @click="btnCopyPreGroup">复制上次分组</el-button>
          </div>
          <div v-show="checkPagePriv(pagePriv.privs, '新增')" style="margin-top: 5px">
            <el-button class="commonbutton" @click="btnAdd('')">新增</el-button>
          </div>
          <div v-show="checkPagePriv(pagePriv.privs, '编辑')" style="margin-top: 5px">
            <el-button class="commonbutton" @click="btnEdit">编辑</el-button>
          </div>
          <div v-show="checkPagePriv(pagePriv.privs, '删除')" style="margin-top: 5px">
            <el-button class="deleteButton" @click="btnDel">删除</el-button>
          </div>
          <div v-show="checkPagePriv(pagePriv.privs, '置顶')" style="margin-top: 5px">
            <el-button class="commonbutton" @click="btnSetTop">置顶</el-button>
          </div>
          <div v-show="checkPagePriv(pagePriv.privs, '置底')" style="margin-top: 5px">
            <el-button class="commonbutton" @click="btnSetBottom">置底</el-button>
          </div>
          <div v-show="checkPagePriv(pagePriv.privs, '保存排序')" style="margin-top: 5px">
            <el-button class="commonbutton" @click="btnSort" :disabled="!isDrag">保存排序</el-button>
          </div>
        </div>
      </div>

      <!--分组项目信息 -->
      <div>
        <CustomerOrgGroupAsbitem :customerOrgGroup="curCustomerOrgGroup" :refreshMoney="refreshMoney" />
      </div>
    </div>

    <!-- 新增或者编辑弹框 -->
    <el-dialog :title="dataTransOpts.tableS.customer_org_group.id ? '编辑' : '新增'" :close-on-click-modal="false"
      :visible.sync="dialogWin.CustomerOrgGroupEdit" width="800px" @close="close_dialogWinCustomerOrgGroupEdit">
      <CustomerOrgGroupEdit :params="CustomerOrgGroupEditParams" />
    </el-dialog>
    <!--  -->
  </div>
</template>
<script>
import moment from "moment";
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { mapState } from "vuex";
import {
  getPagePriv,
  checkPagePriv,
  dddw,
  deepCopy,
  objCopy,
  arrayExistObj,
} from "../../utlis/proFunc";

import CustomerOrgGroupAsbitem from "../../components/customerOrg/customerOrgGroupAsbitem.vue";
import CustomerOrgGroupEdit from "./CustomerOrgGroupEdit.vue";

export default {
  components: {
    CustomerOrgGroupAsbitem, CustomerOrgGroupEdit
  },
  data() {
    return {
      pagePriv: {
        routeUrlorPageName: "customerOrgGroup", //当前页面归属路由或归属页面权限名称
        privs: [], // 页面权限
      },
      customerOrg: [], //体检单位
      customerOrgGroups: [], //体检单位分组
      customerOrgId: "", //当前选中的体检单位id
      customerOrgRegisterList: [], //体检次数列表
      customerOrgRegister: {}, //体检次数

      curCustomerOrgGroup: {}, // 当前选中分组
      CustomerOrgGroupEditParams: {}, //分组 新增时 用到参数 

      isDrag: false,
      form: {
        //体检单位分组
        customerOrgId: "", //复制分组时用到(预留查历次分组)
        isComplete: "N", //体检次数是否完成，如完成不允许调整分组项目
        id: "",
        customerOrgRegisterId: null, //所属体检次数
        displayName: "",
        price: 0,
        forSexId: "A",
        maritalStatusId: "A",
        ageLowerLimit: 0,
        ageUpperLimit: 200,
        jobPost: "",
        jobTitle: "",
        remark: "",
        isMaxMedicalTimes: "N",
      },
      formOri: {}, //用于对比分析哪些信息更改了
      formInit: {}, //表单初始值
      rules: {
        displayName: [{ required: true, message: "请填写分组名称", trigger: "blur" }],
      },

    };
  },
  computed: {
    ...mapState(["personnelUnit", "window", "dict", "dialogWin", "dataTransOpts"]),
  },
  created() {
    //获取用户当前页面的权限
    let userPriv = window.sessionStorage.getItem("userPriv");
    if (userPriv)
      this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName));

    // 清除当前选中的分组ID
    this.dataTransOpts.tableS.customer_org_group.id = ''

    this.rowDrop();
    this.formInit = deepCopy(this.form);
  },
  mounted() {
    //获取初始数据（单位、适用性别）
    this.dictInit();
  },
  methods: {
    moment,
    checkPagePriv,
    dddw,
    deepCopy,

    // 复制上一次分组
    btnCopyPreGroup() {
      if (!this.customerOrgRegister.id) {
        this.$message.warning("请选择体检次数");
        return;
      }

      postapi('/api/app/CustomerOrgGroup/CopyLastGrouping', { customerOrgRegisterId: this.customerOrgRegister.id })
        .then(res => {
          if (res.code > -1) {
            // 刷新体检次数的分组
            this.getCustomerOrgGroup(this.customerOrgRegister.id);
          }
        })
    },

    //刷新分组价格（供子组件调用）
    refreshMoney(formData) {
      //console.log('this is parent')
      let lfind = arrayExistObj(this.customerOrgGroups, "id", formData.id);
      if (lfind > -1) this.customerOrgGroups[lfind].price = formData.price;
    },

    //确定排序
    btnSort() {
      const result = [];
      this.customerOrgGroups.forEach((item, index) => {
        result.push({ id: item.id, displayOrder: index });
      });
      putapi("/api/app/customerorggroup/updatesortmany", {
        itemList: result,
      }).then((res) => {
        console.log("操作成功");
        this.isDrag = false;
      });
    },

    //初始化Sortable组件
    rowDrop() {
      // this.$nextTick(() => {
      //   const tbody = document.querySelector(".el-table__body-wrapper tbody");
      //   const _this = this;
      //   Sortable.create(tbody, {
      //     handle: ".move",
      //     animation: 300,
      //     onEnd({ newIndex, oldIndex }) {
      //       _this.isDrag = false;
      //       const currRow = _this.customerOrgGroups.splice(oldIndex, 1)[0];
      //       _this.customerOrgGroups.splice(newIndex, 0, currRow);
      //       _this.customerOrgGroups.map((item, index) => {
      //         if (index == newIndex && index == oldIndex) {
      //         } else if (index == oldIndex) {
      //         } else if (index == newIndex) {
      //         }
      //       });
      //       console.log(_this.customerOrgGroups.map((item) => item.displayOrder));
      //     },
      //   });
      // });

      this.$nextTick(() => {
        const el = document.querySelector(".el-table__body-wrapper tbody");
        //console.log('el0',el)
        const that = this;
        Sortable.create(el, {
          handle: ".move",
          animation: 300,
          //拖拽结束
          onEnd({ newIndex, oldIndex }) {
            that.isDrag = true;
            const currRow = that.customerOrgGroups.splice(oldIndex, 1)[0];
            that.customerOrgGroups.splice(newIndex, 0, currRow);
            console.log("el", el);
          },
        });
      });
    },

    //置底
    btnSetBottom() {
      if (!this.dataTransOpts.tableS.customer_org_group.id) {
        this.$message.warning("请选择操作的数据");
        return;
      }
      let lfind = arrayExistObj(this.customerOrgGroups, "id", this.dataTransOpts.tableS.customer_org_group.id);
      let currentRow = {};

      putapi(
        `/api/app/customerorggroup/updatemanysort?id=${this.dataTransOpts.tableS.customer_org_group.id}&SortType=2`
      ).then((res) => {
        console.log("操作成功");
        currentRow = this.customerOrgGroups.splice(lfind, 1)[0]; //删除并赋值
        this.customerOrgGroups.push(currentRow);
        this.$refs["customerOrgGroups"].setCurrentRow(currentRow);
      });
    },

    //置顶
    btnSetTop() {
      if (!this.dataTransOpts.tableS.customer_org_group.id) {
        this.$message.warning("请选择操作的数据");
        return;
      }

      let lfind = arrayExistObj(this.customerOrgGroups, "id", this.dataTransOpts.tableS.customer_org_group.id);
      let currentRow = {};

      putapi(
        `/api/app/customerorggroup/updatemanysort?id=${this.dataTransOpts.tableS.customer_org_group.id}&SortType=1`
      ).then((res) => {
        console.log("操作成功");
        currentRow = this.customerOrgGroups.splice(lfind, 1)[0];
        this.customerOrgGroups.unshift(currentRow);
        this.$refs["customerOrgGroups"].setCurrentRow(currentRow);
      });
    },

    //选中颜色
    handleRowClassName({ row, rowIndex }) {
      // highLightBg 为 'selected'的高亮
      //console.log(rowIndex, row)
      //return row.highLightBg == 'selected' ? 'high-light-bg' : '';
      if (row.choosed) {
        return "current-row";
      } else {
        return "";
      }
    },

    //获取初始数据
    dictInit() {
      //获取单位列表
      getapi("/api/app/customer-org/parent-all").then((res) => {
        if (res.code != -1) {
          this.customerOrgAll = res.data;
          let lfind = arrayExistObj(this.customerOrgAll, "id", this.dict.personOrgId);
          if (lfind > -1) this.customerOrgAll.splice(lfind, 1);
          this.customerOrg = deepCopy(this.customerOrgAll);
        }
      });

      //获取适用性别
      getapi("/api/app/for-sex").then((res) => {
        if (res.code != -1) {
          this.dict.forSex = res.data;
        }
      });

      //获取适用婚姻
      postapi("/api/app/MaritalStatus/GetForMaritalStatusList").then((res) => {
        if (res.code != -1) {
          this.dict.forMaritalStatus = res.data;
        }
      });
    },

    //获取体检次数下的分组
    getCustomerOrgGroup(customerOrgRegisterId) {
      this.isDrag = false;
      objCopy(this.formInit, this.form);
      this.form.customerOrgRegisterId = customerOrgRegisterId;
      this.customerOrgGroups = [];
      getapi(
        `/api/app/customerorggroup/getlistinfilter?CustomerOrgRegisterId=${customerOrgRegisterId}`
      ).then((res) => {
        if (res.code != -1) {
          this.customerOrgGroups = res.data;
          this.customerOrgGroups.forEach((e) => {
            e.customerOrgRegisterId = customerOrgRegisterId;
          });
        }
      });
    },

    filterMethod(keyWords) {
      if (keyWords) {
        this.customerOrg = [];
        this.customerOrgAll.forEach((item) => {
          if (
            item.displayName.toLowerCase().indexOf(keyWords.toLowerCase()) > -1 ||
            item.simpleCode.toLowerCase().indexOf(keyWords.toLowerCase()) > -1
            // || item.shortName.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1
          ) {
            this.customerOrg.push(item);
          }
        });
      } else {
        this.customerOrg = deepCopy(this.customerOrgAll);
      }
    },

    //选择单位
    changeCustomerOrg(v) {
      if (!v) {
        this.customerOrgRegisterList = [];
        this.customerOrgRegister = {};
        this.customerOrgGroups = [];
        this.isDrag = false;
        this.form.id = "";
        setTimeout(() => {
          this.dataTransOpts.refresh.customer_org_group_detail.M++;
        }, 20);
        return;
      }
      getapi(
        `/api/app/customerorgregister/getlistincustomerorgid?CustomerOrgId=${v}`
      ).then((res) => {
        if (res.code != -1) {
          this.customerOrgRegisterList = res.data;
          if (res.data.length > 0) {
            this.customerOrgRegister = res.data[res.data.length - 1];
            this.getCustomerOrgGroup(this.customerOrgRegister.id);
          } else {
            this.customerOrgRegister = {};
            this.customerOrgGroups = [];
            this.isDrag = false;
          }
          objCopy(this.formInit, this.form);
          setTimeout(() => {
            this.dataTransOpts.refresh.customer_org_group_detail.M++;
          }, 20);
        }
      });
    },

    //选择体检次数
    changeTimes(v) {
      this.getCustomerOrgGroup(v.id);
    },

    //点击分组
    rowClick(row) {
      this.dataTransOpts.tableS.customer_org_group.id = row.id
      this.curCustomerOrgGroup = deepCopy(row);
      this.curCustomerOrgGroup.isComplete = this.customerOrgRegister.isComplete;
      setTimeout(() => {
        this.dataTransOpts.refresh.customer_org_group_detail.M++;
      }, 20);
    },

    // 新增(编辑调用时，传入id值) 弹框
    btnAdd(id) {
      if (!this.customerOrgRegister.id) {
        this.$message.warning("请选择体检次数");
        return;
      }

      if (this.customerOrgRegister.isComplete.toUpperCase() == "Y") {
        this.$message.warning(`该单位的该次体检次数已完成，不能再${id ? '编辑' : '新增'}分组！`);
        return;
      }
      if (!id) this.dataTransOpts.tableS.customer_org_group.id = ''
      setTimeout(() => {
        this.dataTransOpts.refresh.customer_org_group.S++
        if (!id) this.dataTransOpts.refresh.customer_org_group_detail.M++; //新增则清掉已选组合项目
      }, 20);

      this.CustomerOrgGroupEditParams = {
        customerOrgRegisterId: this.customerOrgRegister.id,
        customerOrgId: this.customerOrgId
      }

      this.dialogWin.CustomerOrgGroupEdit = true;
    },

    //编辑弹框
    btnEdit() {
      if (!this.dataTransOpts.tableS.customer_org_group.id) {
        this.$message.warning("请先选择体检分组");
        return;
      }
      this.btnAdd(this.dataTransOpts.tableS.customer_org_group.id)
    },

    //删除
    btnDel() {
      if (!this.dataTransOpts.tableS.customer_org_group.id) {
        this.$message.warning("请选择需要操作的数据");
        return;
      }
      if (this.customerOrgRegister.isComplete.toUpperCase() == "Y") {
        this.$message.warning("该单位体检次数已完成，不允许删除分组");
        return;
      }

      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "  否  ",
        type: "warning",
      })
        .then(() => {
          return deletapi(`/api/app/customer-org-group/${this.dataTransOpts.tableS.customer_org_group.id}`);
        })
        .then((res) => {
          if (res.code != -1) {
            console.log("删除成功");
            let lfind = arrayExistObj(this.customerOrgGroups, "id", this.dataTransOpts.tableS.customer_org_group.id);
            if (lfind > -1) this.customerOrgGroups.splice(lfind, 1);
            this.dataTransOpts.tableS.customer_org_group.id = ''
            setTimeout(() => {
              this.dataTransOpts.refresh.customer_org_group_detail.M++
            }, 20);
          }
        })
        .catch((err) => {
          if (err == "cancel") {
            console.log("已取消删除");
            // this.$message.info("已取消删除");
          }
        });
    },

    //计算总价
    computePrice() {
      if (!this.form.id) {
        this.$message.warning("尚未保存信息，不可执行此操作！");
        return;
      }
      let customerOrgGroupId = this.form.id;
      let customerOrgGroupAsbitems = []; //分组包含的套餐

      getapi(`/api/app/customerorggroupdetail/getcustomerorggroupdetailinasbitem?CustomerOrgGroupId=${customerOrgGroupId}
      `)
        .then((res) => {
          if (res.code != -1) {
            customerOrgGroupAsbitems = res.data;

            if (customerOrgGroupAsbitems.length < 1) {
              this.$message.warning("当前分组尚未设置组合项目，不可执行此操作！");
            } else {
              let body = {
                customerOrgGroupId,
                details: this.madeNewGroupAsbitems(
                  customerOrgGroupAsbitems,
                  this.form.price
                ),
              };
              console.log("body", body);
              return postapi(
                "/api/app/customerorggroupdetail/createcustomerorggroupdetailmany",
                body
              );
            }
          }
        })
        .then((res) => {
          if (res.code != -1) {
            //console.log("操作成功");
            //触发分组明细刷新
            this.form.id = "";
            //要做延时处理，否则不会触发监听
            setTimeout(() => {
              this.form.id = customerOrgGroupId;
              this.onSubmit("form");
            }, 100);
          }
        });
    },

    madeNewGroupAsbitems(oldGroupAsbitems, newTotal) {
      newTotal = Math.round(Number(newTotal) * 100) / 100;
      let newGroupAsbitems = [];
      let oldTotal = Number(0);
      oldGroupAsbitems.forEach((e) => {
        oldTotal += Number(e.asbitemMoney); //customerOrgGroupDetailMoney
      });
      oldTotal = Math.round(Number(oldTotal) * 100) / 100;

      let discount = 0;
      if (oldTotal != 0) discount = Math.round((newTotal * 10000) / oldTotal) / 100;

      oldTotal = Number(0);
      oldGroupAsbitems.forEach((e) => {
        e.customerOrgGroupDetailPrice = Math.round(e.price * discount) / 100;
        e.customerOrgGroupDetailMoney =
          Math.round(
            e.customerOrgGroupDetailPrice * e.customerOrgGroupDetailAmount * 100
          ) / 100;
        oldTotal += Number(e.customerOrgGroupDetailMoney);
      });
      oldTotal = Math.round(Number(oldTotal) * 100) / 100;

      //console.log('discount,oldTotal',discount,oldTotal)

      let didTotal = Math.round(Number(newTotal - oldTotal) * 100) / 100;
      if (didTotal != 0) {
        for (let i = 0; i < oldGroupAsbitems.length; i++) {
          if (oldGroupAsbitems[i].customerOrgGroupDetailAmount == 1) {
            oldGroupAsbitems[i].customerOrgGroupDetailPrice =
              Math.round(
                (Number(oldGroupAsbitems[i].customerOrgGroupDetailPrice) +
                  Number(didTotal)) *
                100
              ) / 100;
            break;
          }
        }
      }

      oldGroupAsbitems.forEach((e) => {
        newGroupAsbitems.push({
          customerOrgGroupId: e.customerOrgGroupId,
          asbitemId: e.asbitemId,
          price: e.customerOrgGroupDetailPrice,
          amount: e.customerOrgGroupDetailAmount,
        });
      });

      return newGroupAsbitems;
    },

    // 关闭 分组 新增/编辑
    close_dialogWinCustomerOrgGroupEdit() {
      let id = this.dataTransOpts.tableS.customer_org_group.id
      if (id) {
        // 点编辑 或 新增有提交
        getapi(`/api/app/customer-org-group/${id}`)
          .then(res => {
            if (res.code != -1) {
              let lfind = -1
              lfind = arrayExistObj(this.customerOrgGroups, 'id', id)
              if (lfind > -1) {
                objCopy(res.data, this.customerOrgGroups[lfind])
              } else {
                lfind = this.customerOrgGroups.length
                this.customerOrgGroups.push(res.data)
              }

              // 选中当前操作的列
              this.$refs["customerOrgGroups"].setCurrentRow(); //清除选择
              this.$refs["customerOrgGroups"].setCurrentRow(this.customerOrgGroups[lfind]);

              // 更新 customer_org_group_detail 参数
              this.curCustomerOrgGroup = deepCopy(res.data);
              this.curCustomerOrgGroup.isComplete = this.customerOrgRegister.isComplete;
            }
          })
      } else {
        // 点 新增 但未提交
        this.dataTransOpts.tableS.customer_org_group.id = this.curCustomerOrgGroup.id || ''
      }

      this.dataTransOpts.refresh.customer_org_group_detail.M++;
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";

.btnClass {
  width: 100px;
  margin-bottom: 5px;
}
</style>