red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/red-future---jilin-g/admin-ui into dev

Browse Source
This commit is contained in:
Cold
2025-12-22 17:52:12 +08:00
parent 8ff0b596c7 4fedcd16df
commit d67ab4b589
9 changed files with 1477 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@@ -2,4 +2,6 @@
ENV = 'development'
# 本地环境接口地址
VITE_API_URL = 'http://192.168.3.200:8808/'
# VITE_API_URL = 'http://192.168.3.200:8808/'
VITE_API_URL = 'http://192.168.3.11:8808/'

78
src/api/assets/asset/index.ts Normal file
View File

@@ -0,0 +1,78 @@
import { newService } from '/@/utils/request';
// 资产列表查询参数
export interface AssetQueryParams {
name?: string;
type?: string;
status?: number;
page?: number;
pageSize?: number;
}
// 获取资产列表
export function listAssets(params?: AssetQueryParams) {
return newService({
url: '/assets/asset/listAssets',
method: 'get',
params,
});
}
// 更新资产状态
export function updateAssetStatus(id: string, status: number) {
return newService({
url: '/assets/asset/updateAssetStatus',
method: 'put',
data: { id, status },
});
}
// 删除资产
export function deleteAsset(id: string) {
return newService({
url: '/assets/asset/deleteAsset',
method: 'delete',
params: { id },
});
}
// 获取资产详情
export function getAsset(id: string) {
return newService({
url: '/assets/asset/getAsset',
method: 'get',
params: { id },
});
}
// 获取分类选项
export function getAssetCategories() {
return newService({
url: '/assets/asset/getAsset',
method: 'get',
});
}
// 新增资产（支持文件上传）
export function createAsset(data: FormData) {
return newService({
url: '/assets/asset/createAsset',
method: 'post',
data,
headers: {
'Content-Type': 'multipart/form-data',
},
});
}
// 修改资产（支持文件上传）
export function updateAsset(data: FormData) {
return newService({
url: '/assets/asset/updateAsset',
method: 'put',
data,
headers: {
'Content-Type': 'multipart/form-data',
},
});
}

8
src/api/assets/category/index.ts
View File

@@ -20,6 +20,14 @@ export function getCategory(id: string) {
});
}
// 获取属性类型选项
export function getCategoryAttrTypeOptions() {
return newService({
url: '/assets/category/getCategoryAttrTypeOptions',
method: 'get',
});
}
// 新增分类
export function addCategory(data: object) {
return newService({

3
src/utils/request.ts
View File

@@ -22,7 +22,8 @@ const service: AxiosInstance = axios.create({
const newService: AxiosInstance = axios.create({
// baseURL: 'http://192.168.3.95:8000/',
// baseURL: 'http://192.168.3.49:8000/',
baseURL: 'http://192.168.3.200:8000/',
baseURL: 'http://192.168.3.11:8000/',
// baseURL: 'http://192.168.3.200:8000/',
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
paramsSerializer: {

853
src/views/assets/asset/component/editAsset.vue Normal file
View File

@@ -0,0 +1,853 @@
<template>
<div class="assets-edit-asset-container">
<el-dialog :title="isEdit ? '修改资产' : '新增资产'" v-model="isShowDialog" width="1000px" destroy-on-close>
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="100px" v-loading="formLoading">
<!-- 基础信息 -->
<el-divider content-position="left">基础信息</el-divider>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="资产名称" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入资产名称" clearable />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="资产类型" prop="type">
<el-select v-model="ruleForm.type" placeholder="请选择资产类型" class="w100" :disabled="isEdit">
<el-option label="实物" value="physical" />
<el-option label="虚拟" value="virtual" />
<el-option label="服务" value="service" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="第三方资产">
<el-switch v-model="ruleForm.sourceType" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="资产分类" prop="categoryId">
<el-cascader
v-model="ruleForm.categoryId"
:options="categoryOptions"
:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', children: 'children' }"
placeholder="请选择资产分类"
clearable
class="w100"
@change="onCategoryChange"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="上线时间">
<el-date-picker
v-model="ruleForm.onlineTime"
type="datetime"
placeholder="请选择上线时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
class="w100"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="下线时间">
<el-date-picker
v-model="ruleForm.offlineTime"
type="datetime"
placeholder="请选择下线时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
class="w100"
/>
</el-form-item>
</el-col>
</el-row>
<!-- 分类属性值选择 -->
<template v-if="categoryAttrs.length > 0">
<el-divider content-position="left">分类属性</el-divider>
<el-row :gutter="24">
<el-col :span="8" v-for="(attr, index) in categoryAttrs" :key="index">
<el-form-item :label="getAttrLabel(attr)">
<!-- 单选类型 -->
<el-select
v-if="attr.type === 'select'"
v-model="ruleForm.metadata[getAttrKey(attr)]"
:placeholder="'请选择' + getAttrLabel(attr)"
class="w100"
clearable
>
<el-option
v-for="opt in attr.options"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<!-- 多选类型 -->
<el-select
v-else-if="attr.type === 'multi_select'"
v-model="ruleForm.metadata[getAttrKey(attr)]"
:placeholder="'请选择' + getAttrLabel(attr)"
class="w100"
multiple
clearable
>
<el-option
v-for="opt in attr.options"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<!-- 文本类型 -->
<el-input
v-else-if="attr.type === 'text'"
v-model="ruleForm.metadata[getAttrKey(attr)]"
:placeholder="'请输入' + getAttrLabel(attr)"
/>
<!-- 数字类型 -->
<el-input-number
v-else-if="attr.type === 'number'"
v-model="ruleForm.metadata[getAttrKey(attr)]"
class="w100"
/>
<!-- 日期类型 -->
<el-date-picker
v-else-if="attr.type === 'date'"
v-model="ruleForm.metadata[getAttrKey(attr)]"
type="date"
:placeholder="'请选择' + getAttrLabel(attr)"
class="w100"
/>
<!-- 布尔类型 -->
<el-switch
v-else-if="attr.type === 'boolean'"
v-model="ruleForm.metadata[getAttrKey(attr)]"
/>
<!-- 图片类型 -->
<el-upload
v-else-if="attr.type === 'image'"
class="attr-image-uploader"
:show-file-list="false"
:auto-upload="false"
accept="image/*"
>
<el-button type="primary" size="small">上传图片</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 资产描述 -->
<el-divider content-position="left">资产描述</el-divider>
<el-form-item label="描述内容" label-width="100px">
<div class="editor-wrapper">
<Editor v-model="ruleForm.description" height="200px" placeholder="请输入资产描述" />
</div>
</el-form-item>
<!-- 图片上传 -->
<el-divider content-position="left">图片信息</el-divider>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="主图">
<el-upload
class="avatar-uploader"
:show-file-list="false"
:auto-upload="false"
:on-change="handleMainImageChange"
accept="image/*"
>
<img v-if="mainImagePreview" :src="mainImagePreview" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="图片列表">
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
accept="image/*"
multiple
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<!-- 实物资产配置 -->
<template v-if="ruleForm.type === 'physical'">
<el-divider content-position="left">实物资产配置</el-divider>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="无库存限制">
<el-switch v-model="ruleForm.physicalAssetConfig.unlimitedStock" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="配送方式">
<el-select v-model="ruleForm.physicalAssetConfig.shipping.deliveryMethod" placeholder="请选择配送方式" class="w100">
<el-option label="快递" value="express" />
<el-option label="自提" value="self_pickup" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" v-if="ruleForm.physicalAssetConfig.shipping.deliveryMethod === 'express'">
<el-form-item label="发货周期">
<el-input-number v-model="ruleForm.physicalAssetConfig.shipping.deliveryTime" :min="1" :max="720" class="w100" />
<span class="unit-text">小时</span>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 虚拟资产配置 -->
<template v-if="ruleForm.type === 'virtual'">
<el-divider content-position="left">虚拟资产配置</el-divider>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="HTTP方法">
<el-select v-model="ruleForm.virtualAssetConfig.method" placeholder="请选择HTTP方法" class="w100">
<el-option label="GET" value="GET" />
<el-option label="POST" value="POST" />
<el-option label="PUT" value="PUT" />
<el-option label="DELETE" value="DELETE" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="请求地址">
<el-input v-model="ruleForm.virtualAssetConfig.requestURL" placeholder="请输入请求地址" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="认证类型">
<el-select v-model="ruleForm.virtualAssetConfig.authType" placeholder="请选择认证类型" class="w100">
<el-option label="无认证" value="none" />
<el-option label="API Key" value="apikey" />
<el-option label="Bearer Token" value="bearer" />
<el-option label="OAuth" value="oauth" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" v-if="ruleForm.virtualAssetConfig.authType && ruleForm.virtualAssetConfig.authType !== 'none'">
<el-col :span="24">
<el-form-item label="认证配置">
<el-input
v-model="ruleForm.virtualAssetConfig.authConfig"
type="textarea"
:rows="4"
placeholder='请输入认证配置JSON，例如：{"api_key": "your_api_key"}'
/>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 服务资产配置 -->
<template v-if="ruleForm.type === 'service'">
<el-divider content-position="left">服务资产配置</el-divider>
<!-- 预订配置 -->
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="最小提前">
<el-input-number v-model="ruleForm.serviceAssetConfig.booking.minAdvance" :min="0" class="w100" />
<span class="unit-text">分钟</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="最小时长">
<el-input-number v-model="ruleForm.serviceAssetConfig.booking.minDuration" :min="0" class="w100" />
<span class="unit-text">分钟</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="取消提前">
<el-input-number v-model="ruleForm.serviceAssetConfig.booking.cancelWindow" :min="0" class="w100" />
<span class="unit-text">分钟</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="最大用户">
<el-input-number v-model="ruleForm.serviceAssetConfig.capacity.maxUsers" :min="0" class="w100" />
<span class="unit-text">0=无限</span>
</el-form-item>
</el-col>
</el-row>
<!-- 时间段配置 -->
<el-form-item label="时间段">
<div class="config-list-container">
<div v-for="(slot, index) in ruleForm.serviceAssetConfig.schedule.timeSlots" :key="index" class="config-list-item">
<el-select v-model="slot.dayOfWeek" placeholder="星期" style="width: 100px">
<el-option v-for="d in 7" :key="d" :label="'周' + ['一','二','三','四','五','六','日'][d-1]" :value="String(d)" />
</el-select>
<el-time-picker v-model="slot.startTime" format="HH:mm" value-format="HH:mm" placeholder="开始" style="width: 100px" />
<span class="separator">-</span>
<el-time-picker v-model="slot.endTime" format="HH:mm" value-format="HH:mm" placeholder="结束" style="width: 100px" />
<el-input-number v-model="slot.capacity" :min="1" placeholder="容量" style="width: 100px" controls-position="right" />
<el-button type="danger" :icon="Delete" circle size="small" @click="removeTimeSlot(index)" />
</div>
<el-button type="primary" :icon="Plus" size="small" @click="addTimeSlot">添加时间段</el-button>
</div>
</el-form-item>
<!-- 例外日期配置 -->
<el-form-item label="例外日期">
<div class="config-list-container">
<div v-for="(exc, index) in ruleForm.serviceAssetConfig.schedule.exceptions" :key="index" class="config-list-item">
<el-select v-model="exc.exceptionType" placeholder="类型" style="width: 100px" @change="onExceptionTypeChange(exc)">
<el-option label="指定日期" value="date" />
<el-option label="指定星期" value="dayOfWeek" />
</el-select>
<el-date-picker v-if="exc.exceptionType === 'date'" v-model="exc.date" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="日期" style="width: 130px" />
<el-select v-if="exc.exceptionType === 'dayOfWeek'" v-model="exc.dayOfWeek" placeholder="星期" style="width: 100px">
<el-option v-for="d in 7" :key="d" :label="'周' + ['一','二','三','四','五','六','日'][d-1]" :value="String(d)" />
</el-select>
<el-select v-model="exc.status" placeholder="状态" style="width: 90px">
<el-option label="可用" :value="1" />
<el-option label="不可用" :value="0" />
</el-select>
<el-input v-model="exc.reason" placeholder="原因" style="width: 120px" />
<el-button type="danger" :icon="Delete" circle size="small" @click="removeException(index)" />
</div>
<el-button type="primary" :icon="Plus" size="small" @click="addException">添加例外</el-button>
</div>
</el-form-item>
</template>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="submitLoading">{{ isEdit ? '修 改' : '添 加' }}</el-button>
</span>
</template>
</el-dialog>
<!-- 图片预览 -->
<el-dialog v-model="dialogVisible" title="图片预览">
<img :src="dialogImageUrl" style="width: 100%" />
</el-dialog>
</div>
</template>
<script lang="ts">
export default {
name: 'assetsEditAsset',
};
</script>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus, Delete } from '@element-plus/icons-vue';
import { getAsset, createAsset, updateAsset } from '/@/api/assets/asset';
import { getCategoryTree, getCategory } from '/@/api/assets/category';
import Editor from '/@/components/editor/index.vue';
import type { UploadFile, UploadUserFile } from 'element-plus';
// 类型定义
interface TimeSlot {
dayOfWeek: string;
startTime: string;
endTime: string;
capacity: number;
}
interface Exception {
exceptionType: 'date' | 'dayOfWeek';
date: string;
status: number;
reason: string;
dayOfWeek: string;
}
interface CategoryAttr {
name: string;
type: string;
options?: { label: string; value: string }[];
description?: string;
}
interface RuleForm {
id: string;
name: string;
sourceType: boolean;
type: string;
categoryId: string;
description: string;
onlineTime: string;
offlineTime: string;
physicalAssetConfig: {
unlimitedStock: boolean;
shipping: {
deliveryMethod: string;
deliveryTime: number;
};
};
virtualAssetConfig: {
method: string;
requestURL: string;
authType: string;
authConfig: string;
};
serviceAssetConfig: {
schedule: {
timeSlots: TimeSlot[];
exceptions: Exception[];
};
booking: {
minAdvance: number;
minDuration: number;
cancelWindow: number;
};
capacity: {
maxUsers: number;
};
};
metadata: Record<string, any>;
}
const emit = defineEmits(['getAssetList']);
const formRef = ref();
const isShowDialog = ref(false);
const isEdit = ref(false);
const submitLoading = ref(false);
const formLoading = ref(false);
const categoryOptions = ref<any[]>([]);
const categoryAttrs = ref<CategoryAttr[]>([]);
// 获取属性的key
const getAttrKey = (attr: CategoryAttr): string => {
return attr.name || attr.description || `attr_${categoryAttrs.value.indexOf(attr)}`;
};
// 获取属性的显示名称
const getAttrLabel = (attr: CategoryAttr): string => {
return attr.description || attr.name || '属性';
};
// 图片相关
const mainImageFile = ref<File | null>(null);
const mainImagePreview = ref('');
const imageFileList = ref<UploadUserFile[]>([]);
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
// 初始表单数据
const getInitialForm = (): RuleForm => ({
id: '',
name: '',
sourceType: false,
type: 'physical',
categoryId: '',
description: '',
onlineTime: '',
offlineTime: '',
physicalAssetConfig: {
unlimitedStock: false,
shipping: {
deliveryMethod: 'express',
deliveryTime: 24,
},
},
virtualAssetConfig: {
method: 'GET',
requestURL: '',
authType: 'none',
authConfig: '',
},
serviceAssetConfig: {
schedule: {
timeSlots: [],
exceptions: [],
},
booking: {
minAdvance: 60,
minDuration: 30,
cancelWindow: 30,
},
capacity: {
maxUsers: 0,
},
},
metadata: {},
});
const ruleForm = reactive<RuleForm>(getInitialForm());
const rules = {
name: [{ required: true, message: '资产名称不能为空', trigger: 'blur' }],
type: [{ required: true, message: '请选择资产类型', trigger: 'change' }],
categoryId: [{ required: true, message: '请选择资产分类', trigger: 'change' }],
};
// 主图上传处理
const handleMainImageChange = (file: UploadFile) => {
if (file.raw) {
mainImageFile.value = file.raw;
mainImagePreview.value = URL.createObjectURL(file.raw);
}
};
// 图片列表预览
const handlePictureCardPreview = (file: UploadFile) => {
dialogImageUrl.value = file.url || '';
dialogVisible.value = true;
};
// 图片列表移除
const handleRemove = (file: UploadFile) => {
const index = imageFileList.value.findIndex((f) => f.uid === file.uid);
if (index > -1) {
imageFileList.value.splice(index, 1);
}
};
// 时间段操作
const addTimeSlot = () => {
ruleForm.serviceAssetConfig.schedule.timeSlots.push({
dayOfWeek: '1',
startTime: '09:00',
endTime: '18:00',
capacity: 100,
});
};
const removeTimeSlot = (index: number) => {
ruleForm.serviceAssetConfig.schedule.timeSlots.splice(index, 1);
};
// 例外日期操作
const addException = () => {
ruleForm.serviceAssetConfig.schedule.exceptions.push({
exceptionType: 'date',
date: '',
status: 1,
reason: '',
dayOfWeek: '1',
});
};
const removeException = (index: number) => {
ruleForm.serviceAssetConfig.schedule.exceptions.splice(index, 1);
};
// 例外类型切换时清空对应字段
const onExceptionTypeChange = (exc: Exception) => {
if (exc.exceptionType === 'date') {
exc.dayOfWeek = '';
} else {
exc.date = '';
}
};
// 重置表单
const resetForm = () => {
const initial = getInitialForm();
Object.assign(ruleForm, initial);
mainImageFile.value = null;
mainImagePreview.value = '';
imageFileList.value = [];
categoryAttrs.value = [];
};
// 获取分类数据
const fetchCategories = () => {
getCategoryTree()
.then((res: any) => {
const tree = res.data?.tree ?? [];
categoryOptions.value = tree.length > 0 && tree[0].children ? tree[0].children : tree;
})
.catch(() => {
categoryOptions.value = [];
});
};
// 分类变更时获取分类属性
const onCategoryChange = (categoryId: string) => {
categoryAttrs.value = [];
ruleForm.metadata = {};
if (!categoryId) return;
getCategory(categoryId)
.then((res: any) => {
const data = res.data;
if (data?.attrs && Array.isArray(data.attrs)) {
categoryAttrs.value = data.attrs;
}
})
.catch(() => {
categoryAttrs.value = [];
});
};
// 打开弹窗
const openDialog = (row?: any, edit?: boolean) => {
resetForm();
isEdit.value = edit || false;
fetchCategories();
if (row && edit) {
// 修改模式：获取详情
formLoading.value = true;
getAsset(row.id)
.then((res: any) => {
const data = res.data;
ruleForm.id = data.id || '';
ruleForm.name = data.name || '';
ruleForm.sourceType = data.sourceType || false;
ruleForm.type = data.type || 'physical';
ruleForm.categoryId = data.categoryId || '';
ruleForm.description = data.description || '';
ruleForm.onlineTime = data.onlineTime || '';
ruleForm.offlineTime = data.offlineTime || '';
// 主图预览
if (data.imageUrl) {
mainImagePreview.value = data.imageUrl;
}
// 图片列表
if (data.images && Array.isArray(data.images)) {
imageFileList.value = data.images.map((url: string, index: number) => ({
name: `image-${index}`,
url: url,
}));
}
// 根据类型加载配置
if (data.type === 'physical' && data.physicalAssetConfig) {
Object.assign(ruleForm.physicalAssetConfig, data.physicalAssetConfig);
}
if (data.type === 'virtual' && data.virtualAssetConfig) {
Object.assign(ruleForm.virtualAssetConfig, data.virtualAssetConfig);
}
if (data.type === 'service' && data.serviceAssetConfig) {
Object.assign(ruleForm.serviceAssetConfig, data.serviceAssetConfig);
}
// 元数据
if (data.metadata) {
Object.assign(ruleForm.metadata, data.metadata);
}
// 加载分类属性
if (data.categoryId) {
getCategory(data.categoryId)
.then((catRes: any) => {
const catData = catRes.data;
if (catData?.attrs && Array.isArray(catData.attrs)) {
categoryAttrs.value = catData.attrs;
}
})
.catch(() => {
categoryAttrs.value = [];
});
}
})
.finally(() => {
formLoading.value = false;
});
}
isShowDialog.value = true;
};
// 关闭弹窗
const closeDialog = () => {
isShowDialog.value = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 构建FormData
const buildFormData = (): FormData => {
const formData = new FormData();
// 基础字段
if (isEdit.value && ruleForm.id) {
formData.append('id', ruleForm.id);
}
formData.append('name', ruleForm.name);
formData.append('sourceType', String(ruleForm.sourceType));
formData.append('type', ruleForm.type);
formData.append('categoryId', ruleForm.categoryId);
formData.append('description', ruleForm.description || '');
if (ruleForm.onlineTime) {
formData.append('onlineTime', ruleForm.onlineTime);
}
if (ruleForm.offlineTime) {
formData.append('offlineTime', ruleForm.offlineTime);
}
// 主图
if (mainImageFile.value) {
formData.append('imageUrl', mainImageFile.value);
}
// 图片列表
imageFileList.value.forEach((file) => {
if (file.raw) {
formData.append('images', file.raw);
}
});
// 根据类型添加配置
if (ruleForm.type === 'physical') {
formData.append('physicalAssetConfig', JSON.stringify(ruleForm.physicalAssetConfig));
} else if (ruleForm.type === 'virtual') {
formData.append('virtualAssetConfig', JSON.stringify(ruleForm.virtualAssetConfig));
} else if (ruleForm.type === 'service') {
formData.append('serviceAssetConfig', JSON.stringify(ruleForm.serviceAssetConfig));
}
// 元数据（分类属性值）
if (Object.keys(ruleForm.metadata).length > 0) {
formData.append('metadata', JSON.stringify(ruleForm.metadata));
}
return formData;
};
// 提交
const onSubmit = () => {
formRef.value.validate((valid: boolean) => {
if (valid) {
submitLoading.value = true;
const formData = buildFormData();
const request = isEdit.value ? updateAsset(formData) : createAsset(formData);
request
.then(() => {
ElMessage.success(isEdit.value ? '修改成功' : '添加成功');
closeDialog();
emit('getAssetList');
})
.finally(() => {
submitLoading.value = false;
});
}
});
};
// 暴露方法
defineExpose({
openDialog,
});
</script>
<style scoped lang="scss">
.w100 {
width: 100%;
}
.ml10 {
margin-left: 10px;
}
.mx5 {
margin: 0 5px;
}
.text-muted {
color: #909399;
font-size: 12px;
}
.avatar-uploader {
:deep(.el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
&:hover {
border-color: var(--el-color-primary);
}
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.avatar {
width: 100px;
height: 100px;
display: block;
object-fit: cover;
}
.config-list-container {
width: 100%;
.config-list-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
.separator {
color: #909399;
}
.el-button.is-circle {
:deep(.el-icon) {
margin-right: 0 !important;
}
}
}
}
.unit-text {
margin-left: 8px;
color: #909399;
font-size: 12px;
white-space: nowrap;
}
.editor-wrapper {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
:deep(.editor-toolbar) {
border-bottom: 1px solid #dcdfe6;
}
}
.attr-image-uploader {
:deep(.el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
}
}
</style>

251
src/views/assets/asset/index.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<div class="assets-asset-page">
<div class="assets-asset-container">
<el-card shadow="hover">
<div class="assets-asset-search mb15">
<el-form :inline="true" :model="tableData.param">
<el-form-item label="资产名称">
<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入资产名称" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="资产类型">
<el-select size="default" v-model="tableData.param.type" placeholder="请选择资产类型" clearable style="width: 150px">
<el-option label="实物" value="physical" />
<el-option label="虚拟" value="virtual" />
<el-option label="服务" value="service" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
<el-option label="启用" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" @click="getAssetList">
<el-icon><ele-Search /></el-icon>
查询
</el-button>
<el-button size="default" @click="onResetQuery">
<el-icon><ele-Refresh /></el-icon>
重置
</el-button>
<el-button size="default" type="success" @click="onOpenAdd">
<el-icon><ele-Plus /></el-icon>
新增
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="name" label="资产名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="type" label="资产类型" width="100" align="center">
<template #default="scope">
<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeLabel(scope.row.type) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text="启用"
inactive-text="禁用"
@change="onStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column prop="onlineTime" label="上线时间" width="170" show-overflow-tooltip />
<el-table-column prop="offlineTime" label="下线时间" width="170" show-overflow-tooltip />
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
<el-table-column label="操作" width="200" fixed="right" align="center">
<template #default="scope">
<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
<el-button size="small" text type="success" @click="onAddSku(scope.row)">添加SKU</el-button>
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="mt15" style="text-align: right">
<el-pagination
v-model:current-page="tableData.param.page"
v-model:page-size="tableData.param.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="tableData.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="onSizeChange"
@current-change="onCurrentChange"
/>
</div>
</el-card>
</div>
<EditAsset ref="editAssetRef" @getAssetList="getAssetList" />
</div>
</template>
<script lang="ts">
export default {
name: 'assetsAsset',
};
</script>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { listAssets, updateAssetStatus, deleteAsset } from '/@/api/assets/asset';
import EditAsset from './component/editAsset.vue';
interface AssetRow {
id: string;
name: string;
type: string;
categoryId: string;
description: string;
imageUrl: string;
images: string[];
onlineTime: string;
offlineTime: string;
status: number;
createdAt: string;
updatedAt: string;
}
const editAssetRef = ref();
const tableData = reactive({
data: [] as AssetRow[],
loading: false,
total: 0,
param: {
keyword: '',
type: '',
status: undefined as number | undefined,
page: 1,
pageSize: 10,
},
});
// 获取资产类型标签类型
const getTypeTagType = (type: string) => {
const typeMap: Record<string, string> = {
physical: 'primary',
virtual: 'success',
service: 'warning',
};
return typeMap[type] || 'info';
};
// 获取资产类型标签文本
const getTypeLabel = (type: string) => {
const labelMap: Record<string, string> = {
physical: '实物',
virtual: '虚拟',
service: '服务',
};
return labelMap[type] || type;
};
// 获取资产列表
const getAssetList = () => {
tableData.loading = true;
const params = {
...tableData.param,
status: tableData.param.status !== undefined ? tableData.param.status : undefined,
};
listAssets(params)
.then((res: any) => {
tableData.data = res.data?.list ?? [];
tableData.total = res.data?.total ?? 0;
})
.catch(() => {
tableData.data = [];
tableData.total = 0;
})
.finally(() => {
tableData.loading = false;
});
};
// 重置查询
const onResetQuery = () => {
tableData.param.keyword = '';
tableData.param.type = '';
tableData.param.status = undefined;
tableData.param.page = 1;
getAssetList();
};
// 状态切换
const onStatusChange = (row: AssetRow) => {
updateAssetStatus(row.id, row.status)
.then(() => {
ElMessage.success('状态更新成功');
})
.catch(() => {
// 失败时恢复原状态
row.status = row.status === 1 ? 0 : 1;
});
};
// 删除
const onRowDel = (row: AssetRow) => {
ElMessageBox.confirm(`此操作将永久删除资产："${row.name}"，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteAsset(row.id).then(() => {
ElMessage.success('删除成功');
getAssetList();
});
})
.catch(() => {});
};
// 打开新增弹窗
const onOpenAdd = () => {
editAssetRef.value.openDialog();
};
// 修改
const onEdit = (row: AssetRow) => {
editAssetRef.value.openDialog(row, true);
};
// 添加SKU（待定）
const onAddSku = (row: AssetRow) => {
ElMessage.info('添加SKU功能待开发');
console.log('添加SKU:', row);
};
// 分页大小改变
const onSizeChange = (size: number) => {
tableData.param.pageSize = size;
tableData.param.page = 1;
getAssetList();
};
// 当前页改变
const onCurrentChange = (page: number) => {
tableData.param.page = page;
getAssetList();
};
onMounted(() => {
getAssetList();
});
</script>
<style scoped lang="scss">
.assets-asset-container {
.assets-asset-search {
display: flex;
flex-wrap: wrap;
}
}
</style>

368
src/views/assets/category/component/editCategory.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="assets-edit-category-container">
<el-dialog :title="isEdit ? '修改分类' : '添加分类'" v-model="isShowDialog" width="700px">
<el-dialog :title="isEdit ? '修改分类' : '添加分类'" v-model="isShowDialog" width="940px">
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
<el-form-item label="上级分类">
<el-cascader
@@ -17,74 +17,85 @@
<el-input v-model="ruleForm.name" placeholder="请输入分类名称" clearable />
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
<el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w10" />
</el-form-item>
<!-- <el-form-item label="状态" v-if="!isEdit">
<el-switch
v-model="ruleForm.status"
active-value="1"
inactive-value="0"
inline-prompt
active-text="显示"
inactive-text="隐藏"
/>
</el-form-item> -->
<!-- 自定义属性 -->
<el-form-item label="自定义属性">
<div class="custom-attrs-container">
<div v-for="(attr, index) in ruleForm.attrs" :key="index" class="custom-attr-item">
<el-input
v-if="attr.type !== 'select' && attr.type !== 'multi_select'"
v-model="attr.name"
placeholder="属性名称"
style="width: 120px"
/>
<el-select v-model="attr.type" placeholder="属性类型" style="width: 120px" @change="onAttrTypeChange(attr)">
<el-option label="文本" value="text" />
<el-option label="数字" value="number" />
<el-option label="日期" value="date" />
<el-option label="单选" value="select" />
<el-option label="多选" value="multi_select" />
<el-option label="布尔" value="boolean" />
<el-option label="图片" value="image" />
</el-select>
<!-- 单选/多选时显示字典类型选择 -->
<el-select
v-if="attr.type === 'select' || attr.type === 'multi_select'"
v-model="attr.description"
placeholder="选择字典类型"
style="width: 120px"
:loading="dictLoading"
@change="onDictKeyChange(attr)"
>
<el-option
v-for="(item, idx) in dictTypeOptions"
:key="idx"
:label="item.name || ''"
:value="item.name || ''"
/>
</el-select>
<!-- 选择字典类型后显示字典值选择 -->
<el-select
v-if="attr.description && (attr.type === 'select' || attr.type === 'multi_select')"
v-model="attr.options"
multiple
placeholder="选择字典值"
style="width: 150px"
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
>
<el-option
v-for="(item, idx) in getDictValuesByType(attr.description)"
:key="idx"
:label="item.value"
:value="item.key"
/>
</el-select>
<el-button type="danger" :icon="Delete" circle @click="removeAttr(index)" />
<div class="custom-attrs-table">
<div class="table-head">
<span class="col col-name">属性名称</span>
<span class="col col-type">属性类型</span>
<span class="col col-dict">字典</span>
<span class="col col-dict-value">字典值</span>
<span class="col col-ops">操作</span>
</div>
<div class="table-body">
<div v-for="(attr, index) in ruleForm.attrs" :key="index" class="table-row">
<div class="col col-name">
<el-input
v-if="!isDictType(attr.type)"
v-model="attr.name"
placeholder="请输入属性名称"
clearable
/>
<span v-else class="dict-name">{{ attr.description || '请选择字典' }}</span>
</div>
<div class="col col-type">
<el-select v-model="attr.type" placeholder="属性类型" class="w100" @change="onAttrTypeChange(attr)">
<el-option
v-for="item in attrTypeOptions"
:key="item.key"
:label="item.value"
:value="item.key"
/>
</el-select>
</div>
<div class="col col-dict">
<el-select
v-model="attr.description"
placeholder="选择字典"
class="w100"
:disabled="!isDictType(attr.type)"
:loading="dictLoading"
clearable
@change="onDictKeyChange(attr)"
>
<el-option
v-for="(item, idx) in dictTypeOptions"
:key="idx"
:label="item.name || ''"
:value="item.name || ''"
/>
</el-select>
</div>
<div class="col col-dict-value">
<el-select
v-if="isDictType(attr.type) && attr.description"
v-model="attr.options"
multiple
placeholder="选择字典值"
class="w100"
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
>
<el-option
v-for="(item, idx) in getDictValuesByType(attr.description)"
:key="idx"
:label="item.value"
:value="item.key"
/>
</el-select>
<span v-else class="dict-placeholder">-</span>
</div>
<div class="col col-ops">
<el-button type="danger" :icon="Delete" circle @click="removeAttr(index)" />
</div>
</div>
<el-empty v-if="ruleForm.attrs.length === 0" description="暂无自定义属性" />
</div>
<div class="table-footer">
<el-button type="primary" :icon="Plus" plain @click="addAttr">添加属性</el-button>
</div>
<el-button type="primary" :icon="Plus" @click="addAttr">添加属性</el-button>
</div>
</el-form-item>
</el-form>
@@ -105,10 +116,10 @@ export default {
</script>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus, Delete } from '@element-plus/icons-vue';
import { getCategoryTree, getCategory, addCategory, updateCategory } from '/@/api/assets/category';
import { getCategoryTree, getCategory, addCategory, updateCategory, getCategoryAttrTypeOptions } from '/@/api/assets/category';
import { getDicts } from '/@/api/system/dict/data';
interface CategoryRow {
@@ -162,6 +173,7 @@ const isEdit = ref(false);
const isAddChild = ref(false);
const submitLoading = ref(false);
const categoryData = ref<CategoryRow[]>([]);
const attrTypeOptions = ref<{ key: string; value: string }[]>([]);
const dictTypeOptions = ref<DictInfo[]>([]);
const dictValueOptions = ref<any[]>([]);
const dictLoading = ref(false);
@@ -179,6 +191,21 @@ const rules = {
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
};
// 获取属性类型
const fetchAttrTypeOptions = () => {
getCategoryAttrTypeOptions()
.then((res: any) => {
const list = res.data?.options ?? [];
attrTypeOptions.value = list.map((item: any) => ({
key: item.key ?? item.Key ?? '',
value: item.value ?? item.Value ?? '',
}));
})
.catch(() => {
attrTypeOptions.value = [];
});
};
// 获取字典类型数据
const fetchDictTypeOptions = () => {
dictLoading.value = true;
@@ -213,6 +240,9 @@ const getDictValuesByType = (dictKey: string) => {
return dictItem?.values ?? [];
};
// 判断是否为字典类型
const isDictType = (type?: string) => type === 'select' || type === 'multi_select';
// 字典类型选择变化时
const onDictKeyChange = (attr: CustomAttr) => {
// 清空已选的字典值
@@ -224,7 +254,8 @@ const addAttr = () => {
ruleForm.attrs.push({
name: '',
type: 'text',
dictKey: '',
description: '',
options: [],
});
};
@@ -235,17 +266,23 @@ const removeAttr = (index: number) => {
// 属性类型变化时
const onAttrTypeChange = (attr: CustomAttr) => {
if (attr.type === 'select' || attr.type === 'multi_select') {
if (isDictType(attr.type)) {
// 如果字典类型数据还没加载，则加载
if (dictTypeOptions.value.length === 0) {
fetchDictTypeOptions();
}
attr.dictKey = '';
attr.description = '';
attr.options = [];
} else {
attr.dictKey = undefined;
attr.description = '';
attr.options = [];
}
};
onMounted(() => {
fetchAttrTypeOptions();
});
// 重置表单
const resetForm = () => {
ruleForm.id = '';
@@ -318,36 +355,53 @@ const onCancel = () => {
closeDialog();
};
// 将字典值转换为 {label,value}
const formatDictOptions = (attr: CustomAttr) => {
const options = attr.options || [];
if (options.length > 0 && typeof options[0] === 'object') {
return options.map((opt: any) => ({
label: opt.label ?? opt.value ?? '',
value: opt.value ?? opt.key ?? '',
}));
}
const dictValues = getDictValuesByType(attr.description || '');
return options.map((optValue: string) => {
const dictItem = dictValues.find((d: any) => d.key === optValue);
return {
label: dictItem?.value || optValue,
value: optValue,
};
});
};
// 提交
const onSubmit = () => {
formRef.value.validate((valid: boolean) => {
if (valid) {
submitLoading.value = true;
// 处理 attrs：单选/多选类型不传递 name，并转换 options 格式
// 处理 attrs：统一清理脏数据
const processedAttrs = ruleForm.attrs.map((attr) => {
if (attr.type === 'select' || attr.type === 'multi_select') {
const { name, ...rest } = attr;
const options = attr.options || [];
let formattedOptions: any[] = [];
// 判断 options 是否已经是对象数组格式
if (options.length > 0 && typeof options[0] === 'object') {
// 已经是对象数组格式，直接使用
formattedOptions = options;
} else {
// 是字符串数组，需要转换为 [{label, value}] 格式
const dictValues = getDictValuesByType(attr.description || '');
formattedOptions = options.map((optValue: string) => {
const dictItem = dictValues.find((d: any) => d.key === optValue);
return {
label: dictItem?.value || optValue,
value: optValue,
};
});
}
return { ...rest, options: formattedOptions };
const base = {
type: attr.type,
description: attr.description || '',
required: attr.required ?? false,
multiple: attr.type === 'multi_select',
sort: attr.sort ?? 0,
};
if (isDictType(attr.type)) {
return {
...base,
name: '',
options: formatDictOptions(attr),
};
}
return attr;
return {
...base,
name: (attr.name || '').trim(),
options: [],
};
});
const submitData = { ...ruleForm, attrs: processedAttrs };
@@ -391,20 +445,128 @@ defineExpose({
width: 100%;
}
.custom-attrs-container {
.custom-attrs-table {
width: 100%;
box-sizing: border-box;
border: 1px solid #ebeef5;
border-radius: 6px;
overflow: hidden;
background: #fff;
padding: 4px 0 0;
.custom-attr-item {
.table-head,
.table-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.4fr 60px;
align-items: center;
column-gap: 12px;
padding: 12px 16px;
}
.table-head {
background: #f7f9fc;
font-weight: 600;
color: #4b4f58;
.col {
justify-content: flex-start;
white-space: nowrap;
}
border-bottom: 1px solid #ebeef5;
}
.table-body {
max-height: 260px;
overflow-y: auto;
padding: 0 16px 12px;
}
.table-row + .table-row {
border-top: 1px solid #f2f2f2;
}
.col {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
justify-content: flex-start;
}
.el-button.is-circle {
:deep(.el-icon) {
margin-right: 0 !important;
}
.col-ops {
justify-content: center;
:deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
:deep(.el-button.is-circle) {
width: 32px;
height: 32px;
padding: 0;
}
:deep(.el-button .el-icon) {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
:deep(.el-button .el-icon svg) {
margin: 0;
}
}
.col-name {
.dict-name {
display: inline-block;
width: 100%;
padding: 0 12px;
height: 32px;
line-height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
color: #606266;
background-color: #f5f7fa;
}
}
.col-type,
.col-dict,
.col-dict-value {
:deep(.el-select),
:deep(.el-input) {
width: 100%;
}
:deep(.el-input__wrapper) {
width: 100%;
box-sizing: border-box;
}
}
.col-dict-value {
min-height: 40px;
.dict-placeholder {
color: #c0c4cc;
}
}
:deep(.el-empty) {
padding: 24px 0;
}
.table-footer {
padding: 12px 16px;
border-top: 1px solid #ebeef5;
text-align: left;
background: #fafafa;
display: flex;
justify-content: flex-start;
}
}
</style>

19
src/views/home/index.vue
View File

@@ -66,7 +66,7 @@
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
@@ -492,10 +492,17 @@ export default defineComponent({
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
nextTick(() => {
for (let i = 0; i < state.myCharts.length; i++) {
for (let i = state.myCharts.length - 1; i >= 0; i--) {
const chart = state.myCharts[i] as any;
if (!chart || (typeof chart.isDisposed === 'function' && chart.isDisposed())) {
state.myCharts.splice(i, 1);
continue;
}
setTimeout(() => {
(<any>state.myCharts[i]).resize();
}, i * 1000);
if (chart && typeof chart.resize === 'function' && !(chart.isDisposed && chart.isDisposed())) {
chart.resize();
}
}, (state.myCharts.length - 1 - i) * 200);
}
});
};
@@ -507,6 +514,10 @@ export default defineComponent({
onMounted(() => {
initEchartsResize();
});
onUnmounted(() => {
window.removeEventListener('resize', initEchartsResizeFun);
state.myCharts.length = 0;
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
initEchartsResizeFun();

3
vite.config.ts
View File

@@ -37,7 +37,8 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
// },
proxy: {
'/api': {
target: 'http://192.168.3.200:8808',
// target: 'http://192.168.3.200:8808',
target: 'http://192.168.3.49:8808',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api'),
},