更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 admin/src/components/system/role/OperaSystemRoleDataWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,205 @@
<template>
  <GlobalWindow :title="title" width="80%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
    <p class="tip">正在为角色【 <em>{{ role.name || '-' }}</em>】 é…ç½®æ•°æ®æƒé™</p>
    <p class="tip-warn"><i class="el-icon-warning"></i>提醒：权限配置后需重新登录后生效</p>
    <el-form :model="form" ref="form" style="margin-top:15px">
      <el-form-item label="权限类型：" prop="type">
        <el-select v-model="form.type" clearable filterable placeholder="请选择权限类型">
          <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type == 4" label="自定义部门：" prop="customData">
        <el-cascader :options="departments" v-model="form.customData" :props=defaultProps clearable></el-cascader>
      </el-form-item>

    </el-form>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { createRoleDataPermission } from '@/api/system/role'
import { fetchList } from '@/api/business/company'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'OperaSystemRoleWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data() {
    return {
      options: [
        { name: '全部', id: 0 },
        { name: '所属部门及下属部门', id: 1 },
        { name: '所属部门及其子孙部门', id: 2 },
        { name: '仅所属部门', id: 3 },
        { name: '自定义部门', id: 4 },
        { name: '只看自己', id: -1 },
      ],
      // è¡¨å•æ•°æ®
      form: {
        businessCode: null,
        createTime: null,
        createUser: null,
        customData: [],
        id: null,
        roleId: null,
        type: 0
      },
      defaultProps: {
        multiple: true,
        checkStrictly: true,
        // children: 'children',
        label: 'name',
        value: 'id',
        emitPath: false
      },
      role: {},
      departments: []
    }
  },
  created() {
    this.config({
      api: '/system/role',
      'field.id': 'id'
    })
    this.treeComList()
  },
  methods: {
    // éƒ¨é—¨æ ‘状结构数据
    treeComList() {
      fetchList()
        .then(res => {
          // this.departments = this.tree([res])
          this.departments = this.newTree(res)
        })
    },
    open(title, target, role) {
      // console.log(title, target)
      this.title = title
      this.visible = true
      this.role = role
      // æ–°å»º
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // ç¼–辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        console.log(target)
        if (target.customData === undefined || target.customData === null || target.customData === '') {
          this.form.customData = []
        } else {
          const customD = this.form.customData.split(',')
          this.form.customData = customD.map((item) => { return parseInt(item) })
        }
      })
    },
    newTree(tree) {
      if (tree == null) {
        return []
      }
      return tree.map(item => {
        let newItem = { ...item }
        if (newItem) {
          newItem.children = newItem.childList
        }
        if (item.children && item.children.length == 0) {
          this.$delete(newItem, 'children')
        } else {
          newItem.children = this.newTree(newItem.children)
        }
        return newItem
      })
    },
    __confirmCreate() {
      // console.log(JSON.stringify(this.form.customData));
      // return
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }

        this.isWorking = true
        let data = JSON.parse(JSON.stringify(this.form))
        if (this.form.type === 4) {
          data.customData = this.form.customData.join(',')
        } else {
          data.customData = ''
        }
        createRoleDataPermission(data)
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('新建成功')
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    },
    __confirmEdit() {
      // console.log(JSON.stringify(this.form.customData));
      // return
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        // è°ƒç”¨æ›´æ–°æŽ¥å£
        this.isWorking = true
        let data = JSON.parse(JSON.stringify(this.form))
        if (this.form.type === 4) {
          data.customData = this.form.customData.join(',')
        } else {
          data.customData = ''
        }
        createRoleDataPermission(data)
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('修改成功')
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.transfer {
  height: 600px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  ::v-deep .el-transfer-panel {
    flex: 1;
    height: 100%;
  }

  ::v-deep .el-transfer-panel__body {
    height: 500px;
  }

  ::v-deep .el-transfer-panel__list.is-filterable {
    height: 480px;
  }
}
</style>