geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 隐藏不常用的功能，将主题设定从外面拿到菜单里

Browse Source
This commit is contained in:
gaoyunqi
2024-02-22 20:23:43 +08:00
parent d0392bd43a
commit df3152d77e
8 changed files with 2709 additions and 2363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3594
src/components/Designer/src/components/componentProperty/PropertyOption.vue
View File

File diff suppressed because it is too large Load Diff

22
src/components/Form/src/componentMap.ts
View File

@ -4,23 +4,13 @@ import type { ComponentType } from './types/index';
/**
* Component list, register here to setting it in the form
*/
import {
Input,
InputNumber,
Select,
Radio,
Checkbox,
DatePicker,
TreeSelect,
Rate,
Divider,
} from 'ant-design-vue';
import { Input, InputNumber, Select, Radio, Checkbox, DatePicker, TreeSelect, Rate, Divider } from 'ant-design-vue';
const DatasourceSelect = defineAsyncComponent({
loader: () => import('/@/components/DataSourceSelect/src/DatasourceSelect.vue'),
loader: () => import('/@/components/DataSourceSelect/src/DatasourceSelect.vue')
});
const FormView = defineAsyncComponent({
loader: () => import('./components/FormView.vue'),
loader: () => import('./components/FormView.vue')
});
import ApiRadioGroup from './components/ApiRadioGroup.vue';
@ -74,7 +64,7 @@ import { XjrDatePicker } from '/@/components/DatePicker';
import { Slider } from '/@/components/Slider';
import { CodeTextArea } from '/@/components/Input';
import { OneForOne } from '/@/components/OneForOne';
import SubForm from './components/SubForm.vue';
import SubForm from './components/SubFormV2.vue';
import ErpApply from './components/ErpApply.vue';
import ErpUpload from './components/ErpUpload.vue';
import ErpCheck from './components/ErpCheck.vue';
@ -154,11 +144,11 @@ componentMap.set('ErpCheck', ErpCheck);
componentMap.set('AutoComplete', AutoComplete);
export function add(compName: ComponentType, component: Component) {
componentMap.set(compName, component);
componentMap.set(compName, component);
}
export function del(compName: ComponentType) {
componentMap.delete(compName);
componentMap.delete(compName);
}
export { componentMap };

584
src/components/Form/src/components/SubFormV2.vue Normal file
View File

@ -0,0 +1,584 @@
<template>
<div>
<div class="tbl-toolbar">
<a-button v-if="useSelectButton" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
{{ buttonName }}
</a-button>
<a-button v-if="!disabled" type="primary" @click="add">
<PlusOutlined />
{{ t('新增') }}
</a-button>
</div>
<a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="data" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
<template #summary>
<a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
<a-table-summary-cell v-for="(column, idx) in columns" :key="idx">
<a-typography-text v-if="column.componentProps?.subTotal" keyboard> {{ t('合计：') }} {{ sum(data.map((x) => x[column.dataIndex as string])) }} </a-typography-text>
</a-table-summary-cell>
</a-table-summary-row>
</template>
<template #bodyCell="{ column, record, index }">
<template v-if="column.key !== 'action'">
<template v-if="column.key === 'index'">
{{ index + 1 }}
</template>
<FormItem v-else :name="[mainKey, index, column.dataIndex]" :rules="rules(column, record, index)" :validateTrigger="['blur', 'change']">
<!---如果是checked一类的组件-->
<template v-if="checkedValueComponents.includes(column.componentType)">
<component :is="componentMap.get(column.componentType)" v-model:checked="record[column.dataIndex]" :bordered="showComponentBorder" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" />
</template>
<!---如果是RangePicker组件-->
<template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
<component
:is="componentMap.get(column.componentType)"
v-model:endField="column.dataIndex.split(',')[1]"
v-model:startField="column.dataIndex.split(',')[0]"
v-model:value="record[column.dataIndex]"
:bordered="showComponentBorder"
:mainKey="mainKey"
:tableIndex="index"
v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
@change="handleRangePickerChange(record, column.dataIndex)"
/>
</template>
<!---如果是渲染函数组件-->
<template v-else-if="column.componentType === 'Render'">
<component
:is="
column.render({
model: record,
field: column.dataIndex,
rules: column.rules,
componentProps: getComponentsProps(column.componentProps, column.dataIndex, record, index)
})
"
:bordered="showComponentBorder"
/>
<!-- {{ column.render({ model: record, field: column.dataIndex }) }} -->
</template>
<template v-else-if="column.key !== 'index'">
<component
:is="componentMap.get(column.componentType)"
v-model:value="record[column.dataIndex]"
:bordered="showComponentBorder"
:index="index"
:mainKey="mainKey"
v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
@change="onFieldChange(record, index)"
/>
</template>
</FormItem>
</template>
<template v-if="column.key === 'action' && !disabled">
<MinusCircleOutlined style="padding-bottom: 20px" @click="remove(index)" />
</template>
</template>
</a-table>
<FormItemRest>
<MultipleSelect
ref="MultipleSelectRef"
v-model:multipleDialog="multipleDialog"
:apiConfig="apiConfig"
:datasourceType="preloadType"
:dicOptions="dicOptions"
:isSubFormUse="true"
:params="{ itemId }"
popupType="preload"
@submit="renderSubFormList"
/>
</FormItemRest>
</div>
</template>
<script lang="ts" setup>
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
import { Form } from 'ant-design-vue';
import { inject, onMounted, ref, unref, watch, nextTick } from 'vue';
import { SubFormColumn } from '../types';
import { componentMap } from '../componentMap';
import { DicDataComponents, checkedValueComponents, staticDataComponents } from '../helper';
import { MultipleSelect } from '/@/components/MultiplePopup';
import { dateUtil } from '/@/utils/dateUtil';
import { isFunction, cloneDeep, isBoolean, sum } from 'lodash-es';
import { deepMerge } from '/@/utils';
import { apiConfigFunc } from '/@/utils/event/design';
import { getDicDetailList } from '/@/api/system/dic';
import { useI18n } from '/@/hooks/web/useI18n';
import { MutipleHeadInfo } from '/@/components/Designer';
const { t } = useI18n();
// 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件 所以弹窗的form 必须排除
// const FormItemRest = Form.ItemRest;
const FormItem = Form.Item;
const FormItemRest = Form.ItemRest;
const multipleDialog = ref<boolean>(false);
const emit = defineEmits(['change', 'update:value']);
const props = defineProps({
/**
* 如果是编辑状态 默认现实的值
*/
value: { type: Array as PropType<Recordable[]>, default: () => [] },
/**
* 是否预加载
*/
preload: {
type: Boolean,
default: false
},
/**
* 预加载 类型 开启 preload 为true 才有用
* datasource || dataitem
*/
preloadType: { type: String, default: null },
/**
* 需要绑定主表的字段 用于验证 必填
*/
mainKey: { type: String, required: true },
/**
* 子表单配置
*/
columns: {
type: Array as PropType<SubFormColumn[]>,
required: true
},
/**
* 是否禁用所有组件
*/
disabled: {
type: Boolean,
default: false
},
/**
* 预加载数据为api时使用
*/
apiConfig: Object,
/**
* 预加载数据为数据字典时使用
*/
itemId: String,
dicOptions: Array,
/**
* 是否使用按钮选数据
*/
useSelectButton: Boolean,
// 是否开启分页
showPagination: Boolean,
/**
* 选数据按钮名称
*/
buttonName: String,
//是否显示表格边框
showFormBorder: Boolean,
//是否显示组件边框
showComponentBorder: Boolean,
//是否展示序号
showIndex: Boolean,
//add before hooks
addBefore: Function,
//add after hooks
addAfter: Function,
//表头合并数据
multipleHeads: { type: Array as PropType<MutipleHeadInfo[]> }
});
const data = ref<Recordable[]>([]);
//缓存字段是否disable
const cacheMap = new Map<String, number[]>();
const headColums = ref<MutipleHeadInfo[]>([]); // 多表头
const originHeads = ref<MutipleHeadInfo[]>([]); // 多表头源数据
const columns = ref<SubFormColumn[]>(props.columns);
// 注入表单数据
const formModel = inject<any>('formModel', null);
const onFieldChange = (row, rowIndex) => {
console.log('row-->', row, rowIndex);
};
onMounted(() => {
data.value = cloneDeep(props.value);
if (props.showIndex && columns.value && columns.value[0].key !== 'index') {
columns.value.unshift({
title: '序号',
key: 'index',
align: 'center',
width: 60
});
}
columns.value = filterColum(columns.value);
nextTick(() => {
//处理多表头
if (props.multipleHeads && props.multipleHeads.length > 0) {
originHeads.value = cloneDeep(props.multipleHeads);
getColumns(columns.value);
//过滤权限为不显示的组件
filterHeads(headColums.value);
}
});
});
watch(
() => props.columns,
(val) => {
// console.log('watch props.columns');
columns.value = filterColum(val);
}
);
watch(
() => props.value,
(v) => {
// console.log('watch props.value', props.value);
data.value = v;
// const rangeComponents = props.columns.filter((column) =>
// column.componentType?.includes('Range'),
// );
// if (rangeComponents.length && formModel) {
// rangeComponents.forEach((item) => {
// data.value.forEach((x) => {
// if (x[(item.dataIndex as string)?.split(',')[0]]) {
// x[item.dataIndex as string] = [
// x[(item.dataIndex as string)?.split(',')[0]],
// x[(item.dataIndex as string)?.split(',')[1]],
// ];
// }
// });
// });
// }
//要保证在预加载之后在emit 不然预加载数据不会绑定到表单数据中
emit('change', unref(data));
emit('update:value', unref(data));
},
{ deep: true }
);
function getColumns(children) {
let headsColumn: MutipleHeadInfo[] = [];
let leafNode = 0;
children.forEach((o) => {
o.isleaf = false;
let flag = false;
for (let i = 0; i < originHeads.value.length; i++) {
let k = originHeads.value[i];
let idx = k.children.findIndex((j) => {
return j == o.key || j.key == o.key;
});
if (idx >= 0) {
o.isleaf = true;
flag = true;
leafNode += 1;
k.children.splice(idx, 1, o);
let obj = headsColumn.find((j) => {
return j.key == k.key;
});
if (!obj) headsColumn.push(k);
break;
} else {
flag = false;
}
}
if (!flag) {
let obj = headsColumn.find((j) => {
return j.key == o.key;
});
if (!obj) headsColumn.push(o);
}
});
if (leafNode > 0) {
//继续循环
getColumns(headsColumn);
} else {
headColums.value = headsColumn;
}
}
function filterHeads(children) {
children.forEach((k, i) => {
if (typeof k == 'string') {
children.splice(i, 1);
} else if (k.children) {
filterHeads(k.children);
}
});
}
const add = () => {
//给各个组件赋默认值
const pushObj: Recordable = {};
//新增数据钩子
if (isFunction(props.addBefore)) {
props.addBefore(formModel, pushObj);
}
props.columns.forEach((column, index) => {
//判断是否为操作菜单 并且设置了默认值
if (column.key === 'index' && index === 0) return;
if (column.key !== 'action') {
if (column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker') {
handleSetRangeTimeValue(pushObj, column.dataIndex as string);
} else if (
(column.componentType && staticDataComponents.includes(column.componentType) && (column.componentProps as any)?.datasourceType === 'staticData') ||
(column.componentType && DicDataComponents.includes(column.componentType) && (column.componentProps as any)?.datasourceType === 'dic')
) {
let { defaultSelect } = column.componentProps as any;
pushObj[column!.dataIndex as string] = defaultSelect;
} else {
pushObj[column!.dataIndex as string] = column.defaultValue;
}
}
});
data.value.push(pushObj);
emit('change', unref(data));
emit('update:value', unref(data));
//新增数据钩子
if (isFunction(props.addAfter)) {
props.addAfter(formModel, pushObj);
}
};
const remove = (index) => {
data.value.splice(index, 1);
emit('change', unref(data));
emit('update:value', unref(data));
};
const renderSubFormList = async (list) => {
list?.forEach((x) => {
const dataObj = {};
columns.value?.map((item) => {
if (!item?.dataIndex) return;
dataObj[item.dataIndex as string] = item.componentProps?.prestrainField ? x[item.componentProps.prestrainField] : null;
});
data.value.push(dataObj);
});
emit('change', unref(data));
emit('update:value', unref(data));
};
watch(
() => props.preloadType,
async (val) => {
if (!!val && !props.useSelectButton) {
// console.log('watch props.preloadType');
let res;
if (props.preloadType === 'api') {
res = await apiConfigFunc(props.apiConfig, false, formModel);
} else if (props.preloadType === 'dic') {
res = await getDicDetailList({ itemId: props.itemId });
}
renderSubFormList(res);
}
},
{
immediate: true
}
);
/**
* @author: tzx
* @description: rangePicker组件的change事件
*/
const handleRangePickerChange = (values: Recordable, field: string, format = 'YYYY-MM-DD') => {
const startTimeKey = field.split(',')[0];
const endTimeKey = field.split(',')[1];
const [startTime, endTime]: string[] = values[field];
values[startTimeKey] = dateUtil(startTime).format(format);
values[endTimeKey] = dateUtil(endTime).format(format);
return values;
};
/**
* @author: tzx
* @description: 设置RangeTime的值
*
*/
function handleSetRangeTimeValue(values: Recordable, field: string) {
const startTimeKey = field.split(',')[0];
const endTimeKey = field.split(',')[1];
values[startTimeKey] = '';
values[endTimeKey] = '';
return values;
}
const rules = (column, record, index) => {
if (column.key === 'index') return;
const requiredRule = {
required: getComponentsProps(column.componentProps, column.dataIndex, record, index)?.required || false,
message: `${column.title}是必填项`
};
const rulesList = cloneDeep(getComponentsProps(column.componentProps, column.dataIndex, record, index)?.rules);
if (!rulesList) return [requiredRule];
rulesList?.map((item) => (item.pattern = eval(item.pattern)));
return [...rulesList, requiredRule];
};
const getComponentsProps = (componentProps, dataIndex, record, index) => {
console.log('getComponentsProps', cacheMap.get(dataIndex), componentProps.disabled);
if (!componentProps) return;
if (isFunction(componentProps)) {
componentProps =
componentProps({
updateSchema,
formModel,
record,
index,
disableRow
}) ?? {};
}
if (isBoolean(props.disabled)) {
componentProps['disabled'] = componentProps['disabled'] || props.disabled;
} else if (isBoolean(componentProps['disabled'])) {
componentProps['disabled'] = cacheMap.has(dataIndex) && cacheMap.get(dataIndex)?.includes(index) ? true : false;
}
return componentProps as Recordable;
};
// const getDisable = (column, index) => {
// console.log('getDisable', cacheMap.get(column.dataIndex), column.componentProps.disabled);
// return cacheMap.has(column.dataIndex) && cacheMap.get(column.dataIndex)?.includes(index)
// ? true
// : false;
// };
const disableRow = (column: SubFormColumn, index?: number) => {
let col: any = columns.value.find((x) => x.dataIndex == column.dataIndex);
if (col && index !== undefined) {
//如果当前字段已经缓存
if (cacheMap.has(col.dataIndex)) {
let indexArray = cacheMap.get(col.dataIndex);
if (column.componentProps.disabled) {
if (!indexArray) {
indexArray = [index];
} else {
if (!indexArray.includes(index)) {
indexArray.push(index);
}
}
} else {
if (indexArray) {
if (indexArray.findIndex((x) => x === index) > -1) {
indexArray.splice(
indexArray.findIndex((x) => x === index),
1
);
}
}
}
} else {
if (column.componentProps.disabled) {
cacheMap.set(col.dataIndex, [index]);
}
}
}
};
const updateSchema = (column: SubFormColumn, index?: number) => {
let col: any = columns.value.find((x) => x.dataIndex == column.dataIndex);
if (col && index !== undefined) {
//如果当前字段已经缓存
if (cacheMap.has(col.dataIndex)) {
let indexArray = cacheMap.get(col.dataIndex);
if (column.componentProps.disabled) {
if (!indexArray) {
indexArray = [index];
} else {
indexArray.push(index);
}
} else {
if (indexArray) {
if (indexArray.findIndex((x) => x === index) > -1) {
indexArray.splice(
indexArray.findIndex((x) => x === index),
1
);
}
}
}
} else {
if (column.componentProps.disabled) {
cacheMap.set(col.dataIndex, [index]);
}
}
}
console.log('cacheMap', cacheMap);
return col || col?.length ? deepMerge(col, column) : col;
};
function filterColum(column) {
return column.filter((o) => {
return o.key == 'action' || o.key == 'index' || (((isBoolean(o.show) && o.show) || !isBoolean(o.show)) && isBoolean(o.componentProps?.isShow) && o.componentProps?.isShow) || !isBoolean(o.componentProps?.isShow);
});
}
</script>
<style lang="less" scoped>
:deep(.ant-form-item) {
margin-bottom: 0;
}
:deep(.ant-table-cell) {
padding: 8px 0;
}
:deep(.ant-table .ant-table-thead tr th) {
padding: 11px;
}
:deep(.ant-input-number),
:deep(.ant-input-affix-wrapper),
:deep(.ant-input),
:deep(.ant-select-selector),
:deep(.ant-picker) {
border: 0 !important;
box-shadow: none !important;
}
:deep(.anticon) {
padding-bottom: 0 !important;
}
:deep(.ant-table-cell-fix-right) {
text-align: center;
width: 60px;
}
:deep(.ant-radio-group),
:deep(.ant-checkbox-group),
:deep(.ant-rate),
:deep(.ant-upload),
:deep(.ant-form-item-explain-error) {
padding: 0 11px;
}
:deep(.ant-switch),
:deep(input[type='color']) {
margin: 0 11px;
}
.select-btn {
margin-bottom: 8px;
}
.tbl-toolbar {
margin-bottom: 10px;
}
</style>