优化资产编辑和分类管理功能,完善虚拟资产配置

2025-12-22 14:08:17 +08:00
parent 1a904388ef
commit ac0b790363
3 changed files with 334 additions and 109 deletions
--- a/src/api/assets/category/index.ts
+++ b/src/api/assets/category/index.ts
@@ -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({
--- a/src/views/assets/asset/component/editAsset.vue
+++ b/src/views/assets/asset/component/editAsset.vue
@@ -215,8 +215,42 @@
 					<el-divider content-position="left">虚拟资产配置</el-divider>
 					<el-row :gutter="24">
 						<el-col :span="12">
-							<el-form-item label="虚拟资产ID">
-								<el-input v-model="ruleForm.virtualAssetConfig.virtualAssetId" placeholder="请输入虚拟资产ID" />
+							<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>
@@ -275,8 +309,12 @@
 					<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-date-picker v-model="exc.date" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="日期" style="width: 130px" />
-								<el-select v-model="exc.dayOfWeek" placeholder="星期" style="width: 90px">
+								<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">
@@ -330,6 +368,7 @@ interface TimeSlot {
 }

 interface Exception {
+	exceptionType: 'date' | 'dayOfWeek';
 	date: string;
 	status: number;
 	reason: string;
@@ -360,7 +399,10 @@ interface RuleForm {
 		};
 	};
 	virtualAssetConfig: {
-		virtualAssetId: string;
+		method: string;
+		requestURL: string;
+		authType: string;
+		authConfig: string;
 	};
 	serviceAssetConfig: {
 		schedule: {
@@ -424,7 +466,10 @@ const getInitialForm = (): RuleForm => ({
 		},
 	},
 	virtualAssetConfig: {
-		virtualAssetId: '',
+		method: 'GET',
+		requestURL: '',
+		authType: 'none',
+		authConfig: '',
 	},
 	serviceAssetConfig: {
 		schedule: {
@@ -490,6 +535,7 @@ const removeTimeSlot = (index: number) => {
 // 例外日期操作
 const addException = () => {
 	ruleForm.serviceAssetConfig.schedule.exceptions.push({
+		exceptionType: 'date',
 		date: '',
 		status: 1,
 		reason: '',
@@ -501,6 +547,15 @@ 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();
--- a/src/views/assets/category/component/editCategory.vue
+++ b/src/views/assets/category/component/editCategory.vue
@@ -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>