@ebiz/designer-components 0.1.32 → 0.1.34
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 +4616 -4570
- package/package.json +1 -1
- package/src/components/EbizDiv.vue +9 -8
- package/src/components/EbizEmployeeSelector.vue +118 -95
- package/src/components/senior/EbizSData/index.vue +1 -1
- package/src/components/senior/EbizSForm/item.vue +103 -105
- package/src/views/EbizEmployeeSelector.vue +6 -4
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,67 @@ 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
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
if (checkedCount > props.maxCount) {
|
|
610
|
-
item.checked = false;
|
|
611
|
-
const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
|
|
612
|
-
if (index !== -1) {
|
|
613
|
-
tempSelectedEmployees.value.splice(index, 1);
|
|
614
|
-
}
|
|
615
|
-
MessagePlugin.warning({
|
|
616
|
-
content: `最多只能选择${props.maxCount}个人员`,
|
|
617
|
-
duration: 3000
|
|
637
|
+
if (selectedEmployees.length === 0) {
|
|
638
|
+
tempSelectedEmployees.value.forEach(emp => {
|
|
639
|
+
if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
|
|
640
|
+
selectedEmployees.push(emp)
|
|
641
|
+
}
|
|
618
642
|
});
|
|
619
643
|
}
|
|
620
|
-
}
|
|
621
644
|
|
|
645
|
+
} else {
|
|
646
|
+
const handled = [];
|
|
647
|
+
console.log("multi", tempSelectedEmployeeIds.value)
|
|
648
|
+
|
|
649
|
+
tempSelectedEmployees.value.forEach(emp => {
|
|
650
|
+
if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1) {
|
|
651
|
+
selectedEmployees.push(emp)
|
|
652
|
+
handled.push(emp.id)
|
|
653
|
+
}
|
|
654
|
+
});
|
|
655
|
+
employeeList.value.forEach(emp => {
|
|
656
|
+
if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
|
|
657
|
+
selectedEmployees.push(emp)
|
|
658
|
+
handled.push(emp.id)
|
|
659
|
+
}
|
|
660
|
+
});
|
|
661
|
+
selectedItems.value.forEach(emp => {
|
|
662
|
+
if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
|
|
663
|
+
selectedEmployees.push(emp)
|
|
664
|
+
handled.push(emp.id)
|
|
665
|
+
}
|
|
666
|
+
});
|
|
667
|
+
}
|
|
668
|
+
tempSelectedEmployees.value = selectedEmployees
|
|
622
669
|
updateSelectAllStatus();
|
|
623
670
|
};
|
|
624
671
|
|
|
@@ -638,18 +685,14 @@ const removeItem = (index, id) => {
|
|
|
638
685
|
|
|
639
686
|
// 从已选列表中移除员工
|
|
640
687
|
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
688
|
// 从临时选中列表中移除
|
|
648
|
-
const index =
|
|
689
|
+
const index = tempSelectedEmployeeIds.value.findIndex(id => employee.id === id);
|
|
649
690
|
if (index !== -1) {
|
|
650
|
-
|
|
691
|
+
tempSelectedEmployeeIds.value.splice(index, 1);
|
|
651
692
|
}
|
|
652
693
|
|
|
694
|
+
handleCheckChange()
|
|
695
|
+
|
|
653
696
|
// 更新全选状态
|
|
654
697
|
updateSelectAllStatus();
|
|
655
698
|
};
|
|
@@ -673,18 +716,21 @@ const initSelector = async () => {
|
|
|
673
716
|
// 显示对话框
|
|
674
717
|
const showDialog = () => {
|
|
675
718
|
// 初始化临时选中列表
|
|
676
|
-
if (
|
|
677
|
-
|
|
678
|
-
updateSelectStatus()
|
|
719
|
+
if (props.single) {
|
|
720
|
+
tempSelectedEmployeeId.value = props.modelValue || []
|
|
679
721
|
} else {
|
|
680
|
-
|
|
722
|
+
tempSelectedEmployeeIds.value = props.modelValue || []
|
|
681
723
|
}
|
|
682
724
|
|
|
683
725
|
// 初始化数据
|
|
684
726
|
if (props.visible == null) {
|
|
685
727
|
initSelector();
|
|
686
728
|
}
|
|
729
|
+
|
|
730
|
+
handleCheckChange()
|
|
731
|
+
|
|
687
732
|
dialogVisible.value = true;
|
|
733
|
+
|
|
688
734
|
};
|
|
689
735
|
|
|
690
736
|
// 确认选择
|
|
@@ -735,24 +781,6 @@ watch(() => props.visible, (val) => {
|
|
|
735
781
|
fetchOrganizationData()
|
|
736
782
|
}
|
|
737
783
|
}, { 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
784
|
|
|
757
785
|
// 监听子部门查询开关变化
|
|
758
786
|
watch(childDeptEnable, () => {
|
|
@@ -822,12 +850,6 @@ const clearSearch = () => {
|
|
|
822
850
|
searchText.value = '';
|
|
823
851
|
if (currentActive.value && currentActive.value.length > 0) {
|
|
824
852
|
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
853
|
}
|
|
832
854
|
};
|
|
833
855
|
</script>
|
|
@@ -1017,6 +1039,7 @@ const clearSearch = () => {
|
|
|
1017
1039
|
display: flex;
|
|
1018
1040
|
flex-direction: column;
|
|
1019
1041
|
gap: 8px;
|
|
1042
|
+
height: 400px;
|
|
1020
1043
|
}
|
|
1021
1044
|
|
|
1022
1045
|
.employee-item {
|
|
@@ -69,7 +69,7 @@ export default {
|
|
|
69
69
|
|
|
70
70
|
<script setup>
|
|
71
71
|
import { defineProps, defineEmits, ref, onMounted, computed, defineExpose } from 'vue';
|
|
72
|
-
import { dataService, EbizTableSort, EbizTdesignButton, EbizTdesignCard, EbizPageHeader, EbizSForm } from "../../../index"
|
|
72
|
+
import { dataService, EbizTableSort, EbizTdesignButton, EbizTdesignCard, EbizPageHeader, EbizSForm, EbizDivider } from "../../../index"
|
|
73
73
|
import { Space as TSpace, Pagination as TPagination, Input as TInput, Icon as TIcon } from 'tdesign-vue-next';
|
|
74
74
|
|
|
75
75
|
const currentPage = ref(1)
|
|
@@ -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
|
|