😎1、优化日志页面与主题颜色匹配 2、修复下拉表格选择器组件错误

This commit is contained in:
zuohuaijun 2025-08-17 17:05:06 +08:00
parent 3dbb59b4db
commit 07e85a9900
7 changed files with 417 additions and 379 deletions

View File

@ -2,7 +2,7 @@
"name": "admin.net.pro", "name": "admin.net.pro",
"type": "module", "type": "module",
"version": "2.4.33", "version": "2.4.33",
"lastBuildTime": "2025.08.15", "lastBuildTime": "2025.08.17",
"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架", "description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
"author": "zuohuaijun", "author": "zuohuaijun",
"license": "MIT", "license": "MIT",
@ -26,8 +26,8 @@
"@vue-office/excel": "^1.7.14", "@vue-office/excel": "^1.7.14",
"@vue-office/pdf": "^2.0.10", "@vue-office/pdf": "^2.0.10",
"@vueuse/core": "^13.6.0", "@vueuse/core": "^13.6.0",
"@vxe-ui/plugin-export-xlsx": "^4.2.5", "@vxe-ui/plugin-export-xlsx": "^4.3.0",
"@vxe-ui/plugin-render-element": "^4.0.16", "@vxe-ui/plugin-render-element": "^4.1.0",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "^5.1.12",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
@ -88,7 +88,7 @@
"@iconify/vue": "^5.0.0", "@iconify/vue": "^5.0.0",
"@plugin-web-update-notification/vite": "^2.0.1", "@plugin-web-update-notification/vite": "^2.0.1",
"@types/lodash-es": "^4.17.12", "@types/lodash-es": "^4.17.12",
"@types/node": "^22.17.1", "@types/node": "^22.17.2",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",
"@types/sortablejs": "^1.15.8", "@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^8.39.1", "@typescript-eslint/eslint-plugin": "^8.39.1",
@ -97,7 +97,7 @@
"@vitejs/plugin-vue-jsx": "^5.0.1", "@vitejs/plugin-vue-jsx": "^5.0.1",
"@vue/compiler-sfc": "^3.5.18", "@vue/compiler-sfc": "^3.5.18",
"cli-progress": "^3.12.0", "cli-progress": "^3.12.0",
"code-inspector-plugin": "^1.1.1", "code-inspector-plugin": "^1.2.0",
"colors": "^1.4.0", "colors": "^1.4.0",
"dotenv": "^17.2.1", "dotenv": "^17.2.1",
"eslint": "^9.33.0", "eslint": "^9.33.0",

View File

@ -293,7 +293,8 @@ const setDefaultOptions = (options: any[]) => {
// //
const setQueryParams = (query: any, append: boolean = true) => { const setQueryParams = (query: any, append: boolean = true) => {
if (!pagination) { // if (!props.pagination) {
//
query = Object.assign(query, { query = Object.assign(query, {
page: 1, page: 1,
pageSize: 99999, pageSize: 99999,
@ -320,6 +321,7 @@ defineExpose({
setDefaultOptions, setDefaultOptions,
}); });
</script> </script>
<template> <template>
<el-select <el-select
v-model="state.selectedValues" v-model="state.selectedValues"
@ -341,7 +343,13 @@ defineExpose({
<el-option style="width: 0; height: 0" /> <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"> <div class="w100" v-loading="state.loading">
@ -350,7 +358,7 @@ defineExpose({
<!-- 查询表单插槽内容 --> <!-- 查询表单插槽内容 -->
<slot name="queryForm" :query="state.tableQuery" :handleQuery="handleQuery"></slot> <slot name="queryForm" :query="state.tableQuery" :handleQuery="handleQuery"></slot>
<!-- 查询和重置按钮 --> <!-- 查询和重置按钮 -->
<el-button-group style="position: absolute; right: 10px;"> <el-button-group style="position: absolute; right: 10px">
<el-button type="primary" icon="ele-Search" @click="remoteMethod(state.tableQuery)"> 查询 </el-button> <el-button type="primary" icon="ele-Search" @click="remoteMethod(state.tableQuery)"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button> <el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
</el-button-group> </el-button-group>
@ -372,7 +380,7 @@ defineExpose({
<!-- 分页组件 --> <!-- 分页组件 -->
<el-pagination <el-pagination
v-if="props.showPagination" v-if="props.pagination"
:disabled="state.loading" :disabled="state.loading"
:currentPage="state.tableQuery.page" :currentPage="state.tableQuery.page"
:page-size="state.tableQuery.pageSize" :page-size="state.tableQuery.pageSize"

View File

@ -16,7 +16,7 @@
* @constant * @constant
*/ */
const RENDER_TYPES = ['tag', 'select', 'radio', 'checkbox', 'radio-button'] as const; 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 * @constant
*/ */
const TAG_TYPES = ['success', 'warning', 'info', 'primary', 'danger'] as const; const TAG_TYPES = ['success', 'warning', 'info', 'primary', 'danger'] as const;
type TagType = typeof TAG_TYPES[number]; type TagType = (typeof TAG_TYPES)[number];
/** /**
* 字典项数据结构 * 字典项数据结构
@ -214,9 +214,7 @@ const props = defineProps({
* @returns {DictItem[]} - 过滤并格式化后的字典数据 * @returns {DictItem[]} - 过滤并格式化后的字典数据
*/ */
const formattedDictData = computed(() => { const formattedDictData = computed(() => {
return state.dictData return state.dictData.filter(props.onItemFilter).map((item) => ({
.filter(props.onItemFilter)
.map(item => ({
...item, ...item,
label: item[props.propLabel], label: item[props.propLabel],
value: item[props.propValue], value: item[props.propValue],
@ -234,12 +232,10 @@ const currentDictItems = computed(() => {
if (Array.isArray(state.value)) { if (Array.isArray(state.value)) {
// //
const uniqueValues = [...new Set(state.value)]; const uniqueValues = [...new Set(state.value)];
return formattedDictData.value.filter(item => return formattedDictData.value.filter((item) => uniqueValues.includes(item.value));
uniqueValues.includes(item.value)
);
} }
return formattedDictData.value.find(item => item.value == state.value) || null; return formattedDictData.value.find((item) => item.value == state.value) || null;
}); });
/** /**
@ -256,9 +252,7 @@ const getDataList = (): DictItem[] => {
} }
const source = props.isConst ? userStore.constList : userStore.dictList; const source = props.isConst ? userStore.constList : userStore.dictList;
const data = props.isConst const data = props.isConst ? (source?.find((x: any) => x.code === props.code)?.data?.result ?? []) : (source[props.code] ?? []);
? source?.find((x: any) => x.code === props.code)?.data?.result ?? []
: source[props.code] ?? [];
return data.map((item: any) => ({ return data.map((item: any) => ({
...item, ...item,
@ -278,7 +272,7 @@ const getDataList = (): DictItem[] => {
*/ */
const processNumericValues = (value: any) => { const processNumericValues = (value: any) => {
if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) { if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) {
state.dictData.forEach(item => { state.dictData.forEach((item) => {
if (item.value) { if (item.value) {
item.value = Number(item.value); item.value = Number(item.value);
} }
@ -320,11 +314,14 @@ const parseMultipleValue = (value: any): any => {
// //
if (props.multipleModel === MultipleModel.Comma && trimmedValue.includes(',')) { if (props.multipleModel === MultipleModel.Comma && trimmedValue.includes(',')) {
// //
return [...new Set( return [
trimmedValue.split(',') ...new Set(
.map(item => item.trim()) trimmedValue
.split(',')
.map((item) => item.trim())
.filter(Boolean) .filter(Boolean)
)]; ),
];
} }
// //
@ -349,7 +346,7 @@ const updateValue = (newValue: any) => {
// //
let processedValue = newValue; let processedValue = newValue;
if (Array.isArray(newValue)) { if (Array.isArray(newValue)) {
processedValue = [...new Set(newValue.filter(v => v !== null && v !== undefined && v !== ''))]; processedValue = [...new Set(newValue.filter((v) => v !== null && v !== undefined && v !== ''))];
} }
let emitValue = processedValue; let emitValue = processedValue;
@ -373,7 +370,7 @@ const updateValue = (newValue: any) => {
* @returns {TagType} - 合法的标签类型 * @returns {TagType} - 合法的标签类型
*/ */
const ensureTagType = (item: DictItem): 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';
}; };
/** /**
@ -412,9 +409,12 @@ const state = reactive({
}); });
// //
watch(() => props.modelValue, (newValue) => { watch(
() => props.modelValue,
(newValue) => {
state.value = parseMultipleValue(newValue); state.value = parseMultipleValue(newValue);
}); }
);
watch(() => [userStore.dictList, userStore.constList], initData, { immediate: true }); watch(() => [userStore.dictList, userStore.constList], initData, { immediate: true });
</script> </script>

View File

@ -134,6 +134,10 @@ const state = reactive({
logMaxValue: 1, 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({ const echartsOption = ref({
title: { title: {
top: 30, top: 30,
@ -148,9 +152,12 @@ const echartsOption = ref({
}, },
visualMap: { visualMap: {
show: true, show: true,
// inRange: { inRange: {
// color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'], color: colors,
// }, },
outOfRange: {
color: ['#000000'],
},
min: 0, min: 0,
max: 1000, max: 1000,
maxOpen: { maxOpen: {

View File

@ -176,6 +176,10 @@ const state = reactive({
logMaxValue: 1, 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({ const echartsOption = ref({
title: { title: {
top: 30, top: 30,
@ -190,9 +194,12 @@ const echartsOption = ref({
}, },
visualMap: { visualMap: {
show: true, show: true,
// inRange: { inRange: {
// color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'], color: colors,
// }, },
outOfRange: {
color: ['#000000'],
},
min: 0, min: 0,
max: 1000, max: 1000,
maxOpen: { maxOpen: {

View File

@ -136,6 +136,10 @@ const state = reactive({
logMaxValue: 1, 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({ const echartsOption = ref({
title: { title: {
top: 30, top: 30,
@ -150,9 +154,12 @@ const echartsOption = ref({
}, },
visualMap: { visualMap: {
show: true, show: true,
// inRange: { inRange: {
// color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'], color: colors,
// }, },
outOfRange: {
color: ['#000000'],
},
min: 0, min: 0,
max: 1000, max: 1000,
maxOpen: { maxOpen: {

View File

@ -1,23 +1,32 @@
<template> <template>
<div class="weChatPay-container"> <div class="weChatPay-container">
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> <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" :inline="true"> <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-form-item label="订单号">
<el-input v-model="state.queryParams.keyword" clearable="" placeholder="请输入订单号" /> <el-input v-model="state.queryParams.keyword" clearable="" placeholder="请输入订单号" />
</el-form-item> </el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="创建时间"> <el-form-item label="创建时间">
<el-date-picker placeholder="请选择创建时间" value-format="YYYY/MM/DD" type="daterange" v-model="state.queryParams.createTimeRange" /> <el-date-picker placeholder="请选择创建时间" value-format="YYYY/MM/DD" type="daterange" v-model="state.queryParams.createTimeRange" />
</el-form-item> </el-form-item>
<el-form-item> </el-col>
<el-button-group> </el-row>
<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-form> </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>
<el-card class="full-table" shadow="hover" style="margin-top: 5px"> <el-card class="full-table" shadow="hover" style="margin-top: 5px">