😎1、优化日志页面与主题颜色匹配 2、修复下拉表格选择器组件错误
This commit is contained in:
zuohuaijun
parent
3dbb59b4db
commit
07e85a9900
@ -2,7 +2,7 @@
|
||||
"name": "admin.net.pro",
|
||||
"type": "module",
|
||||
"version": "2.4.33",
|
||||
"lastBuildTime": "2025.08.15",
|
||||
"lastBuildTime": "2025.08.17",
|
||||
"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
|
||||
"author": "zuohuaijun",
|
||||
"license": "MIT",
|
||||
@ -26,8 +26,8 @@
|
||||
"@vue-office/excel": "^1.7.14",
|
||||
"@vue-office/pdf": "^2.0.10",
|
||||
"@vueuse/core": "^13.6.0",
|
||||
"@vxe-ui/plugin-export-xlsx": "^4.2.5",
|
||||
"@vxe-ui/plugin-render-element": "^4.0.16",
|
||||
"@vxe-ui/plugin-export-xlsx": "^4.3.0",
|
||||
"@vxe-ui/plugin-render-element": "^4.1.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"animate.css": "^4.1.1",
|
||||
@ -88,7 +88,7 @@
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@plugin-web-update-notification/vite": "^2.0.1",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^22.17.1",
|
||||
"@types/node": "^22.17.2",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@typescript-eslint/eslint-plugin": "^8.39.1",
|
||||
@ -97,7 +97,7 @@
|
||||
"@vitejs/plugin-vue-jsx": "^5.0.1",
|
||||
"@vue/compiler-sfc": "^3.5.18",
|
||||
"cli-progress": "^3.12.0",
|
||||
"code-inspector-plugin": "^1.1.1",
|
||||
"code-inspector-plugin": "^1.2.0",
|
||||
"colors": "^1.4.0",
|
||||
"dotenv": "^17.2.1",
|
||||
"eslint": "^9.33.0",
|
||||
|
||||
@ -58,7 +58,7 @@ const props = defineProps({
|
||||
/**
|
||||
* 获取表数据的异步方法
|
||||
* @example
|
||||
* // 异步方式示例
|
||||
* // 异步方式示例
|
||||
* const handleSysUserTable = (params: any) => {
|
||||
* return getAPI(SysUserApi).apiSysUserPagePost(params);
|
||||
* };
|
||||
@ -240,7 +240,7 @@ const remoteMethod = debounce((query) => {
|
||||
state.tableQuery = query;
|
||||
}
|
||||
props.fetchOptions(Object.assign({}, props.queryParams, state.tableQuery)).then((res: any) => {
|
||||
const result = res.data?.result;
|
||||
const result = res.data?.result;
|
||||
state.tableData.items = result?.items ?? [];
|
||||
state.tableData.total = result.total;
|
||||
state.loading = false;
|
||||
@ -293,12 +293,13 @@ const setDefaultOptions = (options: any[]) => {
|
||||
|
||||
// 设置查询参数
|
||||
const setQueryParams = (query: any, append: boolean = true) => {
|
||||
if (!pagination) { // 不启用分页，则全量显示
|
||||
query = Object.assign(query, {
|
||||
page: 1,
|
||||
pageSize: 99999,
|
||||
});
|
||||
}
|
||||
if (!props.pagination) {
|
||||
// 不启用分页，则全量显示
|
||||
query = Object.assign(query, {
|
||||
page: 1,
|
||||
pageSize: 99999,
|
||||
});
|
||||
}
|
||||
query = Object.assign({}, props.queryParams, query ?? {});
|
||||
state.tableQuery = append ? Object.assign(state.tableQuery, query) : query;
|
||||
};
|
||||
@ -320,72 +321,79 @@ defineExpose({
|
||||
setDefaultOptions,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-select
|
||||
v-model="state.selectedValues"
|
||||
:clearable="clearable"
|
||||
:multiple="multiple"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:allow-create="allowCreate"
|
||||
:remote-method="remoteMethod"
|
||||
:default-first-option="allowCreate"
|
||||
@visible-change="(val: boolean) => (val ? handleQuery() : null)"
|
||||
popper-class="popper-class"
|
||||
ref="selectRef"
|
||||
remote-show-suffix
|
||||
filterable
|
||||
remote
|
||||
>
|
||||
<!-- 隐藏的选项，用于占位 -->
|
||||
<el-option style="width: 0; height: 0" />
|
||||
<el-select
|
||||
v-model="state.selectedValues"
|
||||
:clearable="clearable"
|
||||
:multiple="multiple"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:allow-create="allowCreate"
|
||||
:remote-method="remoteMethod"
|
||||
:default-first-option="allowCreate"
|
||||
@visible-change="(val: boolean) => (val ? handleQuery() : null)"
|
||||
popper-class="popper-class"
|
||||
ref="selectRef"
|
||||
remote-show-suffix
|
||||
filterable
|
||||
remote
|
||||
>
|
||||
<!-- 隐藏的选项，用于占位 -->
|
||||
<el-option style="width: 0; height: 0" />
|
||||
|
||||
<!-- 默认选项，用于回显数据 -->
|
||||
<el-option v-for="item in (state.defaultOptions ?? []).filter((e) => !state.tableData?.items?.find((e2) => e2[valueProp] === e[valueProp]))" :key="item[valueProp]" :label="labelFormat(item) || item[labelProp]" :value="item[valueProp]" style="width: 0; height: 0" />
|
||||
<!-- 默认选项，用于回显数据 -->
|
||||
<el-option
|
||||
v-for="item in (state.defaultOptions ?? []).filter((e) => !state.tableData?.items?.find((e2) => e2[valueProp] === e[valueProp]))"
|
||||
:key="item[valueProp]"
|
||||
:label="labelFormat(item) || item[labelProp]"
|
||||
:value="item[valueProp]"
|
||||
style="width: 0; height: 0"
|
||||
/>
|
||||
|
||||
<!-- 下拉框内容区域 -->
|
||||
<div class="w100" v-loading="state.loading">
|
||||
<el-form :model="state.tableQuery" v-if="$slots.queryForm" class="mg5 query-form" @click.stop>
|
||||
<el-row :gutter="10">
|
||||
<!-- 查询表单插槽内容 -->
|
||||
<slot name="queryForm" :query="state.tableQuery" :handleQuery="handleQuery"></slot>
|
||||
<!-- 查询和重置按钮 -->
|
||||
<el-button-group style="position: absolute; right: 10px;">
|
||||
<el-button type="primary" icon="ele-Search" @click="remoteMethod(state.tableQuery)"> 查询 </el-button>
|
||||
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
|
||||
</el-button-group>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 下拉框内容区域 -->
|
||||
<div class="w100" v-loading="state.loading">
|
||||
<el-form :model="state.tableQuery" v-if="$slots.queryForm" class="mg5 query-form" @click.stop>
|
||||
<el-row :gutter="10">
|
||||
<!-- 查询表单插槽内容 -->
|
||||
<slot name="queryForm" :query="state.tableQuery" :handleQuery="handleQuery"></slot>
|
||||
<!-- 查询和重置按钮 -->
|
||||
<el-button-group style="position: absolute; right: 10px">
|
||||
<el-button type="primary" icon="ele-Search" @click="remoteMethod(state.tableQuery)"> 查询 </el-button>
|
||||
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
|
||||
</el-button-group>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
@row-click="handleChange"
|
||||
:data="state.tableData?.items ?? []"
|
||||
:height="`calc(${dropdownHeight} - 175px${$slots.queryForm ? ' - 35px' : ''})`"
|
||||
:style="{ width: dropdownWidth }"
|
||||
highlight-current-row
|
||||
>
|
||||
<template #empty><el-empty :image-size="25" /></template>
|
||||
<slot name="columns"></slot>
|
||||
</el-table>
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
@row-click="handleChange"
|
||||
:data="state.tableData?.items ?? []"
|
||||
:height="`calc(${dropdownHeight} - 175px${$slots.queryForm ? ' - 35px' : ''})`"
|
||||
:style="{ width: dropdownWidth }"
|
||||
highlight-current-row
|
||||
>
|
||||
<template #empty><el-empty :image-size="25" /></template>
|
||||
<slot name="columns"></slot>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<el-pagination
|
||||
v-if="props.showPagination"
|
||||
:disabled="state.loading"
|
||||
:currentPage="state.tableQuery.page"
|
||||
:page-size="state.tableQuery.pageSize"
|
||||
:total="state.tableData.total"
|
||||
:pager-count="4"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
size="small"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
</el-select>
|
||||
<!-- 分页组件 -->
|
||||
<el-pagination
|
||||
v-if="props.pagination"
|
||||
:disabled="state.loading"
|
||||
:currentPage="state.tableQuery.page"
|
||||
:page-size="state.tableQuery.pageSize"
|
||||
:total="state.tableData.total"
|
||||
:pager-count="4"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
size="small"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
</el-select>
|
||||
</template>
|
||||
<style scoped>
|
||||
.query-form {
|
||||
@ -399,4 +407,4 @@ defineExpose({
|
||||
.popper-class {
|
||||
min-width: 400px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* @constant
|
||||
*/
|
||||
const RENDER_TYPES = ['tag', 'select', 'radio', 'checkbox', 'radio-button'] as const;
|
||||
type RenderType = typeof RENDER_TYPES[number];
|
||||
type RenderType = (typeof RENDER_TYPES)[number];
|
||||
|
||||
/**
|
||||
* 支持的标签类型常量
|
||||
@ -24,7 +24,7 @@ type RenderType = typeof RENDER_TYPES[number];
|
||||
* @constant
|
||||
*/
|
||||
const TAG_TYPES = ['success', 'warning', 'info', 'primary', 'danger'] as const;
|
||||
type TagType = typeof TAG_TYPES[number];
|
||||
type TagType = (typeof TAG_TYPES)[number];
|
||||
|
||||
/**
|
||||
* 字典项数据结构
|
||||
@ -36,12 +36,12 @@ type TagType = typeof TAG_TYPES[number];
|
||||
* @property {string|number} [value] - 值
|
||||
*/
|
||||
interface DictItem {
|
||||
[key: string]: any;
|
||||
tagType?: TagType;
|
||||
styleSetting?: string;
|
||||
classSetting?: string;
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
[key: string]: any;
|
||||
tagType?: TagType;
|
||||
styleSetting?: string;
|
||||
classSetting?: string;
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -51,8 +51,8 @@ interface DictItem {
|
||||
* @property {string} Comma - 逗号分隔模式，如'1,2,3'
|
||||
*/
|
||||
enum MultipleModel {
|
||||
Array = 'array',
|
||||
Comma = 'comma',
|
||||
Array = 'array',
|
||||
Comma = 'comma',
|
||||
}
|
||||
|
||||
/**
|
||||
@ -62,7 +62,7 @@ enum MultipleModel {
|
||||
* @returns {value is RenderType} - 是否为合法的渲染类型
|
||||
*/
|
||||
function isRenderType(value: any): value is RenderType {
|
||||
return RENDER_TYPES.includes(value);
|
||||
return RENDER_TYPES.includes(value);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -72,7 +72,7 @@ function isRenderType(value: any): value is RenderType {
|
||||
* @returns {value is MultipleModel} - 是否为合法的多选模式
|
||||
*/
|
||||
function isMultipleModel(value: any): value is MultipleModel {
|
||||
return Object.values(MultipleModel).includes(value);
|
||||
return Object.values(MultipleModel).includes(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -87,125 +87,125 @@ const emit = defineEmits(['update:modelValue']);
|
||||
* 组件属性定义
|
||||
*/
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 绑定值，支持多种类型
|
||||
* @type {string|number|boolean|Array|null}
|
||||
* @required
|
||||
* @example
|
||||
* // 单选选择器
|
||||
* <g-sys-dict v-model="selectedValue" code="gender" renderAs="select" />
|
||||
*
|
||||
* // 多选选择器（数组模式）
|
||||
* <g-sys-dict v-model="selectedValues" code="roles" renderAs="select" multiple />
|
||||
*
|
||||
* // 多选选择器（逗号模式）
|
||||
* <g-sys-dict v-model="selectedValues" code="roles" renderAs="select" multiple multiple-model="comma" />
|
||||
*/
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean, Array, null] as PropType<string | number | boolean | any[] | null>,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
/**
|
||||
* 字典编码，用于从字典中获取数据
|
||||
* @type {string}
|
||||
* @required
|
||||
* @example 'gender'
|
||||
*/
|
||||
code: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
/**
|
||||
* 是否为常量字典（true从常量列表获取，false从字典列表获取）
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @example true
|
||||
*/
|
||||
isConst: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 字典项中用于显示的字段名
|
||||
* @type {string}
|
||||
* @default 'label'
|
||||
* @example 'name'
|
||||
*/
|
||||
propLabel: {
|
||||
type: String,
|
||||
default: 'label',
|
||||
},
|
||||
/**
|
||||
* 字典项中用于取值的字段名
|
||||
* @type {string}
|
||||
* @default 'value'
|
||||
* @example 'id'
|
||||
*/
|
||||
propValue: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
},
|
||||
/**
|
||||
* 字典项过滤函数
|
||||
* @type {Function}
|
||||
* @param {DictItem} dict - 当前字典项
|
||||
* @returns {boolean} - 是否保留该项
|
||||
* @default (dict) => true
|
||||
* @example
|
||||
* // 只显示启用的字典项
|
||||
* :onItemFilter="(dict) => dict.status === 1"
|
||||
*/
|
||||
onItemFilter: {
|
||||
type: Function as PropType<(dict: DictItem) => boolean>,
|
||||
default: () => true,
|
||||
},
|
||||
/**
|
||||
* 字典项显示内容格式化函数
|
||||
* @type {Function}
|
||||
* @param {DictItem} dict - 当前字典项
|
||||
* @returns {string|undefined|null} - 格式化后的显示内容
|
||||
* @default () => undefined
|
||||
* @example
|
||||
* // 在标签前添加图标
|
||||
* :onItemFormatter="(dict) => `${dict.label} <icon-user />`"
|
||||
*/
|
||||
onItemFormatter: {
|
||||
type: Function as PropType<(dict: DictItem) => string | undefined | null>,
|
||||
default: () => undefined,
|
||||
},
|
||||
/**
|
||||
* 组件渲染方式
|
||||
* @type {'tag'|'select'|'radio'|'checkbox'|'radio-button'}
|
||||
* @default 'tag'
|
||||
* @example 'select'
|
||||
*/
|
||||
renderAs: {
|
||||
type: String as PropType<RenderType>,
|
||||
default: 'tag',
|
||||
validator: isRenderType,
|
||||
},
|
||||
/**
|
||||
* 是否多选（仅在renderAs为select/checkbox时有效）
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @example true
|
||||
*/
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 多选值模式（仅在multiple为true时有效）
|
||||
* @type {'array'|'comma'}
|
||||
* @default 'array'
|
||||
* @example 'comma'
|
||||
*/
|
||||
multipleModel: {
|
||||
type: String as PropType<MultipleModel>,
|
||||
default: MultipleModel.Array,
|
||||
validator: isMultipleModel,
|
||||
},
|
||||
/**
|
||||
* 绑定值，支持多种类型
|
||||
* @type {string|number|boolean|Array|null}
|
||||
* @required
|
||||
* @example
|
||||
* // 单选选择器
|
||||
* <g-sys-dict v-model="selectedValue" code="gender" renderAs="select" />
|
||||
*
|
||||
* // 多选选择器（数组模式）
|
||||
* <g-sys-dict v-model="selectedValues" code="roles" renderAs="select" multiple />
|
||||
*
|
||||
* // 多选选择器（逗号模式）
|
||||
* <g-sys-dict v-model="selectedValues" code="roles" renderAs="select" multiple multiple-model="comma" />
|
||||
*/
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean, Array, null] as PropType<string | number | boolean | any[] | null>,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
/**
|
||||
* 字典编码，用于从字典中获取数据
|
||||
* @type {string}
|
||||
* @required
|
||||
* @example 'gender'
|
||||
*/
|
||||
code: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
/**
|
||||
* 是否为常量字典（true从常量列表获取，false从字典列表获取）
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @example true
|
||||
*/
|
||||
isConst: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 字典项中用于显示的字段名
|
||||
* @type {string}
|
||||
* @default 'label'
|
||||
* @example 'name'
|
||||
*/
|
||||
propLabel: {
|
||||
type: String,
|
||||
default: 'label',
|
||||
},
|
||||
/**
|
||||
* 字典项中用于取值的字段名
|
||||
* @type {string}
|
||||
* @default 'value'
|
||||
* @example 'id'
|
||||
*/
|
||||
propValue: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
},
|
||||
/**
|
||||
* 字典项过滤函数
|
||||
* @type {Function}
|
||||
* @param {DictItem} dict - 当前字典项
|
||||
* @returns {boolean} - 是否保留该项
|
||||
* @default (dict) => true
|
||||
* @example
|
||||
* // 只显示启用的字典项
|
||||
* :onItemFilter="(dict) => dict.status === 1"
|
||||
*/
|
||||
onItemFilter: {
|
||||
type: Function as PropType<(dict: DictItem) => boolean>,
|
||||
default: () => true,
|
||||
},
|
||||
/**
|
||||
* 字典项显示内容格式化函数
|
||||
* @type {Function}
|
||||
* @param {DictItem} dict - 当前字典项
|
||||
* @returns {string|undefined|null} - 格式化后的显示内容
|
||||
* @default () => undefined
|
||||
* @example
|
||||
* // 在标签前添加图标
|
||||
* :onItemFormatter="(dict) => `${dict.label} <icon-user />`"
|
||||
*/
|
||||
onItemFormatter: {
|
||||
type: Function as PropType<(dict: DictItem) => string | undefined | null>,
|
||||
default: () => undefined,
|
||||
},
|
||||
/**
|
||||
* 组件渲染方式
|
||||
* @type {'tag'|'select'|'radio'|'checkbox'|'radio-button'}
|
||||
* @default 'tag'
|
||||
* @example 'select'
|
||||
*/
|
||||
renderAs: {
|
||||
type: String as PropType<RenderType>,
|
||||
default: 'tag',
|
||||
validator: isRenderType,
|
||||
},
|
||||
/**
|
||||
* 是否多选（仅在renderAs为select/checkbox时有效）
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @example true
|
||||
*/
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 多选值模式（仅在multiple为true时有效）
|
||||
* @type {'array'|'comma'}
|
||||
* @default 'array'
|
||||
* @example 'comma'
|
||||
*/
|
||||
multipleModel: {
|
||||
type: String as PropType<MultipleModel>,
|
||||
default: MultipleModel.Array,
|
||||
validator: isMultipleModel,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
@ -214,13 +214,11 @@ const props = defineProps({
|
||||
* @returns {DictItem[]} - 过滤并格式化后的字典数据
|
||||
*/
|
||||
const formattedDictData = computed(() => {
|
||||
return state.dictData
|
||||
.filter(props.onItemFilter)
|
||||
.map(item => ({
|
||||
...item,
|
||||
label: item[props.propLabel],
|
||||
value: item[props.propValue],
|
||||
}));
|
||||
return state.dictData.filter(props.onItemFilter).map((item) => ({
|
||||
...item,
|
||||
label: item[props.propLabel],
|
||||
value: item[props.propValue],
|
||||
}));
|
||||
});
|
||||
|
||||
/**
|
||||
@ -229,17 +227,15 @@ const formattedDictData = computed(() => {
|
||||
* @returns {DictItem|DictItem[]|null} - 当前选中的字典项或字典项数组
|
||||
*/
|
||||
const currentDictItems = computed(() => {
|
||||
if (!state.value) return null;
|
||||
if (!state.value) return null;
|
||||
|
||||
if (Array.isArray(state.value)) {
|
||||
// 确保回显时也去重
|
||||
const uniqueValues = [...new Set(state.value)];
|
||||
return formattedDictData.value.filter(item =>
|
||||
uniqueValues.includes(item.value)
|
||||
);
|
||||
}
|
||||
if (Array.isArray(state.value)) {
|
||||
// 确保回显时也去重
|
||||
const uniqueValues = [...new Set(state.value)];
|
||||
return formattedDictData.value.filter((item) => uniqueValues.includes(item.value));
|
||||
}
|
||||
|
||||
return formattedDictData.value.find(item => item.value == state.value) || null;
|
||||
return formattedDictData.value.find((item) => item.value == state.value) || null;
|
||||
});
|
||||
|
||||
/**
|
||||
@ -249,26 +245,24 @@ const currentDictItems = computed(() => {
|
||||
* @throws {Error} - 获取数据失败时抛出错误
|
||||
*/
|
||||
const getDataList = (): DictItem[] => {
|
||||
try {
|
||||
if (!props.code) {
|
||||
console.error('字典编码不能为空');
|
||||
return [];
|
||||
}
|
||||
try {
|
||||
if (!props.code) {
|
||||
console.error('字典编码不能为空');
|
||||
return [];
|
||||
}
|
||||
|
||||
const source = props.isConst ? userStore.constList : userStore.dictList;
|
||||
const data = props.isConst
|
||||
? source?.find((x: any) => x.code === props.code)?.data?.result ?? []
|
||||
: source[props.code] ?? [];
|
||||
const source = props.isConst ? userStore.constList : userStore.dictList;
|
||||
const data = props.isConst ? (source?.find((x: any) => x.code === props.code)?.data?.result ?? []) : (source[props.code] ?? []);
|
||||
|
||||
return data.map((item: any) => ({
|
||||
...item,
|
||||
label: item[props.propLabel] ?? item.name,
|
||||
value: item[props.propValue] ?? item.code,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error(`获取字典[${props.code}]数据失败:`, error);
|
||||
return [];
|
||||
}
|
||||
return data.map((item: any) => ({
|
||||
...item,
|
||||
label: item[props.propLabel] ?? item.name,
|
||||
value: item[props.propValue] ?? item.code,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error(`获取字典[${props.code}]数据失败:`, error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -277,13 +271,13 @@ const getDataList = (): DictItem[] => {
|
||||
* @param {any} value - 待处理的值
|
||||
*/
|
||||
const processNumericValues = (value: any) => {
|
||||
if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) {
|
||||
state.dictData.forEach(item => {
|
||||
if (item.value) {
|
||||
item.value = Number(item.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) {
|
||||
state.dictData.forEach((item) => {
|
||||
if (item.value) {
|
||||
item.value = Number(item.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -293,51 +287,54 @@ const processNumericValues = (value: any) => {
|
||||
* @returns {any} - 解析后的值
|
||||
*/
|
||||
const parseMultipleValue = (value: any): any => {
|
||||
// 处理空值情况
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return props.multiple ? [] : value;
|
||||
}
|
||||
// 处理空值情况
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return props.multiple ? [] : value;
|
||||
}
|
||||
|
||||
// 处理字符串值
|
||||
if (typeof value === 'string') {
|
||||
const trimmedValue = value.trim();
|
||||
// 处理字符串值
|
||||
if (typeof value === 'string') {
|
||||
const trimmedValue = value.trim();
|
||||
|
||||
// 处理JSON数组格式
|
||||
if (trimmedValue.startsWith('[') && trimmedValue.endsWith(']')) {
|
||||
try {
|
||||
const parsed = JSON.parse(trimmedValue);
|
||||
if (Array.isArray(parsed)) {
|
||||
// 去重处理
|
||||
return [...new Set(parsed.filter(Boolean))];
|
||||
}
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
console.warn('[g-sys-dict] 解析多选值失败:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
// 处理JSON数组格式
|
||||
if (trimmedValue.startsWith('[') && trimmedValue.endsWith(']')) {
|
||||
try {
|
||||
const parsed = JSON.parse(trimmedValue);
|
||||
if (Array.isArray(parsed)) {
|
||||
// 去重处理
|
||||
return [...new Set(parsed.filter(Boolean))];
|
||||
}
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
console.warn('[g-sys-dict] 解析多选值失败:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// 处理逗号分隔格式
|
||||
if (props.multipleModel === MultipleModel.Comma && trimmedValue.includes(',')) {
|
||||
// 去重处理
|
||||
return [...new Set(
|
||||
trimmedValue.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean)
|
||||
)];
|
||||
}
|
||||
// 处理逗号分隔格式
|
||||
if (props.multipleModel === MultipleModel.Comma && trimmedValue.includes(',')) {
|
||||
// 去重处理
|
||||
return [
|
||||
...new Set(
|
||||
trimmedValue
|
||||
.split(',')
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
// 处理单个值情况
|
||||
return props.multiple ? [trimmedValue] : trimmedValue;
|
||||
}
|
||||
// 处理单个值情况
|
||||
return props.multiple ? [trimmedValue] : trimmedValue;
|
||||
}
|
||||
|
||||
// 处理数组值 - 添加去重
|
||||
if (Array.isArray(value)) {
|
||||
return [...new Set(value.filter(Boolean))];
|
||||
}
|
||||
// 处理数组值 - 添加去重
|
||||
if (Array.isArray(value)) {
|
||||
return [...new Set(value.filter(Boolean))];
|
||||
}
|
||||
|
||||
// 其他情况直接返回
|
||||
return value;
|
||||
// 其他情况直接返回
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -346,24 +343,24 @@ const parseMultipleValue = (value: any): any => {
|
||||
* @param {any} newValue - 新值
|
||||
*/
|
||||
const updateValue = (newValue: any) => {
|
||||
// 先对值进行去重处理
|
||||
let processedValue = newValue;
|
||||
if (Array.isArray(newValue)) {
|
||||
processedValue = [...new Set(newValue.filter(v => v !== null && v !== undefined && v !== ''))];
|
||||
}
|
||||
// 先对值进行去重处理
|
||||
let processedValue = newValue;
|
||||
if (Array.isArray(newValue)) {
|
||||
processedValue = [...new Set(newValue.filter((v) => v !== null && v !== undefined && v !== ''))];
|
||||
}
|
||||
|
||||
let emitValue = processedValue;
|
||||
let emitValue = processedValue;
|
||||
|
||||
if (props.multipleModel === MultipleModel.Comma) {
|
||||
if (Array.isArray(processedValue)) {
|
||||
emitValue = processedValue.length > 0 ? processedValue.join(',') : '';
|
||||
} else if (processedValue === null || processedValue === undefined) {
|
||||
emitValue = '';
|
||||
}
|
||||
}
|
||||
if (props.multipleModel === MultipleModel.Comma) {
|
||||
if (Array.isArray(processedValue)) {
|
||||
emitValue = processedValue.length > 0 ? processedValue.join(',') : '';
|
||||
} else if (processedValue === null || processedValue === undefined) {
|
||||
emitValue = '';
|
||||
}
|
||||
}
|
||||
|
||||
state.value = processedValue;
|
||||
emit('update:modelValue', emitValue);
|
||||
state.value = processedValue;
|
||||
emit('update:modelValue', emitValue);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -373,7 +370,7 @@ const updateValue = (newValue: any) => {
|
||||
* @returns {TagType} - 合法的标签类型
|
||||
*/
|
||||
const ensureTagType = (item: DictItem): TagType => {
|
||||
return TAG_TYPES.includes(item.tagType as TagType) ? item.tagType as TagType : 'primary';
|
||||
return TAG_TYPES.includes(item.tagType as TagType) ? (item.tagType as TagType) : 'primary';
|
||||
};
|
||||
|
||||
/**
|
||||
@ -383,9 +380,9 @@ const ensureTagType = (item: DictItem): TagType => {
|
||||
* @returns {string} - 显示文本
|
||||
*/
|
||||
const getDisplayText = (dict?: DictItem): string => {
|
||||
if (!dict) return String(state.value || '');
|
||||
const formattedText = props.onItemFormatter?.(dict);
|
||||
return formattedText ?? dict[props.propLabel] ?? '';
|
||||
if (!dict) return String(state.value || '');
|
||||
const formattedText = props.onItemFormatter?.(dict);
|
||||
return formattedText ?? dict[props.propLabel] ?? '';
|
||||
};
|
||||
|
||||
/**
|
||||
@ -393,12 +390,12 @@ const getDisplayText = (dict?: DictItem): string => {
|
||||
* @function
|
||||
*/
|
||||
const initData = () => {
|
||||
state.dictData = getDataList();
|
||||
processNumericValues(props.modelValue);
|
||||
const initialValue = parseMultipleValue(props.modelValue);
|
||||
if (initialValue !== state.value) {
|
||||
state.value = initialValue;
|
||||
}
|
||||
state.dictData = getDataList();
|
||||
processNumericValues(props.modelValue);
|
||||
const initialValue = parseMultipleValue(props.modelValue);
|
||||
if (initialValue !== state.value) {
|
||||
state.value = initialValue;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -407,58 +404,61 @@ const initData = () => {
|
||||
* @property {any} value - 当前值
|
||||
*/
|
||||
const state = reactive({
|
||||
dictData: [] as DictItem[],
|
||||
value: parseMultipleValue(props.modelValue),
|
||||
dictData: [] as DictItem[],
|
||||
value: parseMultipleValue(props.modelValue),
|
||||
});
|
||||
|
||||
// 监听数据变化
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
state.value = parseMultipleValue(newValue);
|
||||
});
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
state.value = parseMultipleValue(newValue);
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => [userStore.dictList, userStore.constList], initData, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 渲染标签 -->
|
||||
<template v-if="props.renderAs === 'tag'">
|
||||
<template v-if="Array.isArray(currentDictItems)">
|
||||
<el-tag v-for="(item, index) in currentDictItems" :key="index" v-bind="$attrs" :type="ensureTagType(item)" :style="item.styleSetting" :class="item.classSetting" class="mr2">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag v-if="currentDictItems" v-bind="$attrs" :type="ensureTagType(currentDictItems)" :style="currentDictItems.styleSetting" :class="currentDictItems.classSetting">
|
||||
{{ getDisplayText(currentDictItems) }}
|
||||
</el-tag>
|
||||
<span v-else>{{ getDisplayText() }}</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 渲染标签 -->
|
||||
<template v-if="props.renderAs === 'tag'">
|
||||
<template v-if="Array.isArray(currentDictItems)">
|
||||
<el-tag v-for="(item, index) in currentDictItems" :key="index" v-bind="$attrs" :type="ensureTagType(item)" :style="item.styleSetting" :class="item.classSetting" class="mr2">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag v-if="currentDictItems" v-bind="$attrs" :type="ensureTagType(currentDictItems)" :style="currentDictItems.styleSetting" :class="currentDictItems.classSetting">
|
||||
{{ getDisplayText(currentDictItems) }}
|
||||
</el-tag>
|
||||
<span v-else>{{ getDisplayText() }}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 渲染选择器 -->
|
||||
<el-select v-else-if="props.renderAs === 'select'" v-model="state.value" v-bind="$attrs" :multiple="props.multiple" @change="updateValue" clearable>
|
||||
<el-option v-for="(item, index) in formattedDictData" :key="index" :label="getDisplayText(item)" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 渲染选择器 -->
|
||||
<el-select v-else-if="props.renderAs === 'select'" v-model="state.value" v-bind="$attrs" :multiple="props.multiple" @change="updateValue" clearable>
|
||||
<el-option v-for="(item, index) in formattedDictData" :key="index" :label="getDisplayText(item)" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 渲染复选框（多选） -->
|
||||
<el-checkbox-group v-else-if="props.renderAs === 'checkbox'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||
<el-checkbox-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<!-- 渲染复选框（多选） -->
|
||||
<el-checkbox-group v-else-if="props.renderAs === 'checkbox'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||
<el-checkbox-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
|
||||
<!-- 渲染单选框 -->
|
||||
<el-radio-group v-else-if="props.renderAs === 'radio'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||
<el-radio v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 渲染单选框 -->
|
||||
<el-radio-group v-else-if="props.renderAs === 'radio'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||
<el-radio v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<!-- 渲染单选框按钮 -->
|
||||
<el-radio-group v-else-if="props.renderAs === 'radio-button'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||
<el-radio-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<!-- 渲染单选框按钮 -->
|
||||
<el-radio-group v-else-if="props.renderAs === 'radio-button'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||
<el-radio-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||
{{ getDisplayText(item) }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -134,6 +134,10 @@ const state = reactive({
|
||||
logMaxValue: 1,
|
||||
});
|
||||
|
||||
// 获取主题颜色变量
|
||||
const colors = ['--el-color-primary-light-9', '--el-color-primary-light-7', '--el-color-primary-light-5', '--el-color-primary-light-3', '--el-color-primary-light-1', '--el-color-primary'].map(
|
||||
(variable) => getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
|
||||
);
|
||||
const echartsOption = ref({
|
||||
title: {
|
||||
top: 30,
|
||||
@ -148,9 +152,12 @@ const echartsOption = ref({
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
// inRange: {
|
||||
// color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'],
|
||||
// },
|
||||
inRange: {
|
||||
color: colors,
|
||||
},
|
||||
outOfRange: {
|
||||
color: ['#000000'],
|
||||
},
|
||||
min: 0,
|
||||
max: 1000,
|
||||
maxOpen: {
|
||||
|
||||
@ -176,6 +176,10 @@ const state = reactive({
|
||||
logMaxValue: 1,
|
||||
});
|
||||
|
||||
// 获取主题颜色变量
|
||||
const colors = ['--el-color-primary-light-9', '--el-color-primary-light-7', '--el-color-primary-light-5', '--el-color-primary-light-3', '--el-color-primary-light-1', '--el-color-primary'].map(
|
||||
(variable) => getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
|
||||
);
|
||||
const echartsOption = ref({
|
||||
title: {
|
||||
top: 30,
|
||||
@ -190,9 +194,12 @@ const echartsOption = ref({
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
// inRange: {
|
||||
// color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'],
|
||||
// },
|
||||
inRange: {
|
||||
color: colors,
|
||||
},
|
||||
outOfRange: {
|
||||
color: ['#000000'],
|
||||
},
|
||||
min: 0,
|
||||
max: 1000,
|
||||
maxOpen: {
|
||||
|
||||
@ -136,6 +136,10 @@ const state = reactive({
|
||||
logMaxValue: 1,
|
||||
});
|
||||
|
||||
// 获取主题颜色变量
|
||||
const colors = ['--el-color-primary-light-9', '--el-color-primary-light-7', '--el-color-primary-light-5', '--el-color-primary-light-3', '--el-color-primary-light-1', '--el-color-primary'].map(
|
||||
(variable) => getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
|
||||
);
|
||||
const echartsOption = ref({
|
||||
title: {
|
||||
top: 30,
|
||||
@ -150,9 +154,12 @@ const echartsOption = ref({
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
// inRange: {
|
||||
// color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'],
|
||||
// },
|
||||
inRange: {
|
||||
color: colors,
|
||||
},
|
||||
outOfRange: {
|
||||
color: ['#000000'],
|
||||
},
|
||||
min: 0,
|
||||
max: 1000,
|
||||
maxOpen: {
|
||||
|
||||
@ -1,23 +1,32 @@
|
||||
<template>
|
||||
<div class="weChatPay-container">
|
||||
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
||||
<el-form :model="state.queryParams" ref="queryForm" :inline="true">
|
||||
<el-form-item label="订单号">
|
||||
<el-input v-model="state.queryParams.keyword" clearable="" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker placeholder="请选择创建时间" value-format="YYYY/MM/DD" type="daterange" v-model="state.queryParams.createTimeRange" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="ele-Search" @click="handleQuery()"> 查询 </el-button>
|
||||
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="ele-Plus" @click="openAddDialog">新增模拟数据</el-button>
|
||||
</el-form-item>
|
||||
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
|
||||
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
|
||||
<el-row :gutter="10">
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="订单号">
|
||||
<el-input v-model="state.queryParams.keyword" clearable="" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker placeholder="请选择创建时间" value-format="YYYY/MM/DD" type="daterange" v-model="state.queryParams.createTimeRange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="ele-Search" @click="handleQuery()"> {{ $t('message.list.query') }} </el-button>
|
||||
<el-button icon="ele-Refresh" @click="resetQuery"> {{ $t('message.list.reset') }} </el-button>
|
||||
</el-button-group>
|
||||
<el-button type="primary" icon="ele-Plus" @click="openAddDialog" style="margin-left: 10px">新增模拟数据</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user