|
|
@@ -4,27 +4,44 @@
|
|
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
<div v-show="showSearch" class="mb-[10px]">
|
|
|
<el-card shadow="hover">
|
|
|
- <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
|
|
|
- <el-form-item label="类型名称" prop="categoryName">
|
|
|
- <el-input v-model="queryParams.categoryName" placeholder="请输入类型名称" clearable @keyup.enter="handleQuery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="类型编码" prop="categoryCode">
|
|
|
- <el-input v-model="queryParams.categoryCode" placeholder="请输入类型编码" clearable @keyup.enter="handleQuery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="技能等级" prop="skillLevel">
|
|
|
- <el-select v-model="queryParams.skillLevel" placeholder="请选择技能等级" clearable>
|
|
|
- <el-option v-for="dict in pm_skill_level" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
- <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
|
|
- <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams" label-width="100px">
|
|
|
+ <!-- 第一行：4个检索元素 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="类型名称" prop="categoryName">
|
|
|
+ <el-input v-model="queryParams.categoryName" placeholder="请输入类型名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="类型编码" prop="categoryCode">
|
|
|
+ <el-input v-model="queryParams.categoryCode" placeholder="请输入类型编码" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="技能等级" prop="skillLevel">
|
|
|
+ <el-select v-model="queryParams.skillLevel" placeholder="请选择技能等级" clearable style="width: 100%">
|
|
|
+ <el-option v-for="dict in pm_skill_level" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 100%">
|
|
|
+ <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 操作按钮行 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="search-btn-container">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
@@ -53,15 +70,17 @@
|
|
|
:default-expand-all="isExpandAll"
|
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
border
|
|
|
+ header-align="center"
|
|
|
+ @row-click="handleRowClick"
|
|
|
style="width: 100%"
|
|
|
class="tree-table"
|
|
|
>
|
|
|
- <el-table-column prop="categoryName" label="类型名称" min-width="260" show-overflow-tooltip>
|
|
|
+ <el-table-column align="left" header-align="center" prop="categoryName" label="类型名称" min-width="260" show-overflow-tooltip>
|
|
|
<template #default="scope">
|
|
|
<span class="category-name-cell">
|
|
|
- <el-icon v-if="scope.row.iconUrl" class="category-icon" :style="{ color: scope.row.colorCode }">
|
|
|
+ <!-- <el-icon v-if="scope.row.iconUrl" class="category-icon" :style="{ color: scope.row.colorCode }">
|
|
|
<component :is="getCategoryIcon(scope.row.categoryCode)" />
|
|
|
- </el-icon>
|
|
|
+ </el-icon> -->
|
|
|
<span class="category-name">{{ scope.row.categoryName }}</span>
|
|
|
<el-tag v-if="scope.row.childrenCount > 0" size="small" type="info" class="children-count-tag">
|
|
|
{{ scope.row.childrenCount }}个子类
|
|
|
@@ -69,8 +88,8 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="categoryCode" label="类型编码" width="150" show-overflow-tooltip />
|
|
|
- <el-table-column prop="categoryDescription" label="类型描述" min-width="200" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="categoryCode" label="类型编码" width="150" align="left" header-align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="categoryDescription" label="类型描述" min-width="200" align="left" header-align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="skillLevel" label="技能等级" width="100" align="center">
|
|
|
<template #default="scope">
|
|
|
<el-tag :type="getSkillLevelTagType(scope.row.skillLevel)" size="small">
|
|
|
@@ -78,7 +97,7 @@
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="estimatedDuration" label="预估时长" width="120" align="center">
|
|
|
+ <!-- <el-table-column prop="estimatedDuration" label="预估时长" width="120" align="center">
|
|
|
<template #default="scope">
|
|
|
<span v-if="scope.row.estimatedDuration">{{ formatDuration(scope.row.estimatedDuration) }}</span>
|
|
|
<span v-else>-</span>
|
|
|
@@ -90,7 +109,7 @@
|
|
|
<span v-else>-</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="usageCount" label="使用次数" width="100" align="center" />
|
|
|
+ <el-table-column prop="usageCount" label="使用次数" width="100" align="center" /> -->
|
|
|
<el-table-column prop="sortOrder" label="排序" width="80" align="center" />
|
|
|
<el-table-column prop="status" label="状态" width="80" align="center">
|
|
|
<template #default="scope">
|
|
|
@@ -170,7 +189,7 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
+ <!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="预估时长" prop="estimatedDuration">
|
|
|
<el-input-number v-model="form.estimatedDuration" :min="0" :max="9999" placeholder="分钟" style="width: 100%" />
|
|
|
@@ -181,13 +200,13 @@
|
|
|
<el-input-number v-model="form.standardCost" :min="0" :precision="2" placeholder="元" style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
+ </el-row> -->
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
+ <!-- <el-col :span="12">
|
|
|
<el-form-item label="分类颜色" prop="colorCode">
|
|
|
<el-color-picker v-model="form.colorCode" :predefine="predefineColors" :clearable="false" style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
- </el-col>
|
|
|
+ </el-col> -->
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="排序顺序" prop="sortOrder">
|
|
|
<el-input-number v-model="form.sortOrder" :min="0" placeholder="数字越小越靠前" style="width: 100%" />
|
|
|
@@ -231,9 +250,9 @@
|
|
|
<el-descriptions :column="2" border>
|
|
|
<el-descriptions-item label="类型名称">
|
|
|
<div class="category-name-view">
|
|
|
- <el-icon v-if="viewData.iconUrl" class="category-icon" :style="{ color: viewData.colorCode }">
|
|
|
+ <!-- <el-icon v-if="viewData.iconUrl" class="category-icon" :style="{ color: viewData.colorCode }">
|
|
|
<component :is="getCategoryIcon(viewData.categoryCode)" />
|
|
|
- </el-icon>
|
|
|
+ </el-icon> -->
|
|
|
<span class="category-name">{{ viewData.categoryName }}</span>
|
|
|
</div>
|
|
|
</el-descriptions-item>
|
|
|
@@ -244,7 +263,7 @@
|
|
|
{{ getSkillLevelText(viewData.skillLevel) }}
|
|
|
</el-tag>
|
|
|
</el-descriptions-item>
|
|
|
- <el-descriptions-item label="预估时长">
|
|
|
+ <!-- <el-descriptions-item label="预估时长">
|
|
|
{{ viewData.estimatedDuration ? formatDuration(viewData.estimatedDuration) : '-' }}
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item label="标准成本">
|
|
|
@@ -253,7 +272,7 @@
|
|
|
<el-descriptions-item label="使用次数">{{ viewData.usageCount }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="最后使用时间">
|
|
|
{{ viewData.lastUsedTime ? proxy.parseTime(viewData.lastUsedTime, '{y}-{m}-{d} {h}:{i}') : '-' }}
|
|
|
- </el-descriptions-item>
|
|
|
+ </el-descriptions-item> -->
|
|
|
<el-descriptions-item label="排序顺序">{{ viewData.sortOrder }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="状态">
|
|
|
<el-tag :type="viewData.status === '1' ? 'success' : 'danger'" size="small">
|
|
|
@@ -286,6 +305,8 @@ import {
|
|
|
updateRepairCategory,
|
|
|
getRepairCategoryTree
|
|
|
} from '@/api/hq/pm/repairCategory';
|
|
|
+import { ref, reactive, getCurrentInstance, nextTick, onMounted, type ComponentInternalInstance } from 'vue';
|
|
|
+import type { FormInstance as ElFormInstance, FormRules as ElFormRules } from 'element-plus';
|
|
|
import { RepairCategoryVO, RepairCategoryForm, RepairCategoryQuery } from '@/api/hq/pm/types';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
@@ -296,6 +317,8 @@ const loading = ref(true);
|
|
|
const showSearch = ref(true);
|
|
|
const isExpandAll = ref(false);
|
|
|
const refreshTable = ref(true);
|
|
|
+// 标记首次加载，用于控制默认展示主分类树
|
|
|
+const initialLoad = ref(true);
|
|
|
|
|
|
// 字典数据
|
|
|
const pm_skill_level = ref([
|
|
|
@@ -363,24 +386,20 @@ const buttonLoading = ref(false);
|
|
|
const getList = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
- // 根据是否有搜索条件决定使用哪个接口
|
|
|
- let res;
|
|
|
- const hasSearchConditions =
|
|
|
- queryParams.value.categoryName || queryParams.value.categoryCode || queryParams.value.skillLevel || queryParams.value.status;
|
|
|
-
|
|
|
- if (hasSearchConditions) {
|
|
|
- // 有搜索条件时使用列表接口，然后手动构建树形结构
|
|
|
- res = await listRepairCategory(queryParams.value);
|
|
|
- if (res.code === 200 && res.rows) {
|
|
|
- categoryList.value = buildTreeFromList(res.rows);
|
|
|
+ // 首次加载时使用树形接口获取所有分类
|
|
|
+ if (initialLoad.value) {
|
|
|
+ const res = await getRepairCategoryTree();
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ categoryList.value = res.data;
|
|
|
} else {
|
|
|
categoryList.value = [];
|
|
|
}
|
|
|
+ initialLoad.value = false; // 首次加载完成后，后续操作都使用列表接口
|
|
|
} else {
|
|
|
- // 无搜索条件时直接使用树形接口
|
|
|
- res = await getRepairCategoryTree();
|
|
|
- if (res.code === 200 && res.data) {
|
|
|
- categoryList.value = res.data;
|
|
|
+ // 后续操作使用列表接口，并根据搜索条件过滤
|
|
|
+ const res = await listRepairCategory(queryParams.value);
|
|
|
+ if (res.code === 200 && res.rows) {
|
|
|
+ categoryList.value = buildTreeFromList(res.rows);
|
|
|
} else {
|
|
|
categoryList.value = [];
|
|
|
}
|
|
|
@@ -468,6 +487,10 @@ const handleUpdate = async (row: RepairCategoryVO) => {
|
|
|
getCategoryTree();
|
|
|
const res = await getRepairCategory(row.id);
|
|
|
Object.assign(form.value, res.data);
|
|
|
+ // 若后端未返回技能等级，默认设置为中级
|
|
|
+ if (!form.value.skillLevel) {
|
|
|
+ form.value.skillLevel = '2';
|
|
|
+ }
|
|
|
dialog.visible = true;
|
|
|
dialog.title = '修改维修类型';
|
|
|
};
|
|
|
@@ -479,6 +502,11 @@ const handleView = async (row: RepairCategoryVO) => {
|
|
|
viewDialog.visible = true;
|
|
|
};
|
|
|
|
|
|
+/** 行点击预览 */
|
|
|
+const handleRowClick = (row: RepairCategoryVO) => {
|
|
|
+ handleView(row);
|
|
|
+};
|
|
|
+
|
|
|
/** 提交按钮 */
|
|
|
const submitForm = () => {
|
|
|
categoryFormRef.value?.validate(async (valid: boolean) => {
|
|
|
@@ -515,13 +543,17 @@ const handleDelete = async (row: RepairCategoryVO) => {
|
|
|
|
|
|
/** 状态修改 */
|
|
|
const handleStatusChange = async (row: RepairCategoryVO) => {
|
|
|
+ const originalStatus = row.status;
|
|
|
const text = row.status === '1' ? '启用' : '停用';
|
|
|
try {
|
|
|
- await proxy?.$modal.confirm('确认要' + text + '"' + row.categoryName + '"类型吗？');
|
|
|
- await updateRepairCategory({ id: row.id, status: row.status });
|
|
|
+ await proxy?.$modal.confirm(`确认要${text}"${row.categoryName}"类型吗？`);
|
|
|
+ // 移除前端辅助字段，只保留后端需要的核心字段
|
|
|
+ const { children, ...updateData } = row as any;
|
|
|
+ await updateRepairCategory(updateData);
|
|
|
proxy?.$modal.msgSuccess(text + '成功');
|
|
|
- } catch {
|
|
|
- row.status = row.status === '1' ? '0' : '1';
|
|
|
+ } catch (e) {
|
|
|
+ // 如果请求失败或被取消，则还原原状态
|
|
|
+ row.status = originalStatus;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -543,7 +575,7 @@ const reset = () => {
|
|
|
categoryDescription: '',
|
|
|
parentId: 0, // 使用数字类型，确保与树形选择器数据类型一致
|
|
|
requiredSkills: '',
|
|
|
- skillLevel: '',
|
|
|
+ skillLevel: '2', // 默认中级
|
|
|
estimatedDuration: undefined,
|
|
|
standardCost: undefined,
|
|
|
iconUrl: '',
|
|
|
@@ -840,4 +872,14 @@ onMounted(() => {
|
|
|
:deep(.el-color-picker__color) {
|
|
|
border: 0px !important;
|
|
|
}
|
|
|
+/* 搜索按钮容器样式 */
|
|
|
+.search-btn-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
