1、在线监测--->门禁管理--->二级口门门禁---> 设备管理的增删改查

src/views/gatemachine/second/dockdevice/components/detail.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <div class="level-title">
+      <h1>详情</h1>
+    </div>
+    <div>
+      <el-form v-loading="formLoading" ref="form" :model="form" label-width="150px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备名称：" prop="DEVICE_NAME">
+              <el-input v-model="form.DEVICE_NAME" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备类型：" prop="DEVICE_TYPE_DESC">
+              <el-input v-model="form.DEVICE_TYPE_DESC" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属口门名称：" prop="DOOR_NAME">
+              <el-input v-model="form.DOOR_NAME" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属通道名称：" prop="PATH_NAME">
+              <el-input v-model="form.PATH_NAME" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="口门级别：" prop="AREA_LEVEL_DESC">
+              <el-input v-model="form.AREA_LEVEL_DESC" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="ui-foot">
+      <el-button plain type="info" @click="goBack">返 回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import SelectTree from '@/components/SelectTree'
+import waves from '@/directive/waves'
+
+export default {
+
+  components: { Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      formLoading: false,
+      form: {
+        DEVICE_NAME: '', // 设备名称
+        DEVICE_TYPE_DESC: '', // 设备类型
+        DOOR_NAME: '', // 口门名称
+        PATH_NAME: '', // 通道名称
+        AREA_LEVEL_DESC: '' // 口门级别
+      }
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.handleDetail(this.$parent.DOCK_DEVICE_ID)
+  },
+  methods: {
+    handleDetail(DOCK_DEVICE_ID) {
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/findById',
+        {
+          'DOCK_DEVICE_ID': DOCK_DEVICE_ID
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.form.DEVICE_NAME = data.pd.DEVICE_NAME // 设备名称
+          this.form.DEVICE_TYPE_DESC = data.pd.DEVICE_TYPE_DESC // 设备类型
+          this.form.DOOR_NAME = data.pd.DOOR_NAME // 口门名称
+          this.form.PATH_NAME = data.pd.PATH_NAME // 通道名称
+          this.form.AREA_LEVEL_DESC = data.pd.AREA_LEVEL_DESC // 口门级别
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    // 返回列表
+    goBack() {
+      this.$parent.activeName = 'List'
+    }
+  }
+}
+</script>
+<style>
+</style>

src/views/gatemachine/second/dockdevice/components/edit.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="app-container">
+    <div class="level-title">
+      <h1>{{ this.$parent.DOCK_DEVICE_ID == '' ? "新增" : "修改" }}</h1>
+    </div>
+    <div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备名称：" prop="DEVICEINDEXCODE">
+              <el-select v-model="form.DEVICEINDEXCODE" style="width: 100%;" @change="handleDeviceNameChange">
+                <el-option v-for="item in deviceList" :key="item.DEVICE_ID" :label="item.DEVICE_NAME" :value="item.DEVICE_ID" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备类型：" prop="DEVICE_TYPE">
+              <el-select v-model="form.DEVICE_TYPE" style="width: 100%;">
+                <el-option v-for="item in deviceTypeList" :key="item.VALUE" :label="item.NAME" :value="item.VALUE" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 查看展示所有二级口门（查询条件：口门类型，口门级别） -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属口门名称：" prop="DOORINDEXCODE">
+              <el-select v-model="form.DOORINDEXCODE" style="width: 100%;" @change="handleDoorNameChange">
+                <el-option v-for="item in doorList" :key="item.DOOR_ID" :label="item.DOOR_NAME" :value="item.DOOR_ID" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 查询条件：口门名称、通道类型 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属通道名称：" prop="PATHINDEXCODE">
+              <el-select v-model="form.PATHINDEXCODE" style="width: 100%;" @change="handlePathNameChange">
+                <el-option v-for="item in pathList" :key="item.PATH_ID" :label="item.PATH_NAME" :value="item.PATH_ID" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="ui-foot">
+      <el-button type="success" @click="confirm">保 存</el-button>
+      <el-button plain type="info" @click="goBack">返 回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import SelectTree from '@/components/SelectTree'
+import waves from '@/directive/waves'
+
+export default {
+
+  components: { Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      deviceList: [], // 设备列表
+      doorList: [], // 口门列表
+      pathList: [], // 通道列表
+      form: {
+        DEVICEINDEXCODE: '', // 设备id
+        DEVICE_TYPE: '', // 设备类型
+        DOORINDEXCODE: '', // 口门id
+        PATHINDEXCODE: '', // 通道id
+        DEVICE_NAME: '', // 设备名称
+        DOOR_NAME: '', // 口门名称
+        PATH_NAME: '', // 通道名称
+        AREA_LEVEL: 2 // 口门级别:默认是二级口门
+      },
+      rules: {
+        DEVICEINDEXCODE: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
+        DEVICE_TYPE: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
+        DOORINDEXCODE: [{ required: true, message: '请选择所属口门名称', trigger: 'blur' }],
+        PATHINDEXCODE: [{ required: true, message: '请选择所属通道名称', trigger: 'blur' }]
+      },
+      deviceTypeList: [ // 设备类型
+        { NAME: '人', VALUE: 0 },
+        { NAME: '车', VALUE: 1 }
+      ],
+      DOCK_DEVICE_ID: ''
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.reSetForm()
+    this.DOCK_DEVICE_ID = this.$parent.DOCK_DEVICE_ID
+    this.handleDeviceList()
+    this.handleDoorList()
+    this.handlePathList()
+    if (this.DOCK_DEVICE_ID !== '') {
+      this.getDataByID()
+    }
+  },
+  methods: {
+    confirm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.DOCK_DEVICE_ID === '') {
+            this.handleAdd()
+          } else {
+            this.handleEdit()
+          }
+        }
+      })
+    },
+    reSetForm() {
+      this.form.DEVICEINDEXCODE = ''
+      this.form.DEVICE_TYPE = ''
+      this.form.DOORINDEXCODE = ''
+      this.form.PATHINDEXCODE = ''
+      this.form.DEVICE_NAME = ''
+      this.form.DOOR_NAME = ''
+      this.form.DOOR_NAME = ''
+    },
+    handleEdit() {
+      this.listLoading = true
+      requestFN(
+        '/dockDevice/edit',
+        {
+          DOCK_DEVICE_ID: this.DOCK_DEVICE_ID,
+          ...this.form
+        }
+      ).then((data) => {
+        this.goBack()
+        this.listLoading = false
+        this.dialogFormEdit = false
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      requestFN(
+        '/dockDevice/add',
+        this.form
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.goBack()
+        }
+      }).catch((e) => {
+      })
+    },
+    // 进入修改界面进行数据回显
+    getDataByID() {
+      this.listLoading = true
+      this.dialogFormVisible = true
+      requestFN(
+        '/dockDevice/findById',
+        { DOCK_DEVICE_ID: this.DOCK_DEVICE_ID }
+      ).then((data) => {
+        if (this.safeReturn(data.pd.DEVICEINDEXCODE) !== '') {
+          this.form.DEVICEINDEXCODE = data.pd.DEVICEINDEXCODE // 设备id
+        }
+        this.form.DEVICE_NAME = data.pd.DEVICE_NAME // 设备名称
+        this.form.DEVICE_TYPE = Number(data.pd.DEVICE_TYPE) // 设备类型
+        if (this.safeReturn(data.pd.DOORINDEXCODE) !== '') {
+          this.form.DOORINDEXCODE = data.pd.DOORINDEXCODE // 口门id
+        }
+        this.form.DOOR_NAME = data.pd.DOOR_NAME
+        if (this.safeReturn(data.pd.PATHINDEXCODE) !== '') {
+          this.form.PATHINDEXCODE = data.pd.PATHINDEXCODE // 通道id
+        }
+        this.form.PATH_NAME = data.pd.PATH_NAME // 通道名称
+        this.form.AREA_LEVEL = data.pd.AREA_LEVEL // 口门级别
+        this.dialogFormVisible = false
+      }).catch((e) => {
+        this.dialogFormVisible = false
+        this.listLoading = false
+      })
+    },
+  safeReturn(value) {
+    if (value !== null && value !== undefined && value !== '') {
+      return value;
+    }
+    return '';
+  },
+// 返回列表
+    goBack() {
+      this.$parent.activeName = 'List'
+    },
+    handleDeviceList() { // 获取设备列表
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/goDeviceList'
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.deviceList = data.varList
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    handleDoorList(value) { // 获取口门列表(默认获取二级口门)
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/goDoorList',
+        {
+          'DOOR_TYPE': '',
+          'AREA_LEVEL': 2
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.doorList = data.varList
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    handlePathList() { // 获取通道列表
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/goPathList',
+        {'PATH_TYPE': ''}
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.pathList = data.varList
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    handleDeviceNameChange(value) { // 获取设备名称
+      const selectedDevice = this.deviceList.find(device => device.DEVICE_ID === value)
+      if (selectedDevice) {
+        this.form.DEVICE_NAME = selectedDevice.DEVICE_NAME
+      } else {
+        this.form.DEVICE_NAME = ''
+      }
+    },
+    handleDoorNameChange(value) { // 获取口门名称
+      const selectedDoor = this.doorList.find(door => door.DOOR_ID === value)
+      if (selectedDoor) {
+        this.form.DOOR_NAME = selectedDoor.DOOR_NAME
+      } else {
+        this.form.DOOR_NAME = ''
+      }
+    },
+    handlePathNameChange(value) { // 获取通道名称
+      const selectedPath = this.pathList.find(path => path.PATH_ID === value)
+      if (selectedPath) {
+        this.form.PATH_NAME = selectedPath.PATH_NAME
+      } else {
+        this.form.PATH_NAME = ''
+      }
+    },
+  }
+}
+</script>
+<style>
+</style>

src/views/gatemachine/second/dockdevice/components/list.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="app-container">
+    <div class="rightCont">
+      <el-form label-width="50px">
+        <el-row>
+          <el-col :span="4">
+            <el-form-item label="设备名称" label-width="110px">
+              <el-input v-model="KEYWORDS" placeholder="请输入关键字"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4"/>
+          <el-col :span="4">
+            <el-form-item label-width="10px">
+              <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
+                搜索
+              </el-button>
+              <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div>
+        <el-table
+          v-loading="listLoading"
+          ref="multipleTable"
+          :data="varList"
+          :row-key="getRowKey"
+          border
+          tooltip-effect="dark"
+          style="width: 100%">
+          <!--          <el-table-column :selectable="selectable" type="selection" reserve-selection width="55" align="center"/>-->
+          <el-table-column type="index" label="序号" width="55" align="center"/>
+          <el-table-column prop="DEVICE_NAME" label="设备名称" align="center"/>
+          <el-table-column prop="DEVICE_TYPE_DESC" label="设备类型" align="center"/>
+          <el-table-column prop="DOOR_NAME" label="所属口门名称" align="center"/>
+          <el-table-column prop="PATH_NAME" label="所属通道名称" align="center"/>
+          <el-table-column prop="AREA_LEVEL_DESC" label="口门级别" align="center"/>
+          <el-table-column label="操作" width="350" align="center">
+            <template slot-scope="{row}">
+              <el-button
+                type="success"
+                icon="el-icon-edit"
+                size="mini"
+                @click="handleDetail(row)">查看
+              </el-button>
+              <el-button
+                type="primary"
+                icon="el-icon-edit"
+                size="mini"
+                @click="handleEdit(row.DOCK_DEVICE_ID)">修改
+              </el-button>
+              <el-button
+                v-if="del"
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                @click="handleDelete(row)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="page-btn-group">
+          <div>
+            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+          </div>
+          <pagination
+            :total="total"
+            :page.sync="listQuery.page"
+            :limit.sync="listQuery.limit"
+            @pagination="getList()"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import { requestFN } from '@/utils/request'
+
+import waves from '@/directive/waves' // waves directive
+import SelectTree from '@/components/SelectTree'
+
+export default {
+
+  components: { Pagination, SelectTree },
+
+  directives: { waves },
+  data() {
+    return {
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      add: false,
+      del: false,
+      edit: false,
+      toExcel: false,
+      KEYWORDS: '',
+      varList: [],
+      AREA_LEAVE: '1',
+      DOCK_DEVICE_ID: '',
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.getList()
+    this.hasButton()
+  },
+  methods: {
+    getRowKey(row) {
+      return row.DOCK_DEVICE_ID
+    },
+    // 添加
+    handleAdd() {
+      this.$parent.activeName = 'Edit'
+      this.$parent.DOCK_DEVICE_ID = ''
+      this.DOCK_DEVICE_ID = ''
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.multipleTable.clearSelection()
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      this.listLoading = true
+      this.varList = []
+      requestFN(
+        '/dockDevice/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          KEYWORDS: this.KEYWORDS,
+          AREA_LEVEL: '2'
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        this.hasButton()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    goKeyReset() {
+      this.KEYWORDS = ''
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$parent.DOCK_DEVICE_ID = row.DOCK_DEVICE_ID
+      this.$parent.activeName = 'Detail'
+      this.DOCK_DEVICE_ID = row.DOCK_DEVICE_ID
+    },
+    handleEdit(DOCK_DEVICE_ID) {
+      this.$parent.DOCK_DEVICE_ID = DOCK_DEVICE_ID
+      this.$parent.activeName = 'Edit'
+      this.DOCK_DEVICE_ID = DOCK_DEVICE_ID
+    },
+    handleDelete(row) {
+      this.$confirm('确定要删除[' + row.DEVICE_NAME + ']吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/dockDevice/delete',
+          {
+            DOCK_DEVICE_ID: row.DOCK_DEVICE_ID
+          }
+        ).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    hasButton: function() {
+      var keys = 'dockDevice:add,dockDevice:del,dockDevice:edit,toExcel'
+      requestFN(
+        '/head/hasButton',
+        {
+          keys: keys
+        }
+      ).then((data) => {
+        this.add = data.mkmjDoorfhadminadd		// 新增权限
+        this.del = data.mkmjDoorfhadmindel		// 删除权限
+        this.edit = data.mkmjDoorfhadminedit	// 修改权限
+        this.toExcel = data.toExcel // 导出到excel权限
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.returnBtn {
+  float: right;
+}
+
+.app-container {
+  display: flex; /**/
+  align-items: baseline;
+}
+
+.rightCont {
+  width: 100%
+}
+</style>

src/views/gatemachine/second/dockdevice/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <List v-if="activeName=='List'" ref="list" />
+    <Edit v-if="activeName=='Edit'" />
+    <Detail v-if="activeName=='Detail'"/>
+  </div>
+</template>
+
+<script>
+import List from './components/list'
+import Edit from './components/edit'
+import Detail from './components/detail'
+
+export default {
+  components: {
+    List: List,
+    Edit: Edit,
+    Detail: Detail
+  },
+  data() {
+    return {
+      activeName: 'List',
+      DOCK_DEVICE_ID: ''
+    }
+  },
+  watch: {}
+}
+</script>
+
+<style scoped>
+</style>
+