XW-AIOT/aiot-uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【system】字段管理：100%

Browse Source
This commit is contained in:
YunaiV
2025-12-21 15:38:46 +08:00
parent fc5e60965f
commit 14a3406290
8 changed files with 116 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages-system/dict/components/data-list.vue
View File

@@ -1,18 +1,10 @@
<template>
<view>
<!-- 搜索组件 -->
<DataSearchForm @search="handleQuery" @reset="handleReset" />
<DataSearchForm :dict-type="dictType" @search="handleQuery" @reset="handleReset" />
<!-- 字典数据列表 -->
<view class="p-24rpx">
<!-- 当前字典类型提示 -->
<view v-if="dictType" class="mb-24rpx rounded-12rpx bg-blue-50 p-16rpx text-28rpx text-blue-600">
当前字典类型：{{ dictType }}
</view>
<view v-else class="mb-24rpx rounded-12rpx bg-orange-50 p-16rpx text-28rpx text-orange-600">
请先在"字典类型"中选择一个字典类型
</view>
<view
v-for="item in list"
:key="item.id"
@@ -36,9 +28,9 @@
</view>
<view class="mb-12rpx flex items-center text-28rpx text-[#666]">
<text class="mr-8rpx shrink-0 text-[#999]">颜色类型：</text>
<view v-if="item.colorType" class="rounded-4rpx px-8rpx py-2rpx text-24rpx text-white" :style="{ backgroundColor: getColorStyle(item.colorType) }">
<wd-tag v-if="item.colorType" :type="getTagType(item.colorType)">
{{ item.colorType }}
</view>
</wd-tag>
<text v-else>-</text>
</view>
<view class="mb-12rpx flex items-center text-28rpx text-[#666]">
@@ -78,6 +70,7 @@
</template>
<script lang="ts" setup>
import type { TagType } from 'wot-design-uni/components/wd-tag/types'
import type { DictData } from '@/api/system/dict/data'
import type { LoadMoreState } from '@/http/types'
import { ref, watch } from 'vue'
@@ -101,40 +94,31 @@ const queryParams = ref({
dictType: undefined as string | undefined,
})
/** 颜色类型映射 */
const colorMap: Record<string, string> = {
processing: '#1890ff',
success: '#52c41a',
default: '#d9d9d9',
warning: '#faad14',
error: '#ff4d4f',
pink: '#eb2f96',
red: '#f5222d',
orange: '#fa8c16',
green: '#52c41a',
cyan: '#13c2c2',
blue: '#1890ff',
purple: '#722ed1',
/** 颜色类型 => wd-tag 的 type 映射，和 src/components/dict-tag/dict-tag.vue 是一致的 */
const COLOR_TYPE_MAP: Record<string, TagType> = {
default: 'default',
primary: 'primary',
success: 'success',
info: 'default', // wd-tag 无 info，映射为 default
warning: 'warning',
danger: 'danger',
}
/** 获取颜色样式 */
function getColorStyle(colorType: string) {
return colorMap[colorType] || colorType
/** 获取标签类型 */
function getTagType(colorType: string): TagType {
return COLOR_TYPE_MAP[colorType] || 'default'
}
/** 查询列表 */
async function getList() {
if (!props.dictType) {
if (!queryParams.value.dictType) {
list.value = []
loadMoreState.value = 'finished'
return
}
loadMoreState.value = 'loading'
try {
const data = await getDictDataPage({
...queryParams.value,
dictType: props.dictType,
})
const data = await getDictDataPage(queryParams.value)
list.value = [...list.value, ...data.list]
total.value = data.total
loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
@@ -150,7 +134,7 @@ function handleQuery(data?: Record<string, any>) {
...data,
pageNo: 1,
pageSize: queryParams.value.pageSize,
dictType: props.dictType,
dictType: data?.dictType || props.dictType,
}
list.value = []
getList()
@@ -190,6 +174,7 @@ watch(
() => {
if (props.dictType) {
queryParams.value.pageNo = 1
queryParams.value.dictType = props.dictType
list.value = []
getList()
}
@@ -203,8 +188,7 @@ onReachBottom(() => {
/** 初始化 */
onMounted(() => {
if (props.dictType) {
getList()
}
queryParams.value.dictType = props.dictType
getList()
})
</script>

52
src/pages-system/dict/components/data-search-form.vue
View File

@@ -7,6 +7,18 @@
<!-- 搜索弹窗 -->
<wd-popup v-model="visible" position="top" @close="visible = false">
<view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
<view class="yd-search-form-item">
<view class="yd-search-form-label">
字典类型
</view>
<wd-picker
v-model="formData.dictType"
:columns="dictTypeOptions"
label-key="label"
value-key="value"
placeholder="请选择字典类型"
/>
</view>
<view class="yd-search-form-item">
<view class="yd-search-form-label">
字典标签
@@ -47,11 +59,16 @@
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { getSimpleDictTypeList } from '@/api/system/dict/type'
import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
import { getNavbarHeight } from '@/utils'
import { DICT_TYPE } from '@/utils/constants'
const props = defineProps<{
dictType?: string
}>()
const emit = defineEmits<{
search: [data: Record<string, any>]
reset: []
@@ -59,13 +76,30 @@ const emit = defineEmits<{
const visible = ref(false)
const formData = reactive({
dictType: undefined as string | undefined,
label: undefined as string | undefined,
status: -1,
})
/** 字典类型选项 */
const dictTypeOptions = ref<{ label: string, value: string }[]>([])
/** 加载字典类型列表 */
async function loadDictTypeList() {
const list = await getSimpleDictTypeList()
dictTypeOptions.value = list.map(item => ({
label: item.name,
value: item.type,
}))
}
/** 搜索条件 placeholder 拼接 */
const placeholder = computed(() => {
const conditions: string[] = []
if (formData.dictType) {
const dictTypeItem = dictTypeOptions.value.find(item => item.value === formData.dictType)
conditions.push(`类型:${dictTypeItem?.label || formData.dictType}`)
}
if (formData.label) {
conditions.push(`标签:${formData.label}`)
}
@@ -79,6 +113,7 @@ const placeholder = computed(() => {
function handleSearch() {
visible.value = false
emit('search', {
dictType: formData.dictType || undefined,
label: formData.label || undefined,
status: formData.status === -1 ? undefined : formData.status,
})
@@ -86,9 +121,24 @@ function handleSearch() {
/** 重置 */
function handleReset() {
formData.dictType = props.dictType
formData.label = undefined
formData.status = -1
visible.value = false
emit('reset')
}
/** 监听外部 dictType 变化 */
watch(
() => props.dictType,
(val) => {
formData.dictType = val
},
{ immediate: true },
)
/** 初始化 */
onMounted(() => {
loadDictTypeList()
})
</script>

4
src/pages-system/dict/components/type-list.vue
View File

@@ -31,9 +31,9 @@
<text>{{ formatDateTime(item.createTime) || '-' }}</text>
</view>
<!-- 查看数据按钮 -->
<view class="mt-16rpx flex justify-end">
<view class="flex justify-end -mt-8">
<wd-button size="small" type="info" @click.stop="handleSelectType(item)">
查看数据
字典数据
</wd-button>
</view>
</view>

45
src/pages-system/dict/data/detail/index.vue
View File

@@ -10,18 +10,18 @@
<!-- 详情内容 -->
<view>
<wd-cell-group border>
<wd-cell title="字典编码" :value="String(formData?.id ?? '-')" />
<wd-cell title="字典类型" :value="String(formData?.dictType ?? '-')" />
<wd-cell title="字典标签" :value="String(formData?.label ?? '-')" />
<wd-cell title="字典键值" :value="String(formData?.value ?? '-')" />
<wd-cell title="字典排序" :value="String(formData?.sort ?? '-')" />
<wd-cell title="字典编码" :value="formData?.id ?? '-'" />
<wd-cell title="字典类型" :value="formData?.dictType ?? '-'" />
<wd-cell title="字典标签" :value="formData?.label ?? '-'" />
<wd-cell title="字典键值" :value="formData?.value ?? '-'" />
<wd-cell title="字典排序" :value="formData?.sort ?? '-'" />
<wd-cell title="状态">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData?.status" />
</wd-cell>
<wd-cell title="颜色类型">
<view v-if="formData?.colorType" class="rounded-4rpx px-8rpx py-2rpx text-24rpx text-white" :style="{ backgroundColor: getColorStyle(formData.colorType) }">
<wd-tag v-if="formData?.colorType" :type="getTagType(formData.colorType)">
{{ formData.colorType }}
</view>
</wd-tag>
<text v-else>-</text>
</wd-cell>
<wd-cell title="CSS Class">
@@ -56,6 +56,7 @@
</template>
<script lang="ts" setup>
import type { TagType } from 'wot-design-uni/components/wd-tag/types'
import type { DictData } from '@/api/system/dict/data'
import { onMounted, ref } from 'vue'
import { useToast } from 'wot-design-uni'
@@ -81,25 +82,21 @@ const toast = useToast()
const formData = ref<DictData>()
const deleting = ref(false)
/** 颜色类型映射 */
const colorMap: Record<string, string> = {
processing: '#1890ff',
success: '#52c41a',
default: '#d9d9d9',
warning: '#faad14',
error: '#ff4d4f',
pink: '#eb2f96',
red: '#f5222d',
orange: '#fa8c16',
green: '#52c41a',
cyan: '#13c2c2',
blue: '#1890ff',
purple: '#722ed1',
/** 颜色类型 => wd-tag 的 type 映射 */
const COLOR_TYPE_MAP: Record<string, TagType> = {
default: 'default',
primary: 'primary',
success: 'success',
info: 'default',
warning: 'warning',
danger: 'danger',
error: 'danger',
processing: 'primary',
}
/** 获取颜色样式 */
function getColorStyle(colorType: string) {
return colorMap[colorType] || colorType
/** 获取标签类型 */
function getTagType(colorType: string): TagType {
return COLOR_TYPE_MAP[colorType] || 'default'
}
/** 返回上一页 */

21
src/pages-system/dict/data/form/index.vue
View File

@@ -60,7 +60,7 @@
<wd-cell title="颜色类型" title-width="200rpx" prop="colorType" center>
<wd-picker
v-model="formData.colorType"
:columns="colorOptions"
:columns="getStrDictOptions(DICT_TYPE.SYSTEM_DICT_COLOR_TYPE)"
label-key="label"
value-key="value"
placeholder="请选择颜色类型"
@@ -106,7 +106,7 @@ import { computed, onMounted, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { createDictData, getDictData, updateDictData } from '@/api/system/dict/data'
import { getSimpleDictTypeList } from '@/api/system/dict/type'
import { getIntDictOptions } from '@/hooks/useDict'
import { getIntDictOptions, getStrDictOptions } from '@/hooks/useDict'
import { navigateBackPlus } from '@/utils'
import { DICT_TYPE } from '@/utils/constants'
@@ -148,23 +148,6 @@ const formRef = ref()
/** 字典类型选项 */
const dictTypeOptions = ref<{ label: string, value: string }[]>([])
/** 颜色类型选项 */
const colorOptions = [
{ value: '', label: '无' },
{ value: 'processing', label: '主要' },
{ value: 'success', label: '成功' },
{ value: 'default', label: '默认' },
{ value: 'warning', label: '警告' },
{ value: 'error', label: '危险' },
{ value: 'pink', label: 'pink' },
{ value: 'red', label: 'red' },
{ value: 'orange', label: 'orange' },
{ value: 'green', label: 'green' },
{ value: 'cyan', label: 'cyan' },
{ value: 'blue', label: 'blue' },
{ value: 'purple', label: 'purple' },
]
/** 返回上一页 */
function handleBack() {
navigateBackPlus('/pages-system/dict/index')

4
src/pages-system/dict/type/form/index.vue
View File

@@ -72,7 +72,7 @@ import { useToast } from 'wot-design-uni'
import { createDictType, getDictType, updateDictType } from '@/api/system/dict/type'
import { getIntDictOptions } from '@/hooks/useDict'
import { navigateBackPlus } from '@/utils'
import { DICT_TYPE } from '@/utils/constants'
import { CommonStatusEnum, DICT_TYPE } from '@/utils/constants'
const props = defineProps<{
id?: number | any
@@ -92,7 +92,7 @@ const formData = ref<DictType>({
id: undefined,
name: '',
type: '',
status: 0,
status: CommonStatusEnum.ENABLE,
remark: '',
})
const formRules = {

16
src/pages/index/index.ts
View File

@@ -141,6 +141,14 @@ const menuGroupsData: MenuGroup[] = [
iconColor: '#d48806',
permission: 'system:oauth2-client:query',
},
{
key: 'dict',
name: '字典管理',
icon: 'hourglass',
url: '/pages-system/dict/index',
iconColor: '#faad14',
permission: 'system:dict:query',
},
],
},
{
@@ -179,6 +187,14 @@ const menuGroupsData: MenuGroup[] = [
iconColor: '#13c2c2',
permission: 'infra:data-source-config:query',
},
{
key: 'file',
name: '文件管理',
icon: 'folder',
url: '/pages-infra/file/index',
iconColor: '#1890ff',
permission: 'infra:file:query',
},
{
key: 'websocket',
name: 'WebSocket',

1
src/utils/constants/dict-enum.ts
View File

@@ -23,6 +23,7 @@ const SYSTEM_DICT = {
SYSTEM_MAIL_SEND_STATUS: 'system_mail_send_status',
SYSTEM_NOTIFY_TEMPLATE_TYPE: 'system_notify_template_type',
SYSTEM_SOCIAL_TYPE: 'system_social_type',
SYSTEM_DICT_COLOR_TYPE: 'system_dict_color_type', // 字典颜色类型
} as const
/** ========== INFRA - 基础设施模块 ========== */