前端代码

2024-02-19 11:12:59 +08:00
parent 498f091352
commit c66445edd4
1436 changed files with 528601 additions and 0 deletions
@@ -0,0 +1,192 @@
+<template>
+  <a-drawer
+    :title="title"
+    :maskClosable="true"
+    width=650
+    placement="right"
+    :closable="true"
+    @close="close"
+    :visible="visible"
+    style="overflow: auto;padding-bottom: 53px;">
+
+    <a-form>
+      <a-form-item :label="$t('roleManage.youHavePermissions')">
+        <a-tree
+          :checkable="true"
+          @check="onCheck"
+          :checkedKeys="checkedKeys"
+          :treeData="treeData"
+          @expand="onExpand"
+          @select="onTreeNodeSelect"
+          :selectedKeys="selectedKeys"
+          :expandedKeys="expandedKeysss"
+          :checkStrictly="checkStrictly">
+          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
+            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
+          </span>
+        </a-tree>
+      </a-form-item>
+    </a-form>
+
+    <div class="drawer-bootom-button">
+      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="switchCheckStrictly(1)">{{ $t('parentChildConnection') }}</a-menu-item>
+          <a-menu-item key="2" @click="switchCheckStrictly(2)">{{ $t('cancelConnection') }}</a-menu-item>
+          <a-menu-item key="3" @click="checkALL">{{ $t('checkAll') }}</a-menu-item>
+          <a-menu-item key="4" @click="cancelCheckALL">{{ $t('deselectAll') }}</a-menu-item>
+          <a-menu-item key="5" @click="expandAll">{{ $t('expandAll') }}</a-menu-item>
+          <a-menu-item key="6" @click="closeAll">{{ $t('mergeAll') }}</a-menu-item>
+        </a-menu>
+        <a-button>
+          {{ $t('treeOperation') }} <a-icon type="up" />
+        </a-button>
+      </a-dropdown>
+      <a-popconfirm :title="$t('areYouWantDiscardEditing')" @confirm="close" :okText="$t('confirm')" :cancelText="$t('cancel')">
+        <a-button style="margin-right: .8rem">{{ $t('cancel') }}</a-button>
+      </a-popconfirm>
+      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">{{ $t('roleManage.saveOnly') }}</a-button>
+      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">{{ $t('roleManage.saveAndClose') }}</a-button>
+    </div>
+  </a-drawer>
+
+</template>
+<script>
+import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '@/api/api'
+
+export default {
+  name: 'RoleModal',
+  data () {
+    return {
+      roleId: '',
+      treeData: [],
+      defaultCheckedKeys: [],
+      checkedKeys: [],
+      expandedKeysss: [],
+      allTreeKeys: [],
+      autoExpandParent: true,
+      checkStrictly: true,
+      title: this.$t('roleManage.rolePermissionConfig'),
+      visible: false,
+      loading: false,
+      selectedKeys: []
+    }
+  },
+  methods: {
+    onTreeNodeSelect (id) {
+      if (id && id.length > 0) {
+        this.selectedKeys = id
+      }
+    },
+    onCheck (o) {
+      if (this.checkStrictly) {
+        this.checkedKeys = o.checked
+      } else {
+        this.checkedKeys = o
+      }
+    },
+    show (roleId) {
+      this.roleId = roleId
+      this.visible = true
+    },
+    close () {
+      this.reset()
+      this.$emit('close')
+      this.visible = false
+    },
+    onExpand (expandedKeys) {
+      this.expandedKeysss = expandedKeys
+      this.autoExpandParent = false
+    },
+    reset () {
+      this.expandedKeysss = []
+      this.checkedKeys = []
+      this.defaultCheckedKeys = []
+      this.loading = false
+    },
+    expandAll () {
+      this.expandedKeysss = this.allTreeKeys
+    },
+    closeAll () {
+      this.expandedKeysss = []
+    },
+    checkALL () {
+      this.checkedKeys = this.allTreeKeys
+    },
+    cancelCheckALL () {
+      // this.checkedKeys = this.defaultCheckedKeys
+      this.checkedKeys = []
+    },
+    switchCheckStrictly (v) {
+      if (v === 1) {
+        this.checkStrictly = false
+      } else if (v === 2) {
+        this.checkStrictly = true
+      }
+    },
+    handleCancel () {
+      this.close()
+    },
+    handleSubmit (exit) {
+      const that = this
+      const params = {
+        roleId: that.roleId,
+        permissionIds: that.checkedKeys.join(','),
+        lastpermissionIds: that.defaultCheckedKeys.join(',')
+      }
+      that.loading = true
+      console.log('请求参数：', params)
+      saveRolePermission(params).then((res) => {
+        if (res.success) {
+          that.$message.success(res.message)
+          that.loading = false
+          if (exit) {
+            that.close()
+          }
+        } else {
+          that.$message.warning(res.message)
+          that.loading = false
+          if (exit) {
+            that.close()
+          }
+        }
+        this.loadData()
+      })
+    },
+    loadData () {
+      queryTreeListForRole().then((res) => {
+        this.treeData = res.result.treeList
+        this.allTreeKeys = res.result.ids
+        queryRolePermission({ roleId: this.roleId }).then((res) => {
+          this.checkedKeys = [...res.result]
+          this.defaultCheckedKeys = [...res.result]
+          this.expandedKeysss = this.allTreeKeys
+          console.log(this.defaultCheckedKeys)
+        })
+      })
+    }
+  },
+  watch: {
+    visible () {
+      if (this.visible) {
+        this.loadData()
+      }
+    }
+  }
+}
+
+</script>
+<style lang="less" scoped>
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+</style>