@ebiz/designer-components 0.1.32 → 0.1.33
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/dist/designer-components.css +1 -1
- package/dist/index.mjs +4532 -4485
- package/package.json +1 -1
- package/src/components/EbizDiv.vue +9 -8
- package/src/components/EbizEmployeeSelector.vue +111 -95
- package/src/components/senior/EbizSForm/item.vue +103 -105
- package/src/views/EbizEmployeeSelector.vue +7 -5
package/package.json
CHANGED
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import { watch, computed } from 'vue';
|
|
4
3
|
const props = defineProps({
|
|
5
|
-
|
|
4
|
+
permissionKey: {
|
|
6
5
|
type: String,
|
|
7
6
|
required: true,
|
|
8
7
|
default: ''
|
|
9
8
|
}
|
|
10
9
|
});
|
|
11
10
|
|
|
12
|
-
const isShow =
|
|
11
|
+
const isShow = computed(() => {
|
|
13
12
|
|
|
14
|
-
const checkPermission = () => {
|
|
15
13
|
try {
|
|
16
14
|
const permissionKeysStr = localStorage.getItem('permissionKeys') || '[]';
|
|
17
15
|
const permissionKeys = JSON.parse(permissionKeysStr);
|
|
18
16
|
const hasPermission = permissionKeys.includes(props.key);
|
|
19
|
-
|
|
17
|
+
return hasPermission;
|
|
20
18
|
} catch (error) {
|
|
21
|
-
|
|
22
|
-
isShow.value = false;
|
|
19
|
+
return false;
|
|
23
20
|
}
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
const checkPermission = () => {
|
|
24
|
+
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
watch(() => props.key, checkPermission, { immediate: true });
|
|
@@ -112,25 +112,55 @@
|
|
|
112
112
|
@click="clearSearch">清除搜索</t-button>
|
|
113
113
|
</div>
|
|
114
114
|
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
115
|
+
<t-checkbox-group v-if="!single" v-model="tempSelectedEmployeeIds" style="width: 100%;"
|
|
116
|
+
@change="handleCheckChange">
|
|
117
|
+
<div class="employee-list">
|
|
118
|
+
<div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item"
|
|
119
|
+
style="cursor: pointer;">
|
|
120
|
+
<t-checkbox :key="item.id" :value="item.id">
|
|
121
|
+
<div style="display: flex; align-items: center; gap: 10px; flex: 1;">
|
|
122
|
+
<div class="employee-avatar">
|
|
123
|
+
<t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
|
|
124
|
+
<t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="employee-info">
|
|
127
|
+
<div class="employee-code">{{ item.no }} - </div>
|
|
128
|
+
<div class="employee-name">{{ item.name }}</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</t-checkbox>
|
|
129
132
|
|
|
133
|
+
</div>
|
|
130
134
|
</div>
|
|
131
|
-
|
|
132
|
-
|
|
135
|
+
|
|
136
|
+
</t-checkbox-group>
|
|
137
|
+
|
|
138
|
+
<t-radio-group v-else style="width: 100%;" v-model="tempSelectedEmployeeId" @change="handleCheckChange">
|
|
139
|
+
<div class="employee-list">
|
|
140
|
+
<div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item"
|
|
141
|
+
style="cursor: pointer;">
|
|
142
|
+
<t-radio :value="item.id">
|
|
143
|
+
<div style="display: flex; align-items: center; gap: 10px; flex: 1;">
|
|
144
|
+
<div class="employee-avatar">
|
|
145
|
+
<t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
|
|
146
|
+
<t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="employee-info">
|
|
149
|
+
<div class="employee-code">{{ item.no }} - </div>
|
|
150
|
+
<div class="employee-name">{{ item.name }}</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</t-radio>
|
|
154
|
+
|
|
155
|
+
</div>
|
|
156
|
+
|
|
133
157
|
</div>
|
|
158
|
+
|
|
159
|
+
</t-radio-group>
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
<div v-if="filteredEmployeeList.length === 0" class="empty-data">
|
|
163
|
+
<t-empty />
|
|
134
164
|
</div>
|
|
135
165
|
</div>
|
|
136
166
|
</div>
|
|
@@ -141,7 +171,9 @@
|
|
|
141
171
|
<template #footer>
|
|
142
172
|
<div class="dialog-footer">
|
|
143
173
|
<div class="selected-preview">
|
|
144
|
-
|
|
174
|
+
<div class="selected-people-count" v-if="!single">
|
|
175
|
+
已选: {{ tempSelectedEmployees.length }} 人
|
|
176
|
+
</div>
|
|
145
177
|
<div class="selected-people-list" v-if="tempSelectedEmployees.length > 0">
|
|
146
178
|
<div v-for="(item, index) in tempSelectedEmployees" :key="index" class="selected-people-item">
|
|
147
179
|
<t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
|
|
@@ -150,7 +182,7 @@
|
|
|
150
182
|
<span class="item-code">{{ item.no }}</span>
|
|
151
183
|
<span class="item-name">{{ item.name }}</span>
|
|
152
184
|
</span>
|
|
153
|
-
<t-icon name="close" class="item-remove" @click="removeSelectedEmployee(item)"></t-icon>
|
|
185
|
+
<t-icon v-if="!single" name="close" class="item-remove" @click="removeSelectedEmployee(item)"></t-icon>
|
|
154
186
|
</div>
|
|
155
187
|
</div>
|
|
156
188
|
</div>
|
|
@@ -177,10 +209,13 @@ import {
|
|
|
177
209
|
Tree as TTree,
|
|
178
210
|
Avatar as TAvatar,
|
|
179
211
|
Checkbox as TCheckbox,
|
|
212
|
+
CheckboxGroup as TCheckboxGroup,
|
|
180
213
|
Empty as TEmpty,
|
|
181
214
|
List as TList,
|
|
182
215
|
ListItem as TListItem,
|
|
183
|
-
MessagePlugin
|
|
216
|
+
MessagePlugin,
|
|
217
|
+
Radio as TRadio,
|
|
218
|
+
RadioGroup as TRadioGroup
|
|
184
219
|
} from 'tdesign-vue-next';
|
|
185
220
|
import dataService from '../apiService/simpleDataService';
|
|
186
221
|
|
|
@@ -238,6 +273,10 @@ const props = defineProps({
|
|
|
238
273
|
// 定义组件事件
|
|
239
274
|
const emit = defineEmits(['update:modelValue', 'change', 'update:visible', 'confirm']);
|
|
240
275
|
const tempVisible = ref(false);
|
|
276
|
+
|
|
277
|
+
const tempSelectedEmployeeIds = ref([])
|
|
278
|
+
const tempSelectedEmployeeId = ref("")
|
|
279
|
+
|
|
241
280
|
// 内部状态变量
|
|
242
281
|
const dialogVisible = computed({
|
|
243
282
|
set(val) {
|
|
@@ -259,7 +298,7 @@ const selectedItems = ref([]);
|
|
|
259
298
|
// 对话框中临时保存的选中员工列表
|
|
260
299
|
const tempSelectedEmployees = ref([]);
|
|
261
300
|
// 是否查询子部门
|
|
262
|
-
const childDeptEnable = ref(
|
|
301
|
+
const childDeptEnable = ref(true);
|
|
263
302
|
|
|
264
303
|
// 数据源
|
|
265
304
|
const organizationData = ref([]);
|
|
@@ -308,12 +347,6 @@ const computedModelValue = computed({
|
|
|
308
347
|
value.forEach((val) => {
|
|
309
348
|
return Number(val);
|
|
310
349
|
})
|
|
311
|
-
|
|
312
|
-
employeeList.value.forEach(emp => {
|
|
313
|
-
if (!value.includes(Number(emp.id))) {
|
|
314
|
-
emp.checked = false;
|
|
315
|
-
}
|
|
316
|
-
});
|
|
317
350
|
return value;
|
|
318
351
|
}
|
|
319
352
|
});
|
|
@@ -500,6 +533,9 @@ const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) =>
|
|
|
500
533
|
}));
|
|
501
534
|
|
|
502
535
|
employeeList.value = employees;
|
|
536
|
+
|
|
537
|
+
handleCheckChange()
|
|
538
|
+
|
|
503
539
|
updateSelectAllStatus();
|
|
504
540
|
} catch (error) {
|
|
505
541
|
MessagePlugin.error({
|
|
@@ -569,56 +605,60 @@ const selectDepartment = (department) => {
|
|
|
569
605
|
// 处理全选
|
|
570
606
|
const handleSelectAll = (checked) => {
|
|
571
607
|
employeeList.value.forEach(item => {
|
|
572
|
-
item.checked = checked;
|
|
573
608
|
|
|
574
609
|
// 如果选中,确保添加到临时选中列表
|
|
575
|
-
if (
|
|
610
|
+
if (!tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
|
|
576
611
|
tempSelectedEmployees.value.push(item);
|
|
612
|
+
tempSelectedEmployeeIds.value.push(item.id);
|
|
577
613
|
}
|
|
578
614
|
});
|
|
579
615
|
};
|
|
580
616
|
|
|
581
617
|
// 处理选中状态变更
|
|
582
|
-
const handleCheckChange = (
|
|
618
|
+
const handleCheckChange = () => {
|
|
619
|
+
console.log("tempSelectedEmployeeIds", tempSelectedEmployeeIds.value)
|
|
583
620
|
// 单选模式下,取消其他选中
|
|
621
|
+
const selectedEmployees = []
|
|
622
|
+
|
|
584
623
|
if (props.single) {
|
|
624
|
+
console.log("single", tempSelectedEmployeeId.value)
|
|
585
625
|
employeeList.value.forEach(emp => {
|
|
586
|
-
if (emp.id
|
|
587
|
-
emp
|
|
626
|
+
if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
|
|
627
|
+
selectedEmployees.push(emp)
|
|
588
628
|
}
|
|
589
629
|
});
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
tempSelectedEmployees.value.push(item);
|
|
597
|
-
} else if (!item.checked) {
|
|
598
|
-
// 如果取消选中,从临时选中列表中移除
|
|
599
|
-
const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
|
|
600
|
-
if (index !== -1) {
|
|
601
|
-
tempSelectedEmployees.value.splice(index, 1);
|
|
602
|
-
}
|
|
630
|
+
if (selectedEmployees.length === 0) {
|
|
631
|
+
selectedItems.value.forEach(emp => {
|
|
632
|
+
if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
|
|
633
|
+
selectedEmployees.push(emp)
|
|
634
|
+
}
|
|
635
|
+
});
|
|
603
636
|
}
|
|
604
|
-
}
|
|
605
637
|
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
638
|
+
} else {
|
|
639
|
+
const handled = [];
|
|
640
|
+
console.log("multi", tempSelectedEmployeeIds.value)
|
|
641
|
+
|
|
642
|
+
tempSelectedEmployees.value.forEach(emp => {
|
|
643
|
+
if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1) {
|
|
644
|
+
selectedEmployees.push(emp)
|
|
645
|
+
handled.push(emp.id)
|
|
614
646
|
}
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
647
|
+
});
|
|
648
|
+
employeeList.value.forEach(emp => {
|
|
649
|
+
if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
|
|
650
|
+
selectedEmployees.push(emp)
|
|
651
|
+
handled.push(emp.id)
|
|
652
|
+
}
|
|
653
|
+
});
|
|
654
|
+
selectedItems.value.forEach(emp => {
|
|
655
|
+
if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
|
|
656
|
+
selectedEmployees.push(emp)
|
|
657
|
+
handled.push(emp.id)
|
|
658
|
+
}
|
|
659
|
+
});
|
|
620
660
|
}
|
|
621
|
-
|
|
661
|
+
tempSelectedEmployees.value = selectedEmployees
|
|
622
662
|
updateSelectAllStatus();
|
|
623
663
|
};
|
|
624
664
|
|
|
@@ -638,18 +678,14 @@ const removeItem = (index, id) => {
|
|
|
638
678
|
|
|
639
679
|
// 从已选列表中移除员工
|
|
640
680
|
const removeSelectedEmployee = (employee) => {
|
|
641
|
-
// 将员工的checked状态设为false
|
|
642
|
-
const foundEmployee = employeeList.value.find(item => item.id === employee.id);
|
|
643
|
-
if (foundEmployee) {
|
|
644
|
-
foundEmployee.checked = false;
|
|
645
|
-
}
|
|
646
|
-
|
|
647
681
|
// 从临时选中列表中移除
|
|
648
|
-
const index =
|
|
682
|
+
const index = tempSelectedEmployeeIds.value.findIndex(id => employee.id === id);
|
|
649
683
|
if (index !== -1) {
|
|
650
|
-
|
|
684
|
+
tempSelectedEmployeeIds.value.splice(index, 1);
|
|
651
685
|
}
|
|
652
686
|
|
|
687
|
+
handleCheckChange()
|
|
688
|
+
|
|
653
689
|
// 更新全选状态
|
|
654
690
|
updateSelectAllStatus();
|
|
655
691
|
};
|
|
@@ -673,18 +709,21 @@ const initSelector = async () => {
|
|
|
673
709
|
// 显示对话框
|
|
674
710
|
const showDialog = () => {
|
|
675
711
|
// 初始化临时选中列表
|
|
676
|
-
if (
|
|
677
|
-
|
|
678
|
-
updateSelectStatus()
|
|
712
|
+
if (props.single) {
|
|
713
|
+
tempSelectedEmployeeId.value = props.modelValue || []
|
|
679
714
|
} else {
|
|
680
|
-
|
|
715
|
+
tempSelectedEmployeeIds.value = props.modelValue || []
|
|
681
716
|
}
|
|
682
717
|
|
|
683
718
|
// 初始化数据
|
|
684
719
|
if (props.visible == null) {
|
|
685
720
|
initSelector();
|
|
686
721
|
}
|
|
722
|
+
|
|
723
|
+
handleCheckChange()
|
|
724
|
+
|
|
687
725
|
dialogVisible.value = true;
|
|
726
|
+
|
|
688
727
|
};
|
|
689
728
|
|
|
690
729
|
// 确认选择
|
|
@@ -735,24 +774,6 @@ watch(() => props.visible, (val) => {
|
|
|
735
774
|
fetchOrganizationData()
|
|
736
775
|
}
|
|
737
776
|
}, { immediate: true })
|
|
738
|
-
// 监听选中员工变化,更新临时已选列表
|
|
739
|
-
watch(selectedEmployees, (newVal) => {
|
|
740
|
-
// 更新临时选中列表,保留之前不在当前列表中的已选员工
|
|
741
|
-
|
|
742
|
-
const currentIds = new Set(newVal.map(emp => emp.id));
|
|
743
|
-
|
|
744
|
-
// 移除tempSelectedEmployees中已经不再选中的员工
|
|
745
|
-
tempSelectedEmployees.value = tempSelectedEmployees.value.filter(emp =>
|
|
746
|
-
!currentIds.has(emp.id) || newVal.some(item => item.id === emp.id)
|
|
747
|
-
);
|
|
748
|
-
|
|
749
|
-
// 添加新选中的员工
|
|
750
|
-
newVal.forEach(emp => {
|
|
751
|
-
if (!tempSelectedEmployees.value.some(item => item.id === emp.id)) {
|
|
752
|
-
tempSelectedEmployees.value.push(emp);
|
|
753
|
-
}
|
|
754
|
-
});
|
|
755
|
-
}, { deep: true });
|
|
756
777
|
|
|
757
778
|
// 监听子部门查询开关变化
|
|
758
779
|
watch(childDeptEnable, () => {
|
|
@@ -822,12 +843,6 @@ const clearSearch = () => {
|
|
|
822
843
|
searchText.value = '';
|
|
823
844
|
if (currentActive.value && currentActive.value.length > 0) {
|
|
824
845
|
fetchEmployeesByNode(currentActive.value[0], activeTab.value);
|
|
825
|
-
} else {
|
|
826
|
-
// 如果没有选中节点,重置员工列表但保留选中状态
|
|
827
|
-
employeeList.value = employeeList.value.map(emp => ({
|
|
828
|
-
...emp,
|
|
829
|
-
checked: tempSelectedEmployees.value.some(item => item.id === emp.id)
|
|
830
|
-
}));
|
|
831
846
|
}
|
|
832
847
|
};
|
|
833
848
|
</script>
|
|
@@ -1017,6 +1032,7 @@ const clearSearch = () => {
|
|
|
1017
1032
|
display: flex;
|
|
1018
1033
|
flex-direction: column;
|
|
1019
1034
|
gap: 8px;
|
|
1035
|
+
height: 400px;
|
|
1020
1036
|
}
|
|
1021
1037
|
|
|
1022
1038
|
.employee-item {
|
|
@@ -3,131 +3,129 @@
|
|
|
3
3
|
:style="customStyle" :rules="rules" :label-width="labelWidth" :label-align="labelAlign" :status="status"
|
|
4
4
|
@validate="handleValidate" style="margin-bottom: 10px;">
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
<slot name="default">
|
|
7
|
+
<!-- 员工选择 -->
|
|
8
|
+
<template v-if="type === 'employee'">
|
|
9
|
+
<ebiz-employee-selector v-model="computedModelValue" :placeholder="placeholder || '请选择员工'"
|
|
10
|
+
:disabled="disabled" :clearable="clearable" :single="single" :defaultTab="defaultTab"
|
|
11
|
+
:maxCount="maxCount" @change="handleChange" />
|
|
12
|
+
</template>
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
<!-- 部门选择 -->
|
|
15
|
+
<template v-if="type === 'dept'">
|
|
16
|
+
<ebiz-department-selector v-model="computedModelValue" :placeholder="placeholder || '请选择部门'"
|
|
17
|
+
:disabled="disabled" :clearable="clearable" :filterable="filterable" :apiUrl="apiUrl"
|
|
18
|
+
:companyId="companyId" @change="handleChange" />
|
|
19
|
+
</template>
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
<!-- 输入框 -->
|
|
22
|
+
<template v-if="type === 'input'">
|
|
23
|
+
<t-input v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
|
|
24
|
+
:readonly="readonly" :clearable="clearable" :max-length="maxLength" :max-character="maxCharacter"
|
|
25
|
+
:show-limit-number="showLimitNumber" @change="handleChange" />
|
|
26
|
+
</template>
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
<!-- 数字输入框 -->
|
|
29
|
+
<template v-else-if="type === 'number'">
|
|
30
|
+
<t-input-number v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
|
|
31
|
+
:readonly="readonly" :max="max" :min="min" :step="step" :format="format" @change="handleChange" />
|
|
32
|
+
</template>
|
|
32
33
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
<!-- 文本域 -->
|
|
35
|
+
<template v-else-if="type === 'textarea'">
|
|
36
|
+
<t-textarea v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
|
|
37
|
+
:readonly="readonly" :autosize="autosize" :maxlength="maxLength" :max-character="maxCharacter"
|
|
38
|
+
:show-limit-number="showLimitNumber" @change="handleChange" />
|
|
39
|
+
</template>
|
|
39
40
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
<!-- 选择器 -->
|
|
42
|
+
<template v-else-if="type === 'select'">
|
|
43
|
+
<template v-if="isRemote">
|
|
44
|
+
<ebiz-remote-select v-model="computedModelValue" :placeholder="placeholder || '请选择'"
|
|
45
|
+
:disabled="disabled" :clearable="clearable" :filterable="true" :multiple="multiple"
|
|
46
|
+
:loading="loading" :apiConfig="remoteApiConfig" @change="handleChange" />
|
|
47
|
+
</template>
|
|
48
|
+
<template v-else>
|
|
49
|
+
<t-select v-model="computedModelValue" :options="options" :placeholder="placeholder || '请选择'"
|
|
50
|
+
:disabled="disabled" :clearable="clearable" :filterable="filterable" :multiple="multiple"
|
|
51
|
+
:loading="loading" @change="handleChange" />
|
|
52
|
+
</template>
|
|
46
53
|
</template>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
54
|
+
|
|
55
|
+
<!-- 日期选择器 -->
|
|
56
|
+
<template v-else-if="type === 'datetime'">
|
|
57
|
+
<t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间'" :disabled="disabled"
|
|
58
|
+
:clearable="clearable" enable-time-picker format="YYYY-MM-DD HH:mm:ss" @change="handleChange" />
|
|
51
59
|
</template>
|
|
52
|
-
</template>
|
|
53
60
|
|
|
54
|
-
<!-- 日期选择器 -->
|
|
55
|
-
<template v-else-if="type === 'datetime'">
|
|
56
|
-
<t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间'" :disabled="disabled"
|
|
57
|
-
:clearable="clearable" enable-time-picker format="YYYY-MM-DD HH:mm:ss" @change="handleChange" />
|
|
58
|
-
</template>
|
|
59
61
|
|
|
62
|
+
<!-- 日期选择器 -->
|
|
63
|
+
<template v-else-if="type === 'date'">
|
|
64
|
+
<t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期'" :disabled="disabled"
|
|
65
|
+
:clearable="clearable" :format="dateFormat || 'YYYY-MM-DD'" :mode="dateMode || 'date'"
|
|
66
|
+
@change="handleChange" />
|
|
67
|
+
</template>
|
|
60
68
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</template>
|
|
69
|
+
<!-- 时间选择器 -->
|
|
70
|
+
<template v-else-if="type === 'time'">
|
|
71
|
+
<t-time-picker v-model="computedModelValue" :placeholder="placeholder || '请选择时间'" :disabled="disabled"
|
|
72
|
+
:clearable="clearable" :format="timeFormat || 'HH:mm:ss'" @change="handleChange" />
|
|
73
|
+
</template>
|
|
67
74
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
75
|
+
<!-- 单选框组 -->
|
|
76
|
+
<template v-else-if="type === 'radio'">
|
|
77
|
+
<t-radio-group v-model="computedModelValue" :disabled="disabled" :options="options"
|
|
78
|
+
@change="handleChange" />
|
|
79
|
+
</template>
|
|
73
80
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
81
|
+
<!-- 复选框组 -->
|
|
82
|
+
<template v-else-if="type === 'checkbox'">
|
|
83
|
+
<t-checkbox-group v-model="computedModelValue" :disabled="disabled" :options="options" :max="max"
|
|
84
|
+
@change="handleChange" />
|
|
85
|
+
</template>
|
|
79
86
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</template>
|
|
87
|
+
<!-- 开关 -->
|
|
88
|
+
<template v-else-if="type === 'switch'">
|
|
89
|
+
<t-switch v-model="computedModelValue" :disabled="disabled" @change="handleChange" />
|
|
90
|
+
</template>
|
|
85
91
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
92
|
+
<!-- 滑块 -->
|
|
93
|
+
<template v-else-if="type === 'slider'">
|
|
94
|
+
<t-slider v-model="computedModelValue" :disabled="disabled" :max="max" :min="min" :step="step"
|
|
95
|
+
:range="range" :marks="marks" @change="handleChange" />
|
|
96
|
+
</template>
|
|
90
97
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
98
|
+
<!-- 上传 -->
|
|
99
|
+
<template v-else-if="type === 'upload'">
|
|
100
|
+
<ebiz-upload v-model="computedModelValue" :disabled="disabled" :accept="accept" :multiple="multiple"
|
|
101
|
+
:max="max" :theme="uploadTheme || 'file'" @change="handleChange" />
|
|
102
|
+
</template>
|
|
96
103
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
104
|
+
<!-- 级联选择器 -->
|
|
105
|
+
<template v-else-if="type === 'cascader'">
|
|
106
|
+
<t-cascader v-model="computedModelValue" :disabled="disabled" :options="options"
|
|
107
|
+
:placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable"
|
|
108
|
+
:multiple="multiple" @change="handleChange" />
|
|
109
|
+
</template>
|
|
102
110
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
111
|
+
<!-- 树形选择器 -->
|
|
112
|
+
<template v-else-if="type === 'tree-select'">
|
|
113
|
+
<t-tree-select v-model="computedModelValue" :disabled="disabled" :data="treeData || options"
|
|
114
|
+
:placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable"
|
|
115
|
+
:multiple="multiple" @change="handleChange" />
|
|
116
|
+
</template>
|
|
109
117
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
</template>
|
|
118
|
+
<!-- 颜色选择器 -->
|
|
119
|
+
<template v-else-if="type === 'color-picker'">
|
|
120
|
+
<t-color-picker v-model="computedModelValue" :disabled="disabled" :clearable="clearable"
|
|
121
|
+
@change="handleChange" />
|
|
122
|
+
</template>
|
|
116
123
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
</template>
|
|
124
|
+
<!-- 默认插槽,用于自定义控件 -->
|
|
125
|
+
<template v-else>
|
|
126
|
+
</template>
|
|
127
|
+
</slot>
|
|
122
128
|
|
|
123
|
-
<!-- 默认插槽,用于自定义控件 -->
|
|
124
|
-
<template v-else>
|
|
125
|
-
<slot>
|
|
126
|
-
<div class="custom-control">
|
|
127
|
-
<slot name="default"></slot>
|
|
128
|
-
</div>
|
|
129
|
-
</slot>
|
|
130
|
-
</template>
|
|
131
129
|
</t-form-item>
|
|
132
130
|
</template>
|
|
133
131
|
|