设备管理

src/views/archiveKeeping/deviceManage/form.vue

@@ -3,23 +3,38 @@
   <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
     <div class="setting-dialog">
       <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
-        <el-form-item label="库房名称" prop="name">
-          <el-input v-model="name" />
-        </el-form-item>
-        <el-form-item label="库房编码" prop="code">
-          <el-input v-model="form.code" />
-        </el-form-item>
-        <el-form-item label="管理员" prop="admin">
-          <el-input v-model="form.admin" />
-        </el-form-item>
-        <el-form-item label="联系电话" prop="phone">
-          <el-input v-model="form.phone" />
-        </el-form-item>
-        <el-row class="area-style">
-          <el-form-item label="库房面积" prop="area">
-            <el-input v-model="form.area" /><span class="area-unit">/m²</span>
+        <div v-if="!isAddArea">
+          <el-form-item label="库房名称" prop="name">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="库房编码" prop="code">
+            <el-input v-model="form.code" />
+          </el-form-item>
+          <el-form-item label="管理员" prop="admin">
+            <el-input v-model="form.admin" />
+          </el-form-item>
+          <el-form-item label="联系电话" prop="phone">
+            <el-input v-model="form.phone" />
           </el-form-item>
-        </el-row>
+          <el-row class="area-style">
+            <el-form-item label="库房面积" prop="area">
+              <el-input v-model="form.area" /><span class="area-unit">/m²</span>
+            </el-form-item>
+          </el-row>
+        </div>
+        <div v-else>
+          <el-row>
+            <el-form-item label="所属库房" prop="parentName">
+              <el-input v-model="selectedStore.cnName" disabled />
+            </el-form-item>
+          </el-row>
+          <el-form-item label="区域名称" prop="areaName">
+            <el-input v-model="form.areaName" />
+          </el-form-item>
+          <el-form-item label="区域编码" prop="areaCode">
+            <el-input v-model="form.areaCode" />
+          </el-form-item>
+        </div>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" :rows="4" style="width: 580px;" />
         </el-form-item>
@@ -40,7 +55,7 @@ const defaultForm = { id: null, name: null, code: null, admin: null, phone: null
 export default {
   mixins: [form(defaultForm)],
   props: {
-    selectedCategory: {
+    selectedStore: {
       type: Object,
       default: function() {
         return {}
@@ -49,36 +64,35 @@ export default {
   },
   data() {
     return {
-      isAdd: false,
+      isAddArea: false,
       rules: {
         name: [
           { required: true, message: '库房名称不可为空', trigger: 'blur' }
         ],
+        areaName: [
+          { required: true, message: '区域名称不可为空', trigger: 'blur' }
+        ],
         code: [
           { required: true, message: '库房编码不可为空', trigger: 'blur' }
+        ],
+        areaCode: [
+          { required: true, message: '区域编码不可为空', trigger: 'blur' }
         ]
       }
     }
   },
   watch: {
-    selectedCategory: function(newValue, oldValue) {
+    selectedStore: function(newValue, oldValue) {
     }
   },
   created() {
   },
   methods: {
-    // 新建时，判断当前节点类型，“门类类型” option区分可选
-    beforeToAdd() {
-      this.form.isType = null
-    },
     [CRUD.HOOK.beforeSubmit]() {
     },
     // 提交前的验证
     [CRUD.HOOK.afterValidateCU](crud) {
       return true
-    },
-    changeType() {
-      this.isAdd = this.form.isType === 2
     }
   }
 }

src/views/archiveKeeping/deviceManage/index.vue

@@ -51,12 +51,13 @@
         <div class="container-right">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
+          <TableList ref="tableList" :selected-store="selectedStore" />
         </div>
       </div>
       <!--修改新增表单组件-->
       <eForm ref="eform" :selected-store="selectedStore" />
       <!--排序对话框组件-->
-      <!-- <sortDialog ref="sort" @treeNodeSort="treeNodeSort" /> -->
+      <sortDialog ref="sort" @treeNodeSort="treeNodeSort" />
     </div>
   </div>
 </template>
@@ -66,12 +67,14 @@ import crudCategory from '@/api/system/category/category'
 import CRUD, { presenter, header } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import eForm from './form'
+import sortDialog from './sortDialog'
+import TableList from './tableList'
 import Vue from 'vue'
 import dataJson from './data.json'
 
 export default {
   name: 'DeviceManage',
-  components: { crudOperation, eForm },
+  components: { crudOperation, eForm, sortDialog, TableList },
   cruds() {
     return [
       CRUD({
@@ -173,18 +176,28 @@ export default {
         }
       }
     },
-    // 新增 - 判断当前节点类型，卷内/文件不可新建
+    // 新增 - 判断当前节点类型
     [CRUD.HOOK.beforeToAdd](crud, form, btn) {
       const isCanAddKey = JSON.parse(localStorage.getItem('currentStoreKey'))
-      if (isCanAddKey.isType === 4 || isCanAddKey.isType === 5) {
-        this.$message({
-          message: '此门类下不可新建门类',
-          type: 'error',
-          duration: 2500
-        })
-        return false
+      console.log('isCanAddKey', isCanAddKey)
+      if (isCanAddKey.isType === '2') {
+        this.$refs.eform.isAddArea = true
+        this.$refs.eform.crud.title = '区域'
+      } else {
+        this.$refs.eform.isAddArea = false
+        this.$refs.eform.crud.title = '库房'
+      }
+    },
+    // 编辑前
+    [CRUD.HOOK.beforeToEdit](crud, form, btn) {
+      const isCanAddKey = JSON.parse(localStorage.getItem('currentStoreKey'))
+      if (isCanAddKey.isType === '2') {
+        this.$refs.eform.isAddArea = false
+        this.$refs.eform.crud.title = '库房'
+      } else {
+        this.$refs.eform.isAddArea = true
+        this.$refs.eform.crud.title = '区域'
       }
-      this.$refs.eform.beforeToAdd()
     },
     // 新增/编辑后 - 新增后默认选中新增的库房
     [CRUD.HOOK.afterSubmit](crud, addedCategory) {

src/views/archiveKeeping/deviceManage/module/childDevice.vue

@@ -0,0 +1,65 @@
+<template>
+  <!--表单组件-->
+  <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="childDeviceVisible" :title="childDeviceTitle">
+    <div class="setting-dialog">
+      <el-table
+        ref="table"
+        :data="childDeviceTable"
+        row-key="id"
+        highlight-current-row
+        style="min-width: 100%;"
+        @selection-change="selectionChangeHandler"
+        @row-click="clickRowHandler"
+      >
+        <el-table-column type="index" label="通道" align="center" width="55" />
+        <el-table-column label="摄像机名称" prop="child" min-width="80" />
+        <el-table-column label="所属设备" prop="deviceTypeId.name" min-width="140" />
+        <el-table-column label="状态" prop="categoryName" min-width="60" align="center">
+          <template slot-scope="scope">
+            <span :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="操作" min-width="180">
+          <template slot-scope="scope">
+            <div>{{ scope.row.createTime | parseTime }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination v-if="childDeviceTable.length!==0" />
+    </div></el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  data() {
+    return {
+      childDeviceTable: [],
+      selections: [],
+      childDeviceVisible: false,
+      childDeviceTitle: '子设备管理'
+    }
+  },
+  watch: {
+  },
+  created() {
+  },
+  methods: {
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    handleCloseDialog(done) {
+      // 关闭弹框
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/archiveKeeping/deviceManage/sortDialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="排序" :visible.sync="sortVisible" @opened="opened">
+    <div class="setting-dialog">
+      <i class="drag-tip">提示：使用鼠标拖动调整顺序</i>
+      <el-table :data="sortTableData" :tree-props="{children: 'childrens'}" class="store-sort" style="width: 100%;" :max-height="tableHeight" row-key="id">
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column prop="cnName" label="库房区域名称" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click.native="sortVisible = false">取消</el-button>
+        <el-button type="primary" @click.native="handleSort">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import { sort } from '@/api/system/category/category'
+
+export default {
+  data() {
+    return {
+      sortVisible: false,
+      sortTableData: [],
+      tableHeight: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight * 0.6
+    })
+  },
+  methods: {
+    // 行拖拽
+    rowDrop(className, targetName) {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
+      const that = this
+      Sortable.create(tbody, {
+        // 指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
+        }
+      })
+    },
+    opened() {
+      this.rowDrop('store-sort', 'sortTableData')
+    },
+    handleSort() {
+      const data = this.sortTableData.map((value, index) => {
+        return { id: value.id, categorySeq: index + 1 }
+      })
+      this.sortTableData.forEach((item, index) => {
+        item.categorySeq = index + 1
+      })
+      sort(data).then(() => {
+        this.sortVisible = false
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.$emit('treeNodeSort', this.sortTableData)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/archiveKeeping/deviceManage/tableList.vue

@@ -0,0 +1,559 @@
+<template>
+  <div>
+    <!--工具栏-->
+    <div class="head-container" style="display: flex; justify-content: space-between; align-items: center;">
+      <div class="head-search" style="margin-bottom: 0;">
+        <el-select v-model="deviceType" class="filter-item" placeholder="设备类型选择" @change="crud.toQuery">
+          <el-option :key="0" label="全部" value="" />
+          <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        <el-input v-model="query.ruleName" clearable size="small" placeholder="输入设备编号或名称" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission">
+        <template v-slot:left>
+          <el-button v-permission="permission.add" size="mini" @click="deviceSelectVisible = true">
+            <i class="iconfont icon-xinzeng" />
+            新增
+          </el-button>
+          <el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1" @click="crud.toEdit(crud.selections[0])">
+            <i class="iconfont icon-bianji" />
+            编辑
+          </el-button>
+          <el-button slot="reference" v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
+            <i class="iconfont icon-shanchu" />
+            删除
+          </el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表单组件-->
+    <el-dialog
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      append-to-body
+      :before-close="handleCloseDialog"
+      :visible.sync="deviceSelectVisible"
+      title="新增设备-选择设备类型"
+    >
+      <div class="setting-dialog">
+        <el-form ref="deviceForm" inline :model="deviceForm" size="small" label-width="90px">
+          <el-form-item label="设备类型" prop="deviceType" :rules="[{ required:true, message:'请选择设备类型', trigger:'change'}]">
+            <el-select v-model="deviceForm.deviceType" class="filter-item" value-key="id" placeholder="设备类型" style="width: 550px;">
+              <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="handleCloseDialog">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="handleComfirmDevice">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      append-to-body
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="addDeviceTitle"
+    >
+      <div class="setting-dialog">
+        <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
+          <el-form-item label="设备名称" prop="name">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="设备编号" prop="code">
+            <el-input v-model="form.code" />
+          </el-form-item>
+          <el-row>
+            <el-form-item label="品牌厂商" prop="supplier">
+              <el-select v-model="form.supplier" class="filter-item" placeholder="请选择" style="width: 225px;">
+                <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-row>
+          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '网络视频录像机（NVR）' || selectedDeviceType ==='环境监控主机' || isInsidedevices" label="IPv4地址" prop="deviceIp">
+            <el-input v-model="form.deviceIp" />
+          </el-form-item>
+          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '环境监控主机' || isInsidedevices" label="端口" prop="port" style="margin-right: 0; margin-left: 30px;">
+            <el-input v-model="form.port" />
+          </el-form-item>
+          <el-form-item v-if="selectedDeviceType === '网络视频录像机（NVR）'" label="RTSP端口" prop="port" style="margin-right: 0; margin-left: 30px;">
+            <el-input v-model="form.port" placeholder="RTSP端口一般均为554" />
+          </el-form-item>
+
+          <el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '网络视频录像机（NVR）'" label="账号" prop="deviceAccount">
+            <el-input v-model="form.deviceAccount" />
+          </el-form-item>
+          <el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '网络视频录像机（NVR）'" label="密码" prop="devicePassword" style="margin-right: 0; margin-left: 30px;">
+            <el-input v-model="form.devicePassword" />
+          </el-form-item>
+
+          <!-- 密集架 -->
+          <el-row>
+            <el-form-item v-if="selectedDeviceType === '密集架'" label="区号" prop="areaNo">
+              <el-input v-model="form.areaNo" :disabled="crud.status.edit === 1" />
+            </el-form-item>
+          </el-row>
+          <el-form-item v-if="selectedDeviceType === '密集架'" label="总列数" prop="sumColumnNo">
+            <el-input v-model.number="form.sumColumnNo" :disabled="crud.status.edit === 1" />
+          </el-form-item>
+          <el-form-item v-if="selectedDeviceType === '密集架'" label="起始列号" prop="firstColumnNo">
+            <el-input v-model.number="form.firstColumnNo" :disabled="crud.status.edit === 1" />
+          </el-form-item>
+          <el-form-item v-if="selectedDeviceType === '密集架'" label="节数" prop="partNo">
+            <el-input v-model.number="form.partNo" :disabled="crud.status.edit === 1" />
+          </el-form-item>
+
+          <!-- 密集架 || 回转柜 -->
+          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="层数" prop="rowNo">
+            <el-input v-model.number="form.rowNo" :disabled="crud.status.edit === 1" />
+          </el-form-item>
+          <!-- 回转柜 -->
+          <el-form-item v-if="selectedDeviceType === '回转柜'" label="每层列数" prop="columnRowNo">
+            <el-input v-model.number="form.columnRowNo" :disabled="crud.status.edit === 1" />
+          </el-form-item>
+          <!-- 密集架 || 回转柜 -->
+          <el-row>
+            <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" class="checkbox-style" label="系统联动" prop="isLinkage">
+              <el-checkbox v-model="form.isLinkage.lend" @change="checked=>isLinkageChange(checked,'lend')">借出</el-checkbox>
+              <el-checkbox v-model="form.isLinkage.borrow" @change="checked=>isLinkageChange(checked,'borrow')">归还</el-checkbox>
+              <el-checkbox v-model="form.isLinkage.inBound" @change="checked=>isLinkageChange(checked,'inBound')">入库</el-checkbox>
+              <el-checkbox v-model="form.isLinkage.outBound" @change="checked=>isLinkageChange(checked,'outBound')">出库</el-checkbox>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" class="checkbox-style" label="设备回调" prop="isCallback">
+              <el-checkbox v-model="form.isCallback.lend" @change="checked=>isCallbackChange(checked,'lend')">借出</el-checkbox>
+              <el-checkbox v-model="form.isCallback.borrow" @change="checked=>isCallbackChange(checked,'lend')">归还</el-checkbox>
+              <el-checkbox v-model="form.isCallback.inBound" @change="checked=>isCallbackChange(checked,'lend')">入库</el-checkbox>
+              <el-checkbox v-model="form.isCallback.outBound" @change="checked=>isCallbackChange(checked,'lend')">出库</el-checkbox>
+            </el-form-item>
+          </el-row>
+          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="下发通知" prop="isNotice" style="display: block;">
+            <el-checkbox v-model="form.isNotice">通知</el-checkbox>
+          </el-form-item>
+
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" :rows="4" style="width: 585px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button v-if="crud.status.cu > 0 && ( selectedDeviceType === '网络视频录像机（NVR）' || selectedDeviceType ==='环境监控主机')" class="device-child-btn" @click="handleChildDevice"><i class="iconfont icon-zishebeiguanli" />子设备管理</el-button>
+          <el-button type="text" @click="handleCloseDialog">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!--表格渲染-->
+    <div class="container-right">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        :data="crud.data"
+        row-key="id"
+        highlight-current-row
+        style="min-width: 100%;"
+        @selection-change="selectionChangeHandler"
+        @row-click="clickRowHandler"
+      >
+        <el-table-column type="selection" align="center" width="55" />
+        <el-table-column label="子设备" prop="child" min-width="80" />
+        <el-table-column label="设备类型" prop="deviceTypeId.name" min-width="140" />
+        <el-table-column label="设备名称" prop="deviceName" min-width="140" />
+        <el-table-column label="设备编号" prop="deviceCode" min-width="85" />
+        <el-table-column label="接口IP" prop="deviceIp" min-width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="scope.row.deviceIp"> {{ scope.row.deviceIp }} </span>
+            <span v-else>——</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="端口" prop="devicePort" min-width="85">
+          <template slot-scope="scope">
+            <span v-if="scope.row.devicePort"> {{ scope.row.devicePort }} </span>
+            <span v-else>——</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" prop="categoryName" min-width="60" align="center">
+          <template slot-scope="scope">
+            <span :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" />
+          </template>
+        </el-table-column>
+        <el-table-column label="所属库房" prop="categoryName" min-width="120" />
+        <el-table-column label="所属区域" prop="storeroomId.name" min-width="120" />
+        <el-table-column label="设备厂商" prop="supplierId.name" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="创建日期" min-width="180">
+          <template slot-scope="scope">
+            <div>{{ scope.row.createTime | parseTime }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="最后一次同步时间" min-width="180">
+          <template slot-scope="scope">
+            <div>{{ scope.row.createTime | parseTime }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination v-if="crud.data.length!==0" />
+    </div>
+    <!-- 子设备管理 -->
+    <ChildDevice ref="childDevice" />
+  </div>
+</template>
+
+<script>
+import typeJson from './type.json'
+import crudDevice from '@/api/storeManage/deviceManage/device'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import ChildDevice from './module/childDevice'
+import { mapGetters } from 'vuex'
+
+const defaultForm = {
+  id: null,
+  name: null,
+  code: null,
+  deviceIp: null,
+  port: null,
+  remark: null,
+  deviceAccount: null,
+  devicePassword: null,
+  isLinkage: { stateType: 1, lend: false, borrow: false, inBound: false, outBound: false },
+  isCallback: { stateType: 2, lend: false, borrow: false, inBound: false, outBound: false },
+  isNotice: false,
+  rowNo: null,
+  columnRowNo: null,
+  areaNo: null, sumColumnNo: null, firstColumnNo: null, partNo: null
+}
+
+export default {
+  name: 'DeviceTableList',
+  components: { rrOperation, crudOperation, pagination, ChildDevice },
+  cruds() {
+    return CRUD({ title: '设备', url: 'api/device/list', crudMethod: { ...crudDevice }, optShow: {
+      add: false,
+      edit: false,
+      del: false,
+      reset: true,
+      download: false,
+      group: false
+    }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  props: {
+    selectedStore: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      deviceType: null,
+      deviceTypeOptions: [],
+      deviceSelectVisible: false,
+      deviceForm: {
+        deviceType: null
+      },
+      addDeviceTitle: '',
+      supplierOptions: [],
+      selectedDeviceType: '网络视频录像机（NVR）',
+      permission: {
+        add: ['admin', 'device:add'],
+        edit: ['admin', 'device:edit'],
+        del: ['admin', 'device:del']
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ]),
+    isInsidedevices() {
+      if (this.selectedDeviceType === '桌面式RFID读写器') {
+        return true
+      } else {
+        return false
+      }
+    },
+    isOutsidedevices() {
+      if (this.selectedDeviceType === '通道门' || this.selectedDeviceType === '手持式RFID读写器') {
+        return true
+      } else {
+        return false
+      }
+    },
+    rules() {
+      // const checkDeviceIp = (rule, value, callback) => {
+      //   const reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/
+      //   if (reg.test(value)) {
+      //     callback()
+      //   } else {
+      //     callback(new Error('设备IP格式错误'))
+      //   }
+      // }
+      const checkDevicePort = (rule, value, callback) => {
+        const reg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+        if (reg.test(value)) {
+          callback()
+        } else {
+          callback(new Error('端口号输入错误'))
+        }
+      }
+      const validateRule = {
+        // supplier: [
+        //   { required: true, message: '请选择设备产商', trigger: 'blur' }
+        // ]
+        code: [{ required: true, message: '设备编号不可为空', trigger: 'blur' }],
+        name: [{ required: true, message: '设备名称不可为空', trigger: 'blur' }]
+      }
+      // if (this.isInsidedevices || this.isOutsidedevices) {
+      //   this.$set(validateRule, 'deviceId', [
+      //     { required: true, message: '请输入设备ID', trigger: 'blur' }
+      //   ])
+      // }
+      if (this.selectedDeviceType === '密集架' || this.selectedDeviceType === '回转柜' || this.selectedDeviceType === '网络视频录像机（NVR）' || this.selectedDeviceType === '环境监控主机' || this.isInsidedevices) {
+        this.$set(validateRule, 'deviceIp', [
+          { required: true, message: '请输入接口IP', trigger: 'blur' }
+          // ,
+          // { validator: checkDeviceIp, trigger: 'blur' }
+        ])
+        this.$set(validateRule, 'port', [
+          { required: true, message: '请输入端口号', trigger: 'blur' },
+          { validator: checkDevicePort, trigger: 'blur' }
+        ])
+        if (this.selectedDeviceType === '密集架') {
+          this.$set(validateRule, 'areaNo', [
+            { required: true, message: '请输入区号', trigger: 'blur' }
+          ])
+          this.$set(validateRule, 'firstColumnNo', [
+            { required: true, message: '请输入起始列号', trigger: 'blur' }
+          ])
+          this.$set(validateRule, 'sumColumnNo', [
+            { required: true, message: '请输入总列数', trigger: 'blur' }
+          ])
+          this.$set(validateRule, 'partNo', [
+            { required: true, message: '请输入节数', trigger: 'blur' }
+          ])
+          this.$set(validateRule, 'rowNo', [
+            { required: true, message: '请输入层数', trigger: 'blur' }
+          ])
+        } else if (this.selectedDeviceType === '回转柜' || this.selectedDeviceType === '网络视频录像机（NVR）') {
+          // 回转柜 || 网络视频录像机（NVR）
+          this.$set(validateRule, 'deviceAccount', [
+            { required: true, message: '请输入账号', trigger: 'blur' }
+          ])
+          this.$set(validateRule, 'devicePassword', [
+            { required: true, message: '请输入密码', trigger: 'blur' }
+          ])
+          if (this.selectedDeviceType === '回转柜') {
+            this.$set(validateRule, 'cupboardNo', [
+              { required: true, message: '请输入柜号', trigger: 'blur' }
+            ])
+            this.$set(validateRule, 'rowNo', [
+              { required: true, message: '请输入层数', trigger: 'blur' }
+            ])
+            this.$set(validateRule, 'columnRowNo', [
+              { required: true, message: '请输入每层列数', trigger: 'blur' }
+            ])
+          } else {
+            // 网络视频录像机（NVR）
+            // this.$set(validateRule, 'videoRoute', [
+            //   { required: true, message: '请输入频道', trigger: 'blur' }
+            // ])
+          }
+        }
+      }
+      return validateRule
+    }
+  },
+  watch: {
+    selectedStore: function(newValue, oldValue) {
+      this.crud.refresh()
+    }
+  },
+  created() {
+    this.deviceTypeOptions = typeJson.data
+    this.crud.data = [{}, {}, {}]
+  },
+  methods: {
+    // 获取数据前设置默认参数
+    [CRUD.HOOK.beforeRefresh]() {
+    },
+    [CRUD.HOOK.afterRefresh](crud) {
+      this.crud.data = [{}, {}, {}]
+    },
+    [CRUD.HOOK.beforeToEdit](crud, form, btn) {
+      console.log(form)
+      console.log(this.crud.status)
+      console.log(this.crud.status.edit)
+      console.log(this.crud.status.edit === 1)
+      this.addDeviceTitle = '编辑设备 - ' + form.name
+    },
+    // 提交前做的操作
+    async [CRUD.HOOK.afterValidateCU](crud) {
+      if (form.deviceTypeId.name === '密集架' || form.deviceTypeId.name === '回转柜') {
+        if (form.deviceTypeId.name === '密集架') {
+          // 获取密集架行号列号等信息
+          await crudDevice.getDesecabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => {
+            form.rowNo = data.rowNo
+            form.areaNo = data.areaNo
+            form.sumColumnNo = data.sumColumnNo
+            form.firstColumnNo = data.firstColumnNo
+            form.partNo = data.partNo
+            form.storeroomCode = data.storeroomCode
+          })
+        } else if (form.deviceTypeId.name === '回转柜') {
+          // 获取回转柜行号列号等信息
+          await crudDevice.getRotarycabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => {
+            form.columnRowNo = data.columnRowNo
+            form.cupboardNo = data.cupboardNo
+            form.rowNo = data.rowNo
+            form.storeroomCode = data.storeroomCode
+          })
+        }
+        // 获取联动和回调结果
+        await crudDevice.getDeviceById({ deviceInfoId: this.crud.selections[0].id }).then((data) => {
+          if (data.length === 3) {
+            form.isLinkage = data.find(element => element.stateType === 1)
+            form.isCallback = data.find(element => element.stateType === 2)
+          }
+        })
+      }
+      form.supplier = form.supplierId.id
+      this.selectedDeviceType = form.deviceTypeId.name
+      crud.status.edit = CRUD.STATUS.PREPARED
+      crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED
+
+      this.deviceForm.deviceType = null
+      this.$refs.deviceForm.resetFields()
+      return false
+    },
+    // 防止编辑时，isLinkage是null,isLinkage.lend报错
+    [CRUD.HOOK.afterRefresh](crud) {
+      crud.data.forEach(element => {
+        element.isLinkage = { stateType: 1, lend: null, borrow: null, inBound: null, outBound: null }
+        element.isCallback = { stateType: 2, lend: null, borrow: null, inBound: null, outBound: null }
+      })
+    },
+    handleComfirmDevice() {
+      this.$refs.deviceForm.validate((valid) => {
+        if (valid) {
+          this.crud.toAdd()
+          this.deviceSelectVisible = false
+          this.selectedDeviceType = this.deviceForm.deviceType.name
+          this.addDeviceTitle = '新增设备 - ' + this.selectedDeviceType
+          this.$refs.form.resetFields()
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    isLinkageChange(value, type) {
+      if (!value && this.form.isCallback[type]) {
+        this.$message.error('取消对应回调选项后才能取消联动操作')
+        this.form.isLinkage[type] = true
+      }
+    },
+    isCallbackChange(value, type) {
+      if (value && !this.form.isLinkage[type]) {
+        this.$message.error('选中对应联动选项后才能勾选回调操作')
+        this.form.isCallback[type] = false
+      }
+    },
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      this.crud.selections = val
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const ids = []
+        datas.forEach(val => {
+          ids.push(val.id)
+        })
+        crudDevice.del(ids).then(() => {
+          this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err)
+        })
+      }).catch(() => {
+      })
+    },
+    handleChildDevice() {
+      this.$refs.childDevice.childDeviceVisible = true
+      this.$refs.childDevice.childDeviceTitle = '子设备管理 - ' + this.selectedDeviceType
+    },
+    handleCloseDialog(done) {
+      // 重置表单数据
+      if (this.$refs.deviceForm) {
+        this.deviceSelectVisible = false
+        this.$refs.deviceForm.resetFields()
+      }
+
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+        this.crud.cancelCU()
+      }
+      // 关闭弹框
+      // done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device-child-btn{
+  width: auto;
+  padding: 0 14px;
+  line-height: 28px;
+  font-weight: bold;
+  color: #0348F3;
+  border-color: #0348F3;
+}
+::v-deep .el-dialog .el-dialog__body{
+  .checkbox-style.el-form-item{
+    .el-form-item__content{
+      width: 550px !important;
+    }
+  }
+}
+
+.spk-a {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color:#2FD490;
+  box-shadow: 0px 3px 4px 0px rgba(17,243,189,0.35);
+  vertical-align: middle;
+}
+.off-line {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #ED4A41;
+  box-shadow: 0px 3px 4px 0px rgba(252,122,122,0.35);
+  vertical-align: middle;
+}
+</style>

src/views/archiveKeeping/deviceManage/type.json

@@ -0,0 +1,32 @@
+{
+  "code": 200,
+  "message": "操作成功",
+  "data": [
+
+      {
+          "id": "7305DE3D273B0CAC079538",
+          "name": "网络视频录像机（NVR）"
+      },
+      {
+          "id": "C09A1946216E496BB3FA88",
+          "name": "环境监控主机"
+      },
+      {
+          "id": "DD656054BE3D1DF1E2F1FC",
+          "name": "密集架"
+      },
+      {
+          "id": "65D1886B0F864291766421",
+          "name": "通道门"
+      },
+      {
+          "id": "E2767FEACA9CE0E3B16B89",
+          "name": "桌面式RFID读写器"
+      },
+      {
+          "id": "3B85FA21FDAFBB618B5D40",
+          "name": "手持式RFID读写器"
+      }
+  ],
+  "timestamp": 1703481969284
+}