feat: 隐藏不常用的功能，将主题设定从外面拿到菜单里
This commit is contained in:
gaoyunqi
14
index.html
14
index.html
@ -4,10 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
|
||||
<title></title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</head>
|
||||
@ -25,7 +22,7 @@
|
||||
theme = htmlRoot = null;
|
||||
}
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: '1b21905551519807626f2bcd191a6036',
|
||||
securityJsCode: '1b21905551519807626f2bcd191a6036'
|
||||
};
|
||||
var url = document.getElementById('GLOB_API_URL');
|
||||
try {
|
||||
@ -167,16 +164,9 @@
|
||||
</style>
|
||||
<div class="app-loading">
|
||||
<div class="app-loading-wrap">
|
||||
<img
|
||||
src="/resource/img/logo.svg"
|
||||
class="app-loading-logo"
|
||||
id="app-loading-logo"
|
||||
alt="Logo"
|
||||
/>
|
||||
<div class="app-loading-dots">
|
||||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||
</div>
|
||||
<div class="app-loading-title" id="app-loading-title">%VITE_GLOB_APP_TITLE%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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';
|
||||
|
||||
584
src/components/Form/src/components/SubFormV2.vue
Normal file
584
src/components/Form/src/components/SubFormV2.vue
Normal 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>
|
||||
172
src/layouts/default/header/components/user-dropdown/DropDown.vue
Normal file
172
src/layouts/default/header/components/user-dropdown/DropDown.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<Dropdown :overlayClassName="`${prefixCls}-dropdown-overlay`" placement="bottomRight">
|
||||
<span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
|
||||
<span style="border-left: 1px solid rgb(255 255 255 / 30%); height: 30px; padding-right: 15px"></span>
|
||||
<div style="margin-right: 12px; height: 30px; margin-top: -12px">
|
||||
<a-image :height="24" :src="getUserInfo.avatar" :width="24" fallback="src/assets/images/header.jpg" />
|
||||
</div>
|
||||
<span :class="`${prefixCls}__info hidden md:block`">
|
||||
<span :class="`${prefixCls}__name `" class="truncate">
|
||||
{{ getUserInfo.name }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<template #overlay>
|
||||
<AMenu @click="handleMenuClick">
|
||||
<MenuItem key="usercenter" :text="t('用户中心')" icon="ant-design:user-switch-outlined" />
|
||||
<MenuItem v-if="getUseLockPage" key="lock" :text="t('锁定屏幕')" icon="ion:lock-closed-outline" />
|
||||
<MenuItem v-if="showSettings" key="sysSettings" icon="ion:color-filter-outline" text="主题设置" @click="showThemeSetting" />
|
||||
<MenuDivider />
|
||||
<MenuItem key="logout" :text="t('退出系统')" icon="ion:power-outline" />
|
||||
</AMenu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<LockAction @register="register" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
// components
|
||||
import { Dropdown, Menu } from 'ant-design-vue';
|
||||
|
||||
import { defineComponent, computed } from 'vue';
|
||||
|
||||
import { DOC_URL } from '/@/settings/siteSetting';
|
||||
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
|
||||
import headerImg from '/@/assets/images/header.jpg';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { openWindow } from '/@/utils';
|
||||
|
||||
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
import { useGo } from '/@/hooks/web/usePage';
|
||||
|
||||
// type MenuEvent = 'logout' | 'doc' | 'lock' | 'usercenter';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserDropdown',
|
||||
components: {
|
||||
Dropdown,
|
||||
AMenu: Menu,
|
||||
MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
|
||||
MenuDivider: Menu.Divider,
|
||||
LockAction: createAsyncComponent(() => import('../lock/LockModal.vue'))
|
||||
},
|
||||
props: {
|
||||
theme: propTypes.oneOf(['dark', 'light']),
|
||||
showSettings: Boolean
|
||||
},
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('header-user-dropdown');
|
||||
const { t } = useI18n();
|
||||
const { getUseLockPage } = useHeaderSetting();
|
||||
const userStore = useUserStore();
|
||||
const go = useGo();
|
||||
|
||||
const getUserInfo = computed(() => {
|
||||
const { name = '', avatar, desc } = userStore.getUserInfo || {};
|
||||
return { name, avatar: avatar || headerImg, desc };
|
||||
});
|
||||
|
||||
const [register, { openModal }] = useModal();
|
||||
|
||||
function handleLock() {
|
||||
openModal(true);
|
||||
}
|
||||
|
||||
// login out
|
||||
function handleLoginOut() {
|
||||
userStore.confirmLoginOut();
|
||||
}
|
||||
|
||||
// open doc
|
||||
function openDoc() {
|
||||
openWindow(DOC_URL);
|
||||
}
|
||||
|
||||
// updatePwd
|
||||
function openUserCenter() {
|
||||
go(PageEnum.USER_CENTER);
|
||||
}
|
||||
|
||||
function handleMenuClick(e) {
|
||||
switch (e.key) {
|
||||
case 'logout':
|
||||
handleLoginOut();
|
||||
break;
|
||||
case 'doc':
|
||||
openDoc();
|
||||
break;
|
||||
case 'lock':
|
||||
handleLock();
|
||||
break;
|
||||
case 'usercenter':
|
||||
openUserCenter();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
t,
|
||||
getUserInfo,
|
||||
handleMenuClick,
|
||||
register,
|
||||
getUseLockPage
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showThemeSetting() {
|
||||
this.$emit('menuClick', 'themeSetting');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-header-user-dropdown';
|
||||
|
||||
.@{prefix-cls} {
|
||||
height: @header-height;
|
||||
padding: 0 0 0 10px;
|
||||
padding-right: 10px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
|
||||
&__name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// &--dark {
|
||||
// &:hover {
|
||||
// background-color: @header-dark-bg-hover-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&--light {
|
||||
&:hover {
|
||||
background-color: @header-light-bg-hover-color;
|
||||
}
|
||||
|
||||
.@{prefix-cls}__name {
|
||||
color: @text-color-base;
|
||||
}
|
||||
|
||||
.@{prefix-cls}__desc {
|
||||
color: @header-light-desc-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown-overlay {
|
||||
.ant-dropdown-menu-item {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,20 +4,8 @@
|
||||
|
||||
<div :class="`${prefixCls}-left`">
|
||||
<!-- logo -->
|
||||
<AppLogo
|
||||
v-if="getShowHeaderLogo || getIsMobile"
|
||||
:class="`${prefixCls}-logo`"
|
||||
:theme="getHeaderTheme"
|
||||
:style="getLogoWidth"
|
||||
:show-title="!getCollapsed"
|
||||
/>
|
||||
<LayoutTrigger
|
||||
v-if="
|
||||
(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
|
||||
"
|
||||
:theme="getHeaderTheme"
|
||||
:sider="false"
|
||||
/>
|
||||
<AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" :show-title="!getCollapsed" />
|
||||
<LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile" :theme="getHeaderTheme" :sider="false" />
|
||||
</div>
|
||||
<!-- left end -->
|
||||
<div :class="`${prefixCls}-menu`" v-if="getShowContent && getShowBread">
|
||||
@ -25,12 +13,7 @@
|
||||
</div>
|
||||
<!-- menu start -->
|
||||
<div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
|
||||
<LayoutMenu
|
||||
:isHorizontal="true"
|
||||
:theme="getHeaderTheme"
|
||||
:splitType="getSplitType"
|
||||
:menuMode="getMenuMode"
|
||||
/>
|
||||
<LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
|
||||
</div>
|
||||
<!-- menu-end -->
|
||||
|
||||
@ -43,20 +26,14 @@
|
||||
|
||||
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
||||
|
||||
<AppLocalePicker
|
||||
v-if="getShowLocalePicker"
|
||||
:reload="true"
|
||||
:showText="false"
|
||||
:class="`${prefixCls}-action__item`"
|
||||
/>
|
||||
<UserPostChange />
|
||||
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
|
||||
<UserDropDown :theme="getHeaderTheme" />
|
||||
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
|
||||
<UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
|
||||
</div>
|
||||
</LayHeader>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, unref, computed } from 'vue';
|
||||
import { defineComponent, unref, computed, ref } from 'vue';
|
||||
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
|
||||
@ -73,9 +50,10 @@
|
||||
|
||||
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
||||
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
|
||||
import { AppLocalePicker, UserPostChange } from '/@/components/Application';
|
||||
import { UserPostChange } from '/@/components/Application';
|
||||
|
||||
import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
|
||||
import { LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
|
||||
import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
@ -91,43 +69,24 @@
|
||||
LayoutBreadcrumb,
|
||||
LayoutMenu,
|
||||
UserDropDown,
|
||||
AppLocalePicker,
|
||||
FullScreen,
|
||||
Notify,
|
||||
AppSearch,
|
||||
ErrorAction,
|
||||
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
|
||||
loading: true,
|
||||
loading: true
|
||||
}),
|
||||
UserPostChange,
|
||||
UserPostChange
|
||||
},
|
||||
props: {
|
||||
fixed: propTypes.bool,
|
||||
fixed: propTypes.bool
|
||||
},
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('layout-header');
|
||||
const {
|
||||
getShowTopMenu,
|
||||
getShowHeaderTrigger,
|
||||
getSplit,
|
||||
getIsMixMode,
|
||||
getMenuWidth,
|
||||
getIsMixSidebar,
|
||||
getCollapsed,
|
||||
} = useMenuSetting();
|
||||
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
|
||||
useRootSetting();
|
||||
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar, getCollapsed } = useMenuSetting();
|
||||
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
|
||||
|
||||
const {
|
||||
getHeaderTheme,
|
||||
getShowFullScreen,
|
||||
getShowNotice,
|
||||
getShowContent,
|
||||
getShowBread,
|
||||
getShowHeaderLogo,
|
||||
getShowHeader,
|
||||
getShowSearch,
|
||||
} = useHeaderSetting();
|
||||
const { getHeaderTheme, getShowFullScreen, getShowNotice, getShowContent, getShowBread, getShowHeaderLogo, getShowHeader, getShowSearch } = useHeaderSetting();
|
||||
|
||||
const { getShowLocalePicker } = useLocale();
|
||||
|
||||
@ -140,8 +99,8 @@
|
||||
{
|
||||
[`${prefixCls}--fixed`]: props.fixed,
|
||||
[`${prefixCls}--mobile`]: unref(getIsMobile),
|
||||
[`${prefixCls}--${theme}`]: theme,
|
||||
},
|
||||
[`${prefixCls}--${theme}`]: theme
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
@ -173,6 +132,13 @@
|
||||
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
|
||||
});
|
||||
|
||||
const drawer = ref();
|
||||
function onMenuClick(name) {
|
||||
if (name === 'themeSetting') {
|
||||
drawer.value.openDrawer(true);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
getHeaderClass,
|
||||
@ -196,8 +162,10 @@
|
||||
getShowSetting,
|
||||
getShowSearch,
|
||||
getCollapsed,
|
||||
onMenuClick,
|
||||
drawer
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
<template>
|
||||
<div @click="openDrawer(true)">
|
||||
<Icon icon="mdi:color" size="24" />
|
||||
<SettingDrawer @register="register" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, defineExpose } from 'vue';
|
||||
import SettingDrawer from './SettingDrawer';
|
||||
import Icon from '/@/components/Icon';
|
||||
|
||||
import { useDrawer } from '/@/components/Drawer';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingButton',
|
||||
components: { SettingDrawer, Icon },
|
||||
components: { SettingDrawer },
|
||||
setup() {
|
||||
const [register, { openDrawer }] = useDrawer();
|
||||
|
||||
defineExpose({
|
||||
openDrawer
|
||||
});
|
||||
|
||||
return {
|
||||
register,
|
||||
openDrawer,
|
||||
openDrawer
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
</ARow>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button :loading="loading" :style="{ 'border-radius': '35px' }" block class="sub-button" type="primary" @click="handleLogin">
|
||||
<Button :loading="loading" :style="{ 'border-radius': '8px' }" block class="sub-button" type="primary" @click="handleLogin">
|
||||
{{ t('登录') }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
@ -195,7 +195,7 @@
|
||||
}
|
||||
|
||||
.sub-button {
|
||||
height: 60px;
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user