完成NVR设备管理界面

src/views/cameras/nvrlist/NvrList.vue

@@ -50,6 +50,7 @@ import CreateDrawer from './components/CreateDrawer.vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { nvrData } from './type';
 import { storeToRefs } from 'pinia';
+import { conditions } from './constant';
 const nvrStore = useNvrStore();
 const { total, page, pagesize } = storeToRefs(nvrStore);
 const { getNvr, addNvr, deleteNvr, updateNvr } = nvrStore;

src/views/cameras/nvrlist/components/CreateDrawer.vue

@@ -1,23 +1,23 @@
 <template>
   <el-drawer v-model="isDrawer" :size="width" :title="title" @close="handleReset">
     <el-form
-      :model="nvrParams"
+      :model="formParams"
       :rules="rules"
       ref="formRef"
       label-placement="left"
       :label-width="80"
     >
       <el-form-item label="设备名称" prop="nvrName">
-        <el-input placeholder="请输入设备名称，不可重复" v-model="nvrParams.nvrName" />
+        <el-input placeholder="请输入设备名称，不可重复" v-model="formParams.nvrName" />
       </el-form-item>
       <el-form-item label="设备编号" prop="deviceID">
-        <el-input placeholder="自定义编号，不可重复" v-model="nvrParams.deviceID" />
+        <el-input placeholder="自定义编号，不可重复" v-model="formParams.deviceID" />
       </el-form-item>
       <el-form-item label="设备IP" prop="deviceIP">
-        <el-input placeholder="请输入设备IP" v-model="nvrParams.deviceIP" />
+        <el-input placeholder="请输入设备IP" v-model="formParams.deviceIP" />
       </el-form-item>
       <el-form-item label="设备品牌" prop="deviceBrand">
-        <el-select v-model="nvrParams.deviceBrand" placeholder="请选择设备品牌">
+        <el-select v-model="formParams.deviceBrand" placeholder="请选择设备品牌">
           <el-option
             v-for="item in brands"
             :key="item.value"
@@ -27,17 +27,17 @@
         </el-select>
       </el-form-item>
       <el-form-item label="端口" prop="ipAddress">
-        <el-input placeholder="请输入端口号" v-model="nvrParams.ipAddress" />
+        <el-input placeholder="请输入端口号" v-model="formParams.ipAddress" />
       </el-form-item>
       <el-form-item label="用户名" prop="username">
-        <el-input placeholder="请输入用户名" v-model="nvrParams.username" />
+        <el-input placeholder="请输入用户名" v-model="formParams.username" />
       </el-form-item>
       <el-form-item label="密码" prop="password">
-        <el-input placeholder="请输入密码" v-model="nvrParams.password" type="password" />
+        <el-input placeholder="请输入密码" v-model="formParams.password" type="password" />
       </el-form-item>
       <el-form-item label="使用场景" prop="useCondition">
         <el-cascader
-          v-model="nvrParams.useCondition"
+          v-model="formParams.useCondition"
           :options="conditions"
           :props="ismultiple"
           collapse-tags
@@ -46,10 +46,10 @@
         />
       </el-form-item>
       <el-form-item label="负责人" prop="principal">
-        <el-input placeholder="请输入设备安装负责人" v-model="nvrParams.principal" />
+        <el-input placeholder="请输入设备安装负责人" v-model="formParams.principal" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input placeholder="请输入备注" v-model="nvrParams.remark" :rows="5" type="textarea" />
+        <el-input placeholder="请输入备注" v-model="formParams.remark" :rows="5" type="textarea" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -67,7 +67,6 @@ import { nvrData } from '../type';
 import { brands, conditions } from '../constant';
 import { FormRules, ElMessage } from 'element-plus';
 import useNvrStore from '../store/useNvrList';
-import { cloneDeep } from 'lodash-es';
 const nvrStore = useNvrStore();
 const { getNvr } = nvrStore;
 const ismultiple = { multiple: true };
@@ -96,11 +95,11 @@ const initFormNvr = () => ({
   principal: '',
   remark: '',
 });
-const nvrParams = ref<nvrData>(initFormNvr());
+const formParams = ref<nvrData>(initFormNvr());
 const openDrawer = (id?: number) => {
   isDrawer.value = true;
   if (id) {
-    nvrParams.value = getNvr(id);
+    formParams.value = Object.assign(formParams.value, getNvr(id));
     return;
   }
 };
@@ -109,7 +108,7 @@ const closeDrawer = () => {
 };
 const handleReset = () => {
   formRef.value.resetFields();
-  nvrParams.value = Object.assign(nvrParams.value, initFormNvr());
+  formParams.value = Object.assign(formParams.value, initFormNvr());
 };
 const isAddUser = computed(() => {
   return props.title === '添加NVR';
@@ -118,7 +117,9 @@ const validateNvrName = (rule, value, callback) => {
   const nvrList = getNvr();
   let isDuplicate;
   if (nvrList) {
-    isDuplicate = nvrList.some((nvr) => nvr.nvrName === value);
+    isDuplicate = nvrList.some((nvr) => {
+      return nvr.nvrName === value && nvr.id !== formParams.value.id;
+    });
   }
   if (isDuplicate) {
     callback(new Error('设备名称重复,请使用其他名称'));
@@ -130,7 +131,9 @@ const validatedeviceID = (rule, value, callback) => {
   const nvrList = getNvr();
   let isDuplicate;
   if (nvrList) {
-    isDuplicate = nvrList.some((nvr) => nvr.deviceID === value);
+    isDuplicate = nvrList.some((nvr) => {
+      return nvr.deviceID === value && nvr.id !== formParams.value.id;
+    });
   }
   if (isDuplicate) {
     callback(new Error('设备编号重复,请使用其他编号'));
@@ -195,35 +198,37 @@ const rules: FormRules = {
 const formSubmit = () => {
   const nvrList = getNvr();
   formRef.value.validate((valid) => {
-    const maxID = nvrList.reduce((max, nvr) => Math.max(max, nvr.id), 0);
-    const nvrData = {
-      id: isAddUser.value ? maxID + 1 : nvrParams.value.id,
-      nvrName: nvrParams.value.nvrName,
-      deviceID: nvrParams.value.deviceID,
-      deviceIP: nvrParams.value.deviceIP,
-      deviceBrand: nvrParams.value.deviceBrand,
-      ipAddress: nvrParams.value.ipAddress,
-      username: nvrParams.value.username,
-      password: nvrParams.value.password,
-      useCondition: nvrParams.value.useCondition,
-      principal: nvrParams.value.principal,
-      remark: nvrParams.value.remark,
-    };
-    if (isAddUser.value) {
-      emit('form-submit', nvrData);
-      ElMessage({
-        message: '添加NVR设备成功.',
-        type: 'success',
-      });
-    } else {
-      emit('form-edit', nvrParams.value);
-      ElMessage({
-        message: '修改NVR设备成功.',
-        type: 'success',
-      });
+    if (valid) {
+      const maxID = nvrList.reduce((max, nvr) => Math.max(max, nvr.id), 0);
+      const nvrData = {
+        id: isAddUser.value ? maxID + 1 : formParams.value.id,
+        nvrName: formParams.value.nvrName,
+        deviceID: formParams.value.deviceID,
+        deviceIP: formParams.value.deviceIP,
+        deviceBrand: formParams.value.deviceBrand,
+        ipAddress: formParams.value.ipAddress,
+        username: formParams.value.username,
+        password: formParams.value.password,
+        useCondition: formParams.value.useCondition,
+        principal: formParams.value.principal,
+        remark: formParams.value.remark,
+      };
+      if (isAddUser.value) {
+        emit('form-submit', nvrData);
+        ElMessage({
+          message: '添加NVR设备成功.',
+          type: 'success',
+        });
+      } else {
+        emit('form-edit', formParams.value);
+        ElMessage({
+          message: '修改NVR设备成功.',
+          type: 'success',
+        });
+      }
+      closeDrawer();
+      handleReset();
     }
-    closeDrawer();
-    handleReset();
   });
 };
 defineExpose({

src/views/cameras/nvrlist/store/useNvrList.ts

@@ -8,11 +8,11 @@ export const useNvrList = defineStore('nvr-list', () => {
             nvrName: "大华",
             deviceID: "C919-140A-10",
             deviceIP: "172.16.23.9090",
-            deviceBrand: "Hikvision",
+            deviceBrand: "海康",
             ipAddress: "172.16.23.9090",
             username: "Chauncey",
             password: "123456789",
-            useCondition: "5,6,5,7",
+            useCondition: [[5,6],[5,7]],
             principal: "张三三",
             remark: "这是自己添加的数据"
         }

src/views/cameras/nvrlist/type.ts

@@ -7,7 +7,7 @@ export interface nvrData {
     ipAddress: string;
     username: string;
     password: string;
-    useCondition: string;
+    useCondition: number[][];
     principal?: string;
     remark?: string;
 }