commit:升级到vue3,更新最近工作流技术栈,支持sa-token

This commit is contained in:
Jerry
2024-07-05 22:42:33 +08:00
parent bbcc608584
commit 565ecb6371
1751 changed files with 236790 additions and 0 deletions

View File

@@ -0,0 +1,579 @@
<template>
<component
v-bind="getWidgetProps"
:ref="widget.variableName"
:is="getComponent"
:style="getWidgetStyle"
:disabled="getDisabledStatus()"
:widget="widget"
v-model="bindValue"
:value="bindValue"
@change="onValueChange"
:change="onValueChange"
@widgetClick="onWidgetClick"
>
<template v-if="form().mode === 'pc'" v-slot="scope">
<template v-if="widget.widgetType === SysCustomWidgetType.Radio">
<el-radio v-for="item in getAllDropdownData" :key="item.id" :value="item.id">
{{ item.name }}
</el-radio>
</template>
<template
v-else-if="
widget.widgetType === SysCustomWidgetType.Date ||
widget.widgetType === SysCustomWidgetType.DateRange
"
>
<div class="el-date-table-cell">
<span class="el-date-table-cell__text">{{ scope.text }}</span>
</div>
</template>
<template v-else-if="widget.widgetType === SysCustomWidgetType.CheckBox">
<el-checkbox v-for="item in getAllDropdownData" :key="item.id" :label="item.id">
{{ item.name }}
</el-checkbox>
</template>
<template v-else-if="widget.widgetType === SysCustomWidgetType.Select">
<el-option
v-for="item in getAllDropdownData"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</template>
<template v-if="widget.widgetType === SysCustomWidgetType.Link">
<span>{{ widget.props.showText || widget.showName }}</span>
</template>
</template>
</component>
</template>
<script setup lang="ts">
import {
ElCascader,
ElCheckboxGroup,
ElDatePicker,
ElInput,
ElInputNumber,
ElLink,
ElRadioGroup,
ElSelect,
ElSwitch,
} from 'element-plus';
import { ANY_OBJECT } from '@/types/generic';
import { OnlineFormEventType, SysCustomWidgetType, SysOnlineFormType } from '@/common/staticDict';
import { SysOnlineColumnFilterType, SysOnlineFieldKind } from '@/common/staticDict/online';
import {
treeDataTranslate,
findTreeNode,
findItemFromList,
findTreeNodePath,
} from '@/common/utils';
import RichEditor from '@/components/RichEditor/index.vue';
import UserSelect from '@/components/UserSelect/index.vue';
import DeptSelect from '@/components/DeptSelect/index.vue';
import InputNumberRange from '@/components/InputNumberRange/index.vue';
import OnlineCustomLabel from './OnlineCustomLabel.vue';
import OnlineCustomUpload from './OnlineCustomUpload.vue';
import OnlineCustomTree from './OnlineCustomTree.vue';
import OnlineCustomText from './OnlineCustomText.vue';
import OnlineCustomImage from './OnlineCustomImage.vue';
import { WidgetEmit, WidgetProps } from './types/widget';
import { useWidget } from './hooks/widget';
type ValueType = string | boolean | Date | number | ANY_OBJECT | Array<ANY_OBJECT>;
interface IEmit extends WidgetEmit {
(event: 'change', value: ANY_OBJECT | undefined, params: ANY_OBJECT | null): void;
(event: 'update:value', value: ValueType | undefined): void;
(event: 'update:modelValue', value: ValueType | undefined): void;
(event: 'update:widget', value: ANY_OBJECT): void;
(event: 'input', value: ValueType | undefined): void;
}
const emit = defineEmits<IEmit>();
interface IProps extends WidgetProps {
value?: ValueType;
widget: ANY_OBJECT;
}
const pps = withDefaults(defineProps<IProps>(), {});
console.log('widget pps', pps);
const form = inject('form', () => {
console.error('OnlineCustomWidget: form not injected');
return { isEdit: false } as ANY_OBJECT;
});
const parentWidget = inject<ANY_OBJECT | null>('parentWidget', null);
const { propsWidget, onWidgetClick } = useWidget(pps, emit);
const dictDataList = ref<ANY_OBJECT[]>([]);
const tempValue = ref();
const multiSelect = computed(() => {
if (
[
SysCustomWidgetType.Select,
SysCustomWidgetType.CheckBox,
SysCustomWidgetType.Cascader,
SysCustomWidgetType.Tree,
].indexOf(pps.widget.widgetType) === -1
) {
return false;
}
if (pps.widget.widgetType === SysCustomWidgetType.CheckBox) return true;
if (
form().formType === SysOnlineFormType.QUERY ||
form().formType === SysOnlineFormType.ADVANCE_QUERY
) {
return (
pps.widget.column &&
pps.widget.column.filterType === SysOnlineColumnFilterType.MULTI_SELECT_FILTER
);
} else if (form().formType === SysOnlineFormType.REPORT) {
return SysCustomWidgetType.CheckBox === pps.widget.widgetType;
} else {
return pps.widget.column && pps.widget.column.fieldKind === SysOnlineFieldKind.MULTI_SELECT;
}
});
const isMobileFilter = computed(() => {
return (
[
SysCustomWidgetType.MobileRadioFilter,
SysCustomWidgetType.MobileCheckBoxFilter,
SysCustomWidgetType.MobileInputFilter,
SysCustomWidgetType.MobileDateRangeFilter,
SysCustomWidgetType.MobileNumberRangeFilter,
SysCustomWidgetType.MobileSwitchFilter,
].indexOf(pps.widget.widgetType) !== -1
);
});
const getAllDropdownData = computed(() => {
console.log('widget getAllDropdownData', pps.widget.props.supportAll, dictDataList);
if (pps.widget.props.supportAll) {
return [
{
id: '',
name: '全部',
},
...dictDataList.value,
];
} else {
return dictDataList.value;
}
});
const getWidgetStyle = computed(() => {
return {
width: pps.widget.widgetType !== SysCustomWidgetType.Link ? '100%' : undefined,
};
});
const getComponent = computed(() => {
console.log(
'widget getComponent',
pps.widget.widgetType,
SysCustomWidgetType.getValue(pps.widget.widgetType),
);
if (
[
SysCustomWidgetType.Text,
SysCustomWidgetType.Image,
SysCustomWidgetType.Upload,
SysCustomWidgetType.Link,
].indexOf(pps.widget.widgetType) === -1 &&
form().readOnly
) {
return OnlineCustomLabel;
}
let mode = form().mode;
console.log('widget getComponent mode', mode);
switch (pps.widget.widgetType) {
case SysCustomWidgetType.Label:
return OnlineCustomLabel;
case SysCustomWidgetType.Input:
return ElInput;
case SysCustomWidgetType.NumberInput:
return ElInputNumber;
case SysCustomWidgetType.NumberRange:
return InputNumberRange;
case SysCustomWidgetType.Switch:
return ElSwitch;
case SysCustomWidgetType.Radio:
return ElRadioGroup;
case SysCustomWidgetType.CheckBox:
return ElCheckboxGroup;
case SysCustomWidgetType.Select:
return ElSelect;
case SysCustomWidgetType.Cascader:
return ElCascader;
case SysCustomWidgetType.Date:
return ElDatePicker;
case SysCustomWidgetType.DateRange:
return ElDatePicker;
case SysCustomWidgetType.Upload:
return OnlineCustomUpload;
case SysCustomWidgetType.RichEditor:
return RichEditor;
case SysCustomWidgetType.Link:
return ElLink;
case SysCustomWidgetType.UserSelect:
return UserSelect;
case SysCustomWidgetType.DeptSelect:
return DeptSelect;
case SysCustomWidgetType.Tree:
return OnlineCustomTree;
case SysCustomWidgetType.Text:
return OnlineCustomText;
case SysCustomWidgetType.Image:
return OnlineCustomImage;
default:
console.warn('widget getComponent 未知类型');
return 'div';
}
});
const getLinkHerf = computed(() => {
let temp = pps.widget.widgetType === SysCustomWidgetType.Link ? pps.widget.props.href : undefined;
return temp;
});
const isDictWidget = computed(() => {
return (
[
SysCustomWidgetType.Select,
SysCustomWidgetType.CheckBox,
SysCustomWidgetType.Radio,
SysCustomWidgetType.Cascader,
SysCustomWidgetType.Tree,
SysCustomWidgetType.MobileCheckBoxFilter,
SysCustomWidgetType.MobileRadioFilter,
].indexOf(pps.widget.widgetType) !== -1
);
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const bindValue = computed<string | number | boolean | any[] | ANY_OBJECT | Date | undefined>({
get() {
console.log('widget bind props.value >>', pps.value);
let tempValue = pps.value === undefined ? '' : pps.value;
if (isDictWidget.value) tempValue = tempValue == null ? '' : tempValue + '';
if (multiSelect.value && pps.value && typeof tempValue === 'string') {
tempValue = tempValue.split(',');
if (Array.isArray(tempValue)) {
tempValue = tempValue.filter(item => {
return item != null && item !== '';
});
}
}
if (pps.widget.widgetType === SysCustomWidgetType.CheckBox) {
return tempValue || [];
} else if (pps.widget.widgetType === SysCustomWidgetType.Cascader) {
if (multiSelect.value) {
// 多选
if (Array.isArray(tempValue)) {
return tempValue
.map(item => {
let temp = findTreeNodePath(dictDataList.value, item);
if (Array.isArray(temp) && temp.length > 0) return temp;
return null;
})
.filter(item => item != null);
} else {
let temp = findTreeNodePath(dictDataList.value, tempValue.toString());
return temp || [];
}
} else {
// 单选
let temp = findTreeNodePath(dictDataList.value, tempValue.toString());
return temp.length > 0 ? temp : tempValue;
}
} else if (pps.widget.widgetType === SysCustomWidgetType.NumberInput) {
return tempValue as number;
} else {
return tempValue;
}
},
set(val) {
console.log('widget .......bindValue..........', val, typeof val);
onValueInput(val as ANY_OBJECT | undefined);
},
});
const isUploadImage = computed(() => {
if (pps.widget.widgetType !== SysCustomWidgetType.Upload) return false;
let column = pps.widget.bindData.column || pps.widget.column;
return column ? column.fieldKind === SysOnlineFieldKind.UPLOAD_IMAGE : false;
});
const showRightIcon = computed(() => {
return (
[
SysCustomWidgetType.Select,
SysCustomWidgetType.Cascader,
SysCustomWidgetType.Date,
SysCustomWidgetType.UserSelect,
SysCustomWidgetType.DeptSelect,
SysCustomWidgetType.Calendar,
].indexOf(pps.widget.widgetType) !== -1
);
});
const getWidgetProps = computed(() => {
let props = {
...(pps.widget.props || {}),
};
// 日期组件根据类型设置format
if (
pps.widget.widgetType === SysCustomWidgetType.Date ||
pps.widget.widgetType === SysCustomWidgetType.DateRange
) {
props['value-format'] = 'YYYY-MM-DD HH:mm:ss';
}
console.log('widget props', SysCustomWidgetType.getValue(pps.widget.widgetType), props);
return {
...props,
clearable: true,
filterable: true,
readOnly:
pps.widget.widgetType === SysCustomWidgetType.Upload
? form().readOnly || props.readOnly
: undefined,
options:
pps.widget.widgetType === SysCustomWidgetType.Cascader ? dictDataList.value : undefined,
props:
pps.widget.widgetType === SysCustomWidgetType.Cascader
? {
label: 'name',
value: 'id',
multiple: multiSelect.value,
checkStrictly: true,
}
: undefined,
operationList: pps.widget.operationList,
multiple: multiSelect.value,
'collapse-tags': multiSelect.value,
dataList: pps.widget.widgetType === SysCustomWidgetType.Tree ? dictDataList.value : undefined,
dictDataList: isMobileFilter.value ? getAllDropdownData.value : undefined,
href: getLinkHerf.value,
widget: pps.widget,
};
});
const getDisabledStatus = () => {
return pps.widget.props.disabled;
};
const parseValue = (val: ValueType): ANY_OBJECT => {
if (pps.widget.widgetType === SysCustomWidgetType.Cascader) {
if (multiSelect.value && Array.isArray(val)) {
return val
.map((item: ANY_OBJECT) => {
return item[item.length - 1];
})
.filter((item: ANY_OBJECT) => item != null);
} else {
return Array.isArray(val) ? val[val.length - 1] : undefined;
}
} else {
return val as ANY_OBJECT;
}
};
const onValueInput = (val: ANY_OBJECT | undefined) => {
let tempValue: ValueType | undefined = undefined;
if (val) {
console.log('widget typeof val', typeof val, val instanceof InputEvent, val instanceof Event);
if (val instanceof InputEvent) {
console.warn('widget input value is InputEvent');
return;
} else if (val instanceof Event) {
console.log('wiget >>>>>>> value >>>>>>', val, val.target instanceof HTMLInputElement);
if (val.target instanceof HTMLInputElement) {
tempValue = val.target.value;
}
} else {
tempValue = parseValue(val);
}
if (multiSelect.value && Array.isArray(tempValue) /*&& tempValue.length > 0*/) {
tempValue = tempValue.join(',') + ',';
}
}
console.log('widget update:value', tempValue);
emit('update:value', tempValue);
emit('update:modelValue', tempValue);
// ElDatePicker(DateRange)有了这个事件才能更新显示
emit('input', tempValue);
};
const onValueChange = (
val: ANY_OBJECT | undefined,
selectRow: ANY_OBJECT | undefined = undefined,
) => {
let tempVal: ValueType | undefined = undefined;
let dictData = null;
console.log('widget onValueChange >>>', val);
if (val) {
tempVal = parseValue(val);
if (multiSelect.value) {
dictData = val
.map((item: string) => {
if (pps.widget.widgetType === SysCustomWidgetType.Cascader) {
if (Array.isArray(item)) {
item = item[item.length - 1];
}
return findTreeNode(dictDataList.value, item, 'id', 'children');
} else {
return findItemFromList(dictDataList.value, item, 'id');
}
})
.filter((item: ANY_OBJECT) => item != null);
} else {
let id = val.toString();
if (pps.widget.widgetType === SysCustomWidgetType.Cascader) {
if (Array.isArray(val)) {
val = val[val.length - 1];
}
dictData = findTreeNode(dictDataList.value, id, 'id', 'children');
} else {
dictData = findItemFromList(dictDataList.value, id, 'id');
}
}
}
// 这个似乎没有起到什么作用
emit('change', tempVal, {
dictData: dictData,
selectRow: selectRow,
});
onValueInput(tempVal);
};
const loadDropdownData = () => {
if (pps.widget == null || !isDictWidget.value) {
return;
}
dictDataList.value = [];
setTimeout(() => {
let dictInfo = (pps.widget.props.dictInfo || {}).dict;
console.log('widget OnlineCustomWidget loadDropdownData', dictInfo, pps);
if (dictInfo && form().getDictDataList) {
let dictCall;
if (form().pageCode != null) {
// 报表字典
dictCall = form().getDictDataList(dictInfo, form().getDropdownParams(pps.widget));
} else {
// 在线表单字典
dictCall = form().getDictDataList(dictInfo, form().getDropdownParams(pps.widget));
}
dictCall
.then((res: ANY_OBJECT[]) => {
console.log('OnlineCustomWidget loadDropdownData', res);
res.forEach((item: ANY_OBJECT) => {
item.id = item.id + '';
if (item.parentId) item.parentId = item.parentId + '';
});
// 级联组件将列表转换成树
if (pps.widget.widgetType === SysCustomWidgetType.Cascader) {
res = treeDataTranslate(res, 'id', 'parentId');
}
dictDataList.value = res;
})
.catch((e: Error) => {
console.log(e);
});
}
}, 30);
};
const getHtml = () => {
console.log('widget call getHtml()');
const refs = (getCurrentInstance()?.refs || {}) as ANY_OBJECT;
console.log('refs', refs);
if (pps.widget.widgetType === SysCustomWidgetType.RichEditor) {
return refs[pps.widget.variableName] ? refs[pps.widget.variableName].getHtml() : undefined;
}
};
const reset = () => {
console.log('widget call reset()');
onValueInput(undefined);
onValueChange(undefined);
nextTick(() => {
loadDropdownData();
});
};
const refresh = () => {
const refs = (getCurrentInstance()?.refs || {}) as ANY_OBJECT;
console.log('widget call refresh() refs:', refs);
if (
refs[pps.widget.variableName] &&
typeof refs[pps.widget.variableName].refresh === 'function'
) {
refs[pps.widget.variableName].refresh();
}
};
defineExpose({
getHtml,
reset,
refresh,
});
watch(
() => pps.widget,
() => {
console.log('props widget change', pps.widget);
if (pps.widget) loadDropdownData();
},
{
deep: true,
immediate: true,
},
);
// watch(
// () => pps.widget.props.dictInfo,
// () => {
// if (pps.widget) loadDropdownData();
// },
// {
// deep: true,
// immediate: true,
// },
// );
// 如果父组件为数据表格或者列表组件,那么子组件绑定表必须跟父组件一致
watch(
() => parentWidget,
(newValue, oldValue) => {
const widget = { ...propsWidget.value };
if (parentWidget != null && propsWidget.value) {
// 如果绑定的数据表改变了,修改子组件绑定的数据表
if (parentWidget.bindData.tableId !== propsWidget.value.bindData.tableId) {
widget.props.bindData = {
...parentWidget.bindData,
};
widget.showName = undefined;
if (widget.widgetType === SysCustomWidgetType.Text) {
widget.props.text = '文本内容';
}
}
} else {
if (newValue == null && oldValue != null) {
widget.bindData = {
dataType: 0,
tableId: undefined,
table: undefined,
columnId: undefined,
column: undefined,
};
}
}
propsWidget.value = widget;
},
{
deep: true,
immediate: true,
},
);
onMounted(() => {
console.log('getComponent', getComponent.value, getWidgetProps.value);
//propsWidget.value.widgetImpl = getCurrentInstance();
//propsWidget.value.parent = parentWidget;
});
</script>