Blame view

ant-design-vue-jeecg/src/views/system/modules/PermissionModal.vue 11.5 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading">

    <div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
肖超群 authored
10
11
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
肖超群 authored
12
肖超群 authored
13
14
15
16
17
18
19
          <a-form-model-item label="菜单类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group @change="onChangeMenuType" v-model="model.menuType">
              <a-radio :value="0">一级菜单</a-radio>
              <a-radio :value="1">子菜单</a-radio>
              <a-radio :value="2">按钮/权限</a-radio>
            </a-radio-group>
          </a-form-model-item>
肖超群 authored
20
肖超群 authored
21
22
23
24
25
26
27
28
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :label="menuLabel"
            prop="name"
            hasFeedback>
            <a-input placeholder="请输入菜单名称" v-model="model.name" :readOnly="disableSubmit"/>
          </a-form-model-item>
肖超群 authored
29
30
肖超群 authored
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
          <a-form-model-item
            v-show="model.menuType!=0"
            label="上级菜单"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :validate-status="validateStatus"
            :hasFeedback="true"
            :required="true">
            <span slot="help">{{ validateStatus == 'error' ? '请选择上级菜单' : '&nbsp;&nbsp;' }}</span>
            <a-tree-select
              style="width:100%"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              :treeData="treeData"
              v-model="model.parentId"
              placeholder="请选择父级菜单"
              :disabled="disableSubmit"
              @change="handleParentIdChange">
            </a-tree-select>
          </a-form-model-item>
肖超群 authored
50
肖超群 authored
51
52
53
54
55
56
57
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="url"
            label="菜单路径">
            <a-input placeholder="请输入菜单路径" v-model="model.url" :readOnly="disableSubmit"/>
          </a-form-model-item>
肖超群 authored
58
肖超群 authored
59
60
61
62
63
64
65
66
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="component"
            label="前端组件">
            <a-input placeholder="请输入前端组件" v-model="model.component" :readOnly="disableSubmit"/>
          </a-form-model-item>
肖超群 authored
67
肖超群 authored
68
69
70
71
72
73
74
          <a-form-model-item
            v-show="model.menuType==0"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="默认跳转地址">
            <a-input placeholder="请输入路由参数 redirect" v-model="model.redirect" :readOnly="disableSubmit"/>
          </a-form-model-item>
肖超群 authored
75
肖超群 authored
76
77
78
79
80
81
82
83
          <a-form-model-item
            v-show="!show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="perms"
            label="授权标识">
            <a-input placeholder="请输入授权标识, 如: user:list" v-model="model.perms" :readOnly="disableSubmit"/>
          </a-form-model-item>
肖超群 authored
84
肖超群 authored
85
86
87
88
89
90
91
          <a-form-model-item
            v-show="!show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="授权策略">
            <j-dict-select-tag v-model="model.permsType" placeholder="请选择授权策略" :type="'radio'"
                               dictCode="global_perms_type"/>
肖超群 authored
92
93
肖超群 authored
94
95
96
97
98
99
100
          </a-form-model-item>
          <a-form-model-item
            v-show="!show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="状态">
            <j-dict-select-tag v-model="model.status" placeholder="请选择状态" :type="'radio'" dictCode="valid_status"/>
肖超群 authored
101
肖超群 authored
102
          </a-form-model-item>
肖超群 authored
103
肖超群 authored
104
105
106
107
108
109
110
111
112
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="菜单图标">
            <a-input placeholder="点击选择图标" v-model="model.icon" :readOnly="disableSubmit">
              <a-icon slot="addonAfter" type="setting" @click="selectIcons"/>
            </a-input>
          </a-form-model-item>
肖超群 authored
113
肖超群 authored
114
115
116
117
118
119
120
121
122
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="sortNo"
            label="排序">
            <a-input-number placeholder="请输入菜单排序" v-model="model.sortNo" style="width: 200px"
                            :readOnly="disableSubmit"/>
          </a-form-model-item>
肖超群 authored
123
肖超群 authored
124
125
126
127
128
129
130
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否路由菜单">
            <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.route"/>
          </a-form-model-item>
肖超群 authored
131
肖超群 authored
132
133
134
135
136
137
138
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="隐藏路由">
            <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.hidden"/>
          </a-form-model-item>
肖超群 authored
139
肖超群 authored
140
141
142
143
144
145
146
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否缓存路由">
            <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.keepAlive"/>
          </a-form-model-item>
肖超群 authored
147
148
肖超群 authored
149
150
151
152
153
154
155
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="聚合路由">
            <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.alwaysShow"/>
          </a-form-model-item>
肖超群 authored
156
肖超群 authored
157
158
159
160
161
162
163
          <a-form-model-item
            v-show="show"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="打开方式">
            <a-switch checkedChildren="外部" unCheckedChildren="内部" v-model="model.internalOrExternal"/>
          </a-form-model-item>
肖超群 authored
164
肖超群 authored
165
        </a-form-model>
肖超群 authored
166
肖超群 authored
167
168
169
        <!-- 选择图标 -->
        <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
      </a-spin>
肖超群 authored
170
171
172
173
174
175
176
177
178
179
180
      <a-row :style="{textAlign:'right'}">
        <a-button :style="{marginRight: '8px'}" @click="handleCancel">
          关闭
        </a-button>
        <a-button :disabled="disableSubmit" @click="handleOk" type="primary">确定</a-button>
      </a-row>
    </div>
  </a-drawer>
</template>

<script>
肖超群 authored
181
182
import {addPermission, editPermission, queryTreeList, duplicateCheck} from '@/api/api'
import Icons from './icon/Icons'
肖超群 authored
183
肖超群 authored
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
export default {
  name: "PermissionModal",
  components: {Icons},
  data() {
    return {
      drawerWidth: 700,
      treeData: [],
      title: "操作",
      visible: false,
      disableSubmit: false,
      model: {},
      show: true,//根据菜单类型,动态显示隐藏表单元素
      menuLabel: '菜单名称',
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      iconChooseVisible: false,
      validateStatus: ""
    }
  },
  computed: {
    validatorRules: function () {
肖超群 authored
212
      return {
肖超群 authored
213
214
215
216
217
        name: [{required: true, message: '请输入菜单标题!'}],
        component: [{required: this.show, message: '请输入前端组件!'}],
        url: [{required: this.show, message: '请输入菜单路径!'}],
        permsType: [{required: true, message: '请输入授权策略!'}],
        perms: [{required: false, message: '请输入授权标识!'}, {validator: this.validatePerms}]
肖超群 authored
218
      }
肖超群 authored
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
    }
  },
  created() {
  },
  methods: {
    loadTree() {
      var that = this;
      queryTreeList().then((res) => {
        if (res.success) {
          console.log(res)
          that.treeData = [];
          let treeList = res.result.treeList
          for (let a = 0; a < treeList.length; a++) {
            let temp = treeList[a];
            temp.isLeaf = temp.leaf;
            that.treeData.push(temp);
          }
肖超群 authored
236
        }
肖超群 authored
237
      });
肖超群 authored
238
    },
肖超群 authored
239
240
241
    add() {
      //初始化默认值
      this.edit({status: '1', permsType: '1', sortNo: 1.0, route: true, menuType: 0});
肖超群 authored
242
    },
肖超群 authored
243
244
245
    edit(record) {
      this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.model = Object.assign({}, record);
肖超群 authored
246
肖超群 authored
247
248
249
250
      //根据菜单类型,动态展示页面字段
      console.log('record: ', record)
      this.show = record.menuType == 2 ? false : true;
      this.menuLabel = record.menuType == 2 ? '按钮/权限' : '菜单名称';
肖超群 authored
251
肖超群 authored
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
      this.visible = true;
      this.loadTree();
    },
    close() {
      this.$emit('close');
      this.disableSubmit = false;
      this.visible = false;
      this.$refs.form.resetFields();
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          if ((this.model.menuType == 1 || this.model.menuType == 2) && !this.model.parentId) {
            that.validateStatus = 'error';
            that.$message.error("请检查你填的类型以及信息是否正确!");
            return;
          } else {
            that.validateStatus = 'success';
肖超群 authored
272
          }
肖超群 authored
273
274
275
276
277
278
279
280
          that.confirmLoading = true;
          let obj;
          if (!this.model.id) {
            obj = addPermission(this.model);
          } else {
            obj = editPermission(this.model);
          }
          obj.then((res) => {
肖超群 authored
281
            if (res.success) {
肖超群 authored
282
283
              that.$message.success(res.message);
              that.$emit('ok');
肖超群 authored
284
            } else {
肖超群 authored
285
              that.$message.warning(res.message);
肖超群 authored
286
            }
肖超群 authored
287
288
289
290
291
292
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          });
        } else {
          return false;
肖超群 authored
293
        }
肖超群 authored
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
      })
    },
    handleCancel() {
      this.close()
    },
    validateNumber(rule, value, callback) {
      if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
        callback();
      } else {
        callback("请输入正整数!");
      }
    },
    validatePerms(rule, value, callback) {
      if (value && value.length > 0) {
        //校验授权标识是否存在
        var params = {
          tableName: 'sys_permission',
          fieldName: 'perms',
          fieldVal: value,
          dataId: this.model.id
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("授权标识已存在!")
          }
        })
      } else {
        callback()
      }
    },
    onChangeMenuType(e) {
      if (this.model.menuType == 2) {
        this.show = false;
        this.menuLabel = '按钮/权限';
      } else {
        this.show = true;
        this.menuLabel = '菜单名称';
      }
      this.$nextTick(() => {
        this.$refs.form.validateField(['url', 'component']);
      });
    },
    selectIcons() {
      this.iconChooseVisible = true
    },
    handleIconCancel() {
      this.iconChooseVisible = false
    },
    handleIconChoose(value) {
      console.log(value)
      this.model.icon = value
      this.iconChooseVisible = false
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    handleParentIdChange(value) {
      if (!value) {
        this.validateStatus = "error"
      } else {
        this.validateStatus = "success"
肖超群 authored
363
364
365
      }
    }
  }
肖超群 authored
366
}
肖超群 authored
367
368
369
370
371
</script>

<style scoped>

</style>