|
@@ -51,6 +51,16 @@ import { createComponent } from '@/packages/utils/create';
|
|
|
import popup, { popupProps } from '../popup/index.vue';
|
|
import popup, { popupProps } from '../popup/index.vue';
|
|
|
import column from './Column.vue';
|
|
import column from './Column.vue';
|
|
|
const { componentName, create, translate } = createComponent('picker');
|
|
const { componentName, create, translate } = createComponent('picker');
|
|
|
|
|
+// import { PickerColumnOption, PickerOption, TouchParams } from './types';
|
|
|
|
|
+
|
|
|
|
|
+export interface PickerOption {
|
|
|
|
|
+ text: string | number;
|
|
|
|
|
+ value: string | number;
|
|
|
|
|
+ disabled?: string;
|
|
|
|
|
+ children?: PickerOption[];
|
|
|
|
|
+ className?: string | number;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
export default create({
|
|
export default create({
|
|
|
components: {
|
|
components: {
|
|
|
[column.name]: column,
|
|
[column.name]: column,
|
|
@@ -75,7 +85,7 @@ export default create({
|
|
|
default: ''
|
|
default: ''
|
|
|
},
|
|
},
|
|
|
columns: {
|
|
columns: {
|
|
|
- type: Array,
|
|
|
|
|
|
|
+ type: Array as PropType<(PickerOption | PickerOption[])[]>,
|
|
|
default: () => {
|
|
default: () => {
|
|
|
return [];
|
|
return [];
|
|
|
}
|
|
}
|
|
@@ -94,7 +104,7 @@ export default create({
|
|
|
setup(props, { emit }) {
|
|
setup(props, { emit }) {
|
|
|
const state = reactive({
|
|
const state = reactive({
|
|
|
show: false,
|
|
show: false,
|
|
|
- formattedColumns: props.columns as import('./types').PickerOption[]
|
|
|
|
|
|
|
+ formattedColumns: props.columns
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 选中项
|
|
// 选中项
|
|
@@ -110,20 +120,18 @@ export default create({
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const selectedOptions = computed(() => {
|
|
const selectedOptions = computed(() => {
|
|
|
- let optins: import('./types').PickerOption[] = [];
|
|
|
|
|
- (columnsList.value as import('./types').PickerOption[][]).map(
|
|
|
|
|
- (column: import('./types').PickerOption[], index: number) => {
|
|
|
|
|
- let currOptions = [];
|
|
|
|
|
- currOptions = column.filter((item) => item.value == defaultValues.value[index]);
|
|
|
|
|
- optins.push(currOptions[0]);
|
|
|
|
|
- }
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ let optins: PickerOption[] = [];
|
|
|
|
|
+ (columnsList.value as PickerOption[][]).map((column: PickerOption[], index: number) => {
|
|
|
|
|
+ let currOptions = [];
|
|
|
|
|
+ currOptions = column.filter((item) => item.value == defaultValues.value[index]);
|
|
|
|
|
+ optins.push(currOptions[0]);
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
return optins;
|
|
return optins;
|
|
|
});
|
|
});
|
|
|
// 当前类型
|
|
// 当前类型
|
|
|
const columnsType = computed(() => {
|
|
const columnsType = computed(() => {
|
|
|
- const firstColumn: import('./types').PickerOption = state.formattedColumns[0];
|
|
|
|
|
|
|
+ const firstColumn: PickerOption | PickerOption[] = state.formattedColumns[0];
|
|
|
if (firstColumn) {
|
|
if (firstColumn) {
|
|
|
if (Array.isArray(firstColumn)) {
|
|
if (Array.isArray(firstColumn)) {
|
|
|
return 'multiple';
|
|
return 'multiple';
|
|
@@ -138,19 +146,19 @@ export default create({
|
|
|
const columnsList = computed(() => {
|
|
const columnsList = computed(() => {
|
|
|
switch (columnsType.value) {
|
|
switch (columnsType.value) {
|
|
|
case 'multiple':
|
|
case 'multiple':
|
|
|
- return state.formattedColumns;
|
|
|
|
|
|
|
+ return state.formattedColumns as PickerOption[][];
|
|
|
case 'cascade':
|
|
case 'cascade':
|
|
|
// 级联数据处理
|
|
// 级联数据处理
|
|
|
- return formatCascade(state.formattedColumns, defaultValues.value);
|
|
|
|
|
|
|
+ return formatCascade(state.formattedColumns as PickerOption[], defaultValues.value);
|
|
|
default:
|
|
default:
|
|
|
- return [state.formattedColumns];
|
|
|
|
|
|
|
+ return [state.formattedColumns] as PickerOption[][];
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 级联数据格式化
|
|
// 级联数据格式化
|
|
|
- const formatCascade = (columns: import('./types').PickerOption[], defaultValues: (number | string)[]) => {
|
|
|
|
|
- const formatted: import('./types').PickerOption[][] = [];
|
|
|
|
|
- let cursor: import('./types').PickerOption = {
|
|
|
|
|
|
|
+ const formatCascade = (columns: PickerOption[], defaultValues: (number | string)[]) => {
|
|
|
|
|
+ const formatted: PickerOption[][] = [];
|
|
|
|
|
+ let cursor: PickerOption = {
|
|
|
text: '',
|
|
text: '',
|
|
|
value: '',
|
|
value: '',
|
|
|
children: columns
|
|
children: columns
|
|
@@ -159,7 +167,7 @@ export default create({
|
|
|
let columnIndex = 0;
|
|
let columnIndex = 0;
|
|
|
|
|
|
|
|
while (cursor && cursor.children) {
|
|
while (cursor && cursor.children) {
|
|
|
- const options: import('./types').PickerOption[] = cursor.children;
|
|
|
|
|
|
|
+ const options: PickerOption[] = cursor.children;
|
|
|
const value = defaultValues[columnIndex];
|
|
const value = defaultValues[columnIndex];
|
|
|
let index = options.findIndex((columnItem) => columnItem.value == value);
|
|
let index = options.findIndex((columnItem) => columnItem.value == value);
|
|
|
if (index == -1) index = 0;
|
|
if (index == -1) index = 0;
|
|
@@ -180,7 +188,7 @@ export default create({
|
|
|
emit('update:visible', false);
|
|
emit('update:visible', false);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- const changeHandler = (columnIndex: number, option: import('./types').PickerOption) => {
|
|
|
|
|
|
|
+ const changeHandler = (columnIndex: number, option: PickerOption) => {
|
|
|
if (option && Object.keys(option).length) {
|
|
if (option && Object.keys(option).length) {
|
|
|
if (columnsType.value === 'cascade') {
|
|
if (columnsType.value === 'cascade') {
|
|
|
defaultValues.value[columnIndex] = option.value ? option.value : '';
|
|
defaultValues.value[columnIndex] = option.value ? option.value : '';
|
|
@@ -256,7 +264,8 @@ export default create({
|
|
|
watch(
|
|
watch(
|
|
|
() => props.columns,
|
|
() => props.columns,
|
|
|
(val) => {
|
|
(val) => {
|
|
|
- if (val.length) state.formattedColumns = val as import('./types').PickerOption[];
|
|
|
|
|
|
|
+ console.log('更新 columes');
|
|
|
|
|
+ if (val.length) state.formattedColumns = val as PickerOption[];
|
|
|
}
|
|
}
|
|
|
);
|
|
);
|
|
|
|
|
|