change(mes): (MeterSphere100020)【设备类型信息】新增界面优化

- 移除不必要的搜索字段
- 更新表格列显示内容
- 添加设备大类选择功能
- 优化激活标识显示和选择
- 调整表单布局和字段
- 添加字典数据获取

src/api/mes/baseDeviceType/types.ts

@@ -27,7 +27,7 @@ export interface BaseDeviceTypeVO {
   /**
    * 设备大类ID（大类ID（关联base_category表category_type为2的））
    */
-  categoryId: string | number;
+  deviceCategoryId: string | number;
 
   /**
    * 激活标识（1是 0否）
@@ -39,6 +39,8 @@ export interface BaseDeviceTypeVO {
    */
   remark: string;
 
+  deviceCategoryName: string;
+
 }
 
 export interface BaseDeviceTypeForm extends BaseEntity {
@@ -70,7 +72,7 @@ export interface BaseDeviceTypeForm extends BaseEntity {
   /**
    * 设备大类ID（大类ID（关联base_category表category_type为2的））
    */
-  categoryId?: string | number;
+  deviceCategoryId?: string | number;
 
   /**
    * 激活标识（1是 0否）
@@ -82,6 +84,8 @@ export interface BaseDeviceTypeForm extends BaseEntity {
    */
   remark?: string;
 
+  deviceCategoryName?: string;
+
 }
 
 export interface BaseDeviceTypeQuery extends PageQuery {
@@ -114,7 +118,7 @@ export interface BaseDeviceTypeQuery extends PageQuery {
   /**
    * 设备大类ID（大类ID（关联base_category表category_type为2的））
    */
-  categoryId?: string | number;
+  deviceCategoryId?: string | number;
 
   /**
    * 激活标识（1是 0否）
@@ -125,6 +129,8 @@ export interface BaseDeviceTypeQuery extends PageQuery {
      * 日期范围参数
      */
     params?: any;
+
+  deviceCategoryName?: string;
 }
 
 

src/views/mes/baseDeviceType/index.vue

@@ -4,27 +4,27 @@
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="物料类型ID" prop="deviceTypeId">
+<!--            <el-form-item label="物料类型ID" prop="deviceTypeId">
               <el-input v-model="queryParams.deviceTypeId" placeholder="请输入物料类型ID" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
+            </el-form-item>-->
-            <el-form-item label="父级标识" prop="parentId">
+<!--            <el-form-item label="父级标识" prop="parentId">
               <el-input v-model="queryParams.parentId" placeholder="请输入父级标识" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
+            </el-form-item>-->
-            <el-form-item label="设备类型编号" prop="deviceTypeCode">
+<!--            <el-form-item label="设备类型编号" prop="deviceTypeCode">
               <el-input v-model="queryParams.deviceTypeCode" placeholder="请输入设备类型编号" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
+            </el-form-item>-->
-            <el-form-item label="设备类型名称" prop="deviceTypeName">
+            <el-form-item label="设备类型名称" prop="deviceTypeName" label-width="100px">
               <el-input v-model="queryParams.deviceTypeName" placeholder="请输入设备类型名称" clearable @keyup.enter="handleQuery" />
             </el-form-item>
-            <el-form-item label="祖级列表" prop="ancestors">
+<!--            <el-form-item label="祖级列表" prop="ancestors">
               <el-input v-model="queryParams.ancestors" placeholder="请输入祖级列表" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="设备大类ID" prop="categoryId">
               <el-input v-model="queryParams.categoryId" placeholder="请输入设备大类ID" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
+            </el-form-item>-->
-            <el-form-item label="激活标识" prop="activeFlag">
+<!--            <el-form-item label="激活标识" prop="activeFlag">
               <el-input v-model="queryParams.activeFlag" placeholder="请输入激活标识" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
+            </el-form-item>-->
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -55,13 +55,17 @@
 
       <el-table v-loading="loading" :data="baseDeviceTypeList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="物料类型ID" align="center" prop="deviceTypeId" v-if="columns[0].visible"/>
+        <el-table-column label="设备类型" align="center" prop="deviceTypeId" v-if="columns[0].visible"/>
         <el-table-column label="父级标识" align="center" prop="parentId" v-if="columns[2].visible"/>
         <el-table-column label="设备类型编号" align="center" prop="deviceTypeCode" v-if="columns[3].visible"/>
         <el-table-column label="设备类型名称" align="center" prop="deviceTypeName" v-if="columns[4].visible"/>
         <el-table-column label="祖级列表" align="center" prop="ancestors" v-if="columns[5].visible"/>
-        <el-table-column label="设备大类ID" align="center" prop="categoryId" v-if="columns[6].visible"/>
+        <el-table-column label="设备大类" align="center" prop="deviceCategoryName" v-if="columns[6].visible"/>
-        <el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[7].visible"/>
+        <el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[7].visible">
+          <template #default='scope'>
+            <dict-tag :options='active_flag' :value='scope.row.activeFlag' />
+          </template>
+        </el-table-column>
         <el-table-column label="备注" align="center" prop="remark" v-if="columns[8].visible"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
@@ -77,14 +81,23 @@
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
+
     <!-- 添加或修改设备类型信息对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="baseDeviceTypeFormRef" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="baseDeviceTypeFormRef" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="物料类型ID" prop="deviceTypeId">
+<!--        <el-form-item label="设备类型" prop="deviceTypeId">
-          <el-input v-model="form.deviceTypeId" placeholder="请输入物料类型ID" />
+          <el-input v-model="form.deviceTypeId" placeholder="请输入设备类型ID" />
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="父级标识" prop="parentId">
-          <el-input v-model="form.parentId" placeholder="请输入父级标识" />
+<!--          <el-input v-model="form.parentId" placeholder="请输入父级标识" />-->
+          <el-tree-select
+            v-model="form.parentId"
+            :data="baseOptions"
+            :props="{ value: 'deviceTypeId', label: 'deviceTypeName', children: 'children' }"
+            value-key="deviceTypeId"
+            placeholder="请选择父级标识"
+            check-strictly
+          />
         </el-form-item>
         <el-form-item label="设备类型编号" prop="deviceTypeCode">
           <el-input v-model="form.deviceTypeCode" placeholder="请输入设备类型编号" />
@@ -92,14 +105,30 @@
         <el-form-item label="设备类型名称" prop="deviceTypeName">
           <el-input v-model="form.deviceTypeName" placeholder="请输入设备类型名称" />
         </el-form-item>
-        <el-form-item label="祖级列表" prop="ancestors">
+<!--        <el-form-item label="祖级列表" prop="ancestors">
           <el-input v-model="form.ancestors" placeholder="请输入祖级列表" />
+        </el-form-item>-->
+        <el-form-item label="设备大类" prop="deviceCategoryId">
+<!--          <el-input v-model="form.categoryId" placeholder="请输入设备大类ID" />-->
+          <el-select v-model="form.deviceCategoryId" placeholder="请选择设备大类" filterable>
+            <el-option v-for="item in categoryOptions"
+                       :key="item.deviceCategoryId"
+                       :label="item.deviceCategoryName"
+                       :value="item.deviceCategoryId">
+            </el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="设备大类ID" prop="categoryId">
+<!--        <el-form-item label="激活标识" prop="activeFlag">
-          <el-input v-model="form.categoryId" placeholder="请输入设备大类ID" />
-        </el-form-item>
-        <el-form-item label="激活标识" prop="activeFlag">
           <el-input v-model="form.activeFlag" placeholder="请输入激活标识" />
+        </el-form-item>-->
+        <el-form-item label="激活标识" prop="activeFlag">
+          <el-radio-group v-model="form.activeFlag">
+            <el-radio
+              v-for="dict in active_flag"
+              :key="dict.value"
+              :value="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -112,15 +141,26 @@
         </div>
       </template>
     </el-dialog>
+
   </div>
 </template>
 
 <script setup name="BaseDeviceType" lang="ts">
-import { listBaseDeviceType, getBaseDeviceType, delBaseDeviceType, addBaseDeviceType, updateBaseDeviceType } from '@/api/mes/baseDeviceType';
+import {
+  listBaseDeviceType,
+  getBaseDeviceType,
+  delBaseDeviceType,
+  addBaseDeviceType,
+  updateBaseDeviceType,
+  getBaseDeviceTypeList
+} from '@/api/mes/baseDeviceType';
 import { BaseDeviceTypeVO, BaseDeviceTypeQuery, BaseDeviceTypeForm } from '@/api/mes/baseDeviceType/types';
+import {getBaseDeviceCategoryList} from "@/api/mes/baseDeviceCategory";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+const { active_flag } = toRefs<any>(proxy?.useDict( 'active_flag'));
+
 const baseDeviceTypeList = ref<BaseDeviceTypeVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
@@ -140,20 +180,20 @@ const dialog = reactive<DialogOption>({
 
 // 列显隐信息
 const columns = ref<FieldOption[]>([
-        { key: 0, label: `物料类型ID`, visible: true },
+        { key: 0, label: `设备类型ID`, visible: false },
-        { key: 1, label: `租户编号`, visible: true },
+        { key: 1, label: `租户编号`, visible: false },
-        { key: 2, label: `父级标识`, visible: true },
+        { key: 2, label: `父级标识`, visible: false },
         { key: 3, label: `设备类型编号`, visible: true },
         { key: 4, label: `设备类型名称`, visible: true },
-        { key: 5, label: `祖级列表`, visible: true },
+        { key: 5, label: `祖级列表`, visible: false },
         { key: 6, label: `设备大类ID`, visible: true },
         { key: 7, label: `激活标识`, visible: true },
         { key: 8, label: `备注`, visible: true },
-        { key: 9, label: `创建部门`, visible: true },
+        { key: 9, label: `创建部门`, visible: false },
-        { key: 10, label: `创建人`, visible: true },
+        { key: 10, label: `创建人`, visible: false },
-        { key: 11, label: `创建时间`, visible: true },
+        { key: 11, label: `创建时间`, visible: false },
-        { key: 12, label: `更新人`, visible: true },
+        { key: 12, label: `更新人`, visible: false },
-        { key: 13, label: `更新时间`, visible: true },
+        { key: 13, label: `更新时间`, visible: false },
 ]);
 
 const initFormData: BaseDeviceTypeForm = {
@@ -162,8 +202,9 @@ const initFormData: BaseDeviceTypeForm = {
   deviceTypeCode: undefined,
   deviceTypeName: undefined,
   ancestors: undefined,
-  categoryId: undefined,
+  deviceCategoryId: undefined,
-  activeFlag: undefined,
+  deviceCategoryName: undefined,
+  activeFlag: '1',
   remark: undefined,
 }
 const data = reactive<PageData<BaseDeviceTypeForm, BaseDeviceTypeQuery>>({
@@ -176,15 +217,16 @@ const data = reactive<PageData<BaseDeviceTypeForm, BaseDeviceTypeQuery>>({
     deviceTypeCode: undefined,
     deviceTypeName: undefined,
     ancestors: undefined,
-    categoryId: undefined,
+    deviceCategoryId: undefined,
+    deviceCategoryName: undefined,
     activeFlag: undefined,
     params: {
     }
   },
   rules: {
-    deviceTypeId: [
+/*    deviceTypeId: [
-      { required: true, message: "物料类型ID不能为空", trigger: "blur" }
+      { required: true, message: "设备类型不能为空", trigger: "blur" }
-    ],
+    ],*/
     parentId: [
       { required: true, message: "父级标识不能为空", trigger: "blur" }
     ],
@@ -194,18 +236,18 @@ const data = reactive<PageData<BaseDeviceTypeForm, BaseDeviceTypeQuery>>({
     deviceTypeName: [
       { required: true, message: "设备类型名称不能为空", trigger: "blur" }
     ],
-    ancestors: [
+/*    ancestors: [
       { required: true, message: "祖级列表不能为空", trigger: "blur" }
-    ],
+    ],*/
     categoryId: [
-      { required: true, message: "设备大类ID不能为空", trigger: "blur" }
+      { required: true, message: "设备大类不能为空", trigger: "blur" }
     ],
     activeFlag: [
       { required: true, message: "激活标识不能为空", trigger: "blur" }
     ],
-    remark: [
+/*    remark: [
       { required: true, message: "备注不能为空", trigger: "blur" }
-    ],
+    ],*/
   }
 });
 
@@ -252,8 +294,9 @@ const handleSelectionChange = (selection: BaseDeviceTypeVO[]) => {
 }
 
 /** 新增按钮操作 */
-const handleAdd = () => {
+const handleAdd = async() => {
   reset();
+  await getTreeselect();
   dialog.visible = true;
   dialog.title = "添加设备类型信息";
 }
@@ -261,6 +304,7 @@ const handleAdd = () => {
 /** 修改按钮操作 */
 const handleUpdate = async (row?: BaseDeviceTypeVO) => {
   reset();
+  await getTreeselect();
   const _deviceTypeId = row?.deviceTypeId || ids.value[0]
   const res = await getBaseDeviceType(_deviceTypeId);
   Object.assign(form.value, res.data);
@@ -301,7 +345,30 @@ const handleExport = () => {
   }, `baseDeviceType_${new Date().getTime()}.xlsx`)
 }
 
+let categoryOptions = ref([]);
+const getCategorySelect = async () => {
+  const res = await getBaseDeviceCategoryList(null);
+  categoryOptions.value = res.data;
+}
+
+
+/** 查询计量单位信息下拉树结构 */
+type BaseOption = {
+  deviceTypeId: number;
+  deviceTypeName: string;
+  children?: BaseOption[];
+}
+const baseOptions = ref<BaseDeviceTypeVO[]>([]);
+const getTreeselect = async () => {
+  const res = await getBaseDeviceTypeList(null);
+  baseOptions.value = [];
+  const data: BaseOption = { deviceTypeId: 0, deviceTypeName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<BaseOption>(res.data, "deviceTypeId", "parentId");
+  baseOptions.value.push(data);
+}
+
 onMounted(() => {
+  getCategorySelect();
   getList();
 });
 </script>