feat: 优化设备详情中标签的显示，及编辑设备时标签的修改操作

src/views/iot/device/instance/component/edit.vue

@@ -23,6 +23,7 @@
             <div class="tags">
               <div class="tag flex" v-for="tag, i in ruleForm.tags" :key="tag.key">
                 <el-tag>{{ tag.key }} : {{ tag.name }} : {{ tag.value }}</el-tag>
+                <el-button type="warning" size="small" @click="toUpdateTag(tag)">修改</el-button>
                 <el-button type="danger" size="small" @click="delTagRow(i)">删除</el-button>
               </div>
             </div>
@@ -301,6 +302,10 @@ export default defineComponent({
     function delTagRow(i: number) {
       state.ruleForm.tags.splice(i, 1)
     }
+    function toUpdateTag(row: Tag) {
+      const tag = tagRef.value as any
+      tag.editRow(row)
+    }
 
     // 所属产品变化的时候，更新产品详情
     const productKeyChange = (productKey: string) => {
@@ -331,6 +336,7 @@ export default defineComponent({
       selectMap,
       mapRef,
       updateMap,
+      toUpdateTag,
       delTagRow,
       toAddTag,
       addTag,

src/views/iot/device/instance/component/tag.vue

@@ -15,7 +15,8 @@
     </el-form>
     <template #footer>
       <el-button @click="isShowDialog = false">取 消</el-button>
-      <el-button type="primary" @click="onSubmit">添 加</el-button>
+      <el-button type="primary" v-if="isEdit" @click="onEdit">修 改</el-button>
+      <el-button type="primary" v-else @click="onSubmit">添 加</el-button>
     </template>
   </el-dialog>
 </template>
@@ -32,6 +33,7 @@ interface Tag {
 }
 
 const form = {
+  id: '',
   key: '',
   name: '',
   value: '',
@@ -39,6 +41,8 @@ const form = {
 
 const formRef = ref(null)
 const isShowDialog = ref(false)
+const isEdit = ref(false)
+let editRowData:any
 
 const ruleForm = reactive<Tag>({
   ...form
@@ -51,12 +55,22 @@ const rules = {
 }
 
 function addRow() {
+  isEdit.value = false
   const fromDom = formRef.value as any
   fromDom && fromDom.resetFields()
   Object.assign(ruleForm, { ...form })
   isShowDialog.value = true
 }
 
+function editRow(row: Tag) {
+  const fromDom = formRef.value as any
+  fromDom && fromDom.resetFields()
+  Object.assign(ruleForm, row)
+  isEdit.value = true
+  editRowData = row
+  isShowDialog.value = true
+}
+
 async function onSubmit() {
   const fromDom = formRef.value as any
   await fromDom.validate()
@@ -64,8 +78,18 @@ async function onSubmit() {
   isShowDialog.value = false
 }
 
+async function onEdit() {
+  const fromDom = formRef.value as any
+  await fromDom.validate()
+  editRowData.key = ruleForm.key
+  editRowData.name = ruleForm.name
+  editRowData.value = ruleForm.value
+  isShowDialog.value = false
+}
+
 defineExpose({
-  addRow
+  addRow,
+  editRow
 })
 
 </script>

src/views/iot/device/instance/detail.vue

@@ -97,7 +97,7 @@
             <el-descriptions-item label="详细地址">{{ detail.address }}</el-descriptions-item>
             <el-descriptions-item label="说明">{{ detail.desc }}</el-descriptions-item>
             <el-descriptions-item label="标签">
-              <el-tag v-for="(item, index) in detail.tags" :key="index">{{ item.name }}</el-tag>
+              <el-tag v-for="(item, index) in detail.tags" :key="index" class="mr-2">{{ item.name }}</el-tag>
             </el-descriptions-item>
           </el-descriptions>
           <div class="flex" style="margin-top: 20px;">