设备添加修改时候增加添加标签功能

src/views/heating/heatStation/heatingDistrict/heatingDistrictManage/children/floor/index.vue

@@ -62,7 +62,6 @@ import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/edit.vue';
 import Detail from './component/detail.vue';
 import api from '/@/api/heatingDistrict';
-import { emit } from 'process';
 
 export default defineComponent({
 	name: 'loop',

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

@@ -1,25 +1,31 @@
 <template>
-	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'设备'" v-model="isShowDialog" width="769px">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
-       <el-form-item label="设备标识" prop="key">
+  <div class="system-edit-dic-container">
+    <el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '设备'" v-model="isShowDialog" width="769px">
+      <el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+        <el-form-item label="设备标识" prop="key">
           <el-input v-model="ruleForm.key" placeholder="请输入设备标识" :disabled="ruleForm.id" />
         </el-form-item>
         <el-form-item label="设备名称" prop="name">
           <el-input v-model="ruleForm.name" placeholder="请输入设备名称" />
         </el-form-item>
-          <el-form-item label="所属产品" prop="productId">
+        <el-form-item label="所属产品" prop="productId">
           <el-select v-model="ruleForm.productId" :disabled="ruleForm.id" placeholder="请选择所属产品" class="w100">
-            <el-option
-              v-for="item in productData"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
+            <el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
-        </el-form-item> 
+        </el-form-item>
         <el-form-item label="设备坐标" prop="lng">
-          <el-input :value="ruleForm.lng + ' , ' + ruleForm.lat" placeholder="选择设备坐标" @click="selectPosition" read-only />
+          <el-input :value="ruleForm.lng ? (ruleForm.lng + ' , ' + ruleForm.lat) : ''" placeholder="选择设备坐标" @click="selectPosition" read-only />
+        </el-form-item>
+        <el-form-item label="标签设置" prop="lng">
+          <div class="tags-wrapper">
+            <el-button type="primary" size="small" @click="toAddTag">添加标签</el-button>
+            <div class="tags">
+              <div class="tag flex" v-for="tag,i in ruleForm.tags">
+                <el-tag>{{ tag.key }} : {{ tag.name }} : {{ tag.value }}</el-tag>
+                <el-button type="danger" size="small" @click="delTagRow(i)">删除</el-button>
+              </div>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item label="设备证书" prop="certificate">
           <el-input v-model="ruleForm.certificate" placeholder="请输入设备证书" />
@@ -29,68 +35,89 @@
           <el-input v-model="ruleForm.secureKey" placeholder="请输入设备秘钥" />
         </el-form-item>
 
-         <el-form-item label="固件版本号" prop="version">
+        <el-form-item label="固件版本号" prop="version">
           <el-input v-model="ruleForm.version" placeholder="请输入固件版本号" />
         </el-form-item>
-      
-  
+
+
         <el-form-item label="备注" prop="desc">
           <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
-				</span>
-			</template>
-		</el-dialog>
-    <el-dialog title="地图选点（点击地图即可）"  v-model="mapVisible" width="1000px" append-to-body>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" size="default">取 消</el-button>
+          <el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <el-dialog title="地图选点（点击地图即可）" v-model="mapVisible" width="1000px" append-to-body>
       <div class="map" id="map-container-conpany" style="height: 65vh"></div>
     </el-dialog>
-	</div>
+    <tagVue ref="tagRef"></tagVue>
+  </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent,ref, unref, nextTick } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref, nextTick } from 'vue';
 import api from '/@/api/device';
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
+import tagVue from './tag.vue'
+
 interface RuleFormState {
-  id:number;
-  name:string;
-  certificate:string;
-  secureKey:string;
-  version:string;
-  productId:number;
+  id: number;
+  key: string;
+  name: string;
+  certificate: string;
+  secureKey: string;
+  version: string;
+  productId: number | string;
+  tags: Tag[];
   lng: string;
   lat: string;
-  desc:string;
+  desc: string;
 }
 interface DicState {
-	isShowDialog: boolean;
-	ruleForm: RuleFormState;
-  rules:{}
+  productData: any[];
+  isShowDialog: boolean;
+  ruleForm: RuleFormState;
+  rules: {}
+}
+interface Tag {
+  key: string;
+  name: string;
+  value: string;
 }
 
 export default defineComponent({
-	name: 'deviceEditPro',
-	setup(prop,{emit}) {
+  name: 'deviceEditPro',
+  components: {
+    tagVue,
+  },
+  setup(prop, { emit }) {
     const formRef = ref<HTMLElement | null>(null);
+    const tagRef = ref<HTMLElement | null>(null);
     const mapVisible = ref(false);
-		const state = reactive<DicState>({
-			isShowDialog: false,
+    const state = reactive<DicState>({
+      isShowDialog: false,
       productData: [], // 分类数据
-			ruleForm: {
-        id:0,
-        name:'',
-        productId:'',
-        certificate:'',
+      ruleForm: {
+        id: 0,
+        key: '',
+        name: '',
+        productId: '',
+        certificate: '',
+        tags: [{
+          key: 'key',
+          name: 'name',
+          value: 'value'
+        }],
         lng: '',
         lat: '',
-        secureKey:'',
-        version:'',
-        desc:''
-			},
+        secureKey: '',
+        version: '',
+        desc: ''
+      },
       rules: {
         name: [
           { required: true, message: "设备名称不能为空", trigger: "blur" }
@@ -100,61 +127,64 @@ export default defineComponent({
         ],
         productId: [{ required: true, message: '所属产品不能为空', trigger: 'blur' }],
       }
-		});
-		// 打开弹窗
-		const openDialog = (row: RuleFormState|null) => {
+    });
+    // 打开弹窗
+    const openDialog = (row: RuleFormState | null) => {
       resetForm();
 
-        api.product.getLists({ status: 1 }).then((res: any) => {
-          state.productData = res.product || [];
-        });
+      api.product.getLists({ status: 1 }).then((res: any) => {
+        state.productData = res.product || [];
+      });
 
 
-      if (row){
+      if (row) {
         // api.dict.getType(row.id).then((res:any)=>{
         //   state.ruleForm = res.data.dictType
         // })
         state.ruleForm = row;
+        state.ruleForm.tags = row.tags|| []
       }
-			state.isShowDialog = true;
-		};
-    const resetForm = ()=>{
+      state.isShowDialog = true;
+    };
+    const resetForm = () => {
       state.ruleForm = {
-        id:0,
-        name:'',
-        productId:'',
+        id: 0,
+        key: '',
+        name: '',
+        productId: '',
+        tags: [],
         lng: '',
         lat: '',
-        certificate:'',
-        secureKey:'',
-        version:'',
-        desc:''
+        certificate: '',
+        secureKey: '',
+        version: '',
+        desc: ''
       }
     };
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    // 新增
+    const onSubmit = () => {
       const formWrap = unref(formRef) as any;
       if (!formWrap) return;
       formWrap.validate((valid: boolean) => {
         if (valid) {
-          if(state.ruleForm.id!==0){
+          if (state.ruleForm.id !== 0) {
             //修改
-            api.instance.edit(state.ruleForm).then(()=>{
+            api.instance.edit(state.ruleForm).then(() => {
               ElMessage.success('设备类型修改成功');
               closeDialog(); // 关闭弹窗
               emit('typeList')
             })
-          }else{
+          } else {
             //添加
-            api.instance.add(state.ruleForm).then(()=>{
+            api.instance.add(state.ruleForm).then(() => {
               ElMessage.success('设备类型添加成功');
               closeDialog(); // 关闭弹窗
               emit('typeList')
@@ -162,7 +192,18 @@ export default defineComponent({
           }
         }
       });
-		};
+    };
+    function toAddTag() {
+      const tag = tagRef.value as any
+      tag.addRow()
+    };
+    function addTag(row: Tag) {
+      console.log(row)
+      state.ruleForm.tags.push(row)
+    };
+    function delTagRow(i: number) {
+      state.ruleForm.tags.splice(i, 1)
+    };
     function selectPosition() {
       mapVisible.value = true;
       nextTick(() => {
@@ -178,17 +219,34 @@ export default defineComponent({
       });
     }
 
-
-		return {
-			mapVisible,
-			selectPosition,
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
+    return {
+      tagRef,
+      delTagRow,
+      toAddTag,
+      addTag,
+      mapVisible,
+      selectPosition,
+      openDialog,
+      closeDialog,
+      onCancel,
+      onSubmit,
       formRef,
-			...toRefs(state),
-		};
-	},
+      ...toRefs(state),
+    };
+  },
 });
 </script>
+
+<style lang="scss" scoped>
+.tags-wrapper {
+  .tag {
+    margin: 8px 0;
+  }
+
+  .tags {
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog title="标签设置" v-model="isShowDialog" width="500px">
+    <el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+      <el-form-item label="标签键名" prop="key">
+        <el-input v-model="ruleForm.key" placeholder="请输入标签键名" />
+      </el-form-item>
+
+      <el-form-item label="标签名称" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入标签名称" />
+      </el-form-item>
+
+      <el-form-item label="标签值" prop="value">
+        <el-input v-model="ruleForm.value" placeholder="请输入标签值" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="isShowDialog = false" size="default">取 消</el-button>
+      <el-button type="primary" @click="onSubmit" size="default">添 加</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, getCurrentInstance } from 'vue';
+
+const { proxy } = getCurrentInstance()
+
+interface Tag {
+  key: string;
+  name: string;
+  value: string;
+}
+
+const form = {
+  key: '',
+  name: '',
+  value: '',
+}
+
+const formRef = ref(null)
+const isShowDialog = ref(false)
+
+const ruleForm = reactive<Tag>({
+  ...form
+})
+
+const rules = {
+  key: [{ required: true, message: "请输入标签键名", trigger: "change" }],
+  name: [{ required: true, message: "请输入标签名称", trigger: "change" }],
+  value: [{ required: true, message: '请输入标签值', trigger: 'change' }],
+}
+
+function addRow() {
+  const fromDom = formRef.value as any
+  fromDom && fromDom.resetFields()
+  Object.assign(ruleForm, { ...form })
+  isShowDialog.value = true
+}
+
+async function onSubmit() {
+  const fromDom = formRef.value as any
+  await fromDom.validate()
+  proxy.$parent.addTag({ ...ruleForm })
+  isShowDialog.value = false
+}
+
+defineExpose({
+  addRow
+})
+
+</script>
+
+<style lang="scss" scoped></style>