Mr.Shi
2023-08-11 5a7fb4358eb902ce139096f20ef3c0625adcd7f4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="业务模块" prop="businessCode" required>
        <DataPermModuleSelect v-model="form.businessCode" :disabled="form.id != null" :inline="false" @change="handleBusinessChange"/>
      </el-form-item>
      <el-form-item label="角色" prop="roleId" required>
        <RoleSelect v-model="form.roleId" :disabled="form.id != null" :inline="false"/>
      </el-form-item>
      <el-form-item label="权限类型" prop="type" required>
        <DataPermTypeSelect v-model="form.type" :module="form.businessCode" :inline="false" @change="handleTypeChange"/>
      </el-form-item>
      <el-form-item v-show="showCustomData" label="自定义数据" prop="customData">
        <CustomSelect v-if="visible" v-model="customData" :business-code="form.businessCode" @change="handleCustomDataChange"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" v-trim :rows="3" maxlength="500"/>
      </el-form-item>
    </el-form>
  </GlobalWindow>
</template>
 
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import RoleSelect from '@/components/system/role/RoleSelect'
import DataPermModuleSelect from './DataPermModuleSelect'
import DataPermTypeSelect from './DataPermTypeSelect'
import CustomSelect from './CustomSelect'
export default {
  name: 'OperaDataPermissionWindow',
  extends: BaseOpera,
  components: { CustomSelect, RoleSelect, DataPermTypeSelect, DataPermModuleSelect, GlobalWindow },
  data () {
    return {
      // 自定义数据
      customData: [],
      // 展示自定义数据标识
      showCustomData: false,
      // 表单数据
      form: {
        id: null,
        businessCode: '',
        roleId: '',
        type: '',
        remark: '',
        customData: ''
      },
      // 验证规则
      rules: {
        businessCode: [
          { required: true, message: '请选择业务模块' }
        ],
        roleId: [
          { required: true, message: '请选择角色' }
        ],
        type: [
          { required: true, message: '请选择权限类型' }
        ]
      }
    }
  },
  methods: {
    /**
     * 打开窗口
     *
     * @param title 窗口标题
     * @param target 行对象(仅编辑需该参数)
     */
    open (title, target) {
      this.title = title
      this.visible = true
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.customData = []
          this.showCustomData = false
          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]
        }
        this.customData = this.form.customData == null || this.form.customData === '' ? [] : this.form.customData.split(',')
        this.handleTypeChange()
      })
    },
    /**
     * 业务模块切换
     */
    handleBusinessChange () {
      this.form.customData = ''
      this.customData = []
      this.handleTypeChange()
    },
    /**
     * 权限类型切换
     */
    handleTypeChange () {
      if ((this.form.type === 11 || this.form.type === 21) && this.form.businessCode != null && this.form.businessCode !== '') {
        this.showCustomData = true
      } else {
        this.showCustomData = false
      }
    },
    /**
     * 自定义数据变化
     *
     * @param values 新数据值
     */
    handleCustomDataChange (values) {
      this.form.customData = values.join(',')
    }
  },
  created () {
    this.config({
      api: '/system/dataPermission',
      'field.id': 'id'
    })
  }
}
</script>