iboss-op-mini-web/src/view/mst/com-menu/index.vue

<!-- @desc:常用功能  @auth:常皓宁  @time:2024/5/10 14:47 -->
<template>
  <div class="main-div" ref="mainDiv">
    <loading :loading="loading" v-if="!modalVisible"></loading>
    <BaseIndexButtonGroup ref="BaseIndexButtonGroup" id="BaseIndexButtonGroup">
      <template #left>
        <BaseIndexButton ref="search" name="search"></BaseIndexButton>
        <BaseIndexButton ref="edit" name="edit"></BaseIndexButton>
      </template>
      <template #right>

      </template>
    </BaseIndexButtonGroup>

    <!--  表格部分  -->
    <div :style="'height: ' + (tableHeight + 30) + 'px'" class="split-div-class">
      <DkSplit v-model="split">
        <!-- 左边部分   -->
        <DkTable slot="left" ref="left-table" :data="leftData" :height="tableHeight + 30" :page-flag="false"
                 :page-total-flag="false" :show-setting-flag="false" :freeze="false" :choose-flag="false"
                 @current-change="currentChangeEvent($event)" primaryKey="gradeCode">
          <DkTableColumn field="gradeCode" :filter="false" :sortable="false" :center-flag="true"/>
          <DkTableColumn field="gradeName" :filter="false" :sortable="false" :center-flag="true"/>
        </DkTable>
        <!-- 常用功能   -->
        <DkTable slot="right" :id="'table-' + $options.name" ref="right-table"
                 :data="menuData"
                 :pageFlag="true"
                 :page-total="pageInfo.total" :current-page="pageInfo.currentPage" :choose-flag="false"
                 :height="this.tableHeight" primaryKey="menuUuid" @pageChange="pageSizeChange">
          <DkTableColumn field="appName"></DkTableColumn>
          <DkTableColumn field="menuName"></DkTableColumn>
        </DkTable>
      </DkSplit>
    </div>

    <!--新建编辑-->
    <DkModal
      :loading="loading"
      v-model="editAddModal"
      ref="modal_editAdd"
      @on-visible-change="handleVisibleModal"
      @modalOk="save"
      :saveFlag="true"
      :title="modalTitle"
      :width="1200"
    >
      <DkForm ref="formInline" v-model="formData" :col-count="1">
        <!--活动版本-->
        <DkFormItem prop="gradeName">
          <InputPop v-model="formData.gradeName" :readonly="true"/>
        </DkFormItem>
        <!--功能展示-->
        <DkRow style="margin-left: 0px">
          <!--功能一览-->
          <Col>
            <DkTabs v-model="tabValue" :options="tabList" @on-click="handleChangeTabs">
              <div style="height: 600px;overflow:auto" v-for="(item, index) of appList" :key="index"
                   :slot="item.appCode">
                <div class="main-class">
                  <el-collapse v-model="model" @change="handleChange(null)">
                    <dk-el-collapse-item v-for="(it,index) in parentData.filter(f => f.appCode == item.appCode)"
                                         :key="index" :title="it[name]" :name="it.id"
                                         :ref="'collapseItem_' + it.id" :id="it.id" :checked="it.checked"
                                         v-if="tabValue==item.appCode"
                                         @on-change="(checked, id)=>handleChangeCheckbox(checked, id,it[name])"
                                         :disabled="disabled"
                                         style="width: 700px;">
                      <div v-for="(tIt,tIndex) in data.filter(item=>item.parentId == it.id)" :key="tIndex">
                        <!--子级-->
                        <MasterSlaveCheckbox v-if="tIt[funcFlag]" :item="tIt" :name="name" :checked="tIt.checked"
                                             :disabled="disabled"
                                             :child-data="data.filter(item=>item.parentId == tIt.id)"
                                             @on-change="handleChangeCheckbox1()"
                                             ref="checkbox"></MasterSlaveCheckbox>
                      </div>
                    </dk-el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </DkTabs>
          </Col>
          <!--常用功能-->
          <Col>
            <DkRow style="margin-left: 0px">
              <DkTable v-show="showTable" :id="'table-' + $options.name" ref="table-select"
                       :data="useMenuData"
                       :width="500"
                       :pageFlag="false"
                       :choose-flag="false"
                       primaryKey="menuUuid">
                <DkTableColumn field="menuName"></DkTableColumn>
              </DkTable>
            </DkRow>
          </Col>
        </DkRow>
      </DkForm>
    </DkModal>

  </div>
</template>

<script>
import MasterSlaveCheckbox from '@/components/modal/dk-function/master-slave-checkbox'
import DkElCollapseItem from '@/components/modal/dk-function/dk-el-collapse-item'
import {indexMixin} from '@/mixins'

export default {
  name: "com-menu",
  mixins: [indexMixin],
  components: {MasterSlaveCheckbox, DkElCollapseItem},
  data() {
    let self = this
    return {
      showTable: true,
      modalTitle: '',//新建编辑弹窗名称
      formData: {
        gradeCode: null,
        gradeName: null,
      },
      split: 0.15,
      minSplit: 0.15,
      // gradeList: [],
      leftData: [],
      menuData: [],
      useMenuData: [],
      title: '',
      funcFlag: 'flgMenu',
      name: 'menuName',
      loading: false,
      visible: false,//显示控制,
      okFunc: () => {
      },//确定回调
      model: [],
      collapseFlag: true,
      parentData: [],
      data: [],
      collapseItems: [],
      collapseIds: [],
      disabled: false,
      tabValue: 'CP-WEB',
      appList: [],
      tabList: [],
      tableRef: 'left-table',
      appCode: 'CP-WEB'
    }
  },
  methods: {
    /**
     * @desc   : 加载数据
     * @author : 常皓宁
     * @date   : 2024/4/30 9:02
     */
    initData() {
      // 获取应用
      this.getApplication()
    },
    /**
     * @desc   : 获取应用
     * @author : 洪旭东
     * @date   : 2023-06-30 15:02
     */
    getApplication() {
      this.excute(this.$service.commonService, this.$service.commonService.getApplication, {}).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          let data = res.data.filter(it => it.appCode != 'DK-WEB')
          this.appList = data
          this.tabList = data.map(m => {
            return {
              label: m.appName,
              name: m.appCode
            }
          })
        }
      })
    },
    /**
     * @desc   : 获取数据
     * @author : 常皓宁
     * @date   : 2024/3/9 10:55
     */
    getData(params) {
      // 查询数据
      this.excute(this.$service.commonService, this.$service.commonService.getGrade, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          let gradeData = res.data.filter(it => it.gradeCode === 'STD' || it.gradeCode === 'PRO')
          // this.gradeList = gradeData
          this.leftData = gradeData
        }
      })
      this.loading = false
    },
    /**
     * @desc   : 左侧列表行变化事件
     * @author : 常皓宁
     * @date   : 2024/1/31 9:03
     */
    currentChangeEvent({row}) {
      if (row != null) {
        let params = {
          gradeCode: row.gradeCode
        }
        this.excute(this.$service.comMenuService, this.$service.comMenuService.selectByCond, params).then(res => {
          if (res.code === this.$config.SUCCESS_CODE) {
            this.menuData = res.data.list
          }
        })
      }
    },
    /**
     * @desc   : 新建按钮点击事件
     * @author : 常皓宁
     * @date   : 2024/1/31 9:19
     */
    edit() {
      this.modalTitle = this.setTitle(this.$config.formMode.edit, '常用功能')
      let row = this.$refs['left-table'].$refs.table.getCurrentRecord()
      if (row) {
        this.formData.gradeCode = row.gradeCode
        this.formData.gradeName = row.gradeName
      }
      this.getAppMenu(this.formData.gradeCode)
      this.modalParams.clearFlag = false
      this.modalParams.closeFlag = true
      this.modalParams.button = 'edit'
    },
    /**
     * @desc   : 保存
     * @author : 常皓宁
     * @date   : 2024/3/9 15:51
     */
    saveData() {
      let useMenuData = this.useMenuData
      let displayNo = 1
      useMenuData.map(row => {
        let item = row
        this.$set(item, 'gradeCode', this.formData.gradeCode)
        this.$set(item, 'displayNo', displayNo)
        displayNo++
        return item
      })
      let params = useMenuData
      //编辑
      if (this.modalParams.button === this.$config.formMode.edit) {
        return this.excute(this.$service.comMenuService, this.$service.comMenuService.update, params)
      }
    },
    /**
     * @desc   : 勾选节点上的选择框
     * @author : 周兴
     * @date   : 2022/12/29 16:52
     */
    handleChangeCheckbox(checked, id, name) {
      let item = {id: id, checked: checked, menuName: name};
      let filterRows = this.data.filter(it => it.id === id);
      if (filterRows && filterRows.length > 0) {
        filterRows[0].checked = checked;
      }
      this.data.update(item, 'id', 'checked', 'parentId');
      this.$forceUpdate()
      if (checked) {
        this.useMenuData.push(item)
      } else {
        this.useMenuData = this.useMenuData.filter(it => it.id !== item.id)
      }
    },
    /**
     * @desc   : 勾选节点上的选择框
     * @author : 周兴
     * @date   : 2022/12/29 16:52
     */
    handleChangeCheckbox1() {
      let list = []
      if (this.appCode == 'CP-WEB') {
        for (let re of this.$refs.checkbox) {
          list = list.concat(re.data.filter(item => item.checked))
        }
        this.useMenuData = list
      } else {
        let filters = this.$refs.checkbox.filter(it => it.checked)
        filters.forEach(it => {
          list.push(it.itemData)
        })
        this.useMenuData = list
      }
    },

    /**
     * @desc   : 获取节点的ref
     * @author : 周兴
     * @date   : 2022/12/29 13:54
     */
    getCollapseItems() {
      let items = this.data.filter(it => !it[this.funcFlag]);
      if (items && items.length > 0) {
        items.forEach(it => {
          this.collapseItems.push('collapseItem_' + it.id)
          this.collapseIds.push(it.id)
        })
      }
    },
    /**
     * @desc   : 切换应用
     * @author : 付斌
     * @date   : 2024-06-11 11:04
     */
    handleChangeTabs(val) {
      this.appCode = val;
      this.getAppMenu(this.formData.gradeCode)
    },
    /**
     * @desc   : 获取功能
     * @author : 常皓宁
     * @date   : 2024/5/11 13:42
     */
    getAppMenu(gradeCode) {
      let params = {
        gradeCode: gradeCode,
        appCode: this.appCode,
      }
      this.excute(this.$service.commonService, this.$service.commonService.getAppMenu, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.data = res.data.list
          // 先过滤顶级
          this.parentData = this.data?.filter(it => !it.parentId);
          this.editAddModal = true
          this.useMenuData = this.data.filter(it => it.checked);
          // this.$refs['table-select'].reloadData(this.useMenuData);
          if (this.collapseFlag) {
            this.model = this.data.map(it => it.id)
          } else {
            this.model = []
          }
          this.$nextTick(() => {
            this.getCollapseItems();
          })
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
  },
  created() {
    this.primaryKey = 'gradeCode'  // 设置主键Id
    this.routeObjName = 'comMenu'  // 设置路由名称
  },
}
</script>

<style scoped>

</style>