Blame view

ant-design-vue-jeecg/src/components/jeecg/JPopup.vue 5.87 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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"
      :sorter="sorter"
      :groupId="uniqGroupId"
      :param="param"
      @ok="callBack"
    />

  </div>
</template>

<script>
肖超群 authored
23
import JPopupOnlReport from './modal/JPopupOnlReport'
肖超群 authored
24
肖超群 authored
25
26
27
28
29
30
31
32
33
34
export default {
  name: 'JPopup',
  components: {
    JPopupOnlReport
  },
  props: {
    code: {
      type: String,
      default: '',
      required: false
肖超群 authored
35
    },
肖超群 authored
36
37
38
39
    field: {
      type: String,
      default: '',
      required: false
肖超群 authored
40
    },
肖超群 authored
41
42
43
44
    orgFields: {
      type: String,
      default: '',
      required: false
肖超群 authored
45
    },
肖超群 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
77
78
79
80
81
82
83
84
85
86
87
88
89
    destFields: {
      type: String,
      default: '',
      required: false
    },
    /** 排序列,指定要排序的列,使用方式:列名=desc|asc */
    sorter: {
      type: String,
      default: ''
    },
    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: () => {
肖超群 authored
90
91
      }
    },
肖超群 authored
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
    spliter: {
      type: String,
      required: false,
      default: ','
    },
    /** 分组ID,用于将多个popup的请求合并到一起,不传不分组 */
    groupId: String

  },
  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.split(this.spliter).join(',')
肖超群 authored
124
125
        }
      }
肖超群 authored
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
    }
  },
  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()
      }
肖超群 authored
145
    },
肖超群 authored
146
147
148
149
    handleEmpty() {
      // 禁用时,不允许清空内容
      if (this.disabled) {
        return
肖超群 authored
150
      }
肖超群 authored
151
152
153
154
155
156
157
158
159
160
161
162
163
      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)
      } else {
        this.$emit('input', '', res)
肖超群 authored
164
165
      }
    },
肖超群 authored
166
167
168
169
170
171
    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) {
肖超群 authored
172
        this.showText = ''
肖超群 authored
173
174
175
176
177
178
179
180
181
182
183
        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]]
            // update--begin--autor:liusq-----date:20210713------for:处理val等于0的情况issues/I3ZL4T------
            if (typeof val == 'undefined' || val == null || val.toString() == "") {
              val = ""
肖超群 authored
184
            }
肖超群 authored
185
186
            // update--end--autor:liusq-----date:20210713------for:处理val等于0的情况issues/I3ZL4T------
            tempDestArr.push(val)
肖超群 authored
187
          }
肖超群 authored
188
189
190
191
192
193
194
195
          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 = ""
肖超群 authored
196
            }
肖超群 authored
197
            tempText.push(val)
肖超群 authored
198
          }
肖超群 authored
199
          this.showText = tempText.join(",")
肖超群 authored
200
        }
肖超群 authored
201
202
203
204
205
206
207
208
209
210
211
        // update--end--autor:lvdandan-----date:20200630------for:多选时未带回多个值------
      }
      if (this.triggerChange) {
        //v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
        this.$emit('callback', res)
      } else {
        //v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
        // this.$emit("input",row[orgFieldsArr[destFieldsArr.indexOf(this.field)]])
        let str = ''
        if (this.showText) {
          str = this.showText.split(',').join(this.spliter)
肖超群 authored
212
        }
肖超群 authored
213
        this.$emit('input', str, res)
肖超群 authored
214
215
216
      }
    }
  }
肖超群 authored
217
}
肖超群 authored
218
219
</script>
<style scoped>
肖超群 authored
220
221
222
223
224
225
.components-input-demo-presuffix .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}
肖超群 authored
226
肖超群 authored
227
228
229
.components-input-demo-presuffix .anticon-close-circle:hover {
  color: #f5222d;
}
肖超群 authored
230
肖超群 authored
231
232
233
.components-input-demo-presuffix .anticon-close-circle:active {
  color: #666;
}
肖超群 authored
234
</style>