n20-common-lib 2.9.2 → 2.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,264 @@
1
+ <template>
2
+ <cl-table-pro v-bind="$attrs" v-on="$listeners">
3
+ <!-- 插槽 -->
4
+ <vxe-column slot="slot" slot-scope="{ column }" v-bind="{ ...column, field: column.prop, title: column.label }">
5
+ <template #header>
6
+ <span>
7
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
8
+ {{ column.label }}
9
+ </span>
10
+ </template>
11
+ <el-form-item
12
+ slot-scope="{ row, $rowIndex }"
13
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
14
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
15
+ >
16
+ <slot :name="column.prop" :column="column" :rowIndex="$rowIndex"></slot>
17
+ </el-form-item>
18
+ </vxe-column>
19
+ <!--判断字段输入类型 如:input元素、select元素-->
20
+ <!-- 输入框 -->
21
+ <vxe-column slot="input" slot-scope="{ column }" v-bind="{ ...column, field: column.prop, title: column.label }">
22
+ <template #header>
23
+ <span>
24
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
25
+ {{ column.label }}
26
+ </span>
27
+ </template>
28
+ <el-form-item
29
+ slot-scope="{ row, $rowIndex }"
30
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
31
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
32
+ >
33
+ <el-input
34
+ v-model="row[column.prop]"
35
+ :placeholder="column.placeholder || column.label"
36
+ :clearable="column.clearable === false ? false : true"
37
+ v-bind="column"
38
+ :disabled="column.disabled || row[column.prop + '_disabled']"
39
+ @change="(value) => $emit('valueChange', value, column.prop, row)"
40
+ />
41
+ </el-form-item>
42
+ </vxe-column>
43
+ <!-- 金额 -->
44
+ <vxe-column
45
+ slot="input-number"
46
+ slot-scope="{ column }"
47
+ v-bind="{ ...column, field: column.prop, title: column.label }"
48
+ >
49
+ <template #header>
50
+ <span>
51
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
52
+ {{ column.label }}
53
+ </span>
54
+ </template>
55
+ <el-form-item
56
+ slot-scope="{ row, $rowIndex }"
57
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
58
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
59
+ >
60
+ <cl-input-number
61
+ :is-clearable="column.isClearable"
62
+ :clearable="column.clearable === false ? false : true"
63
+ :disabled="column.disabled"
64
+ :max="column.max || 9999999999.99"
65
+ @change="(value) => $emit('valueChange', value, column.prop, row)"
66
+ />
67
+ </el-form-item>
68
+ </vxe-column>
69
+ <!-- 下拉框 -->
70
+ <vxe-column slot="select" slot-scope="{ column }" v-bind="{ ...column, field: column.prop, title: column.label }">
71
+ <template #header>
72
+ <span>
73
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
74
+ {{ column.label }}
75
+ </span>
76
+ </template>
77
+ <el-form-item
78
+ slot-scope="{ row, $rowIndex }"
79
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
80
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
81
+ >
82
+ <el-select
83
+ v-model="row[column.prop]"
84
+ :placeholder="column.placeholder || (column.filterable ? '请输入关键词' : column.label)"
85
+ :remote-method="(query) => column.remoteMethod && column.remoteMethod(query, { ...$attrs, item, value })"
86
+ :clearable="column.clearable === false ? false : true"
87
+ :multiple="false"
88
+ collapse-tags
89
+ :class="{ remote: column.remote, valuable: column.value }"
90
+ v-bind="column"
91
+ @focus="(event) => column.focus && column.focus(event)"
92
+ @change="(value) => $emit('valueChange', value, column.prop, row)"
93
+ >
94
+ <el-option
95
+ v-for="(item, index) in (column.asyncOptions && column.asyncOptions()) || column.options || []"
96
+ :key="index + '' + (column.option ? item[column.option.value] : item.value)"
97
+ :label="column.option ? item[column.option.label] : item.label || item.valueName"
98
+ :value="column.option ? item[column.option.value] : item.value"
99
+ @click.native="$emit('formItemClick', column.prop, item)"
100
+ >
101
+ <div v-if="column.isSlot">
102
+ ({{ column.option ? item[column.option.value] : item.value }}){{
103
+ column.option ? item[column.option.label] : item.label
104
+ }}
105
+ </div>
106
+ </el-option>
107
+ </el-select>
108
+ </el-form-item>
109
+ </vxe-column>
110
+ <!-- 多选下拉框 -->
111
+ <vxe-column
112
+ slot="selectMultiple"
113
+ slot-scope="{ column }"
114
+ v-bind="{ ...column, field: column.prop, title: column.label }"
115
+ >
116
+ <template #header>
117
+ <span>
118
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
119
+ {{ column.label }}
120
+ </span>
121
+ </template>
122
+ <el-form-item
123
+ slot-scope="{ row, $rowIndex }"
124
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
125
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
126
+ >
127
+ <el-select
128
+ :placeholder="column.placeholder || (column.filterable ? '请输入关键词' : column.label)"
129
+ :remote-method="(query) => column.remoteMethod && column.remoteMethod(query, { ...$attrs, item, value })"
130
+ :clearable="column.clearable === false ? false : true"
131
+ :multiple="true"
132
+ collapse-tags
133
+ :class="{ remote: column.remote, valuable: column.value }"
134
+ v-bind="column"
135
+ @focus="(event) => column.focus && column.focus(event)"
136
+ @change="(value) => $emit('valueChange', value, column.prop, row)"
137
+ >
138
+ <el-option
139
+ v-for="(item, index) in (column.asyncOptions && column.asyncOptions()) || column.options || []"
140
+ :key="index + '' + (column.option ? item[column.option.value] : item.value)"
141
+ :label="column.option ? item[column.option.label] : item.label || item.valueName"
142
+ :value="column.option ? item[column.option.value] : item.value"
143
+ @click.native="$emit('formItemClick', column.prop, item)"
144
+ >
145
+ <div v-if="column.isSlot">
146
+ ({{ column.option ? item[column.option.value] : item.value }}){{
147
+ column.option ? item[column.option.label] : item.label
148
+ }}
149
+ </div>
150
+ </el-option>
151
+ </el-select>
152
+ </el-form-item>
153
+ </vxe-column>
154
+ <!-- 日期选择 -->
155
+ <vxe-column
156
+ slot="date-picker"
157
+ slot-scope="{ column }"
158
+ v-bind="{ ...column, field: column.prop, title: column.label }"
159
+ >
160
+ <template #header>
161
+ <span>
162
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
163
+ {{ column.label }}
164
+ </span>
165
+ </template>
166
+ <el-form-item
167
+ slot-scope="{ row, $rowIndex }"
168
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
169
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
170
+ >
171
+ <cl-date-picker
172
+ v-model="row[column.prop]"
173
+ style="width: 100%"
174
+ v-bind="column"
175
+ :disabled="column.disabled || row[column.prop + '_disabled']"
176
+ type="date"
177
+ value-format="yyyy-MM-dd"
178
+ placeholder="请选择日期"
179
+ :clearable="column.clearable === false ? false : true"
180
+ @change="(value) => $emit('valueChange', value, column.prop, row, column)"
181
+ />
182
+ </el-form-item>
183
+ </vxe-column>
184
+ <!--日期时间段-->
185
+ <vxe-column
186
+ slot="daterange"
187
+ slot-scope="{ column }"
188
+ v-bind="{ ...column, field: column.prop, title: column.label }"
189
+ >
190
+ <template #header>
191
+ <span>
192
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
193
+ {{ column.label }}
194
+ </span>
195
+ </template>
196
+ <el-form-item
197
+ slot-scope="{ row, $rowIndex }"
198
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
199
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
200
+ >
201
+ <cl-date-picker-por
202
+ style="width: 100%"
203
+ :start-date.sync="row[column.prop] && row[column.prop][column['startKey'] || 'start']"
204
+ :end-date.sync="row[column.prop] && row[column.prop][column['endKey'] || 'end']"
205
+ type="daterange"
206
+ start-stop
207
+ value-format="yyyy-MM-dd"
208
+ v-bind="column"
209
+ :clearable="column.clearable === false ? false : true"
210
+ @change="(value) => $emit('valueChange', value, column.prop, row)"
211
+ />
212
+ </el-form-item>
213
+ </vxe-column>
214
+ <!--大文本-->
215
+ <vxe-column slot="textarea" slot-scope="{ column }" v-bind="{ ...column, field: column.prop, title: column.label }">
216
+ <template #header>
217
+ <span>
218
+ <span v-if="column.requiredFlag" class="color-danger">*</span>
219
+ {{ column.label }}
220
+ </span>
221
+ </template>
222
+ <el-form-item
223
+ slot-scope="{ row, $rowIndex }"
224
+ :prop="`${listName}.` + $rowIndex + `.${column.prop}`"
225
+ :rules="[{ required: column.requiredFlag, message: ` `, trigger: ['change', 'blur'] }]"
226
+ >
227
+ <el-input
228
+ v-model="row[column.prop]"
229
+ type="textarea"
230
+ :rows="1"
231
+ placeholder="请输入内容"
232
+ maxlength="150"
233
+ show-word-limit
234
+ v-bind="column"
235
+ :clearable="column.clearable === false ? false : true"
236
+ @change="(value) => $emit('valueChange', value, column.prop, row)"
237
+ />
238
+ </el-form-item>
239
+ </vxe-column>
240
+ </cl-table-pro>
241
+ </template>
242
+
243
+ <script>
244
+ export default {
245
+ name: 'CustomTable',
246
+ components: {},
247
+ props: {
248
+ listName: {
249
+ type: String,
250
+ default: ''
251
+ }
252
+ },
253
+ data() {
254
+ return {}
255
+ },
256
+ computed: {},
257
+ watch: {},
258
+ created() {},
259
+ mounted() {
260
+ console.log(this.$attrs)
261
+ },
262
+ methods: {}
263
+ }
264
+ </script>
@@ -0,0 +1,198 @@
1
+ <template>
2
+ <cl-page class="p-0">
3
+ <div slot="header" class="flex-box flex-v flex-lr m-b-s">
4
+ <el-form :inline="true" @submit.native.prevent />
5
+ <div class="flex-box flex-v">
6
+ <el-button type="primary" size="mini" @click="handleWork('新增')">新增</el-button>
7
+ </div>
8
+ </div>
9
+ <DynamicTable
10
+ ref="table1"
11
+ :data="formValue.customList"
12
+ :list-name="'customList'"
13
+ :show-setsize="true"
14
+ :columns="checkColumns"
15
+ height="300px"
16
+ :small="{
17
+ border: true,
18
+ size: 'small',
19
+ stripe: false
20
+ }"
21
+ @valueChange="
22
+ (value, key, row) => {
23
+ valueChange(value, key, row)
24
+ }
25
+ "
26
+ >
27
+ <CascaderArea
28
+ slot="name6"
29
+ v-model="formValue.customList[rowIndex]['name6']"
30
+ slot-scope="{ column, rowIndex }"
31
+ @change="
32
+ (value, key) => {
33
+ valueChange(value, 'name6', formValue.customList[rowIndex])
34
+ }
35
+ "
36
+ />
37
+ <el-input
38
+ slot="name8"
39
+ v-model="formValue.customList[rowIndex]['name8']"
40
+ slot-scope="{ column, rowIndex }"
41
+ @change="
42
+ (value, key) => {
43
+ valueChange(value, 'name8', formValue.customList[rowIndex])
44
+ }
45
+ "
46
+ />
47
+ <el-select
48
+ slot="name7"
49
+ v-model="formValue.customList[rowIndex]['name7']"
50
+ slot-scope="{ column, rowIndex }"
51
+ placeholder="请选择"
52
+ clearable
53
+ filterable
54
+ @change="
55
+ (value, key) => {
56
+ valueChange(value, 'name7', formValue.customList[rowIndex])
57
+ }
58
+ "
59
+ >
60
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
61
+ </el-select>
62
+ </DynamicTable>
63
+ <div slot="footer" class="page-footer-shadow flex-box flex-lr m-t-s">
64
+ <div class="flex-box flex-v">
65
+ <cl-statis-item
66
+ type="全部合计"
67
+ :count-label="['笔数']"
68
+ :list="[{ label: '笔数', value: formValue.customList.length }]"
69
+ />
70
+ </div>
71
+ <div></div>
72
+ </div>
73
+ </cl-page>
74
+ </template>
75
+
76
+ <script>
77
+ import DynamicTable from './DynamicTable.vue'
78
+ export default {
79
+ name: 'TableList',
80
+ components: {
81
+ DynamicTable
82
+ },
83
+ mixins: [],
84
+ props: {
85
+ formValue: {
86
+ type: Object,
87
+ default: () => {
88
+ return {}
89
+ }
90
+ },
91
+ list: {
92
+ type: Object,
93
+ default: () => {
94
+ return {}
95
+ }
96
+ }
97
+ },
98
+ data() {
99
+ return {
100
+ name: '',
101
+ options: [
102
+ {
103
+ name: '1212',
104
+ value: '12313'
105
+ }
106
+ ],
107
+ currentAmount: 0,
108
+ tableData: [],
109
+ multipleSelection: [],
110
+ checkColumns: [],
111
+ tabelHeaders: []
112
+ }
113
+ },
114
+ computed: {},
115
+ watch: {},
116
+ created() {},
117
+ mounted() {
118
+ this.makeTableHeaders()
119
+ },
120
+ beforeCreate() {}, //生命周期 - 创建之前
121
+ beforeMount() {}, //生命周期 - 挂载之前
122
+ beforeUpdate() {}, //生命周期 - 更新之前
123
+ updated() {}, //生命周期 - 更新之后
124
+ beforeDestroy() {}, //生命周期 - 销毁之前
125
+ destroyed() {}, //生命周期 - 销毁完成
126
+ methods: {
127
+ valueChange(value, key, row) {
128
+ switch (key) {
129
+ case 'input':
130
+ if (value === '禁用') {
131
+ // this.$set(row, 'startDate_disabled', true)
132
+ // this.list.startDate.disabled = true
133
+ // this.makeTableHeaders()
134
+ } else {
135
+ // this.$set(row, 'startDate_disabled', false)
136
+ // this.list.startDate.disabled = false
137
+ // this.makeTableHeaders()
138
+ }
139
+ console.log(row)
140
+ break
141
+
142
+ default:
143
+ break
144
+ }
145
+ },
146
+ // 生成tableHeaders
147
+ makeTableHeaders() {
148
+ let array = []
149
+ for (const key in this.list) {
150
+ array.push({
151
+ disabled: this.list[key].disabled,
152
+ label: this.list[key].label,
153
+ requiredFlag: this.list[key].requiredFlag,
154
+ slotName: this.list[key].type,
155
+ prop: key,
156
+ align: 'center',
157
+ minWidth: 140,
158
+ 'show-overflow-tooltip': true
159
+ })
160
+ }
161
+ this.tabelHeaders = array
162
+ this.checkColumns = array
163
+
164
+ /* this.$nextTick(() => {
165
+ this.getColumns()
166
+ }) */
167
+ },
168
+ async handleWork(type, row) {
169
+ switch (type) {
170
+ case '新增':
171
+ this.formValue.customList.push({})
172
+ break
173
+ // 评级记录
174
+ case '评级记录':
175
+ this.$linkPushNew({
176
+ path: '/rating/record'
177
+ })
178
+ break
179
+ case '详情':
180
+ this.$linkPushNew({
181
+ path: '/schedule/contractDetails',
182
+ query: {
183
+ actionId: row.contractId,
184
+ type: 'components'
185
+ }
186
+ })
187
+ break
188
+ default:
189
+ break
190
+ }
191
+ },
192
+ // 获取列表数据
193
+ async getTableData() {
194
+ this.tableData = [{}]
195
+ }
196
+ }
197
+ }
198
+ </script>
package/src/index.js CHANGED
@@ -81,6 +81,7 @@ import operatingStatus from './components/operatingStatus/index.vue'
81
81
  // 动态表单
82
82
  import DynamicField from './components/DynamicField/DynamicField.vue'
83
83
  import DynamicFieldOptions from './components/DynamicField/DynamicFieldOptions.vue'
84
+ import DynamicFieldTable from './components/DynamicField/DynamicTable.vue'
84
85
 
85
86
  // ECharts 不要打包进来
86
87
  import Diff from './components/Diff/index.vue'
@@ -145,6 +146,7 @@ import fitlers from './fitlers'
145
146
  import monitor from './utils/monitor.js'
146
147
  import repairEl from './utils/repairElementUI'
147
148
  const components = [
149
+ DynamicFieldTable,
148
150
  DynamicField,
149
151
  DynamicFieldOptions,
150
152
  ContentLoading,