mooho-base-admin-plus 0.4.84 → 2.0.0
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.
package/package.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mooho-base-admin-plus",
|
|
3
3
|
"description": "MOOHO basic framework for admin by Vue3",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "2.0.0",
|
|
5
5
|
"author": "jinyifan <jinyifan@mooho.com.cn>",
|
|
6
|
-
"dotnetVersion": "1.4.0",
|
|
7
6
|
"license": "MIT",
|
|
8
7
|
"private": false,
|
|
9
8
|
"module": "./package/mooho-base-admin-plus.min.js",
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<template v-for="(item, index) in dataSource" :key="index">
|
|
4
|
+
<Checkbox v-model="model[index]" :disabled="readonly" @on-change="change(index)">{{ item[labelKey] }}</Checkbox>
|
|
5
|
+
</template>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
<script>
|
|
9
|
+
import mixinPage from '../../mixins/page';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @displayName check-group 单选框组
|
|
13
|
+
*/
|
|
14
|
+
export default {
|
|
15
|
+
mixins: [mixinPage],
|
|
16
|
+
data() {
|
|
17
|
+
return {
|
|
18
|
+
model: []
|
|
19
|
+
};
|
|
20
|
+
},
|
|
21
|
+
created() {},
|
|
22
|
+
props: {
|
|
23
|
+
/**
|
|
24
|
+
* @model
|
|
25
|
+
*/
|
|
26
|
+
modelValue: {
|
|
27
|
+
type: String
|
|
28
|
+
},
|
|
29
|
+
/**
|
|
30
|
+
* 数据源
|
|
31
|
+
*/
|
|
32
|
+
dataSource: {
|
|
33
|
+
type: Array,
|
|
34
|
+
default: () => {
|
|
35
|
+
return [];
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
/**
|
|
39
|
+
* 大小
|
|
40
|
+
* @values small, default, large
|
|
41
|
+
*/
|
|
42
|
+
size: {
|
|
43
|
+
type: String
|
|
44
|
+
},
|
|
45
|
+
/**
|
|
46
|
+
* 值
|
|
47
|
+
*/
|
|
48
|
+
valueKey: {
|
|
49
|
+
type: String
|
|
50
|
+
},
|
|
51
|
+
/**
|
|
52
|
+
* 标签
|
|
53
|
+
*/
|
|
54
|
+
labelKey: {
|
|
55
|
+
type: String
|
|
56
|
+
},
|
|
57
|
+
/**
|
|
58
|
+
* 只读
|
|
59
|
+
*/
|
|
60
|
+
readonly: {
|
|
61
|
+
type: Boolean,
|
|
62
|
+
default: false
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
watch: {
|
|
66
|
+
modelValue(v) {
|
|
67
|
+
this.model.length = 0;
|
|
68
|
+
let val = [];
|
|
69
|
+
if (!!(this.modelValue || '').trim() && JSON.parse(this.modelValue) instanceof Array) {
|
|
70
|
+
val = JSON.parse(this.modelValue);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
for (let data of this.dataSource) {
|
|
74
|
+
if (
|
|
75
|
+
val.some(item => {
|
|
76
|
+
return item == data[this.valueKey];
|
|
77
|
+
})
|
|
78
|
+
) {
|
|
79
|
+
this.model.push(true);
|
|
80
|
+
} else {
|
|
81
|
+
this.model.push(false);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
methods: {
|
|
87
|
+
change(changedIndex) {
|
|
88
|
+
let val = [];
|
|
89
|
+
for (let index in this.model) {
|
|
90
|
+
if (this.model[index]) {
|
|
91
|
+
val.push(this.dataSource[index][this.valueKey]);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
this.$emit('update:modelValue', JSON.stringify(val));
|
|
96
|
+
|
|
97
|
+
this.$emit('on-change');
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
</script>
|
|
@@ -81,19 +81,34 @@
|
|
|
81
81
|
@update:model-value="
|
|
82
82
|
$event => {
|
|
83
83
|
data.isStaticItem = $event;
|
|
84
|
+
|
|
84
85
|
//$forceUpdate();
|
|
85
86
|
}
|
|
86
87
|
"
|
|
87
88
|
/>
|
|
88
89
|
</FormItem>
|
|
89
90
|
</Col>
|
|
90
|
-
<Col
|
|
91
|
-
|
|
91
|
+
<Col
|
|
92
|
+
v-bind="grid8"
|
|
93
|
+
v-if="
|
|
94
|
+
(data.controlType == 'Select' ||
|
|
95
|
+
data.controlType == 'SelectWithOther' ||
|
|
96
|
+
data.controlType == 'ComboSelect' ||
|
|
97
|
+
data.controlType == 'MultiSelect' ||
|
|
98
|
+
data.controlType == 'Radio' ||
|
|
99
|
+
data.controlType == 'CheckGroup') &&
|
|
100
|
+
!data.isStaticItem
|
|
101
|
+
"
|
|
102
|
+
>
|
|
103
|
+
<FormItem label="字典选项" key="isDictItem" prop="isDictItem">
|
|
92
104
|
<Switch
|
|
93
|
-
:model-value="!!data.
|
|
105
|
+
:model-value="!!data.isDictItem"
|
|
94
106
|
@update:model-value="
|
|
95
107
|
$event => {
|
|
96
|
-
data.
|
|
108
|
+
data.isDictItem = $event;
|
|
109
|
+
if (data.isDictItem) {
|
|
110
|
+
data.source = 'Dict';
|
|
111
|
+
}
|
|
97
112
|
//$forceUpdate();
|
|
98
113
|
}
|
|
99
114
|
"
|
|
@@ -127,6 +142,7 @@
|
|
|
127
142
|
source="EntitySelect"
|
|
128
143
|
source-data-code="name"
|
|
129
144
|
source-display-code="name"
|
|
145
|
+
:readonly="data.isDictItem"
|
|
130
146
|
@on-change="sourceChange"
|
|
131
147
|
></dialog-select>
|
|
132
148
|
</FormItem>
|
|
@@ -165,11 +181,29 @@
|
|
|
165
181
|
</Input>
|
|
166
182
|
</FormItem>
|
|
167
183
|
</Col>
|
|
168
|
-
<Col v-bind="grid16" v-if="data.source && needDataSource && data.controlType != 'Table'">
|
|
184
|
+
<Col v-bind="grid16" v-if="data.source && needDataSource && !data.isDictItem && data.controlType != 'Table'">
|
|
169
185
|
<FormItem label="参数" key="param" prop="param">
|
|
170
186
|
<Input type="text" @click="paramOpen" :readonly="true" v-model="data.param" maxlength="200" />
|
|
171
187
|
</FormItem>
|
|
172
188
|
</Col>
|
|
189
|
+
<Col v-bind="grid8" v-if="data.source && needDataSource && data.isDictItem && data.controlType != 'Table'">
|
|
190
|
+
<FormItem label="字典类别" key="dictTypeCode" prop="dictTypeCode">
|
|
191
|
+
<dialog-select v-model="data.dictTypeCode" source="DictTypeSelect" source-data-code="code" source-display-code="code" @on-change="dictTypeChange()"></dialog-select>
|
|
192
|
+
</FormItem>
|
|
193
|
+
</Col>
|
|
194
|
+
<Col v-bind="grid8" v-if="data.controlType == 'Select' || data.controlType == 'SelectWithOther' || data.controlType == 'ComboSelect'">
|
|
195
|
+
<FormItem label="默认第一项" key="isDefaultFirst" prop="isDefaultFirst">
|
|
196
|
+
<Switch
|
|
197
|
+
:model-value="!!data.isDefaultFirst"
|
|
198
|
+
@update:model-value="
|
|
199
|
+
$event => {
|
|
200
|
+
data.isDefaultFirst = $event;
|
|
201
|
+
//$forceUpdate();
|
|
202
|
+
}
|
|
203
|
+
"
|
|
204
|
+
/>
|
|
205
|
+
</FormItem>
|
|
206
|
+
</Col>
|
|
173
207
|
<Col v-bind="grid8" v-if="data.controlType == 'Hyperlink'">
|
|
174
208
|
<FormItem label="链接地址" key="hyperlink" prop="hyperlink">
|
|
175
209
|
<Input type="text" v-model="data.hyperlink" maxlength="200" />
|
|
@@ -400,6 +434,11 @@
|
|
|
400
434
|
<Input type="number" style="width: 100px" number v-model="data.tabIndex" />
|
|
401
435
|
</FormItem>
|
|
402
436
|
</Col>
|
|
437
|
+
<Col v-bind="grid24" v-if="viewType == 'FormView'">
|
|
438
|
+
<FormItem label="文字提示" key="tooltip" prop="tooltip">
|
|
439
|
+
<Input type="text" v-model="data.tooltip" maxlength="100" />
|
|
440
|
+
</FormItem>
|
|
441
|
+
</Col>
|
|
403
442
|
<Col v-bind="grid24">
|
|
404
443
|
<FormItem label="计算表达式" key="calculate" prop="calculate">
|
|
405
444
|
<Input type="text" v-model="data.calculate" maxlength="500" />
|
|
@@ -619,6 +658,10 @@
|
|
|
619
658
|
this.controlTypeBefore = this.data.controlType;
|
|
620
659
|
this.index = index;
|
|
621
660
|
this.columns = columns;
|
|
661
|
+
|
|
662
|
+
if (this.data.isDictItem && this.data.param) {
|
|
663
|
+
this.data.dictTypeCode = JSON.parse(this.data.param)['type.code'].replace('[', '').replace(']', '');
|
|
664
|
+
}
|
|
622
665
|
},
|
|
623
666
|
// 关闭
|
|
624
667
|
close() {
|
|
@@ -867,6 +910,13 @@
|
|
|
867
910
|
}
|
|
868
911
|
this.data[jsonKey] = JSON.stringify(setting);
|
|
869
912
|
}
|
|
913
|
+
},
|
|
914
|
+
// 字典类别变化
|
|
915
|
+
dictTypeChange() {
|
|
916
|
+
this.data.param = JSON.stringify({
|
|
917
|
+
'type.code': '[' + this.data.dictTypeCode + ']',
|
|
918
|
+
isDisabled: '[false]'
|
|
919
|
+
});
|
|
870
920
|
}
|
|
871
921
|
}
|
|
872
922
|
};
|
|
@@ -79,6 +79,33 @@
|
|
|
79
79
|
/>
|
|
80
80
|
</FormItem>
|
|
81
81
|
</Col>
|
|
82
|
+
<Col
|
|
83
|
+
v-bind="grid8"
|
|
84
|
+
v-if="
|
|
85
|
+
(data.controlType == 'Select' ||
|
|
86
|
+
data.controlType == 'SelectWithOther' ||
|
|
87
|
+
data.controlType == 'ComboSelect' ||
|
|
88
|
+
data.controlType == 'MultiSelect' ||
|
|
89
|
+
data.controlType == 'Radio' ||
|
|
90
|
+
data.controlType == 'CheckGroup') &&
|
|
91
|
+
!data.isStaticItem
|
|
92
|
+
"
|
|
93
|
+
>
|
|
94
|
+
<FormItem label="字典选项" key="isDictItem" prop="isDictItem">
|
|
95
|
+
<Switch
|
|
96
|
+
:model-value="!!data.isDictItem"
|
|
97
|
+
@update:model-value="
|
|
98
|
+
$event => {
|
|
99
|
+
data.isDictItem = $event;
|
|
100
|
+
if (data.isDictItem) {
|
|
101
|
+
data.source = 'Dict';
|
|
102
|
+
}
|
|
103
|
+
//$forceUpdate();
|
|
104
|
+
}
|
|
105
|
+
"
|
|
106
|
+
/>
|
|
107
|
+
</FormItem>
|
|
108
|
+
</Col>
|
|
82
109
|
<Col
|
|
83
110
|
v-bind="grid24"
|
|
84
111
|
v-if="
|
|
@@ -103,6 +130,7 @@
|
|
|
103
130
|
source="EntitySelect"
|
|
104
131
|
source-data-code="name"
|
|
105
132
|
source-display-code="name"
|
|
133
|
+
:readonly="data.isDictItem"
|
|
106
134
|
@on-change="sourceChange"
|
|
107
135
|
></dialog-select>
|
|
108
136
|
</FormItem>
|
|
@@ -138,11 +166,29 @@
|
|
|
138
166
|
</Input>
|
|
139
167
|
</FormItem>
|
|
140
168
|
</Col>
|
|
141
|
-
<Col v-bind="grid16" v-if="data.source && needDataSource">
|
|
169
|
+
<Col v-bind="grid16" v-if="data.source && needDataSource && !data.isDictItem">
|
|
142
170
|
<FormItem label="参数" key="param" prop="param">
|
|
143
171
|
<Input type="text" @click="paramOpen" :readonly="true" v-model="data.param" maxlength="200" />
|
|
144
172
|
</FormItem>
|
|
145
173
|
</Col>
|
|
174
|
+
<Col v-bind="grid8" v-if="data.source && needDataSource && data.isDictItem && data.controlType != 'Table'">
|
|
175
|
+
<FormItem label="字典类别" key="dictTypeCode" prop="dictTypeCode">
|
|
176
|
+
<dialog-select v-model="data.dictTypeCode" source="DictTypeSelect" source-data-code="code" source-display-code="code" @on-change="dictTypeChange()"></dialog-select>
|
|
177
|
+
</FormItem>
|
|
178
|
+
</Col>
|
|
179
|
+
<Col v-bind="grid8" v-if="data.controlType == 'Select' || data.controlType == 'SelectWithOther' || data.controlType == 'ComboSelect'">
|
|
180
|
+
<FormItem label="默认第一项" key="isDefaultFirst" prop="isDefaultFirst">
|
|
181
|
+
<Switch
|
|
182
|
+
:model-value="!!data.isDefaultFirst"
|
|
183
|
+
@update:model-value="
|
|
184
|
+
$event => {
|
|
185
|
+
data.isDefaultFirst = $event;
|
|
186
|
+
//$forceUpdate();
|
|
187
|
+
}
|
|
188
|
+
"
|
|
189
|
+
/>
|
|
190
|
+
</FormItem>
|
|
191
|
+
</Col>
|
|
146
192
|
<Col v-bind="grid8">
|
|
147
193
|
<FormItem label="是否显示" key="isShow" prop="isShow">
|
|
148
194
|
<Switch
|
|
@@ -429,6 +475,10 @@
|
|
|
429
475
|
|
|
430
476
|
this.callback = callback;
|
|
431
477
|
this.opened = true;
|
|
478
|
+
|
|
479
|
+
if (this.data.isDictItem && this.data.param) {
|
|
480
|
+
this.data.dictTypeCode = JSON.parse(this.data.param)['type.code'].replace('[', '').replace(']', '');
|
|
481
|
+
}
|
|
432
482
|
},
|
|
433
483
|
// 关闭
|
|
434
484
|
close() {
|
|
@@ -644,6 +694,13 @@
|
|
|
644
694
|
setTimeout(() => {
|
|
645
695
|
//this.$forceUpdate();
|
|
646
696
|
});
|
|
697
|
+
},
|
|
698
|
+
// 字典类别变化
|
|
699
|
+
dictTypeChange() {
|
|
700
|
+
this.data.param = JSON.stringify({
|
|
701
|
+
'type.code': '[' + this.data.dictTypeCode + ']',
|
|
702
|
+
isDisabled: '[false]'
|
|
703
|
+
});
|
|
647
704
|
}
|
|
648
705
|
}
|
|
649
706
|
};
|
|
@@ -89,8 +89,10 @@
|
|
|
89
89
|
<slot name="column" :form="this" :data="data" :column="column" :code="column.code"></slot>
|
|
90
90
|
</template>
|
|
91
91
|
<template v-else-if="column.controlType === 'Label'">
|
|
92
|
-
<div class="label" :title="compareData == null ?
|
|
93
|
-
<
|
|
92
|
+
<div class="label" :title="compareData == null ? null : showData(compareData, column)">
|
|
93
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
94
|
+
<div :class="{ error: compareData != null && parseData(data, column.code) != parseData(compareData, column.code) }" v-html="showData(data, column)"></div>
|
|
95
|
+
</Tooltip>
|
|
94
96
|
</div>
|
|
95
97
|
</template>
|
|
96
98
|
<template v-if="column.controlType === 'Hyperlink'">
|
|
@@ -99,89 +101,104 @@
|
|
|
99
101
|
</a>
|
|
100
102
|
</template>
|
|
101
103
|
<template v-else-if="column.controlType === 'TextInput'">
|
|
102
|
-
<
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
105
|
+
<Input
|
|
106
|
+
type="text"
|
|
107
|
+
:model-value="parseData(data, column.code)"
|
|
108
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
109
|
+
:readonly="readonly || column.isReadonly"
|
|
110
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
111
|
+
:maxlength="column.maxLength"
|
|
112
|
+
:placeholder="column.description"
|
|
113
|
+
@on-change="onDataChange(column)"
|
|
114
|
+
@on-blur="onBlur(column)"
|
|
115
|
+
/>
|
|
116
|
+
</Tooltip>
|
|
113
117
|
</template>
|
|
114
118
|
<template v-else-if="column.controlType === 'NumberInput'">
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
119
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
120
|
+
<Input
|
|
121
|
+
type="number"
|
|
122
|
+
number
|
|
123
|
+
:model-value="parseData(data, column.code)"
|
|
124
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
125
|
+
:readonly="readonly || column.isReadonly"
|
|
126
|
+
:style="{ width: column.controlWidth == null ? '100px' : column.controlWidth + 'px' }"
|
|
127
|
+
:placeholder="column.description"
|
|
128
|
+
:max="column.maxValue"
|
|
129
|
+
:min="column.minValue"
|
|
130
|
+
@on-change="onDataChange(column)"
|
|
131
|
+
@on-blur="onBlur(column)"
|
|
132
|
+
/>
|
|
133
|
+
</Tooltip>
|
|
128
134
|
</template>
|
|
129
135
|
<template v-else-if="column.controlType === 'Select'">
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
136
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
137
|
+
<Select
|
|
138
|
+
:model-value="parseData(data, column.code)"
|
|
139
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
140
|
+
:disabled="readonly || column.isReadonly"
|
|
141
|
+
:clearable="true"
|
|
142
|
+
:style="{
|
|
143
|
+
width: column.controlWidth == null ? null : column.controlWidth + 'px',
|
|
144
|
+
'min-width': column.controlWidth == null ? null : column.controlWidth + 'px'
|
|
145
|
+
}"
|
|
146
|
+
:placeholder="column.description"
|
|
147
|
+
:transfer="true"
|
|
148
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
149
|
+
>
|
|
150
|
+
<Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
|
151
|
+
</Select>
|
|
152
|
+
</Tooltip>
|
|
142
153
|
</template>
|
|
143
154
|
<template v-else-if="column.controlType === 'MultiSelect'">
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
156
|
+
<Select
|
|
157
|
+
:model-value="parseArrayData(data, column.code)"
|
|
158
|
+
@update:model-value="$event => setArrayData(data, column.code, $event)"
|
|
159
|
+
:disabled="readonly || column.isReadonly"
|
|
160
|
+
:multiple="true"
|
|
161
|
+
:clearable="true"
|
|
162
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
163
|
+
:placeholder="column.description"
|
|
164
|
+
:transfer="true"
|
|
165
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
166
|
+
>
|
|
167
|
+
<Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
|
168
|
+
</Select>
|
|
169
|
+
</Tooltip>
|
|
157
170
|
</template>
|
|
158
171
|
<template v-else-if="column.controlType === 'TreeSelect'">
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
172
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
173
|
+
<TreeSelect
|
|
174
|
+
:model-value="parseTreeData(data, column.code)"
|
|
175
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
176
|
+
:data="getDataSource(data, column)"
|
|
177
|
+
:disabled="readonly || column.isReadonly"
|
|
178
|
+
:clearable="true"
|
|
179
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
180
|
+
:placeholder="column.description"
|
|
181
|
+
:transfer="true"
|
|
182
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
183
|
+
></TreeSelect>
|
|
184
|
+
</Tooltip>
|
|
170
185
|
</template>
|
|
171
186
|
<template v-else-if="column.controlType === 'MultiTreeSelect'">
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
187
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
188
|
+
<TreeSelect
|
|
189
|
+
:model-value="parseArrayData(data, column.code)"
|
|
190
|
+
@update:model-value="$event => setArrayData(data, column.code, $event)"
|
|
191
|
+
:data="getDataSource(data, column)"
|
|
192
|
+
:disabled="readonly || column.isReadonly"
|
|
193
|
+
:multiple="true"
|
|
194
|
+
:show-checkbox="true"
|
|
195
|
+
:clearable="true"
|
|
196
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
197
|
+
:placeholder="column.description"
|
|
198
|
+
:transfer="true"
|
|
199
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
200
|
+
></TreeSelect>
|
|
201
|
+
</Tooltip>
|
|
185
202
|
</template>
|
|
186
203
|
<!-- <template v-else-if="column.controlType === 'AutoComplete'">
|
|
187
204
|
<AutoComplete :value="parseData(data, column.code) ? parseData(data, column.code) : ''"
|
|
@@ -200,169 +217,203 @@
|
|
|
200
217
|
</AutoComplete>
|
|
201
218
|
</template> -->
|
|
202
219
|
<template v-else-if="column.controlType === 'ComboSelect'">
|
|
203
|
-
<
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
220
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
221
|
+
<Select
|
|
222
|
+
:model-value="parseData(data, column.code)"
|
|
223
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
224
|
+
:disabled="readonly || column.isReadonly"
|
|
225
|
+
:clearable="true"
|
|
226
|
+
filterable
|
|
227
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
228
|
+
:placeholder="column.description"
|
|
229
|
+
:transfer="true"
|
|
230
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
231
|
+
>
|
|
232
|
+
<Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
|
233
|
+
</Select>
|
|
234
|
+
</Tooltip>
|
|
216
235
|
</template>
|
|
217
236
|
<template v-else-if="column.controlType === 'DialogSelect'">
|
|
218
|
-
<
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
237
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
238
|
+
<dialog-select
|
|
239
|
+
:model-value="parseData(data, column.code)"
|
|
240
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
241
|
+
:readonly="readonly || column.isReadonly"
|
|
242
|
+
:source="column.source"
|
|
243
|
+
:source-data-code="column.sourceDataCode"
|
|
244
|
+
:source-display-code="column.sourceDisplayCode"
|
|
245
|
+
:param="getParam(data, column)"
|
|
246
|
+
:controlWidth="column.controlWidth"
|
|
247
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
248
|
+
></dialog-select>
|
|
249
|
+
</Tooltip>
|
|
229
250
|
</template>
|
|
230
251
|
<template v-else-if="column.controlType === 'MultiDialogSelect'">
|
|
231
|
-
<
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
252
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
253
|
+
<dialog-select
|
|
254
|
+
:model-value="parseData(data, column.code)"
|
|
255
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
256
|
+
:multi="true"
|
|
257
|
+
:readonly="readonly || column.isReadonly"
|
|
258
|
+
:source="column.source"
|
|
259
|
+
:source-data-code="column.sourceDataCode"
|
|
260
|
+
:source-display-code="column.sourceDisplayCode"
|
|
261
|
+
:param="getParam(data, column)"
|
|
262
|
+
:controlWidth="column.controlWidth"
|
|
263
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
264
|
+
></dialog-select>
|
|
265
|
+
</Tooltip>
|
|
243
266
|
</template>
|
|
244
267
|
<template v-else-if="column.controlType === 'SelectWithOther'">
|
|
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
|
-
|
|
268
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
269
|
+
<Select
|
|
270
|
+
:model-value="parseDataWithOther(data, column)"
|
|
271
|
+
@update:model-value="$event => setDataWithOther(data, column.code, $event)"
|
|
272
|
+
:disabled="readonly || column.isReadonly"
|
|
273
|
+
:clearable="true"
|
|
274
|
+
:style="{ width: column.controlWidth == null ? '40%' : column.controlWidth + 'px' }"
|
|
275
|
+
:placeholder="column.description"
|
|
276
|
+
:transfer="true"
|
|
277
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
278
|
+
>
|
|
279
|
+
<Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
|
280
|
+
<Option key="__Other" value="__Other">{{ !!(column.pattern || '').trim() ? column.pattern : $t('Front_Label_Others') }}</Option>
|
|
281
|
+
</Select>
|
|
282
|
+
<Input
|
|
283
|
+
type="text"
|
|
284
|
+
v-show="parseDataWithOther(data, column) == '__Other'"
|
|
285
|
+
:model-value="parseData(data, column.code)"
|
|
286
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
287
|
+
:readonly="readonly || column.isReadonly"
|
|
288
|
+
:style="{ width: column.controlWidth == null ? '40%' : column.controlWidth + 'px' }"
|
|
289
|
+
style="margin-left: 4px"
|
|
290
|
+
:maxlength="column.maxLength"
|
|
291
|
+
:placeholder="column.description"
|
|
292
|
+
@on-change="selected => onDataChange(column, selected)"
|
|
293
|
+
@on-blur="onBlur(column)"
|
|
294
|
+
/>
|
|
295
|
+
</Tooltip>
|
|
271
296
|
</template>
|
|
272
297
|
<template v-else-if="column.controlType === 'Date' || column.controlType === 'DateTime' || column.controlType === 'Year' || column.controlType === 'Month'">
|
|
273
|
-
<
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
298
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
299
|
+
<DatePicker
|
|
300
|
+
:type="column.controlType.toLowerCase()"
|
|
301
|
+
:model-value="parseDateTimeData(data, column.code)"
|
|
302
|
+
:readonly="readonly || column.isReadonly"
|
|
303
|
+
:placeholder="column.description"
|
|
304
|
+
:transfer="true"
|
|
305
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
306
|
+
@on-change="
|
|
307
|
+
time => {
|
|
308
|
+
setData(data, column.code, time);
|
|
309
|
+
onDataChange(column);
|
|
310
|
+
}
|
|
311
|
+
"
|
|
312
|
+
></DatePicker>
|
|
313
|
+
</Tooltip>
|
|
287
314
|
</template>
|
|
288
315
|
<template v-else-if="column.controlType === 'DateRange'">
|
|
289
|
-
<
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
316
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
317
|
+
<DatePicker
|
|
318
|
+
:type="column.controlType.toLowerCase()"
|
|
319
|
+
:model-value="parseDateRangeData(data, column.code)"
|
|
320
|
+
@update:model-value="$event => setArrayData(data, column.code, $event)"
|
|
321
|
+
:readonly="readonly || column.isReadonly"
|
|
322
|
+
:placeholder="column.description"
|
|
323
|
+
:transfer="true"
|
|
324
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
325
|
+
@on-change="onDataChange(column)"
|
|
326
|
+
></DatePicker>
|
|
327
|
+
</Tooltip>
|
|
299
328
|
</template>
|
|
300
329
|
<template v-else-if="column.controlType === 'Time'">
|
|
301
|
-
<
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
330
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
331
|
+
<TimePicker
|
|
332
|
+
type="time"
|
|
333
|
+
:model-value="parseData(data, column.code)"
|
|
334
|
+
:readonly="readonly || column.isReadonly"
|
|
335
|
+
:placeholder="column.description"
|
|
336
|
+
:transfer="true"
|
|
337
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
338
|
+
@on-change="
|
|
339
|
+
time => {
|
|
340
|
+
setData(data, column.code, time);
|
|
341
|
+
onDataChange(column);
|
|
342
|
+
}
|
|
343
|
+
"
|
|
344
|
+
></TimePicker>
|
|
345
|
+
</Tooltip>
|
|
315
346
|
</template>
|
|
316
347
|
<template v-else-if="column.controlType === 'Check'">
|
|
317
|
-
<
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
348
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
349
|
+
<Checkbox
|
|
350
|
+
:model-value="!!parseData(data, column.code)"
|
|
351
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
352
|
+
:disabled="readonly || column.isReadonly"
|
|
353
|
+
size="large"
|
|
354
|
+
@on-change="onDataChange(column)"
|
|
355
|
+
/>
|
|
356
|
+
</Tooltip>
|
|
324
357
|
</template>
|
|
325
358
|
<template v-else-if="column.controlType === 'Switch'">
|
|
326
|
-
<
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
359
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
360
|
+
<Switch
|
|
361
|
+
:model-value="!!parseData(data, column.code)"
|
|
362
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
363
|
+
:disabled="readonly || column.isReadonly"
|
|
364
|
+
@on-change="onDataChange(column)"
|
|
365
|
+
/>
|
|
366
|
+
</Tooltip>
|
|
332
367
|
</template>
|
|
333
368
|
<template v-else-if="column.controlType === 'Radio'">
|
|
334
|
-
<
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
<
|
|
341
|
-
|
|
342
|
-
|
|
369
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
370
|
+
<RadioGroup
|
|
371
|
+
:model-value="parseData(data, column.code)"
|
|
372
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
373
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
374
|
+
>
|
|
375
|
+
<Radio v-for="item in getDataSource(data, column)" :key="item.id" :label="item.id" :disabled="readonly || column.isReadonly">
|
|
376
|
+
<span>{{ item.name }}</span>
|
|
377
|
+
</Radio>
|
|
378
|
+
</RadioGroup>
|
|
379
|
+
</Tooltip>
|
|
343
380
|
</template>
|
|
344
381
|
<template v-else-if="column.controlType === 'CheckGroup'">
|
|
345
|
-
<
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
<
|
|
352
|
-
|
|
353
|
-
|
|
382
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
383
|
+
<!-- <CheckboxGroup
|
|
384
|
+
:model-value="parseArrayData(data, column.code)"
|
|
385
|
+
@update:model-value="$event => setArrayData(data, column.code, $event)"
|
|
386
|
+
@on-change="selected => onSelectDataChange(column, selected)"
|
|
387
|
+
>
|
|
388
|
+
<Checkbox v-for="item in getDataSource(data, column)" :key="item.id" :label="item.name" :disabled="readonly || column.isReadonly">
|
|
389
|
+
<span>{{ item.name }}</span>
|
|
390
|
+
</Checkbox>
|
|
391
|
+
</CheckboxGroup> -->
|
|
392
|
+
|
|
393
|
+
<check-group
|
|
394
|
+
:model-value="parseData(data, column.code)"
|
|
395
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
396
|
+
:dataSource="getDataSource(data, column)"
|
|
397
|
+
value-key="id"
|
|
398
|
+
label-key="name"
|
|
399
|
+
:readonly="readonly || column.isReadonly"
|
|
400
|
+
@on-change="() => onSelectDataChange(column)"
|
|
401
|
+
></check-group>
|
|
402
|
+
</Tooltip>
|
|
354
403
|
</template>
|
|
355
404
|
<template v-else-if="column.controlType === 'TextArea'">
|
|
356
|
-
<
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
405
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
406
|
+
<Input
|
|
407
|
+
type="textarea"
|
|
408
|
+
:model-value="parseData(data, column.code)"
|
|
409
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
410
|
+
:readonly="readonly || column.isReadonly"
|
|
411
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
412
|
+
:rows="column.controlHeight / 20"
|
|
413
|
+
:maxlength="column.maxLength"
|
|
414
|
+
:placeholder="column.description"
|
|
415
|
+
/>
|
|
416
|
+
</Tooltip>
|
|
366
417
|
</template>
|
|
367
418
|
<template v-else-if="column.controlType === 'RichEditor'">
|
|
368
419
|
<rich-editor
|
|
@@ -407,24 +458,26 @@
|
|
|
407
458
|
/>
|
|
408
459
|
</template>
|
|
409
460
|
<template v-else-if="column.controlType === 'Slider'">
|
|
410
|
-
<
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
461
|
+
<Tooltip :disabled="!column.tooltip" :content="column.tooltip" max-width="200">
|
|
462
|
+
<Slider
|
|
463
|
+
v-if="!readonly && !column.isReadonly"
|
|
464
|
+
:model-value="parseData(data, column.code)"
|
|
465
|
+
@update:model-value="$event => setData(data, column.code, $event)"
|
|
466
|
+
show-input
|
|
467
|
+
:style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
|
|
468
|
+
:max="column.maxValue"
|
|
469
|
+
:min="column.minValue"
|
|
470
|
+
/>
|
|
471
|
+
<Input
|
|
472
|
+
v-if="readonly || column.isReadonly"
|
|
473
|
+
type="number"
|
|
474
|
+
number
|
|
475
|
+
readonly
|
|
476
|
+
:model-value="parseData(data, column.code)"
|
|
477
|
+
:style="{ width: column.controlWidth == null ? '100px' : column.controlWidth + 'px' }"
|
|
478
|
+
:placeholder="column.description"
|
|
479
|
+
/>
|
|
480
|
+
</Tooltip>
|
|
428
481
|
</template>
|
|
429
482
|
</FormItem>
|
|
430
483
|
</Col>
|
|
@@ -452,6 +505,7 @@
|
|
|
452
505
|
import richEditor from '../richEditor/index.vue';
|
|
453
506
|
import uploadAttachment from '../upload/upload-attachment.vue';
|
|
454
507
|
import uploadImage from '../upload/upload-image.vue';
|
|
508
|
+
import CheckGroup from '../input/check-group.vue';
|
|
455
509
|
import dateFormat from 'date-fns/format';
|
|
456
510
|
|
|
457
511
|
/**
|
|
@@ -459,7 +513,7 @@
|
|
|
459
513
|
*/
|
|
460
514
|
export default {
|
|
461
515
|
mixins: [mixin, mixinPage],
|
|
462
|
-
components: { richEditor, uploadAttachment, uploadImage },
|
|
516
|
+
components: { richEditor, uploadAttachment, uploadImage, CheckGroup },
|
|
463
517
|
data() {
|
|
464
518
|
return {
|
|
465
519
|
formView: {},
|
|
@@ -1137,6 +1191,8 @@
|
|
|
1137
1191
|
// },
|
|
1138
1192
|
// 选项变化事件
|
|
1139
1193
|
onSelectDataChange(sender, selected) {
|
|
1194
|
+
console.log('onSelectDataChange', sender, selected);
|
|
1195
|
+
|
|
1140
1196
|
let code;
|
|
1141
1197
|
if (sender.code.endsWith('ID')) {
|
|
1142
1198
|
code = sender.code.substr(0, sender.code.length - 2);
|