jeecg中j-vxe-table和j-popup组件的修改使用_jpopup弹窗编辑表格

项目中需要在一个可编辑表格中的一列按部门条件选择部门用户，jeecg前端框架带有j-vxe-table组件，这个组件中也有JVXETypes.popup 类型的列，不过这个列不能带参数查询，不能使用，用了JVXETypes.slot类型的列，放入了j-popup组件，做了一些修改，实现了需求。

select a.id,username,realname,d.dep_id as departId from sys_user a
right join sys_user_depart d
on d.user_id=a.id
where d.dep_id='${departId}'
1
2
3
4

点sql解析按钮，获取到列，设置列的字段文本，是否显示等
报表参数中增加 departId 参数
如图：


确定保存，报表编码为：sel_user_by_depart

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="inline">
        <a-form-item label="非必选部门人数">
          <a-input-number v-model="nums"></a-input-number>
        </a-form-item>
      </a-form-model>
      <j-vxe-table
        ref="vTable"
        row-number
        keep-source
        :dataSource="dataSource"
        :columns="columns">
        <template v-slot:need="props">
          {{ props.row.need == 'Y' ? '是' : '否' }}
        </template>
        <template v-slot:user="props">
          <j-popup code="sel_user_by_depart"
                   :target-id="props.row.id"
                   field="realname"
                   orgFields="id,realname,departid"
                   destFields="id,realname,departid"
                   :param="props.row.param"
                   :multi="false"
                   :trigger-change="true"
                   @callback="popupCallback"/>
        </template>
      </j-vxe-table>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '../../../../api/manage'
import { JVXETypes } from '../../../../components/jeecg/JVxeTable'

export default {
  name: 'TermForm',
  props: {
    type: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      title: '设置工作组',
      width: 800,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      plan: {},
      columns: [
        {
          title: '部门',
          key: 'departName',
          type: JVXETypes.normal,
          align: 'center',
        },
        {
          title: '必选',
          key: 'need',
          type: JVXETypes.slot,
          align: 'center',
          slotName: 'need'
        },
        {
          title: '人员',
          key: 'realName',
          type: JVXETypes.slot,
          slotName: 'user'
        },
        {
          title: '组长',
          key: 'leader',
          type: JVXETypes.select,
          dictCode: 'yes_or_no',
          width: '100px',
          align: 'center'
        },
      ],
      dataSource: [],
      departList: [],
      nums: 2,
    }
  },
  methods: {
    open(plan) {
      this.plan = plan
      this.visible = true
      this.$nextTick(() => {
        this.listDepart()
      })
    },
    listDepart() {
      getAction('/termDepart/list', { type: this.type }).then(res => {
        if (res.success) {
          res.result.forEach(r => {
            r.userId = ''
            r.realName = ''
            r.leader = 'N'
            r.param = { departId: r.departId }
          })
          this.dataSource = res.result
        }
      })
    },
    handleOk() {
      let items = this.dataSource.filter(f => f.need == 'Y' && !f.userId)
      if (items.length > 0) {
        this.$message.error('请为必选部门选择人员')
        return
      }
      let others = this.dataSource.filter(f => f.need == 'N' && !f.userId)
      if (others.length != this.nums) {
        this.$message.error('请在非必选部门中选择 ' + this.nums + ' 个人员')
        return
      }

      let leaders = this.dataSource.filter(f => f.leader == 'Y' && f.userId)
      if (leaders.length == 0) {
        this.$message.error('请选择一个组长')
        return
      } else if (leaders.length > 1) {
        this.$message.error('最多只能选择一个组长')
        return
      }
      let param = []
      this.dataSource.forEach(row => [
        param.push({
          planId: this.plan.id,
          type: this.type,
          departId: row.departId,
          userId: row.userId,
          leader: row.leader
        })
      ])
      let p = {
        terms: param
      }
      this.confirmLoading = true
      postAction('', p).then(res => {
        if (res.success) {
          this.$message.success('小组已设置')
          this.handleCancel()
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
      })

    },
    handleCancel() {
      this.visible = false
    },
    popupCallback(row, id) {
      let item = this.dataSource.find(f => f.id == id)
      item.userId = row.id
    },

  }
}
</script>

<style scoped>

</style>
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

注意j-popup的设置：
:target-id=“props.row.id” 这个是修改组件后增加的属性，用于将记录id传入popup组件中，在回调时再传回来，方便定位是哪一条记录。

在listDeprt方法中的 设置行参数： r.param = { departId: r.departId }
经尝试，不用这样的方式设置，会报错。

<template>
  <div class="components-input-demo-presuffix" v-if="avalid">
    <!---->
    <a-input @click="openModal" :placeholder="placeholder" v-model="showText" readOnly :disabled="disabled">
      <a-icon slot="prefix" type="cluster" :title="title"/>
      <a-icon v-if="showText" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </a-input>

    <j-popup-onl-report
      ref="jPopupOnlReport"
      :code="code"
      :multi="multi"
      :groupId="uniqGroupId"
      :param="param"
      @ok="callBack"
    />

  </div>
</template>

<script>
import JPopupOnlReport from './modal/JPopupOnlReport'

export default {
  name: 'JPopup',
  components: {
    JPopupOnlReport
  },
  props: {
    code: {
      type: String,
      default: '',
      required: false
    },
    field: {
      type: String,
      default: '',
      required: false
    },
    orgFields: {
      type: String,
      default: '',
      required: false
    },
    destFields: {
      type: String,
      default: '',
      required: false
    },
    width: {
      type: Number,
      default: 1200,
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    value: {
      type: String,
      required: false
    },
    triggerChange: {
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    multi: {
      type: Boolean,
      required: false,
      default: false
    },
    //popup动态参数 支持系统变量语法
    param: {
      type: Object,
      required: false,
      default: () => {
      }
    },
    /** 分组ID，用于将多个popup的请求合并到一起，不传不分组 */
    groupId: String,
    /** 列表中使用时传入的列表记录Id ,用于回调时给数据源定位记录提供依据**/
    targetId: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      showText: '',
      title: '',
      avalid: true
    }
  },
  computed: {
    uniqGroupId() {
      if (this.groupId) {
        let { groupId, code, field, orgFields, destFields } = this
        return `${groupId}_${code}_${field}_${orgFields}_${destFields}`
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function (val) {
        if (!val) {
          this.showText = ''
        } else {
          this.showText = val
        }
      }
    }
  },
  created() {
  },
  mounted() {
    if (!this.orgFields || !this.destFields || !this.code) {
      this.$message.error('popup参数未正确配置!')
      this.avalid = false
    }
    if (this.destFields.split(',').length != this.orgFields.split(',').length) {
      this.$message.error('popup参数未正确配置,原始值和目标值数量不一致!')
      this.avalid = false
    }
  },
  methods: {
    openModal() {
      if (this.disabled === false) {
        this.$refs.jPopupOnlReport.show()
      }
    },
    handleEmpty() {
      this.showText = ''
      let destFieldsArr = this.destFields.split(',')
      if (destFieldsArr.length === 0) {
        return
      }
      let res = {}
      for (let i = 0; i < destFieldsArr.length; i++) {
        res[destFieldsArr[i]] = ''
      }
      if (this.triggerChange) {
        this.$emit('callback', res, this.targetId)
      } else {
        this.$emit('input', '', res)
      }
    },
    callBack(rows) {
      // update--begin--autor:lvdandan-----date:20200630------for：多选时未带回多个值------
      let orgFieldsArr = this.orgFields.split(',')
      let destFieldsArr = this.destFields.split(',')
      let resetText = false
      if (this.field && this.field.length > 0) {
        this.showText = ''
        resetText = true
      }
      let res = {}
      if (orgFieldsArr.length > 0) {
        for (let i = 0; i < orgFieldsArr.length; i++) {
          let tempDestArr = []
          for (let rw of rows) {
            let val = rw[orgFieldsArr[i]]
            if (!val) {
              val = ''
            }
            tempDestArr.push(val)
          }
          res[destFieldsArr[i]] = tempDestArr.join(',')
        }
        if (resetText === true) {
          let tempText = []
          for (let rw of rows) {
            let val = rw[orgFieldsArr[destFieldsArr.indexOf(this.field)]]
            if (!val) {
              val = ''
            }
            tempText.push(val)
          }
          this.showText = tempText.join(',')
        }
        // update--end--autor:lvdandan-----date:20200630------for：多选时未带回多个值------
      }
      if (this.triggerChange) {
        //v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
        this.$emit('callback', res, this.targetId)
      } else {
        //v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
        // this.$emit("input",row[orgFieldsArr[destFieldsArr.indexOf(this.field)]])
        this.$emit('input', this.showText, res)
      }
    }
  }
}
</script>
<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}

.components-input-demo-presuffix .anticon-close-circle:hover {
  color: #f5222d;
}

.components-input-demo-presuffix .anticon-close-circle:active {
  color: #666;
}
</style>
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

增加了 targetId属性，在 callback事件中加入这个参数

 watch: {
      code() {
        this.loadColumnsInfo()
      },
      param:{
        deep:true,
        handler(){
          if(this.visible){
            this.dynamicParamHandler()
            this.loadData();
          }
        },
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

只在监听param中加了个判断，如果没有显示就不加载数据，否则在第一次正常使用完关闭表单窗口后，再次打开，不点popup就会去加载数据，此时参数不全，没有报表id，会一直弹404错误。

最终效果