dy-admin-manager/src/views/platformManager/productManger/operationModel.vue

<template>
  <div>
    <el-form :model="productForm" ref="productForm" >
      <el-alert
          title="产品信息"
          type="info"
          :closable="false"
          style="margin-bottom: 20px"
        ></el-alert>
      <el-form-item
        label="产品名称"
        prop="name"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '产品名称', trigger: 'blur' }]"
      >
        <el-input clearable placeholder="请输入产品名称" v-model="productForm.name" />
      </el-form-item>
      <el-form-item
        label="产品描述"
        prop="remark"
        :label-width="formLabelWidth"
      >
        <el-input clearable type="textarea" placeholder="请输入产品描述" v-model="productForm.remark" />
      </el-form-item>
      <el-alert
          title="产品权限"
          type="info"
          :closable="false"
          style="margin-bottom: 20px"
        ></el-alert>
      <el-form-item label="搜索" style="margin-bottom: 0;">
        <el-input style="width:210px"
                  v-model.trim="seachRoleValue" clearable></el-input>
        <el-button style="margin-left: 10px"
                    type="danger"
                    @click="seachRoles">搜索</el-button>
        <!-- <el-button type="primary"
                    @click="onReSetRole">重置</el-button> -->
      </el-form-item>
      <el-form-item style="max-height: 300px;overflow: hidden;overflow-y: auto;">
        <el-checkbox :indeterminate="isIndeterminate"
                      @change="onCheckAll"
                      v-model.trim="checkAll">全选</el-checkbox>

        <el-tree :data="data"
                  show-checkbox
                  node-key="id"
                  @check="onTreeCheck"
                  :filter-node-method="filterNode"
                  ref="tree"
                  accordion
                  highlight-current
                  :default-checked-keys="result.menuIds"
                  :props="defaultProps">
          <div slot-scope="{ node, data }">
            {{ node.label }}
            <!-- <el-tag v-if="data.type == 1"
                    effect="dark">按钮</el-tag> -->
          </div>
        </el-tree>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { platformProductUpdate,platformProductAdd } from "./api";
import { getSilder } from '@/api/silder'
export default {
  props: ["activeRow", "pageType"],
  data() {
    return {
      productForm: {
        // menuId: "",
        name: "",
        remark: "",
        id: null,
      },
      menuId: [], // 存修改时设置的编号
      formLabelWidth: "80px",
      isIndeterminate: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      result: {
        roleName: null,
        roleDesc: null,
      },
      checkAll: false,
      splice: [],
      silderList: [],
      allChildIds: [], // 所有子编号
      slideCount: 0,
      seachRoleValue: '', //权限搜索字段
      filterIds: [4794, 4743, 3266, 3268, 3306, 3307, 3309, 3784, 4627]
      // 4229 公用权限
    };
  },
  mounted() {
    const activeRow = this.activeRow
    if(activeRow) {
      this.productForm = {
        name: activeRow.name,
        remark: activeRow.remark,
        id: activeRow.id,
      }
      this.menuId = activeRow.menuId ? activeRow.menuId.split(',').map(res => Number(res)) : []
    }

    if(this.pageType == 'create') {
      this.$refs.tree.setCheckedKeys([4229]);
    }

    this.lookSilder()
  },
  methods: {
    async submitInfo(str) {
      let tempIds = this.$refs.tree.getCheckedKeys()
      let halfIds = this.$refs.tree.getHalfCheckedKeys()
      let allIds = [...tempIds, ...halfIds]
      this.$refs.productForm.validate(async (_) => {
        if (_) {
          if (str == "update") {
            try {
              const res = await platformProductUpdate({
                name: this.productForm.name,
                remark: this.productForm.remark,
                menuId: allIds.join(','),
                id: this.productForm.id
              });
                this.$message.success("修改成功");
                this.$emit('close')
            } catch {}
          }else if(str == "create"){
            try {
              const res = await platformProductAdd({
                name: this.productForm.name,
                remark: this.productForm.remark,
                menuId: allIds.join(',')
              });
                this.$message.success("新建成功");
                this.$emit('close')
            } catch {}
          }
        }
      });

    },
    async lookSilder () {
      let silderList = await getSilder({ hid: 0 })
      let tempData = []
      if (silderList.code == 200) {
        const silderData = silderList.data || []
        let silderItem = []
        silderData.forEach(item => { // 去掉公用权限
          // if(item.permission != "publicAuthority") {
            silderItem.push(item)
          // }
        })

        this.silderList = silderItem

        tempData = this.setTableData(silderItem)
        console.log(tempData)
        this.data = tempData
      }
      if (this.pageType == 'update') {
        let roleData = {}
        // 是否是全部选中
        this.checkAll = this.menuId.length >= this.slideCount
        // 是否是半选
        this.isIndeterminate = this.menuId.length > 0 && this.menuId.length < this.slideCount
        let tSplice = this.getParent(this.menuId, tempData)
        roleData.menuIds = tSplice
        this.result = roleData
      } else {
        this.onReSet()
      }
    },
    onTreeCheck () {
      let checkTree = this.$refs.tree.getCheckedKeys()
      this.checkAll = checkTree.length >= this.slideCount
      this.isIndeterminate = checkTree.length > 0 && checkTree.length < this.slideCount
    },
    onCheckAll (val) {
      if (val) {
        // 先去掉半选
        this.isIndeterminate = false
        this.$refs.tree.setCheckedNodes(this.data)
      } else {
        this.$refs.tree.setCheckedNodes([])
      }
    },

    //递归获取到所有的为子级的ID
    getParent (checkIds, data) {
      let removeIds = JSON.parse(JSON.stringify(checkIds))
      this.getAllChildIds(data)
      let tempAllChildIds = this.allChildIds
      for (let i = checkIds.length; i > 0; i--) {
        if (!tempAllChildIds.includes(checkIds[i - 1])) {
          removeIds.splice(i - 1, 1)
        }
      }
      return removeIds
    },
    getAllChildIds (data) {
      // 获取所有最子集编号
      let child = this.allChildIds
      let tempList = []
      data.forEach((item, index) => {
        let temp = []
        if (item.children && item.children.length > 0) {
          temp = this.getAllChildIds(item.children)
        } else {
          child.push(item.id)
        }
      })
    },
    setTableData (result) {
      let list = []
      list = result.map(res => {
        if(!this.filterIds.includes(res.id)) {
          let tempList = {}
          tempList = {
            id: res.id,
            name: res.name,
            label: res.name,
            type: res.type,
            path: res.path,
            permission: res.permission,
            icon: res.icon,
            parentId: res.parentId
          }
          this.slideCount++
          if (res.sysMenus && res.sysMenus.length > 0) {
            tempList.children = this.setTableData(res.sysMenus)
          }
          return tempList
        }
        return null
      })
      let tempList = []
      list.forEach(item => {
        if(item) {
          tempList.push(item)
        }
      })
      return tempList
    },
    onReSet () {
      this.$refs.tree.setCheckedNodes([])
      this.result = {
        roleName: null,
        roleDesc: null,
      }
      this.isIndeterminate = false
      this.checkAll = false
    },
    onCancel () {
      this.$store.dispatch('delVisitedViews', this.$route)
      this.$router.push({
        path: '/parameter/adminManager',
        query: {
          page: this.$route.query.page
        }
      })
    },
    seachRoles () {
       this.$refs.tree.filter(this.seachRoleValue);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    onReSetRole () {
      this.seachRoleValue = ''
      this.data = this.setTableData(this.silderList)
    }
  }
};
</script>
<style lang="scss" scoped>
.courseMask {
  .el-tag.el-tag--info {
    margin-right: 4px;
  }
}
</style>