byte-sailing-storage/src/view/system-manage/role.vue

<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <div class="title">
          角色管理
        </div>
        <div class="main">
          <my-tree
            :data="treeData"
            :formConfig="treeformConfig"
            :ruleValidate="treeRuleValidate"
            :showCheckbox="false"
            @handleEvent="treeHandle"
            @check="treeCheck"></my-tree>
        </div>
      </div>
      <div class="right" style="margin-right: 15px">
        <div class="title">
          仓储web权限
        </div>
        <div class="main" v-if="roleKey">
          <div style="text-align: right">
            <Button type="primary" @click="savaRoleMenu">保存权限</Button>
          </div>
          <div style="height: calc(100% - 32px)">
            <my-tree
              :data="menuData"
              :show-edit="false"
              :multiple="true"
              :selected="true"
              @check="menuTreeCheck"></my-tree>
          </div>
        </div>
      </div>
      <!-- <div class="right">
        <div class="title">
          仓储APP权限
        </div>
        <div class="main" v-if="roleKey">
          <div style="text-align: right">
            <Button type="primary" @click="savaRoleMenu">保存权限</Button>
          </div>
          <div style="height: calc(100% - 32px)">
            <my-tree
              :data="menuData2"
              :show-edit="false"
              :multiple="true"
              @check="menuTreeCheck2"></my-tree>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import MyTable from '_c/my-table/my-table'
import MyTree from '_c/my-tree/my-tree'
import MyModalForm from '_c/my-modal-form/my-modal-form'

export default {
  name: 'role_manage',
  components: {
    MyTree,
    MyTable,
    MyModalForm
  },
  data () {
    return {
      show: false,
      roleKey: '',
      menuIds: [],
      menuIds2: [],
      // 树相关数据
      treeRuleValidate: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        key: [
          { required: true, message: '角色编码不能为空', trigger: 'blur' }
        ]
      },
      treeformConfig: [
        {
          type: 'input',
          label: '角色名',
          key: 'roleName',
          placeholder: '请输入分类名称'
        },
        // {
        //   type: 'input',
        //   label: '角色编码',
        //   key: 'key',
        //   placeholder: '请输入角色编码'
        // },
        // {
        //   type: 'select',
        //   label: '角色类型',
        //   key: 'isDefault',
        //   list: [
        //     { label: '默认用户', value: 1 },
        //     { label: '普通用户', value: 0 }
        //   ],
        //   placeholder: '请选择角色类型'
        // }
      ],
      ruleValidate: {
        name: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        spec: [
          { required: true, message: '规格不能为空', trigger: 'blur' }
        ],
        unitWeight: [
          { required: true, message: '克重不能为空', trigger: 'blur' }
        ]
      },
      formType: '',
      formData: {},
      formConfig: [
        {
          type: 'input',
          label: '物料编码',
          key: 'code',
          placeholder: '请输入物料编码'
        },
        {
          type: 'input',
          label: '物料名称',
          key: 'name',
          placeholder: '请输入物料名称'
        },
        {
          type: 'input',
          label: '规格',
          key: 'spec',
          placeholder: '请输入规格'
        },
        {
          type: 'input',
          comType: 'number',
          label: '单位',
          key: 'unit',
          placeholder: '请输入单位/米'
        },
        {
          type: 'input',
          comType: 'number',
          label: '克重',
          key: 'unitWeight',
          placeholder: '请输入克重'
        },
        {
          type: 'input',
          comType: 'number',
          label: '门幅',
          key: 'width',
          placeholder: '请输入门幅'
        },
        {
          type: 'input',
          comType: 'number',
          label: '安全库存',
          key: 'safetyStock',
          placeholder: '请输入安全库存'
        },
        {
          type: 'input',
          comType: 'number',
          label: '采购周期',
          key: 'safetyWarnDay',
          placeholder: '请输入采购周期'
        },
        {
          type: 'input',
          comType: 'number',
          label: '抽检比例',
          key: 'checkRate',
          placeholder: '请输入抽检比例'
        },
        {
          type: 'input',
          comType: 'textarea',
          label: '备注',
          key: 'remark',
          placeholder: '请输入仓库说明'
        }
      ],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'code',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'name',
          minWidth: 150
        },
        {
          title: '克重',
          key: 'unitWeight',
          minWidth: 100
        },
        {
          title: '门幅',
          key: 'width',
          minWidth: 100
        }, {
          title: '安全库存',
          key: 'safetyStock',
          minWidth: 100
        },
        {
          title: '采购周期',
          key: 'safetyWarnDay',
          minWidth: 100
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '200px',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '.5vw'
                  },
                  on: {
                    click: () => {
                      for (const key in params.row) {
                        this.formData[key] = params.row[key]
                      }
                      this.formType = 'edit'
                      this.show = true
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                  },
                  on: {
                    click: () => {
                      this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
                        MaterialDelete({
                          id: params.row.id
                        }).then(res => {
                          if (res.code === 0) {
                            this.$Message.info(res.msg)
                            this.getList()
                          }
                        })
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '添加',
          align: 'right',
          e: 'add'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      menuData: [],
      menuData2: [],
      treeData: []
    }
  },
  methods: {
    cfm (type, data) {
      if (type === 'add') {
        MaterialAdd({
          ...data,
          categoryCode: this.categoryCode
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        MaterialUpdate(data).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    treeInit(data){
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        element.name = element.roleName = element.title
        if(element.children && element.children.length > 0) this.treeInit(element.children)
      }
    },
    getTree () {
      const v = this
      v.$get('/api/blade-system/role/tree').then(res=>{
        v.treeInit(res.data)
        this.treeData = res.data
        console.log(res)
      })
    },
    // list 项目路由 menus 系统定义的路由
    iniTree2 (list, menus) {
      list.forEach(item => {
        menus.forEach(menu => {
          console.log(item,menu)
          item.expand = true
          if (item.value === menu) {
            item.checked = true
          }
          if (item.children) {
            this.iniTree(item.children, menus)
          }
        })
      })
      return list
    },
    getHandleMenuIds (data, type) {
      data.forEach(item => {
        if (item.checked) {
          if (type === 1) {
            this.menuIds.push(item.value)
          } else if (type === 2) {n 
            this.menuIds2.push(item.value)
          }
        }
        if (item.children) {
          this.getHandleMenuIds(item.children, type)
        }
      })
    },
    initTree(menuList,menuVal){
      for (let i = 0; i < menuList.length; i++) {
        const element = menuList[i];
        for (let j = 0; j < menuVal.length; j++) {
          const jelement = menuVal[j];
          if(element.value === jelement){
            element.checked = true
            break
          }
        }
        if(element.children && element.children.length > 0){
          this.initTree(element.children,menuVal)
        }
      }
      return menuList
    },
    // 获取已勾选的菜单
    getList () {
      const v = this
      v.$get('/api/blade-system/menu/grant-tree',{}).then(res1=>{
        v.treeInit(res1.data.menu)
        v.$get('/api/blade-system/menu/role-tree-keys?roleIds=' + this.roleKey,{}).then(res2=>{
          this.initTree(res1.data.menu, res2.data.menu)
          this.menuData = res1.data.menu
          console.log(this.menuData)
        })
      })
    },
    getList2 () {
      const v = this
      v.$get('/api/blade-system/appMenu/tree',{}).then(res1=>{
        v.treeInit(res1.data.menu)
        v.$get('/api/blade-system/appMenu/bindRole',{

        }).then(res2=>{
          this.initTree(res1.data.menu, res2.data.menu)
          this.menuData = res1.data.menu
          console.log(this.menuData)
        })
      })
      // GetMenuZTreeChildren({
      //   deviceType: 3
      // }).then(res => {
      //   if (res.code === 0) {
      //     GetMenuOperateList({ roleKey: this.roleKey }).then((menu) => {
      //       if (menu.code === 0) {
      //         this.menuData2 = this.iniTree(res.result, menu.result.menuIds)
      //         this.menuIds2 = []
      //         this.getHandleMenuIds(this.menuData2, 2)
      //       }
      //     })
      //   }
      // })
    },
    savaRoleMenu () {
      console.log(this.menuIds)
      const v = this
      v.$post("/api/blade-system/role/grant",{
        apiScopeIds:[],
        dataScopeIds:[],
        menuIds:this.menuIds,
        roleIds:[this.roleKey]
      }).then(res=>{
        this.$Message.info('保存成功！')
        this.getList()
      })
    },
    menuTreeCheck (data) {
      this.menuIds = []
      data.forEach(item => {
        this.menuIds.push(item.value)
      })
    },
    menuTreeCheck2 (data) {
      this.menuIds2 = []
      data.forEach(item => {
        this.menuIds2.push(item.value)
      })
    },
    // 选择物料分类 显示物料列表
    treeCheck (data) {
      console.log(data)
      if (data.name !== '默认角色' && data.name !== '普通角色') {
        this.roleKey = data.key
        this.menuIds = []
        this.getList(data.id)
        //this.getList2(data.id)
      }
    },
    // 提交树操作
    treeHandle (type, data, target) {
      if (type === 'add') {
        this.$post('/api/blade-system/role/submit',{
          parentId:0,
          roleAlias:data.roleName,
          roleName:data.roleName,
          sort:1,
          tenantId:'000000'
        }).then(res=>{
          this.getTree()
          this.$Message.info(res.msg)
        })
      } else if (type === 'edit') {
        console.log(data,target)
        this.$post('/api/blade-system/role/submit',{
          parentId:data.parentId,
          roleAlias:data.roleName,
          roleName:data.roleName,
          sort:1,
          tenantId:'000000',
          id:data.id
        }).then(res=>{
          this.getTree()
          this.$Message.info(res.msg)
        })
      } else if (type === 'del') {
        this.$post('/api/blade-system/role/remove?ids=' + target.id + '',{
        }).then(res=>{
          this.getTree()
          this.$Message.info(res.msg)
        })
       
      }
    }
  },
  mounted () {
    this.getTree()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  overflow: hidden;
  .content {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: 100%;
    .left, .right {
      height: 100%;
      overflow: auto;
      box-shadow: 3px 3px 5px rgb(127, 127, 127, .35);
      background-color: #FFFFFF;
      .title {
        padding: 5px 0;
        background-color: #539DFA;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #FFFFFF;
      }
      .main {
        box-sizing: border-box;
        padding: 10px;
        height: ~"calc(100% - 48px)";
      }
    }
    .left {
      margin-right: 15px;
      flex: 1;
      min-width: 320px;
    }
    .right {
      flex: 3;
      min-width: 200px;
    }
  }
}
</style>