Blame view

ant-design-vue-jeecg/src/views/examples/list/PermissionList.vue 7.35 KB
肖超群 authored
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
<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="角色ID">
              <a-input placeholder="请输入"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select placeholder="请选择" default-value="0">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">关闭</a-select-option>
                <a-select-option value="2">运行中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary">查询</a-button>
              <a-button style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table :columns="columns" :data="loadData">

      <span slot="actions" slot-scope="text, record">
        <a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
      </span>

      <span slot="status" slot-scope="text">
        {{ text | statusFilter }}
      </span>

      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
肖超群 authored
42
        <a-divider type="vertical"/>
肖超群 authored
43
44
        <a-dropdown>
          <a class="ant-dropdown-link">
肖超群 authored
45
            更多 <a-icon type="down"/>
肖超群 authored
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
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">禁用</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>

    <a-modal
      title="操作"
      :width="800"
      v-model="visible"
      @ok="handleOk"
    >
      <a-form :autoFormCreate="(form)=>{this.form = form}">

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="唯一识别码"
          hasFeedback
          validateStatus="success"
        >
肖超群 authored
77
          <a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled"/>
肖超群 authored
78
79
80
81
82
83
84
85
86
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="权限名称"
          hasFeedback
          validateStatus="success"
        >
肖超群 authored
87
          <a-input placeholder="起一个名字" v-model="mdl.name" id="permission_name"/>
肖超群 authored
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="状态"
          hasFeedback
          validateStatus="warning"
        >
          <a-select v-model="mdl.status">
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="2">禁用</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="描述"
          hasFeedback
        >
          <a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
        </a-form-item>
肖超群 authored
112
        <a-divider/>
肖超群 authored
113
114
115
116
117
118
119
120
121
122
123
124
125

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="赋予权限"
          hasFeedback
        >
          <a-select
            style="width: 100%"
            mode="multiple"
            v-model="mdl.actions"
            :allowClear="true"
          >
肖超群 authored
126
127
128
            <a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">
              {{ action.label }}
            </a-select-option>
肖超群 authored
129
130
131
132
133
134
135
136
137
138
          </a-select>
        </a-form-item>

      </a-form>
    </a-modal>

  </a-card>
</template>

<script>
肖超群 authored
139
import STable from '@/components/table/'
肖超群 authored
140
肖超群 authored
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
export default {
  name: "TableList",
  components: {
    STable
  },
  data() {
    return {
      description: '列表使用场景:后台管理中的权限管理以及角色管理,可用于基于 RBAC 设计的角色权限控制,颗粒度细到每一个操作类型。',

      visible: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      form: null,
      mdl: {},
肖超群 authored
161
肖超群 authored
162
163
164
165
166
167
168
169
170
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '唯一识别码',
          dataIndex: 'id'
肖超群 authored
171
        },
肖超群 authored
172
173
174
        {
          title: '权限名称',
          dataIndex: 'name',
肖超群 authored
175
        },
肖超群 authored
176
177
178
179
        {
          title: '可操作权限',
          dataIndex: 'actions',
          scopedSlots: {customRender: 'actions'},
肖超群 authored
180
        },
肖超群 authored
181
182
183
184
185
186
187
188
189
190
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: {customRender: 'status'},
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
肖超群 authored
191
        }
肖超群 authored
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
      ],
      // 向后端拉取可以用的操作列表
      permissionList: null,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.$http.get('/mock/api/permission', {
          params: Object.assign(parameter, this.queryParam)
        }).then(res => {
          let result = res.result
          result.data.map(permission => {
            permission.actionList = JSON.parse(permission.actionData)
            return permission
          })
          return result
        })
      },

      selectedRowKeys: [],
      selectedRows: []
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '正常',
        2: '禁用'
肖超群 authored
218
      }
肖超群 authored
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
      return statusMap[status]
    }
  },
  created() {
    this.loadPermissionList()
  },
  methods: {
    loadPermissionList() {
      // permissionList
      new Promise((resolve => {
        const data = [
          {label: '新增', value: 'add', defaultChecked: false},
          {label: '查询', value: 'get', defaultChecked: false},
          {label: '修改', value: 'update', defaultChecked: false},
          {label: '列表', value: 'query', defaultChecked: false},
          {label: '删除', value: 'delete', defaultChecked: false},
          {label: '导入', value: 'import', defaultChecked: false},
          {label: '导出', value: 'export', defaultChecked: false}
        ]
        setTimeout(resolve(data), 1500)
      })).then(res => {
        this.permissionList = res
      })
肖超群 authored
242
    },
肖超群 authored
243
244
245
246
    handleEdit(record) {
      this.mdl = Object.assign({}, record)
      console.log(this.mdl)
      this.visible = true
肖超群 authored
247
    },
肖超群 authored
248
    handleOk() {
肖超群 authored
249
250

    },
肖超群 authored
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
    onChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
  },
  watch: {
    /*
    'selectedRows': function (selectedRows) {
      this.needTotalList = this.needTotalList.map(item => {
        return {
          ...item,
          total: selectedRows.reduce( (sum, val) => {
            return sum + val[item.dataIndex]
          }, 0)
        }
      })
肖超群 authored
270
    }
肖超群 authored
271
    */
肖超群 authored
272
  }
肖超群 authored
273
}
肖超群 authored
274
</script>