Blame view

ant-design-vue-jeecg/src/views/system/PermissionDataRuleList.vue 5.54 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
<template>
  <a-drawer
    title="数据权限规则"
    :width="drawerWidth"
    @close="onClose"
    :visible="visible">

    <!-- 抽屉内容的border -->
    <div
      :style="{
        padding:'10px',
        border: '1px solid #e9e9e9',
        background: '#fff',
      }">
      <div class="table-page-search-wrapper">
        <a-form @keyup.enter.native="searchQuery">
          <a-row :gutter="12">
            <a-col :md="8" :sm="8">
              <a-form-item label="规则名称" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
                <a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="规则值" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
                <a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
30
31
                <a-button type="primary" @click="searchQuery" icon="search">{{ $t('button.search') }}</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('button.reset') }}</a-button>
肖超群 authored
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
              </span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="24" :sm="24">
              <a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus">添加</a-button>
            </a-col>
          </a-row>
        </a-form>

        <a-table
          ref="table"
          rowKey="id"
          size="middle"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :rowClassName="getRowClassname">
50
          <template slot="ruleValueText" slot-scope="text">
肖超群 authored
51
52
53
54
            <j-ellipsis :value="text" :length="15"></j-ellipsis>
          </template>
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">
55
              <a-icon type="edit"/>{{$t('button.edit')}}</a>
肖超群 authored
56
            <a-divider type="vertical"/>
57
58
            <a-popconfirm :title="$t('button.deletingIt')" @confirm="() => handleDelete(record.id)">
              <a>{{$t('button.delete')}}</a>
肖超群 authored
59
60
61
62
63
64
65
66
67
68
            </a-popconfirm>
          </span>
        </a-table>

      </div>
    </div>
    <permission-data-rule-modal @ok="modalFormOk" ref="modalForm"></permission-data-rule-modal>
  </a-drawer>
</template>
<script>
肖超群 authored
69
70
71
import {getPermissionRuleList, queryPermissionRule} from '@/api/api'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import PermissionDataRuleModal from './modules/PermissionDataRuleModal'
肖超群 authored
72
肖超群 authored
73
74
75
76
77
78
79
80
81
82
export default {
  name: 'PermissionDataRuleList',
  mixins: [JeecgListMixin],
  components: {
    PermissionDataRuleModal
  },
  data() {
    return {
      queryParam: {},
      drawerWidth: 650,
谭毅彬 authored
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
      columns: [
        {
          title: '规则名称',
          dataIndex: 'ruleName',
          key: 'ruleName',
          width: 150,
        },
        {
          title: '规则字段',
          dataIndex: 'ruleColumn',
          key: 'ruleColumn',
          width: 150,
        },
        {
          title: '规则值',
          dataIndex: 'ruleValue',
          key: 'ruleValue',
          width: 150,
          scopedSlots: {customRender: "ruleValueText"}
        },
        {
          title: this.$t('system.options'),
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center'
        }
      ],
肖超群 authored
110
111
112
113
114
115
116
117
      permId: '',
      visible: false,
      form: this.$form.createForm(this),
      loading: false,
      url: {
        list: "/sys/permission/getPermRuleListByPermId",
        delete: "/sys/permission/deletePermissionRule",
      },
肖超群 authored
118
    }
肖超群 authored
119
120
121
122
123
124
125
126
127
  },
  created() {
    this.resetScreenSize()
  },
  methods: {
    loadData() {
      //20190908 scott for: 首次进入菜单列表的时候,不加载权限列表
      if (!this.permId) {
        return
肖超群 authored
128
      }
肖超群 authored
129
130
131
132
133
134
135
136
      let that = this
      this.dataSource = []
      var params = this.getQueryParams()//查询条件
      getPermissionRuleList(params).then((res) => {
        if (res.success) {
          that.dataSource = res.result
        }
      })
肖超群 authored
137
    },
肖超群 authored
138
139
140
141
142
143
144
145
146
    edit(record) {
      if (record.id) {
        this.visible = true
        this.permId = record.id
      }
      this.queryParam = {}
      this.queryParam.permissionId = record.id
      this.visible = true
      this.loadData()
肖超群 authored
147
148
      this.resetScreenSize()
    },
肖超群 authored
149
150
    addPermissionRule() {
      this.$refs.modalForm.add(this.permId)
151
      this.$refs.modalForm.title = this.$t('button.new')
肖超群 authored
152
153
154
155
156
157
158
    },
    searchQuery() {
      var params = this.getQueryParams();
      params.permissionId = this.permId;
      queryPermissionRule(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result
肖超群 authored
159
        }
肖超群 authored
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
      })
    },
    searchReset() {
      this.queryParam = {}
      this.queryParam.permissionId = this.permId
      this.loadData(1);
    },
    onClose() {
      this.visible = false
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 650
      }
    },
    getRowClassname(record) {
      if (record.status != 1) {
        return "data-rule-invalid"
肖超群 authored
182
183
184
      }
    }
  }
肖超群 authored
185
}
肖超群 authored
186
187
188
</script>

<style>
肖超群 authored
189
190
191
192
.data-rule-invalid {
  background: #f4f4f4;
  color: #bababa;
}
肖超群 authored
193
</style>