Vue树形单选选择器

调用页面SuperviseTimerModal.vue代码如下:

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
132
133
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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
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
293
294
295
296
297
298
299
300
301
302
303
304
<template>
  <div>
    <j-modal
      centered
      :title="title"
      :width="width"
      :visible="visible"
      :destroyOnClose="true"
      switchFullscreen
      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
      @cancel="handleCancel"
      >
      <template slot="footer">
        <a-button type="primary" @click="submitForm">确定</a-button>
        <a-button  @click="handleCancel">关闭</a-button>
      </template>
      <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="disableSubmit">
          <a-form :form="form" slot="detail">
            <a-row>
              <a-col :span="24">
                <a-form-item label="监督模型" :labelCol="labelCol" :wrapperCol="wrapperCol" class="bt-check">
                  <a-input v-model="superviseRuleDatasName" placeholder="请选择监督模型"  @click="showSelectRadioSuperviseRuleModal"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="cron表达式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-cron ref="innerVueCron" v-decorator="['cronExp', { initialValue: '* * * * * ? *' }]" @change="setCorn"></j-cron>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="参数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <!--<a-textarea placeholder="请输入参数" :rows="5" v-decorator="['params', {}]" style="resize:none;"/>-->
 
                  <a-row :gutter="24">
                    <a-col :md="8" :sm="8">
                      <a-form-item label="参数说明" style="margin-bottom:0 !important;">
                        <a-input placeholder="参数说明" v-model.trim="defaultParamExplain" disabled/>
                      </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                      <a-form-item label="参数名称" style="margin-bottom:0 !important;">
                        <a-input placeholder="参数名称" v-model.trim="defaultParamName" disabled/>
                      </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                      <a-form-item label="参数值" style="margin-bottom:0 !important;">
                        <a-input placeholder="请输入参数值"  v-model.trim="defaultParamValue"></a-input>
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="24">
                    <div v-for="(item,i) in paramList" class="docTemplate">
                      <a-col :md="8" :sm="8">
                        <a-form-item label="参数说明">
                          <a-input placeholder="参数说明"  v-model.trim="item.paramExplain" disabled></a-input>
                        </a-form-item>
                      </a-col>
                      <a-col :md="8" :sm="8">
                        <a-form-item label="参数名称">
                          <a-input placeholder="参数名称"  v-model.trim="item.paramName" disabled></a-input>
                        </a-form-item>
                      </a-col>
                      <a-col :md="8" :sm="8">
                        <a-form-item label="默认值">
                          <a-input placeholder="请输入默认值"  v-model.trim="item.paramValue"></a-input>
                        </a-form-item>
                      </a-col>
                      <!--<a-col :md="2" :sm="2" style="margin-top:30px" v-show="!disableSubmit">
                        <a-button type="primary" @click="deleteNode(i)" shape="circle"  icon="delete"></a-button>
                      </a-col>-->
                    </div>
                  </a-row>
 
                  <!-- 操作按钮区域 -->
                  <!--<div class="table-operator" style="margin-left: -20px" v-show="!disableSubmit">
                    <a-button @click="addNode" type="link" icon="plus">添加</a-button>
                  </div>-->
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-textarea placeholder="请输入说明" :rows="5" v-decorator="['memo', {}]" style="resize:none;"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="启用状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-dict-select-tag type="radioButton"  v-decorator="[ 'enable', {'initialValue':-1}]" :trigger-change="true" dictCode="quartz_enable"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </j-form-container>
      </a-spin>
 
      <select-radio-supervise-rule-modal ref="selectRadioSuperviseRuleModal" @getSuperviseRuleDatas="getSuperviseRuleDatas"></select-radio-supervise-rule-modal>
    </j-modal>
  </div>
</template>
 
<script>
 
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import JCron from "@/components/ksource/JCron";
  import JFormContainer from '@/components/ksource/JFormContainer'
  import SelectRadioSuperviseRuleModal from '../modules/SelectRadioSuperviseRuleModal'
  export default {
    name: 'SuperviseTimerModal',
    components: {
      JCron,
      JFormContainer,
      SelectRadioSuperviseRuleModal
    },
    data () {
      return {
        title:'定时添加',
        width:800,
        visible: false,
        disableSubmit: false,
        superviseRuleDatas: [],
        superviseRuleDatasName: [],
        defaultParamExplain:'',
        defaultParamName:'',
        defaultParamValue:'',
        paramList: [],
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/supervise/superviseTimer/add",
          edit: "/supervise/superviseTimer/edit",
          queryById: "/supervise/superviseTimer/queryById"
        }
      }
    },
    methods: {
      setCorn(data){
        this.$nextTick(() => {
          this.model.cronExpression = data;
        })
        if (Object.keys(data).length==0) {
          this.$message.warning('请输入cron表达式!');
        }
      },
      showSelectRadioSuperviseRuleModal(){
        this.$refs.selectRadioSuperviseRuleModal.selectedIdList = this.superviseRuleDatas
        this.$refs.selectRadioSuperviseRuleModal.initView();
      },
      getSuperviseRuleDatas(idList,nameList,dataList){
        this.superviseRuleDatas = idList;
        this.superviseRuleDatasName = nameList;
        this.paramList = [];
        this.defaultParamExplain = '';
        this.defaultParamName = '';
        this.defaultParamValue = '';
        if(dataList.length != 0){
          if(dataList[0].paramsConfig != null && dataList[0].paramsConfig != '' && dataList[0].paramsConfig.indexOf('[{') != -1){
              let paramsConfig = JSON.parse(dataList[0].paramsConfig);
              let flag = 0;
              for (let param of paramsConfig) {
                if(flag == 0){
                  this.defaultParamExplain = param.paramExplain;
                  this.defaultParamName = param.paramName;
                  this.defaultParamValue = param.paramValue;
                }else{
                  this.paramList.push(param)
                }
                flag++;
              }
          }
        }
      },
      add () {
        this.visible=true
        this.edit({});
      },
      edit (record) {
        this.superviseRuleDatas = [];
        this.superviseRuleDatasName = [];
        this.paramList = [];
        this.defaultParamExplain = '';
        this.defaultParamName = '';
        this.defaultParamValue = '';
        this.form.resetFields();
        if(typeof(record.superviseId) != "undefined"){
          this.superviseRuleDatas = record.superviseId.split(",");
          this.superviseRuleDatasName = record.superviseId_dictText.split(",");
        }
        if(record.params != null && record.params != '' && record.params.indexOf('[{') != -1){
          let params = JSON.parse(record.params);
          let flag = 0;
          for (let item of params) {
            if(flag == 0){
              this.defaultParamExplain = item.paramExplain;
              this.defaultParamName = item.paramName;
              this.defaultParamValue = item.paramValue;
            }else{
              this.paramList.push(item)
            }
            flag++;
          }
        }
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'superviseId','cronExp','enable','params','memo','createBy','createTime'))
        })
      },
      submitForm () {
        const that = this;
        if(that.superviseRuleDatas.length == 0){
          that.$message.warn("请选择监督模型");
          return false;
        }
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            this.model.superviseId = this.superviseRuleDatas.join(",");
 
            let newParamArr = [];
            let paramArr = this.paramList.filter(item => !((item.paramExplain == null || item.paramExplain == '') && (item.paramName == null || item.paramName == '') && (item.paramValue == null || item.paramValue == '')));
            let flag = 0;
            if((this.defaultParamName == null || this.defaultParamName == '') && (this.defaultParamValue != null && this.defaultParamValue != '')
              || (this.defaultParamName == null || this.defaultParamName == '') && (this.defaultParamExplain != null && this.defaultParamExplain != '')){
              flag++;
            }else if(this.defaultParamName != null && this.defaultParamName != ''){
              let obj = {};
              obj.paramExplain = this.defaultParamExplain;
              obj.paramName = this.defaultParamName;
              obj.paramValue = this.defaultParamValue;
              newParamArr.push(obj);
            }
            for (let i = 0; i < paramArr.length; i++) {
              if((paramArr[i].paramName == null || paramArr[i].paramName == '') && (paramArr[i].paramValue != null && paramArr[i].paramValue != '')
                || (paramArr[i].paramName == null || paramArr[i].paramName == '') && (paramArr[i].paramExplain != null && paramArr[i].paramExplain != '')){
                flag++;
              }else if(paramArr[i].paramName != null && paramArr[i].paramName != ''){
                newParamArr.push(paramArr[i]);
              }
            }
            if(flag > 0){
              this.$message.warn("参数名称不能为空")
              that.confirmLoading = false;
              return false;
            }
            let paramJson = '';
            if(newParamArr.length > 0){
              paramJson = JSON.stringify(newParamArr)
            }
            this.model.params = paramJson;
            let formData = Object.assign(this.model, values);
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.visible = false;
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
 
        })
      },
      //添加div
      addNode:function() {
        this.paramList.push({paramExplain: '', paramName: '', paramValue: ''});
      },
      //删除div
      deleteNode:function(i) {
        this.paramList.splice(i,1);  //删除index为i,位置的数组元素
      },
      handleCancel () {
        this.superviseRuleDatas = [];
        this.superviseRuleDatasName = [];
        this.visible = false;
      }
    }
  }
</script>

弹窗页面SelectRadioSuperviseRuleModal.vue代码如下:

 

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
132
133
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
222
223
224
<template>
  <div>
    <a-modal
      centered
      :title="title"
      :width="width"
      :visible="visible"
      :destroyOnClose="true"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-card :bordered="false" class="mb10 searchCard">
        <div style="width: 20%; float: left; margin-top: -40px; margin-left: -30px">
          <a-spin :spinning="loading">
            <a-card :bordered="false">
              <div style="background: #fff; margin: 0px -5px;">
                <!-- 树-->
                <a-col :scroll="{ x:200 , y:innerHeight}" :md="10" :sm="24" class="treeHeight">
                  <a-tree
                    multiple
                    @select="onSelect"
                    :selectedKeys="selectedKeys"
                    :treeData="categoryTree"
                    :checkStrictly="checkStrictly"
                    :expandedKeys="iExpandedKeys"
                    :autoExpandParent="autoExpandParent"
                    @expand="onExpand"/>
                </a-col>
              </div>
            </a-card>
          </a-spin>
        </div>
        <div style="width: 80%; float: left; margin-top: -40px; padding-left: 1%;">
          <select-radio-supervise-rule-list ref="selectRadioSuperviseRuleList" :selectedIdList="selectedIdList"
                                            @ok="loadTree" @getSelectedDataList="getSelectedDataList"
                                            @addSelectData="addSelectData">
          </select-radio-supervise-rule-list>
        </div>
        <div style="width: 15%; float: left; margin-top: -20px; display: none">
          <a-card :title="'已选模型'" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
            <table style="width: 150%; text-align: center">
              <tr style="border-bottom: 1px solid #dedede; font-size: 14px; height: 35px; background-color: #e8e8e8">
                <th style="width: 35%">名称</th>
                <th style="width: 40%">编号</th>
                <th style="width: 50%">操作</th>
              </tr>
              <tr v-for="(item,index) in selectedDataList" style="border-bottom: 1px solid #dedede; height: 50px">
                <td><span :title="item.name">{{getSubString(item.name)}}</span></td>
                <td><span :title="item.code">{{getSubString(item.code)}}</span></td>
                <td>
                  <a @click="removeSelectedData(item)">删除</a>
                </td>
              </tr>
            </table>
            <div v-if="selectedDataList.length == 0" style="padding-top: 20px; width: 150%">
              <a-empty></a-empty>
            </div>
          </a-card>
        </div>
      </a-card>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">关闭</a-button>
        <a-button type="primary" @click="checkSuperviseRule">选择</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import SelectRadioSuperviseRuleList from './SelectRadioSuperviseRuleList'
  import { querySupersiveTypeTreeList } from '@/api/api'
  import { getAction } from '@/api/manage'
  import { startSuperviseRule } from '@/api/query'
  import {KsListMixin} from '@/mixins/KsListMixin'
  export default {
    name: 'SelectSuperviseRuleModal',
    mixins: [KsListMixin],
    components: {
      SelectRadioSuperviseRuleList
    },
    data() {
      return {
        width:"70%",
        title:"模型选择器",
        visible:false,
        iExpandedKeys: [],
        loading: false,
        autoExpandParent: true,
        categoryTree: [],
        selectedRecord:{},
        model: {},
        selectedKeys: [],
        currSelected: {},
        allTreeKeys: [],
        selectedDataList: [],
        selectedIdList: [],
        checkStrictly: true,
      }
    },
    created() {
 
    },
    methods: {
      getSubString(name){
        if(name.length > 5){
          name = name.substring(0,5)+"...";
        }
        return name;
      },
      initView() {
        this.visible = true
        this.loading = true
        this.selectedKeys = []
        this.currSelected = {}
        this.loadTree()
      },
      loadTree() {
        var that = this
        that.categoryTree = []
        querySupersiveTypeTreeList().then((res) => {
          if (res.success) {
            this.allTreeKeys = [];
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.categoryTree.push(temp)
              that.setThisExpandedKeys(temp)
              that.getAllKeys(temp);
            }
            console.log(that.categoryTree)
            this.loading = false
          }
        })
        this.$refs.selectRadioSuperviseRuleList.selectedRowKeys = this.selectedIdList;
      },
      setThisExpandedKeys(node) {
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)
          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
        }
      },
      onExpand(expandedKeys) {
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onSelect(selectedKeys, e) {
        this.selectedRecord = e.node.dataRef
        let record = e.node.dataRef
        this.currSelected = Object.assign({}, record)
        this.model = this.currSelected
        this.selectedKeys = [record.key]
        this.model.parentId = record.parentId
        this.getSuperviseRuleList();
      },
      getSuperviseRuleList() {
        if(this.selectedRecord.pid == "0"){
          this.$refs.selectRadioSuperviseRuleList.getSuperviseRuleByType("","");
        }else{
          this.$refs.selectRadioSuperviseRuleList.getSuperviseRuleByType(this.selectedRecord.key,this.selectedRecord.name)
        }
      },
      getAllKeys(node) {
        this.allTreeKeys.push(node.key)
        if (node.children && node.children.length > 0) {
          for (let a = 0; a < node.children.length; a++) {
            this.getAllKeys(node.children[a])
          }
        }
      },
      checkSuperviseRule(){
        let nameList = [];
        for(let obj of this.selectedDataList){
          nameList.push(obj.name);
        }
        this.$emit("getSuperviseRuleDatas",this.selectedIdList,nameList,this.selectedDataList);
        this.visible = false
      },
      getSelectedDataList(selectedDataList){
        this.selectedDataList = selectedDataList;
      },
      addSelectData(record){
        this.selectedIdList = [];
        this.selectedDataList = [];
        this.selectedIdList.push(record.id)
        this.selectedDataList.push(record);
      },
      removeSelectedData(record){
        this.selectedIdList = [];
        this.selectedDataList = [];
        this.$refs.selectRadioSuperviseRuleList.selectedRowKeys = [];
      },
      handleCancel() {
        this.selectedDataList = [];
        this.selectedIdList = [];
        this.visible = false
      },
    },
  }
 
 
</script>
<style scoped>
  .anty-form-btn button {
    margin: 0 5px;
  }
  .header button {
    margin: 0 3px
  }
  .treeHeight{
    width: 100%;
    overflow: auto;
    height: calc(98vh - 225px);
  }
  .searchCard > .ant-card-body {
    padding: 20px 0 0 20px !important;
  }
  .ant-modal-body {
     padding: 20px 20px 0  20px!important;
   }
  .ant-table-tbody .ant-table-row td{
    padding-top: 10px;
    padding-bottom: 10px;
  }
 
</style>

 

列表页面SelectRadioSuperviseRuleList.vue代码如下

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
132
133
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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<template>
  <div>
    <a-card :bordered="false" class="mb15 searchCard">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="8" :sm="8">
              <a-form-item label="编号" :labelCol="{span: 5}">
                <a-input placeholder="请输入编号查询" v-model="queryParam.code"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="名称" :labelCol="{span: 5}">
                <a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      </a-card>
      <a-card :bordered="false">
      <!-- table区域-begin -->
      <div style="margin-top: -30px">
        <a-table
          ref="table"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys, onChange: onSelectChange, type :'radio'}"
          :customRow="customRowFn"
          class="j-table-force-nowrap"
          @change="handleTableChange">
 
          <span slot="state" slot-scope="text, record">
            <a-tag color="green" v-if="text == 'enabled'">启用</a-tag>
            <a-tag color="red" v-if="text == 'disabled'">禁用</a-tag>
            <a-tag color="orange" v-if="text == 'executing'">正在执行</a-tag>
            <a-tag color="orange" v-if="text == 'exception'">异常</a-tag>
          </span>
 
          <span slot="action" slot-scope="text, record">
            <a @click="handleDetail(record)">详情</a>
          </span>
 
        </a-table>
      </div>
 
      <supervise-rule-detail ref="superviseRuleDetail" ></supervise-rule-detail>
    </a-card>
  </div>
</template>
 
<script>
 
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { KsListMixin } from '@/mixins/KsListMixin'
  import { getAction,postAction } from '@/api/manage'
  import SuperviseRuleDetail from './SuperviseRuleDetail'
  import JSuperQuery from '@/components/ksource/JSuperQuery'
 
  export default {
    name: 'SelectSuperviseRuleList',
    mixins:[KsListMixin, mixinDevice],
    components: {
      SuperviseRuleDetail,
      JSuperQuery,
    },
    props: {
      selectedIdList: {
        type: Array,
        required: false
      },
    },
    data () {
      return {
        key: '',
        name: '',
        description: '监督规则管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:(text,record,index)=>`${(this.ipagination.current - 1) * this.ipagination.pageSize + parseInt(index) +1}`
          },
          {
            title:'编号',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'监督类型',
            align:"center",
            dataIndex: 'superviseTypeName'
          },
          {
            title:'分析方式',
            align:"center",
            customRender: function (t, r, index) {
              let analysisMode = "无"
              if(r.analysisMode == 'custom'){
                analysisMode = "查询脚本"
              }else if(r.analysisMode == 'script'){
                analysisMode = "动态脚本"
              }
              return analysisMode;
            }
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'state',
            scopedSlots: { customRender: 'state' },
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/supervise/superviseRule/list",
        },
      }
    },
    created() {
 
    },
    methods: {
      loadData(arg){
        this.selectedRowKeys = this.selectedIdList;
        this.url.list = "/supervise/superviseRule/list";
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        let afterListCallBack = (res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            let selectedDataList = [];
            for(let i = 0 ; i < this.dataSource.length; i++){
              for(let j = 0; j < this.selectedIdList.length; j++){
                if(this.dataSource[i].id == this.selectedIdList[j]){
                  selectedDataList.push(this.dataSource[i]);
                }
              }
            }
            this.$emit("getSelectedDataList",selectedDataList);
            // total为0时会出现条件误判,不进行分页在后端数据返回时设置total为null
            if(res.result.total != null)
            {
              this.ipagination.total = res.result.total;
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        };
        getAction(this.url.list, params).then(afterListCallBack);
      },
      getSuperviseRuleByType(key,name){
        this.ipagination.current = 1;
        this.ipagination.total = 0;
        this.selectedRowKeys = this.selectedIdList;
        this.url.list = "/supervise/superviseRule/list";
        if(key == "" || key == null){
          this.key = '';
          this.name = '';
          this.loadData();
          return false;
        }else{
          this.url.list = "/supervise/superviseRule/list?superviseType="+key;
        }
        this.key = key;
        this.name = name;
        let obj = {};
        obj.superviseType = key;
        obj.name = this.queryParam.name;
        obj.code = this.queryParam.code;
        getAction('/supervise/superviseRule/list', obj).then(res => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            if(res.result.total != null)
            {
              this.ipagination.total = res.result.total;
            }
          }
        }).catch(error => {
          this.$message.error('查询失败')
        })
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        this.$emit("addSelectData",selectionRows[0]);
      },
      customRowFn(record) {
        return {
          on: {
            click: () => {
              let keys = [];
              keys.push(record.id);
              this.selectedRowKeys = keys;
              this.$emit("addSelectData",record);
            }
          }
        }
      },
      handleDetail(record){
        this.$refs.superviseRuleDetail.initView(record);
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>

 

posted @   岁月淡忘了谁  阅读(167)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示