产品添加修改

设备添加修改

src/api/device/index.ts

@@ -1,12 +1,18 @@
 import { get, post, del, put } from '/@/utils/request';
 
 export default {
+  common:{
+    singleImg: (data: object) => post('/common/singleImg', data),
+  },
   product: {
     getList: (params: object) => get('/product/page_list', params),
-    getRole: (id: number) => get('/system/role/getInfoById', { id }),
-    addRole: (data: object) => post('/system/role/add', data),
-    deleteRole: (id: number) => del('/system/role/delInfoById', { id }),
-    editRole: (data: object) => put('/system/role/edit', data)
+    getLists: (params: object) => get('/product/list', params),
+    add: (data: object) => post('/product/add', data),
+    delete: (id: number) => del('/product/del', { id }),
+    edit: (data: object) => put('/product/edit', data),
+    detail: (id: number) => get('/product/detail', { id }),
+    message_protocol_list: (params: object) => get('/product/protocol/message_protocol_list', params),
+    trunsport_protocol_list: (params: object) => get('/product/protocol/trunsport_protocol_list', params),
   },
   category:{
     getList: (params: object) => get('/product/category/list', params),
@@ -16,12 +22,13 @@ export default {
   },
   instance:{
     getList: (params: object) => get('/product/device/page_list', params),
-    add: (data: object) => post('/product/category/add', data),
-    edit: (data: object) => put('/product/category/edit', data),
-    del: (id: number) => del('/product/category/del', { id }),
+    add: (data: object) => post('/product/device/add', data),
+    edit: (data: object) => put('/product/device/edit', data),
+    del: (id: number) => del('/product/device/del', { id }),
   },
   dept: {
     getList: (params: object) => get('/system/dept/tree', params),
   },
   
+  
 }

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

@@ -1,25 +1,59 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.dictId!==0?'修改':'添加')+'产品'" v-model="isShowDialog" width="769px">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
-        <el-form-item label="产品名称" prop="dictName">
-          <el-input v-model="ruleForm.dictName" placeholder="请输入产品名称" />
+		<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="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入设备名称" />
         </el-form-item>
-      
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="ruleForm.status">
-            <el-radio :label="1" >启用</el-radio>
-            <el-radio :label="0" >禁用</el-radio>
-          </el-radio-group>
+
+         <el-form-item label="设备标识" prop="key">
+          <el-input v-model="ruleForm.key" placeholder="请输入设备标识" />
+        </el-form-item>
+
+           <el-form-item label="所属产品" prop="productId">
+       
+                <el-select v-model="ruleForm.productId" placeholder="请选择所属产品" class="w100">
+              <el-option
+                v-for="item in productData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+            </el-form-item> 
+
+         <el-form-item label="所属部门" prop="deptId">
+              <el-cascader :options="deptData" :props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }" placeholder="请选择所属部门" clearable class="w100" v-model="ruleForm.deptId">
+                <template #default="{ node, data }">
+                  <span>{{ data.deptName }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
+            </el-form-item> 
+
+           
+        
+        <el-form-item label="设备证书" prop="certificate">
+          <el-input v-model="ruleForm.certificate" placeholder="请输入设备证书" />
+        </el-form-item>
+
+        <el-form-item label="设备秘钥" prop="secureKey">
+          <el-input v-model="ruleForm.secureKey" placeholder="请输入设备秘钥" />
+        </el-form-item>
+
+         <el-form-item label="固件版本号" prop="version">
+          <el-input v-model="ruleForm.version" placeholder="请输入固件版本号" />
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容"></el-input>
+      
+  
+        <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.dictId!==0?'修 改':'添 加'}}</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -33,9 +67,12 @@ import {ElMessage} from "element-plus";
 interface RuleFormState {
   id:number;
   name:string;
-  dictType:string;
-  status:number;
-  remark:string;
+  certificate:string;
+  secureKey:string;
+  version:string;
+  productId:number;
+  deptId:number;
+  desc:string;
 }
 interface DicState {
 	isShowDialog: boolean;
@@ -49,24 +86,46 @@ export default defineComponent({
     const formRef = ref<HTMLElement | null>(null);
 		const state = reactive<DicState>({
 			isShowDialog: false,
+      productData: [], // 分类数据
+      deptData: [], // 
 			ruleForm: {
-        dictId:0,
-        dictName:'',
-        dictType:'',
-        status:1,
-        remark:''
+        id:0,
+        name:'',
+        productId:'',
+        deptId:0,
+        certificate:'',
+        secureKey:'',
+        version:'',
+        desc:''
 			},
       rules: {
         name: [
-          { required: true, message: "产品名称不能为空", trigger: "blur" }
-        ]
+          { required: true, message: "设备名称不能为空", trigger: "blur" }
+        ],
+        key: [
+          { required: true, message: "设备标识不能为空", trigger: "blur" }
+        ],
+        productId: [{ required: true, message: '所属产品不能为空', trigger: 'blur' }],
+        deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
+        certificate: [{ required: true, message: '请输入设备证书', trigger: 'blur' }],
+        secureKey: [{ required: true, message: '请输入设备秘钥', trigger: 'blur' }],
+        version: [{ required: true, message: '请输入固件版本号', trigger: 'blur' }],
       }
 		});
 		// 打开弹窗
 		const openDialog = (row: RuleFormState|null) => {
       resetForm();
+
+        api.product.getLists({ status: 1 }).then((res: any) => {
+          state.productData = res.product || [];
+        });
+        api.dept.getList({ status: -1 }).then((res: any) => {
+          state.deptData = res || [];
+        });
+
+
       if (row){
-        // api.dict.getType(row.dictId).then((res:any)=>{
+        // api.dict.getType(row.id).then((res:any)=>{
         //   state.ruleForm = res.data.dictType
         // })
         state.ruleForm = row;
@@ -75,11 +134,14 @@ export default defineComponent({
 		};
     const resetForm = ()=>{
       state.ruleForm = {
-        dictId:0,
-        dictName:'',
-        dictType:'',
-        status:1,
-        remark:''
+        id:0,
+        name:'',
+        productId:'',
+        deptId:0,
+        certificate:'',
+        secureKey:'',
+        version:'',
+        desc:''
       }
     };
 		// 关闭弹窗
@@ -96,20 +158,20 @@ export default defineComponent({
       if (!formWrap) return;
       formWrap.validate((valid: boolean) => {
         if (valid) {
-          if(state.ruleForm.dictId!==0){
+          if(state.ruleForm.id!==0){
             //修改
-            // api.dict.editType(state.ruleForm).then(()=>{
-            //   ElMessage.success('产品类型修改成功');
-            //   closeDialog(); // 关闭弹窗
-            //   emit('typeList')
-            // })
+            api.instance.edit(state.ruleForm).then(()=>{
+              ElMessage.success('设备类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
           }else{
             //添加
-            // api.dict.addType(state.ruleForm).then(()=>{
-            //   ElMessage.success('产品类型添加成功');
-            //   closeDialog(); // 关闭弹窗
-            //   emit('typeList')
-            // })
+            api.instance.add(state.ruleForm).then(()=>{
+              ElMessage.success('设备类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
           }
         }
       });

src/views/device/instance/detail.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="system-dic-container">
+  </div>
+ </template>
+    

src/views/device/instance/index.vue

@@ -67,8 +67,11 @@
         </el-table-column>
          <el-table-column prop="registryTime" label="激活时间" align="center" width="180"></el-table-column> 
          <el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="180"></el-table-column> 
-        <el-table-column label="操作" width="100" align="center">
+        <el-table-column label="操作" width="200" align="center">
           <template #default="scope">
+		   <router-link :to="'/device/instance/detail/id/' + scope.row.id" class="link-type" style="padding-right: 10px;color: #409eff;">
+              <span>详情</span>
+            </router-link>
             <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)">修改</el-button>
             <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
           </template>
@@ -128,8 +131,8 @@ export default defineComponent({
 				param: {
 					pageNum: 1,
 					pageSize: 10,
-					dictName: '',
-					dictType: '',
+					name: '',
+					key: '',
 					status: '',
 					dateRange: [],
 				},
@@ -159,8 +162,8 @@ export default defineComponent({
 			let msg = '你确定要删除所选数据？';
 			let ids: number[] = [];
 			if (row) {
-				msg = `此操作将永久删除用户：“${row.name}”，是否继续?`;
-				ids = [row.dictId];
+				msg = `此操作将永久删除设备：“${row.name}”，是否继续?`;
+				ids = [row.id];
 			} else {
 				ids = state.ids;
 			}
@@ -193,7 +196,7 @@ export default defineComponent({
 		};
 		// 多选框选中数据
 		const handleSelectionChange = (selection: TableDataRow[]) => {
-			state.ids = selection.map((item) => item.dictId);
+			state.ids = selection.map((item) => item.id);
 		};
 		return {
 			addDicRef,

src/views/device/product/component/editPro.vue

@@ -1,14 +1,15 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.dictId!==0?'修改':'添加')+'产品'" v-model="isShowDialog" width="769px">
+		<el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'产品'" v-model="isShowDialog" width="769px">
 			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
         <el-form-item label="产品名称" prop="name">
           <el-input v-model="ruleForm.name" placeholder="请输入产品名称" />
         </el-form-item>
         <el-form-item label="产品图片" prop="imageUrl">
         <el-upload
+            name="icon"
             class="avatar-uploader"
-            action="http://zhgy.sagoo.cn:8899/api/v1/common/singleImg"
+            :action="singleImg"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
@@ -20,37 +21,66 @@
          <el-form-item label="产品标识" prop="key">
           <el-input v-model="ruleForm.key" placeholder="请输入产品标识" />
         </el-form-item>
-        <el-form-item label="产品分类">
-              <el-cascader :options="cateData" :props="{ checkStrictly: true,emitPath: false, value: 'id', label: 'name' }" placeholder="请选择分类" clearable class="w100" v-model="ruleForm.parentId">
+        <el-form-item label="产品分类" prop="categoryId">
+              <el-cascader :options="cateData" :props="{ checkStrictly: true,emitPath: false, value: 'id', label: 'name' }" placeholder="请选择分类" clearable class="w100" v-model="ruleForm.categoryId">
                 <template #default="{ node, data }">
                   <span>{{ data.name }}</span>
                   <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                 </template>
               </el-cascader>
             </el-form-item>
-             <el-form-item label="所属部门">
+
+        <el-form-item label="所属部门" prop="deptId">
               <el-cascader :options="deptData" :props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }" placeholder="请选择所属部门" clearable class="w100" v-model="ruleForm.deptId">
                 <template #default="{ node, data }">
                   <span>{{ data.deptName }}</span>
                   <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                 </template>
               </el-cascader>
+            </el-form-item> 
+
+           
+          <el-form-item label="消息协议" prop="messageProtocol">
+      
+
+               <el-select v-model="ruleForm.messageProtocol" placeholder="请选择消息协议">
+              <el-option
+                v-for="item in messageData"
+                :key="item.key"
+                :label="item.name"
+                :value="item.key"
+              />
+            </el-select>
+            </el-form-item> 
+
+            <el-form-item label="传输协议" prop="transportProtocol">
+           
+
+                 <el-select v-model="ruleForm.transportProtocol" placeholder="请选择传输协议">
+              <el-option
+                v-for="item in tranData"
+                :key="item.key"
+                :label="item.name"
+                :value="item.key"
+              />
+            </el-select>
             </el-form-item>
+
       
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="ruleForm.status">
-            <el-radio :label="1" >启用</el-radio>
-            <el-radio :label="0" >禁用</el-radio>
+        <el-form-item label="设备类型" prop="deviceType">
+          <el-radio-group v-model="ruleForm.deviceType">
+            <el-radio label="网关" >网关</el-radio>
+            <el-radio label="设备" >设备</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容"></el-input>
+        <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.dictId!==0?'修 改':'添 加'}}</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -66,15 +96,17 @@ interface RuleFormState {
   id:number;
   name:string;
   dictType:string;
+  deviceType:string;
   status:number;
-  remark:string;
-  imageUrl:string;
+  desc:string;
 }
 interface DicState {
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
   cateData: RuleFormState[];
   deptData: RuleFormState[];
+  messageData:RuleFormState[];
+  tranData:RuleFormState[];
   rules:{}
 }
 
@@ -82,17 +114,27 @@ export default defineComponent({
 	name: 'deviceEditPro',
 	setup(prop,{emit}) {
     const formRef = ref<HTMLElement | null>(null);
+    const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+
 		const state = reactive<DicState>({
 			isShowDialog: false,
     	cateData: [], // 分类数据
-    	deptData: [], // 分类数据
+    	deptData: [], // 
+    	messageData: [], // 
+    	tranData: [], // 
+    	imageUrl: "", // 
+      singleImg:baseURL+"/product/icon/upload",
 
 			ruleForm: {
-        dictId:0,
-        dictName:'',
-        dictType:'',
+        id:0,
+        name:'',
+        categoryId:'',
+        deptId:'',
+        messageProtocol:'',
+        transportProtocol:'',
+        deviceType:'网关',
         status:1,
-        remark:''
+        desc:''
 			},
       rules: {
         name: [
@@ -100,7 +142,12 @@ export default defineComponent({
         ],
          key: [
           { required: true, message: "产品标识不能为空", trigger: "blur" }
-        ]
+        ],
+        parentId: [{ required: true, message: '产品分类不能为空', trigger: 'blur' }],
+        deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
+        messageProtocol: [{ required: true, message: '消息协议不能为空', trigger: 'blur' }],
+        transportProtocol: [{ required: true, message: '传输协议不能为空', trigger: 'blur' }],
+        deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
       }
 		});
 
@@ -108,10 +155,9 @@ export default defineComponent({
       response,
       uploadFile
     ) => {
-      console.log(response);
-      console.log(11111111);
-      console.log(uploadFile);
-      imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+
+      state.imageUrl = response.data.name
+        state.ruleForm.imageUrl=response.data.name
     }
 
     const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
@@ -131,16 +177,18 @@ export default defineComponent({
           state.cateData = res.category || [];
         });
         api.dept.getList({ status: -1 }).then((res: any) => {
-          console.log(res)
-          
           state.deptData = res || [];
         });
+        api.product.message_protocol_list({ status: -1 }).then((res: any) => {
+          state.messageData = res.data || [];
+        });
+        api.product.trunsport_protocol_list({ status: -1 }).then((res: any) => {
+          state.tranData = res.data || [];
+        });
       if (row){
         // api.dict.getType(row.dictId).then((res:any)=>{
         //   state.ruleForm = res.data.dictType
-        // })
-
-      
+        // }
 
         state.ruleForm = row;
       }
@@ -148,11 +196,11 @@ export default defineComponent({
 		};
     const resetForm = ()=>{
       state.ruleForm = {
-        dictId:0,
-        dictName:'',
+        id:0, 
+        name:'',
         dictType:'',
         status:1,
-        remark:''
+        desc:''
       }
     };
 		// 关闭弹窗
@@ -169,20 +217,21 @@ export default defineComponent({
       if (!formWrap) return;
       formWrap.validate((valid: boolean) => {
         if (valid) {
-          if(state.ruleForm.dictId!==0){
+          if(state.ruleForm.id!==0){
             //修改
-            // api.dict.editType(state.ruleForm).then(()=>{
-            //   ElMessage.success('产品类型修改成功');
-            //   closeDialog(); // 关闭弹窗
-            //   emit('typeList')
-            // })
+            api.product.edit(state.ruleForm).then(()=>{
+              ElMessage.success('产品类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
           }else{
             //添加
-            // api.dict.addType(state.ruleForm).then(()=>{
-            //   ElMessage.success('产品类型添加成功');
-            //   closeDialog(); // 关闭弹窗
-            //   emit('typeList')
-            // })
+            console.log(state.ruleForm);
+            api.product.add(state.ruleForm).then(()=>{
+              ElMessage.success('产品类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
           }
         }
       });
@@ -191,7 +240,7 @@ export default defineComponent({
 
 		return {
 			openDialog,
-      beforeAvatarUpload,
+      handleAvatarSuccess,
       beforeAvatarUpload,
 			closeDialog,
 			onCancel,

src/views/device/product/index.vue

@@ -156,8 +156,8 @@ export default defineComponent({
 			let msg = '你确定要删除所选数据？';
 			let ids: number[] = [];
 			if (row) {
-				msg = `此操作将永久删除用户：“${row.name}”，是否继续?`;
-				ids = [row.dictId];
+				msg = `此操作将永久删除产品：“${row.name}”，是否继续?`;
+				ids = [row.id];
 			} else {
 				ids = state.ids;
 			}
@@ -171,7 +171,7 @@ export default defineComponent({
 				type: 'warning',
 			})
 				.then(() => {
-					api.dict.deleteType(ids).then(() => {
+					api.product.delete(ids).then(() => {
 						ElMessage.success('删除成功');
 						typeList();
 					});
@@ -190,7 +190,7 @@ export default defineComponent({
 		};
 		// 多选框选中数据
 		const handleSelectionChange = (selection: TableDataRow[]) => {
-			state.ids = selection.map((item) => item.dictId);
+			state.ids = selection.map((item) => item.id);
 		};
 		return {
 			addDicRef,

src/views/system/menu/index.vue

@@ -45,7 +45,7 @@
             {{row.isHide?'隐藏':'显示'}}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="160" align="center" fixed="right">
+        <el-table-column label="操作" width="460" align="center" fixed="right">
           <template #default="scope">
             <el-button v-if="!scope.row.menuType" size="small" type="text" @click="onOpenAddMenu(scope.row)">新增</el-button>
             <el-button size="small" text type="warning" @click="onOpenEditMenu(scope.row)">修改</el-button>