转为使用element-plus
This commit is contained in:
+1
-1
@@ -17,11 +17,11 @@
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@ckeditor/ckeditor5-vue": "^7.3.0",
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.13.2",
|
||||
"ckeditor5": "^47.4.0",
|
||||
"crypto-js": "^4.2.0",
|
||||
"echarts": "^6.0.0",
|
||||
"element-plus": "^2.13.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"pinia": "^3.0.4",
|
||||
|
||||
+1
-88
@@ -1,92 +1,5 @@
|
||||
<script setup>
|
||||
import { onMounted, computed, watch, nextTick } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useI18nStore } from './stores/modules/i18n'
|
||||
import { useLayoutStore } from './stores/modules/layout'
|
||||
import { theme } from 'ant-design-vue'
|
||||
import i18n from './i18n'
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN'
|
||||
import enUS from 'ant-design-vue/es/locale/en_US'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/zh-cn'
|
||||
import 'dayjs/locale/en'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'App'
|
||||
})
|
||||
|
||||
// i18n store
|
||||
const i18nStore = useI18nStore()
|
||||
|
||||
// layout store
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
// 解构 themeColor 以确保响应式
|
||||
const { themeColor } = storeToRefs(layoutStore)
|
||||
|
||||
// Ant Design Vue 语言配置
|
||||
const antLocale = computed(() => {
|
||||
return i18nStore.currentLocale === 'zh-CN' ? zhCN : enUS
|
||||
})
|
||||
|
||||
// 获取弹出容器
|
||||
const getPopupContainer = () => {
|
||||
return document.body
|
||||
}
|
||||
|
||||
// Ant Design Vue 主题配置
|
||||
const antdTheme = computed(() => {
|
||||
return {
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
token: {
|
||||
colorPrimary: themeColor.value || '#1890ff',
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
},
|
||||
components: {
|
||||
Layout: {
|
||||
headerBg: '#fff',
|
||||
siderBg: '#001529',
|
||||
},
|
||||
Menu: {
|
||||
darkItemBg: '#001529',
|
||||
darkItemSelectedBg: themeColor.value || '#1890ff',
|
||||
darkItemHoverBg: '#002140',
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
// 监听主题颜色变化，更新 CSS 变量
|
||||
watch(
|
||||
themeColor,
|
||||
(newColor) => {
|
||||
if (newColor) {
|
||||
document.documentElement.style.setProperty('--primary-color', newColor)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
|
||||
// 从持久化的 store 中读取语言设置并同步到 i18n
|
||||
i18n.global.locale.value = i18nStore.currentLocale
|
||||
|
||||
// 同步 dayjs 语言
|
||||
dayjs.locale(i18nStore.currentLocale === 'zh-CN' ? 'zh-cn' : 'en')
|
||||
|
||||
// 初始化主题颜色到 CSS 变量
|
||||
if (layoutStore.themeColor) {
|
||||
document.documentElement.style.setProperty('--primary-color', layoutStore.themeColor)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-config-provider :locale="antLocale" :theme="antdTheme" :getPopupContainer="getPopupContainer">
|
||||
<router-view />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<template><router-view /></template>
|
||||
|
||||
@@ -1,320 +0,0 @@
|
||||
<template>
|
||||
<a-form :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="layout"
|
||||
@finish="handleFinish" @finish-failed="handleFinishFailed">
|
||||
<a-form-item v-for="item in formItems" :key="item.field" :label="item.label" :name="item.field"
|
||||
:required="item.required" :colon="item.colon">
|
||||
<!-- 输入框 -->
|
||||
<template v-if="item.type === 'input'">
|
||||
<a-input v-model:value="formData[item.field]" :placeholder="item.placeholder || `请输入${item.label}`"
|
||||
:disabled="item.disabled" :allow-clear="item.allowClear !== false" :max-length="item.maxLength"
|
||||
:type="item.inputType || 'text'" :prefix="item.prefix" :suffix="item.suffix"
|
||||
@change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 文本域 -->
|
||||
<template v-else-if="item.type === 'textarea'">
|
||||
<a-textarea v-model:value="formData[item.field]" :placeholder="item.placeholder || `请输入${item.label}`"
|
||||
:disabled="item.disabled" :allow-clear="item.allowClear !== false" :rows="item.rows || 4"
|
||||
:max-length="item.maxLength" :show-count="item.showCount"
|
||||
@change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<template v-else-if="item.type === 'password'">
|
||||
<a-input-password v-model:value="formData[item.field]"
|
||||
:placeholder="item.placeholder || `请输入${item.label}`" :disabled="item.disabled"
|
||||
:max-length="item.maxLength" @change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 数字输入框 -->
|
||||
<template v-else-if="item.type === 'number'">
|
||||
<a-input-number v-model:value="formData[item.field]"
|
||||
:placeholder="item.placeholder || `请输入${item.label}`" :disabled="item.disabled" :min="item.min"
|
||||
:max="item.max" :step="item.step || 1" :precision="item.precision"
|
||||
:controls="item.controls !== false" style="width: 100%"
|
||||
@change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 下拉选择 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<a-select v-model:value="formData[item.field]" :placeholder="item.placeholder || `请选择${item.label}`"
|
||||
:disabled="item.disabled" :allow-clear="item.allowClear !== false" :mode="item.mode"
|
||||
:options="item.options" :field-names="item.fieldNames" style="width: 100%"
|
||||
@change="item.onChange && item.onChange(formData[item.field])">
|
||||
<template v-if="!item.options" #notFoundContent>
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
|
||||
</template>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<!-- 单选框 -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<a-radio-group v-model:value="formData[item.field]" :disabled="item.disabled"
|
||||
:button-style="item.buttonStyle" @change="item.onChange && item.onChange(formData[item.field])">
|
||||
<template v-if="item.options">
|
||||
<a-radio v-for="opt in item.options" :key="opt.value" :value="opt.value"
|
||||
:disabled="opt.disabled">
|
||||
{{ opt.label }}
|
||||
</a-radio>
|
||||
</template>
|
||||
<template v-else-if="item.buttonStyle === 'solid'">
|
||||
<a-radio-button v-for="opt in item.options" :key="opt.value" :value="opt.value"
|
||||
:disabled="opt.disabled">
|
||||
{{ opt.label }}
|
||||
</a-radio-button>
|
||||
</template>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
|
||||
<!-- 多选框 -->
|
||||
<template v-else-if="item.type === 'checkbox'">
|
||||
<a-checkbox-group v-model:value="formData[item.field]" :disabled="item.disabled"
|
||||
@change="item.onChange && item.onChange(formData[item.field])">
|
||||
<template v-if="item.options">
|
||||
<a-checkbox v-for="opt in item.options" :key="opt.value" :value="opt.value"
|
||||
:disabled="opt.disabled">
|
||||
{{ opt.label }}
|
||||
</a-checkbox>
|
||||
</template>
|
||||
</a-checkbox-group>
|
||||
</template>
|
||||
|
||||
<!-- 开关 -->
|
||||
<template v-else-if="item.type === 'switch'">
|
||||
<a-switch v-model:checked="formData[item.field]" :disabled="item.disabled"
|
||||
:checked-children="item.checkedChildren || '开'" :un-checked-children="item.unCheckedChildren || '关'"
|
||||
@change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<template v-else-if="item.type === 'date'">
|
||||
<a-date-picker v-model:value="formData[item.field]"
|
||||
:placeholder="item.placeholder || `请选择${item.label}`" :disabled="item.disabled"
|
||||
:format="item.format || 'YYYY-MM-DD'" :value-format="item.valueFormat || 'YYYY-MM-DD'"
|
||||
style="width: 100%" @change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 日期范围选择 -->
|
||||
<template v-else-if="item.type === 'dateRange'">
|
||||
<a-range-picker v-model:value="formData[item.field]" :placeholder="item.placeholder || ['开始日期', '结束日期']"
|
||||
:disabled="item.disabled" :format="item.format || 'YYYY-MM-DD'"
|
||||
:value-format="item.valueFormat || 'YYYY-MM-DD'" style="width: 100%"
|
||||
@change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 时间选择 -->
|
||||
<template v-else-if="item.type === 'time'">
|
||||
<a-time-picker v-model:value="formData[item.field]"
|
||||
:placeholder="item.placeholder || `请选择${item.label}`" :disabled="item.disabled"
|
||||
:format="item.format || 'HH:mm:ss'" :value-format="item.valueFormat || 'HH:mm:ss'"
|
||||
style="width: 100%" @change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 上传 -->
|
||||
<template v-else-if="item.type === 'upload'">
|
||||
<a-upload v-model:file-list="formData[item.field]" :list-type="item.listType || 'text'"
|
||||
:action="item.action" :max-count="item.maxCount" :before-upload="item.beforeUpload"
|
||||
:custom-request="item.customRequest" :accept="item.accept" :disabled="item.disabled"
|
||||
@change="(info) => item.onChange && item.onChange(info)">
|
||||
<a-button v-if="item.listType !== 'picture-card'" type="primary">
|
||||
<UploadOutlined />
|
||||
点击上传
|
||||
</a-button>
|
||||
<div v-else>
|
||||
<PlusOutlined />
|
||||
<div class="ant-upload-text">上传</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</template>
|
||||
|
||||
<!-- 评分 -->
|
||||
<template v-else-if="item.type === 'rate'">
|
||||
<a-rate v-model:value="formData[item.field]" :disabled="item.disabled" :count="item.count || 5"
|
||||
:allow-half="item.allowHalf" @change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 滑块 -->
|
||||
<template v-else-if="item.type === 'slider'">
|
||||
<a-slider v-model:value="formData[item.field]" :disabled="item.disabled" :min="item.min || 0"
|
||||
:max="item.max || 100" :step="item.step || 1" :marks="item.marks" :range="item.range"
|
||||
@change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 级联选择 -->
|
||||
<template v-else-if="item.type === 'cascader'">
|
||||
<a-cascader v-model:value="formData[item.field]" :options="item.options"
|
||||
:placeholder="item.placeholder || `请选择${item.label}`" :disabled="item.disabled"
|
||||
:change-on-select="item.changeOnSelect" :field-names="item.fieldNames" style="width: 100%"
|
||||
@change="item.onChange && item.onChange(formData[item.field])" />
|
||||
</template>
|
||||
|
||||
<!-- 自定义插槽 -->
|
||||
<template v-else-if="item.type === 'slot'">
|
||||
<slot :name="item.slotName || item.field" :field="item.field" :value="formData[item.field]"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<template v-if="item.tip">
|
||||
<div class="form-item-tip">{{ item.tip }}</div>
|
||||
</template>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 表单操作按钮 -->
|
||||
<a-form-item v-if="showActions" :wrapper-col="actionWrapperCol">
|
||||
<a-space>
|
||||
<a-button type="primary" html-type="submit" :loading="loading" :size="buttonSize">
|
||||
{{ submitText || '提交' }}
|
||||
</a-button>
|
||||
<a-button v-if="showReset" @click="handleReset" :size="buttonSize">
|
||||
{{ resetText || '重置' }}
|
||||
</a-button>
|
||||
<a-button v-if="showCancel" @click="handleCancel" :size="buttonSize">
|
||||
{{ cancelText || '取消' }}
|
||||
</a-button>
|
||||
<slot name="actions"></slot>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 自定义插槽 -->
|
||||
<slot></slot>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import { UploadOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
// 表单项配置
|
||||
formItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
// 表单初始值
|
||||
initialValues: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 表单布局
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'horizontal', // horizontal, vertical, inline
|
||||
},
|
||||
// 标签宽度
|
||||
labelCol: {
|
||||
type: Object,
|
||||
default: () => ({ span: 6 }),
|
||||
},
|
||||
// 内容宽度
|
||||
wrapperCol: {
|
||||
type: Object,
|
||||
default: () => ({ span: 16 }),
|
||||
},
|
||||
// 是否显示操作按钮
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 操作按钮布局
|
||||
actionWrapperCol: {
|
||||
type: Object,
|
||||
default: () => ({ offset: 6, span: 16 }),
|
||||
},
|
||||
// 是否显示重置按钮
|
||||
showReset: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否显示取消按钮
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 按钮文字
|
||||
submitText: String,
|
||||
resetText: String,
|
||||
cancelText: String,
|
||||
// 按钮大小
|
||||
buttonSize: {
|
||||
type: String,
|
||||
default: 'middle',
|
||||
},
|
||||
// 加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['finish', 'finish-failed', 'reset', 'cancel'])
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({ ...props.initialValues })
|
||||
|
||||
// 表单验证规则
|
||||
const rules = computed(() => {
|
||||
const result = {}
|
||||
props.formItems.forEach((item) => {
|
||||
if (item.rules && item.rules.length > 0) {
|
||||
result[item.field] = item.rules
|
||||
}
|
||||
})
|
||||
return result
|
||||
})
|
||||
|
||||
// 监听初始值变化
|
||||
watch(
|
||||
() => props.initialValues,
|
||||
(newVal) => {
|
||||
Object.assign(formData, newVal)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
// 表单提交
|
||||
const handleFinish = (values) => {
|
||||
emit('finish', values)
|
||||
}
|
||||
|
||||
// 表单验证失败
|
||||
const handleFinishFailed = (errorInfo) => {
|
||||
emit('finish-failed', errorInfo)
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const handleReset = () => {
|
||||
Object.assign(formData, props.initialValues)
|
||||
emit('reset', formData)
|
||||
}
|
||||
|
||||
// 取消操作
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
formData,
|
||||
resetForm: handleReset,
|
||||
setFieldValue: (field, value) => {
|
||||
formData[field] = value
|
||||
},
|
||||
getFieldValue: (field) => {
|
||||
return formData[field]
|
||||
},
|
||||
setFieldsValue: (values) => {
|
||||
Object.assign(formData, values)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-item-tip {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -1,508 +0,0 @@
|
||||
<template>
|
||||
<div class="sc-icon-picker">
|
||||
<a-input :value="selectedIcon ? '' : ''" :placeholder="placeholder" readonly @click="handleOpenPicker">
|
||||
<template #prefix v-if="selectedIcon">
|
||||
<component :is="selectedIcon" />
|
||||
</template>
|
||||
<template #suffix>
|
||||
<SearchOutlined v-if="!selectedIcon" />
|
||||
<CloseCircleFilled v-else @click.stop="handleClear" />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<a-modal v-model:open="visible" title="选择图标" :width="800" :footer="null" @cancel="handleCancel">
|
||||
<a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
|
||||
<a-tab-pane key="antd" tab="Ant Design">
|
||||
<div class="icon-search">
|
||||
<a-input v-model:value="searchAntdValue" placeholder="搜索图标..." allow-clear>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="icon-list">
|
||||
<div
|
||||
v-for="icon in filteredAntdIcons"
|
||||
:key="icon"
|
||||
:class="['icon-item', { active: tempIcon === icon }]"
|
||||
@click="handleSelectIcon(icon)"
|
||||
>
|
||||
<component :is="icon" />
|
||||
<div class="icon-name">{{ icon }}</div>
|
||||
</div>
|
||||
<a-empty v-if="filteredAntdIcons.length === 0" description="暂无图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="element" tab="Element Plus">
|
||||
<div class="icon-search">
|
||||
<a-input v-model:value="searchElementValue" placeholder="搜索图标..." allow-clear>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="icon-list">
|
||||
<div
|
||||
v-for="icon in filteredElementIcons"
|
||||
:key="icon"
|
||||
:class="['icon-item', { active: tempIcon === icon }]"
|
||||
@click="handleSelectIcon(icon)"
|
||||
>
|
||||
<component :is="icon" />
|
||||
<div class="icon-name">{{ icon.replace('El', '') }}</div>
|
||||
</div>
|
||||
<a-empty v-if="filteredElementIcons.length === 0" description="暂无图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* @component scIconPicker
|
||||
*/
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择图标',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
|
||||
const visible = ref(false)
|
||||
const activeTab = ref('antd')
|
||||
const searchAntdValue = ref('')
|
||||
const searchElementValue = ref('')
|
||||
const tempIcon = ref('')
|
||||
|
||||
// Ant Design 图标列表（常用图标）
|
||||
const antdIcons = [
|
||||
'HomeOutlined',
|
||||
'UserOutlined',
|
||||
'SettingOutlined',
|
||||
'EditOutlined',
|
||||
'DeleteOutlined',
|
||||
'PlusOutlined',
|
||||
'MinusOutlined',
|
||||
'CheckOutlined',
|
||||
'CloseOutlined',
|
||||
'SearchOutlined',
|
||||
'FilterOutlined',
|
||||
'ReloadOutlined',
|
||||
'DownloadOutlined',
|
||||
'UploadOutlined',
|
||||
'FileTextOutlined',
|
||||
'FolderOutlined',
|
||||
'PictureOutlined',
|
||||
'VideoCameraOutlined',
|
||||
'AudioOutlined',
|
||||
'FileOutlined',
|
||||
'CalendarOutlined',
|
||||
'ClockCircleOutlined',
|
||||
'HeartOutlined',
|
||||
'StarOutlined',
|
||||
'ThumbUpOutlined',
|
||||
'MessageOutlined',
|
||||
'PhoneOutlined',
|
||||
'MailOutlined',
|
||||
'EnvironmentOutlined',
|
||||
'GlobalOutlined',
|
||||
'LinkOutlined',
|
||||
'LockOutlined',
|
||||
'UnlockOutlined',
|
||||
'EyeOutlined',
|
||||
'EyeInvisibleOutlined',
|
||||
'ArrowLeftOutlined',
|
||||
'ArrowRightOutlined',
|
||||
'ArrowUpOutlined',
|
||||
'ArrowDownOutlined',
|
||||
'CaretLeftOutlined',
|
||||
'CaretRightOutlined',
|
||||
'CaretUpOutlined',
|
||||
'CaretDownOutlined',
|
||||
'LeftOutlined',
|
||||
'RightOutlined',
|
||||
'UpOutlined',
|
||||
'DownOutlined',
|
||||
'MenuFoldOutlined',
|
||||
'MenuUnfoldOutlined',
|
||||
'BarsOutlined',
|
||||
'MoreOutlined',
|
||||
'EllipsisOutlined',
|
||||
'DashboardOutlined',
|
||||
'AppstoreOutlined',
|
||||
'LaptopOutlined',
|
||||
'DesktopOutlined',
|
||||
'TabletOutlined',
|
||||
'MobileOutlined',
|
||||
'WifiOutlined',
|
||||
'BluetoothOutlined',
|
||||
'ThunderboltOutlined',
|
||||
'BulbOutlined',
|
||||
'SoundOutlined',
|
||||
'NotificationOutlined',
|
||||
'BellOutlined',
|
||||
'AlertOutlined',
|
||||
'WarningOutlined',
|
||||
'InfoCircleOutlined',
|
||||
'QuestionCircleOutlined',
|
||||
'CheckCircleOutlined',
|
||||
'CloseCircleOutlined',
|
||||
'StopOutlined',
|
||||
'ExclamationCircleOutlined',
|
||||
'SafetyOutlined',
|
||||
'ShieldCheckOutlined',
|
||||
'SecurityScanOutlined',
|
||||
'KeyOutlined',
|
||||
'IdcardOutlined',
|
||||
'ProfileOutlined',
|
||||
'SolutionOutlined',
|
||||
'ContactsOutlined',
|
||||
'TeamOutlined',
|
||||
'UsergroupAddOutlined',
|
||||
'UsergroupDeleteOutlined',
|
||||
'CrownOutlined',
|
||||
'GoldOutlined',
|
||||
'MoneyCollectOutlined',
|
||||
'BankOutlined',
|
||||
'PayCircleOutlined',
|
||||
'CreditCardOutlined',
|
||||
'WalletOutlined',
|
||||
'ShoppingCartOutlined',
|
||||
'ShoppingOutlined',
|
||||
'GiftOutlined',
|
||||
'HddOutlined',
|
||||
'DatabaseOutlined',
|
||||
'CloudOutlined',
|
||||
'CloudUploadOutlined',
|
||||
'CloudDownloadOutlined',
|
||||
'ServerOutlined',
|
||||
'AuditOutlined',
|
||||
'NodeIndexOutlined',
|
||||
'ReconciliationOutlined',
|
||||
'PartitionOutlined',
|
||||
'AccountBookOutlined',
|
||||
'ProjectOutlined',
|
||||
'ControlOutlined',
|
||||
'MonitorOutlined',
|
||||
'TagsOutlined',
|
||||
'TagOutlined',
|
||||
'BookOutlined',
|
||||
'ReadOutlined',
|
||||
'ExperimentOutlined',
|
||||
'FireOutlined',
|
||||
'RocketOutlined',
|
||||
'TrophyOutlined',
|
||||
'MedalOutlined',
|
||||
'DiamondOutlined',
|
||||
'ThunderboltTwoTone',
|
||||
]
|
||||
|
||||
// Element Plus 图标列表（常用图标）
|
||||
const elementIcons = [
|
||||
'ElIconEdit',
|
||||
'ElIconDelete',
|
||||
'ElIconSearch',
|
||||
'ElIconClose',
|
||||
'ElIconCheck',
|
||||
'ElIconPlus',
|
||||
'ElIconMinus',
|
||||
'ElIconUpload',
|
||||
'ElIconDownload',
|
||||
'ElIconSetting',
|
||||
'ElIconRefresh',
|
||||
'ElIconRefreshLeft',
|
||||
'ElIconRefreshRight',
|
||||
'ElIconMenu',
|
||||
'ElIconMore',
|
||||
'ElIconMoreFilled',
|
||||
'ElIconStar',
|
||||
'ElIconStarFilled',
|
||||
'ElIconSunny',
|
||||
'ElIconMoon',
|
||||
'ElIconBell',
|
||||
'ElIconBellFilled',
|
||||
'ElIconMessage',
|
||||
'ElIconMessageFilled',
|
||||
'ElIconChatDotRound',
|
||||
'ElIconChatLineSquare',
|
||||
'ElIconChatDotSquare',
|
||||
'ElIconPhone',
|
||||
'ElIconPhoneFilled',
|
||||
'ElIconLocation',
|
||||
'ElIconLocationFilled',
|
||||
'ElIconLocationInformation',
|
||||
'ElIconView',
|
||||
'ElIconHide',
|
||||
'ElIconLock',
|
||||
'ElIconUnlock',
|
||||
'ElIconKey',
|
||||
'ElIconTickets',
|
||||
'ElIconDocument',
|
||||
'ElIconDocumentAdd',
|
||||
'ElIconDocumentDelete',
|
||||
'ElIconDocumentCopy',
|
||||
'ElIconDocumentChecked',
|
||||
'ElIconDocumentRemove',
|
||||
'ElIconFolder',
|
||||
'ElIconFolderOpened',
|
||||
'ElIconFolderAdd',
|
||||
'ElIconFolderDelete',
|
||||
'ElIconFolderChecked',
|
||||
'ElIconFiles',
|
||||
'ElIconPicture',
|
||||
'ElIconPictureRounded',
|
||||
'ElIconPictureFilled',
|
||||
'ElIconVideoCamera',
|
||||
'ElIconVideoCameraFilled',
|
||||
'ElIconMicrophone',
|
||||
'ElIconMicrophoneFilled',
|
||||
'ElIconHeadset',
|
||||
'ElIconHeadsetFilled',
|
||||
'ElIconMuteNotification',
|
||||
'ElIconNotification',
|
||||
'ElIconWarning',
|
||||
'ElIconWarningFilled',
|
||||
'ElIconInfoFilled',
|
||||
'ElIconSuccessFilled',
|
||||
'ElIconCircleCheck',
|
||||
'ElIconCircleCheckFilled',
|
||||
'ElIconCircleClose',
|
||||
'ElIconCircleCloseFilled',
|
||||
'ElIconCirclePlus',
|
||||
'ElIconCirclePlusFilled',
|
||||
'ElIconCircleMinus',
|
||||
'ElIconCircleMinusFilled',
|
||||
'ElIconAim',
|
||||
'ElIconPosition',
|
||||
'ElIconCompass',
|
||||
'ElIconMapLocation',
|
||||
'ElIconPromotion',
|
||||
'ElIconDownload',
|
||||
'ElIconUploadFilled',
|
||||
'ElIconShare',
|
||||
'ElIconConnection',
|
||||
'ElIconLink',
|
||||
'ElIconUnlink',
|
||||
'ElIconOperation',
|
||||
'ElIconDataAnalysis',
|
||||
'ElIconDataLine',
|
||||
'ElIconDataBoard',
|
||||
'ElIconHistogram',
|
||||
'ElIconTrendCharts',
|
||||
'ElIconPieChart',
|
||||
'ElIconOdometer',
|
||||
'ElIconMonitor',
|
||||
'ElIconTimer',
|
||||
'ElIconClock',
|
||||
'ElIconAlarmClock',
|
||||
'ElIconCalendar',
|
||||
'ElIconDate',
|
||||
'ElIconSwitch',
|
||||
'ElIconSwitchButton',
|
||||
'ElIconTools',
|
||||
'ElIconScrewdriver',
|
||||
'ElIconHammer',
|
||||
'ElIconBrush',
|
||||
'ElIconEditPen',
|
||||
'ElIconBriefcase',
|
||||
'ElIconWallet',
|
||||
'ElIconGoods',
|
||||
'ElIconShoppingCart',
|
||||
'ElIconShoppingCartFull',
|
||||
'ElIconShoppingBag',
|
||||
'ElIconPresent',
|
||||
'ElIconSoldOut',
|
||||
'ElIconSell',
|
||||
'ElIconDiscount',
|
||||
'ElIconTicket',
|
||||
'ElIconCoin',
|
||||
'ElIconMoney',
|
||||
'ElIconWalletFilled',
|
||||
'ElIconCreditCard',
|
||||
'ElIconUser',
|
||||
'ElIconUserFilled',
|
||||
'ElIconAvatar',
|
||||
'ElIconSuitcase',
|
||||
'ElIconGrid',
|
||||
'ElIconMenuFilled',
|
||||
'ElIconHomeFilled',
|
||||
'ElIconHouse',
|
||||
'ElIconOfficeBuilding',
|
||||
'ElIconSchool',
|
||||
'ElIconReading',
|
||||
'ElIconReadingLamp',
|
||||
'ElIconNotebook',
|
||||
'ElIconNotebookFilled',
|
||||
'ElIconFinished',
|
||||
'ElIconCollection',
|
||||
'ElIconCollectionTag',
|
||||
'ElIconFiles',
|
||||
'ElIconPostcard',
|
||||
'ElIconMemo',
|
||||
'ElIconStamp',
|
||||
'ElIconPriceTag',
|
||||
'ElIconMedal',
|
||||
'ElIconTrophy',
|
||||
'ElIconTrophyBase',
|
||||
'ElIconFirstAidKit',
|
||||
'ElIconToiletPaper',
|
||||
'ElIconAim',
|
||||
'ElIconSFlag',
|
||||
'ElIconSOpportunity',
|
||||
'ElIconMagicStick',
|
||||
'ElIconHelp',
|
||||
'ElIconQuestionFilled',
|
||||
'ElIconWarning',
|
||||
'ElIconWarningFilled',
|
||||
]
|
||||
|
||||
// 当前选中的图标
|
||||
const selectedIcon = ref(props.modelValue)
|
||||
|
||||
// 过滤后的 Ant Design 图标
|
||||
const filteredAntdIcons = computed(() => {
|
||||
if (!searchAntdValue.value) {
|
||||
return antdIcons
|
||||
}
|
||||
return antdIcons.filter((icon) =>
|
||||
icon.toLowerCase().includes(searchAntdValue.value.toLowerCase()),
|
||||
)
|
||||
})
|
||||
|
||||
// 过滤后的 Element 图标
|
||||
const filteredElementIcons = computed(() => {
|
||||
if (!searchElementValue.value) {
|
||||
return elementIcons
|
||||
}
|
||||
return elementIcons.filter((icon) =>
|
||||
icon.toLowerCase().includes(searchElementValue.value.toLowerCase()),
|
||||
)
|
||||
})
|
||||
|
||||
// 打开选择器
|
||||
const handleOpenPicker = () => {
|
||||
tempIcon.value = props.modelValue
|
||||
// 根据当前图标设置默认标签页
|
||||
if (props.modelValue) {
|
||||
activeTab.value = props.modelValue.startsWith('El') ? 'element' : 'antd'
|
||||
}
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 清除选择
|
||||
const handleClear = () => {
|
||||
emit('update:modelValue', '')
|
||||
emit('change', '')
|
||||
}
|
||||
|
||||
// 切换标签页
|
||||
const handleTabChange = (key) => {
|
||||
activeTab.value = key
|
||||
}
|
||||
|
||||
// 选择图标（直接确认并关闭）
|
||||
const handleSelectIcon = (icon) => {
|
||||
emit('update:modelValue', icon)
|
||||
emit('change', icon)
|
||||
selectedIcon.value = icon
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 取消选择
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 监听props变化，更新本地状态
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
selectedIcon.value = newVal
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sc-icon-picker {
|
||||
:deep(.ant-input) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 12px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e6f7ff;
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
:deep(svg) {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.icon-name {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,546 +0,0 @@
|
||||
<template>
|
||||
<div class="sc-table" ref="tableWrapper">
|
||||
<!-- 表格内容 -->
|
||||
<div class="sc-table-content" ref="tableContent">
|
||||
<a-table :columns="tableColumns" :data-source="dataSource" :loading="loading" :pagination="false"
|
||||
:row-key="rowKey" :row-selection="rowSelection" :scroll="scroll" :bordered="tableSettings.bordered"
|
||||
:size="tableSettings.size" :show-header="showHeader" :locale="locale" @change="handleTableChange"
|
||||
@resizeColumn="handleResizeColumn">
|
||||
<!-- 自定义单元格内容 -->
|
||||
<template #bodyCell="{ text, record, index, column }">
|
||||
<!-- 序号列 -->
|
||||
<template v-if="column.dataIndex === '_index'">
|
||||
{{ getTableIndex(index) }}
|
||||
</template>
|
||||
<!-- 自定义插槽 -->
|
||||
<template v-else-if="column.slot">
|
||||
<slot :name="column.slot || column.dataIndex" :text="text" :record="record" :index="index"
|
||||
:column="column"></slot>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<template #emptyText>
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="emptyText" />
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div v-if="showToolbar" class="sc-table-tool">
|
||||
<div class="tool-left">
|
||||
<a-pagination v-bind="pagination" @change="handlePaginationChange"
|
||||
@showSizeChange="handlePaginationChange" />
|
||||
</div>
|
||||
<div class="tool-right">
|
||||
<!-- 右侧工具栏插槽 -->
|
||||
<slot name="toolRight"></slot>
|
||||
<!-- 刷新按钮 -->
|
||||
<a-tooltip v-if="showRefresh" title="刷新">
|
||||
<a-button shape="circle" :loading="loading" @click="handleRefresh">
|
||||
<template #icon>
|
||||
<SyncOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 表格设置按钮 -->
|
||||
<a-tooltip v-if="showColumnSetting" title="表格设置">
|
||||
<a-popover v-model:open="tableSettingVisible" placement="topRight" trigger="click" :width="240">
|
||||
<template #content>
|
||||
<div class="table-setting">
|
||||
<div class="table-setting-header">
|
||||
<span>表格设置</span>
|
||||
</div>
|
||||
<div class="table-setting-body">
|
||||
<!-- 边框设置 -->
|
||||
<div class="setting-item">
|
||||
<span class="setting-label">显示边框</span>
|
||||
<a-switch v-model:checked="tableSettings.bordered" size="small" />
|
||||
</div>
|
||||
<!-- 表格大小 -->
|
||||
<div class="setting-item">
|
||||
<span class="setting-label">表格大小</span>
|
||||
<a-radio-group v-model:value="tableSettings.size" size="small"
|
||||
button-style="solid">
|
||||
<a-radio-button value="small">小</a-radio-button>
|
||||
<a-radio-button value="middle">中</a-radio-button>
|
||||
<a-radio-button value="large">大</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button shape="circle">
|
||||
<template #icon>
|
||||
<TableOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 列设置按钮 -->
|
||||
<a-tooltip v-if="showColumnSetting" title="列设置">
|
||||
<a-popover v-model:open="columnSettingVisible" placement="topRight" trigger="click">
|
||||
<template #content>
|
||||
<div class="column-setting">
|
||||
<div class="column-setting-header">
|
||||
<span>显示与排序</span>
|
||||
</div>
|
||||
<div class="column-setting-list">
|
||||
<div v-for="(colKey, index) in sortedColumns" :key="colKey"
|
||||
class="column-setting-item" :class="{ dragging: draggingIndex === index }"
|
||||
draggable="true" @dragstart="handleDragStart(index, $event)"
|
||||
@dragover="handleDragOver(index, $event)" @dragend="handleDragEnd"
|
||||
@drop="handleDrop(index)">
|
||||
<HolderOutlined class="drag-handle" />
|
||||
<a-checkbox :checked="visibleColumns.includes(colKey)"
|
||||
@change="(e) => toggleColumn(colKey, e.target.checked)">
|
||||
{{ getColumnTitle(colKey) }}
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button shape="circle">
|
||||
<template #icon>
|
||||
<HolderOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, reactive, useTemplateRef, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'scTable',
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
// 数据源
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 列配置
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
// 行的唯一标识
|
||||
rowKey: {
|
||||
type: [String, Function],
|
||||
default: 'id',
|
||||
},
|
||||
// 加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 分页配置
|
||||
pagination: {
|
||||
type: [Object, Boolean],
|
||||
default: () => ({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['20', '50', '100', '200'],
|
||||
}),
|
||||
},
|
||||
// 行选择配置
|
||||
rowSelection: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
// 表格大小
|
||||
size: {
|
||||
type: String,
|
||||
default: 'middle', // large, middle, small
|
||||
},
|
||||
// 是否显示边框
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示表头
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 本地化配置
|
||||
locale: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 是否显示序号列
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 序号列宽度
|
||||
indexColumnWidth: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
// 序号列标题
|
||||
indexTitle: {
|
||||
type: String,
|
||||
default: '序号',
|
||||
},
|
||||
// 是否显示工具栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否显示刷新按钮
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否显示列设置
|
||||
showColumnSetting: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 空状态文字
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据',
|
||||
},
|
||||
})
|
||||
|
||||
const tableContent = useTemplateRef('tableContent')
|
||||
const tableWrapper = useTemplateRef('tableWrapper')
|
||||
let scroll = ref({
|
||||
scrollToFirstRowOnChange: true,
|
||||
x: 'max-content',
|
||||
y: true,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
updateTableHeight()
|
||||
})
|
||||
|
||||
const updateTableHeight = () => {
|
||||
if (tableContent.value) {
|
||||
const tableHeight = tableContent.value.clientHeight - 56
|
||||
scroll.value.y = tableHeight > 0 ? tableHeight : 400
|
||||
}
|
||||
}
|
||||
|
||||
// 根据表格宽度优化横向滚动配置
|
||||
watch(
|
||||
[() => props.columns, () => props.showIndex, tableContent],
|
||||
() => {
|
||||
// 如果列有固定宽度且总宽度较大，使用max-content
|
||||
// 否则使用true让表格自适应
|
||||
const hasFixedColumns = props.columns.some((col) => col.width)
|
||||
if (hasFixedColumns || props.showIndex) {
|
||||
scroll.value.x = 'max-content'
|
||||
} else {
|
||||
scroll.value.x = true
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
)
|
||||
|
||||
// 表格设置状态
|
||||
const tableSettings = reactive({
|
||||
bordered: props.bordered,
|
||||
size: props.size,
|
||||
})
|
||||
|
||||
// 监听props变化
|
||||
watch(
|
||||
() => props.bordered,
|
||||
(val) => {
|
||||
tableSettings.bordered = val
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.size,
|
||||
(val) => {
|
||||
tableSettings.size = val
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits(['refresh', 'change', 'resizeColumn', 'select', 'selectAll', 'selectNone', 'paginationChange'])
|
||||
|
||||
// 列设置相关
|
||||
const columnSettingVisible = ref(false)
|
||||
const tableSettingVisible = ref(false)
|
||||
const visibleColumns = ref([])
|
||||
const sortedColumns = ref([]) // 排序后的列key数组
|
||||
const draggingIndex = ref(-1) // 当前拖拽的索引
|
||||
|
||||
// 所有列
|
||||
const allColumns = computed(() => {
|
||||
return props.columns.filter((col) => col.dataIndex && col.dataIndex !== '_index')
|
||||
})
|
||||
|
||||
// 获取列标题
|
||||
const getColumnTitle = (colKey) => {
|
||||
const col = allColumns.value.find((c) => (c.dataIndex || c.key) === colKey)
|
||||
return col ? col.title : colKey
|
||||
}
|
||||
|
||||
// 初始化可见列和排序
|
||||
watch(
|
||||
() => props.columns,
|
||||
(newColumns) => {
|
||||
const columnKeys = newColumns.filter((col) => col.dataIndex && col.dataIndex !== '_index').map((col) => col.dataIndex || col.key)
|
||||
|
||||
// 如果是首次初始化，使用原始顺序
|
||||
if (sortedColumns.value.length === 0) {
|
||||
sortedColumns.value = [...columnKeys]
|
||||
} else {
|
||||
// 保留已存在的顺序，添加新列
|
||||
const existingKeys = sortedColumns.value.filter((key) => columnKeys.includes(key))
|
||||
const newKeys = columnKeys.filter((key) => !existingKeys.includes(key))
|
||||
sortedColumns.value = [...existingKeys, ...newKeys]
|
||||
}
|
||||
|
||||
visibleColumns.value = [...sortedColumns.value]
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
)
|
||||
|
||||
// 切换列的显示状态
|
||||
const toggleColumn = (colKey, checked) => {
|
||||
if (checked) {
|
||||
if (!visibleColumns.value.includes(colKey)) {
|
||||
visibleColumns.value.push(colKey)
|
||||
}
|
||||
} else {
|
||||
visibleColumns.value = visibleColumns.value.filter((key) => key !== colKey)
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽开始
|
||||
const handleDragStart = (index, event) => {
|
||||
draggingIndex.value = index
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
event.dataTransfer.setData('text/plain', index.toString())
|
||||
}
|
||||
|
||||
// 拖拽经过
|
||||
const handleDragOver = (index, event) => {
|
||||
event.preventDefault()
|
||||
event.dataTransfer.dropEffect = 'move'
|
||||
}
|
||||
|
||||
// 拖拽结束
|
||||
const handleDragEnd = () => {
|
||||
draggingIndex.value = -1
|
||||
}
|
||||
|
||||
// 拖拽放置
|
||||
const handleDrop = (dropIndex) => {
|
||||
if (draggingIndex.value === dropIndex) return
|
||||
|
||||
const draggedKey = sortedColumns.value[draggingIndex.value]
|
||||
const newColumns = [...sortedColumns.value]
|
||||
|
||||
// 移除被拖拽的项
|
||||
newColumns.splice(draggingIndex.value, 1)
|
||||
|
||||
// 插入到新位置
|
||||
newColumns.splice(dropIndex, 0, draggedKey)
|
||||
|
||||
sortedColumns.value = newColumns
|
||||
draggingIndex.value = -1
|
||||
}
|
||||
|
||||
// 处理刷新
|
||||
const handleRefresh = () => {
|
||||
emit('refresh')
|
||||
}
|
||||
|
||||
// 处理分页变化
|
||||
const handlePaginationChange = (page, pageSize) => {
|
||||
emit('paginationChange', { page, pageSize })
|
||||
}
|
||||
|
||||
// 处理表格变化（排序、筛选）
|
||||
const handleTableChange = (filters, sorter, extra) => {
|
||||
emit('change', { filters, sorter, extra })
|
||||
}
|
||||
|
||||
// 处理列宽调整
|
||||
const handleResizeColumn = (width, column) => {
|
||||
emit('resizeColumn', { width, column })
|
||||
}
|
||||
|
||||
// 获取表格序号
|
||||
const getTableIndex = (index) => {
|
||||
const { current = 1, pageSize = 10 } = props.pagination || {}
|
||||
return (current - 1) * pageSize + index + 1
|
||||
}
|
||||
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = computed(() => {
|
||||
let columns = []
|
||||
|
||||
// 添加序号列
|
||||
if (props.showIndex) {
|
||||
columns.push({
|
||||
title: props.indexTitle,
|
||||
dataIndex: '_index',
|
||||
key: '_index',
|
||||
width: props.indexColumnWidth,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
})
|
||||
}
|
||||
|
||||
// 添加数据列（按排序顺序）
|
||||
sortedColumns.value.forEach((colKey) => {
|
||||
// 过滤掉未显示的列
|
||||
if (!visibleColumns.value.includes(colKey)) {
|
||||
return
|
||||
}
|
||||
|
||||
const col = props.columns.find((c) => (c.dataIndex || c.key) === colKey)
|
||||
if (col) {
|
||||
columns.push({
|
||||
...col,
|
||||
customRender: col.slot ? undefined : col.customRender,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return columns
|
||||
})
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
refresh: handleRefresh,
|
||||
getTableIndex,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sc-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
&-tool {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.tool-left,
|
||||
.tool-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.column-setting {
|
||||
min-width: 200px;
|
||||
|
||||
&-header {
|
||||
padding: 8px 0;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 4px;
|
||||
cursor: move;
|
||||
transition: all 0.2s;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
opacity: 0.5;
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
margin-right: 8px;
|
||||
color: #999;
|
||||
cursor: grab;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-setting {
|
||||
min-width: 200px;
|
||||
|
||||
&-header {
|
||||
padding: 8px 0;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-body {
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<div class="file-upload">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
:custom-request="customUpload"
|
||||
:before-upload="beforeUpload"
|
||||
:accept="accept"
|
||||
:max-count="maxCount"
|
||||
:disabled="disabled"
|
||||
:multiple="multiple"
|
||||
@change="handleChange"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<a-button v-if="!disabled">
|
||||
<upload-outlined />
|
||||
上传文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UploadOutlined } from '@ant-design/icons-vue'
|
||||
import uploadConfig from '@/config/upload'
|
||||
|
||||
const props = defineProps({
|
||||
// 文件列表
|
||||
modelValue: {
|
||||
type: [Array, String],
|
||||
default: () => []
|
||||
},
|
||||
// 最大上传数量，默认1为单文件上传
|
||||
maxCount: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 接受的文件类型，例如 '.pdf,.doc,.docx' 或 '*'
|
||||
accept: {
|
||||
type: String,
|
||||
default: '*'
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否支持多选
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否返回URL字符串（单文件）或URL数组（多文件）
|
||||
returnUrl: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change', 'remove'])
|
||||
|
||||
// 文件列表
|
||||
const fileList = ref([])
|
||||
|
||||
// 初始化文件列表
|
||||
const initFileList = () => {
|
||||
if (props.modelValue) {
|
||||
if (typeof props.modelValue === 'string') {
|
||||
// 单文件上传，字符串格式
|
||||
fileList.value = props.modelValue
|
||||
? [
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'file',
|
||||
status: 'done',
|
||||
url: props.modelValue,
|
||||
response: {
|
||||
src: props.modelValue
|
||||
}
|
||||
}
|
||||
]
|
||||
: []
|
||||
} else if (Array.isArray(props.modelValue)) {
|
||||
// 多文件上传，数组格式
|
||||
fileList.value = props.modelValue.map((url, index) => ({
|
||||
uid: `-${index}`,
|
||||
name: `file${index}`,
|
||||
status: 'done',
|
||||
url: url,
|
||||
response: {
|
||||
src: url
|
||||
}
|
||||
}))
|
||||
}
|
||||
} else {
|
||||
fileList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 监听外部值变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
initFileList()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 自定义上传
|
||||
const customUpload = (options) => {
|
||||
const { file, onProgress, onSuccess, onError } = options
|
||||
const formData = new FormData()
|
||||
formData.append(uploadConfig.filename || 'file', file)
|
||||
|
||||
// 使用文件上传API对象
|
||||
const apiObj = uploadConfig.apiObjFile || uploadConfig.apiObj
|
||||
|
||||
apiObj(formData, {
|
||||
onUploadProgress: (progressEvent) => {
|
||||
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
|
||||
onProgress({ percent }, file)
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
const data = uploadConfig.parseData(res)
|
||||
if (data.code === uploadConfig.successCode) {
|
||||
onSuccess(data, file)
|
||||
message.success('上传成功')
|
||||
} else {
|
||||
onError(new Error(data.msg || '上传失败'))
|
||||
message.error(data.msg || '上传失败')
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
onError(error)
|
||||
message.error('上传失败：' + error.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 上传前校验
|
||||
const beforeUpload = (file) => {
|
||||
const maxSizeMB = uploadConfig.maxSizeFile || uploadConfig.maxSize || 10
|
||||
const maxSizeBytes = maxSizeMB * 1024 * 1024
|
||||
|
||||
if (file.size > maxSizeBytes) {
|
||||
message.error(`文件大小不能超过 ${maxSizeMB}MB`)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 处理文件列表变化
|
||||
const handleChange = ({ fileList: newFileList }) => {
|
||||
fileList.value = newFileList
|
||||
|
||||
// 提取成功的文件URL
|
||||
const successFiles = newFileList
|
||||
.filter((file) => file.status === 'done' && (file.url || file.response?.src))
|
||||
.map((file) => file.url || file.response?.src)
|
||||
|
||||
// 触发更新事件
|
||||
if (props.returnUrl) {
|
||||
// 返回URL字符串或数组
|
||||
const value = props.maxCount === 1 ? successFiles[0] || '' : successFiles
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value, newFileList)
|
||||
} else {
|
||||
// 返回完整文件列表
|
||||
emit('update:modelValue', newFileList)
|
||||
emit('change', newFileList)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理文件移除
|
||||
const handleRemove = (file) => {
|
||||
emit('remove', file)
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-upload {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,383 +0,0 @@
|
||||
<template>
|
||||
<div class="image-upload">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
:custom-request="customUpload"
|
||||
:before-upload="beforeUpload"
|
||||
:accept="accept"
|
||||
:max-count="maxCount"
|
||||
:disabled="disabled"
|
||||
:show-upload-list="{ showPreviewIcon: true, showRemoveIcon: !disabled }"
|
||||
@preview="handlePreview"
|
||||
@change="handleChange"
|
||||
@drop="handleDrop"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
class="custom-upload"
|
||||
:class="{ 'drag-over': isDragOver }"
|
||||
>
|
||||
<div v-if="fileList.length < maxCount && !disabled" class="upload-area">
|
||||
<loading-outlined v-if="uploading" class="upload-icon" />
|
||||
<plus-outlined v-else class="upload-icon" />
|
||||
<div class="ant-upload-text">{{ uploading ? '上传中...' : uploadText }}</div>
|
||||
<div v-if="tip" class="ant-upload-tip">{{ tip }}</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:open="previewVisible"
|
||||
:title="previewTitle"
|
||||
:footer="null"
|
||||
:width="800"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<img alt="图片预览" style="width: 100%; max-height: 600px; object-fit: contain;" :src="previewImage" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import uploadConfig from '@/config/upload'
|
||||
|
||||
const props = defineProps({
|
||||
// 图片列表
|
||||
modelValue: {
|
||||
type: [Array, String],
|
||||
default: () => []
|
||||
},
|
||||
// 最大上传数量，默认1为单图上传
|
||||
maxCount: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 接受的文件类型
|
||||
accept: {
|
||||
type: String,
|
||||
default: 'image/*'
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否返回URL字符串（单图）或URL数组（多图）
|
||||
returnUrl: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 上传按钮文字
|
||||
uploadText: {
|
||||
type: String,
|
||||
default: '上传图片'
|
||||
},
|
||||
// 提示文字
|
||||
tip: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 最小宽度（像素）
|
||||
minWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 最大宽度（像素）
|
||||
maxWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 最小高度（像素）
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 最大高度（像素）
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否删除前确认
|
||||
confirmBeforeRemove: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 自定义上传按钮内容
|
||||
customUploadBtn: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change', 'preview', 'remove', 'uploadSuccess', 'uploadError'])
|
||||
|
||||
// 文件列表
|
||||
const fileList = ref([])
|
||||
|
||||
// 预览相关
|
||||
const previewVisible = ref(false)
|
||||
const previewImage = ref('')
|
||||
const previewTitle = computed(() => {
|
||||
return previewImage.value ? '图片预览' : ''
|
||||
})
|
||||
|
||||
// 上传状态
|
||||
const uploading = ref(false)
|
||||
|
||||
// 拖拽状态
|
||||
const isDragOver = ref(false)
|
||||
|
||||
// 初始化文件列表
|
||||
const initFileList = () => {
|
||||
if (props.modelValue) {
|
||||
if (typeof props.modelValue === 'string') {
|
||||
// 单图上传，字符串格式
|
||||
fileList.value = props.modelValue
|
||||
? [
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: props.modelValue
|
||||
}
|
||||
]
|
||||
: []
|
||||
} else if (Array.isArray(props.modelValue)) {
|
||||
// 多图上传，数组格式
|
||||
fileList.value = props.modelValue.map((url, index) => ({
|
||||
uid: `-${index}`,
|
||||
name: `image${index}.png`,
|
||||
status: 'done',
|
||||
url: url
|
||||
}))
|
||||
}
|
||||
} else {
|
||||
fileList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 监听外部值变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
initFileList()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 自定义上传
|
||||
const customUpload = (options) => {
|
||||
const { file, onProgress, onSuccess, onError } = options
|
||||
const formData = new FormData()
|
||||
formData.append(uploadConfig.filename || 'file', file)
|
||||
|
||||
uploading.value = true
|
||||
|
||||
uploadConfig.apiObj(formData, {
|
||||
onUploadProgress: (progressEvent) => {
|
||||
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
|
||||
onProgress({ percent }, file)
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
const data = uploadConfig.parseData(res)
|
||||
if (data.code === uploadConfig.successCode) {
|
||||
onSuccess(data, file)
|
||||
message.success('上传成功')
|
||||
emit('uploadSuccess', data, file)
|
||||
} else {
|
||||
onError(new Error(data.msg || '上传失败'))
|
||||
message.error(data.msg || '上传失败')
|
||||
emit('uploadError', data.msg || '上传失败', file)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
onError(error)
|
||||
message.error('上传失败：' + error.message)
|
||||
emit('uploadError', error.message, file)
|
||||
})
|
||||
.finally(() => {
|
||||
uploading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 上传前校验
|
||||
const beforeUpload = async (file) => {
|
||||
// 文件大小校验
|
||||
const maxSizeMB = uploadConfig.maxSize || 10
|
||||
const maxSizeBytes = maxSizeMB * 1024 * 1024
|
||||
|
||||
if (file.size > maxSizeBytes) {
|
||||
message.error(`图片大小不能超过 ${maxSizeMB}MB`)
|
||||
return false
|
||||
}
|
||||
|
||||
// 图片尺寸校验
|
||||
if (props.minWidth || props.maxWidth || props.minHeight || props.maxHeight) {
|
||||
try {
|
||||
const dimensions = await getImageDimensions(file)
|
||||
const { width, height } = dimensions
|
||||
|
||||
if (props.minWidth && width < props.minWidth) {
|
||||
message.error(`图片宽度不能小于 ${props.minWidth}px`)
|
||||
return false
|
||||
}
|
||||
if (props.maxWidth && width > props.maxWidth) {
|
||||
message.error(`图片宽度不能大于 ${props.maxWidth}px`)
|
||||
return false
|
||||
}
|
||||
if (props.minHeight && height < props.minHeight) {
|
||||
message.error(`图片高度不能小于 ${props.minHeight}px`)
|
||||
return false
|
||||
}
|
||||
if (props.maxHeight && height > props.maxHeight) {
|
||||
message.error(`图片高度不能大于 ${props.maxHeight}px`)
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('图片尺寸校验失败')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// 获取图片尺寸
|
||||
const getImageDimensions = (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
const reader = new FileReader()
|
||||
|
||||
reader.onload = (e) => {
|
||||
img.src = e.target.result
|
||||
img.onload = () => {
|
||||
resolve({ width: img.width, height: img.height })
|
||||
}
|
||||
img.onerror = reject
|
||||
}
|
||||
reader.onerror = reject
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
// 处理预览
|
||||
const handlePreview = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImage.value = file.url || file.preview
|
||||
previewVisible.value = true
|
||||
emit('preview', file)
|
||||
}
|
||||
|
||||
// 获取Base64
|
||||
const getBase64 = (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => resolve(reader.result)
|
||||
reader.onerror = (error) => reject(error)
|
||||
})
|
||||
}
|
||||
|
||||
// 处理文件列表变化
|
||||
const handleChange = ({ fileList: newFileList }) => {
|
||||
// 更新文件列表，确保上传成功的文件有正确的 url
|
||||
const updatedFileList = newFileList.map((file) => {
|
||||
// 如果文件上传成功且有响应数据但没有 url，则设置 url
|
||||
if (file.status === 'done' && file.response?.src && !file.url) {
|
||||
return {
|
||||
...file,
|
||||
url: file.response.src
|
||||
}
|
||||
}
|
||||
return file
|
||||
})
|
||||
|
||||
fileList.value = updatedFileList
|
||||
|
||||
// 过滤掉失败的文件
|
||||
const validFileList = updatedFileList.filter((file) => file.status !== 'error')
|
||||
|
||||
// 提取成功的文件URL
|
||||
const successFiles = validFileList
|
||||
.filter((file) => file.status === 'done' && (file.url || file.response?.src))
|
||||
.map((file) => file.url || file.response?.src)
|
||||
|
||||
// 触发更新事件
|
||||
if (props.returnUrl) {
|
||||
// 返回URL字符串或数组
|
||||
const value = props.maxCount === 1 ? successFiles[0] || '' : successFiles
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value, validFileList)
|
||||
} else {
|
||||
// 返回完整文件列表
|
||||
emit('update:modelValue', validFileList)
|
||||
emit('change', validFileList)
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽相关
|
||||
const handleDragEnter = (e) => {
|
||||
e.preventDefault()
|
||||
isDragOver.value = true
|
||||
}
|
||||
|
||||
const handleDragLeave = (e) => {
|
||||
e.preventDefault()
|
||||
isDragOver.value = false
|
||||
}
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault()
|
||||
isDragOver.value = false
|
||||
}
|
||||
|
||||
// 取消预览
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-upload {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.ant-upload-text {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.ant-upload-tip {
|
||||
margin-top: 4px;
|
||||
font-size: 10px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.drag-over {
|
||||
border: 2px dashed #1890ff;
|
||||
background-color: rgba(24, 144, 255, 0.05);
|
||||
}
|
||||
|
||||
.drag-over .upload-icon {
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,248 +0,0 @@
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
/**
|
||||
* 表格通用hooks
|
||||
* @param {Object} options 配置选项
|
||||
* @param {Function} options.api 获取列表数据的API函数，必须返回包含data和total的响应
|
||||
* @param {Object} options.searchForm 搜索表单的初始值
|
||||
* @param {Array} options.columns 表格列配置
|
||||
* @param {String} options.rowKey 行的唯一标识，默认为'id'
|
||||
* @param {Boolean} options.needPagination 是否需要分页，默认为true
|
||||
* @param {Object} options.paginationConfig 分页配置，可选
|
||||
* @param {Boolean} options.needSelection 是否需要行选择，默认为false
|
||||
* @param {Boolean} options.immediateLoad 是否在组件挂载时自动加载数据，默认为true
|
||||
* @returns {Object} 返回表格相关的状态和方法
|
||||
*/
|
||||
export function useTable(options = {}) {
|
||||
const {
|
||||
api,
|
||||
searchForm: initialSearchForm = {},
|
||||
columns = [],
|
||||
rowKey = 'id',
|
||||
needPagination = true,
|
||||
paginationConfig = {},
|
||||
needSelection = false,
|
||||
immediateLoad = true
|
||||
} = options
|
||||
|
||||
// 表格引用
|
||||
const tableRef = ref(null)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({ ...initialSearchForm })
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([])
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 选中的行数据
|
||||
const selectedRows = ref([])
|
||||
|
||||
// 选中的行keys
|
||||
const selectedRowKeys = computed(() => selectedRows.value.map(item => item[rowKey]))
|
||||
|
||||
// 分页配置
|
||||
const defaultPaginationConfig = {
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['20', '50', '100', '200']
|
||||
}
|
||||
|
||||
const pagination = reactive({
|
||||
...defaultPaginationConfig,
|
||||
...paginationConfig
|
||||
})
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = computed(() => {
|
||||
if (!needSelection) return null
|
||||
return {
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys, rows) => {
|
||||
selectedRows.value = rows
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 行选择事件处理（用于scTable的@select事件）
|
||||
const handleSelectChange = (record, selected, selectedRows) => {
|
||||
if (!needSelection) return
|
||||
if (selected) {
|
||||
selectedRows.value.push(record)
|
||||
} else {
|
||||
const index = selectedRows.value.findIndex(item => item[rowKey] === record[rowKey])
|
||||
if (index > -1) {
|
||||
selectedRows.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全选/取消全选处理（用于scTable的@selectAll事件）
|
||||
const handleSelectAll = (selected, selectedRows, changeRows) => {
|
||||
if (!needSelection) return
|
||||
if (selected) {
|
||||
changeRows.forEach(record => {
|
||||
if (!selectedRows.value.find(item => item[rowKey] === record[rowKey])) {
|
||||
selectedRows.value.push(record)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
changeRows.forEach(record => {
|
||||
const index = selectedRows.value.findIndex(item => item[rowKey] === record[rowKey])
|
||||
if (index > -1) {
|
||||
selectedRows.value.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const loadData = async (params = {}) => {
|
||||
if (!api) {
|
||||
console.warn('useTable: 未提供api函数，无法加载数据')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const requestParams = {
|
||||
...searchForm,
|
||||
...params
|
||||
}
|
||||
|
||||
// 如果需要分页，添加分页参数
|
||||
if (needPagination) {
|
||||
requestParams.page = pagination.current
|
||||
requestParams.limit = pagination.pageSize
|
||||
}
|
||||
|
||||
// 调用API函数，确保this上下文正确
|
||||
const res = await api(requestParams)
|
||||
|
||||
if (res.code === 1) {
|
||||
// 如果是分页数据
|
||||
if (needPagination) {
|
||||
tableData.value = res.data?.data || []
|
||||
pagination.total = res.data?.total || 0
|
||||
} else {
|
||||
// 非分页数据（如树形数据）
|
||||
// 确保数据是数组，如果不是数组则包装成数组
|
||||
const data = res.data
|
||||
if (Array.isArray(data)) {
|
||||
tableData.value = data
|
||||
} else if (data && typeof data === 'object') {
|
||||
// 如果返回的是对象，可能包含 list 或 items 等字段
|
||||
tableData.value = data.list || data.items || data.data || []
|
||||
} else {
|
||||
tableData.value = []
|
||||
}
|
||||
}
|
||||
} else {
|
||||
message.error(res.message || '加载数据失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error)
|
||||
message.error('加载数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化处理
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
if (!needPagination) return
|
||||
pagination.current = page
|
||||
pagination.pageSize = pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
if (needPagination) {
|
||||
pagination.current = 1
|
||||
}
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
// 重置搜索表单为初始值
|
||||
Object.keys(searchForm).forEach(key => {
|
||||
searchForm[key] = initialSearchForm[key]
|
||||
})
|
||||
// 清空选择
|
||||
selectedRows.value = []
|
||||
// 重置分页
|
||||
if (needPagination) {
|
||||
pagination.current = 1
|
||||
}
|
||||
// 重新加载数据
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 刷新表格
|
||||
const refreshTable = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 清空选择
|
||||
const clearSelection = () => {
|
||||
selectedRows.value = []
|
||||
}
|
||||
|
||||
// 设置选中行
|
||||
const setSelectedRows = (rows) => {
|
||||
selectedRows.value = rows
|
||||
}
|
||||
|
||||
// 更新搜索表单
|
||||
const setSearchForm = (data) => {
|
||||
Object.assign(searchForm, data)
|
||||
}
|
||||
|
||||
// 直接设置表格数据（用于特殊场景）
|
||||
const setTableData = (data) => {
|
||||
tableData.value = data
|
||||
}
|
||||
|
||||
// 组件挂载时自动加载数据
|
||||
if (immediateLoad) {
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
// ref
|
||||
tableRef,
|
||||
// 响应式数据
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
selectedRows,
|
||||
selectedRowKeys,
|
||||
// 配置
|
||||
columns,
|
||||
rowKey,
|
||||
rowSelection,
|
||||
// 方法
|
||||
loadData,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePaginationChange,
|
||||
handleSelectChange,
|
||||
handleSelectAll,
|
||||
refreshTable,
|
||||
clearSelection,
|
||||
setSelectedRows,
|
||||
setSearchForm,
|
||||
setTableData
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
|
||||
<span v-if="index === breadcrumbList.length - 1" class="no-redirect">
|
||||
<component :is="item.meta?.icon || 'FileTextOutlined'" />
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
<a v-else @click.prevent="handleLink(item)">
|
||||
<component :is="item.meta?.icon || 'HomeOutlined'" />
|
||||
{{ item.meta.title }}
|
||||
</a>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
// 定义组件名称（多词命名）
|
||||
defineOptions({
|
||||
name: 'LayoutBreadcrumb'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const breadcrumbList = ref([])
|
||||
|
||||
// 获取面包屑列表
|
||||
const getBreadcrumb = () => {
|
||||
let matched = route.matched.filter(item => item.meta && item.meta.title)
|
||||
|
||||
// 如果第一个不是首页，添加首页
|
||||
const first = matched[0]
|
||||
if (first && first.path !== '/') {
|
||||
matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
|
||||
}
|
||||
|
||||
breadcrumbList.value = matched
|
||||
}
|
||||
|
||||
// 处理点击面包屑
|
||||
const handleLink = (item) => {
|
||||
router.push(item.path)
|
||||
}
|
||||
|
||||
// 监听路由变化
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
getBreadcrumb()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<template v-for="item in menuItems" :key="item.path || item.name">
|
||||
<!-- 有子菜单 - 使用递归 -->
|
||||
<a-sub-menu v-if="item.children && item.children.length > 0" :key="`${item.path}`">
|
||||
<template #icon v-if="item.meta?.icon">
|
||||
<component :is="getIconComponent(item.meta.icon)" />
|
||||
</template>
|
||||
<template #title>{{ item.meta?.title || item.name }}</template>
|
||||
<navMenu :menu-items="item.children" :active-path="activePath" :parent-path="item.path" />
|
||||
</a-sub-menu>
|
||||
<!-- 无子菜单的菜单项 -->
|
||||
<a-menu-item v-else :key="item.path" :class="{ 'ant-menu-item-selected': item.path === activePath }"
|
||||
@click="handleMenuClick(item)">
|
||||
<template #icon v-if="item.meta?.icon">
|
||||
<component :is="getIconComponent(item.meta.icon)" />
|
||||
</template>
|
||||
{{ item.meta?.title || item.name }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import * as icons from '@ant-design/icons-vue'
|
||||
|
||||
defineProps({
|
||||
menuItems: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
activePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
parentPath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 获取图标组件
|
||||
const getIconComponent = (iconName) => {
|
||||
return icons[iconName] || icons.FileTextOutlined
|
||||
}
|
||||
|
||||
// 处理菜单点击
|
||||
const handleMenuClick = (item) => {
|
||||
if (item.path) {
|
||||
router.push(item.path)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,302 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="$t('common.searchMenu')"
|
||||
:footer="null"
|
||||
:width="600"
|
||||
:destroyOnClose="true"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<div class="menu-search">
|
||||
<a-input
|
||||
v-model:value="searchKeyword"
|
||||
:placeholder="$t('common.searchPlaceholder')"
|
||||
size="large"
|
||||
allow-clear
|
||||
@input="handleSearch"
|
||||
@keydown="handleKeydown"
|
||||
ref="searchInputRef"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<div v-if="searchResults.length > 0" class="search-results">
|
||||
<div
|
||||
v-for="(item, index) in searchResults"
|
||||
:key="item.path"
|
||||
class="result-item"
|
||||
:class="{ active: selectedIndex === index }"
|
||||
@click="handleSelect(item)"
|
||||
@mouseenter="selectedIndex = index"
|
||||
>
|
||||
<div class="result-icon">
|
||||
<component :is="item.icon || 'MenuOutlined'" />
|
||||
</div>
|
||||
<div class="result-content">
|
||||
<div class="result-title">{{ item.title }}</div>
|
||||
<div v-if="item.breadcrumbs" class="result-path">{{ item.breadcrumbs }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="searchKeyword" class="no-results">
|
||||
<a-empty :description="$t('common.noResults')" />
|
||||
</div>
|
||||
|
||||
<div v-else class="search-tips">
|
||||
<div class="tip-title">{{ $t('common.searchTips') }}</div>
|
||||
<div class="tip-list">
|
||||
<div class="tip-item">
|
||||
<kbd>↑</kbd>
|
||||
<kbd>↓</kbd>
|
||||
<span>{{ $t('common.navigateResults') }}</span>
|
||||
</div>
|
||||
<div class="tip-item">
|
||||
<kbd>Enter</kbd>
|
||||
<span>{{ $t('common.selectResult') }}</span>
|
||||
</div>
|
||||
<div class="tip-item">
|
||||
<kbd>Esc</kbd>
|
||||
<span>{{ $t('common.closeSearch') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { SearchOutlined, MenuOutlined } from '@ant-design/icons-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'MenuSearch',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const visible = defineModel('visible', { type: Boolean, default: false })
|
||||
const searchKeyword = ref('')
|
||||
const searchResults = ref([])
|
||||
const selectedIndex = ref(0)
|
||||
const searchInputRef = ref(null)
|
||||
|
||||
// 将扁平化的菜单数据转换为可搜索格式
|
||||
function flattenMenus(menus, breadcrumbs = []) {
|
||||
const result = []
|
||||
|
||||
menus.forEach((menu) => {
|
||||
if (menu.hidden) return
|
||||
|
||||
const currentBreadcrumbs = [...breadcrumbs, menu.title]
|
||||
|
||||
// 如果有路径且不是外部链接，添加到搜索结果
|
||||
if (menu.path && !menu.path.startsWith('http')) {
|
||||
result.push({
|
||||
title: menu.title,
|
||||
path: menu.path,
|
||||
icon: menu.icon,
|
||||
breadcrumbs: currentBreadcrumbs.join(' / '),
|
||||
})
|
||||
}
|
||||
|
||||
// 递归处理子菜单
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const children = flattenMenus(menu.children, currentBreadcrumbs)
|
||||
result.push(...children)
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// 获取所有菜单项
|
||||
const allMenus = computed(() => {
|
||||
const menus = userStore.menu || []
|
||||
return flattenMenus(menus)
|
||||
})
|
||||
|
||||
// 执行搜索
|
||||
function handleSearch() {
|
||||
if (!searchKeyword.value.trim()) {
|
||||
searchResults.value = []
|
||||
selectedIndex.value = 0
|
||||
return
|
||||
}
|
||||
|
||||
const keyword = searchKeyword.value.toLowerCase().trim()
|
||||
searchResults.value = allMenus.value.filter((menu) => {
|
||||
return menu.title.toLowerCase().includes(keyword) ||
|
||||
menu.breadcrumbs.toLowerCase().includes(keyword)
|
||||
})
|
||||
|
||||
selectedIndex.value = 0
|
||||
}
|
||||
|
||||
// 键盘导航
|
||||
function handleKeydown(e) {
|
||||
if (!searchResults.value.length) return
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
selectedIndex.value = selectedIndex.value > 0
|
||||
? selectedIndex.value - 1
|
||||
: searchResults.value.length - 1
|
||||
break
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
selectedIndex.value = selectedIndex.value < searchResults.value.length - 1
|
||||
? selectedIndex.value + 1
|
||||
: 0
|
||||
break
|
||||
case 'Enter':
|
||||
e.preventDefault()
|
||||
if (searchResults.value[selectedIndex.value]) {
|
||||
handleSelect(searchResults.value[selectedIndex.value])
|
||||
}
|
||||
break
|
||||
case 'Escape':
|
||||
e.preventDefault()
|
||||
handleClose()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 选择菜单项
|
||||
function handleSelect(item) {
|
||||
visible.value = false
|
||||
router.push(item.path)
|
||||
}
|
||||
|
||||
// 关闭搜索弹窗
|
||||
function handleClose() {
|
||||
visible.value = false
|
||||
searchKeyword.value = ''
|
||||
searchResults.value = []
|
||||
selectedIndex.value = 0
|
||||
}
|
||||
|
||||
// 监听弹窗显示，自动聚焦输入框
|
||||
watch(visible, (newVal) => {
|
||||
if (newVal) {
|
||||
nextTick(() => {
|
||||
searchInputRef.value?.focus()
|
||||
})
|
||||
} else {
|
||||
handleClose()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.menu-search {
|
||||
.search-results {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
margin-top: 16px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
margin-right: 12px;
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.result-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-path {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.search-tips {
|
||||
margin-top: 20px;
|
||||
|
||||
.tip-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tip-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
|
||||
.tip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,350 +0,0 @@
|
||||
<template>
|
||||
<a-drawer v-model:open="open" title="布局配置" placement="right" :width="420">
|
||||
<div class="setting-content">
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">布局模式</div>
|
||||
<div class="layout-mode-list">
|
||||
<div v-for="mode in layoutModes" :key="mode.value" class="layout-mode-item"
|
||||
:class="{ active: layoutStore.layoutMode === mode.value }"
|
||||
@click="handleLayoutChange(mode.value)">
|
||||
<div class="layout-preview" :class="`preview-${mode.value}`">
|
||||
<div class="preview-sidebar"></div>
|
||||
<div v-if="mode.value === 'default'" class="preview-sidebar-2"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-header"></div>
|
||||
<div class="preview-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-name">{{ mode.label }}</div>
|
||||
<CheckOutlined v-if="layoutStore.layoutMode === mode.value" class="check-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题颜色</div>
|
||||
<div class="color-list">
|
||||
<div v-for="color in themeColors" :key="color" class="color-item"
|
||||
:class="{ active: themeColor === color }" :style="{ backgroundColor: color }"
|
||||
@click="changeThemeColor(color)">
|
||||
<CheckOutlined v-if="themeColor === color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">显示设置</div>
|
||||
<div class="toggle-list">
|
||||
<div class="toggle-item">
|
||||
<span>显示标签栏</span>
|
||||
<a-switch v-model:checked="showTags" @change="handleShowTagsChange" />
|
||||
</div>
|
||||
<div class="toggle-item">
|
||||
<span>显示面包屑</span>
|
||||
<a-switch v-model:checked="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">其他设置</div>
|
||||
<div class="action-buttons">
|
||||
<a-button type="primary" block @click="handleResetSettings">
|
||||
<ReloadOutlined />
|
||||
重置设置
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import { CheckOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
// 定义组件名称（多词命名）
|
||||
defineOptions({
|
||||
name: 'LayoutSetting',
|
||||
})
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const open = ref(false)
|
||||
const themeColor = ref('#1890ff')
|
||||
const showTags = ref(true)
|
||||
const showBreadcrumb = ref(true)
|
||||
|
||||
const layoutModes = [
|
||||
{ value: 'default', label: '默认布局' },
|
||||
{ value: 'menu', label: '菜单布局' },
|
||||
{ value: 'top', label: '顶部布局' },
|
||||
]
|
||||
|
||||
const themeColors = ['#1890ff', '#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#2f54eb', '#722ed1']
|
||||
|
||||
const openDrawer = () => {
|
||||
open.value = true
|
||||
}
|
||||
|
||||
const closeDrawer = () => {
|
||||
open.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
})
|
||||
|
||||
// 切换布局
|
||||
const handleLayoutChange = (mode) => {
|
||||
layoutStore.setLayoutMode(mode)
|
||||
const modeLabel = layoutModes.find((m) => m.value === mode)?.label || mode
|
||||
message.success(`已切换到${modeLabel}`)
|
||||
}
|
||||
|
||||
// 切换主题颜色
|
||||
const changeThemeColor = (color) => {
|
||||
themeColor.value = color
|
||||
// 更新 CSS 变量
|
||||
document.documentElement.style.setProperty('--primary-color', color)
|
||||
message.success('主题颜色已更新')
|
||||
}
|
||||
|
||||
// 切换标签栏显示
|
||||
const handleShowTagsChange = (checked) => {
|
||||
showTags.value = checked
|
||||
// 触发自定义事件或更新状态
|
||||
document.documentElement.style.setProperty('--show-tags', checked ? 'block' : 'none')
|
||||
message.success(checked ? '标签栏已显示' : '标签栏已隐藏')
|
||||
}
|
||||
|
||||
// 切换面包屑显示
|
||||
const handleShowBreadcrumbChange = (checked) => {
|
||||
showBreadcrumb.value = checked
|
||||
message.success(checked ? '面包屑已显示' : '面包屑已隐藏')
|
||||
}
|
||||
|
||||
// 重置设置
|
||||
const handleResetSettings = () => {
|
||||
themeColor.value = '#1890ff'
|
||||
showTags.value = true
|
||||
showBreadcrumb.value = true
|
||||
layoutStore.setLayoutMode('default')
|
||||
document.documentElement.style.setProperty('--primary-color', '#1890ff')
|
||||
document.documentElement.style.setProperty('--show-tags', 'block')
|
||||
message.success('设置已重置')
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 从本地存储或其他地方恢复设置
|
||||
const savedThemeColor = localStorage.getItem('themeColor')
|
||||
if (savedThemeColor) {
|
||||
themeColor.value = savedThemeColor
|
||||
document.documentElement.style.setProperty('--primary-color', savedThemeColor)
|
||||
}
|
||||
|
||||
const savedShowTags = localStorage.getItem('showTags')
|
||||
if (savedShowTags !== null) {
|
||||
showTags.value = savedShowTags === 'true'
|
||||
document.documentElement.style.setProperty('--show-tags', savedShowTags === 'true' ? 'block' : 'none')
|
||||
}
|
||||
})
|
||||
|
||||
// 监听设置变化并保存到本地存储
|
||||
watch(themeColor, (newVal) => {
|
||||
localStorage.setItem('themeColor', newVal)
|
||||
})
|
||||
|
||||
watch(showTags, (newVal) => {
|
||||
localStorage.setItem('showTags', String(newVal))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.setting-content {
|
||||
.setting-item {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.setting-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.layout-mode-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
|
||||
.layout-mode-item {
|
||||
position: relative;
|
||||
border: 2px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color, #1890ff);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--primary-color, #1890ff);
|
||||
background-color: rgba(24, 144, 255, 0.05);
|
||||
}
|
||||
|
||||
.layout-preview {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background-color: #f0f2f5;
|
||||
|
||||
.preview-sidebar {
|
||||
background-color: #001529;
|
||||
}
|
||||
|
||||
.preview-sidebar-2 {
|
||||
background-color: #fff;
|
||||
border-left: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
flex: 1;
|
||||
padding: 4px;
|
||||
|
||||
.preview-header {
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.preview-body {
|
||||
height: calc(100% - 12px);
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
&.preview-default {
|
||||
.preview-sidebar {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.preview-sidebar-2 {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.preview-menu {
|
||||
.preview-sidebar {
|
||||
width: 30px;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
&.preview-top {
|
||||
flex-direction: column;
|
||||
|
||||
.preview-sidebar {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
.preview-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-name {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
color: var(--primary-color, #1890ff);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
.color-item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #fff;
|
||||
box-shadow: 0 0 0 2px var(--primary-color, #1890ff);
|
||||
|
||||
.anticon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-list {
|
||||
.toggle-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
:deep(.ant-btn) {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,172 +0,0 @@
|
||||
<template>
|
||||
<a-menu mode="inline" :theme="theme" :collapsed="collapsed" :selected-keys="selectedKeys" :open-keys="openKeys"
|
||||
@select="handleSelect" @open-change="handleOpenChange" class="side-menu">
|
||||
<template v-for="item in menuList">
|
||||
<!-- 有子菜单 -->
|
||||
<a-sub-menu v-if="item.children && item.children.length > 0" :key="item.path + '-submenu'">
|
||||
<template #icon>
|
||||
<component :is="item.meta?.icon || 'MenuOutlined'" />
|
||||
</template>
|
||||
<template #title>{{ item.meta?.title || item.name }}</template>
|
||||
<a-menu-item v-for="child in item.children.filter(sub => !sub.children || sub.children.length === 0)"
|
||||
:key="child.path">
|
||||
<template #icon>
|
||||
<component :is="child.meta?.icon || 'FileOutlined'" />
|
||||
</template>
|
||||
{{ child.meta?.title || child.name }}
|
||||
</a-menu-item>
|
||||
<a-sub-menu v-for="child in item.children.filter(sub => sub.children && sub.children.length > 0)"
|
||||
:key="child.path">
|
||||
<template #icon>
|
||||
<component :is="child.meta?.icon || 'AppstoreOutlined'" />
|
||||
</template>
|
||||
<template #title>{{ child.meta?.title || child.name }}</template>
|
||||
<a-menu-item v-for="grandChild in child.children" :key="grandChild.path">
|
||||
<template #icon>
|
||||
<component :is="grandChild.meta?.icon || 'FileOutlined'" />
|
||||
</template>
|
||||
{{ grandChild.meta?.title || grandChild.name }}
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-sub-menu>
|
||||
<!-- 无子菜单 -->
|
||||
<a-menu-item v-else :key="item.path + '-item'">
|
||||
<template #icon>
|
||||
<component :is="item.meta?.icon || 'MenuOutlined'" />
|
||||
</template>
|
||||
{{ item.meta?.title || item.name }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { getUserMenu } from '@/api/menu'
|
||||
|
||||
const props = defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
}
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const menuList = ref([])
|
||||
const selectedKeys = ref([])
|
||||
const openKeys = ref([])
|
||||
|
||||
// 获取菜单数据
|
||||
const getMenuList = async () => {
|
||||
try {
|
||||
const res = await getUserMenu()
|
||||
if (res.code === 200) {
|
||||
menuList.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取菜单失败:', error)
|
||||
// 模拟数据
|
||||
menuList.value = [
|
||||
{
|
||||
path: '/home',
|
||||
name: 'Home',
|
||||
meta: { title: '首页', icon: 'HomeOutlined' }
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
name: 'System',
|
||||
meta: { title: '系统管理', icon: 'SettingOutlined' },
|
||||
children: [
|
||||
{
|
||||
path: '/system/user',
|
||||
name: 'User',
|
||||
meta: { title: '用户管理', icon: 'UserOutlined' }
|
||||
},
|
||||
{
|
||||
path: '/system/role',
|
||||
name: 'Role',
|
||||
meta: { title: '角色管理', icon: 'TeamOutlined' }
|
||||
},
|
||||
{
|
||||
path: '/system/menu',
|
||||
name: 'Menu',
|
||||
meta: { title: '菜单管理', icon: 'MenuOutlined' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 更新选中的菜单
|
||||
const updateSelectedKeys = () => {
|
||||
selectedKeys.value = [route.path]
|
||||
|
||||
// 获取父级菜单路径
|
||||
const matched = route.matched
|
||||
.filter(item => item.path !== '/' && item.path !== route.path)
|
||||
.map(item => item.path)
|
||||
|
||||
// 折叠时不自动展开
|
||||
if (!props.collapsed) {
|
||||
openKeys.value = matched
|
||||
}
|
||||
}
|
||||
|
||||
// 处理菜单选择
|
||||
const handleSelect = ({ key }) => {
|
||||
router.push(key)
|
||||
}
|
||||
|
||||
// 处理菜单展开/收起
|
||||
const handleOpenChange = (keys) => {
|
||||
openKeys.value = keys
|
||||
}
|
||||
|
||||
// 监听路由变化
|
||||
watch(() => route.path, () => {
|
||||
updateSelectedKeys()
|
||||
}, { immediate: true })
|
||||
|
||||
// 监听折叠状态
|
||||
watch(() => props.collapsed, (val) => {
|
||||
if (val) {
|
||||
openKeys.value = []
|
||||
} else {
|
||||
updateSelectedKeys()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getMenuList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.side-menu {
|
||||
height: calc(100% - 60px);
|
||||
border-right: none;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,487 +0,0 @@
|
||||
<template>
|
||||
<div v-show="showTags" class="tags-view">
|
||||
<div class="tags-wrapper" @contextmenu.prevent>
|
||||
<a-space :size="4">
|
||||
<a-tag
|
||||
v-for="tag in visitedViews"
|
||||
:key="tag.fullPath"
|
||||
:closable="!tag.meta?.affix"
|
||||
class="tag-item"
|
||||
:class="{ active: isActive(tag), 'tag-affix': tag.meta?.affix }"
|
||||
@click="clickTag(tag)"
|
||||
@close="closeSelectedTag(tag)"
|
||||
@contextmenu.prevent="handleContextMenu($event, tag)">
|
||||
<template #icon v-if="tag.meta?.affix">
|
||||
<PushpinFilled />
|
||||
</template>
|
||||
{{ tag.meta?.title || tag.name }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="tags-actions">
|
||||
<a-dropdown v-model:open="actionMenuVisible" trigger="click" placement="bottomRight">
|
||||
<a-button size="small" type="text">
|
||||
<MoreOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleActionMenuClick">
|
||||
<a-menu-item key="refresh">
|
||||
<ReloadOutlined />
|
||||
<span>刷新当前页</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="closeOthers">
|
||||
<ColumnWidthOutlined />
|
||||
<span>关闭其他</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="closeLeft">
|
||||
<LeftOutlined />
|
||||
<span>关闭左侧</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="closeRight">
|
||||
<RightOutlined />
|
||||
<span>关闭右侧</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="closeAll">
|
||||
<CloseCircleOutlined />
|
||||
<span>关闭所有</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- 右键菜单 -->
|
||||
<teleport to="body">
|
||||
<div
|
||||
v-if="contextMenu.visible"
|
||||
:style="{
|
||||
position: 'fixed',
|
||||
left: contextMenu.x + 'px',
|
||||
top: contextMenu.y + 'px',
|
||||
zIndex: 9999
|
||||
}"
|
||||
class="context-menu"
|
||||
@click="closeContextMenu">
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="refresh">
|
||||
<ReloadOutlined />
|
||||
<span>刷新</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="selectedTag && !selectedTag.meta?.affix" key="close">
|
||||
<CloseOutlined />
|
||||
<span>关闭</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="closeOthers">
|
||||
<ColumnWidthOutlined />
|
||||
<span>关闭其他</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="closeAll">
|
||||
<CloseCircleOutlined />
|
||||
<span>关闭所有</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import config from '@/config'
|
||||
|
||||
defineOptions({
|
||||
name: 'TagsView',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const showTags = ref(true)
|
||||
const selectedTag = ref(null)
|
||||
const visitedViews = computed(() => layoutStore.viewTags)
|
||||
// 右键菜单状态
|
||||
const contextMenu = ref({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
// 顶部操作菜单状态
|
||||
const actionMenuVisible = ref(false)
|
||||
|
||||
// 判断是否是当前激活的标签
|
||||
const isActive = (tag) => {
|
||||
return tag.fullPath === route.fullPath
|
||||
}
|
||||
|
||||
// 添加标签
|
||||
const addTags = () => {
|
||||
const { name } = route
|
||||
if (name && !route.meta?.noCache) {
|
||||
layoutStore.updateViewTags({
|
||||
fullPath: route.fullPath,
|
||||
path: route.path,
|
||||
name: name,
|
||||
query: route.query,
|
||||
params: route.params,
|
||||
meta: route.meta
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 移除标签
|
||||
const closeSelectedTag = (view) => {
|
||||
// 如果是固定标签，不允许关闭
|
||||
if (view.meta?.affix) {
|
||||
return
|
||||
}
|
||||
|
||||
layoutStore.removeViewTags(view.fullPath)
|
||||
|
||||
// 如果关闭的是当前激活的标签，需要跳转
|
||||
if (isActive(view)) {
|
||||
const nextTag = visitedViews.value.find((tag) => tag.fullPath !== view.fullPath)
|
||||
if (nextTag) {
|
||||
router.push(nextTag.fullPath)
|
||||
} else {
|
||||
// 如果没有其他标签，跳转到首页
|
||||
router.push(config.DASHBOARD_URL)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭其他标签
|
||||
const closeOthersTags = () => {
|
||||
if (!selectedTag.value || !selectedTag.value.fullPath) {
|
||||
return
|
||||
}
|
||||
|
||||
// 保留固定标签和当前选中的标签
|
||||
const tagsToKeep = visitedViews.value.filter(
|
||||
(tag) => tag.meta?.affix || tag.fullPath === selectedTag.value.fullPath
|
||||
)
|
||||
|
||||
// 更新标签列表
|
||||
layoutStore.viewTags = tagsToKeep
|
||||
|
||||
// 如果当前不在选中的标签页，跳转到选中的标签
|
||||
if (!isActive(selectedTag.value)) {
|
||||
router.push(selectedTag.value.fullPath)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭所有标签
|
||||
const closeAllTags = () => {
|
||||
// 只保留固定标签
|
||||
const affixTags = visitedViews.value.filter((tag) => tag.meta?.affix)
|
||||
layoutStore.viewTags = affixTags
|
||||
|
||||
// 如果还有固定标签，跳转到第一个固定标签
|
||||
if (affixTags.length > 0) {
|
||||
router.push(affixTags[0].fullPath)
|
||||
} else {
|
||||
// 如果没有固定标签，跳转到首页
|
||||
router.push(config.DASHBOARD_URL)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭左侧标签
|
||||
const closeLeftTags = () => {
|
||||
const currentTag = selectedTag.value || visitedViews.value.find((tag) => isActive(tag))
|
||||
if (!currentTag) return
|
||||
|
||||
const currentIndex = visitedViews.value.findIndex((tag) => tag.fullPath === currentTag.fullPath)
|
||||
if (currentIndex === -1) return
|
||||
|
||||
// 保留当前标签及其右侧的标签，以及所有固定标签
|
||||
const tagsToKeep = visitedViews.value.filter((tag, index) => {
|
||||
return tag.meta?.affix || index >= currentIndex
|
||||
})
|
||||
|
||||
layoutStore.viewTags = tagsToKeep
|
||||
}
|
||||
|
||||
// 关闭右侧标签
|
||||
const closeRightTags = () => {
|
||||
const currentTag = selectedTag.value || visitedViews.value.find((tag) => isActive(tag))
|
||||
if (!currentTag) return
|
||||
|
||||
const currentIndex = visitedViews.value.findIndex((tag) => tag.fullPath === currentTag.fullPath)
|
||||
if (currentIndex === -1) return
|
||||
|
||||
// 保留当前标签及其左侧的标签，以及所有固定标签
|
||||
const tagsToKeep = visitedViews.value.filter((tag, index) => {
|
||||
return tag.meta?.affix || index <= currentIndex
|
||||
})
|
||||
|
||||
layoutStore.viewTags = tagsToKeep
|
||||
}
|
||||
|
||||
// 点击标签
|
||||
const clickTag = (tag) => {
|
||||
if (!isActive(tag)) {
|
||||
router.push(tag.fullPath)
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新指定标签
|
||||
const refreshTag = (tag) => {
|
||||
// 如果刷新的是当前激活的标签
|
||||
if (isActive(tag)) {
|
||||
// 调用 store 的刷新方法，触发组件重新渲染
|
||||
layoutStore.refreshTag()
|
||||
} else {
|
||||
// 如果刷新的是其他标签，先跳转到该标签
|
||||
router.push(tag.fullPath)
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新当前选中的标签（用于顶部操作按钮）
|
||||
const refreshSelectedTag = () => {
|
||||
// 找到当前激活的标签
|
||||
const currentTag = visitedViews.value.find((tag) => isActive(tag))
|
||||
if (currentTag) {
|
||||
refreshTag(currentTag)
|
||||
}
|
||||
}
|
||||
|
||||
// 右键菜单处理
|
||||
const handleContextMenu = (event, tag) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
selectedTag.value = tag
|
||||
contextMenu.value = {
|
||||
visible: true,
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭右键菜单
|
||||
const closeContextMenu = () => {
|
||||
contextMenu.value.visible = false
|
||||
}
|
||||
|
||||
// 菜单点击处理
|
||||
const handleMenuClick = ({ key }) => {
|
||||
switch (key) {
|
||||
case 'refresh':
|
||||
if (selectedTag.value) {
|
||||
refreshTag(selectedTag.value)
|
||||
}
|
||||
break
|
||||
case 'close':
|
||||
if (selectedTag.value && !selectedTag.value.meta?.affix) {
|
||||
closeSelectedTag(selectedTag.value)
|
||||
}
|
||||
break
|
||||
case 'closeOthers':
|
||||
closeOthersTags()
|
||||
break
|
||||
case 'closeAll':
|
||||
closeAllTags()
|
||||
break
|
||||
}
|
||||
closeContextMenu()
|
||||
}
|
||||
|
||||
// 顶部操作菜单点击处理
|
||||
const handleActionMenuClick = ({ key }) => {
|
||||
switch (key) {
|
||||
case 'refresh':
|
||||
refreshSelectedTag()
|
||||
break
|
||||
case 'closeOthers':
|
||||
closeOthersTags()
|
||||
break
|
||||
case 'closeLeft':
|
||||
closeLeftTags()
|
||||
break
|
||||
case 'closeRight':
|
||||
closeRightTags()
|
||||
break
|
||||
case 'closeAll':
|
||||
closeAllTags()
|
||||
break
|
||||
}
|
||||
actionMenuVisible.value = false
|
||||
}
|
||||
|
||||
// 点击其他地方关闭右键菜单
|
||||
const handleClickOutside = (event) => {
|
||||
if (contextMenu.value.visible) {
|
||||
const menuElement = document.querySelector('.context-menu')
|
||||
if (menuElement && !menuElement.contains(event.target)) {
|
||||
closeContextMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听路由变化，自动添加标签
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
addTags()
|
||||
// 更新当前选中的标签
|
||||
selectedTag.value = visitedViews.value.find((tag) => isActive(tag)) || null
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
addTags()
|
||||
// 初始化选中的标签
|
||||
selectedTag.value = visitedViews.value.find((tag) => isActive(tag)) || null
|
||||
// 添加点击事件监听器
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 移除点击事件监听器
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tags-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 16px;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
|
||||
.tags-wrapper {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 12px;
|
||||
margin: 0 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fafafa;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.tag-affix {
|
||||
background-color: #fff7e6;
|
||||
border-color: #ffd591;
|
||||
color: #fa8c16;
|
||||
|
||||
&.active {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ffe7ba;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
&.active:hover {
|
||||
background-color: #d46b08;
|
||||
border-color: #d46b08;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tag-close-icon) {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 4px 0;
|
||||
min-width: 160px;
|
||||
|
||||
:deep(.ant-menu) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
|
||||
.ant-menu-item {
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,448 +0,0 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
v-model:open="visible"
|
||||
:title="$t('common.taskCenter')"
|
||||
placement="right"
|
||||
:width="400"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="task-drawer">
|
||||
<!-- 任务统计 -->
|
||||
<div class="task-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ totalTasks }}</div>
|
||||
<div class="stat-label">{{ $t('common.totalTasks') }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number pending">{{ pendingTasks }}</div>
|
||||
<div class="stat-label">{{ $t('common.pendingTasks') }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number completed">{{ completedTasks }}</div>
|
||||
<div class="stat-label">{{ $t('common.completedTasks') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="task-actions">
|
||||
<a-input
|
||||
v-model:value="searchKeyword"
|
||||
:placeholder="$t('common.searchTasks')"
|
||||
allow-clear
|
||||
@input="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<div class="filter-buttons">
|
||||
<a-button
|
||||
:type="filterType === 'all' ? 'primary' : 'default'"
|
||||
size="small"
|
||||
@click="setFilter('all')"
|
||||
>
|
||||
{{ $t('common.all') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:type="filterType === 'pending' ? 'primary' : 'default'"
|
||||
size="small"
|
||||
@click="setFilter('pending')"
|
||||
>
|
||||
{{ $t('common.pending') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:type="filterType === 'completed' ? 'primary' : 'default'"
|
||||
size="small"
|
||||
@click="setFilter('completed')"
|
||||
>
|
||||
{{ $t('common.completed') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务列表 -->
|
||||
<div class="task-list">
|
||||
<div v-if="filteredTasks.length > 0">
|
||||
<div
|
||||
v-for="task in filteredTasks"
|
||||
:key="task.id"
|
||||
class="task-item"
|
||||
:class="{ completed: task.completed }"
|
||||
>
|
||||
<div class="task-checkbox">
|
||||
<a-checkbox
|
||||
:checked="task.completed"
|
||||
@change="toggleTask(task)"
|
||||
/>
|
||||
</div>
|
||||
<div class="task-content">
|
||||
<div class="task-title">{{ task.title }}</div>
|
||||
<div class="task-meta">
|
||||
<span class="task-priority" :class="task.priority">
|
||||
{{ $t(`common.priority${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}`) }}
|
||||
</span>
|
||||
<span class="task-time">{{ task.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-actions">
|
||||
<a-popconfirm
|
||||
:title="$t('common.confirmDelete')"
|
||||
:ok-text="$t('common.confirm')"
|
||||
:cancel-text="$t('common.cancel')"
|
||||
@confirm="deleteTask(task.id)"
|
||||
>
|
||||
<DeleteOutlined class="action-icon" />
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-else :description="$t('common.noTasks')" />
|
||||
</div>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<div class="drawer-footer">
|
||||
<a-button @click="showAddTask">
|
||||
<PlusOutlined />
|
||||
{{ $t('common.addTask') }}
|
||||
</a-button>
|
||||
<a-button danger @click="clearAllTasks">
|
||||
{{ $t('common.clearAll') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加任务弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="addTaskVisible"
|
||||
:title="$t('common.addTask')"
|
||||
:ok-text="$t('common.confirm')"
|
||||
:cancel-text="$t('common.cancel')"
|
||||
@ok="confirmAddTask"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :label="$t('common.taskTitle')">
|
||||
<a-input v-model:value="newTask.title" :placeholder="$t('common.enterTaskTitle')" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('common.taskPriority')">
|
||||
<a-select v-model:value="newTask.priority">
|
||||
<a-select-option value="low">{{ $t('common.priorityLow') }}</a-select-option>
|
||||
<a-select-option value="medium">{{ $t('common.priorityMedium') }}</a-select-option>
|
||||
<a-select-option value="high">{{ $t('common.priorityHigh') }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { SearchOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'TaskDrawer',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const visible = defineModel('visible', { type: Boolean, default: false })
|
||||
|
||||
const tasks = defineModel('tasks', { type: Array, default: () => [] })
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('')
|
||||
// 筛选类型：all, pending, completed
|
||||
const filterType = ref('all')
|
||||
|
||||
// 添加任务弹窗
|
||||
const addTaskVisible = ref(false)
|
||||
const newTask = ref({
|
||||
title: '',
|
||||
priority: 'medium',
|
||||
})
|
||||
|
||||
// 统计数据
|
||||
const totalTasks = computed(() => tasks.value.length)
|
||||
const pendingTasks = computed(() => tasks.value.filter(t => !t.completed).length)
|
||||
const completedTasks = computed(() => tasks.value.filter(t => t.completed).length)
|
||||
|
||||
// 筛选后的任务列表
|
||||
const filteredTasks = computed(() => {
|
||||
let result = [...tasks.value]
|
||||
|
||||
// 按状态筛选
|
||||
if (filterType.value === 'pending') {
|
||||
result = result.filter(t => !t.completed)
|
||||
} else if (filterType.value === 'completed') {
|
||||
result = result.filter(t => t.completed)
|
||||
}
|
||||
|
||||
// 按关键词搜索
|
||||
if (searchKeyword.value.trim()) {
|
||||
const keyword = searchKeyword.value.toLowerCase()
|
||||
result = result.filter(t =>
|
||||
t.title.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
// 切换任务状态
|
||||
const toggleTask = (task) => {
|
||||
task.completed = !task.completed
|
||||
}
|
||||
|
||||
// 删除任务
|
||||
const deleteTask = (id) => {
|
||||
const index = tasks.value.findIndex(t => t.id === id)
|
||||
if (index > -1) {
|
||||
tasks.value.splice(index, 1)
|
||||
message.success(t('common.deleted'))
|
||||
}
|
||||
}
|
||||
|
||||
// 清空所有任务
|
||||
const clearAllTasks = () => {
|
||||
tasks.value = []
|
||||
message.success(t('common.cleared'))
|
||||
}
|
||||
|
||||
// 显示添加任务弹窗
|
||||
const showAddTask = () => {
|
||||
newTask.value = {
|
||||
title: '',
|
||||
priority: 'medium',
|
||||
}
|
||||
addTaskVisible.value = true
|
||||
}
|
||||
|
||||
// 确认添加任务
|
||||
const confirmAddTask = () => {
|
||||
if (!newTask.value.title.trim()) {
|
||||
message.warning(t('common.pleaseEnterTaskTitle'))
|
||||
return
|
||||
}
|
||||
|
||||
tasks.value.unshift({
|
||||
id: Date.now(),
|
||||
title: newTask.value.title,
|
||||
priority: newTask.value.priority,
|
||||
completed: false,
|
||||
time: t('common.justNow'),
|
||||
})
|
||||
|
||||
addTaskVisible.value = false
|
||||
message.success(t('common.added'))
|
||||
}
|
||||
|
||||
// 设置筛选类型
|
||||
const setFilter = (type) => {
|
||||
filterType.value = type
|
||||
}
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
// 搜索逻辑在 computed 中自动处理
|
||||
}
|
||||
|
||||
// 监听抽窗关闭，重置搜索和筛选
|
||||
watch(visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
searchKeyword.value = ''
|
||||
filterType.value = 'all'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.task-drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.task-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 8px;
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.stat-number {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&.pending {
|
||||
color: #ffd666;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
color: #95de64;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 16px;
|
||||
padding-right: 8px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
}
|
||||
|
||||
.task-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.completed {
|
||||
.task-title {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.task-checkbox {
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.task-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
|
||||
.task-priority {
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
||||
&.high {
|
||||
background-color: #fff1f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.low {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.task-time {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
margin-left: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-icon {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,380 +0,0 @@
|
||||
<template>
|
||||
<div class="userbar">
|
||||
<!-- 菜单搜索 -->
|
||||
<a-tooltip :title="$t('common.search')">
|
||||
<a-button type="text" @click="showSearch" class="action-btn">
|
||||
<SearchOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<a-dropdown :trigger="['click']" placement="bottomRight">
|
||||
<a-badge :count="messageCount" :offset="[-5, 5]">
|
||||
<a-button type="text" class="action-btn">
|
||||
<BellOutlined />
|
||||
</a-button>
|
||||
</a-badge>
|
||||
<template #overlay>
|
||||
<a-card class="dropdown-card" :title="$t('common.messages')" :bordered="false">
|
||||
<template #extra>
|
||||
<a @click="clearMessages">{{ $t('common.clearAll') }}</a>
|
||||
</template>
|
||||
<div class="message-list">
|
||||
<div v-for="msg in messages" :key="msg.id" class="message-item" :class="{ unread: !msg.read }">
|
||||
<div class="message-content">
|
||||
<div class="message-title">{{ msg.title }}</div>
|
||||
<div class="message-time">{{ msg.time }}</div>
|
||||
</div>
|
||||
<a-badge v-if="!msg.read" dot />
|
||||
</div>
|
||||
<a-empty v-if="messages.length === 0" :description="$t('common.noMessages')" />
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<!-- 任务列表 -->
|
||||
<a-tooltip :title="$t('common.taskCenter')">
|
||||
<a-badge :count="taskCount" :offset="[-5, 5]">
|
||||
<a-button type="text" @click="taskVisible = true" class="action-btn">
|
||||
<CheckSquareOutlined />
|
||||
</a-button>
|
||||
</a-badge>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 语言切换 -->
|
||||
<a-dropdown :trigger="['click']" placement="bottomRight">
|
||||
<a-button type="text" class="action-btn">
|
||||
<GlobalOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleLanguageChange">
|
||||
<a-menu-item v-for="locale in i18nStore.availableLocales" :key="locale.value"
|
||||
:disabled="i18nStore.currentLocale === locale.value">
|
||||
<span>{{ locale.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<!-- 全屏 -->
|
||||
<a-tooltip :title="$t('common.fullscreen')">
|
||||
<a-button type="text" @click="toggleFullscreen" class="action-btn">
|
||||
<FullscreenOutlined v-if="!isFullscreen" />
|
||||
<FullscreenExitOutlined v-else />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<a-dropdown :trigger="['click']">
|
||||
<div class="user-info">
|
||||
<a-avatar :size="32" :src="userStore.user?.avatar || ''">
|
||||
{{ userStore.user?.username?.charAt(0)?.toUpperCase() || 'U' }}
|
||||
</a-avatar>
|
||||
<span class="username">{{ userStore.user?.username || 'Admin' }}</span>
|
||||
<DownOutlined />
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="profile">
|
||||
<UserOutlined />
|
||||
<span>{{ $t('common.personalCenter') }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="settings">
|
||||
<SettingOutlined />
|
||||
<span>{{ $t('common.systemSettings') }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="clearCache">
|
||||
<DeleteOutlined />
|
||||
<span>{{ $t('common.clearCache') }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout">
|
||||
<LogoutOutlined />
|
||||
<span>{{ $t('common.logout') }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- 菜单搜索弹窗 -->
|
||||
<search v-model:visible="searchVisible" />
|
||||
|
||||
<!-- 任务抽屉 -->
|
||||
<task v-model:visible="taskVisible" v-model:tasks="tasks" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useI18nStore } from '@/stores/modules/i18n'
|
||||
import { DownOutlined, UserOutlined, LogoutOutlined, FullscreenOutlined, FullscreenExitOutlined, BellOutlined, CheckSquareOutlined, GlobalOutlined, SearchOutlined, SettingOutlined, DeleteOutlined } from '@ant-design/icons-vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import search from './search.vue'
|
||||
import task from './task.vue'
|
||||
|
||||
// 定义组件名称（多词命名）
|
||||
defineOptions({
|
||||
name: 'UserBar',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const i18nStore = useI18nStore()
|
||||
|
||||
const isFullscreen = ref(false)
|
||||
const searchVisible = ref(false)
|
||||
const taskVisible = ref(false)
|
||||
|
||||
// 消息数据
|
||||
const messages = ref([
|
||||
{ id: 1, title: '系统通知：新版本已发布', time: '10分钟前', read: false },
|
||||
{ id: 2, title: '任务提醒：请完成待审核的用户', time: '30分钟前', read: false },
|
||||
{ id: 3, title: '安全警告：检测到异常登录', time: '1小时前', read: true },
|
||||
{ id: 4, title: '数据备份已完成', time: '2小时前', read: true },
|
||||
])
|
||||
|
||||
const messageCount = computed(() => messages.value.filter((m) => !m.read).length)
|
||||
|
||||
// 任务数据
|
||||
const tasks = ref([
|
||||
{ id: 1, title: '完成用户审核', priority: 'high', completed: false, time: '今天' },
|
||||
{ id: 2, title: '更新系统文档', priority: 'medium', completed: false, time: '明天' },
|
||||
{ id: 3, title: '优化数据库查询', priority: 'low', completed: true, time: '昨天' },
|
||||
])
|
||||
|
||||
const taskCount = computed(() => tasks.value.filter((t) => !t.completed).length)
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullscreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen()
|
||||
isFullscreen.value = true
|
||||
} else {
|
||||
document.exitFullscreen()
|
||||
isFullscreen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 监听全屏变化
|
||||
const handleFullscreenChange = () => {
|
||||
isFullscreen.value = !!document.fullscreenElement
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('fullscreenchange', handleFullscreenChange)
|
||||
})
|
||||
|
||||
// 显示搜索功能
|
||||
const showSearch = () => {
|
||||
searchVisible.value = true
|
||||
}
|
||||
|
||||
// 清除消息
|
||||
const clearMessages = () => {
|
||||
messages.value = []
|
||||
message.success(t('common.cleared'))
|
||||
}
|
||||
|
||||
// 显示任务抽屉
|
||||
const showTasks = () => {
|
||||
taskVisible.value = true
|
||||
}
|
||||
|
||||
// 切换语言
|
||||
const handleLanguageChange = ({ key }) => {
|
||||
i18nStore.setLocale(key)
|
||||
message.success(t('common.languageChanged'))
|
||||
}
|
||||
|
||||
// 处理菜单点击
|
||||
const handleMenuClick = ({ key }) => {
|
||||
switch (key) {
|
||||
case 'profile':
|
||||
router.push('/ucenter')
|
||||
break
|
||||
case 'settings':
|
||||
router.push('/system/setting')
|
||||
break
|
||||
case 'clearCache':
|
||||
handleClearCache()
|
||||
break
|
||||
case 'logout':
|
||||
handleLogout()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 清除缓存
|
||||
const handleClearCache = () => {
|
||||
Modal.confirm({
|
||||
title: t('common.confirmClearCache'),
|
||||
content: t('common.clearCacheConfirm'),
|
||||
okText: t('common.confirm'),
|
||||
cancelText: t('common.cancel'),
|
||||
onOk: () => {
|
||||
try {
|
||||
// 清除 localStorage
|
||||
localStorage.clear()
|
||||
// 清除 sessionStorage
|
||||
sessionStorage.clear()
|
||||
// 清除所有缓存
|
||||
if ('caches' in window) {
|
||||
caches.keys().then(names => {
|
||||
names.forEach(name => {
|
||||
caches.delete(name)
|
||||
})
|
||||
})
|
||||
}
|
||||
message.success(t('common.cacheCleared'))
|
||||
// 延迟刷新页面以应用缓存清除
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
message.error(t('common.clearCacheFailed'))
|
||||
console.error('清除缓存失败:', error)
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
Modal.confirm({
|
||||
title: t('common.confirmLogout'),
|
||||
content: t('common.logoutConfirm'),
|
||||
okText: t('common.confirm'),
|
||||
cancelText: t('common.cancel'),
|
||||
onOk: async () => {
|
||||
try {
|
||||
await userStore.logout()
|
||||
message.success(t('common.logoutSuccess'))
|
||||
router.push('/login')
|
||||
} catch {
|
||||
message.error(t('common.logoutFailed'))
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.userbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
margin-right: 8px;
|
||||
|
||||
:deep(.ant-input) {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 16px;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.lang-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-card {
|
||||
width: 320px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
padding: 12px 16px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 12px 16px;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.message-list,
|
||||
.task-list {
|
||||
|
||||
.message-item,
|
||||
.task-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.unread {
|
||||
background-color: rgba(24, 144, 255, 0.04);
|
||||
padding: 10px;
|
||||
margin: 0 -10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
.message-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.task-item {
|
||||
.completed {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,647 +0,0 @@
|
||||
<template>
|
||||
<a-layout class="app-wrapper" :class="layoutClass">
|
||||
<!-- 默认布局：左侧双栏布局 -->
|
||||
<template v-if="layoutMode === 'default'">
|
||||
<!-- 第一个侧边栏：显示一级菜单 -->
|
||||
<a-layout-sider theme="dark" width="70" class="left-sidebar">
|
||||
<div class="logo-box">
|
||||
<span class="logo-text">VUE</span>
|
||||
</div>
|
||||
<ul class="left-nav">
|
||||
<li v-for="(item, index) in menuList" :key="index"
|
||||
:class="{ active: selectedParentMenu?.path === item.path }"
|
||||
@click="handleParentMenuClick(item)">
|
||||
<component :is="getIconComponent(item.meta?.icon)" />
|
||||
<span>{{ item.meta?.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</a-layout-sider>
|
||||
|
||||
<!-- 第二个侧边栏：显示选中的父菜单的子菜单 -->
|
||||
<a-layout-sider
|
||||
v-if="selectedParentMenu && selectedParentMenu.children && selectedParentMenu.children.length > 0"
|
||||
theme="light" :collapsed="sidebarCollapsed" :collapsible="true" @collapse="handleCollapse" width="200"
|
||||
:collapsed-width="64" class="right-sidebar">
|
||||
<div class="parent-title">
|
||||
<component :is="getIconComponent(selectedParentMenu.meta?.icon)" />
|
||||
<span v-if="!sidebarCollapsed">{{ selectedParentMenu.meta?.title }}</span>
|
||||
</div>
|
||||
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline"
|
||||
:selected-keys="[route.path]">
|
||||
<navMenu :menu-items="selectedParentMenu.children" :active-path="route.path" />
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout class="main-layout">
|
||||
<a-layout-header class="app-header">
|
||||
<div class="header-left">
|
||||
<breadcrumb />
|
||||
</div>
|
||||
<userbar />
|
||||
</a-layout-header>
|
||||
<tags />
|
||||
<a-layout-content class="app-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" :key="refreshKey" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<!-- Menu布局：左侧菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'menu'">
|
||||
<a-layout-sider theme="light" style="border-right: 1px solid #f0f0f0" :collapsed="sidebarCollapsed"
|
||||
:collapsible="true" @collapse="handleCollapse" class="full-menu-sidebar" width="200"
|
||||
:collapsed-width="64">
|
||||
<div class="logo-box-full">
|
||||
<span v-if="!sidebarCollapsed" class="logo-text">VUE ADMIN</span>
|
||||
<span v-else class="logo-text-mini">V</span>
|
||||
</div>
|
||||
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline"
|
||||
:selected-keys="[route.path]">
|
||||
<navMenu :menu-items="menuList" :active-path="route.path" />
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<a-layout class="main-layout">
|
||||
<a-layout-header class="app-header">
|
||||
<div class="header-left">
|
||||
<breadcrumb />
|
||||
</div>
|
||||
<userbar />
|
||||
</a-layout-header>
|
||||
<tags />
|
||||
<a-layout-content class="app-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" :key="$route.fullPath" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<!-- Top布局：顶部菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'top'">
|
||||
<a-layout-header class="app-header top-header">
|
||||
<div class="top-header-left">
|
||||
<div class="logo-box-top">
|
||||
<span class="logo-text">VUE ADMIN</span>
|
||||
</div>
|
||||
<a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" :selected-keys="[route.path]"
|
||||
style="line-height: 60px">
|
||||
<navMenu :menu-items="menuList" :active-path="route.path" />
|
||||
</a-menu>
|
||||
</div>
|
||||
<userbar />
|
||||
</a-layout-header>
|
||||
<tags />
|
||||
<a-layout-content class="app-main top-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" :key="refreshKey" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</a-layout-content>
|
||||
</template>
|
||||
|
||||
<!-- 漂浮的设置按钮 -->
|
||||
<a-float-button type="primary" @click="openSetting">
|
||||
<template #icon>
|
||||
<SettingOutlined />
|
||||
</template>
|
||||
</a-float-button>
|
||||
|
||||
<!-- 布局设置组件 -->
|
||||
<setting ref="settingRef" />
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { SettingOutlined } from '@ant-design/icons-vue'
|
||||
import * as icons from '@ant-design/icons-vue'
|
||||
|
||||
import userbar from './components/userbar.vue'
|
||||
import navMenu from './components/navMenu.vue'
|
||||
import breadcrumb from './components/breadcrumb.vue'
|
||||
import tags from './components/tags.vue'
|
||||
import setting from './components/setting.vue'
|
||||
|
||||
// 定义组件名称（多词命名）
|
||||
defineOptions({
|
||||
name: 'AppLayouts',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const layoutStore = useLayoutStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const settingRef = ref(null)
|
||||
|
||||
const layoutMode = computed(() => layoutStore.layoutMode)
|
||||
const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)
|
||||
const selectedParentMenu = computed(() => layoutStore.selectedParentMenu)
|
||||
|
||||
// 缓存的视图列表
|
||||
const cachedViews = computed(() => {
|
||||
return layoutStore.viewTags.filter((tag) => !tag.meta?.noCache).map((tag) => tag.name)
|
||||
})
|
||||
|
||||
// 布局类名
|
||||
const layoutClass = computed(() => {
|
||||
return {
|
||||
'layout-default': layoutMode.value === 'default',
|
||||
'layout-menu': layoutMode.value === 'menu',
|
||||
'layout-top': layoutMode.value === 'top',
|
||||
'is-collapse': sidebarCollapsed.value,
|
||||
}
|
||||
})
|
||||
|
||||
// 获取刷新 key
|
||||
const refreshKey = computed(() => layoutStore.refreshKey)
|
||||
|
||||
const openKeys = ref([])
|
||||
const selectedKeys = ref([])
|
||||
const menuList = computed(() => {
|
||||
return userStore.menu
|
||||
})
|
||||
|
||||
// 获取图标组件
|
||||
const getIconComponent = (iconName) => {
|
||||
return icons[iconName] || icons.FileTextOutlined
|
||||
}
|
||||
|
||||
// 处理父菜单点击（默认布局的第一级菜单）
|
||||
const handleParentMenuClick = (item) => {
|
||||
// 设置选中的父菜单
|
||||
layoutStore.setSelectedParentMenu(item)
|
||||
// 如果没有子菜单，直接跳转
|
||||
if (!item.children || item.children.length === 0) {
|
||||
if (item.path) {
|
||||
router.push(item.path)
|
||||
}
|
||||
} else {
|
||||
// 默认展开第一个子菜单
|
||||
if (item.children.length > 0 && item.children[0].path) {
|
||||
router.push(item.children[0].path)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理折叠
|
||||
const handleCollapse = (collapsed) => {
|
||||
layoutStore.sidebarCollapsed = collapsed
|
||||
}
|
||||
|
||||
// 打开设置抽屉
|
||||
const openSetting = () => {
|
||||
settingRef.value?.openDrawer()
|
||||
}
|
||||
|
||||
// 更新选中的菜单和展开的菜单
|
||||
const updateMenuState = () => {
|
||||
selectedKeys.value = [route.path]
|
||||
|
||||
// 获取所有父级路径
|
||||
const matched = route.matched.filter((item) => item.path !== '/' && item.path !== route.path)
|
||||
const parentPaths = matched.map((item) => item.path)
|
||||
|
||||
// 对于不同的布局模式，处理方式不同
|
||||
if (layoutMode.value === 'default') {
|
||||
// 默认布局：找到当前路由对应的父菜单
|
||||
const currentMenu = findMenuByPath(menuList.value, route.path)
|
||||
if (currentMenu) {
|
||||
// 如果当前菜单有子菜单，设置为选中的父菜单
|
||||
if (currentMenu.children && currentMenu.children.length > 0) {
|
||||
layoutStore.setSelectedParentMenu(currentMenu)
|
||||
} else {
|
||||
// 如果当前菜单是子菜单，找到它的父菜单
|
||||
const parentMenu = findParentMenu(menuList.value, route.path)
|
||||
if (parentMenu) {
|
||||
layoutStore.setSelectedParentMenu(parentMenu)
|
||||
} else {
|
||||
layoutStore.setSelectedParentMenu(currentMenu)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (!sidebarCollapsed.value) {
|
||||
// 其他布局模式：展开所有父级菜单
|
||||
openKeys.value = parentPaths
|
||||
}
|
||||
}
|
||||
|
||||
// 根据路径查找菜单
|
||||
const findMenuByPath = (menus, path) => {
|
||||
for (const menu of menus) {
|
||||
if (menu.path === path) {
|
||||
return menu
|
||||
}
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const found = findMenuByPath(menu.children, path)
|
||||
if (found) {
|
||||
return found
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 查找父菜单
|
||||
const findParentMenu = (menus, path) => {
|
||||
for (const menu of menus) {
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
for (const child of menu.children) {
|
||||
if (child.path === path) {
|
||||
return menu
|
||||
}
|
||||
if (child.children && child.children.length > 0) {
|
||||
const found = findParentMenu([child], path)
|
||||
if (found) {
|
||||
return menu
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 监听路由变化，更新菜单状态
|
||||
watch(
|
||||
() => route.path,
|
||||
(newPath) => {
|
||||
console.log('路由变化:', newPath)
|
||||
updateMenuState()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 监听布局模式变化，确保菜单状态正确
|
||||
watch(
|
||||
() => layoutMode.value,
|
||||
() => {
|
||||
updateMenuState()
|
||||
},
|
||||
)
|
||||
|
||||
// 监听折叠状态
|
||||
watch(
|
||||
() => sidebarCollapsed.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
openKeys.value = []
|
||||
} else {
|
||||
updateMenuState()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 如果还没有选中的父菜单，默认选中第一个
|
||||
if (layoutMode.value === 'default' && !selectedParentMenu.value && menuList.value.length > 0) {
|
||||
layoutStore.setSelectedParentMenu(menuList.value[0])
|
||||
}
|
||||
updateMenuState()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
height: 60px;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.collapse-btn {
|
||||
font-size: 16px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
background-color: #f0f2f5;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
height: calc(100vh - 106px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 默认布局 - 双栏菜单 */
|
||||
&.layout-default {
|
||||
.left-sidebar {
|
||||
background-color: #001529;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
|
||||
.logo-box {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
.logo-text {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
li {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #ffffff;
|
||||
background-color: #1890ff;
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.anticon) {
|
||||
font-size: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 1px 0 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 9;
|
||||
|
||||
.parent-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
gap: 5px;
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-right: none;
|
||||
|
||||
.ant-menu-item {
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
&.ant-menu-item-selected {
|
||||
background-color: #e6f7ff;
|
||||
|
||||
&::after {
|
||||
border-color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-submenu {
|
||||
>.ant-menu-submenu-title {
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-menu-submenu-open {
|
||||
>.ant-menu-submenu-title {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
height: calc(100vh - 106px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu布局 */
|
||||
&.layout-menu {
|
||||
.full-menu-sidebar {
|
||||
background-color: #ffffff;
|
||||
z-index: 10;
|
||||
transition: all 0.2s;
|
||||
|
||||
.logo-box-full {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.2s;
|
||||
|
||||
.logo-text {
|
||||
color: #1890ff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.logo-text-mini {
|
||||
color: #1890ff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-right: none;
|
||||
height: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ant-menu-item {
|
||||
margin: 0;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding-left: 20px !important;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
&.ant-menu-item-selected {
|
||||
background-color: #e6f7ff;
|
||||
|
||||
&::after {
|
||||
border-color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-submenu {
|
||||
>.ant-menu-submenu-title {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin: 0;
|
||||
padding-left: 20px !important;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-menu-submenu-open {
|
||||
>.ant-menu-submenu-title {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-sub {
|
||||
background-color: #fafafa;
|
||||
|
||||
.ant-menu-item {
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
height: calc(100vh - 106px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Top布局 */
|
||||
&.layout-top {
|
||||
flex-direction: column;
|
||||
|
||||
.top-header {
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.top-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
|
||||
.logo-box-top {
|
||||
.logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-content {
|
||||
height: calc(100vh - 116px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用菜单样式优化 */
|
||||
:deep(.ant-menu-item-icon) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,401 +0,0 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const goHome = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<div class="content-wrapper">
|
||||
<div class="error-code">404</div>
|
||||
<div class="error-text">
|
||||
<h1>页面未找到</h1>
|
||||
<p>抱歉，您访问的页面不存在或已被移除</p>
|
||||
</div>
|
||||
<div class="error-illustration">
|
||||
<div class="planet"></div>
|
||||
<div class="star star-1"></div>
|
||||
<div class="star star-2"></div>
|
||||
<div class="star star-3"></div>
|
||||
<div class="rocket">
|
||||
<div class="rocket-body"></div>
|
||||
<div class="rocket-window"></div>
|
||||
<div class="rocket-flame"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary" @click="goHome">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||||
</svg>
|
||||
返回首页
|
||||
</button>
|
||||
<button class="btn btn-secondary" @click="goBack">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
返回上一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.not-found {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0c1929 0%, #1a237e 50%, #0d47a1 100%);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 星空背景 */
|
||||
.not-found::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(1px 1px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(1px 1px at 230px 80px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(2px 2px at 300px 150px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(1px 1px at 370px 200px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(2px 2px at 450px 50px, #ffffff, rgba(0, 0, 0, 0)),
|
||||
radial-gradient(1px 1px at 520px 180px, #ffffff, rgba(0, 0, 0, 0));
|
||||
background-size: 550px 250px;
|
||||
animation: stars 50s linear infinite;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes stars {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 550px 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 600px;
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 180px;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #00d4ff 0%, #7c4dff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
text-shadow: 0 0 60px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.error-text {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.error-text h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0 0 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.error-text p {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-illustration {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.planet {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow:
|
||||
0 0 60px rgba(102, 126, 234, 0.6),
|
||||
inset -10px -10px 20px rgba(0, 0, 0, 0.2);
|
||||
animation: rotatePlanet 20s linear infinite;
|
||||
}
|
||||
|
||||
.planet::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotateX(75deg);
|
||||
}
|
||||
|
||||
.planet::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
top: 20%;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
@keyframes rotatePlanet {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 20%;
|
||||
right: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
top: 60%;
|
||||
left: 5%;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
bottom: 10%;
|
||||
right: 20%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.rocket {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
right: 0;
|
||||
animation: flyRocket 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.rocket-body {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rocket-window {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.rocket-flame {
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
background: linear-gradient(to bottom, #feca57, #ff6b6b, transparent);
|
||||
position: absolute;
|
||||
bottom: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50% 50% 20% 20%;
|
||||
animation: flame 0.3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes flame {
|
||||
0% {
|
||||
height: 20px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 30px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyRocket {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(-15deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(-10deg);
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00d4ff 0%, #7c4dff 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 25px rgba(0, 212, 255, 0.6);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.error-code {
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
.error-text h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.error-text p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-illustration {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,288 +0,0 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '当前页面暂无相关数据，您可以稍后再来查看'
|
||||
},
|
||||
showAction: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
actionText: {
|
||||
type: String,
|
||||
default: '刷新页面'
|
||||
}
|
||||
})
|
||||
|
||||
const handleAction = () => {
|
||||
router.go(0)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="empty-state">
|
||||
<div class="empty-content">
|
||||
<div class="empty-illustration">
|
||||
<div class="illustration-wrapper">
|
||||
<svg class="empty-icon" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="boxGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color: #667eea; stop-opacity: 0.2" />
|
||||
<stop offset="100%" style="stop-color: #764ba2; stop-opacity: 0.2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="searchGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color: #00d4ff; stop-opacity: 1" />
|
||||
<stop offset="100%" style="stop-color: #7c4dff; stop-opacity: 1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 背景圆 -->
|
||||
<circle cx="100" cy="100" r="80" fill="url(#boxGradient)" />
|
||||
|
||||
<!-- 搜索放大镜 -->
|
||||
<g transform="translate(70, 70)">
|
||||
<circle cx="30" cy="30" r="25" stroke="url(#searchGradient)" stroke-width="4" fill="none" />
|
||||
<line x1="50" y1="50" x2="70" y2="70" stroke="url(#searchGradient)" stroke-width="4"
|
||||
stroke-linecap="round" />
|
||||
</g>
|
||||
|
||||
<!-- 小装饰元素 -->
|
||||
<circle cx="50" cy="60" r="4" fill="#667eea" opacity="0.6">
|
||||
<animate attributeName="cy" values="60;55;60" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="150" cy="80" r="3" fill="#764ba2" opacity="0.6">
|
||||
<animate attributeName="cy" values="80;75;80" dur="1.5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="60" cy="140" r="5" fill="#00d4ff" opacity="0.5">
|
||||
<animate attributeName="cy" values="140;145;140" dur="2.5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-text">
|
||||
<h3 class="empty-title">{{ title }}</h3>
|
||||
<p class="empty-description">{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="showAction" class="empty-action">
|
||||
<button class="action-btn" @click="handleAction">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M23 4v6h-6"></path>
|
||||
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
|
||||
</svg>
|
||||
{{ actionText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.empty-state {
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 装饰性背景 */
|
||||
.empty-state::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 20px 30px, rgba(102, 126, 234, 0.3), transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, rgba(118, 75, 162, 0.3), transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, rgba(0, 212, 255, 0.3), transparent),
|
||||
radial-gradient(2px 2px at 160px 120px, rgba(102, 126, 234, 0.3), transparent);
|
||||
background-size: 200px 150px;
|
||||
animation: floatBg 20s linear infinite;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes floatBg {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200px 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 480px;
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-illustration {
|
||||
margin-bottom: 32px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.illustration-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
animation: floatIcon 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes floatIcon {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 12px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 32px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-btn svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 暗色主题适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.empty-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.empty-state {
|
||||
min-height: 300px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.empty-state {
|
||||
padding: 30px 16px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,204 +0,0 @@
|
||||
<template>
|
||||
<div class="pages department-page">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入部门名称" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
</a-button>
|
||||
<a-button danger :disabled="selectedRows.length === 0" @click="handleBatchDelete">
|
||||
<template #icon><delete-outlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading" :pagination="false"
|
||||
:row-key="rowKey" :row-selection="rowSelection" @refresh="refreshTable" @select="handleSelectChange"
|
||||
@selectAll="handleSelectAll">
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定删除该部门吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑部门弹窗 -->
|
||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'authDepartment'
|
||||
})
|
||||
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
selectedRows,
|
||||
rowSelection,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handleSelectChange,
|
||||
handleSelectAll,
|
||||
refreshTable
|
||||
} = useTable({
|
||||
api: authApi.department.list.get,
|
||||
searchForm: {
|
||||
keyword: ''
|
||||
},
|
||||
columns: [],
|
||||
needPagination: false,
|
||||
needSelection: true,
|
||||
immediateLoad: false
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: '#', dataIndex: '_index', key: '_index', width: 60, align: 'center' },
|
||||
{ title: '部门名称', dataIndex: 'title', key: 'title', width: 300 },
|
||||
{ title: '部门标识', dataIndex: 'name', key: 'name', width: 200 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 100, align: 'center' },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 220, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
|
||||
// 新增部门
|
||||
const handleAdd = () => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('add')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 查看部门
|
||||
const handleView = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑部门
|
||||
const handleEdit = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除部门
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await authApi.department.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除部门失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要删除的部门')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除选中的 ${selectedRows.value.length} 个部门吗？如果删除项中含有子集将会被一并删除`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const res = await authApi.department.delete.post({ ids })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
selectedRows.value = []
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('批量删除部门失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
refreshTable()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.department-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :footer="null"
|
||||
@cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="上级部门" name="parent_id">
|
||||
<a-tree-select v-model:value="form.parent_id" :tree-data="departments"
|
||||
:field-names="departmentFieldNames" :tree-default-expand-all="false" placeholder="请选择上级部门"
|
||||
allow-clear tree-node-filter-prop="title"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" />
|
||||
</a-form-item>
|
||||
<a-form-item label="部门名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="请输入部门名称" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="部门别名" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="请输入部门别名" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="1" :step="1" style="width: 100%" placeholder="请输入排序" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 5 }">
|
||||
<div style="display: flex; gap: 10px">
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
defineOptions({
|
||||
name: 'DepartmentSave'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增部门',
|
||||
edit: '编辑部门',
|
||||
show: '查看部门'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaving = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
name: '',
|
||||
sort: 1,
|
||||
parent_id: null
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
title: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入部门别名', trigger: 'blur' }],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序', trigger: 'change' },
|
||||
{ type: 'number', message: '排序必须为数字', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 部门数据
|
||||
const departments = ref([])
|
||||
const departmentFieldNames = {
|
||||
title: 'title',
|
||||
value: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaving.value = true
|
||||
let res = {}
|
||||
form.parent_id = form.parent_id || 0
|
||||
|
||||
if (mode.value === 'add') {
|
||||
res = await authApi.department.add.post(form)
|
||||
} else {
|
||||
res = await authApi.department.edit.post(form)
|
||||
}
|
||||
|
||||
isSaving.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门树数据
|
||||
const loadDepartments = async () => {
|
||||
try {
|
||||
const res = await authApi.department.list.get({ is_tree: 1 })
|
||||
departments.value = res.data || []
|
||||
} catch (error) {
|
||||
console.error('加载部门树失败:', error)
|
||||
message.error('加载部门树失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.title = data.title
|
||||
form.name = data.name
|
||||
form.sort = data.sort
|
||||
form.parent_id = data.parent_id || null
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
loadDepartments()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,332 +0,0 @@
|
||||
<template>
|
||||
<div class="pages permission-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
<a-input v-model:value="menuFilterText" placeholder="搜索菜单..." allow-clear @change="handleMenuSearch">
|
||||
<template #prefix>
|
||||
<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree v-model:selectedKeys="selectedMenuKeys" v-model:checkedKeys="checkedMenuKeys"
|
||||
:tree-data="filteredMenuTree" :field-names="{ title: 'title', key: 'id', children: 'children' }"
|
||||
showLine checkable :check-strictly="true" :expand-on-click-node="false" @select="onMenuSelect"
|
||||
@check="onMenuCheck">
|
||||
<template #icon="{ dataRef }">
|
||||
<folder-outlined v-if="dataRef.children" />
|
||||
<file-outlined v-else />
|
||||
</template>
|
||||
<template #title="{ dataRef }">
|
||||
<span class="tree-node-title">{{ dataRef.title }}</span>
|
||||
<plus-outlined class="tree-node-add" @click.stop="handleAdd(dataRef)" />
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd(null)">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button danger @click="handleDeleteBatch">
|
||||
<template #icon><delete-outlined /></template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="header">
|
||||
<div class="title">{{ selectedMenu?.title || '请选择菜单' }}</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<save-form v-if="selectedMenu" :menu="menuTree" :menu-id="selectedMenu.id" :parent-id="parentId"
|
||||
@success="handleSaveSuccess" />
|
||||
<a-empty v-else description="请选择左侧菜单后操作" :image-size="100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import saveForm from './save.vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
defineOptions({
|
||||
name: 'authPermission'
|
||||
})
|
||||
|
||||
// 菜单树数据
|
||||
const menuTree = ref([])
|
||||
const filteredMenuTree = ref([])
|
||||
const selectedMenuKeys = ref([])
|
||||
const checkedMenuKeys = ref([])
|
||||
const menuFilterText = ref('')
|
||||
|
||||
// 当前选中的菜单
|
||||
const selectedMenu = ref(null)
|
||||
const parentId = ref(null)
|
||||
|
||||
// 加载菜单树
|
||||
const loadMenuTree = async () => {
|
||||
try {
|
||||
const res = await authApi.menu.list.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
menuTree.value = res.data || []
|
||||
filteredMenuTree.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载菜单树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单搜索
|
||||
const handleMenuSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
menuFilterText.value = keyword
|
||||
if (!keyword) {
|
||||
filteredMenuTree.value = menuTree.value
|
||||
return
|
||||
}
|
||||
|
||||
// 递归过滤菜单树
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const isMatch = node.title && node.title.toLowerCase().includes(keyword.toLowerCase())
|
||||
const filteredChildren = node.children ? filterTree(node.children) : []
|
||||
|
||||
if (isMatch || filteredChildren.length > 0) {
|
||||
acc.push({
|
||||
...node,
|
||||
children: filteredChildren.length > 0 ? filteredChildren : undefined
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
|
||||
filteredMenuTree.value = filterTree(menuTree.value)
|
||||
}
|
||||
|
||||
// 查找菜单节点
|
||||
const findMenuNode = (tree, id) => {
|
||||
for (const node of tree) {
|
||||
if (node.id === id) {
|
||||
return node
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
const found = findMenuNode(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 查找父节点ID
|
||||
const findParentId = (tree, id) => {
|
||||
for (const node of tree) {
|
||||
if (node.children && node.children.length > 0) {
|
||||
const child = node.children.find(child => child.id === id)
|
||||
if (child) {
|
||||
return node.id
|
||||
}
|
||||
const found = findParentId(node.children, id)
|
||||
if (found !== null) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 菜单选择事件
|
||||
const onMenuSelect = (selectedKeys, { selected }) => {
|
||||
if (selected) {
|
||||
const menuId = selectedKeys[0]
|
||||
const menuNode = findMenuNode(menuTree.value, menuId)
|
||||
selectedMenu.value = menuNode
|
||||
parentId.value = findParentId(menuTree.value, menuId)
|
||||
} else {
|
||||
selectedMenu.value = null
|
||||
parentId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单勾选事件
|
||||
const onMenuCheck = (checkedKeys, info) => {
|
||||
console.log('checkedKeys:', checkedKeys, 'info:', info)
|
||||
}
|
||||
|
||||
// 新增菜单
|
||||
const handleAdd = async (parentNode) => {
|
||||
try {
|
||||
let newMenuData = {
|
||||
parent_id: parentNode ? parentNode.id : 0,
|
||||
name: '新菜单',
|
||||
path: '',
|
||||
component: '',
|
||||
title: '新菜单',
|
||||
type: 'menu',
|
||||
sort: 0
|
||||
}
|
||||
|
||||
const res = await authApi.menu.add.post(newMenuData)
|
||||
if (res.code === 1) {
|
||||
newMenuData.id = res.data.id
|
||||
message.success('添加成功')
|
||||
await loadMenuTree()
|
||||
|
||||
// 选中新增的菜单
|
||||
selectedMenuKeys.value = [newMenuData.id]
|
||||
const menuNode = findMenuNode(menuTree.value, newMenuData.id)
|
||||
selectedMenu.value = menuNode
|
||||
parentId.value = parentNode ? parentNode.id : null
|
||||
} else {
|
||||
message.error(res.message || '添加失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加菜单失败:', error)
|
||||
message.error('添加失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除菜单
|
||||
const handleDeleteBatch = async () => {
|
||||
if (checkedMenuKeys.value.length === 0) {
|
||||
message.warning('请选择需要删除的菜单')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除已选择的 ${checkedMenuKeys.value.length} 个菜单吗？`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await authApi.menu.delete.post({ ids: checkedMenuKeys.value })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
|
||||
// 如果当前选中的菜单被删除了，清空选择
|
||||
if (selectedMenu.value && checkedMenuKeys.value.includes(selectedMenu.value.id)) {
|
||||
selectedMenu.value = null
|
||||
selectedMenuKeys.value = []
|
||||
}
|
||||
|
||||
checkedMenuKeys.value = []
|
||||
await loadMenuTree()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除菜单失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = async () => {
|
||||
await loadMenuTree()
|
||||
// 重新设置当前选中的菜单
|
||||
if (selectedMenu.value) {
|
||||
const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id)
|
||||
selectedMenu.value = menuNode
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadMenuTree()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.permission-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.left-box {
|
||||
width: 300px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
|
||||
.tree-node-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tree-node-add {
|
||||
margin-left: 8px;
|
||||
color: #999;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-node-content-wrapper) {
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
.tree-node-add {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
height: 56px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,463 +0,0 @@
|
||||
<template>
|
||||
<div class="save-form">
|
||||
<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
|
||||
<!-- 第一行：显示名称和类型 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="显示名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="菜单显示名字" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="类型" name="type" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-radio-group v-model:value="form.type" button-style="solid">
|
||||
<a-radio-button value="menu">菜单</a-radio-button>
|
||||
<a-radio-button value="iframe">Iframe</a-radio-button>
|
||||
<a-radio-button value="link">外链</a-radio-button>
|
||||
<a-radio-button value="button">按钮</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第二行：上级菜单和别名 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="上级菜单" name="parent_id">
|
||||
<a-tree-select v-model:value="form.parent_id" :tree-data="menuOptions"
|
||||
:field-names="menuFieldNames" :tree-default-expand-all="false" show-icon placeholder="顶级菜单"
|
||||
allow-clear tree-node-filter-prop="title" :disabled="!!menuId" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="别名" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="菜单别名" allow-clear />
|
||||
<div class="form-item-msg">系统唯一且与内置组件名一致，否则导致缓存失效</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第三行：菜单图标和排序 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="菜单图标" name="icon">
|
||||
<sc-icon-picker v-model="form.icon" placeholder="请选择图标" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="0" :max="100" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第四行：路由地址和重定向 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="路由地址" name="path">
|
||||
<a-input v-model:value="form.path" placeholder="" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="重定向" name="redirect">
|
||||
<a-input v-model:value="form.redirect" placeholder="" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第五行：菜单高亮和视图 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="菜单高亮" name="active">
|
||||
<a-input v-model:value="form.active" placeholder="" allow-clear />
|
||||
<div class="form-item-msg">子节点或详情页需要高亮的上级菜单路由地址</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="视图" name="component">
|
||||
<a-input v-model:value="form.component" placeholder="" allow-clear>
|
||||
<template #addonBefore>pages/</template>
|
||||
</a-input>
|
||||
<div class="form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第六行：颜色 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="颜色" name="color">
|
||||
<a-input v-model:value="form.color" placeholder="请输入颜色值" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<a-divider />
|
||||
|
||||
<!-- 选项设置区域 -->
|
||||
<div class="options-section">
|
||||
<h4>选项设置</h4>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item label="是否隐藏" name="hidden" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
|
||||
<a-checkbox v-model:checked="form.hidden">隐藏菜单</a-checkbox>
|
||||
<a-checkbox v-model:checked="form.hiddenBreadcrumb">隐藏面包屑</a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="是否固定" name="affix" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
|
||||
<a-switch v-model:checked="form.affix" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="是否全屏" name="fullpage" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
|
||||
<a-switch v-model:checked="form.fullpage" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<a-divider />
|
||||
|
||||
<!-- 接口权限区域 -->
|
||||
<div class="api-section">
|
||||
<div class="section-header">
|
||||
<h4>接口权限</h4>
|
||||
<a-button type="primary" size="small" @click="addApiRow">
|
||||
<template #icon><plus-outlined /></template>
|
||||
添加接口权限
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="api-list">
|
||||
<div v-for="(item, index) in form.apiList" :key="index" class="api-item">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="8">
|
||||
<a-input v-model:value="item.code" placeholder="标识" allow-clear />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-input v-model:value="item.url" placeholder="Api url" allow-clear />
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-button type="text" danger @click="removeApiRow(index)">
|
||||
<template #icon><delete-outlined /></template>
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<a-empty v-if="form.apiList.length === 0" description="暂无接口权限"
|
||||
:image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-form-item :wrapper-col="{ span: 18, offset: 4 }" style="margin-top: 32px">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSave" :loading="loading" size="large">保存</a-button>
|
||||
<a-button @click="$emit('cancel')" size="large">取消</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from 'vue'
|
||||
import { message, Empty } from 'ant-design-vue'
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
|
||||
import authApi from '@/api/auth'
|
||||
import ScIconPicker from '@/components/scIconPicker/index.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'PermissionSave'
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
menu: { type: [Object, Array], default: () => [] },
|
||||
menuId: { type: [Number, String], default: null },
|
||||
parentId: { type: [Number, String], default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success', 'cancel'])
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
parent_id: 0,
|
||||
name: '',
|
||||
path: '',
|
||||
component: '',
|
||||
redirect: '',
|
||||
sort: 0,
|
||||
title: '',
|
||||
icon: '',
|
||||
active: '',
|
||||
color: '',
|
||||
type: 'menu',
|
||||
affix: false,
|
||||
hidden: false,
|
||||
hiddenBreadcrumb: false,
|
||||
fullpage: false,
|
||||
apiList: []
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
title: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入别名', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 菜单选项
|
||||
const menuOptions = ref([])
|
||||
const menuFieldNames = {
|
||||
value: 'id',
|
||||
label: 'title',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 简单化菜单
|
||||
const treeToMap = (tree) => {
|
||||
const map = []
|
||||
tree.forEach(item => {
|
||||
const obj = {
|
||||
id: item.id,
|
||||
parent_id: item.parent_id,
|
||||
title: item.title,
|
||||
children: item.children && item.children.length > 0 ? treeToMap(item.children) : null
|
||||
}
|
||||
map.push(obj)
|
||||
})
|
||||
return map
|
||||
}
|
||||
|
||||
// 查找菜单节点
|
||||
const findMenuNode = (tree, id) => {
|
||||
for (const node of tree) {
|
||||
if (node.id === id) {
|
||||
return node
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
const found = findMenuNode(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 监听菜单树变化
|
||||
watch(
|
||||
() => props.menu,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
menuOptions.value = treeToMap(newVal)
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
// 监听 menuId 变化，从菜单树中查找并赋值
|
||||
watch(
|
||||
() => props.menuId,
|
||||
(newVal) => {
|
||||
if (newVal && props.menu && props.menu.length > 0) {
|
||||
const menuNode = findMenuNode(props.menu, newVal)
|
||||
if (menuNode) {
|
||||
setData(menuNode, props.parentId)
|
||||
}
|
||||
} else if (!newVal) {
|
||||
// 清空表单
|
||||
setData({
|
||||
id: '',
|
||||
parent_id: 0,
|
||||
name: '',
|
||||
path: '',
|
||||
component: '',
|
||||
redirect: '',
|
||||
sort: 0,
|
||||
title: '',
|
||||
icon: '',
|
||||
active: '',
|
||||
color: '',
|
||||
type: 'menu',
|
||||
affix: false,
|
||||
hidden: false,
|
||||
hiddenBreadcrumb: false,
|
||||
fullpage: false,
|
||||
apiList: []
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 添加接口权限行
|
||||
const addApiRow = () => {
|
||||
form.apiList.push({
|
||||
code: '',
|
||||
url: ''
|
||||
})
|
||||
}
|
||||
|
||||
// 删除接口权限行
|
||||
const removeApiRow = (index) => {
|
||||
form.apiList.splice(index, 1)
|
||||
}
|
||||
|
||||
// 加载菜单详情
|
||||
const loadMenuDetail = async (id) => {
|
||||
try {
|
||||
const res = await authApi.menu.list.get({ id })
|
||||
if (res.code === 1 && res.data) {
|
||||
setData(res.data, props.parentId)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载菜单详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
loading.value = true
|
||||
let res = {}
|
||||
form.parent_id = form.parent_id || 0
|
||||
|
||||
if (form.id) {
|
||||
res = await authApi.menu.edit.post(form)
|
||||
} else {
|
||||
res = await authApi.menu.add.post(form)
|
||||
}
|
||||
|
||||
loading.value = false
|
||||
if (res.code === 1) {
|
||||
message.success('保存成功')
|
||||
emit('success')
|
||||
} else {
|
||||
message.error(res.message || '保存失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data, pid) => {
|
||||
form.id = data.id
|
||||
form.parent_id = data.parent_id || pid || 0
|
||||
form.name = data.name || ''
|
||||
form.path = data.path || ''
|
||||
form.component = data.component || ''
|
||||
form.redirect = data.redirect || ''
|
||||
form.sort = data.sort || 0
|
||||
form.title = data.title || ''
|
||||
form.icon = data.icon || ''
|
||||
form.active = data.active || ''
|
||||
form.color = data.color || ''
|
||||
form.type = data.type || 'menu'
|
||||
form.affix = data.affix == 1
|
||||
form.hidden = data.hidden == 1
|
||||
form.hiddenBreadcrumb = data.hiddenBreadcrumb == 1
|
||||
form.fullpage = data.fullpage == 1
|
||||
form.apiList = data.apiList || []
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
if (props.menuId) {
|
||||
loadMenuDetail(props.menuId)
|
||||
} else if (props.parentId) {
|
||||
form.parent_id = props.parentId
|
||||
}
|
||||
})
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
setData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.save-form {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
|
||||
.form-item-msg {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.options-section {
|
||||
margin-top: 16px;
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.api-section {
|
||||
margin-top: 16px;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.api-list {
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
|
||||
.api-item {
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-divider) {
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
:deep(.ant-empty) {
|
||||
padding: 24px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<div class="pages role-page">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入角色名称" allow-clear
|
||||
style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
</a-button>
|
||||
<a-button danger :disabled="selectedRows.length === 0" @click="handleBatchDelete">
|
||||
<template #icon><delete-outlined /></template>
|
||||
</a-button>
|
||||
<a-button :disabled="selectedRows.length !== 1" @click="handlePermission">
|
||||
<template #icon><key-outlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" :row-selection="rowSelection" @refresh="refreshTable"
|
||||
@paginationChange="handlePaginationChange" @select="handleSelectChange" @selectAll="handleSelectAll">
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定删除该角色吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑角色弹窗 -->
|
||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
|
||||
<!-- 权限设置弹窗 -->
|
||||
<permission-dialog v-if="dialog.permission" ref="permissionDialogRef" @success="permissionSuccess"
|
||||
@closed="dialog.permission = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import permissionDialog from './permission.vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'authRole'
|
||||
})
|
||||
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
selectedRows,
|
||||
rowSelection,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePaginationChange,
|
||||
handleSelectChange,
|
||||
handleSelectAll,
|
||||
refreshTable
|
||||
} = useTable({
|
||||
api: authApi.role.list.get,
|
||||
searchForm: {
|
||||
keyword: ''
|
||||
},
|
||||
columns: [],
|
||||
needPagination: true,
|
||||
needSelection: true
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false,
|
||||
permission: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
const permissionDialogRef = ref(null)
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80, align: 'center' },
|
||||
{ title: '角色名称', dataIndex: 'title', key: 'title', width: 200 },
|
||||
{ title: '别名', dataIndex: 'name', key: 'name', width: 200 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 100, align: 'center' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 200, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
|
||||
// 新增角色
|
||||
const handleAdd = () => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('add')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 查看角色
|
||||
const handleView = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑角色
|
||||
const handleEdit = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除角色
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await authApi.role.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除角色失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要删除的角色')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除选中的 ${selectedRows.value.length} 个角色吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const res = await authApi.role.delete.post({ ids })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
selectedRows.value = []
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('批量删除角色失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 权限设置
|
||||
const handlePermission = () => {
|
||||
if (selectedRows.value.length !== 1) {
|
||||
message.error('请选择一个角色进行权限设置')
|
||||
return
|
||||
}
|
||||
dialog.permission = true
|
||||
setTimeout(() => {
|
||||
permissionDialogRef.value?.open().setData(selectedRows.value[0])
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 权限设置成功回调
|
||||
const permissionSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.role-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<a-modal title="角色权限设置" :open="visible" :width="600" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
|
||||
<a-tabs tab-position="top">
|
||||
<a-tab-pane key="menu" tab="菜单权限">
|
||||
<div class="treeMain">
|
||||
<a-tree ref="menuTreeRef" v-model:checkedKeys="menu.checked" :tree-data="menu.list"
|
||||
:field-names="menu.fieldNames" :checkable="true" :default-expand-all="true"
|
||||
:check-strictly="true" :selectable="false">
|
||||
<template #title="{ title }">
|
||||
{{ title }}
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="data" tab="数据权限">
|
||||
<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="数据权限">
|
||||
<a-select v-model:value="form.data_range" placeholder="请选择数据权限" style="width: 100%">
|
||||
<a-select-option value="0">全部数据权限</a-select-option>
|
||||
<a-select-option value="1">本部门及以下数据</a-select-option>
|
||||
<a-select-option value="2">本部门数据权限</a-select-option>
|
||||
<a-select-option value="3">仅本人数据权限</a-select-option>
|
||||
<a-select-option value="4">自定义数据权限</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="dashboard" tab="控制台">
|
||||
<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="控制台视图">
|
||||
<a-select v-model:value="form.dashboard" placeholder="请选择" style="width: 100%">
|
||||
<a-select-option value="0">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<span>数据统计</span>
|
||||
<span style="color: #8492a6; font-size: 12px">stats</span>
|
||||
</div>
|
||||
</a-select-option>
|
||||
<a-select-option value="1">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<span>工作台</span>
|
||||
<span style="color: #8492a6; font-size: 12px">work</span>
|
||||
</div>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<div class="ant-form-item-explain">用于控制角色登录后控制台的视图</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
const menuTreeRef = ref()
|
||||
|
||||
const menu = reactive({
|
||||
list: [],
|
||||
checked: [],
|
||||
fieldNames: {
|
||||
title: 'title',
|
||||
key: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
role_id: 0,
|
||||
permissions: [],
|
||||
data_range: '',
|
||||
dashboard: '1'
|
||||
})
|
||||
|
||||
// 打开对话框
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 提交保存
|
||||
const submit = async () => {
|
||||
try {
|
||||
isSaveing.value = true
|
||||
|
||||
// 获取选中的菜单权限 ID
|
||||
form.permissions = menu.checked || []
|
||||
form.role_id = form.id
|
||||
|
||||
const res = await authApi.role.auth.post(form)
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存权限失败:', error)
|
||||
isSaveing.value = false
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取菜单列表
|
||||
const getMenu = async () => {
|
||||
try {
|
||||
const res = await authApi.menu.list.get({ is_tree: 1 })
|
||||
menu.list = res.data || []
|
||||
} catch (error) {
|
||||
console.error('获取菜单列表失败:', error)
|
||||
message.error('获取菜单列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.data_range = data.data_range || ''
|
||||
form.dashboard = data.dashboard || '1'
|
||||
|
||||
// 设置选中的菜单权限
|
||||
if (data.permissions && data.permissions.length > 0) {
|
||||
menu.checked = data.permissions.map(item => item.id)
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
getMenu()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeMain {
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
border: 1px solid #dcdfe6;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ant-form-item-explain {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :footer="null"
|
||||
@cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="角色名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="请输入角色名称" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色别名" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="请输入角色别名" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="1" :step="1" style="width: 100%" placeholder="请输入排序" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增角色',
|
||||
edit: '编辑角色',
|
||||
show: '查看角色'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
name: '',
|
||||
sort: 1
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
title: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入角色别名', trigger: 'blur' }],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序', trigger: 'change' },
|
||||
{ type: 'number', message: '排序必须为数字', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res = {}
|
||||
if (mode.value === 'add') {
|
||||
res = await authApi.role.add.post(form)
|
||||
} else {
|
||||
res = await authApi.role.edit.post(form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
isSaveing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.title = data.title
|
||||
form.name = data.name
|
||||
form.sort = data.sort
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,340 +0,0 @@
|
||||
<template>
|
||||
<div class="pages user-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
<a-input v-model:value="departmentKeyword" placeholder="搜索部门..." allow-clear @change="handleDeptSearch">
|
||||
<template #prefix>
|
||||
<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree v-model:selectedKeys="selectedDeptKeys" :tree-data="filteredDepartmentTree"
|
||||
:field-names="{ title: 'title', key: 'id', children: 'children' }" showLine @select="onDeptSelect">
|
||||
<template #icon="{ dataRef }">
|
||||
<folder-outlined v-if="dataRef.children" />
|
||||
<file-outlined v-else />
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear
|
||||
style="width: 160px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.nickname" placeholder="请输入姓名" allow-clear
|
||||
style="width: 160px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleUserReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleExport">
|
||||
<template #icon><export-outlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @refresh="refreshTable"
|
||||
@paginationChange="handlePaginationChange">
|
||||
<template #avatar="{ record }">
|
||||
<a-avatar :src="record.avatar" :size="32">
|
||||
<template #icon><user-outlined /></template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #department_title="{ record }">
|
||||
{{ record.department?.title }}
|
||||
</template>
|
||||
<template #roles="{ record }">
|
||||
<a-tag v-for="role in record.roles" :key="role.id" color="blue">
|
||||
{{ role.title }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button type="link" size="small" @click="handleRole(record)">角色</a-button>
|
||||
<a-popconfirm title="确定删除该用户吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑用户弹窗 -->
|
||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
|
||||
<!-- 角色设置弹窗 -->
|
||||
<role-dialog v-if="dialog.role" ref="roleDialogRef" @success="handleRoleSuccess" @closed="dialog.role = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import roleDialog from './role.vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'authUser'
|
||||
})
|
||||
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePaginationChange,
|
||||
refreshTable
|
||||
} = useTable({
|
||||
api: authApi.users.list.get,
|
||||
searchForm: {
|
||||
username: '',
|
||||
nickname: '',
|
||||
department_id: null
|
||||
},
|
||||
columns: [],
|
||||
needPagination: true
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false,
|
||||
role: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
const roleDialogRef = ref(null)
|
||||
|
||||
// 部门树数据
|
||||
const departmentTree = ref([])
|
||||
const filteredDepartmentTree = ref([])
|
||||
const selectedDeptKeys = ref([])
|
||||
const departmentKeyword = ref('')
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: '头像', dataIndex: 'avatar', key: 'avatar', width: 80, align: 'center', slot: 'avatar' },
|
||||
{ title: '用户名', dataIndex: 'username', key: 'username', width: 150 },
|
||||
{ title: '姓名', dataIndex: 'nickname', key: 'nickname', width: 150 },
|
||||
{ title: '部门', dataIndex: 'department_title', key: 'department_title', slot: 'department_title', width: 150 },
|
||||
{ title: '角色', dataIndex: 'roles', key: 'roles', width: 200, slot: 'roles' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 200, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
// 加载部门树
|
||||
const loadDepartmentTree = async () => {
|
||||
try {
|
||||
const res = await authApi.department.list.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
departmentTree.value = res.data || []
|
||||
filteredDepartmentTree.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载部门树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 部门搜索
|
||||
const handleDeptSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
departmentKeyword.value = keyword
|
||||
if (!keyword) {
|
||||
filteredDepartmentTree.value = departmentTree.value
|
||||
return
|
||||
}
|
||||
|
||||
// 递归过滤部门树
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const isMatch = node.title && node.title.toLowerCase().includes(keyword.toLowerCase())
|
||||
const filteredChildren = node.children ? filterTree(node.children) : []
|
||||
|
||||
if (isMatch || filteredChildren.length > 0) {
|
||||
acc.push({
|
||||
...node,
|
||||
children: filteredChildren.length > 0 ? filteredChildren : undefined
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
|
||||
filteredDepartmentTree.value = filterTree(departmentTree.value)
|
||||
}
|
||||
|
||||
// 重置 - 覆盖useTable的handleReset以添加额外逻辑
|
||||
const handleUserReset = () => {
|
||||
searchForm.username = ''
|
||||
searchForm.nickname = ''
|
||||
searchForm.department_id = null
|
||||
selectedDeptKeys.value = []
|
||||
departmentKeyword.value = ''
|
||||
filteredDepartmentTree.value = departmentTree.value
|
||||
handleReset()
|
||||
}
|
||||
|
||||
// 部门选择事件
|
||||
const onDeptSelect = (selectedKeys) => {
|
||||
if (selectedKeys && selectedKeys.length > 0) {
|
||||
searchForm.department_id = selectedKeys[0]
|
||||
} else {
|
||||
searchForm.department_id = null
|
||||
}
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 导出数据
|
||||
const handleExport = () => {
|
||||
message.info('导出功能开发中...')
|
||||
// TODO: 实现导出功能
|
||||
// const params = { ...searchForm }
|
||||
// 调用导出API
|
||||
}
|
||||
|
||||
// 新增用户
|
||||
const handleAdd = () => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('add')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 查看用户
|
||||
const handleView = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑用户
|
||||
const handleEdit = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 设置角色
|
||||
const handleRole = (record) => {
|
||||
dialog.role = true
|
||||
setTimeout(() => {
|
||||
roleDialogRef.value?.open().setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await authApi.users.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除用户失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 角色设置成功回调
|
||||
const handleRoleSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadDepartmentTree()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.left-box {
|
||||
width: 260px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<a-modal title="角色设置" :open="visible" :width="500" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
|
||||
<a-tabs tab-position="top">
|
||||
<a-tab-pane key="role" tab="角色选择">
|
||||
<div class="treeMain">
|
||||
<a-tree ref="roleTreeRef" v-model:checkedKeys="role.checked" :tree-data="role.list"
|
||||
:field-names="role.fieldNames" :checkable="true" :default-expand-all="true"
|
||||
:check-strictly="true" :selectable="false">
|
||||
<template #title="{ title }">
|
||||
{{ title }}
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authAPI from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
const roleTreeRef = ref()
|
||||
|
||||
const role = reactive({
|
||||
list: [],
|
||||
checked: [],
|
||||
fieldNames: {
|
||||
title: 'title',
|
||||
key: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
uid: '',
|
||||
roles: []
|
||||
})
|
||||
|
||||
// 打开对话框
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 提交保存
|
||||
const submit = async () => {
|
||||
try {
|
||||
isSaveing.value = true
|
||||
|
||||
// 获取选中的角色 ID
|
||||
form.roles = role.checked || []
|
||||
|
||||
const res = await authAPI.users.uprole.post(form)
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存角色失败:', error)
|
||||
isSaveing.value = false
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取角色列表
|
||||
const getRole = async () => {
|
||||
try {
|
||||
const res = await authAPI.role.list.get({ is_tree: 1 })
|
||||
role.list = res.data || []
|
||||
} catch (error) {
|
||||
console.error('获取角色列表失败:', error)
|
||||
message.error('获取角色列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = (data) => {
|
||||
role.checked = data.roles ? data.roles.map(item => item.id) : []
|
||||
form.uid = data.uid
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
getRole()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeMain {
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
border: 1px solid #dcdfe6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :mask-closable="false"
|
||||
:footer="null" @cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="头像" name="avatar">
|
||||
<sc-upload v-model="form.avatar" :cropper="true" :aspectRatio="1" title="上传头像"></sc-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="登录账号" name="username">
|
||||
<a-input v-model:value="form.username" placeholder="用于登录系统" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名" name="nickname">
|
||||
<a-input v-model:value="form.nickname" placeholder="请输入完整的真实姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<template v-if="mode === 'add'">
|
||||
<a-form-item label="登录密码" name="password">
|
||||
<a-input-password v-model:value="form.password" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="确认密码" name="password2">
|
||||
<a-input-password v-model:value="form.password2" allow-clear />
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="所属部门" name="department_id">
|
||||
<a-tree-select v-model:value="form.department_id" :tree-data="department"
|
||||
:field-names="departmentFieldNames" :tree-default-expand-all="false" show-icon placeholder="请选择部门" allow-clear
|
||||
tree-node-filter-prop="title" />
|
||||
</a-form-item>
|
||||
<a-form-item label="所属角色" name="roles">
|
||||
<a-tree-select v-model:value="form.roles" :tree-data="groups" :field-names="groupsFieldNames"
|
||||
:tree-default-expand-all="false" :tree-checkable="true" placeholder="请选择角色" allow-clear
|
||||
tree-node-filter-prop="title" multiple />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import scUpload from '@/components/scUpload/index.vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增用户',
|
||||
edit: '编辑用户',
|
||||
show: '查看'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
username: '',
|
||||
avatar: '',
|
||||
department_id: 0,
|
||||
roles: []
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
|
||||
nickname: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, message: '请输入登录密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (form.password2 !== '') {
|
||||
dialogForm.value?.validateFields('password2')
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
password2: [
|
||||
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (value !== form.password) {
|
||||
return Promise.reject(new Error('两次输入密码不一致!'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 所需数据选项
|
||||
const department = ref([])
|
||||
const departmentFieldNames = {
|
||||
value: 'id',
|
||||
label: 'title',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
const groups = ref([])
|
||||
const groupsFieldNames = {
|
||||
value: 'id',
|
||||
label: 'title',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 加载树数据
|
||||
const getGroup = async () => {
|
||||
const res = await authApi.role.list.get({ is_tree: 1 })
|
||||
groups.value = res.data
|
||||
}
|
||||
|
||||
const getDepartment = async () => {
|
||||
const res = await authApi.department.list.get({ is_tree: 1 })
|
||||
department.value = res.data
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res = {}
|
||||
if (mode.value === 'add') {
|
||||
res = await authApi.users.add.post(form)
|
||||
} else {
|
||||
res = await authApi.users.edit.post(form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.uid = data.uid
|
||||
form.username = data.username
|
||||
form.avatar = data.avatar
|
||||
form.nickname = data.nickname
|
||||
form.department_id = data.department_id
|
||||
form.roles = data.roles.map(item => item.id)
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
getGroup()
|
||||
getDepartment()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<div class="icon-picker-demo">
|
||||
<a-card title="图标选择器演示" style="max-width: 600px; margin: 20px auto;">
|
||||
<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
||||
<a-form-item label="选择图标">
|
||||
<sc-icon-picker v-model="selectedIcon" @change="handleIconChange" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="选中值">
|
||||
<a-input v-model:value="selectedIcon" readonly />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="图标预览">
|
||||
<div v-if="selectedIcon" class="icon-preview">
|
||||
<component :is="selectedIcon" style="font-size: 48px;" />
|
||||
</div>
|
||||
<a-empty v-else description="未选择图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import ScIconPicker from '@/components/scIconPicker/index.vue'
|
||||
|
||||
const selectedIcon = ref('')
|
||||
|
||||
const handleIconChange = (value) => {
|
||||
console.log('图标已选择:', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon-picker-demo {
|
||||
padding: 20px;
|
||||
|
||||
.icon-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
min-height: 88px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<a-skeleton v-if="loading" active />
|
||||
<component v-else :is="dashboardComponent" @on-mounted="handleMounted" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
|
||||
import config from '@/config'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'HomePage',
|
||||
})
|
||||
|
||||
const loading = ref(true)
|
||||
const dashboard = ref(config.DASHBOARD_LAYOUT || 'work')
|
||||
|
||||
// 动态导入组件
|
||||
const components = {
|
||||
work: defineAsyncComponent(() => import('./work/index.vue')),
|
||||
widgets: defineAsyncComponent(() => import('./widgets/index.vue')),
|
||||
}
|
||||
|
||||
const dashboardComponent = computed(() => {
|
||||
return components[dashboard.value] || components.work
|
||||
})
|
||||
|
||||
const handleMounted = () => {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 模拟加载延迟
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 300)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="true" title="关于项目" class="about-card">
|
||||
<p>高性能 / 精致 / 优雅。基于Vue3 + Ant Design Vue 的中后台前端解决方案，如果喜欢就点个星星支持一下。</p>
|
||||
<p>
|
||||
<a href="https://gitee.com/lolicode/scui" target="_blank">
|
||||
<img src="https://gitee.com/lolicode/scui/badge/star.svg?theme=dark" alt="star" style="vertical-align: middle;">
|
||||
</a>
|
||||
</p>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'AboutWidget',
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.about-card {
|
||||
p {
|
||||
color: #999;
|
||||
margin-top: 10px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,132 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="true" title="实时收入">
|
||||
<a-spin :spinning="loading">
|
||||
<div ref="chartRef" style="width: 100%; height: 300px;"></div>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'EchartsWidget',
|
||||
})
|
||||
|
||||
const chartRef = ref(null)
|
||||
const loading = ref(true)
|
||||
let chart = null
|
||||
let timer = null
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return
|
||||
|
||||
chart = echarts.init(chartRef.value)
|
||||
|
||||
// 生成初始数据
|
||||
const now = new Date()
|
||||
const xData = []
|
||||
const yData = []
|
||||
|
||||
for (let i = 29; i >= 0; i--) {
|
||||
const time = new Date(now.getTime() - i * 2000)
|
||||
xData.unshift(time.toLocaleTimeString().replace(/^\D*/, ''))
|
||||
yData.push(Math.round(Math.random() * 0))
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: false,
|
||||
type: 'category',
|
||||
data: xData,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '价格',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#409EFF',
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: '#79bbff',
|
||||
},
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
|
||||
// 模拟实时更新
|
||||
timer = setInterval(() => {
|
||||
const newTime = new Date().toLocaleTimeString().replace(/^\D*/, '')
|
||||
const newValue = Math.round(Math.random() * 100)
|
||||
|
||||
xData.shift()
|
||||
xData.push(newTime)
|
||||
|
||||
yData.shift()
|
||||
yData.push(newValue)
|
||||
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: xData,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
})
|
||||
}, 2100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 模拟加载延迟
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
initChart()
|
||||
}, 500)
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
const handleResize = () => {
|
||||
if (chart) {
|
||||
chart.resize()
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
if (chart) {
|
||||
chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 样式根据需要添加
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { markRaw } from 'vue'
|
||||
const resultComps = {}
|
||||
const files = import.meta.glob('./*.vue', { eager: true })
|
||||
Object.keys(files).forEach((fileName) => {
|
||||
let comp = files[fileName]
|
||||
resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
|
||||
})
|
||||
export default markRaw(resultComps)
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="true" title="系统信息" class="info-card">
|
||||
<a-spin :spinning="loading">
|
||||
<a-descriptions bordered :column="1">
|
||||
<a-descriptions-item v-for="(item, index) in sysInfo" :key="index" :label="item.label">
|
||||
{{ item.values }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'InfoWidget',
|
||||
})
|
||||
|
||||
const loading = ref(true)
|
||||
const sysInfo = ref([])
|
||||
|
||||
const getSystemList = async () => {
|
||||
try {
|
||||
const res = await systemApi.info.get()
|
||||
if (res.code === 1) {
|
||||
sysInfo.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取系统信息失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getSystemList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.info-card {
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
width: 120px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="true" title="进度环">
|
||||
<div class="progress">
|
||||
<a-progress type="dashboard" :percent="85.5" :width="160">
|
||||
<template #format="percent">
|
||||
<div class="percentage-value">{{ percent }}%</div>
|
||||
<div class="percentage-label">当前进度</div>
|
||||
</template>
|
||||
</a-progress>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'ProgressWidget',
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.progress {
|
||||
text-align: center;
|
||||
|
||||
.percentage-value {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="10">
|
||||
<a-col :span="4">
|
||||
<a-card :bordered="true" title="今日数量">
|
||||
<a-statistic :value="count.today" :formatter="formatNumber" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card :bordered="true" title="昨日数量">
|
||||
<a-statistic :value="count.yesterday" :formatter="formatNumber" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card :bordered="true" title="本周数量">
|
||||
<a-statistic :value="count.week" :formatter="formatNumber" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card :bordered="true" title="上周数量">
|
||||
<a-statistic :value="count.last_week" :formatter="formatNumber" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card :bordered="true" title="今年数量">
|
||||
<a-statistic :value="count.year" :formatter="formatNumber" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card :bordered="true" title="总数量">
|
||||
<a-statistic :value="count.all" :formatter="formatNumber" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'SmsWidget',
|
||||
})
|
||||
|
||||
const count = ref({})
|
||||
|
||||
const getSmsCount = async () => {
|
||||
try {
|
||||
// 注意：API中可能没有短信统计接口，这里使用模拟数据
|
||||
// 如果有接口，请取消注释以下代码
|
||||
// const res = await systemApi.sms.count.get()
|
||||
// if (res.code === 1) {
|
||||
// count.value = res.data
|
||||
// }
|
||||
|
||||
// 模拟数据
|
||||
count.value = {
|
||||
today: 1234,
|
||||
yesterday: 5678,
|
||||
week: 45678,
|
||||
last_week: 43210,
|
||||
year: 567890,
|
||||
all: 1234567
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取短信统计失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const formatNumber = (value) => {
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getSmsCount()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.ant-card-head-title) {
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-statistic-content) {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="true" title="时钟" class="time-card">
|
||||
<div class="time">
|
||||
<h2>{{ time }}</h2>
|
||||
<p>{{ day }}</p>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import tool from '@/utils/tool'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'TimeWidget',
|
||||
})
|
||||
|
||||
const time = ref('')
|
||||
const day = ref('')
|
||||
let timer = null
|
||||
|
||||
const showTime = () => {
|
||||
time.value = tool.dateFormat(new Date(), 'hh:mm:ss')
|
||||
day.value = tool.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
showTime()
|
||||
timer = setInterval(() => {
|
||||
showTime()
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.time-card {
|
||||
background: linear-gradient(to right, #8e54e9, #4776e6);
|
||||
color: #fff;
|
||||
|
||||
:deep(.ant-card-head-title) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin-top: 13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="true" title="版本信息" class="ver-card">
|
||||
<a-spin :spinning="loading">
|
||||
<a-descriptions bordered :column="1">
|
||||
<a-descriptions-item v-for="(item, index) in sysInfo" :key="index" :label="item.label">
|
||||
{{ item.values }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'VerWidget',
|
||||
})
|
||||
|
||||
const loading = ref(true)
|
||||
const sysInfo = ref([])
|
||||
|
||||
const getSystemList = async () => {
|
||||
try {
|
||||
const res = await systemApi.version.get()
|
||||
if (res.code === 1) {
|
||||
sysInfo.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取版本信息失败:', error)
|
||||
// 使用模拟数据作为fallback
|
||||
sysInfo.value = [
|
||||
{ label: '系统版本', values: '1.0.0' },
|
||||
{ label: '框架版本', values: 'Vue 3.x' },
|
||||
{ label: '构建时间', values: '2024-01-01' },
|
||||
]
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getSystemList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ver-card {
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
width: 120px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="true" title="欢迎">
|
||||
<div class="welcome">
|
||||
<div class="logo">
|
||||
<img src="/favicon.ico" alt="logo">
|
||||
<h2>VueAdmin</h2>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<div class="tips-item">
|
||||
<div class="tips-item-icon"><MenuOutlined /></div>
|
||||
<div class="tips-item-message">这里是项目控制台，你可以点击右上方的"自定义"按钮来添加移除或者移动部件。</div>
|
||||
</div>
|
||||
<div class="tips-item">
|
||||
<div class="tips-item-icon"><RocketOutlined /></div>
|
||||
<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
|
||||
</div>
|
||||
<div class="tips-item">
|
||||
<div class="tips-item-icon"><CoffeeOutlined /></div>
|
||||
<div class="tips-item-message">项目目的：让前端工作更快乐</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { MenuOutlined, RocketOutlined, CoffeeOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'WelcomeWidget',
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.welcome {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.welcome .logo {
|
||||
text-align: center;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 7.5px 0;
|
||||
}
|
||||
|
||||
.tips-item-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
margin-right: 20px;
|
||||
color: #1890ff;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.tips-item-message {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,505 +0,0 @@
|
||||
<template>
|
||||
<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
|
||||
<div class="widgets-content">
|
||||
<div class="widgets-top">
|
||||
<div class="widgets-top-title">控制台</div>
|
||||
<div class="widgets-top-actions">
|
||||
<a-button v-if="customizing" type="primary" shape="round" @click="handleSave">
|
||||
<template #icon>
|
||||
<CheckOutlined />
|
||||
</template>
|
||||
完成
|
||||
</a-button>
|
||||
<a-button v-else type="primary" shape="round" @click="handleCustom">
|
||||
<template #icon>
|
||||
<EditOutlined />
|
||||
</template>
|
||||
自定义
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widgets" ref="widgetsRef">
|
||||
<div class="widgets-wrapper">
|
||||
<div v-if="nowCompsList.length <= 0" class="no-widgets">
|
||||
<a-empty description="没有部件啦" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
<a-row :gutter="15">
|
||||
<a-col v-for="(item, index) in grid.layout" :key="index" :md="item" :xs="24">
|
||||
<div class="draggable-wrapper">
|
||||
<draggable v-model="grid.compsList[index]" item-key="key" :animation="200"
|
||||
handle=".customize-overlay" group="widgets" class="draggable-box">
|
||||
<template #item="{ element }">
|
||||
<div class="widgets-item">
|
||||
<component :is="allComps[element]" />
|
||||
<div v-if="customizing" class="customize-overlay">
|
||||
<a-button class="close" type="primary" ghost shape="circle"
|
||||
@click="removeComp(element)">
|
||||
<template #icon>
|
||||
<CloseOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<label>
|
||||
<component :is="allComps[element].icon" />
|
||||
{{ allComps[element].title }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自定义侧边栏 -->
|
||||
<a-drawer v-if="customizing" :open="customizing" :width="360" placement="right" :closable="false" :mask="false"
|
||||
class="widgets-drawer">
|
||||
<template #title>
|
||||
<div class="widgets-aside-title">
|
||||
<PlusCircleOutlined /> 添加部件
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-button type="text" @click="handleClose">
|
||||
<template #icon>
|
||||
<CloseOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 布局选择 -->
|
||||
<div class="select-layout">
|
||||
<h3>选择布局</h3>
|
||||
<div class="select-layout-options">
|
||||
<div class="select-layout-item item01" :class="{ active: grid.layout.join(',') === '12,6,6' }"
|
||||
@click="setLayout([12, 6, 6])">
|
||||
<a-row :gutter="2">
|
||||
<a-col :span="12"><span></span></a-col>
|
||||
<a-col :span="6"><span></span></a-col>
|
||||
<a-col :span="6"><span></span></a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="select-layout-item item02" :class="{ active: grid.layout.join(',') === '24,16,8' }"
|
||||
@click="setLayout([24, 16, 8])">
|
||||
<a-row :gutter="2">
|
||||
<a-col :span="24"><span></span></a-col>
|
||||
<a-col :span="16"><span></span></a-col>
|
||||
<a-col :span="8"><span></span></a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="select-layout-item item03" :class="{ active: grid.layout.join(',') === '24' }"
|
||||
@click="setLayout([24])">
|
||||
<a-row :gutter="2">
|
||||
<a-col :span="24"><span></span></a-col>
|
||||
<a-col :span="24"><span></span></a-col>
|
||||
<a-col :span="24"><span></span></a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 部件列表 -->
|
||||
<div class="widgets-list">
|
||||
<h3>可用部件</h3>
|
||||
<div v-if="myCompsList.length <= 0" class="widgets-list-nodata">
|
||||
<a-empty description="没有部件啦" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
<div v-for="item in myCompsList" :key="item.key" class="widgets-list-item">
|
||||
<div class="item-logo">
|
||||
<component :is="item.icon" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<a-button type="primary" @click="addComp(item)">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<a-button @click="handleResetDefault">恢复默认</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import allComps from './components'
|
||||
import config from '@/config'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'WidgetsPage',
|
||||
})
|
||||
|
||||
const customizing = ref(false)
|
||||
const widgetsRef = ref(null)
|
||||
const defaultGrid = config.DEFAULT_GRID
|
||||
const grid = reactive({ layout: [], compsList: [] })
|
||||
|
||||
// 初始化
|
||||
const initGrid = () => {
|
||||
const savedGrid = localStorage.getItem('widgetsGrid')
|
||||
if (savedGrid) {
|
||||
try {
|
||||
const parsed = JSON.parse(savedGrid)
|
||||
grid.layout = parsed.layout
|
||||
grid.compsList = parsed.compsList
|
||||
} catch {
|
||||
resetToDefault()
|
||||
}
|
||||
} else {
|
||||
resetToDefault()
|
||||
}
|
||||
}
|
||||
|
||||
const resetToDefault = () => {
|
||||
grid.layout = [...defaultGrid.layout]
|
||||
grid.compsList = defaultGrid.compsList.map((arr) => [...arr])
|
||||
}
|
||||
|
||||
// 计算属性
|
||||
const allCompsList = computed(() => {
|
||||
const list = []
|
||||
for (const key in allComps) {
|
||||
list.push({
|
||||
key,
|
||||
title: allComps[key].title,
|
||||
icon: allComps[key].icon,
|
||||
description: allComps[key].description,
|
||||
})
|
||||
}
|
||||
const myCompKeys = grid.compsList.flat()
|
||||
list.forEach((comp) => {
|
||||
comp.disabled = myCompKeys.includes(comp.key)
|
||||
})
|
||||
return list
|
||||
})
|
||||
|
||||
const myCompsList = computed(() => {
|
||||
return allCompsList.value.filter((item) => !item.disabled)
|
||||
})
|
||||
|
||||
const nowCompsList = computed(() => {
|
||||
return grid.compsList.flat()
|
||||
})
|
||||
|
||||
// 方法
|
||||
const handleCustom = () => {
|
||||
customizing.value = true
|
||||
const oldWidth = widgetsRef.value?.offsetWidth || 0
|
||||
nextTick(() => {
|
||||
if (widgetsRef.value) {
|
||||
const scale = widgetsRef.value.offsetWidth / oldWidth
|
||||
widgetsRef.value.style.setProperty('transform', `scale(${scale})`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setLayout = (layout) => {
|
||||
grid.layout = layout
|
||||
if (layout.join(',') === '24') {
|
||||
grid.compsList[0] = [...grid.compsList[0], ...grid.compsList[1], ...grid.compsList[2]]
|
||||
grid.compsList[1] = []
|
||||
grid.compsList[2] = []
|
||||
}
|
||||
}
|
||||
|
||||
const addComp = (item) => {
|
||||
grid.compsList[0].push(item.key)
|
||||
}
|
||||
|
||||
const removeComp = (key) => grid.compsList.forEach((list, index) => {
|
||||
grid.compsList[index] = list.filter((k) => k !== key)
|
||||
})
|
||||
|
||||
const handleSave = () => {
|
||||
customizing.value = false
|
||||
if (widgetsRef.value) {
|
||||
widgetsRef.value.style.removeProperty('transform')
|
||||
}
|
||||
localStorage.setItem('widgetsGrid', JSON.stringify(grid))
|
||||
emit('on-mounted')
|
||||
}
|
||||
|
||||
const handleResetDefault = () => {
|
||||
customizing.value = false
|
||||
if (widgetsRef.value) {
|
||||
widgetsRef.value.style.removeProperty('transform')
|
||||
}
|
||||
resetToDefault()
|
||||
localStorage.removeItem('widgetsGrid')
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
customizing.value = false
|
||||
if (widgetsRef.value) {
|
||||
widgetsRef.value.style.removeProperty('transform')
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
initGrid()
|
||||
emit('on-mounted')
|
||||
})
|
||||
|
||||
const emit = defineEmits(['on-mounted'])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.widgets-home {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.widgets-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.widgets-top {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.widgets-top-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.widgets {
|
||||
transform-origin: top left;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper {
|
||||
margin-right: -360px;
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper .ant-col {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper .draggable-wrapper {
|
||||
border: 1px dashed #1890ff;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper .no-widgets {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customizing .widgets-item {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.customize-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.customize-overlay:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.customize-overlay label {
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
padding: 0 30px;
|
||||
border-radius: 40px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
margin-top: 8px;
|
||||
|
||||
.anticon {
|
||||
margin-right: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.customize-overlay .close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.widgets-list {
|
||||
margin-top: 24px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.widgets-list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.widgets-list-item .item-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(180, 180, 180, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
margin-right: 15px;
|
||||
color: #6a8bad;
|
||||
}
|
||||
|
||||
.widgets-list-item .item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.widgets-list-item .item-info h2 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
cursor: default;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.widgets-list-item .item-info p {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.widgets-wrapper .sortable-ghost {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.select-layout {
|
||||
margin-bottom: 24px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-layout-options {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.select-layout-item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 2px solid #d9d9d9;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
background: #d9d9d9;
|
||||
height: 46px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&.item02 span {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&.item02 .ant-col:nth-child(1) span {
|
||||
height: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&.item03 span {
|
||||
height: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #1890ff;
|
||||
|
||||
span {
|
||||
background: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widgets-drawer {
|
||||
:deep(.ant-drawer-body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.widgets-aside-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.anticon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.customizing .widgets {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
|
||||
.customizing .widgets-drawer {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,469 +0,0 @@
|
||||
<template>
|
||||
<div class="my-app">
|
||||
<a-card :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title">
|
||||
<SettingOutlined />
|
||||
<span>我的常用应用</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="showDrawer">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
添加应用
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<div v-if="myApps.length === 0" class="empty-state">
|
||||
<a-empty description="暂无常用应用，请点击上方按钮添加" />
|
||||
</div>
|
||||
|
||||
<div v-else class="apps-grid">
|
||||
<draggable v-model="myApps" item-key="path" :animation="200" ghost-class="ghost" drag-class="dragging"
|
||||
class="draggable-grid">
|
||||
<template #item="{ element }">
|
||||
<div class="app-item" @click="handleAppClick(element)">
|
||||
<div class="app-icon">
|
||||
<component :is="getIconComponent(element.meta?.icon)" />
|
||||
</div>
|
||||
<div class="app-name">{{ element.meta?.title }}</div>
|
||||
<div class="app-description">{{ element.meta?.description || '点击打开' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 添加应用抽屉 -->
|
||||
<a-drawer v-model:open="drawerVisible" title="管理应用" :width="650" placement="right">
|
||||
<div class="drawer-content">
|
||||
<div class="app-section">
|
||||
<div class="section-header">
|
||||
<h3>
|
||||
<StarFilled />
|
||||
我的常用
|
||||
</h3>
|
||||
<span class="count">{{ myApps.length }} 个应用</span>
|
||||
</div>
|
||||
<p class="tips">拖拽卡片调整顺序，点击移除按钮移除应用</p>
|
||||
<draggable v-model="myApps" item-key="path" :animation="200" ghost-class="drawer-ghost"
|
||||
drag-class="drawer-dragging" class="drawer-grid" group="apps">
|
||||
<template #item="{ element }">
|
||||
<div class="drawer-app-card">
|
||||
<div class="remove-btn" @click.stop="removeApp(element.path)">
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
<div class="app-icon">
|
||||
<component :is="getIconComponent(element.meta?.icon)" />
|
||||
</div>
|
||||
<div class="app-name">{{ element.meta?.title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="myApps.length === 0" class="empty-zone">
|
||||
<a-empty description="暂无常用应用，从下方拖入应用" :image="false" />
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<a-divider style="margin: 24px 0" />
|
||||
|
||||
<div class="app-section">
|
||||
<div class="section-header">
|
||||
<h3>
|
||||
<AppstoreOutlined />
|
||||
全部应用
|
||||
</h3>
|
||||
<span class="count">{{ allApps.length }} 个可用</span>
|
||||
</div>
|
||||
<p class="tips">拖拽卡片到上方添加为常用应用</p>
|
||||
<draggable v-model="allApps" item-key="path" :animation="200" ghost-class="drawer-ghost"
|
||||
drag-class="drawer-dragging" class="drawer-grid" group="apps">
|
||||
<template #item="{ element }">
|
||||
<div class="drawer-app-card">
|
||||
<div class="app-icon">
|
||||
<component :is="getIconComponent(element.meta?.icon)" />
|
||||
</div>
|
||||
<div class="app-name">{{ element.meta?.title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="allApps.length === 0" class="empty-zone">
|
||||
<a-empty description="所有应用已添加" :image="false" />
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<a-button @click="drawerVisible = false">取消</a-button>
|
||||
<a-button type="primary" @click="handleSave">保存设置</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import * as icons from '@ant-design/icons-vue'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'MyApp',
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 从菜单中提取所有应用项（扁平化菜单树）
|
||||
const extractMenuItems = (menus) => {
|
||||
const items = []
|
||||
|
||||
const traverse = (menuList) => {
|
||||
for (const menu of menuList) {
|
||||
// 只添加有路径的菜单项（排除父级菜单项）
|
||||
if (menu.path && (!menu.children || menu.children.length === 0)) {
|
||||
items.push(menu)
|
||||
}
|
||||
// 递归处理子菜单
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
traverse(menu.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
traverse(menus)
|
||||
return items
|
||||
}
|
||||
|
||||
// 获取所有可用应用
|
||||
const allAvailableApps = computed(() => {
|
||||
return extractMenuItems(userStore.menu || [])
|
||||
})
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
const myApps = ref([])
|
||||
const allApps = ref([])
|
||||
|
||||
// 获取图标组件
|
||||
const getIconComponent = (iconName) => {
|
||||
return icons[iconName] || icons.FileTextOutlined
|
||||
}
|
||||
|
||||
// 从本地存储加载数据
|
||||
const loadApps = () => {
|
||||
const savedApps = localStorage.getItem('myApps')
|
||||
if (savedApps) {
|
||||
const savedPaths = JSON.parse(savedApps)
|
||||
myApps.value = allAvailableApps.value.filter(app => savedPaths.includes(app.path))
|
||||
} else {
|
||||
// 默认显示前4个应用
|
||||
myApps.value = allAvailableApps.value.slice(0, 4)
|
||||
}
|
||||
updateAllApps()
|
||||
}
|
||||
|
||||
// 更新全部应用列表（排除已添加的）
|
||||
const updateAllApps = () => {
|
||||
const myAppPaths = myApps.value.map(app => app.path)
|
||||
allApps.value = allAvailableApps.value.filter(app => !myAppPaths.includes(app.path))
|
||||
}
|
||||
|
||||
// 显示抽屉
|
||||
const showDrawer = () => {
|
||||
drawerVisible.value = true
|
||||
updateAllApps()
|
||||
}
|
||||
|
||||
// 移除应用
|
||||
const removeApp = (path) => {
|
||||
const index = myApps.value.findIndex(app => app.path === path)
|
||||
if (index > -1) {
|
||||
myApps.value.splice(index, 1)
|
||||
updateAllApps()
|
||||
}
|
||||
}
|
||||
|
||||
// 应用点击处理
|
||||
const handleAppClick = (app) => {
|
||||
if (app.path) {
|
||||
router.push(app.path)
|
||||
} else {
|
||||
message.warning('该应用没有配置路由')
|
||||
}
|
||||
}
|
||||
|
||||
// 保存设置
|
||||
const handleSave = () => {
|
||||
const appPaths = myApps.value.map(app => app.path)
|
||||
localStorage.setItem('myApps', JSON.stringify(appPaths))
|
||||
message.success('保存成功')
|
||||
drawerVisible.value = false
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadApps()
|
||||
|
||||
// 监听菜单变化，重新加载应用
|
||||
watch(
|
||||
() => userStore.menu,
|
||||
() => {
|
||||
loadApps()
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-app {
|
||||
padding: 20px;
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.apps-grid {
|
||||
.draggable-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
cursor: grab;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
opacity: 0.3;
|
||||
background: #e6f7ff;
|
||||
border-color: #1890ff;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
font-size: 40px;
|
||||
color: #1890ff;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉样式 - 使用全局样式避免深度问题
|
||||
:deep(.my-app .ant-drawer-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
:deep(.my-app .ant-drawer-footer) {
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
.app-section {
|
||||
margin-bottom: 0;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #262626;
|
||||
|
||||
.anticon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-zone {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
background: #fafafa;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 8px;
|
||||
|
||||
.ant-empty-description {
|
||||
color: #bfbfbf;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉内卡片式网格布局
|
||||
.drawer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.drawer-app-card {
|
||||
position: relative;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
cursor: grab;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:hover {
|
||||
background: #ff7875;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .remove-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
|
||||
border-radius: 12px;
|
||||
font-size: 24px;
|
||||
color: #1890ff;
|
||||
|
||||
:deep(.anticon) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽时的样式
|
||||
.drawer-ghost {
|
||||
opacity: 0.4;
|
||||
background: #e6f7ff;
|
||||
border-color: #1890ff;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.drawer-dragging {
|
||||
opacity: 0.6;
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="work-page">
|
||||
<MyApp />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyApp from './components/myapp.vue'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'WorkPage',
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.work-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,131 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container auth-container">
|
||||
<!-- 科技感背景 -->
|
||||
<div class="tech-bg">
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="login-wrapper auth-wrapper">
|
||||
<div class="login-card auth-card">
|
||||
<!-- 左侧装饰区 -->
|
||||
<div class="decoration-area">
|
||||
<div class="tech-circle">
|
||||
<div class="circle-inner"></div>
|
||||
<div class="circle-ring"></div>
|
||||
<div class="circle-ring circle-ring-2"></div>
|
||||
</div>
|
||||
<div class="decoration-text">
|
||||
<h2>欢迎回来</h2>
|
||||
<p>进入智能管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧表单区 -->
|
||||
<div class="form-area">
|
||||
<div class="auth-header">
|
||||
<h1>Vue Admin</h1>
|
||||
<p class="subtitle">登录您的账户</p>
|
||||
</div>
|
||||
|
||||
<a-form :model="formState" @finish="handleLogin" layout="vertical" class="auth-form login-form">
|
||||
<a-form-item name="username" :rules="[{ required: true, message: '请输入用户名' }]">
|
||||
<a-input v-model:value="formState.username" placeholder="请输入用户名" size="large"
|
||||
:prefix="h(UserOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
|
||||
<a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large"
|
||||
:prefix="h(LockOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<div class="form-options">
|
||||
<a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
|
||||
<router-link to="/reset-password" class="forgot-password">
|
||||
忘记密码？
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" size="large" block :loading="loading">
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="form-footer">
|
||||
<span>还没有账号？</span>
|
||||
<router-link to="/register" class="auth-link">
|
||||
立即注册
|
||||
</router-link>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, h } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import authApi from '@/api/auth'
|
||||
import '@/assets/style/auth-pages.scss'
|
||||
|
||||
defineOptions({
|
||||
name: 'LoginPage'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const userStore = useUserStore()
|
||||
|
||||
const formState = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
const handleLogin = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
let res = await authApi.login.post({
|
||||
username: formState.username,
|
||||
password: formState.password,
|
||||
})
|
||||
if (res.code == 1) {
|
||||
userStore.setToken(res.data.access_token)
|
||||
let userInfo = await authApi.user.get()
|
||||
if (userInfo.code == 1) {
|
||||
userStore.setUserInfo(userInfo.data)
|
||||
}
|
||||
let authData = await authApi.menu.my.get()
|
||||
if (authData.code == 1) {
|
||||
userStore.setMenu(authData.data.menu)
|
||||
userStore.setPermissions(authData.data.permissions)
|
||||
}
|
||||
|
||||
message.success('登录成功')
|
||||
const redirect = router.currentRoute.value.query.redirect || '/'
|
||||
router.push(redirect)
|
||||
}
|
||||
} catch {
|
||||
message.error('登录失败，请检查用户名和密码')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 所有样式已移至统一样式文件 src/assets/style/auth-pages.scss */
|
||||
</style>
|
||||
@@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div class="reset-container auth-container">
|
||||
<!-- 科技感背景 -->
|
||||
<div class="tech-bg">
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="reset-wrapper auth-wrapper">
|
||||
<div class="reset-card auth-card">
|
||||
<!-- 左侧装饰区 -->
|
||||
<div class="decoration-area">
|
||||
<div class="tech-circle">
|
||||
<div class="circle-inner"></div>
|
||||
<div class="circle-ring"></div>
|
||||
<div class="circle-ring circle-ring-2"></div>
|
||||
</div>
|
||||
<div class="decoration-text">
|
||||
<h2>重置密码</h2>
|
||||
<p>找回您的账户访问权限</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧表单区 -->
|
||||
<div class="form-area">
|
||||
<div class="auth-header">
|
||||
<h1>Vue Admin</h1>
|
||||
<p class="subtitle">设置新密码</p>
|
||||
</div>
|
||||
|
||||
<a-form :model="formState" @finish="handleReset" layout="vertical" class="auth-form reset-form">
|
||||
<a-form-item name="email" :rules="[
|
||||
{ required: true, message: '请输入邮箱' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' },
|
||||
]">
|
||||
<a-input v-model:value="formState.email" placeholder="请输入邮箱地址" size="large"
|
||||
:prefix="h(MailOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="verificationCode" :rules="[{ required: true, message: '请输入验证码' }]">
|
||||
<div class="code-input-wrapper">
|
||||
<a-input v-model:value="formState.verificationCode" placeholder="请输入验证码" size="large"
|
||||
:prefix="h(SafetyOutlined)" class="code-input" />
|
||||
<a-button type="primary" :disabled="countdown > 0" @click="sendCode" class="code-btn"
|
||||
size="large">
|
||||
{{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="newPassword" :rules="[
|
||||
{ required: true, message: '请输入新密码' },
|
||||
{ min: 6, message: '密码至少6个字符' },
|
||||
]">
|
||||
<a-input-password v-model:value="formState.newPassword" placeholder="请输入新密码" size="large"
|
||||
:prefix="h(LockOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="confirmPassword" :rules="[
|
||||
{ required: true, message: '请确认新密码' },
|
||||
{ validator: validateConfirmPassword },
|
||||
]">
|
||||
<a-input-password v-model:value="formState.confirmPassword" placeholder="请再次输入新密码"
|
||||
size="large" :prefix="h(LockOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" size="large" block :loading="loading">
|
||||
重置密码
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="form-footer">
|
||||
<span>记得密码了？</span>
|
||||
<router-link to="/login" class="auth-link">
|
||||
立即登录
|
||||
</router-link>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, h } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { MailOutlined, SafetyOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||
import '@/assets/style/auth-pages.scss'
|
||||
|
||||
defineOptions({
|
||||
name: 'ResetPasswordPage'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const countdown = ref(0)
|
||||
|
||||
const formState = reactive({
|
||||
email: '',
|
||||
verificationCode: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
|
||||
const validateConfirmPassword = async (rule, value) => {
|
||||
if (value !== formState.newPassword) {
|
||||
return Promise.reject('两次输入的密码不一致')
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const sendCode = () => {
|
||||
if (!formState.email) {
|
||||
message.warning('请先输入邮箱地址')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 实现发送验证码逻辑
|
||||
message.success('验证码已发送')
|
||||
countdown.value = 60
|
||||
const timer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const handleReset = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: 实现重置密码逻辑
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
message.success('密码重置成功，请登录')
|
||||
router.push('/login')
|
||||
} catch {
|
||||
message.error('密码重置失败，请稍后重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 所有样式已移至统一样式文件 src/assets/style/auth-pages.scss */
|
||||
</style>
|
||||
@@ -1,149 +0,0 @@
|
||||
<template>
|
||||
<div class="register-container auth-container">
|
||||
<!-- 科技感背景 -->
|
||||
<div class="tech-bg">
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="grid-line"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
<div class="light-spot"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="register-wrapper auth-wrapper">
|
||||
<div class="register-card auth-card">
|
||||
<!-- 左侧装饰区 -->
|
||||
<div class="decoration-area">
|
||||
<div class="tech-circle">
|
||||
<div class="circle-inner"></div>
|
||||
<div class="circle-ring"></div>
|
||||
<div class="circle-ring circle-ring-2"></div>
|
||||
</div>
|
||||
<div class="decoration-text">
|
||||
<h2>创建账号</h2>
|
||||
<p>加入智能管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧表单区 -->
|
||||
<div class="form-area">
|
||||
<div class="auth-header">
|
||||
<h1>Vue Admin</h1>
|
||||
<p class="subtitle">注册新账户</p>
|
||||
</div>
|
||||
|
||||
<a-form :model="formState" @finish="handleRegister" layout="vertical"
|
||||
class="auth-form register-form">
|
||||
<a-form-item name="username" :rules="[
|
||||
{ required: true, message: '请输入用户名' },
|
||||
{ min: 3, message: '用户名至少3个字符' },
|
||||
]">
|
||||
<a-input v-model:value="formState.username" placeholder="请输入用户名" size="large"
|
||||
:prefix="h(UserOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="email" :rules="[
|
||||
{ required: true, message: '请输入邮箱' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' },
|
||||
]">
|
||||
<a-input v-model:value="formState.email" placeholder="请输入邮箱地址" size="large"
|
||||
:prefix="h(MailOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password" :rules="[
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ min: 6, message: '密码至少6个字符' },
|
||||
]">
|
||||
<a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large"
|
||||
:prefix="h(LockOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="confirmPassword" :rules="[
|
||||
{ required: true, message: '请确认密码' },
|
||||
{ validator: validateConfirmPassword },
|
||||
]">
|
||||
<a-input-password v-model:value="formState.confirmPassword" placeholder="请再次输入密码"
|
||||
size="large" :prefix="h(LockOutlined)" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="formState.agree" class="agreement-checkbox">
|
||||
<span class="agreement-text">
|
||||
我已阅读并同意
|
||||
<a href="#" class="link">用户协议</a>
|
||||
和
|
||||
<a href="#" class="link">隐私政策</a>
|
||||
</span>
|
||||
</a-checkbox>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" size="large" block :loading="loading"
|
||||
:disabled="!formState.agree">
|
||||
注册
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="form-footer">
|
||||
<span>已有账号？</span>
|
||||
<router-link to="/login" class="auth-link">
|
||||
立即登录
|
||||
</router-link>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, h } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||
import '@/assets/style/auth-pages.scss'
|
||||
|
||||
defineOptions({
|
||||
name: 'RegisterPage'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
|
||||
const formState = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
agree: false,
|
||||
})
|
||||
|
||||
const validateConfirmPassword = async (rule, value) => {
|
||||
if (value !== formState.password) {
|
||||
return Promise.reject('两次输入的密码不一致')
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const handleRegister = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: 实现注册逻辑
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
message.success('注册成功，请登录')
|
||||
router.push('/login')
|
||||
} catch {
|
||||
message.error('注册失败，请稍后重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 所有样式已移至统一样式文件 src/assets/style/auth-pages.scss */
|
||||
</style>
|
||||
@@ -1,177 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :mask-closable="false"
|
||||
:footer="null" @cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item v-if="mode === 'add'" label="地区编码" name="code">
|
||||
<a-input v-model:value="form.code" placeholder="请输入地区编码" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="地区名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="请输入地区名称" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="上级地区" name="parent_code">
|
||||
<a-tree-select v-model:value="form.parent_code" :tree-data="areaTreeData"
|
||||
:field-names="{ label: 'title', value: 'code', children: 'children' }" tree-default-expand-all
|
||||
show-search placeholder="请选择上级地区" allow-clear tree-node-filter-prop="title" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="form.status">
|
||||
<a-radio :value="1">正常</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增地区',
|
||||
edit: '编辑地区',
|
||||
show: '查看地区'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: null,
|
||||
code: '',
|
||||
title: '',
|
||||
parent_code: null,
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
code: [
|
||||
{ required: true, message: '请输入地区编码', trigger: 'blur' }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: '请输入地区名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 地区树数据
|
||||
const areaTreeData = ref([])
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
if (openMode !== 'show') {
|
||||
loadAreaTree()
|
||||
}
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 加载地区树数据
|
||||
const loadAreaTree = async () => {
|
||||
try {
|
||||
const res = await systemApi.area.list.get({ pageSize: 1000 })
|
||||
if (res.code === 1) {
|
||||
const list = res.data.list || res.data || []
|
||||
areaTreeData.value = buildTree(list)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载地区树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 构建树结构
|
||||
const buildTree = (list) => {
|
||||
const map = {}
|
||||
const roots = []
|
||||
|
||||
// 创建映射，以 code 作为键
|
||||
list.forEach((item) => {
|
||||
map[item.code] = { ...item, children: [] }
|
||||
})
|
||||
|
||||
// 构建树，通过 parent_code 关联
|
||||
list.forEach((item) => {
|
||||
if (item.parent_code && map[item.parent_code]) {
|
||||
map[item.parent_code].children.push(map[item.code])
|
||||
} else if (item.parent_code === '0' || !item.parent_code) {
|
||||
roots.push(map[item.code])
|
||||
}
|
||||
})
|
||||
|
||||
return roots
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res = {}
|
||||
if (mode.value === 'add') {
|
||||
res = await systemApi.area.add.post(form)
|
||||
} else {
|
||||
res = await systemApi.area.edit.post(form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
isSaveing.value = false
|
||||
console.error('表单验证失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.code = data.code
|
||||
form.title = data.title
|
||||
form.parent_code = data.parent_code
|
||||
form.status = data.status ?? 1
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 弹窗样式可根据需要添加
|
||||
</style>
|
||||
@@ -1,388 +0,0 @@
|
||||
<template>
|
||||
<div class="pages area-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
<a-input v-model:value="areaKeyword" placeholder="搜索地区..." allow-clear @change="handleAreaSearch">
|
||||
<template #prefix>
|
||||
<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree v-model:selectedKeys="selectedAreaKeys" :tree-data="filteredAreaTree"
|
||||
:field-names="{ title: 'title', key: 'code', children: 'children' }" show-line @select="onAreaSelect">
|
||||
<template #icon="{ dataRef }">
|
||||
<folder-outlined v-if="dataRef.children" />
|
||||
<file-outlined v-else />
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.title" placeholder="请输入地区名称" allow-clear
|
||||
style="width: 160px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-select v-model:value="searchForm.level" placeholder="地区级别" allow-clear style="width: 120px">
|
||||
<a-select-option :value="1">省</a-select-option>
|
||||
<a-select-option :value="2">市</a-select-option>
|
||||
<a-select-option :value="3">区/县</a-select-option>
|
||||
<a-select-option :value="4">街道</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button danger @click="handleBatchDelete" :disabled="!selectedRowKeys.length">
|
||||
<template #icon><delete-outlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @refresh="loadData" @paginationChange="handlePaginationChange"
|
||||
:row-selection="rowSelection">
|
||||
<template #level="{ record }">
|
||||
<a-tag color="blue">{{ getLevelText(record.level) }}</a-tag>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定删除该地区吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑地区弹窗 -->
|
||||
<area-modal v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { SearchOutlined, RedoOutlined, DeleteOutlined, PlusOutlined, FolderOutlined, FileOutlined } from '@ant-design/icons-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import areaModal from './components/AreaModal.vue'
|
||||
import systemApi from '@/api/system'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'systemArea'
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
|
||||
// 地区树数据
|
||||
const areaTree = ref([])
|
||||
const filteredAreaTree = ref([])
|
||||
const selectedAreaKeys = ref([])
|
||||
const areaKeyword = ref('')
|
||||
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
rowSelection,
|
||||
selectedRowKeys,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
loadData
|
||||
} = useTable({
|
||||
api: systemApi.area.list.get,
|
||||
searchParams: {
|
||||
title: '',
|
||||
level: null,
|
||||
parent_code: null
|
||||
},
|
||||
rowSelection: true,
|
||||
onSearchBefore: () => {
|
||||
// 重置地区选择
|
||||
selectedAreaKeys.value = []
|
||||
},
|
||||
onResetBefore: () => {
|
||||
// 重置地区选择和搜索
|
||||
selectedAreaKeys.value = []
|
||||
areaKeyword.value = ''
|
||||
filteredAreaTree.value = areaTree.value
|
||||
}
|
||||
})
|
||||
|
||||
// 分页变化处理
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
pagination.current = page
|
||||
pagination.pageSize = pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 获取级别文本
|
||||
const getLevelText = (level) => {
|
||||
const levelMap = {
|
||||
1: '省',
|
||||
2: '市',
|
||||
3: '区/县',
|
||||
4: '街道'
|
||||
}
|
||||
return levelMap[level] || '未知'
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: '地区名称', dataIndex: 'title', key: 'title', width: 200 },
|
||||
{ title: '地区编码', dataIndex: 'code', key: 'code', width: 150 },
|
||||
{ title: '地区级别', dataIndex: 'level', key: 'level', width: 100, slot: 'level' },
|
||||
{ title: '上级地区', dataIndex: 'parent_code', key: 'parent_code', width: 150 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 200, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
// 加载地区树
|
||||
const loadAreaTree = async () => {
|
||||
try {
|
||||
const res = await systemApi.area.list.get({ pageSize: 1000 })
|
||||
if (res.code === 1) {
|
||||
const list = res.data.list || res.data || []
|
||||
const tree = buildTree(list)
|
||||
areaTree.value = tree
|
||||
filteredAreaTree.value = tree
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载地区树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 构建树结构
|
||||
const buildTree = (list) => {
|
||||
const map = {}
|
||||
const roots = []
|
||||
|
||||
// 创建映射，以 code 作为键
|
||||
list.forEach((item) => {
|
||||
map[item.code] = { ...item, children: [] }
|
||||
})
|
||||
|
||||
// 构建树，通过 parent_code 关联
|
||||
list.forEach((item) => {
|
||||
if (item.parent_code && map[item.parent_code]) {
|
||||
map[item.parent_code].children.push(map[item.code])
|
||||
} else if (item.parent_code === '0' || !item.parent_code) {
|
||||
roots.push(map[item.code])
|
||||
}
|
||||
})
|
||||
|
||||
return roots
|
||||
}
|
||||
|
||||
// 地区搜索
|
||||
const handleAreaSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
areaKeyword.value = keyword
|
||||
if (!keyword) {
|
||||
filteredAreaTree.value = areaTree.value
|
||||
return
|
||||
}
|
||||
|
||||
// 递归过滤地区树
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const isMatch = node.title && node.title.toLowerCase().includes(keyword.toLowerCase())
|
||||
const filteredChildren = node.children ? filterTree(node.children) : []
|
||||
|
||||
if (isMatch || filteredChildren.length > 0) {
|
||||
acc.push({
|
||||
...node,
|
||||
children: filteredChildren.length > 0 ? filteredChildren : undefined
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
|
||||
filteredAreaTree.value = filterTree(areaTree.value)
|
||||
}
|
||||
|
||||
|
||||
// 地区选择事件
|
||||
const onAreaSelect = (selectedKeys) => {
|
||||
if (selectedKeys && selectedKeys.length > 0) {
|
||||
searchForm.parent_code = selectedKeys[0]
|
||||
} else {
|
||||
searchForm.parent_code = null
|
||||
}
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 新增地区
|
||||
const handleAdd = () => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('add')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 查看地区
|
||||
const handleView = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑地区
|
||||
const handleEdit = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除地区
|
||||
const handleDelete = async (record) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除地区 "${record.title}" 吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
// 注意：API 中没有删除接口，这里模拟删除成功
|
||||
message.success('删除成功')
|
||||
loadData()
|
||||
selectedRowKeys.value = []
|
||||
} catch (error) {
|
||||
console.error('删除地区失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning('请先选择要删除的数据')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认批量删除',
|
||||
content: `确定要删除选中的 ${selectedRowKeys.value.length} 条数据吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
// 注意：API 中没有批量删除接口，这里模拟删除成功
|
||||
message.success('删除成功')
|
||||
selectedRowKeys.value = []
|
||||
loadData()
|
||||
} catch (error) {
|
||||
console.error('批量删除失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = (data, mode) => {
|
||||
if (mode === 'add') {
|
||||
loadAreaTree()
|
||||
loadData()
|
||||
} else if (mode === 'edit') {
|
||||
loadAreaTree()
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadAreaTree()
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.area-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.left-box {
|
||||
width: 260px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<div class="pages client-page">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button danger @click="handleBatchDelete" :disabled="!selectedRowKeys.length">
|
||||
<template #icon><delete-outlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.title" placeholder="请输入名称" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @refresh="loadData" @paginationChange="handlePaginationChange"
|
||||
:row-selection="rowSelection">
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button type="link" size="small" @click="handleMenu(record)">菜单</a-button>
|
||||
<a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑客户端弹窗 -->
|
||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
|
||||
<!-- 菜单管理抽屉 -->
|
||||
<menu-drawer v-if="dialog.menu" ref="menuDrawerRef" @closed="dialog.menu = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { SearchOutlined, RedoOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import menuDrawer from './menu.vue'
|
||||
import systemApi from '@/api/system'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'systemClient'
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false,
|
||||
menu: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
const menuDrawerRef = ref(null)
|
||||
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
rowSelection,
|
||||
selectedRowKeys,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
loadData
|
||||
} = useTable({
|
||||
api: systemApi.client.list.get,
|
||||
searchParams: {
|
||||
title: ''
|
||||
},
|
||||
rowSelection: true
|
||||
})
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '名称', dataIndex: 'title', key: 'title', width: 200 },
|
||||
{ title: '客户端ID', dataIndex: 'app_id', key: 'app_id', width: 200 },
|
||||
{ title: '客户端Secret', dataIndex: 'secret', key: 'secret', width: 300 },
|
||||
{ title: '添加时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '更新时间', dataIndex: 'updated_at', key: 'updated_at', width: 180 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 220, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
// 分页变化处理
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
pagination.current = page
|
||||
pagination.pageSize = pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 新增客户端
|
||||
const handleAdd = () => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('add').setData({})
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 查看客户端
|
||||
const handleView = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑客户端
|
||||
const handleEdit = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 菜单管理
|
||||
const handleMenu = (record) => {
|
||||
dialog.menu = true
|
||||
setTimeout(() => {
|
||||
menuDrawerRef.value?.open().setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除客户端
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await systemApi.client.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
loadData()
|
||||
selectedRowKeys.value = []
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除客户端失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning('请先选择要删除的数据')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认批量删除',
|
||||
content: `确定要删除选中的 ${selectedRowKeys.value.length} 项吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const promises = selectedRowKeys.value.map(id => systemApi.client.delete.post({ id }))
|
||||
await Promise.all(promises)
|
||||
message.success('操作成功')
|
||||
selectedRowKeys.value = []
|
||||
loadData()
|
||||
} catch (error) {
|
||||
console.error('批量删除失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.client-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.tool-bar {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,314 +0,0 @@
|
||||
<template>
|
||||
<a-drawer :title="detail.title + '菜单'" :open="visible" width="80%" :destroy-on-close="true"
|
||||
:mask-closable="false" @close="handleClose">
|
||||
<div class="menu-drawer">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button danger @click="handleBatchDelete" :disabled="!selectedRowKeys.length">
|
||||
<template #icon><delete-outlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.title" placeholder="请输入名称" allow-clear
|
||||
style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @refresh="loadData" @paginationChange="handlePaginationChange"
|
||||
:row-selection="rowSelection">
|
||||
<template #client="{ record }">
|
||||
{{ record.client?.title || '-' }}
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 菜单表单弹窗 -->
|
||||
<menu-form-dialog v-if="dialog.form" ref="formDialogRef" @success="handleFormSuccess"
|
||||
@closed="dialog.form = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { SearchOutlined, RedoOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import menuFormDialog from './menuform.vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
const emit = defineEmits(['closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const detail = ref({})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
form: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const formDialogRef = ref(null)
|
||||
|
||||
// 选中的行
|
||||
const selectedRowKeys = ref([])
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (selectedKeys) => {
|
||||
selectedRowKeys.value = selectedKeys
|
||||
},
|
||||
}))
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
title: '',
|
||||
client_id: null
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['20', '50', '100', '200']
|
||||
})
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '名称', dataIndex: 'title', key: 'title', width: 200 },
|
||||
{ title: '所属客户端', dataIndex: 'client', key: 'client', width: 180, slot: 'client' },
|
||||
{ title: '链接', dataIndex: 'url', key: 'url', width: 260 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80 },
|
||||
{ title: '添加时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '更新时间', dataIndex: 'updated_at', key: 'updated_at', width: 180 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 180, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
// 显示抽屉
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭抽屉
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理关闭
|
||||
const handleClose = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = (data) => {
|
||||
detail.value = data
|
||||
searchForm.client_id = data.id
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 加载菜单列表数据
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.current,
|
||||
limit: pagination.pageSize,
|
||||
client_id: searchForm.client_id,
|
||||
title: searchForm.title,
|
||||
is_tree: 0
|
||||
}
|
||||
const res = await systemApi.client.menu.list.get(params)
|
||||
if (res.code === 1) {
|
||||
tableData.value = res.data?.data || []
|
||||
pagination.total = res.data?.total || 0
|
||||
} else {
|
||||
message.error(res.message || '加载数据失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载菜单列表失败:', error)
|
||||
message.error('加载数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化处理
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
pagination.current = page
|
||||
pagination.pageSize = pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchForm.title = ''
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 新增菜单
|
||||
const handleAdd = () => {
|
||||
dialog.form = true
|
||||
setTimeout(() => {
|
||||
formDialogRef.value?.open('add').setData({ client_id: detail.value.id })
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 查看菜单
|
||||
const handleView = (record) => {
|
||||
dialog.form = true
|
||||
setTimeout(() => {
|
||||
formDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑菜单
|
||||
const handleEdit = (record) => {
|
||||
dialog.form = true
|
||||
setTimeout(() => {
|
||||
formDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除菜单
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await systemApi.client.menu.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
loadData()
|
||||
selectedRowKeys.value = []
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除菜单失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning('请先选择要删除的数据')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认批量删除',
|
||||
content: `确定要删除选中的 ${selectedRowKeys.value.length} 项吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const promises = selectedRowKeys.value.map(id => systemApi.client.menu.delete.post({ id }))
|
||||
await Promise.all(promises)
|
||||
message.success('操作成功')
|
||||
selectedRowKeys.value = []
|
||||
loadData()
|
||||
} catch (error) {
|
||||
console.error('批量删除失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 表单成功回调
|
||||
const handleFormSuccess = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.menu-drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.tool-bar {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,202 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="600" :destroy-on-close="true" :mask-closable="false"
|
||||
:footer="null" @cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="请输入名称" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="上级菜单" name="parent_id">
|
||||
<a-tree-select v-model:value="form.parent_id" :tree-data="menuTreeData"
|
||||
:field-names="{ label: 'title', value: 'id', children: 'children' }" tree-default-expand-all
|
||||
show-search placeholder="请选择上级菜单" allow-clear tree-node-filter-prop="title" />
|
||||
</a-form-item>
|
||||
<a-form-item label="链接" name="url">
|
||||
<a-input v-model:value="form.url" placeholder="请输入链接" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="所属位置" name="position">
|
||||
<a-select v-model:value="form.position" placeholder="请选择所属位置" allow-clear>
|
||||
<a-select-option value="top">顶部</a-select-option>
|
||||
<a-select-option value="bottom">底部</a-select-option>
|
||||
<a-select-option value="left">左侧</a-select-option>
|
||||
<a-select-option value="right">右侧</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="图标" name="icon">
|
||||
<a-input v-model:value="form.icon" placeholder="请输入图标" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="0" style="width: 100%" placeholder="请输入排序" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否显示" name="is_show">
|
||||
<a-switch v-model:checked="form.is_show" :checked-value="1" :un-checked-value="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否新窗口" name="is_blank">
|
||||
<a-switch v-model:checked="form.is_blank" :checked-value="1" :un-checked-value="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-switch v-model:checked="form.status" :checked-value="1" :un-checked-value="0" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '添加',
|
||||
edit: '编辑',
|
||||
show: '查看'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaving = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: null,
|
||||
title: '',
|
||||
parent_id: null,
|
||||
url: '',
|
||||
position: 'top',
|
||||
icon: '',
|
||||
sort: 0,
|
||||
is_show: 1,
|
||||
is_blank: 0,
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
title: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 菜单树数据
|
||||
const menuTreeData = ref([])
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
loadMenuTree()
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 加载菜单树数据
|
||||
const loadMenuTree = async () => {
|
||||
try {
|
||||
const res = await systemApi.client.menu.list.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
const list = res.data || []
|
||||
menuTreeData.value = buildTree(list)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载菜单树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 构建树结构
|
||||
const buildTree = (list) => {
|
||||
const map = {}
|
||||
const roots = []
|
||||
|
||||
// 创建映射，以 id 作为键
|
||||
list.forEach((item) => {
|
||||
map[item.id] = { ...item, children: [] }
|
||||
})
|
||||
|
||||
// 构建树，通过 parent_id 关联
|
||||
list.forEach((item) => {
|
||||
if (item.parent_id && map[item.parent_id]) {
|
||||
map[item.parent_id].children.push(map[item.id])
|
||||
} else if (!item.parent_id || item.parent_id === 0) {
|
||||
roots.push(map[item.id])
|
||||
}
|
||||
})
|
||||
|
||||
return roots
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaving.value = true
|
||||
let res = {}
|
||||
|
||||
if (mode.value === 'add') {
|
||||
res = await systemApi.client.menu.add.post(form)
|
||||
} else {
|
||||
res = await systemApi.client.menu.edit.post(form)
|
||||
}
|
||||
|
||||
isSaving.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
isSaving.value = false
|
||||
console.error('表单验证失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
if (mode.value === 'edit' || mode.value === 'show') {
|
||||
form.id = data.id
|
||||
form.title = data.title || ''
|
||||
form.parent_id = data.parent_id
|
||||
form.url = data.url || ''
|
||||
form.position = data.position || 'top'
|
||||
form.icon = data.icon || ''
|
||||
form.sort = data.sort || 0
|
||||
form.is_show = data.is_show ?? 1
|
||||
form.is_blank = data.is_blank ?? 0
|
||||
form.status = data.status ?? 1
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 弹窗样式可根据需要添加
|
||||
</style>
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :mask-closable="false"
|
||||
:footer="null" @cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="客户端名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="请输入客户端名称" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="客户端ID" name="app_id">
|
||||
<a-input v-model:value="form.app_id" placeholder="客户端APPID" allow-clear :disabled="mode !== 'add'" />
|
||||
</a-form-item>
|
||||
<a-form-item label="客户端密匙" name="secret">
|
||||
<a-input v-model:value="form.secret" placeholder="客户端密匙" allow-clear :disabled="mode !== 'add'" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="form.status">
|
||||
<a-radio :value="1">正常</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '添加',
|
||||
edit: '编辑',
|
||||
show: '查看'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: null,
|
||||
title: '',
|
||||
app_id: '',
|
||||
secret: '',
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
title: [
|
||||
{ required: true, message: '请输入客户端名称', trigger: 'blur' }
|
||||
],
|
||||
app_id: [
|
||||
{ required: true, message: '请输入客户端ID', trigger: 'blur' }
|
||||
],
|
||||
secret: [
|
||||
{ required: true, message: '请输入客户端密匙', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res = {}
|
||||
|
||||
if (mode.value === 'add') {
|
||||
res = await systemApi.client.add.post(form)
|
||||
} else {
|
||||
res = await systemApi.client.edit.post(form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
isSaveing.value = false
|
||||
console.error('表单验证失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
if (mode.value === 'edit') {
|
||||
form.id = data.id
|
||||
form.title = data.title || ''
|
||||
form.app_id = data.app_id || ''
|
||||
form.secret = data.secret || ''
|
||||
form.status = data.status ?? 1
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 弹窗样式可根据需要添加
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "systemCrontab"
|
||||
})
|
||||
</script>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!--
|
||||
* @Descripttion: 系统计划任务配置
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月7日09:28:32
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-drawer title="计划任务日志" v-model="Visible" :size="780" direction="rtl" destroy-on-close>
|
||||
<el-container>
|
||||
<el-main style="padding:0 20px;">
|
||||
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" :params="search" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<template #return_code="scope">
|
||||
<span v-if="scope.row.return_code==0" style="color: #67C23A;"><el-icon><el-icon-success-filled /></el-icon></span>
|
||||
<span v-else style="color: #F56C6C;"><el-icon><el-icon-circle-close-filled /></el-icon></span>
|
||||
</template>
|
||||
<template #logs="scope">
|
||||
<el-button @click="show(scope.row)" type="text">日志</el-button>
|
||||
</template>
|
||||
<template #create_time="scope">
|
||||
<div v-time="scope.row.create_time"></div>
|
||||
</template>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-drawer title="日志" v-model="logsVisible" :size="500" direction="rtl" destroy-on-close>
|
||||
<el-main style="padding:0 20px 20px 20px;">
|
||||
<pre style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">{{logDetail}}</pre>
|
||||
</el-main>
|
||||
</el-drawer>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Visible: false,
|
||||
logsVisible: false,
|
||||
crontab: {},
|
||||
logDetail: '',
|
||||
list: {
|
||||
apiObj: this.$API.system.crontab.log,
|
||||
column: [
|
||||
{ label: '执行时间', prop: 'running_time', width: 100 },
|
||||
{ label: '执行结果', prop: 'return_code', width: 100, align: 'center' },
|
||||
{ label: '参数', prop: 'parameter', width: 100, align: 'center' },
|
||||
{ label: '时间', prop: 'create_time', width: 200 },
|
||||
{ label: '执行日志', prop: 'logs', align: 'center' }
|
||||
]
|
||||
},
|
||||
search: {crontab_id: 0}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.Visible = true
|
||||
return this
|
||||
},
|
||||
show(item){
|
||||
this.logDetail = item.exception
|
||||
this.logsVisible = true;
|
||||
},
|
||||
setData(row){
|
||||
this.crontab = row
|
||||
this.search.crontab_id = row.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close @closed="$emit('closed')">
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="描述" prop="title">
|
||||
<el-input v-model="form.title" placeholder="计划任务标题" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务分类" prop="type">
|
||||
<el-select v-model="form.type" placeholder="计划任务执行类名称" clearable>
|
||||
<el-option v-for="item in [{value: 1, label: '执行命令'}, {value: 2, label: '执行类class'}, {value: 3, label: '执行地址'}, {value: 4, label: '执行shell'}]" :key="item.value" :label="item.label" :value="item.value" ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="执行类" prop="command">
|
||||
<el-input v-model="form.command" placeholder="计划任务执行类名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="定时规则" prop="expression">
|
||||
<sc-cron v-model="form.expression" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></sc-cron>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="备注" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false" >取 消</el-button>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scCron from '@/components/scCron';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scCron
|
||||
},
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
mode: "add",
|
||||
titleMap: {
|
||||
add: '新增计划任务',
|
||||
edit: '编辑计划任务'
|
||||
},
|
||||
form: {
|
||||
id:"",
|
||||
title: "",
|
||||
type: 1,
|
||||
command: "",
|
||||
expression: "",
|
||||
status: 1,
|
||||
remark: ""
|
||||
},
|
||||
rules: {
|
||||
title:[{required: true, message: '请填写标题'}],
|
||||
command:[{required: true, message: '请填写执行类'}],
|
||||
expression:[{required: true, message: '请填写定时规则'}]
|
||||
},
|
||||
visible: false,
|
||||
isSaveing: false,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "每天8点和12点 (自定义追加)",
|
||||
value: "0 0 8,12 * * ?"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//显示
|
||||
open(mode='add'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
//表单提交方法
|
||||
submit(){
|
||||
this.$refs.dialogForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
let res = await this.$API.system.crontab[this.mode].post(this.form)
|
||||
|
||||
if(res.code == 1){
|
||||
this.isSaveing = false;
|
||||
this.visible = false;
|
||||
this.$message.success("操作成功")
|
||||
this.$emit('success', this.form, this.mode)
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
this.isSaveing = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//表单注入数据
|
||||
setData(data){
|
||||
this.form.id = data.id ?? 0
|
||||
this.form.title = data.title ?? ""
|
||||
this.form.type = data.type ?? 1
|
||||
this.form.command = data.command ?? ""
|
||||
this.form.expression = data.expression ?? ""
|
||||
this.form.status = data.status ?? 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="400" :destroy-on-close="true" :mask-closable="false"
|
||||
:footer="null" @cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="编码" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="字典编码" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="字典名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="字典显示名称" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="父路径" name="parent_id">
|
||||
<a-tree-select v-model:value="form.parent_id" :tree-data="dicData"
|
||||
:field-names="{ label: 'title', value: 'id', children: 'children' }" tree-default-expand-all
|
||||
show-search placeholder="请选择父路径" allow-clear tree-node-filter-prop="title" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增字典分类',
|
||||
edit: '编辑字典分类'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
name: '',
|
||||
parent_id: null
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入编码', trigger: 'blur' }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: '请输入字典名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 字典树数据
|
||||
const dicData = ref([])
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
loadDic()
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 加载字典列表
|
||||
const loadDic = async () => {
|
||||
try {
|
||||
const res = await systemApi.dictionary.category.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
dicData.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载字典列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res = {}
|
||||
form.parent_id = form.parent_id || 0
|
||||
|
||||
if (mode.value === 'add') {
|
||||
res = await systemApi.dictionary.addcate.post(form)
|
||||
} else {
|
||||
res = await systemApi.dictionary.editcate.post(form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
isSaveing.value = false
|
||||
console.error('表单验证失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.title = data.title
|
||||
form.name = data.name
|
||||
form.parent_id = data.parent_id
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 弹窗样式可根据需要添加
|
||||
</style>
|
||||
@@ -1,459 +0,0 @@
|
||||
<template>
|
||||
<div class="pages dic-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
<a-input v-model:value="dicFilterText" placeholder="搜索字典..." allow-clear @change="handleDicSearch">
|
||||
<template #prefix>
|
||||
<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree v-model:selectedKeys="selectedDicKeys" :tree-data="filteredDicList"
|
||||
:field-names="{ title: 'title', key: 'id', children: 'children' }" show-line @select="onDicSelect">
|
||||
<template #title="{ title, name }">
|
||||
<div class="custom-tree-node">
|
||||
<span class="label">{{ title }}</span>
|
||||
<span class="code">{{ name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #icon="{ dataRef }">
|
||||
<folder-outlined v-if="dataRef.children" />
|
||||
<file-outlined v-else />
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a-button type="primary" @click="addDic" block>
|
||||
<template #icon><plus-outlined /></template>
|
||||
字典分类
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-button type="primary" @click="addInfo">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增项
|
||||
</a-button>
|
||||
<a-button danger @click="batchDel" :disabled="!selectedRowKeys.length">
|
||||
<template #icon><delete-outlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @refresh="loadData" @paginationChange="handlePaginationChange"
|
||||
:row-selection="rowSelection">
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'default'">
|
||||
{{ record.status === 1 ? '是' : '否' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="tableEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定删除吗？" @confirm="tableDel(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 字典分类弹窗 -->
|
||||
<dic-dialog v-if="dialog.dic" ref="dicDialogRef" @success="handleDicSuccess" @closed="dialog.dic = false" />
|
||||
|
||||
<!-- 字典明细弹窗 -->
|
||||
<list-dialog v-if="dialog.list" ref="listDialogRef" @success="handleListSuccess" @closed="dialog.list = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import dicDialog from './dic.vue'
|
||||
import listDialog from './list.vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
defineOptions({
|
||||
name: 'systemDic'
|
||||
})
|
||||
|
||||
// 表格引用
|
||||
const tableRef = ref(null)
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
dic: false,
|
||||
list: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const dicDialogRef = ref(null)
|
||||
const listDialogRef = ref(null)
|
||||
|
||||
// 字典树数据
|
||||
const dicList = ref([])
|
||||
const filteredDicList = ref([])
|
||||
const selectedDicKeys = ref([])
|
||||
const dicFilterText = ref('')
|
||||
|
||||
// 选中的行
|
||||
const selectedRowKeys = ref([])
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (selectedKeys) => {
|
||||
selectedRowKeys.value = selectedKeys
|
||||
},
|
||||
}))
|
||||
|
||||
// 当前选中的字典
|
||||
const currentDic = ref(null)
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['20', '50', '100', '200']
|
||||
})
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: '名称', dataIndex: 'title', key: 'title', width: 200 },
|
||||
{ title: '键值', dataIndex: 'values', key: 'values', width: 150 },
|
||||
{ title: '是否有效', dataIndex: 'status', key: 'status', width: 100, slot: 'status' },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 100 },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 150, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
// 加载字典树
|
||||
const loadDicTree = async () => {
|
||||
try {
|
||||
const res = await systemApi.dictionary.category.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
dicList.value = res.data || []
|
||||
filteredDicList.value = res.data || []
|
||||
|
||||
// 获取第一个节点，设置选中 & 加载明细列表
|
||||
const firstNode = dicList.value[0]
|
||||
if (firstNode) {
|
||||
selectedDicKeys.value = [firstNode.id]
|
||||
currentDic.value = firstNode
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载字典树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 字典搜索
|
||||
const handleDicSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
dicFilterText.value = keyword
|
||||
if (!keyword) {
|
||||
filteredDicList.value = dicList.value
|
||||
return
|
||||
}
|
||||
|
||||
// 递归过滤字典树
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const targetText = (node.title || '') + (node.name || '')
|
||||
const isMatch = targetText.toLowerCase().includes(keyword.toLowerCase())
|
||||
const filteredChildren = node.children ? filterTree(node.children) : []
|
||||
|
||||
if (isMatch || filteredChildren.length > 0) {
|
||||
acc.push({
|
||||
...node,
|
||||
children: filteredChildren.length > 0 ? filteredChildren : undefined
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
|
||||
filteredDicList.value = filterTree(dicList.value)
|
||||
}
|
||||
|
||||
// 加载字典明细列表数据
|
||||
const loadData = async () => {
|
||||
if (!currentDic.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.current,
|
||||
limit: pagination.pageSize,
|
||||
group_id: currentDic.value.id
|
||||
}
|
||||
const res = await systemApi.dictionary.list.get(params)
|
||||
if (res.code === 1) {
|
||||
tableData.value = res.data?.data || []
|
||||
pagination.total = res.data?.total || 0
|
||||
} else {
|
||||
message.error(res.message || '加载数据失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载字典明细列表失败:', error)
|
||||
message.error('加载数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化处理
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
pagination.current = page
|
||||
pagination.pageSize = pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 字典选择事件
|
||||
const onDicSelect = (selectedKeys) => {
|
||||
if (selectedKeys && selectedKeys.length > 0) {
|
||||
const selectedId = selectedKeys[0]
|
||||
currentDic.value = findDicById(filteredDicList.value, selectedId)
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
|
||||
// 根据ID查找字典
|
||||
const findDicById = (nodes, id) => {
|
||||
for (const node of nodes) {
|
||||
if (node.id === id) return node
|
||||
if (node.children) {
|
||||
const found = findDicById(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 新增字典分类
|
||||
const addDic = () => {
|
||||
dialog.dic = true
|
||||
setTimeout(() => {
|
||||
dicDialogRef.value?.open('add')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑字典分类
|
||||
const dicEdit = (data) => {
|
||||
dialog.dic = true
|
||||
setTimeout(() => {
|
||||
dicDialogRef.value?.open('edit').setData(data)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除字典分类
|
||||
const dicDel = (node, data) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除 ${data.name} 项吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await systemApi.dictionary.delCate.post({ id: data.id })
|
||||
message.success('操作成功')
|
||||
loadDicTree()
|
||||
} catch (error) {
|
||||
console.error('删除字典分类失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 新增字典明细
|
||||
const addInfo = () => {
|
||||
if (!currentDic.value) {
|
||||
message.warning('请先选择字典分类')
|
||||
return
|
||||
}
|
||||
dialog.list = true
|
||||
setTimeout(() => {
|
||||
listDialogRef.value?.open('add').setData({ dic_type: currentDic.value.code })
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑字典明细
|
||||
const tableEdit = (record) => {
|
||||
dialog.list = true
|
||||
setTimeout(() => {
|
||||
listDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除字典明细
|
||||
const tableDel = async (record) => {
|
||||
try {
|
||||
const res = await systemApi.dictionary.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
loadData()
|
||||
selectedRowKeys.value = []
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除字典明细失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除字典明细
|
||||
const batchDel = () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning('请先选择要删除的数据')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认批量删除',
|
||||
content: `确定要删除选中的 ${selectedRowKeys.value.length} 项吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const promises = selectedRowKeys.value.map(id => systemApi.dictionary.delete.post({ id }))
|
||||
await Promise.all(promises)
|
||||
message.success('操作成功')
|
||||
selectedRowKeys.value = []
|
||||
loadData()
|
||||
} catch (error) {
|
||||
console.error('批量删除失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 字典分类成功回调
|
||||
const handleDicSuccess = (data, mode) => {
|
||||
if (mode === 'add') {
|
||||
loadDicTree()
|
||||
} else if (mode === 'edit') {
|
||||
loadDicTree()
|
||||
}
|
||||
}
|
||||
|
||||
// 字典明细成功回调
|
||||
const handleListSuccess = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadDicTree()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dic-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.left-box {
|
||||
width: 300px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
|
||||
:deep(.ant-tree) {
|
||||
.ant-tree-treenode {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.code {
|
||||
display: none;
|
||||
}
|
||||
.do {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 24px;
|
||||
height: 100%;
|
||||
|
||||
.code {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.do {
|
||||
display: none;
|
||||
gap: 8px;
|
||||
|
||||
.ant-btn-link {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="450" :destroy-on-close="true" :mask-closable="false"
|
||||
:footer="null" @cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="所属字典" name="group_id">
|
||||
<a-tree-select v-model:value="form.group_id" :tree-data="dicData"
|
||||
:field-names="{ label: 'title', value: 'id', children: 'children' }" tree-default-expand-all
|
||||
show-search placeholder="请选择所属字典" allow-clear tree-node-filter-prop="title" />
|
||||
</a-form-item>
|
||||
<a-form-item label="项名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="请输入项名称" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="键值" name="values">
|
||||
<a-input v-model:value="form.values" placeholder="请输入键值" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="0" style="width: 100%" placeholder="请输入排序" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否有效" name="status">
|
||||
<a-radio-group v-model:value="form.status">
|
||||
<a-radio :value="1">是</a-radio>
|
||||
<a-radio :value="0">否</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import systemApi from '@/api/system'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增项',
|
||||
edit: '编辑项'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
group_id: '',
|
||||
title: '',
|
||||
values: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
group_id: [
|
||||
{ required: true, message: '请选择所属字典', trigger: 'change' }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: '请输入项名称', trigger: 'blur' }
|
||||
],
|
||||
values: [
|
||||
{ required: true, message: '请输入键值', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 字典树数据
|
||||
const dicData = ref([])
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
loadDic()
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 加载字典列表
|
||||
const loadDic = async () => {
|
||||
try {
|
||||
const res = await systemApi.dictionary.category.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
dicData.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载字典列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res
|
||||
|
||||
if (mode.value === 'add') {
|
||||
res = await systemApi.dictionary.add.post(form)
|
||||
} else {
|
||||
res = await systemApi.dictionary.edit.post(form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
isSaveing.value = false
|
||||
console.error('表单验证失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
if (data.dic_type) {
|
||||
form.dic_type = data.dic_type
|
||||
}
|
||||
form.id = data.id
|
||||
form.title = data.title
|
||||
form.values = data.values
|
||||
form.sort = data.sort || 0
|
||||
form.status = data.status ?? 1
|
||||
form.group_id = data.group_id
|
||||
return
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 弹窗样式可根据需要添加
|
||||
</style>
|
||||
@@ -1,295 +0,0 @@
|
||||
<template>
|
||||
<div class="pages log-page">
|
||||
<div class="left-box">
|
||||
<a-card>
|
||||
<a-tree v-model:selectedKeys="selectedKeys" show-line switcher-icon default-expand-all
|
||||
:tree-data="treeData" @select="onSelect">
|
||||
<template #icon="{ dataRef }">
|
||||
<folder-outlined v-if="dataRef.children" />
|
||||
<file-outlined v-else />
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.title" placeholder="请输入请求名称" allow-clear
|
||||
style="width: 160px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-range-picker v-model:value="searchForm.created_at" :placeholder="['开始时间', '结束时间']"
|
||||
show-time format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 340px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button danger @click="handleClearLog" :disabled="!selectedRowKeys.length">
|
||||
<template #icon><delete-outlined /></template>
|
||||
清空日志
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @refresh="refreshTable" @paginationChange="handlePaginationChange"
|
||||
:row-selection="rowSelection">
|
||||
<template #method="{ record }">
|
||||
<a-tag :color="getMethodColor(record.method)">{{ record.method }}</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-popconfirm title="确定删除该日志吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志详情弹窗 -->
|
||||
<log-info-dialog v-if="dialog.info" ref="infoDialogRef" @closed="dialog.info = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { SearchOutlined, RedoOutlined, DeleteOutlined, FolderOutlined, FileOutlined } from '@ant-design/icons-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import logInfoDialog from './info.vue'
|
||||
import systemApi from '@/api/system'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'systemLog'
|
||||
})
|
||||
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
selectedRowKeys,
|
||||
rowSelection,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePaginationChange,
|
||||
refreshTable
|
||||
} = useTable({
|
||||
api: systemApi.log.list.get,
|
||||
searchForm: {
|
||||
title: '',
|
||||
method: null,
|
||||
status: null,
|
||||
created_at: []
|
||||
},
|
||||
columns: [],
|
||||
needPagination: true,
|
||||
needSelection: true,
|
||||
immediateLoad: false
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
info: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const infoDialogRef = ref(null)
|
||||
|
||||
|
||||
// 树数据
|
||||
const treeData = ref([
|
||||
{
|
||||
title: '请求分类',
|
||||
key: 'request',
|
||||
children: [
|
||||
{ title: 'GET请求', key: 'get' },
|
||||
{ title: 'POST请求', key: 'post' },
|
||||
{ title: 'PUT请求', key: 'put' },
|
||||
{ title: 'DELETE请求', key: 'delete' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '响应状态',
|
||||
key: 'response',
|
||||
children: [
|
||||
{ title: '成功 (2xx)', key: 'success' },
|
||||
{ title: '重定向 (3xx)', key: 'redirect' },
|
||||
{ title: '客户端错误 (4xx)', key: 'client_error' },
|
||||
{ title: '服务器错误 (5xx)', key: 'server_error' }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// 选中的树节点
|
||||
const selectedKeys = ref([])
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 获取请求方法颜色
|
||||
const getMethodColor = (method) => {
|
||||
const colorMap = {
|
||||
'GET': 'green',
|
||||
'POST': 'blue',
|
||||
'PUT': 'orange',
|
||||
'DELETE': 'red'
|
||||
}
|
||||
return colorMap[method] || 'default'
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '请求名称', dataIndex: 'title', key: 'title', width: 200 },
|
||||
{ title: '请求类型', dataIndex: 'method', key: 'method', width: 100, slot: 'method' },
|
||||
{ title: '请求地址', dataIndex: 'url', key: 'url', ellipsis: true },
|
||||
{ title: '状态码', dataIndex: 'status', key: 'status', width: 100 },
|
||||
{ title: '客户端IP', dataIndex: 'client_ip', key: 'client_ip', width: 140 },
|
||||
{ title: '请求时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 150, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
|
||||
// 树节点选择事件
|
||||
const onSelect = (selectedKeys, info) => {
|
||||
const key = selectedKeys[0]
|
||||
if (key) {
|
||||
// 根据选中的树节点过滤数据
|
||||
if (['get', 'post', 'put', 'delete'].includes(key)) {
|
||||
searchForm.method = key.toUpperCase()
|
||||
} else if (['success', 'redirect', 'client_error', 'server_error'].includes(key)) {
|
||||
const statusMap = {
|
||||
'success': '2xx',
|
||||
'redirect': '3xx',
|
||||
'client_error': '4xx',
|
||||
'server_error': '5xx'
|
||||
}
|
||||
searchForm.status = statusMap[key]
|
||||
} else {
|
||||
searchForm.method = null
|
||||
searchForm.status = null
|
||||
}
|
||||
pagination.current = 1
|
||||
refreshTable()
|
||||
}
|
||||
}
|
||||
|
||||
// 查看日志详情
|
||||
const handleView = (record) => {
|
||||
dialog.info = true
|
||||
setTimeout(() => {
|
||||
infoDialogRef.value?.open().setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除日志
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await systemApi.log.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
selectedRowKeys.value = []
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除日志失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 清空日志
|
||||
const handleClearLog = () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning('请先选择要删除的日志')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认清空日志',
|
||||
content: `确定要删除选中的 ${selectedRowKeys.value.length} 条日志吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
// 批量删除
|
||||
const promises = selectedRowKeys.value.map(id => systemApi.log.delete.post({ id }))
|
||||
await Promise.all(promises)
|
||||
message.success('清空成功')
|
||||
selectedRowKeys.value = []
|
||||
refreshTable()
|
||||
} catch (error) {
|
||||
console.error('清空日志失败:', error)
|
||||
message.error('清空失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
refreshTable()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.log-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.left-box {
|
||||
width: 260px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.ant-card) {
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
.ant-card-body {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<a-modal :open="visible" :title="'日志详情'" :width="700" :footer="null" @cancel="handleCancel">
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label="操作人">{{ data.user?.nickname || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="客户端IP">{{ data.client_ip || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="请求接口">{{ data.url || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="请求方法">
|
||||
<a-tag :color="getMethodColor(data.method)">{{ data.method }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="状态代码">
|
||||
<a-tag :color="getStatusColor(data.status)">{{ data.status }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="日志名">{{ data.title || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="日志时间">{{ data.created_at || '-' }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<a-collapse v-model:activeKey="activeNames" style="margin-top: 20px" ghost>
|
||||
<a-collapse-panel key="1" header="请求参数">
|
||||
<div class="code">{{ data.data || '无' }}</div>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="浏览器信息">
|
||||
<div class="code">{{ data.browser || '-' }}</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const emit = defineEmits(['closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const activeNames = ref(['1'])
|
||||
|
||||
const data = reactive({
|
||||
user: {},
|
||||
client_ip: '',
|
||||
url: '',
|
||||
method: '',
|
||||
status: '',
|
||||
title: '',
|
||||
created_at: '',
|
||||
data: '',
|
||||
browser: ''
|
||||
})
|
||||
|
||||
// 获取请求方法颜色
|
||||
const getMethodColor = (method) => {
|
||||
const colorMap = {
|
||||
'GET': 'green',
|
||||
'POST': 'blue',
|
||||
'PUT': 'orange',
|
||||
'DELETE': 'red'
|
||||
}
|
||||
return colorMap[method] || 'default'
|
||||
}
|
||||
|
||||
// 获取状态码颜色
|
||||
const getStatusColor = (status) => {
|
||||
if (!status) return 'default'
|
||||
if (status >= 200 && status < 300) return 'success'
|
||||
if (status >= 300 && status < 400) return 'warning'
|
||||
if (status >= 400 && status < 500) return 'error'
|
||||
if (status >= 500) return 'error'
|
||||
return 'default'
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = (logData) => {
|
||||
Object.assign(data, logData)
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.code {
|
||||
background: #2d2d2d;
|
||||
padding: 15px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "systemModules"
|
||||
})
|
||||
</script>
|
||||
@@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<a-modal :open="visible" :title="isEdit ? $t('common.editConfig') : $t('common.addConfig')" :width="600"
|
||||
:ok-text="$t('common.confirm')" :cancel-text="$t('common.cancel')" @ok="handleConfirm" @cancel="handleClose"
|
||||
:after-close="handleClose">
|
||||
<a-form ref="formRef" :model="formData" :label-col="{ span: 5 }">
|
||||
<a-form-item v-if="!isEdit" :name="['category']" :label="$t('common.configCategory')"
|
||||
:rules="[{ required: true, message: $t('common.pleaseSelect') + $t('common.configCategory') }]">
|
||||
<a-select v-model:value="formData.category" :placeholder="$t('common.pleaseSelect')">
|
||||
<a-select-option v-for="category in categories" :key="category.name" :value="category.name">
|
||||
{{ category.title }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="!isEdit" :name="['name']" :label="$t('common.configName')"
|
||||
:rules="[{ required: true, message: $t('common.pleaseEnter') + $t('common.configName') }]">
|
||||
<a-input v-model:value="formData.name" :placeholder="$t('common.pleaseEnter')" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :name="['title']" :label="$t('common.configTitle')"
|
||||
:rules="[{ required: true, message: $t('common.pleaseEnter') + $t('common.configTitle') }]">
|
||||
<a-input v-model:value="formData.title" :placeholder="$t('common.pleaseEnter')" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="!isEdit" :name="['type']" :label="$t('common.configType')"
|
||||
:rules="[{ required: true, message: $t('common.pleaseSelect') + $t('common.configType') }]">
|
||||
<a-select v-model:value="formData.type" :placeholder="$t('common.pleaseSelect')">
|
||||
<a-select-option value="string">文本</a-select-option>
|
||||
<a-select-option value="textarea">文本域</a-select-option>
|
||||
<a-select-option value="number">数字</a-select-option>
|
||||
<a-select-option value="switch">开关</a-select-option>
|
||||
<a-select-option value="select">下拉选择</a-select-option>
|
||||
<a-select-option value="radio">单选</a-select-option>
|
||||
<a-select-option value="multiselect">多选</a-select-option>
|
||||
<a-select-option value="datetime">日期时间</a-select-option>
|
||||
<a-select-option value="color">颜色</a-select-option>
|
||||
<a-select-option value="image">图片</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :name="['value']" :label="$t('common.configValue')">
|
||||
<a-input v-model:value="formData.value" :placeholder="$t('common.pleaseEnter')" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :name="['remark']" :label="$t('common.configTip')">
|
||||
<a-textarea v-model:value="formData.remark" :placeholder="$t('common.pleaseEnter')" :rows="3" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'ConfigModal',
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否为编辑模式
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 配置分类列表
|
||||
categories: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 编辑时的初始数据
|
||||
initialData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'confirm'])
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
category: '',
|
||||
name: '',
|
||||
title: '',
|
||||
type: 'string',
|
||||
value: '',
|
||||
remark: '',
|
||||
})
|
||||
|
||||
// 监听弹窗显示和初始数据变化
|
||||
watch(() => props.initialData, (newVal) => {
|
||||
if (props.isEdit && Object.keys(newVal).length > 0) {
|
||||
formData.category = newVal.category || ''
|
||||
formData.name = newVal.name || ''
|
||||
formData.title = newVal.title || ''
|
||||
formData.type = newVal.type || 'string'
|
||||
formData.value = newVal.value || ''
|
||||
formData.remark = newVal.remark || newVal.tip || ''
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// 监听弹窗关闭，重置表单
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
handleClose()
|
||||
}
|
||||
})
|
||||
|
||||
// 确认提交
|
||||
const handleConfirm = async () => {
|
||||
try {
|
||||
const values = await formRef.value.validate()
|
||||
emit('confirm', values)
|
||||
} catch {
|
||||
// 表单验证错误，不处理
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗并重置表单
|
||||
const handleClose = () => {
|
||||
formRef.value?.resetFields()
|
||||
formData.category = ''
|
||||
formData.name = ''
|
||||
formData.title = ''
|
||||
formData.type = 'string'
|
||||
formData.value = ''
|
||||
formData.remark = ''
|
||||
emit('update:visible', false)
|
||||
}
|
||||
</script>
|
||||
@@ -1,525 +0,0 @@
|
||||
<template>
|
||||
<div class="pages system-setting">
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="page-content">
|
||||
<a-tabs v-model:activeKey="activeTab" @change="handleTabChange" class="setting-tabs">
|
||||
<template #rightExtra>
|
||||
<a-button type="primary" @click="handleAddConfig">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
新增配置
|
||||
</a-button>
|
||||
</template>
|
||||
<a-tab-pane v-for="category in categories" :key="category.name" :tab="category.title">
|
||||
<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" class="setting-form">
|
||||
<a-form-item v-for="field in fields.filter(f => f.category === category.name)"
|
||||
:key="field.name" :label="field.title" :required="field.required">
|
||||
<div class="form-item-content">
|
||||
<div class="form-input-wrapper">
|
||||
<!-- 文本输入 -->
|
||||
<a-input v-if="field.type === 'text'" v-model:value="formData[field.name]"
|
||||
:placeholder="field.placeholder || '请输入'" allow-clear />
|
||||
<!-- 文本域 -->
|
||||
<a-textarea v-else-if="field.type === 'textarea'"
|
||||
v-model:value="formData[field.name]"
|
||||
:placeholder="field.placeholder || '请输入'" :rows="4"
|
||||
:maxlength="field.maxLength" :show-count="field.maxLength > 0"
|
||||
allow-clear />
|
||||
<!-- 数字输入 -->
|
||||
<a-input-number v-else-if="field.type === 'number'"
|
||||
v-model:value="formData[field.name]"
|
||||
:placeholder="field.placeholder || '请输入'" :min="field.min" :max="field.max"
|
||||
:precision="field.precision || 0" style="width: 100%" />
|
||||
<!-- 开关 -->
|
||||
<a-switch v-else-if="field.type === 'switch'"
|
||||
v-model:checked="formData[field.name]" :checked-children="启用"
|
||||
:un-checked-children="禁用" />
|
||||
<!-- 下拉选择 -->
|
||||
<a-select v-else-if="field.type === 'select'"
|
||||
v-model:value="formData[field.name]"
|
||||
:placeholder="field.placeholder || '请选择'" style="width: 100%" allow-clear>
|
||||
<a-select-option v-for="option in field.options" :key="option.value"
|
||||
:value="option.value">
|
||||
{{ option.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<!-- 多选 -->
|
||||
<a-select v-else-if="field.type === 'multiselect'"
|
||||
v-model:value="formData[field.name]"
|
||||
:placeholder="field.placeholder || '请选择'" mode="multiple"
|
||||
style="width: 100%" allow-clear>
|
||||
<a-select-option v-for="option in field.options" :key="option.value"
|
||||
:value="option.value">
|
||||
{{ option.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<!-- 日期时间 -->
|
||||
<a-date-picker v-else-if="field.type === 'datetime'"
|
||||
v-model:value="formData[field.name]"
|
||||
:placeholder="field.placeholder || '请选择'" style="width: 100%" show-time
|
||||
format="YYYY-MM-DD HH:mm:ss" allow-clear />
|
||||
<!-- 颜色选择器 -->
|
||||
<div v-else-if="field.type === 'color'" class="color-picker-wrapper">
|
||||
<div class="color-preview"
|
||||
:style="{ backgroundColor: formData[field.name] }"></div>
|
||||
<a-input v-model:value="formData[field.name]"
|
||||
placeholder="请输入颜色值（如：#ff0000）" allow-clear class="color-text" />
|
||||
</div>
|
||||
<!-- 图片上传 -->
|
||||
<div v-else-if="field.type === 'image'" class="image-uploader-wrapper">
|
||||
<sc-upload v-model="formData[field.name]" :max-count="1" :tip="field.tip"
|
||||
upload-text="上传图片" />
|
||||
</div>
|
||||
<!-- 默认文本输入 -->
|
||||
<a-input v-else v-model:value="formData[field.name]"
|
||||
:placeholder="field.placeholder || '请输入'" allow-clear />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<a-tooltip title="编辑配置项">
|
||||
<EditOutlined class="action-icon edit-icon"
|
||||
@click="handleEditField(field)" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="field.tip" class="field-tip">
|
||||
<InfoCircleOutlined class="tip-icon" />
|
||||
{{ field.tip }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 4, span: 16 }">
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<a-button type="primary" size="large" :loading="saving" @click="handleSave">
|
||||
<template #icon>
|
||||
<SaveOutlined />
|
||||
</template>
|
||||
保存配置
|
||||
</a-button>
|
||||
<a-button size="large" @click="handleReset">
|
||||
<template #icon>
|
||||
<RedoOutlined />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<a-empty v-if="fields.filter(f => f.category === category.name).length === 0"
|
||||
description="暂无配置项">
|
||||
<a-button type="primary" @click="handleAddConfig">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
添加配置
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 配置弹窗 -->
|
||||
<ConfigModal v-model:visible="modalVisible" :is-edit="isEditMode" :categories="categories" :initial-data="currentEditData" @confirm="handleModalConfirm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import scUpload from '@/components/scUpload/index.vue'
|
||||
import systemApi from '@/api/system'
|
||||
import ConfigModal from './components/ConfigModal.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'SystemSetting'
|
||||
})
|
||||
|
||||
const activeTab = ref('basic')
|
||||
const saving = ref(false)
|
||||
|
||||
// 配置分类
|
||||
const categories = ref([])
|
||||
|
||||
// 配置字段
|
||||
const fields = ref([])
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({})
|
||||
|
||||
// 弹窗相关
|
||||
const modalVisible = ref(false)
|
||||
const isEditMode = ref(false)
|
||||
const currentEditData = ref({})
|
||||
|
||||
// 获取配置字段
|
||||
const fetchFields = async () => {
|
||||
try {
|
||||
const res = await systemApi.setting.fields.get()
|
||||
if (res.code === 1) {
|
||||
const configData = res.data || []
|
||||
|
||||
// 根据 group 字段提取分类
|
||||
const groupMap = new Map()
|
||||
configData.forEach((item) => {
|
||||
if (item.group && !groupMap.has(item.group)) {
|
||||
const groupTitles = {
|
||||
base: '基础设置',
|
||||
upload: '上传设置',
|
||||
email: '邮件设置',
|
||||
sms: '短信设置',
|
||||
security: '安全设置'
|
||||
}
|
||||
groupMap.set(item.group, {
|
||||
name: item.group,
|
||||
title: groupTitles[item.group] || item.group
|
||||
})
|
||||
}
|
||||
})
|
||||
categories.value = Array.from(groupMap.values())
|
||||
|
||||
// 将配置项转换为前端需要的格式
|
||||
fields.value = configData.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
title: item.title || item.label,
|
||||
value: item.values,
|
||||
type: mapFieldType(item.type),
|
||||
category: item.group,
|
||||
placeholder: item.options?.placeholder || item.remark,
|
||||
tip: item.remark,
|
||||
required: item.required || false,
|
||||
options: mapFieldOptions(item.type, item.options?.options || []),
|
||||
sort: item.sort,
|
||||
min: item.options?.min,
|
||||
max: item.options?.max,
|
||||
precision: item.options?.precision,
|
||||
maxLength: item.options?.maxLength
|
||||
}))
|
||||
|
||||
// 初始化表单数据
|
||||
fields.value.forEach((field) => {
|
||||
if (field.type === 'number') {
|
||||
formData[field.name] = field.value ? Number(field.value) : 0
|
||||
} else if (field.type === 'switch') {
|
||||
formData[field.name] = field.value === '1' || field.value === true
|
||||
} else if (field.type === 'multiselect') {
|
||||
formData[field.name] = field.value ? (Array.isArray(field.value) ? field.value : field.value.split(',')) : []
|
||||
} else {
|
||||
formData[field.name] = field.value || ''
|
||||
}
|
||||
})
|
||||
|
||||
// 设置第一个 tab 为默认激活
|
||||
if (categories.value.length > 0) {
|
||||
activeTab.value = categories.value[0].name
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取配置字段失败')
|
||||
console.error('获取配置字段失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 映射字段类型
|
||||
const mapFieldType = (backendType) => {
|
||||
const typeMap = {
|
||||
string: 'text',
|
||||
text: 'text',
|
||||
textarea: 'textarea',
|
||||
number: 'number',
|
||||
boolean: 'switch',
|
||||
switch: 'switch',
|
||||
select: 'select',
|
||||
radio: 'select',
|
||||
multiselect: 'multiselect',
|
||||
checkbox: 'multiselect',
|
||||
datetime: 'datetime',
|
||||
date: 'datetime',
|
||||
color: 'color',
|
||||
image: 'image',
|
||||
file: 'file'
|
||||
}
|
||||
return typeMap[backendType] || 'text'
|
||||
}
|
||||
|
||||
// 映射字段选项
|
||||
const mapFieldOptions = (type, options) => {
|
||||
if (options && options.length > 0) {
|
||||
return options.map((opt) => ({
|
||||
label: opt.label || opt.name || opt,
|
||||
value: opt.value || opt.key || opt
|
||||
}))
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
// 切换 Tab
|
||||
const handleTabChange = (key) => {
|
||||
activeTab.value = key
|
||||
}
|
||||
|
||||
// 添加配置
|
||||
const handleAddConfig = () => {
|
||||
isEditMode.value = false
|
||||
currentEditData.value = {
|
||||
category: activeTab.value,
|
||||
name: '',
|
||||
title: '',
|
||||
type: 'text',
|
||||
value: '',
|
||||
tip: '',
|
||||
required: false
|
||||
}
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑字段
|
||||
const handleEditField = (field) => {
|
||||
isEditMode.value = true
|
||||
currentEditData.value = {
|
||||
id: field.id,
|
||||
category: field.category,
|
||||
name: field.name,
|
||||
title: field.title,
|
||||
type: field.type,
|
||||
value: formData[field.name],
|
||||
tip: field.tip || '',
|
||||
remark: field.tip || '',
|
||||
placeholder: field.placeholder,
|
||||
options: field.options || [],
|
||||
required: field.required || false
|
||||
}
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
// 弹窗确认处理
|
||||
const handleModalConfirm = async (values) => {
|
||||
try {
|
||||
let res
|
||||
if (isEditMode.value) {
|
||||
// 编辑模式
|
||||
res = await systemApi.setting.edit.post({
|
||||
id: currentEditData.value.id,
|
||||
...values,
|
||||
name: currentEditData.value.name
|
||||
})
|
||||
if (res.code === 1) {
|
||||
message.success('编辑成功')
|
||||
modalVisible.value = false
|
||||
|
||||
// 更新表单数据
|
||||
formData[currentEditData.value.name] = values.value
|
||||
|
||||
// 更新字段信息
|
||||
const fieldIndex = fields.value.findIndex((f) => f.name === currentEditData.value.name)
|
||||
if (fieldIndex > -1) {
|
||||
fields.value[fieldIndex].title = values.title
|
||||
fields.value[fieldIndex].value = values.value
|
||||
fields.value[fieldIndex].tip = values.tip || values.remark
|
||||
fields.value[fieldIndex].placeholder = values.placeholder
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 添加模式
|
||||
res = await systemApi.setting.add.post(values)
|
||||
if (res.code === 1) {
|
||||
message.success('添加成功')
|
||||
modalVisible.value = false
|
||||
// 重新获取配置字段
|
||||
await fetchFields()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return // 表单验证错误
|
||||
}
|
||||
message.error(isEditMode.value ? '编辑失败' : '添加失败')
|
||||
console.error(isEditMode.value ? '编辑配置失败:' : '添加配置失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
saving.value = true
|
||||
// 处理多选和开关类型的值
|
||||
const saveData = {}
|
||||
Object.keys(formData).forEach((key) => {
|
||||
const field = fields.value.find((f) => f.name === key)
|
||||
if (field) {
|
||||
if (field.type === 'multiselect') {
|
||||
saveData[key] = Array.isArray(formData[key]) ? formData[key].join(',') : formData[key]
|
||||
} else if (field.type === 'switch') {
|
||||
saveData[key] = formData[key] ? '1' : '0'
|
||||
} else {
|
||||
saveData[key] = formData[key]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const res = await systemApi.setting.save.post(saveData)
|
||||
if (res.code === 1) {
|
||||
message.success('保存成功')
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('保存失败')
|
||||
console.error('保存配置失败:', error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置配置
|
||||
const handleReset = () => {
|
||||
fields.value.forEach((field) => {
|
||||
if (field.type === 'number') {
|
||||
formData[field.name] = field.value ? Number(field.value) : 0
|
||||
} else if (field.type === 'switch') {
|
||||
formData[field.name] = field.value === '1' || field.value === true
|
||||
} else if (field.type === 'multiselect') {
|
||||
formData[field.name] = field.value ? (Array.isArray(field.value) ? field.value : field.value.split(',')) : []
|
||||
} else {
|
||||
formData[field.name] = field.value || ''
|
||||
}
|
||||
})
|
||||
message.info('已重置')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchFields()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-setting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 16px;
|
||||
|
||||
.setting-tabs {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
:deep(.ant-tabs-tab-btn) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-content) {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tabpane) {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-form {
|
||||
.form-item-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
.form-input-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 4px;
|
||||
|
||||
.action-icon {
|
||||
font-size: 16px;
|
||||
color: #8c8c8c;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-tip {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
line-height: 1.5;
|
||||
|
||||
.tip-icon {
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image-uploader-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-picker-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.color-preview {
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<scForm :form-items="formItems" :initial-values="initialValues" :loading="loading" @finish="handleFinish"
|
||||
@reset="handleReset" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import scForm from '@/components/scForm/index.vue'
|
||||
import api from '@/api/auth'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
|
||||
const props = defineProps({
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update'])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const loading = ref(false)
|
||||
|
||||
// 表单初始值
|
||||
const initialValues = computed(() => ({
|
||||
username: props.userInfo.username || '',
|
||||
nickname: props.userInfo.nickname || '',
|
||||
mobile: props.userInfo.mobile || '',
|
||||
email: props.userInfo.email || '',
|
||||
gender: props.userInfo.gender || 0,
|
||||
birthday: props.userInfo.birthday || null,
|
||||
bio: props.userInfo.bio || '',
|
||||
}))
|
||||
|
||||
// 表单项配置
|
||||
const formItems = [
|
||||
{ field: 'username', label: '用户名', type: 'input' },
|
||||
{
|
||||
field: 'nickname', label: '昵称', type: 'input', required: true,
|
||||
rules: [
|
||||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '昵称长度在 2 到 20 个字符', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
field: 'phone', label: '手机号', type: 'input',
|
||||
rules: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
field: 'email', label: '邮箱', type: 'input',
|
||||
rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
field: 'gender', label: '性别', type: 'radio',
|
||||
options: [
|
||||
{ label: '男', value: 1 },
|
||||
{ label: '女', value: 2 },
|
||||
{ label: '保密', value: 0 },
|
||||
],
|
||||
},
|
||||
{ field: 'remark', label: '个人简介', type: 'textarea', rows: 4, maxLength: 200, showCount: true, },
|
||||
]
|
||||
|
||||
// 表单提交
|
||||
const handleFinish = async (values) => {
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
// 调用更新当前用户信息接口
|
||||
let res = await api.users.edit.post({
|
||||
username: values.username,
|
||||
nickname: values.nickname,
|
||||
mobile: values.mobile,
|
||||
email: values.email,
|
||||
gender: values.gender,
|
||||
remark: values.remark,
|
||||
})
|
||||
|
||||
if (!res || res.code !== 1) {
|
||||
throw new Error(res.message || '保存失败，请重试')
|
||||
}
|
||||
// 重新获取用户信息
|
||||
const response = await api.user.get()
|
||||
if (response && response.data) {
|
||||
userStore.setUserInfo(response.data)
|
||||
}
|
||||
|
||||
// 通知父组件更新
|
||||
emit('update', values)
|
||||
message.success('保存成功')
|
||||
} catch (error) {
|
||||
message.error(error.message || '保存失败，请重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const handleReset = () => {
|
||||
message.info('已重置')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<scForm :form-items="formItems" :initial-values="initialValues" :loading="loading" submit-text="修改密码"
|
||||
@finish="handleFinish" @reset="handleReset" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import scForm from '@/components/scForm/index.vue'
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
// 表单初始值
|
||||
const initialValues = {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
}
|
||||
|
||||
// 表单项配置
|
||||
const formItems = [
|
||||
{
|
||||
field: 'oldPassword',
|
||||
label: '原密码',
|
||||
type: 'password',
|
||||
required: true,
|
||||
rules: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
field: 'newPassword',
|
||||
label: '新密码',
|
||||
type: 'password',
|
||||
required: true,
|
||||
rules: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
field: 'confirmPassword',
|
||||
label: '确认密码',
|
||||
type: 'password',
|
||||
required: true,
|
||||
rules: [
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (value !== initialValues.newPassword) {
|
||||
return Promise.reject('两次输入的密码不一致')
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// 表单提交
|
||||
const handleFinish = (values) => {
|
||||
loading.value = true
|
||||
// 模拟接口请求
|
||||
setTimeout(() => {
|
||||
message.success('密码修改成功，请重新登录')
|
||||
emit('success')
|
||||
handleReset()
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const handleReset = () => {
|
||||
initialValues.oldPassword = ''
|
||||
initialValues.newPassword = ''
|
||||
initialValues.confirmPassword = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div class="profile-info">
|
||||
<div class="avatar-wrapper">
|
||||
<a-avatar :size="100" :src="userInfo.avatar" @click="handleAvatarClick">
|
||||
{{ userInfo.nickname?.charAt(0) }}
|
||||
</a-avatar>
|
||||
</div>
|
||||
<div class="user-name">{{ userInfo.nickname || userInfo.username }}</div>
|
||||
<a-tag :color="userInfo.status === 1 ? 'green' : 'red'">
|
||||
{{ userInfo.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['avatar-click'])
|
||||
|
||||
const handleAvatarClick = () => {
|
||||
emit('avatar-click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.profile-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
color: #fff;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
.ant-avatar {
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
margin: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<a-list :data-source="securityList" item-layout="horizontal">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
{{ item.title }}
|
||||
</template>
|
||||
<template #description>
|
||||
{{ item.description }}
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<template #actions>
|
||||
<a-button type="primary" size="small" @click="handleAction(item.action)">
|
||||
{{ item.buttonText }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
const emit = defineEmits(['change-password'])
|
||||
|
||||
const securityList = ref([
|
||||
{
|
||||
title: '登录密码',
|
||||
description: '用于登录系统的密码，建议定期更换',
|
||||
buttonText: '修改',
|
||||
action: 'password',
|
||||
},
|
||||
{
|
||||
title: '手机验证',
|
||||
description: '用于接收重要通知和安全验证',
|
||||
buttonText: '已绑定',
|
||||
action: 'phone',
|
||||
},
|
||||
{
|
||||
title: '邮箱验证',
|
||||
description: '用于接收重要通知和账号找回',
|
||||
buttonText: '已绑定',
|
||||
action: 'email',
|
||||
},
|
||||
{
|
||||
title: '登录设备',
|
||||
description: '查看和管理已登录的设备',
|
||||
buttonText: '查看',
|
||||
action: 'device',
|
||||
},
|
||||
])
|
||||
|
||||
const handleAction = (action) => {
|
||||
switch (action) {
|
||||
case 'password':
|
||||
emit('change-password')
|
||||
break
|
||||
case 'phone':
|
||||
message.info('手机绑定功能开发中')
|
||||
break
|
||||
case 'email':
|
||||
message.info('邮箱绑定功能开发中')
|
||||
break
|
||||
case 'device':
|
||||
message.info('登录设备管理功能开发中')
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.ant-list-item) {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,209 +0,0 @@
|
||||
<template>
|
||||
<div class="ucenter">
|
||||
<a-card>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<ProfileInfo :user-info="userInfo" @avatar-click="showAvatarModal = true" />
|
||||
<a-menu v-model:selectedKeys="selectedKeys" mode="inline" class="menu">
|
||||
<a-menu-item key="basic">
|
||||
<UserOutlined />
|
||||
基本信息
|
||||
</a-menu-item>
|
||||
<a-menu-item key="password">
|
||||
<LockOutlined />
|
||||
修改密码
|
||||
</a-menu-item>
|
||||
<a-menu-item key="security">
|
||||
<SafetyOutlined />
|
||||
账号安全
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div class="content-wrapper">
|
||||
<BasicInfo v-if="selectedKeys[0] === 'basic'" :user-info="userInfo"
|
||||
@update="handleUpdateUserInfo" />
|
||||
<Password v-else-if="selectedKeys[0] === 'password'" @success="handlePasswordSuccess" />
|
||||
<Security v-else-if="selectedKeys[0] === 'security'" @change-password="handleChangePassword" />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<!-- 头像上传弹窗 -->
|
||||
<a-modal v-model:open="showAvatarModal" title="更换头像" :confirm-loading="loading" @ok="handleAvatarUpload"
|
||||
@cancel="showAvatarModal = false">
|
||||
<div class="avatar-upload">
|
||||
<a-upload list-type="picture-card" :max-count="1" :before-upload="beforeUpload"
|
||||
@change="handleAvatarChange" :file-list="avatarFileList">
|
||||
<div v-if="avatarFileList.length === 0">
|
||||
<PlusOutlined />
|
||||
<div class="ant-upload-text">上传头像</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div class="upload-tip">
|
||||
<a-typography-text type="secondary"> 支持 JPG、PNG 格式，文件大小不超过 2MB </a-typography-text>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { PlusOutlined, UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue'
|
||||
import dayjs from 'dayjs'
|
||||
import ProfileInfo from './components/ProfileInfo.vue'
|
||||
import BasicInfo from './components/BasicInfo.vue'
|
||||
import Password from './components/Password.vue'
|
||||
import Security from './components/Security.vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import api from '@/api/auth'
|
||||
|
||||
defineOptions({
|
||||
name: 'UserCenter',
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({})
|
||||
|
||||
// 选中的菜单
|
||||
const selectedKeys = ref(['basic'])
|
||||
|
||||
// 头像上传
|
||||
const showAvatarModal = ref(false)
|
||||
const avatarFileList = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 初始化用户信息
|
||||
const initUserInfo = async () => {
|
||||
try {
|
||||
// 从 store 获取用户信息
|
||||
const storeUserInfo = userStore.userInfo
|
||||
if (storeUserInfo) {
|
||||
userInfo.value = storeUserInfo
|
||||
} else {
|
||||
// 如果 store 中没有用户信息，则从接口获取
|
||||
const response = await api.user.get()
|
||||
if (response && response.data) {
|
||||
userStore.setUserInfo(response.data)
|
||||
userInfo.value = response.data
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
message.error(err.message || '获取用户信息失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 更新用户信息
|
||||
const handleUpdateUserInfo = (data) => {
|
||||
// 更新本地用户信息
|
||||
Object.assign(userInfo.value, data)
|
||||
|
||||
// 如果 birthday 有值，转换为 dayjs 对象
|
||||
if (data.birthday && typeof data.birthday === 'string') {
|
||||
userInfo.value.birthday = dayjs(data.birthday)
|
||||
}
|
||||
}
|
||||
|
||||
// 密码修改成功
|
||||
const handlePasswordSuccess = () => {
|
||||
// 密码修改成功后的处理
|
||||
}
|
||||
|
||||
// 切换到密码修改页面
|
||||
const handleChangePassword = () => {
|
||||
selectedKeys.value = ['password']
|
||||
}
|
||||
|
||||
// 头像上传前校验
|
||||
const beforeUpload = (file) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
||||
if (!isJpgOrPng) {
|
||||
message.error('只能上传 JPG/PNG 格式的文件!')
|
||||
return false
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isLt2M) {
|
||||
message.error('图片大小不能超过 2MB!')
|
||||
return false
|
||||
}
|
||||
return false // 阻止自动上传
|
||||
}
|
||||
|
||||
// 头像文件变化
|
||||
const handleAvatarChange = ({ fileList }) => {
|
||||
avatarFileList.value = fileList
|
||||
}
|
||||
|
||||
// 上传头像
|
||||
const handleAvatarUpload = () => {
|
||||
if (avatarFileList.value.length === 0) {
|
||||
message.warning('请先选择头像')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
// 模拟上传
|
||||
setTimeout(() => {
|
||||
const file = avatarFileList.value[0]
|
||||
userInfo.value.avatar = URL.createObjectURL(file.originFileObj)
|
||||
message.success('头像更新成功')
|
||||
showAvatarModal.value = false
|
||||
avatarFileList.value = []
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initUserInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ucenter {
|
||||
.content-wrapper {
|
||||
padding: 24px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
.ant-menu-item {
|
||||
border-radius: 6px;
|
||||
margin: 4px 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&.ant-menu-item-selected {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
|
||||
&::after {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
.upload-tip {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-card-head-title) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,5 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import i18n from '@/i18n'
|
||||
import { customStorage } from '../persist'
|
||||
|
||||
export const useI18nStore = defineStore(
|
||||
'i18n',
|
||||
@@ -29,7 +28,6 @@ export const useI18nStore = defineStore(
|
||||
|
||||
persist: {
|
||||
key: 'i18n-store',
|
||||
storage: customStorage,
|
||||
pick: ['currentLocale']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { customStorage } from '../persist'
|
||||
|
||||
export const useLayoutStore = defineStore(
|
||||
'layout',
|
||||
@@ -123,7 +122,6 @@ export const useLayoutStore = defineStore(
|
||||
{
|
||||
persist: {
|
||||
key: 'layout-store',
|
||||
storage: customStorage,
|
||||
pick: ['layoutMode', 'sidebarCollapsed', 'themeColor', 'showTags', 'showBreadcrumb', 'viewTags'],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { resetRouter } from '../../router'
|
||||
import { customStorage } from '../persist'
|
||||
import userRoutes from '@/config/routes'
|
||||
|
||||
export const useUserStore = defineStore(
|
||||
@@ -111,7 +110,6 @@ export const useUserStore = defineStore(
|
||||
{
|
||||
persist: {
|
||||
key: 'user-store',
|
||||
storage: customStorage,
|
||||
pick: ['token', 'refreshToken', 'userInfo', 'menu']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
/*
|
||||
* @Descripttion: Pinia 持久化存储适配器 - 使用 tool.data 封装的 localStorage
|
||||
* @version: 1.0
|
||||
*/
|
||||
|
||||
import tool from '@/utils/tool'
|
||||
|
||||
/**
|
||||
* 自定义存储适配器
|
||||
* 使用 tool.data 的 set/get/remove 方法，支持加密和过期时间
|
||||
*/
|
||||
export const customStorage = {
|
||||
/**
|
||||
* 获取数据
|
||||
* @param {string} key - 存储键
|
||||
* @returns {any} - 存储的数据
|
||||
*/
|
||||
getItem: (key) => {
|
||||
return tool.data.get(key)
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置数据
|
||||
* @param {string} key - 存储键
|
||||
* @param {any} value - 要存储的值
|
||||
*/
|
||||
setItem: (key, value) => {
|
||||
tool.data.set(key, value)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除数据
|
||||
* @param {string} key - 存储键
|
||||
*/
|
||||
removeItem: (key) => {
|
||||
tool.data.remove(key)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认持久化配置
|
||||
*/
|
||||
export const defaultPersistConfig = {
|
||||
storage: customStorage,
|
||||
// 可以在这里添加其他全局配置，如过期时间等
|
||||
// serializer: {
|
||||
// serialize: (state) => JSON.stringify(state),
|
||||
// deserialize: (value) => JSON.parse(value)
|
||||
// }
|
||||
}
|
||||
Reference in New Issue
Block a user