feat: 隐藏不常用的功能，将主题设定从外面拿到菜单里
This commit is contained in:
gaoyunqi
326
index.html
326
index.html
@ -1,185 +1,175 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" id="htmlRoot">
|
<html lang="en" id="htmlRoot">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<meta name="renderer" content="webkit" />
|
<meta name="renderer" content="webkit" />
|
||||||
<meta
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
|
||||||
name="viewport"
|
<title></title>
|
||||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
<link rel="icon" href="/favicon.ico" />
|
||||||
/>
|
</head>
|
||||||
<title></title>
|
<body>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<div id="GLOB_API_URL" style="display: none">%VITE_GLOB_API_URL%</div>
|
||||||
</head>
|
<script src="/iconfont.js"></script>
|
||||||
<body>
|
<script src="/desktopIconfont.js"></script>
|
||||||
<div id="GLOB_API_URL" style="display: none">%VITE_GLOB_API_URL%</div>
|
|
||||||
<script src="/iconfont.js"></script>
|
|
||||||
<script src="/desktopIconfont.js"></script>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(async () => {
|
(async () => {
|
||||||
var htmlRoot = document.getElementById('htmlRoot');
|
var htmlRoot = document.getElementById('htmlRoot');
|
||||||
var theme = window.localStorage.getItem('__APP__DARK__MODE__');
|
var theme = window.localStorage.getItem('__APP__DARK__MODE__');
|
||||||
if (htmlRoot && theme) {
|
if (htmlRoot && theme) {
|
||||||
htmlRoot.setAttribute('data-theme', theme);
|
htmlRoot.setAttribute('data-theme', theme);
|
||||||
theme = htmlRoot = null;
|
theme = htmlRoot = null;
|
||||||
}
|
}
|
||||||
window._AMapSecurityConfig = {
|
window._AMapSecurityConfig = {
|
||||||
securityJsCode: '1b21905551519807626f2bcd191a6036',
|
securityJsCode: '1b21905551519807626f2bcd191a6036'
|
||||||
};
|
};
|
||||||
var url = document.getElementById('GLOB_API_URL');
|
var url = document.getElementById('GLOB_API_URL');
|
||||||
try {
|
try {
|
||||||
const responseStream = await fetch(url.innerText + '/system/logoConfig/logo-info');
|
const responseStream = await fetch(url.innerText + '/system/logoConfig/logo-info');
|
||||||
const { data } = await responseStream.json();
|
const { data } = await responseStream.json();
|
||||||
if (data.shortName) {
|
if (data.shortName) {
|
||||||
document.title = data.shortName;
|
document.title = data.shortName;
|
||||||
document.getElementById('app-loading-title').innerText = data.shortName;
|
document.getElementById('app-loading-title').innerText = data.shortName;
|
||||||
}
|
}
|
||||||
if (data.refreshLogoUrl) {
|
if (data.refreshLogoUrl) {
|
||||||
document.getElementById('app-loading-logo').setAttribute('src', data.refreshLogoUrl);
|
document.getElementById('app-loading-logo').setAttribute('src', data.refreshLogoUrl);
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
console.error('从服务器获取数据出错，请联系管理员！');
|
console.error('从服务器获取数据出错，请联系管理员！');
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<style>
|
<style>
|
||||||
html[data-theme='dark'] .app-loading {
|
html[data-theme='dark'] .app-loading {
|
||||||
background-color: #2c344a;
|
background-color: #2c344a;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] .app-loading .app-loading-title {
|
html[data-theme='dark'] .app-loading .app-loading-title {
|
||||||
color: rgb(255 255 255 / 85%);
|
color: rgb(255 255 255 / 85%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading {
|
.app-loading {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: #f4f7f9;
|
background-color: #f4f7f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .app-loading-wrap {
|
.app-loading .app-loading-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
transform: translate3d(-50%, -50%, 0);
|
transform: translate3d(-50%, -50%, 0);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .dots {
|
.app-loading .dots {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 98px;
|
padding: 98px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .app-loading-title {
|
.app-loading .app-loading-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: rgb(0 0 0 / 85%);
|
color: rgb(0 0 0 / 85%);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .app-loading-logo {
|
.app-loading .app-loading-logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: 90px;
|
width: 90px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
animation: antRotate 1.2s infinite linear;
|
animation: antRotate 1.2s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot i {
|
.dot i {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #0065cc;
|
background-color: #0065cc;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
transform: scale(0.75);
|
transform: scale(0.75);
|
||||||
animation: antSpinMove 1s infinite linear alternate;
|
animation: antSpinMove 1s infinite linear alternate;
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot i:nth-child(1) {
|
.dot i:nth-child(1) {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot i:nth-child(2) {
|
.dot i:nth-child(2) {
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
animation-delay: 0.4s;
|
animation-delay: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot i:nth-child(3) {
|
.dot i:nth-child(3) {
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot i:nth-child(4) {
|
.dot i:nth-child(4) {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
animation-delay: 1.2s;
|
animation-delay: 1.2s;
|
||||||
}
|
}
|
||||||
@keyframes antRotate {
|
@keyframes antRotate {
|
||||||
to {
|
to {
|
||||||
transform: rotate(405deg);
|
transform: rotate(405deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes antRotate {
|
@keyframes antRotate {
|
||||||
to {
|
to {
|
||||||
transform: rotate(405deg);
|
transform: rotate(405deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes antSpinMove {
|
@keyframes antSpinMove {
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes antSpinMove {
|
@keyframes antSpinMove {
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="app-loading">
|
<div class="app-loading">
|
||||||
<div class="app-loading-wrap">
|
<div class="app-loading-wrap">
|
||||||
<img
|
<div class="app-loading-dots">
|
||||||
src="/resource/img/logo.svg"
|
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||||
class="app-loading-logo"
|
</div>
|
||||||
id="app-loading-logo"
|
</div>
|
||||||
alt="Logo"
|
</div>
|
||||||
/>
|
|
||||||
<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>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</div>
|
</body>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
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
|
* Component list, register here to setting it in the form
|
||||||
*/
|
*/
|
||||||
import {
|
import { Input, InputNumber, Select, Radio, Checkbox, DatePicker, TreeSelect, Rate, Divider } from 'ant-design-vue';
|
||||||
Input,
|
|
||||||
InputNumber,
|
|
||||||
Select,
|
|
||||||
Radio,
|
|
||||||
Checkbox,
|
|
||||||
DatePicker,
|
|
||||||
TreeSelect,
|
|
||||||
Rate,
|
|
||||||
Divider,
|
|
||||||
} from 'ant-design-vue';
|
|
||||||
const DatasourceSelect = defineAsyncComponent({
|
const DatasourceSelect = defineAsyncComponent({
|
||||||
loader: () => import('/@/components/DataSourceSelect/src/DatasourceSelect.vue'),
|
loader: () => import('/@/components/DataSourceSelect/src/DatasourceSelect.vue')
|
||||||
});
|
});
|
||||||
|
|
||||||
const FormView = defineAsyncComponent({
|
const FormView = defineAsyncComponent({
|
||||||
loader: () => import('./components/FormView.vue'),
|
loader: () => import('./components/FormView.vue')
|
||||||
});
|
});
|
||||||
|
|
||||||
import ApiRadioGroup from './components/ApiRadioGroup.vue';
|
import ApiRadioGroup from './components/ApiRadioGroup.vue';
|
||||||
@ -74,7 +64,7 @@ import { XjrDatePicker } from '/@/components/DatePicker';
|
|||||||
import { Slider } from '/@/components/Slider';
|
import { Slider } from '/@/components/Slider';
|
||||||
import { CodeTextArea } from '/@/components/Input';
|
import { CodeTextArea } from '/@/components/Input';
|
||||||
import { OneForOne } from '/@/components/OneForOne';
|
import { OneForOne } from '/@/components/OneForOne';
|
||||||
import SubForm from './components/SubForm.vue';
|
import SubForm from './components/SubFormV2.vue';
|
||||||
import ErpApply from './components/ErpApply.vue';
|
import ErpApply from './components/ErpApply.vue';
|
||||||
import ErpUpload from './components/ErpUpload.vue';
|
import ErpUpload from './components/ErpUpload.vue';
|
||||||
import ErpCheck from './components/ErpCheck.vue';
|
import ErpCheck from './components/ErpCheck.vue';
|
||||||
@ -154,11 +144,11 @@ componentMap.set('ErpCheck', ErpCheck);
|
|||||||
componentMap.set('AutoComplete', AutoComplete);
|
componentMap.set('AutoComplete', AutoComplete);
|
||||||
|
|
||||||
export function add(compName: ComponentType, component: Component) {
|
export function add(compName: ComponentType, component: Component) {
|
||||||
componentMap.set(compName, component);
|
componentMap.set(compName, component);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function del(compName: ComponentType) {
|
export function del(compName: ComponentType) {
|
||||||
componentMap.delete(compName);
|
componentMap.delete(compName);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { componentMap };
|
export { componentMap };
|
||||||
|
|||||||
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>
|
||||||
@ -1,205 +1,173 @@
|
|||||||
<template>
|
<template>
|
||||||
<LayHeader :class="getHeaderClass">
|
<LayHeader :class="getHeaderClass">
|
||||||
<!-- left start -->
|
<!-- left start -->
|
||||||
|
|
||||||
<div :class="`${prefixCls}-left`">
|
<div :class="`${prefixCls}-left`">
|
||||||
<!-- logo -->
|
<!-- logo -->
|
||||||
<AppLogo
|
<AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" :show-title="!getCollapsed" />
|
||||||
v-if="getShowHeaderLogo || getIsMobile"
|
<LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile" :theme="getHeaderTheme" :sider="false" />
|
||||||
:class="`${prefixCls}-logo`"
|
</div>
|
||||||
:theme="getHeaderTheme"
|
<!-- left end -->
|
||||||
:style="getLogoWidth"
|
<div :class="`${prefixCls}-menu`" v-if="getShowContent && getShowBread">
|
||||||
:show-title="!getCollapsed"
|
<LayoutBreadcrumb :theme="getHeaderTheme" />
|
||||||
/>
|
</div>
|
||||||
<LayoutTrigger
|
<!-- menu start -->
|
||||||
v-if="
|
<div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
|
||||||
(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
|
<LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
|
||||||
"
|
</div>
|
||||||
:theme="getHeaderTheme"
|
<!-- menu-end -->
|
||||||
:sider="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- left end -->
|
|
||||||
<div :class="`${prefixCls}-menu`" v-if="getShowContent && getShowBread">
|
|
||||||
<LayoutBreadcrumb :theme="getHeaderTheme" />
|
|
||||||
</div>
|
|
||||||
<!-- menu start -->
|
|
||||||
<div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
|
|
||||||
<LayoutMenu
|
|
||||||
:isHorizontal="true"
|
|
||||||
:theme="getHeaderTheme"
|
|
||||||
:splitType="getSplitType"
|
|
||||||
:menuMode="getMenuMode"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- menu-end -->
|
|
||||||
|
|
||||||
<!-- action -->
|
<!-- action -->
|
||||||
<div :class="`${prefixCls}-action`">
|
<div :class="`${prefixCls}-action`">
|
||||||
<LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
|
<LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
|
||||||
<AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
|
<AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
|
||||||
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
||||||
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
||||||
|
|
||||||
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
||||||
|
|
||||||
<AppLocalePicker
|
<UserPostChange />
|
||||||
v-if="getShowLocalePicker"
|
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
|
||||||
:reload="true"
|
<UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
|
||||||
:showText="false"
|
</div>
|
||||||
:class="`${prefixCls}-action__item`"
|
</LayHeader>
|
||||||
/>
|
|
||||||
<UserPostChange />
|
|
||||||
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
|
|
||||||
<UserDropDown :theme="getHeaderTheme" />
|
|
||||||
</div>
|
|
||||||
</LayHeader>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, unref, computed } from 'vue';
|
import { defineComponent, unref, computed, ref } from 'vue';
|
||||||
|
|
||||||
import { propTypes } from '/@/utils/propTypes';
|
import { propTypes } from '/@/utils/propTypes';
|
||||||
|
|
||||||
import { Layout } from 'ant-design-vue';
|
import { Layout } from 'ant-design-vue';
|
||||||
import { AppLogo } from '/@/components/Application';
|
import { AppLogo } from '/@/components/Application';
|
||||||
import LayoutMenu from '../menu/index.vue';
|
import LayoutMenu from '../menu/index.vue';
|
||||||
import LayoutTrigger from '../trigger/index.vue';
|
import LayoutTrigger from '../trigger/index.vue';
|
||||||
|
|
||||||
import { AppSearch } from '/@/components/Application';
|
import { AppSearch } from '/@/components/Application';
|
||||||
|
|
||||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||||
|
|
||||||
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
||||||
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
|
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 { useAppInject } from '/@/hooks/web/useAppInject';
|
import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||||
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
|
|
||||||
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
||||||
import { useLocale } from '/@/locales/useLocale';
|
import { useLocale } from '/@/locales/useLocale';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'LayoutHeader',
|
name: 'LayoutHeader',
|
||||||
components: {
|
components: {
|
||||||
LayHeader: Layout.Header,
|
LayHeader: Layout.Header,
|
||||||
AppLogo,
|
AppLogo,
|
||||||
LayoutTrigger,
|
LayoutTrigger,
|
||||||
LayoutBreadcrumb,
|
LayoutBreadcrumb,
|
||||||
LayoutMenu,
|
LayoutMenu,
|
||||||
UserDropDown,
|
UserDropDown,
|
||||||
AppLocalePicker,
|
FullScreen,
|
||||||
FullScreen,
|
Notify,
|
||||||
Notify,
|
AppSearch,
|
||||||
AppSearch,
|
ErrorAction,
|
||||||
ErrorAction,
|
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
|
||||||
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
|
loading: true
|
||||||
loading: true,
|
}),
|
||||||
}),
|
UserPostChange
|
||||||
UserPostChange,
|
},
|
||||||
},
|
props: {
|
||||||
props: {
|
fixed: propTypes.bool
|
||||||
fixed: propTypes.bool,
|
},
|
||||||
},
|
setup(props) {
|
||||||
setup(props) {
|
const { prefixCls } = useDesign('layout-header');
|
||||||
const { prefixCls } = useDesign('layout-header');
|
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar, getCollapsed } = useMenuSetting();
|
||||||
const {
|
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
|
||||||
getShowTopMenu,
|
|
||||||
getShowHeaderTrigger,
|
|
||||||
getSplit,
|
|
||||||
getIsMixMode,
|
|
||||||
getMenuWidth,
|
|
||||||
getIsMixSidebar,
|
|
||||||
getCollapsed,
|
|
||||||
} = useMenuSetting();
|
|
||||||
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
|
|
||||||
useRootSetting();
|
|
||||||
|
|
||||||
const {
|
const { getHeaderTheme, getShowFullScreen, getShowNotice, getShowContent, getShowBread, getShowHeaderLogo, getShowHeader, getShowSearch } = useHeaderSetting();
|
||||||
getHeaderTheme,
|
|
||||||
getShowFullScreen,
|
|
||||||
getShowNotice,
|
|
||||||
getShowContent,
|
|
||||||
getShowBread,
|
|
||||||
getShowHeaderLogo,
|
|
||||||
getShowHeader,
|
|
||||||
getShowSearch,
|
|
||||||
} = useHeaderSetting();
|
|
||||||
|
|
||||||
const { getShowLocalePicker } = useLocale();
|
const { getShowLocalePicker } = useLocale();
|
||||||
|
|
||||||
const { getIsMobile } = useAppInject();
|
const { getIsMobile } = useAppInject();
|
||||||
|
|
||||||
const getHeaderClass = computed(() => {
|
const getHeaderClass = computed(() => {
|
||||||
const theme = unref(getHeaderTheme);
|
const theme = unref(getHeaderTheme);
|
||||||
return [
|
return [
|
||||||
prefixCls,
|
prefixCls,
|
||||||
{
|
{
|
||||||
[`${prefixCls}--fixed`]: props.fixed,
|
[`${prefixCls}--fixed`]: props.fixed,
|
||||||
[`${prefixCls}--mobile`]: unref(getIsMobile),
|
[`${prefixCls}--mobile`]: unref(getIsMobile),
|
||||||
[`${prefixCls}--${theme}`]: theme,
|
[`${prefixCls}--${theme}`]: theme
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
const getShowSetting = computed(() => {
|
const getShowSetting = computed(() => {
|
||||||
if (!unref(getShowSettingButton)) {
|
if (!unref(getShowSettingButton)) {
|
||||||
return false;
|
return false;
|
||||||
|
}
|
||||||
|
const settingButtonPosition = unref(getSettingButtonPosition);
|
||||||
|
|
||||||
|
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
|
||||||
|
return unref(getShowHeader);
|
||||||
|
}
|
||||||
|
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
|
||||||
|
});
|
||||||
|
|
||||||
|
const getLogoWidth = computed(() => {
|
||||||
|
if (!unref(getIsMixMode) || unref(getIsMobile)) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
|
||||||
|
return { width: `${width}px` };
|
||||||
|
});
|
||||||
|
|
||||||
|
const getSplitType = computed(() => {
|
||||||
|
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
|
||||||
|
});
|
||||||
|
|
||||||
|
const getMenuMode = computed(() => {
|
||||||
|
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
|
||||||
|
});
|
||||||
|
|
||||||
|
const drawer = ref();
|
||||||
|
function onMenuClick(name) {
|
||||||
|
if (name === 'themeSetting') {
|
||||||
|
drawer.value.openDrawer(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
prefixCls,
|
||||||
|
getHeaderClass,
|
||||||
|
getShowHeaderLogo,
|
||||||
|
getHeaderTheme,
|
||||||
|
getShowHeaderTrigger,
|
||||||
|
getIsMobile,
|
||||||
|
getShowBread,
|
||||||
|
getShowContent,
|
||||||
|
getSplitType,
|
||||||
|
getSplit,
|
||||||
|
getMenuMode,
|
||||||
|
getShowTopMenu,
|
||||||
|
getShowLocalePicker,
|
||||||
|
getShowFullScreen,
|
||||||
|
getShowNotice,
|
||||||
|
getUseErrorHandle,
|
||||||
|
getLogoWidth,
|
||||||
|
getIsMixSidebar,
|
||||||
|
getShowSettingButton,
|
||||||
|
getShowSetting,
|
||||||
|
getShowSearch,
|
||||||
|
getCollapsed,
|
||||||
|
onMenuClick,
|
||||||
|
drawer
|
||||||
|
};
|
||||||
}
|
}
|
||||||
const settingButtonPosition = unref(getSettingButtonPosition);
|
});
|
||||||
|
|
||||||
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
|
|
||||||
return unref(getShowHeader);
|
|
||||||
}
|
|
||||||
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
|
|
||||||
});
|
|
||||||
|
|
||||||
const getLogoWidth = computed(() => {
|
|
||||||
if (!unref(getIsMixMode) || unref(getIsMobile)) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
|
|
||||||
return { width: `${width}px` };
|
|
||||||
});
|
|
||||||
|
|
||||||
const getSplitType = computed(() => {
|
|
||||||
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
|
|
||||||
});
|
|
||||||
|
|
||||||
const getMenuMode = computed(() => {
|
|
||||||
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
prefixCls,
|
|
||||||
getHeaderClass,
|
|
||||||
getShowHeaderLogo,
|
|
||||||
getHeaderTheme,
|
|
||||||
getShowHeaderTrigger,
|
|
||||||
getIsMobile,
|
|
||||||
getShowBread,
|
|
||||||
getShowContent,
|
|
||||||
getSplitType,
|
|
||||||
getSplit,
|
|
||||||
getMenuMode,
|
|
||||||
getShowTopMenu,
|
|
||||||
getShowLocalePicker,
|
|
||||||
getShowFullScreen,
|
|
||||||
getShowNotice,
|
|
||||||
getUseErrorHandle,
|
|
||||||
getLogoWidth,
|
|
||||||
getIsMixSidebar,
|
|
||||||
getShowSettingButton,
|
|
||||||
getShowSetting,
|
|
||||||
getShowSearch,
|
|
||||||
getCollapsed,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,26 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div @click="openDrawer(true)">
|
<div @click="openDrawer(true)">
|
||||||
<Icon icon="mdi:color" size="24" />
|
<SettingDrawer @register="register" />
|
||||||
<SettingDrawer @register="register" />
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent, defineExpose } from 'vue';
|
||||||
import SettingDrawer from './SettingDrawer';
|
import SettingDrawer from './SettingDrawer';
|
||||||
import Icon from '/@/components/Icon';
|
|
||||||
|
|
||||||
import { useDrawer } from '/@/components/Drawer';
|
import { useDrawer } from '/@/components/Drawer';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'SettingButton',
|
name: 'SettingButton',
|
||||||
components: { SettingDrawer, Icon },
|
components: { SettingDrawer },
|
||||||
setup() {
|
setup() {
|
||||||
const [register, { openDrawer }] = useDrawer();
|
const [register, { openDrawer }] = useDrawer();
|
||||||
|
|
||||||
return {
|
defineExpose({
|
||||||
register,
|
openDrawer
|
||||||
openDrawer,
|
});
|
||||||
};
|
|
||||||
},
|
return {
|
||||||
});
|
register,
|
||||||
|
openDrawer
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -38,7 +38,7 @@
|
|||||||
</ARow>
|
</ARow>
|
||||||
|
|
||||||
<FormItem class="enter-x">
|
<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('登录') }}
|
{{ t('登录') }}
|
||||||
</Button>
|
</Button>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
@ -195,7 +195,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sub-button {
|
.sub-button {
|
||||||
height: 60px;
|
height: 48px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user