Blame view

ant-design-vue-jeecg/src/views/system/modules/SysCheckRuleModal.vue 11.1 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
肖超群 authored
14
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则名称" prop="ruleName">
肖超群 authored
15
16
17
18
19
20
21
22
23
24
25
26
27
28
          <a-input placeholder="请输入规则名称" v-model="model.ruleName"/>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则Code" prop="ruleCode">
          <a-input placeholder="请输入规则Code" v-model="model.ruleCode"/>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则描述" prop="ruleDescription">
          <a-textarea placeholder="请输入规则描述" v-model="model.ruleDescription"/>
        </a-form-model-item>

      </a-form-model>
      <!-- 规则设计 -->
      <a-tabs v-model="tabs.activeKey">
        <a-tab-pane tab="局部规则" :key="tabs.design.key" forceRender>
          <a-alert type="info" showIcon message="局部规则按照你输入的位数有序的校验。"/>
肖超群 authored
29
30
          <j-editable-table ref="designTable" dragSort rowNumber :maxHeight="240" :columns="tabs.design.columns"
                            :dataSource="tabs.design.dataSource" style="margin-top: 8px;">
肖超群 authored
31
32
33
34
35
36
37
38
39

            <template #action="props">
              <my-action-button :rowEvent="props"/>
            </template>

          </j-editable-table>
        </a-tab-pane>

        <a-tab-pane tab="全局规则" :key="tabs.global.key" forceRender>
肖超群 authored
40
41
          <j-editable-table ref="globalTable" dragSort rowNumber actionButton :maxHeight="240"
                            :columns="tabs.global.columns" :dataSource="tabs.global.dataSource">
肖超群 authored
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

            <template #actionButtonAfter>
              <a-alert type="info" showIcon message="全局规则可校验用户输入的所有字符;全局规则的优先级比局部规则的要高。" style="margin-bottom: 8px;"/>
            </template>

            <template #action="props">
              <my-action-button :rowEvent="props" allowEmpty/>
            </template>

          </j-editable-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
肖超群 authored
59
60
61
62
63
import pick from 'lodash.pick'
import {httpAction} from '@/api/manage'
import {validateDuplicateValue, alwaysResolve, failedSymbol} from '@/utils/util'
import {FormTypes} from '@/utils/JEditableTableUtil'
import JEditableTable from '@comp/jeecg/JEditableTable'
肖超群 authored
64
肖超群 authored
65
66
67
68
69
70
71
72
73
74
75
export default {
  name: 'SysCheckRuleModal',
  components: {
    JEditableTable,
    'my-action-button': {
      props: {rowEvent: Object, allowEmpty: Boolean},
      methods: {
        confirmIsShow() {
          const {index, allValues: {inputValues}} = this.rowEvent
          let value = inputValues[index]
          return value.digits || value.pattern
肖超群 authored
76
        },
肖超群 authored
77
78
79
        handleLineAdd() {
          const {target} = this.rowEvent
          target.add()
肖超群 authored
80
        },
肖超群 authored
81
82
83
        handleLineDelete() {
          const {rowId, target} = this.rowEvent
          target.removeRows(rowId)
肖超群 authored
84
        },
肖超群 authored
85
86
87
88
89
90
91
92
93
94
95
96
97
        renderDeleteButton() {
          if (this.allowEmpty || this.rowEvent.index > 0) {
            if (this.confirmIsShow()) {
              return (
                <a-popconfirm title="确定要删除吗?" onConfirm={this.handleLineDelete}>
                  <a-button icon="minus"/>
                </a-popconfirm>
              )
            } else {
              return (
                <a-button icon="minus" onClick={this.handleLineDelete}/>
              )
            }
肖超群 authored
98
          }
肖超群 authored
99
          return ''
肖超群 authored
100
        },
肖超群 authored
101
102
103
104
105
106
107
108
109
      },
      render() {
        return (
          <div>
            <a-button onClick={this.handleLineAdd} icon="plus"/>
            &nbsp;
            {this.renderDeleteButton()}
          </div>
        )
肖超群 authored
110
      }
肖超群 authored
111
112
113
114
115
116
117
118
119
120
    }
  },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
肖超群 authored
121
      },
肖超群 authored
122
123
124
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
肖超群 authored
125
      },
肖超群 authored
126
127
128
129
130
131
132
      confirmLoading: false,
      validatorRules: {
        ruleName: [{required: true, message: '请输入规则名称!'}],
        ruleCode: [
          {required: true, message: '请输入规则Code!'},
          {validator: (rule, value, callback) => validateDuplicateValue('sys_check_rule', 'rule_code', value, this.model.id, callback)}
        ],
肖超群 authored
133
      },
肖超群 authored
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
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
212
213
214
215
216
217
218
219
220
221
      tabs: {
        activeKey: 'design',
        global: {
          key: 'global',
          columns: [
            {
              title: '优先级',
              key: 'priority',
              width: '15%',
              type: FormTypes.select,
              defaultValue: '1',
              options: [
                {title: '优先运行', value: '1'},
                {title: '最后运行', value: '0'},
              ],
              validateRules: []
            },
            {
              title: '规则(正则表达式)',
              key: 'pattern',
              width: '50%',
              type: FormTypes.input,
              validateRules: [
                {required: true, message: '规则不能为空'},
                {handler: this.validatePatternHandler},
              ]
            },
            {
              title: '提示文本',
              key: 'message',
              width: '20%',
              type: FormTypes.input,
              validateRules: [
                {required: true, message: '${title}不能为空'},
              ]
            },
            {
              title: '操作',
              key: 'action',
              width: '15%',
              slotName: 'action',
              type: FormTypes.slot
            }
          ],
          dataSource: [],
        },
        design: {
          key: 'design',
          columns: [
            {
              title: '位数',
              key: 'digits',
              width: '15%',
              type: FormTypes.inputNumber,
              validateRules: [
                {required: true, message: '${title}不能为空'},
                {pattern: /^[1-9]\d*$/, message: '请输入零以上的正整数'},
              ]
            },
            {
              title: '规则(正则表达式)',
              key: 'pattern',
              width: '50%',
              type: FormTypes.input,
              validateRules: [
                {required: true, message: '规则不能为空'},
                {handler: this.validatePatternHandler}
              ]
            },
            {
              title: '提示文本',
              key: 'message',
              width: '20%',
              type: FormTypes.input,
              validateRules: [
                {required: true, message: '${title}不能为空'},
              ]
            },
            {
              title: '操作',
              key: 'action',
              width: '15%',
              slotName: 'action',
              type: FormTypes.slot
            },
          ],
          dataSource: [],
        }
肖超群 authored
222
      },
肖超群 authored
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
      url: {
        add: '/sys/checkRule/add',
        edit: '/sys/checkRule/edit',
      },
    }
  },
  created() {
  },
  methods: {

    validatePatternHandler(type, value, row, column, callback, target) {
      if (type === 'blur' || type === 'getValues') {
        try {
          new RegExp(value)
          callback(true)
        } catch (e) {
          callback(false, '请输入正确的正则表达式')
        }
      } else {
        callback(true) // 不填写或者填写 null 代表不进行任何操作
      }
    },
肖超群 authored
245
肖超群 authored
246
247
248
249
250
251
252
253
254
255
256
    add() {
      this.edit({})
    },
    edit(record) {
      this.tabs.activeKey = this.tabs.design.key
      this.tabs.global.dataSource = []
      this.tabs.design.dataSource = [{digits: '', pattern: '', message: ''}]
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.model = Object.assign({}, record)
肖超群 authored
257
肖超群 authored
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
        // 子表数据
        let ruleJson = this.model.ruleJson
        if (ruleJson) {
          let ruleList = JSON.parse(ruleJson)
          // 筛选出全局规则和局部规则
          let global = [], design = [], priority = '1'
          ruleList.forEach(rule => {
            if (rule.digits === '*') {
              global.push(Object.assign(rule, {priority}))
            } else {
              priority = '0'
              design.push(rule)
            }
          })
          this.tabs.global.dataSource = global
          this.tabs.design.dataSource = design
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      Promise.all([
        // 主表单校验
        alwaysResolve(new Promise((resolve, reject) => {
          this.$refs.form.validate((ok, err) => ok ? resolve(this.model) : reject(err))
        })),
        // 局部规则子表校验
        alwaysResolve(this.$refs.designTable.getValuesPromise),
        // 全局规则子表校验
        alwaysResolve(this.$refs.globalTable.getValuesPromise),
      ]).then(results => {
        let [mainResult, designResult, globalResult] = results
肖超群 authored
293
肖超群 authored
294
295
296
297
298
299
300
301
302
303
304
        if (mainResult.type === failedSymbol) {
          return Promise.reject('主表校验未通过')
        } else if (designResult.type === failedSymbol) {
          this.tabs.activeKey = this.tabs.design.key
          return Promise.reject('局部规则子表校验未通过')
        } else if (globalResult.type === failedSymbol) {
          this.tabs.activeKey = this.tabs.global.key
          return Promise.reject('全局规则子表校验未通过')
        } else {
          // 所有校验已通过,这一步是整合数据
          let mainValues = mainResult.data, globalValues = globalResult.data, designValues = designResult.data
肖超群 authored
305
肖超群 authored
306
307
308
309
310
311
312
313
          // 整合两个子表的数据
          let firstGlobal = [], afterGlobal = []
          globalValues.forEach(v => {
            v.digits = '*'
            if (v.priority === '1') {
              firstGlobal.push(v)
            } else {
              afterGlobal.push(v)
肖超群 authored
314
            }
肖超群 authored
315
316
317
318
319
320
321
322
323
324
325
326
327
          })
          let concatValues = firstGlobal.concat(designValues).concat(afterGlobal)
          let subValues = concatValues.map(i => pick(i, 'digits', 'pattern', 'message'))

          // 生成 formData,用于传入后台
          let ruleJson = JSON.stringify(subValues)
          let formData = Object.assign(this.model, mainValues, {ruleJson})

          // 判断请求方式和请求地址,并发送请求
          let method = 'post', httpUrl = this.url.add
          if (this.model.id) {
            method = 'put'
            httpUrl = this.url.edit
肖超群 authored
328
          }
肖超群 authored
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
          this.confirmLoading = true
          return httpAction(httpUrl, formData, method)
        }
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.close()
        } else {
          this.$message.warning(res.message)
        }
      }).catch(e => {
        console.error(e)
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    handleCancel() {
      this.close()
    },
肖超群 authored
349
350

  }
肖超群 authored
351
}
肖超群 authored
352
353
354
</script>

<style lang="less" scoped></style>