Merge branch 'master' of http://139.196.74.78:10010/r/jagzwxm/ja_web

shuishen

2026-01-17 194db7300a3e50d7bd0bb61f8ff6d34d22b72f55

 applications/drone-command/src/views/authority/role.vue

@@ -1,48 +1,101 @@
<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
      :permission="permissionList" :before-open="beforeOpen" @row-del="rowDel" @row-update="rowUpdate"
      @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template #menu-left>
        <el-button type="danger" icon="el-icon-delete" v-if="permission.role_delete" plain @click="handleDelete">删 除
        </el-button>
        <el-button icon="el-icon-setting" v-if="userInfo.role_name.includes('admin')" @click="handleRole" plain>权限设置
        </el-button>
        <!--  -->
      </template>
    </avue-crud>
    <el-dialog title="角色权限配置" append-to-body v-model="box" width="620px">
      <el-tabs type="border-card">
        <el-tab-pane label="后台管理">
          <el-tree :data="menuGrantList" show-checkbox node-key="id" ref="treeMenu" :default-checked-keys="menuTreeObj"
            :props="props">
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="移动app">
          <el-tree :data="menuGrantListApp" show-checkbox node-key="id" ref="treeMenuApp" :default-checked-keys="menuTreeObjApp"
                   :props="props">
          </el-tree>
        </el-tab-pane>
   <basic-container>
      <avue-crud
         :option="option"
         :table-loading="loading"
         :data="data"
         ref="crud"
         v-model="form"
         :permission="permissionList"
         :before-open="beforeOpen"
         @row-del="rowDel"
         @row-update="rowUpdate"
         @row-save="rowSave"
         @search-change="searchChange"
         @search-reset="searchReset"
         @selection-change="selectionChange"
         @current-change="currentChange"
         @size-change="sizeChange"
         @refresh-change="refreshChange"
         @on-load="onLoad"
      >
         <template #menu-left>
            <el-button type="danger" icon="el-icon-delete" v-if="permission.role_delete" plain @click="handleDelete">
               删 除
            </el-button>
            <el-button icon="el-icon-setting" v-if="userInfo.role_name.includes('admin')" @click="handleRole" plain>
               权限设置
            </el-button>
            <!--  -->
         </template>
      </avue-crud>
      <el-dialog title="角色权限配置" append-to-body v-model="box" width="620px">
         <el-tabs type="border-card">
            <el-tab-pane label="后台管理">
               <el-tree
                  :data="menuGrantList"
                  show-checkbox
                  node-key="id"
                  ref="treeMenu"
                  :default-checked-keys="menuTreeObj"
                  :props="props"
               ></el-tree>
            </el-tab-pane>
            <el-tab-pane label="移动app">
               <el-tree
                  :data="menuGrantListApp"
                  show-checkbox
                  node-key="id"
                  ref="treeMenuApp"
                  :default-checked-keys="menuTreeObjApp"
                  :props="props"
               ></el-tree>
            </el-tab-pane>

        <el-tab-pane label="新大屏菜单">
          <el-tree :data="menuGrantListNew" show-checkbox node-key="id" ref="treeMenuWebNew" :default-checked-keys="menuTreeObjNew"
                   :props="props">
          </el-tree>
        </el-tab-pane>
            <el-tab-pane label="新大屏菜单">
               <el-tree
                  :data="menuGrantListNew"
                  show-checkbox
                  node-key="id"
                  ref="treeMenuWebNew"
                  :default-checked-keys="menuTreeObjNew"
                  :props="props"
               ></el-tree>
            </el-tab-pane>

        <el-tab-pane label="无人机管控">
          <el-tree :data="menuGrantListDroneControl" show-checkbox node-key="id" ref="droneControl" :default-checked-keys="droneControlMenuTreeObj"
                   :props="props">
          </el-tree>
        </el-tab-pane>
            <el-tab-pane label="无人机管控">
               <el-tree
                  :data="menuGrantListDroneControl"
                  show-checkbox
                  node-key="id"
                  ref="droneControl"
                  :default-checked-keys="droneControlMenuTreeObj"
                  :props="props"
               ></el-tree>
            </el-tab-pane>

        <el-tab-pane label="大屏菜单">
          <el-tree :data="menuGrantListOld" show-checkbox node-key="id" ref="treeMenuWebOld" :default-checked-keys="menuTreeObjOld"
                   :props="props">
          </el-tree>
        </el-tab-pane>
        <!-- <el-tab-pane label="数据权限">
            <el-tab-pane label="任务工单">
               <el-tree
                  :data="menuGrantListWork"
                  show-checkbox
                  node-key="id"
                  ref="workRef"
                  :default-checked-keys="workTreeObj"
                  :props="props"
               ></el-tree>
            </el-tab-pane>

            <el-tab-pane label="大屏菜单">
               <el-tree
                  :data="menuGrantListOld"
                  show-checkbox
                  node-key="id"
                  ref="treeMenuWebOld"
                  :default-checked-keys="menuTreeObjOld"
                  :props="props"
               ></el-tree>
            </el-tab-pane>
            <!-- <el-tab-pane label="数据权限">
          <el-tree
            :data="dataScopeGrantList"
            show-checkbox
@@ -64,394 +117,392 @@
          >
          </el-tree>
        </el-tab-pane> -->
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="box = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>
         </el-tabs>
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="box = false">取 消</el-button>
               <el-button type="primary" @click="submit">确 定</el-button>
            </span>
         </template>
      </el-dialog>
   </basic-container>
</template>

<script>
import {
  add,
  getList,
  getRole,
  getRoleTreeById,
  grant,
  grantTree,
  remove,
  update,
} from '@/api/system/role'
import { add, getList, getRole, getRoleTreeById, grant, grantTree, remove, update } from '@/api/system/role'
import { mapGetters } from 'vuex'
import website from '@/config/website'

export default {
  data () {
    return {
      form: {},
      box: false,
      props: {
        label: 'title',
        value: 'key',
      },
      menuGrantList: [],
      menuGrantListApp: [],
      menuGrantListOld: [],
      menuGrantListNew: [],
      menuGrantListDroneControl: [],
      dataScopeGrantList: [],
      apiScopeGrantList: [],
      apiGrantList: [],
      menuTreeObj: [],
      menuTreeObjApp: [],
      menuTreeObjOld: [],
      menuTreeObjNew: [],
      droneControlMenuTreeObj: [],
      dataScopeTreeObj: [],
      apiScopeTreeObj: [],
      selectionList: [],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        emptyBtnText: '重置',
        emptyBtnIcon: 'el-icon-refresh',
        tip: false,
        simplePage: true,
        searchShow: true,
        searchGutter: 30,
        searchMenuPosition: 'left',
        searchMenuSpan: 4,
        tree: true,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        dialogWidth: 900,
        dialogClickModal: false,
   data() {
      return {
         form: {},
         box: false,
         props: {
            label: 'title',
            value: 'key',
         },
         menuGrantList: [],
         menuGrantListApp: [],
         menuGrantListOld: [],
         menuGrantListNew: [],
         menuGrantListDroneControl: [],
         menuGrantListWork: [],
         dataScopeGrantList: [],
         apiScopeGrantList: [],
         apiGrantList: [],
         menuTreeObj: [],
         menuTreeObjApp: [],
         menuTreeObjOld: [],
         menuTreeObjNew: [],
         droneControlMenuTreeObj: [],
         workTreeObj: [],
         dataScopeTreeObj: [],
         apiScopeTreeObj: [],
         selectionList: [],
         query: {},
         loading: true,
         page: {
            pageSize: 10,
            currentPage: 1,
            total: 0,
         },
         option: {
            emptyBtnText: '重置',
            emptyBtnIcon: 'el-icon-refresh',
            tip: false,
            simplePage: true,
            searchShow: true,
            searchGutter: 30,
            searchMenuPosition: 'left',
            searchMenuSpan: 4,
            tree: true,
            border: true,
            index: true,
            selection: true,
            viewBtn: true,
            dialogWidth: 900,
            dialogClickModal: false,

        height: 'auto',
        calcHeight: 20,
            height: 'auto',
            calcHeight: 20,

        column: [
          {
            label: '角色名称',
            prop: 'roleName',
            search: true,
            searchSpan: 4,
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入角色名称',
                trigger: 'blur',
              },
            ],
          },
          // {
          //   label: '所属租户',
          //   prop: 'tenantId',
          //   type: 'tree',
          //   dicUrl: '/blade-system/tenant/select',
          //   addDisplay: false,
          //   editDisplay: false,
          //   viewDisplay: website.tenantMode,
          //   span: 24,
          //   props: {
          //     label: 'tenantName',
          //     value: 'tenantId',
          //   },
          //   hide: !website.tenantMode,
          //   search: website.tenantMode,
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入所属租户',
          //       trigger: 'click',
          //     },
          //   ],
          // },
          {
            label: '角色别名',
            prop: 'roleAlias',
            search: true,
            searchSpan: 4,
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入角色别名',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '上级角色',
            prop: 'parentId',
            dicData: [],
            type: 'tree',
            hide: true,
            span: 24,
            props: {
              label: 'title',
            },
            rules: [
              {
                required: false,
                message: '请选择上级角色',
                trigger: 'click',
              },
            ],
          },
          {
            label: '角色排序',
            prop: 'sort',
            type: 'number',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入角色排序',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      data: [],
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'permission']),
    permissionList () {
      return {
        addBtn: this.validData(this.permission.role_add, false),
        viewBtn: this.validData(this.permission.role_view, false),
        delBtn: this.validData(this.permission.role_delete, false),
        editBtn: this.validData(this.permission.role_edit, false),
      }
    },
    ids () {
      let ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
    idsArray () {
      let ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.id)
      })
      return ids
    },
  },
  methods: {
    initData (roleId) {
      getRoleTreeById(roleId).then(res => {
        const column = this.findObject(this.option.column, 'parentId')
        column.dicData = res.data.data
      })
    },
    submit () {
      const menuList = this.$refs.treeMenu.getCheckedKeys()
      const menuListApp = this.$refs.treeMenuApp.getCheckedKeys()
      const menuListWebNew = this.$refs.treeMenuWebNew.getCheckedKeys()
      const menuListDroneControl = this.$refs.droneControl.getCheckedKeys()
      const menuListWebOld = this.$refs.treeMenuWebOld.getCheckedKeys()
            column: [
               {
                  label: '角色名称',
                  prop: 'roleName',
                  search: true,
                  searchSpan: 4,
                  span: 24,
                  rules: [
                     {
                        required: true,
                        message: '请输入角色名称',
                        trigger: 'blur',
                     },
                  ],
               },
               // {
               //   label: '所属租户',
               //   prop: 'tenantId',
               //   type: 'tree',
               //   dicUrl: '/blade-system/tenant/select',
               //   addDisplay: false,
               //   editDisplay: false,
               //   viewDisplay: website.tenantMode,
               //   span: 24,
               //   props: {
               //     label: 'tenantName',
               //     value: 'tenantId',
               //   },
               //   hide: !website.tenantMode,
               //   search: website.tenantMode,
               //   rules: [
               //     {
               //       required: true,
               //       message: '请输入所属租户',
               //       trigger: 'click',
               //     },
               //   ],
               // },
               {
                  label: '角色别名',
                  prop: 'roleAlias',
                  search: true,
                  searchSpan: 4,
                  span: 24,
                  rules: [
                     {
                        required: true,
                        message: '请输入角色别名',
                        trigger: 'blur',
                     },
                  ],
               },
               {
                  label: '上级角色',
                  prop: 'parentId',
                  dicData: [],
                  type: 'tree',
                  hide: true,
                  span: 24,
                  props: {
                     label: 'title',
                  },
                  rules: [
                     {
                        required: false,
                        message: '请选择上级角色',
                        trigger: 'click',
                     },
                  ],
               },
               {
                  label: '角色排序',
                  prop: 'sort',
                  type: 'number',
                  span: 24,
                  rules: [
                     {
                        required: true,
                        message: '请输入角色排序',
                        trigger: 'blur',
                     },
                  ],
               },
            ],
         },
         data: [],
      }
   },
   computed: {
      ...mapGetters(['userInfo', 'permission']),
      permissionList() {
         return {
            addBtn: this.validData(this.permission.role_add, false),
            viewBtn: this.validData(this.permission.role_view, false),
            delBtn: this.validData(this.permission.role_delete, false),
            editBtn: this.validData(this.permission.role_edit, false),
         }
      },
      ids() {
         let ids = []
         this.selectionList.forEach(ele => {
            ids.push(ele.id)
         })
         return ids.join(',')
      },
      idsArray() {
         let ids = []
         this.selectionList.forEach(ele => {
            ids.push(ele.id)
         })
         return ids
      },
   },
   methods: {
      initData(roleId) {
         getRoleTreeById(roleId).then(res => {
            const column = this.findObject(this.option.column, 'parentId')
            column.dicData = res.data.data
         })
      },
      submit() {
         const menuList = this.$refs.treeMenu.getCheckedKeys()
         const menuListApp = this.$refs.treeMenuApp.getCheckedKeys()
         const menuListWebNew = this.$refs.treeMenuWebNew.getCheckedKeys()
         const menuListWork = this.$refs.workRef.getCheckedKeys()
         const menuListDroneControl = this.$refs.droneControl.getCheckedKeys()
         const menuListWebOld = this.$refs.treeMenuWebOld.getCheckedKeys()

      
         // const dataScopeList = this.$refs.treeDataScope.getCheckedKeys();
         const dataScopeList = []
         // const apiScopeList = this.$refs.treeApiScope.getCheckedKeys();
         const apiScopeList = []
         grant(
            this.idsArray,
            [...menuList, ...menuListApp, ...menuListWebNew, ...menuListDroneControl, ...menuListWebOld, ...menuListWork],
            dataScopeList,
            apiScopeList
         ).then(() => {
            this.box = false
            this.$message({
               type: 'success',
               message: '操作成功!',
            })
            this.onLoad(this.page)
         })
      },
      rowSave(row, done, loading) {
         add(row).then(
            () => {
               this.onLoad(this.page)
               this.$message({
                  type: 'success',
                  message: '操作成功!',
               })
               done()
            },
            error => {
               window.console.log(error)
               loading()
            }
         )
      },
      rowUpdate(row, index, done, loading) {
         update(row).then(
            () => {
               this.onLoad(this.page)
               this.$message({
                  type: 'success',
                  message: '操作成功!',
               })
               done()
            },
            error => {
               window.console.log(error)
               loading()
            }
         )
      },
      rowDel(row) {
         this.$confirm('确定将选择数据删除?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
         })
            .then(() => {
               return remove(row.id)
            })
            .then(() => {
               this.onLoad(this.page)
               this.$message({
                  type: 'success',
                  message: '操作成功!',
               })
            })
      },

      // const dataScopeList = this.$refs.treeDataScope.getCheckedKeys();
      const dataScopeList = []
      // const apiScopeList = this.$refs.treeApiScope.getCheckedKeys();
      const apiScopeList = []
      grant(this.idsArray, [
        ...menuList,
        ...menuListApp,
        ...menuListWebNew,
        ...menuListDroneControl,
        ...menuListWebOld,
      ], dataScopeList, apiScopeList).then(() => {
        this.box = false
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.onLoad(this.page)
      })
    },
    rowSave (row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate (row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDel (row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
      searchReset() {
         this.query = {}
         this.onLoad(this.page)
      },
      searchChange(params, done) {
         this.query = params
         this.page.currentPage = 1
         this.onLoad(this.page, params)
         done()
      },
      selectionChange(list) {
         this.selectionList = list
      },
      selectionClear() {
         this.selectionList = []
         this.$refs.crud.toggleSelection()
      },
      beforeOpen(done, type) {
         if (['add', 'edit'].includes(type)) {
            this.initData(this.form.id)
         }
         done()
      },
      handleRole() {
         if (this.selectionList.length !== 1) {
            this.$message.warning('只能选择一条数据')
            return
         }
         this.menuTreeObj = []
         this.dataScopeTreeObj = []
         this.apiScopeTreeObj = []
         grantTree({ sysType: 1 }).then(res => {
            this.menuGrantList = res.data.data.menu
            this.dataScopeGrantList = res.data.data.dataScope
            this.apiScopeGrantList = res.data.data.apiScope
            getRole(this.ids).then(res => {
               this.menuTreeObj = res.data.data.menu
               this.dataScopeTreeObj = res.data.data.dataScope
               this.apiScopeTreeObj = res.data.data.apiScope
               this.box = true
            })
         })
         grantTree({ sysType: 3 }).then(res => {
            this.menuGrantListApp = res.data.data.menu
            getRole(this.ids).then(res => {
               this.menuTreeObjApp = res.data.data.menu
               this.box = true
            })
         })
         grantTree({ sysType: 2 }).then(res => {
            this.menuGrantListOld = res.data.data.menu
            getRole(this.ids).then(res => {
               this.menuTreeObjOld = res.data.data.menu
               this.box = true
            })
         })

    searchReset () {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange (params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    selectionChange (list) {
      this.selectionList = list
    },
    selectionClear () {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },
    beforeOpen (done, type) {
      if (['add', 'edit'].includes(type)) {
        this.initData(this.form.id)
      }
      done()
    },
    handleRole () {
      if (this.selectionList.length !== 1) {
        this.$message.warning('只能选择一条数据')
        return
      }
      this.menuTreeObj = []
      this.dataScopeTreeObj = []
      this.apiScopeTreeObj = []
      grantTree({sysType: 1}).then(res => {
        this.menuGrantList = res.data.data.menu
        this.dataScopeGrantList = res.data.data.dataScope
        this.apiScopeGrantList = res.data.data.apiScope
        getRole(this.ids).then(res => {
          this.menuTreeObj = res.data.data.menu
          this.dataScopeTreeObj = res.data.data.dataScope
          this.apiScopeTreeObj = res.data.data.apiScope
          this.box = true
        })
      })
      grantTree({sysType: 3}).then(res => {
        this.menuGrantListApp = res.data.data.menu
        getRole(this.ids).then(res => {
          this.menuTreeObjApp = res.data.data.menu
          this.box = true
        })
      })
      grantTree({sysType: 2}).then(res => {
        this.menuGrantListOld = res.data.data.menu
        getRole(this.ids).then(res => {
          this.menuTreeObjOld = res.data.data.menu
          this.box = true
        })
      })
    
      grantTree({sysType: 4}).then(res => {
        this.menuGrantListNew = res.data.data.menu
        getRole(this.ids).then(res => {
          this.menuTreeObjNew = res.data.data.menu
          this.box = true
        })
      })
         grantTree({ sysType: 4 }).then(res => {
            this.menuGrantListNew = res.data.data.menu
            getRole(this.ids).then(res => {
               this.menuTreeObjNew = res.data.data.menu
               this.box = true
            })
         })

      grantTree({sysType: 5}).then(res => {
        this.menuGrantListDroneControl = res.data.data.menu
        getRole(this.ids).then(res => {
          this.droneControlMenuTreeObj = res.data.data.menu
          this.box = true
        })
      })
    },
    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据')
        return
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          this.$refs.crud.toggleSelection()
        })
    },
    currentChange (currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange () {
      this.onLoad(this.page, this.query)
    },
    onLoad (page, params = {}) {
      this.loading = true
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        this.data = res.data.data
        this.loading = false
        this.selectionClear()
      })
    },
  },
         grantTree({ sysType: 5 }).then(res => {
            this.menuGrantListDroneControl = res.data.data.menu
            getRole(this.ids).then(res => {
               this.droneControlMenuTreeObj = res.data.data.menu
               this.box = true
            })
         })
         grantTree({ sysType: 6 }).then(res => {
            this.menuGrantListWork = res.data.data.menu
            getRole(this.ids).then(res => {
               this.workTreeObj = res.data.data.menu
               this.box = true
            })
         })
      },
      handleDelete() {
         if (this.selectionList.length === 0) {
            this.$message.warning('请选择至少一条数据')
            return
         }
         this.$confirm('确定将选择数据删除?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
         })
            .then(() => {
               return remove(this.ids)
            })
            .then(() => {
               this.onLoad(this.page)
               this.$message({
                  type: 'success',
                  message: '操作成功!',
               })
               this.$refs.crud.toggleSelection()
            })
      },
      currentChange(currentPage) {
         this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
         this.page.pageSize = pageSize
      },
      refreshChange() {
         this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
         this.loading = true
         getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
            this.data = res.data.data
            this.loading = false
            this.selectionClear()
         })
      },
   },
}
</script>
<style scoped lang="scss"></style>