segmentMenu.vue 11 KB
<!--
 * @Description: workFrame左侧菜单列表-分割
 * @Autor: renchao
 * @LastEditTime: 2024-02-01 16:58:20
-->
<template>
  <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
    <el-menu :default-active="activeBatchIndex" @select="batchUnitClick" class="title-batch" v-if="showBatch">
      <el-menu-item index="-1" key="-1" class="menus">
        <div>{{ batchButtonName }}</div>
      </el-menu-item>
    </el-menu>
    <div v-if="this.isShowdrawer">
      <!-- 变更前单元 -->
      <div class="title" v-if="aroundShow">
        <b>变更前单元</b>/申请单元列表({{ aroundUnitData.length }})
      </div>
      <el-menu :default-active="activeIndex" @select="unitClick">
        <el-menu-item v-for="(item, index) in aroundUnitData" :index="index.toString()" :key="index">
          <div>
            <p>{{ item.bdcdyh }}</p>
            <el-tooltip effect="dark" :content="item.zl" placement="top">
              <p class="title-detail">{{ item.zl }}</p>
            </el-tooltip>
          </div>
          <i class="el-icon-delete" v-if="aroundUnitData.length > 1 && isDel" @click.stop="handleDel(item,'around')"></i>
        </el-menu-item>
      </el-menu>
      <!-- 变更后单元 -->
      <div class="title" v-if="afterShow">
        <b>变更后单元</b>/申请单元列表({{ afterUnitData.length }})
      </div>
      <el-menu :default-active="activeHIndex" @select="handleAfterunitClick">
        <el-menu-item v-for="(item, index) in afterUnitData" :index="index.toString()" :key="index">
          <span class="dot" v-if="item.issave == '0'"></span>
          <div>
            <p>{{ item.bdcdyh }}</p>
            <el-tooltip effect="dark" :content="item.zl" placement="top">
              <p class="title-detail">{{ item.zl }}</p>
            </el-tooltip>
          </div>
          <i class="el-icon-delete" v-if="afterUnitData.length > 1 && isDel" @click.stop="handleDel(item, 'after')"></i>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
    <div class="map-drawer-expand map-drawer" v-else @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { leftMenu, deleteFlow, jdcxLeftMenu } from "@/api/workFlow.js"
  export default {
    data () {
      return {
        aroundShow: false,
        afterShow: false,
        bsmSlsq: this.$route.query.bsmSlsq,
        bsmBusiness: this.$route.query.bsmBusiness,
        bestepid: this.$route.query.bestepid,
        type: this.$route.query.type,
        // 批量操作
        activeBatchIndex: '0',
        // 变更前单元默认选中
        activeIndex: '0',
        // 变更后单元默认选中
        activeHIndex: '-1',
        // 折叠
        isShowdrawer: true,
        // 批量操作
        showBatch: false,
        //批量操作按钮名称
        batchButtonName: '',
        //左侧菜单数据集合-变更前单元
        aroundUnitData: [],
        //左侧菜单数据集合-变更后单元
        afterUnitData: [],
        // 设置表单传递数据
        currentSelectProps: {}
      }
    },
    mounted () {
      this.loadBdcdylist();
    },
    computed: {
      ...mapGetters(['isRefresh', 'menuRefresh'])
    },
    watch: {
      isRefresh: {
        handler (newVal, oldVal) {
          if (newVal) this.loadBdcdylist(true)
        },
        immediate: true
      },
      menuRefresh: {
        handler (newValue, oldValue) {
          this.loadBdcdylist(true)
        },
        immediate: true
      }
    },
    methods: {
      /**
       * @description: 读取申请单元信息
       * @author: renchao
       */
      loadBdcdylist (status = false) {
        let that = this
        var formdata = new FormData();
        // 受理申请标识码
        formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
        formdata.append("bsmBusiness", this.bsmBusiness ? this.bsmBusiness : '');
        formdata.append("bestepid", this.bestepid ? this.bestepid : '');
        if (this.type) {
          jdcxLeftMenu(formdata).then((res) => {
            if (res.code === 200 && res.result) {
              this.aroundUnitData = res.result.filter(item => item.bglx == '1')
              if (this.aroundUnitData.length > 0) {
                this.aroundShow = true
              } else {
                this.aroundShow = false
              }
              this.afterUnitData = res.result.filter(item => item.bglx == '2')
              if (this.afterUnitData.length > 0) {
                this.afterShow = true
              } else {
                this.afterShow = false
              }
              this.currentSelectProps = res.result[0];
              this.$emit('getCurrentSelectProps', this.currentSelectProps);
              this.judgeBatchShow();
              if (!status) {
                if (sessionStorage.getItem('keyPath')) {
                  if (this.aroundShow) {
                    that.unitClick(sessionStorage.getItem('keyPath') - 0)
                  } else {
                    that.handleAfterunitClick(sessionStorage.getItem('keyPath') - 0)
                  }
                } else {
                  if (this.aroundShow) {
                    that.unitClick(0)
                  } else {
                    that.handleAfterunitClick(0)
                  }
                  if (that.showBatch) {
                    //满足批量查封/批量抵押按钮出现 即先展示批量表单
                    that.batchUnitClick();
                  }
                }
              }
            }
          })
        } else {
          leftMenu(formdata).then((res) => {
            if (res.code === 200 && res.result) {
              this.aroundUnitData = res.result.filter(item => item.bglx == '1')
              if (this.aroundUnitData.length > 0) {
                this.aroundShow = true
              } else {
                this.aroundShow = false
              }
              this.afterUnitData = res.result.filter(item => item.bglx == '2')
              if (this.afterUnitData.length > 0) {
                this.afterShow = true
              } else {
                this.afterShow = false
              }
              this.currentSelectProps = res.result[0];
              this.$emit('getCurrentSelectProps', this.currentSelectProps);
              this.judgeBatchShow();
              if (!status) {
                if (sessionStorage.getItem('keyPath')) {
                  if (this.aroundShow) {
                    that.unitClick(sessionStorage.getItem('keyPath') - 0)
                  } else {
                    that.handleAfterunitClick(sessionStorage.getItem('keyPath') - 0)
                  }
                } else {
                  if (this.aroundShow) {
                    that.unitClick(0)
                  } else {
                    that.handleAfterunitClick(0)
                  }
                  if (that.showBatch) {
                    //满足批量查封/批量抵押按钮出现 即先展示批量表单
                    that.batchUnitClick();
                  }
                }
              }
            }
          })
        }
      },
      /**
       * @description: 批量按钮判断
       * @author: renchao
       */
      judgeBatchShow () {
        this.showBatch = false;
        if (this.afterUnitData.length > 1) {
          let qllx = this.$route.query?.djywbm?.substring(0, 3);
          switch (qllx) {
            case 'B39':
              this.showBatch = true;
              this.batchButtonName = '批量查封清单信息';
              break;
            case 'A37':
              this.showBatch = true;
              this.batchButtonName = '批量抵押';
              break;
            default:
              this.batchButtonName = '批量操作';
          }
        }
      },
      /**
       * @description: 删除左侧列表-变更前
       * @param {*} item
       * @author: renchao
       */
      handleDel (item, type) {
        let that = this
        this.$confirm("确定要删除吗, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            var formdata = new FormData();
            formdata.append("bsmSldyList", item.bsmSldy.split(","));
            formdata.append("bsmSlsq", this.bsmSlsq);
            deleteFlow(formdata).then((res) => {
              if (res.code == 200) {
                that.$message.success("删除成功");
                that.loadBdcdylist()
                if (type == 'around') {
                  that.activeIndex = '0'
                  sessionStorage.setItem('keyPath', '0');
                } else {
                  that.activeIndex = '0'
                  sessionStorage.setItem('keyPath', '0');
                }
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            })
          })
      },
      /**
       * @description: 批量按钮点击事件
       * @author: renchao
       */
      batchUnitClick () {
        window.currentSelect = {}
        this.currentSelectProps.batchOperation = true
        this.activeIndex = "-1"
        this.activeHIndex = "-1"
        this.activeBatchIndex = "0"
        this.$parent.stepForm(0)
      },
      /**
       * @description: 申请单元点击事件-变更前
       * @param {*} index
       * @author: renchao
       */
      unitClick (index) {
        this.activeBatchIndex = "-1"
        window.currentSelect = this.aroundUnitData[index]
        this.activeHIndex = '-1'
        this.currentSelectProps = this.aroundUnitData[index];
        this.currentSelectProps.issave = '1'
        this.currentSelectProps.batchOperation = false;
        this.activeIndex = index.toString();
        sessionStorage.setItem('keyPath', this.activeIndex);
        //选中表单传递数据
        this.$emit('getCurrentSelectProps', this.currentSelectProps);
        this.$parent.stepForm(index);
      },
      /**
       * @description: 变更后单元
       * @param {*} index
       * @author: renchao
       */
      handleAfterunitClick (index) {
        this.activeBatchIndex = "-1"
        window.currentSelect = this.afterUnitData[index]
        this.activeIndex = '-1'
        this.currentSelectProps = this.afterUnitData[index];
        this.currentSelectProps.batchOperation = false;
        this.activeHIndex = index.toString();
        sessionStorage.setItem('keyPath', this.activeHIndex);
        //选中表单传递数据
        this.$emit('getCurrentSelectProps', this.currentSelectProps);
        this.$parent.stepForm(index);
        this.$store.dispatch('user/refreshPage', false);
      }
    }
  }
</script>
<style scoped lang='scss'>
  @import "~@/styles/mixin.scss";
  @import "../../workFrame.scss";
</style>