Merge branch 'dev' of https://gitee.com/red-future---jilin-g/admin-ui into dev
This commit is contained in:
Cold
@@ -2,4 +2,6 @@
|
|||||||
ENV = 'development'
|
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
78
src/api/assets/asset/index.ts
Normal 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',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -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) {
|
export function addCategory(data: object) {
|
||||||
return newService({
|
return newService({
|
||||||
|
|||||||
@@ -22,7 +22,8 @@ const service: AxiosInstance = axios.create({
|
|||||||
const newService: AxiosInstance = axios.create({
|
const newService: AxiosInstance = axios.create({
|
||||||
// baseURL: 'http://192.168.3.95:8000/',
|
// baseURL: 'http://192.168.3.95:8000/',
|
||||||
// baseURL: 'http://192.168.3.49: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,
|
timeout: 50000,
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
paramsSerializer: {
|
paramsSerializer: {
|
||||||
|
|||||||
853
src/views/assets/asset/component/editAsset.vue
Normal file
853
src/views/assets/asset/component/editAsset.vue
Normal 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
251
src/views/assets/asset/index.vue
Normal 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>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="assets-edit-category-container">
|
<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 ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
|
||||||
<el-form-item label="上级分类">
|
<el-form-item label="上级分类">
|
||||||
<el-cascader
|
<el-cascader
|
||||||
@@ -17,74 +17,85 @@
|
|||||||
<el-input v-model="ruleForm.name" placeholder="请输入分类名称" clearable />
|
<el-input v-model="ruleForm.name" placeholder="请输入分类名称" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="排序">
|
<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>
|
||||||
<!-- <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="自定义属性">
|
<el-form-item label="自定义属性">
|
||||||
<div class="custom-attrs-container">
|
<div class="custom-attrs-table">
|
||||||
<div v-for="(attr, index) in ruleForm.attrs" :key="index" class="custom-attr-item">
|
<div class="table-head">
|
||||||
<el-input
|
<span class="col col-name">属性名称</span>
|
||||||
v-if="attr.type !== 'select' && attr.type !== 'multi_select'"
|
<span class="col col-type">属性类型</span>
|
||||||
v-model="attr.name"
|
<span class="col col-dict">字典</span>
|
||||||
placeholder="属性名称"
|
<span class="col col-dict-value">字典值</span>
|
||||||
style="width: 120px"
|
<span class="col col-ops">操作</span>
|
||||||
/>
|
</div>
|
||||||
<el-select v-model="attr.type" placeholder="属性类型" style="width: 120px" @change="onAttrTypeChange(attr)">
|
<div class="table-body">
|
||||||
<el-option label="文本" value="text" />
|
<div v-for="(attr, index) in ruleForm.attrs" :key="index" class="table-row">
|
||||||
<el-option label="数字" value="number" />
|
<div class="col col-name">
|
||||||
<el-option label="日期" value="date" />
|
<el-input
|
||||||
<el-option label="单选" value="select" />
|
v-if="!isDictType(attr.type)"
|
||||||
<el-option label="多选" value="multi_select" />
|
v-model="attr.name"
|
||||||
<el-option label="布尔" value="boolean" />
|
placeholder="请输入属性名称"
|
||||||
<el-option label="图片" value="image" />
|
clearable
|
||||||
</el-select>
|
/>
|
||||||
<!-- 单选/多选时显示字典类型选择 -->
|
<span v-else class="dict-name">{{ attr.description || '请选择字典' }}</span>
|
||||||
<el-select
|
</div>
|
||||||
v-if="attr.type === 'select' || attr.type === 'multi_select'"
|
<div class="col col-type">
|
||||||
v-model="attr.description"
|
<el-select v-model="attr.type" placeholder="属性类型" class="w100" @change="onAttrTypeChange(attr)">
|
||||||
placeholder="选择字典类型"
|
<el-option
|
||||||
style="width: 120px"
|
v-for="item in attrTypeOptions"
|
||||||
:loading="dictLoading"
|
:key="item.key"
|
||||||
@change="onDictKeyChange(attr)"
|
:label="item.value"
|
||||||
>
|
:value="item.key"
|
||||||
<el-option
|
/>
|
||||||
v-for="(item, idx) in dictTypeOptions"
|
</el-select>
|
||||||
:key="idx"
|
</div>
|
||||||
:label="item.name || ''"
|
<div class="col col-dict">
|
||||||
:value="item.name || ''"
|
<el-select
|
||||||
/>
|
v-model="attr.description"
|
||||||
</el-select>
|
placeholder="选择字典"
|
||||||
<!-- 选择字典类型后显示字典值选择 -->
|
class="w100"
|
||||||
<el-select
|
:disabled="!isDictType(attr.type)"
|
||||||
v-if="attr.description && (attr.type === 'select' || attr.type === 'multi_select')"
|
:loading="dictLoading"
|
||||||
v-model="attr.options"
|
clearable
|
||||||
multiple
|
@change="onDictKeyChange(attr)"
|
||||||
placeholder="选择字典值"
|
>
|
||||||
style="width: 150px"
|
<el-option
|
||||||
collapse-tags
|
v-for="(item, idx) in dictTypeOptions"
|
||||||
collapse-tags-tooltip
|
:key="idx"
|
||||||
:max-collapse-tags="2"
|
:label="item.name || ''"
|
||||||
>
|
:value="item.name || ''"
|
||||||
<el-option
|
/>
|
||||||
v-for="(item, idx) in getDictValuesByType(attr.description)"
|
</el-select>
|
||||||
:key="idx"
|
</div>
|
||||||
:label="item.value"
|
<div class="col col-dict-value">
|
||||||
:value="item.key"
|
<el-select
|
||||||
/>
|
v-if="isDictType(attr.type) && attr.description"
|
||||||
</el-select>
|
v-model="attr.options"
|
||||||
<el-button type="danger" :icon="Delete" circle @click="removeAttr(index)" />
|
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>
|
</div>
|
||||||
<el-button type="primary" :icon="Plus" @click="addAttr">添加属性</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@@ -105,10 +116,10 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import { Plus, Delete } from '@element-plus/icons-vue';
|
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';
|
import { getDicts } from '/@/api/system/dict/data';
|
||||||
|
|
||||||
interface CategoryRow {
|
interface CategoryRow {
|
||||||
@@ -162,6 +173,7 @@ const isEdit = ref(false);
|
|||||||
const isAddChild = ref(false);
|
const isAddChild = ref(false);
|
||||||
const submitLoading = ref(false);
|
const submitLoading = ref(false);
|
||||||
const categoryData = ref<CategoryRow[]>([]);
|
const categoryData = ref<CategoryRow[]>([]);
|
||||||
|
const attrTypeOptions = ref<{ key: string; value: string }[]>([]);
|
||||||
const dictTypeOptions = ref<DictInfo[]>([]);
|
const dictTypeOptions = ref<DictInfo[]>([]);
|
||||||
const dictValueOptions = ref<any[]>([]);
|
const dictValueOptions = ref<any[]>([]);
|
||||||
const dictLoading = ref(false);
|
const dictLoading = ref(false);
|
||||||
@@ -179,6 +191,21 @@ const rules = {
|
|||||||
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
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 = () => {
|
const fetchDictTypeOptions = () => {
|
||||||
dictLoading.value = true;
|
dictLoading.value = true;
|
||||||
@@ -213,6 +240,9 @@ const getDictValuesByType = (dictKey: string) => {
|
|||||||
return dictItem?.values ?? [];
|
return dictItem?.values ?? [];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 判断是否为字典类型
|
||||||
|
const isDictType = (type?: string) => type === 'select' || type === 'multi_select';
|
||||||
|
|
||||||
// 字典类型选择变化时
|
// 字典类型选择变化时
|
||||||
const onDictKeyChange = (attr: CustomAttr) => {
|
const onDictKeyChange = (attr: CustomAttr) => {
|
||||||
// 清空已选的字典值
|
// 清空已选的字典值
|
||||||
@@ -224,7 +254,8 @@ const addAttr = () => {
|
|||||||
ruleForm.attrs.push({
|
ruleForm.attrs.push({
|
||||||
name: '',
|
name: '',
|
||||||
type: 'text',
|
type: 'text',
|
||||||
dictKey: '',
|
description: '',
|
||||||
|
options: [],
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -235,17 +266,23 @@ const removeAttr = (index: number) => {
|
|||||||
|
|
||||||
// 属性类型变化时
|
// 属性类型变化时
|
||||||
const onAttrTypeChange = (attr: CustomAttr) => {
|
const onAttrTypeChange = (attr: CustomAttr) => {
|
||||||
if (attr.type === 'select' || attr.type === 'multi_select') {
|
if (isDictType(attr.type)) {
|
||||||
// 如果字典类型数据还没加载，则加载
|
// 如果字典类型数据还没加载，则加载
|
||||||
if (dictTypeOptions.value.length === 0) {
|
if (dictTypeOptions.value.length === 0) {
|
||||||
fetchDictTypeOptions();
|
fetchDictTypeOptions();
|
||||||
}
|
}
|
||||||
attr.dictKey = '';
|
attr.description = '';
|
||||||
|
attr.options = [];
|
||||||
} else {
|
} else {
|
||||||
attr.dictKey = undefined;
|
attr.description = '';
|
||||||
|
attr.options = [];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchAttrTypeOptions();
|
||||||
|
});
|
||||||
|
|
||||||
// 重置表单
|
// 重置表单
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
ruleForm.id = '';
|
ruleForm.id = '';
|
||||||
@@ -318,36 +355,53 @@ const onCancel = () => {
|
|||||||
closeDialog();
|
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 = () => {
|
const onSubmit = () => {
|
||||||
formRef.value.validate((valid: boolean) => {
|
formRef.value.validate((valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
submitLoading.value = true;
|
submitLoading.value = true;
|
||||||
// 处理 attrs：单选/多选类型不传递 name，并转换 options 格式
|
// 处理 attrs：统一清理脏数据
|
||||||
const processedAttrs = ruleForm.attrs.map((attr) => {
|
const processedAttrs = ruleForm.attrs.map((attr) => {
|
||||||
if (attr.type === 'select' || attr.type === 'multi_select') {
|
const base = {
|
||||||
const { name, ...rest } = attr;
|
type: attr.type,
|
||||||
const options = attr.options || [];
|
description: attr.description || '',
|
||||||
let formattedOptions: any[] = [];
|
required: attr.required ?? false,
|
||||||
|
multiple: attr.type === 'multi_select',
|
||||||
// 判断 options 是否已经是对象数组格式
|
sort: attr.sort ?? 0,
|
||||||
if (options.length > 0 && typeof options[0] === 'object') {
|
};
|
||||||
// 已经是对象数组格式，直接使用
|
|
||||||
formattedOptions = options;
|
if (isDictType(attr.type)) {
|
||||||
} else {
|
return {
|
||||||
// 是字符串数组，需要转换为 [{label, value}] 格式
|
...base,
|
||||||
const dictValues = getDictValuesByType(attr.description || '');
|
name: '',
|
||||||
formattedOptions = options.map((optValue: string) => {
|
options: formatDictOptions(attr),
|
||||||
const dictItem = dictValues.find((d: any) => d.key === optValue);
|
};
|
||||||
return {
|
|
||||||
label: dictItem?.value || optValue,
|
|
||||||
value: optValue,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return { ...rest, options: formattedOptions };
|
|
||||||
}
|
}
|
||||||
return attr;
|
|
||||||
|
return {
|
||||||
|
...base,
|
||||||
|
name: (attr.name || '').trim(),
|
||||||
|
options: [],
|
||||||
|
};
|
||||||
});
|
});
|
||||||
const submitData = { ...ruleForm, attrs: processedAttrs };
|
const submitData = { ...ruleForm, attrs: processedAttrs };
|
||||||
|
|
||||||
@@ -391,20 +445,128 @@ defineExpose({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-attrs-container {
|
.custom-attrs-table {
|
||||||
width: 100%;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
justify-content: flex-start;
|
||||||
margin-bottom: 10px;
|
}
|
||||||
|
|
||||||
.el-button.is-circle {
|
.col-ops {
|
||||||
:deep(.el-icon) {
|
justify-content: center;
|
||||||
margin-right: 0 !important;
|
|
||||||
}
|
: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>
|
</style>
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<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 * as echarts from 'echarts';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
@@ -492,10 +492,17 @@ export default defineComponent({
|
|||||||
// 批量设置 echarts resize
|
// 批量设置 echarts resize
|
||||||
const initEchartsResizeFun = () => {
|
const initEchartsResizeFun = () => {
|
||||||
nextTick(() => {
|
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(() => {
|
setTimeout(() => {
|
||||||
(<any>state.myCharts[i]).resize();
|
if (chart && typeof chart.resize === 'function' && !(chart.isDisposed && chart.isDisposed())) {
|
||||||
}, i * 1000);
|
chart.resize();
|
||||||
|
}
|
||||||
|
}, (state.myCharts.length - 1 - i) * 200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -507,6 +514,10 @@ export default defineComponent({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initEchartsResize();
|
initEchartsResize();
|
||||||
});
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', initEchartsResizeFun);
|
||||||
|
state.myCharts.length = 0;
|
||||||
|
});
|
||||||
// 由于页面缓存原因，keep-alive
|
// 由于页面缓存原因，keep-alive
|
||||||
onActivated(() => {
|
onActivated(() => {
|
||||||
initEchartsResizeFun();
|
initEchartsResizeFun();
|
||||||
|
|||||||
@@ -37,7 +37,8 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
|
|||||||
// },
|
// },
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://192.168.3.200:8808',
|
// target: 'http://192.168.3.200:8808',
|
||||||
|
target: 'http://192.168.3.49:8808',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, '/api'),
|
rewrite: (path) => path.replace(/^\/api/, '/api'),
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user