pms 属性模板 默认选中 设备分类树

src/store/modules/attrTemplateTreeStore.ts

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+
+export const useTreeStore = defineStore('tree', {
+  state: () => ({
+    selectedId: null // 存储当前选中的树节点 ID
+  }),
+  actions: {
+    // 更新选中的节点 ID
+    setSelectedId(id) {
+      this.selectedId = id;
+    }
+  }
+});

src/views/pms/devicetemplate/DeviceCategoryTree.vue

@@ -36,12 +36,13 @@
 
 <script lang="ts" setup>
 import { ElTree } from 'element-plus'
-import * as MaterialGroupApi from '@/api/pms/materialgroup'
 import * as DeviceCategoryApi from '@/api/pms/productclassify'
 import { defaultProps, handleTree } from '@/utils/tree'
+import { useTreeStore } from '@/store/modules/attrTemplateTreeStore'
 
 defineOptions({ name: 'DeviceCategoryTree' })
 
+const treeStore = useTreeStore();
 const deviceCategoryName = ref('')
 const deviceCategoryList = ref<Tree[]>([]) // 树形结构
 const treeRef = ref<InstanceType<typeof ElTree>>()
@@ -87,6 +88,7 @@ const filterNode = (name: string, data: Tree) => {
 /** 处理 设备分类树 被点击 */
 const handleNodeClick = async (row: { [key: string]: any }) => {
   emits('node-click', row)
+  treeStore.setSelectedId(row.id);
 }
 const emits = defineEmits(['node-click'])
 

src/views/pms/devicetemplate/TemplateForm.vue

@@ -8,33 +8,30 @@
       label-width="100px"
     >
       <el-row>
-        <el-col :span="12">
-          <el-form-item label="物料名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入物料名称" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="所属物料组" prop="materialGroupId">
+        <el-col :span="24">
+          <el-form-item label="设备分类" prop="deviceCategoryId">
             <el-tree-select
-              v-model="formData.materialGroupId"
-              :data="materialGroupList"
+              v-model="formData.deviceCategoryId"
+              :data="deviceCategoryTree"
               :props="defaultProps"
               check-strictly
-              node-key="id"
-              placeholder="请选择所属物料组"
+              default-expand-all
+              value-key="deviceCategoryId"
+              placeholder="请选择设备分类"
+              @node-click="handleDeviceCategoryTreeNodeClick"
             />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
-          <el-form-item label="物料编码" prop="code">
-            <el-input v-model="formData.code" maxlength="32" placeholder="请输入物料编码" />
+          <el-form-item label="模板名称" prop="name">
+            <el-input v-model="formData.name" maxlength="32" placeholder="请输入模板名称" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="规格型号" prop="model">
-            <el-input v-model="formData.model" maxlength="50" placeholder="请输入规格型号" />
+          <el-form-item label="模板编码" prop="code">
+            <el-input v-model="formData.code" maxlength="50" placeholder="请输入模板编码" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -55,41 +52,44 @@
 <script lang="ts" setup>
 import { CommonStatusEnum } from '@/utils/constants'
 import { defaultProps, handleTree } from '@/utils/tree'
-import * as MaterialGroupApi from '@/api/pms/materialgroup'
-import * as MaterialApi from '@/api/pms/material'
+import * as ProductClassifyApi from '@/api/pms/productclassify'
+import * as DeviceTemplateApi from '@/api/pms/devicetemplate'
 import { FormRules } from 'element-plus'
+import { useTreeStore } from '@/store/modules/attrTemplateTreeStore';
 
-defineOptions({ name: 'MaterialForm' })
+defineOptions({ name: 'DeviceTemplateForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const treeStore = useTreeStore();
+const localDeviceCategoryId = ref(null);  // 通过store存储的设备分类id 由父组件传递过来
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   name: '',
-  materialGroupId: '',
+  deviceCategoryId: localDeviceCategoryId.value,
   code: '',
-  model: '',
   id: undefined,
-  unit: '',
   remark: '',
   status: CommonStatusEnum.ENABLE,
 })
 const formRules = reactive<FormRules>({
-  name: [{ required: true, message: '物料名称不能为空', trigger: 'blur' }],
-  code: [{ required: true, message: '物料编码不能为空', trigger: 'blur' }],
-  materialGroupId: [{ required: true, message: '所属物料组不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
+  code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
+  deviceCategoryId: [{ required: true, message: '所属设备分类不能为空', trigger: 'blur' }],
 
 })
 const formRef = ref() // 表单 Ref
-const materialGroupList = ref<Tree[]>([]) // 树形结构
+const deviceCategoryTree = ref()  // 设备分类树
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
+  // 获取store中的设备分类id
+  localDeviceCategoryId.value = treeStore.selectedId;
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -97,18 +97,20 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await MaterialApi.getMaterial(id)
+      formData.value = await DeviceTemplateApi.getDeviceTemplate(id)
     } finally {
       formLoading.value = false
     }
   }
-  // 加载 物料组 树
-  materialGroupList.value = handleTree(await MaterialGroupApi.getSimpleMaterialGroupList())
+  // 获得 设备分类树
+  await getDeviceCategoryTree()
+  // 加载 设备分类 树
+  // deviceCategoryList.value = handleTree(await ProductClassifyApi.IotProductClassifyApi.getSimpleProductClassifyList())
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success', 'node-click']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   // 校验表单
   if (!formRef) return
@@ -117,12 +119,12 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as MaterialApi.MaterialVO
+    const data = formData.value as unknown as DeviceTemplateApi.DeviceAttrTemplateVO
     if (formType.value === 'create') {
-      await MaterialApi.createMaterial(data)
+      await DeviceTemplateApi.createDeviceTemplate(data)
       message.success(t('common.createSuccess'))
     } else {
-      await MaterialApi.updateMaterial(data)
+      await DeviceTemplateApi.updateDeviceTemplate(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -133,15 +135,30 @@ const submitForm = async () => {
   }
 }
 
+/** 获得 设备分类 树 **/
+const getDeviceCategoryTree = async () => {
+  deviceCategoryTree.value = []
+  const res = await ProductClassifyApi.IotProductClassifyApi.getSimpleProductClassifyList()
+  let categoryTree: Tree = { id: 0, name: '顶级设备分类', children: [] }
+  categoryTree.children = handleTree(res)
+  deviceCategoryTree.value.push(categoryTree)
+}
+
+/** 处理 设备分类 树 被点击 */
+const handleDeviceCategoryTreeNodeClick = async (row: { [key: string]: any }) => {
+  emit('node-click', row)
+  // treeStore.setSelectedId(row.id);
+  // 更新当前设备分类id
+  localDeviceCategoryId.value = row.id
+}
+
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
     name: '',
-    materialGroupId: '',
+    deviceCategoryId: localDeviceCategoryId.value,
     code: '',
-    model: '',
     id: undefined,
-    unit: '',
     remark: '',
     status: CommonStatusEnum.ENABLE,
   }

src/views/pms/devicetemplate/index.vue

@@ -160,7 +160,7 @@
   </el-row>
 
   <!-- 添加或修改 属性模板 对话框 -->
-  <TemplateForm ref="formRef" @success="getList" />
+  <TemplateForm ref="formRef" :category_id="selectedId" @success="getList" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -170,9 +170,11 @@ import { CommonStatusEnum } from '@/utils/constants'
 import * as DeviceTemplateApi from '@/api/pms/devicetemplate'
 import TemplateForm from './TemplateForm.vue'
 import DeviceCategoryTree from './DeviceCategoryTree.vue'
+import { useTreeStore } from '@/store/modules/attrTemplateTreeStore';
 
 defineOptions({ name: 'DeviceAttrsTemplate' })
 
+const treeStore = useTreeStore();
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -190,6 +192,9 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
+// 从 Store 中获取左侧 设备分类树 选中的 节点ID
+const selectedId = computed(() => treeStore.selectedId);
+
 /** 查询 设备属性模板 列表 */
 const getList = async () => {
   loading.value = true