预警后台-部分模块搭建及调试-d3

src/api/base/crew.js

@@ -10,14 +10,26 @@ export const queryCrewListApi = (data) => {
   })
 }
 
+/** 班组成员查询 */
+export const queryCrewPersonApi = (data) => {
+  return request.get('/base/tbPeople/list', {
+    params: data
+  })
+}
+
 /** 新增班组 */
 export const addCrewApi = (data) => {
   return request.post('/base/tbTeam', data)
 }
 
 /** 修改人员 */
-export const editPersonApi = (data) => {
+export const editCrewApi = (data) => {
-  return request.put('/base/tbPeople', data)
+  return request.put('/base/tbTeam', data)
+}
+
+/** 移出班组 */
+export const removeCrewApi = (data) => {
+  return request.post('/base/tbTeam/remove', data)
 }
 
 /** 删除班组 */
@@ -25,9 +37,26 @@ export const deleteCrewApi = (id) => {
   return request.delete(`/base/tbTeam/${id}`)
 }
 
-/** 人员信息查询 */
+/** 安全帽查询 */
-export const queryInfoApi = (id) => {
+export const queryHatApi = (data) => {
-  return request.get(`/base/tbPeople/${id}`)
+  return request.get('/base/tbTeam/devList', {
+    params: data
+  })
+}
+
+/** 绑定安全帽 */
+export const bindHatApi = (data) => {
+  return request.post('/base/tbTeam/bind', data)
+}
+
+/** 解绑安全帽 */
+export const unbindHatApi = (data) => {
+  return request.post('/base/tbTeam/unbind', data)
+}
+
+/** 改版-班组长下拉查询 */
+export const queryCrewSelApi = (id) => {
+  return request.get(`/base/tbTeam/${id}`)
 }
 
 /** 班组长查询 isAll: 0 */

src/components/TableModel/index.vue

@@ -109,7 +109,7 @@
             </el-form-item>
         </el-form>
         <!-- 按钮集群 -->
-        <el-row class="btn-container" v-if="showRightTools">
+        <el-row class="btn-container" >
             <div class="btn-handler">
                 <slot name="btn" :queryParams="queryParams"></slot>
             </div>
@@ -120,6 +120,7 @@
                 :handleShow.sync="handleShow"
                 :columns="columCheckList"
                 @queryTable="getTableList"
+                v-if="showRightTools"
             />
         </el-row>
         <!-- 表格 -->
@@ -223,6 +224,10 @@ export default {
           type: Object,
           default: () => null
         },
+        sendId: {
+          type: Number,
+          default: () => null
+        },
         /** 是否显示查询按钮 */
         showSearchBtn: {
           type: Boolean,
@@ -253,6 +258,10 @@ export default {
           default: () => {
             return true
           }
+        },
+        selSingle: {
+          type: Boolean,
+          default: false
         }
     },
     computed: {
@@ -307,7 +316,6 @@ export default {
     },
 
     created() {
-        console.log(this.sendParams, 'table')
         this.columCheckList = this.columnsList.map(e => {
             this.$set(e, 'checked', true)
             return e
@@ -333,6 +341,7 @@ export default {
             this.$set(this.queryParams, key, this.sendParams[key])
           } */
         }
+        if(this.sendId !== null) this.queryParams.id = this.sendId
         this.getTableList()
     },
     updated() {
@@ -381,6 +390,7 @@ export default {
               }
             }
           }
+
         },
         /** 查询按钮 */
         handleQuery() {
@@ -468,6 +478,7 @@ export default {
         },
 
         handleSelectionChange(e) {
+          console.log(e, 'e')
           this.msgList = e
           this.$emit('transIdList', this.msgList)
         },

src/views/base/crew/components/form-crew.vue

@@ -63,7 +63,13 @@
 
       <TableModel
         :columnsList="columnsListCrew"
-        :request-api="queryIsAllApi"
+        :request-api="() => {
+          if(!this.crewParams) {
+            return queryIsAllApi()
+          } else {
+            return queryCrewSelApi(this.crewParams.id)
+          }
+        }"
         ref="tableRef"
         @transIdList="getIdList"
         :show-btn-crews="false"
@@ -111,9 +117,11 @@ import { commonMixin } from '@/views/base/mixins/common'
 import { columnsListCrew } from '../config-crew'
 import {
   addCrewApi,
+  editCrewApi,
   queryLeaderApi,
   queryIsAllApi,
-  queryProjApi
+  queryProjApi,
+  queryCrewSelApi
 } from '@/api/base/crew'
 export default {
     name: 'FormPerson',
@@ -126,15 +134,18 @@ export default {
     mixins: [commonMixin],
     components: {  },
     created() {
-      this.getRanges()
+      // this.getRanges()
     },
     mounted() {
       if (this.crewParams) {
+          this.crewParams.proId = Number(this.crewParams.proId)
+          this.ableSelect = this.crewParams.relId
           Object.assign(this.projectParams, this.crewParams)
           this.subSort = 2
       } else {
           this.subSort = 1
       }
+      this.getRanges()
     },
     data() {
         return {
@@ -178,6 +189,7 @@ export default {
     },
     methods: {
         queryIsAllApi,
+        queryCrewSelApi,
         getIdList(idList) {
           this.exportList = []
           idList.forEach(item => {
@@ -186,20 +198,35 @@ export default {
         },
         /** 获取各类下拉框 */
         async getRanges() {
-          // 获取班组长下拉选
+          if(this.subSort === 1) {
-          let leaderRes = await queryLeaderApi({
+            // 获取班组长下拉选
-            isAll: 0
+            let leaderRes = await queryLeaderApi({
-          })
+              isAll: 0
-          this.leaderRange = leaderRes.data.map(item => {
+            })
-            return {
+            this.leaderRange = leaderRes.data.map(item => {
-              label: item.relName,
+              return {
-              value: item.id,
+                label: item.relName,
-              idCard: item.idCard,
+                value: item.id,
-              relPhone: item.relPhone,
+                idCard: item.idCard,
-              _idCard: this.idCardCrypto(item.idCard),
+                relPhone: item.relPhone,
-              _relPhone: this.phoneCrypto(item.relPhone)
+                _idCard: this.idCardCrypto(item.idCard),
-            }
+                _relPhone: this.phoneCrypto(item.relPhone)
-          })
+              }
+            })
+          } else {
+            // 获取班组长下拉选
+            let _leaderRes = await queryCrewSelApi(this.crewParams.id)
+            this.leaderRange = _leaderRes.data.map(item => {
+              return {
+                label: item.relName,
+                value: item.id,
+                idCard: item.idCard,
+                relPhone: item.relPhone,
+                _idCard: this.idCardCrypto(item.idCard),
+                _relPhone: this.phoneCrypto(item.relPhone)
+              }
+            })
+          }
           // 获取所属工程下拉选
           let projRes = await queryProjApi({
             isAll: 0
@@ -269,7 +296,7 @@ export default {
                         console.log(err)
                       })
                     } else if(this.subSort === 2) {
-                      editPersonApi(this.projectParams).then(res => {
+                      editCrewApi(this.projectParams).then(res => {
                         this.$modal.msgSuccess('操作成功')
                         // 2. 成功之后通知父组件关闭弹框
                         this.$emit('closeDialog', true)

src/views/base/crew/components/table-crew.vue

@@ -0,0 +1,220 @@
+<template>
+    <!-- 工程管理 新增、编辑 表单组件 -->
+    <div>
+      <TableModel
+        :formLabel="formLabelCrewTab"
+        :columnsList="columnsListCrewTab"
+        :request-api="queryCrewPersonApi"
+        ref="tableRef"
+        @transIdList="getIdList"
+        :show-right-tools="false"
+        :send-id="crewId"
+        :show-sel="false"
+      >
+        <template slot="btn" slot-scope="{ queryParams }">
+          <el-button type="primary" @click="handleAddMember()" icon="el-icon-plus" size="mini"
+          >添加成员</el-button
+          >
+        </template>
+        <template slot="handle" slot-scope="{ data }">
+<!--          <el-button
+            type="primary"
+            size="mini"
+            @click="handleEditData(data)"
+          >编辑</el-button
+          >-->
+          <el-button
+            type="danger"
+            size="mini"
+            v-if="data.devName === null && data.teamId !== null"
+            @click="handleRemove(data.id)"
+          >移出班组</el-button
+          >
+        </template>
+        <template slot="sex" slot-scope="{ data }">
+          {{ data.sex === 1 ? '男' : '女' }}
+        </template>
+        <template slot="relName" slot-scope="{ data }">
+          {{ data.relName }}
+          <el-tag
+            style="margin-left: 3px"
+            v-if="data.teamId === null"
+            size="mini"
+            type="success"
+          >班组长</el-tag>
+        </template>
+        <template slot="devName" slot-scope="{ data }">
+          <div
+            style="width: 100%; display: flex; justify-content: space-around"
+          >
+            <span>{{ data.devName === null ? '未绑定' : data.devName }}</span>
+            <span
+              class="binding"
+              v-if="data.devName === null"
+              style="color: #11AB21"
+              @click="bindHat(data)"
+            >
+              <i class="el-icon-link"></i>
+              绑定
+            </span>
+            <span
+              class="unbind"
+              v-else
+              style="color: #FF0000"
+              @click="unbindHat(data.id)"
+            >
+              <i class="el-icon-link"></i>
+              解绑
+            </span>
+          </div>
+        </template>
+      </TableModel>
+
+      <DialogModel
+        :dialogConfig="dialogConfigHat"
+        @closeDialogOuter="closeDialogHatOuter"
+      >
+        <template slot="outerContent">
+          <!-- 新增以及修改数据的表单组件 -->
+          <TableHat
+            :hat-param="hatParam"
+            @closeHat="closeDialogHatOuter"
+          />
+        </template>
+      </DialogModel>
+
+      <DialogModel
+        :dialogConfig="dialogConfigMember"
+        @closeDialogOuter="closeDialogMemberOuter"
+      >
+        <template slot="outerContent">
+          <!-- 新增以及修改数据的表单组件 -->
+          <TableMember
+            :member-param="memberParam"
+            @closeMember="closeDialogMemberOuter"
+          />
+        </template>
+      </DialogModel>
+
+    </div>
+</template>
+
+<script>
+import { formLabelCrewTab, columnsListCrewTab } from '../table-crew'
+import { dialogConfigHat } from '../table-hat'
+import { dialogConfigMember } from '../table-member'
+import {
+  queryCrewPersonApi,
+  removeCrewApi,
+  unbindHatApi
+} from '@/api/base/crew'
+import { commonMixin } from '@/views/base/mixins/common'
+import TableHat from './table-hat.vue'
+import TableMember from './table-member.vue'
+export default {
+    name: 'TableCrew',
+    props: {
+        tableCrewParams: {
+          type: Object,
+          default: null
+        }
+    },
+    mixins: [commonMixin],
+    components: {
+      TableHat,
+      TableMember
+    },
+    created() {
+      console.log(this.tableCrewParams)
+      this.crewId = this.tableCrewParams.id
+      this.crewLeaderId = this.tableCrewParams.relId
+    },
+    mounted() {
+
+    },
+    data() {
+        return {
+          formLabelCrewTab,
+          columnsListCrewTab,
+          dialogConfigHat,
+          dialogConfigMember,
+          queryCrewPersonApi,
+          crewId: undefined,
+          crewLeaderId: undefined,
+          hatParam: undefined,
+          memberParam: undefined
+        }
+    },
+    methods: {
+      getIdList(idList) {
+        this.exportList = []
+        idList.forEach(item => {
+          this.exportList.push(item.id)
+        })
+      },
+      handleRemove(id) {
+        this.$modal
+          .confirm('确定移出班组吗？')
+          .then(() => {
+            removeCrewApi({
+              id
+            }).then(res => {
+              this.$refs.tableRef.getTableList()
+            }).catch(err => {})
+          })
+          .catch(() => {})
+      },
+      bindHat(v) {
+        this.hatParam = v
+        this.dialogConfigHat.outerVisible = true
+      },
+      closeDialogHatOuter(type) {
+        this.dialogConfigHat.outerVisible = false
+        if(type) {
+          this.$refs.tableRef.getTableList()
+        }
+      },
+      closeDialogMemberOuter(type) {
+        this.dialogConfigMember.outerVisible = false
+        if(type) {
+          this.$refs.tableRef.getTableList()
+        }
+      },
+      unbindHat(id) {
+        this.$modal
+          .confirm('确定解绑安全帽吗？')
+          .then(() => {
+            unbindHatApi({
+              id
+            }).then(res => {
+              this.$modal.msgSuccess('解绑成功')
+              this.$refs.tableRef.getTableList()
+            }).catch(err => {})
+          })
+          .catch(() => {})
+      },
+      handleAddMember() {
+        this.memberParam = this.tableCrewParams
+        this.dialogConfigMember.outerVisible = true
+      }
+    },
+}
+</script>
+
+<style scoped>
+::v-deep .el-select {
+    width: 100%;
+}
+::v-deep .el-form-item__label{
+  font-weight: normal;
+}
+.binding, .unbind{
+  cursor: pointer;
+}
+.binding:hover{
+  border-bottom: 2px solid #11AB21;
+}
+.unbind:hover{
+  border-bottom: 2px solid #FF0000;
+}
+</style>

src/views/base/crew/components/table-hat.vue

@@ -0,0 +1,109 @@
+<template>
+    <!-- 工程管理 新增、编辑 表单组件 -->
+    <div>
+      <TableModel
+        :formLabel="formLabelHat"
+        :columnsList="columnsListHat"
+        :request-api="queryHatApi"
+        ref="tableRef"
+        @transIdList="getIdList"
+        :show-right-tools="false"
+        :show-operation="false"
+        style="margin-bottom: 100px"
+        :sel-single="true"
+      >
+      </TableModel>
+
+      <div
+        style="display: flex; justify-content: right"
+      >
+        <el-button type="success" @click="onSubmit">绑定</el-button>
+        <el-button
+          @click="
+            () => {
+                this.$emit('closeHat', true)
+            }
+        "
+        >取消</el-button
+        >
+      </div>
+
+    </div>
+</template>
+
+<script>
+import { formLabelHat, columnsListHat } from '../table-hat'
+import {
+  queryHatApi,
+  bindHatApi,
+} from '@/api/base/crew'
+import { commonMixin } from '@/views/base/mixins/common'
+export default {
+    name: 'TableCrew',
+    props: {
+        hatParam: {
+          type: Object,
+          default: null
+        }
+    },
+    mixins: [commonMixin],
+    components: {  },
+    created() {
+      console.log(this.hatParam)
+    },
+    mounted() {
+
+    },
+    data() {
+        return {
+          formLabelHat,
+          columnsListHat,
+        }
+    },
+    methods: {
+      queryHatApi,
+      bindHatApi,
+      getIdList(idList) {
+        this.exportList = []
+        idList.forEach(item => {
+          this.exportList.push(item.devId)
+        })
+      },
+      async onSubmit() {
+        if(!this.exportList) {
+          this.$modal.msgError('未选中智能安全帽！')
+        } else if(this.exportList.length > 1) {
+          this.$modal.msgError('只能选择一种安全帽！')
+        } else {
+          console.log(this.exportList, this.hatParam)
+          let res = await bindHatApi({
+            id: this.hatParam.id,
+            devId: this.exportList[0]
+          })
+          if(res.code === 200) {
+            this.$modal.msgSuccess('绑定成功')
+            this.$emit('closeHat', true)
+          }
+        }
+      }
+    },
+}
+</script>
+
+<style scoped>
+::v-deep .el-select {
+    width: 100%;
+}
+::v-deep .el-form-item__label{
+  font-weight: normal;
+}
+.binding, .unbind{
+  cursor: pointer;
+}
+.binding:hover{
+  border-bottom: 2px solid #11AB21;
+}
+.unbind:hover{
+  border-bottom: 2px solid #FF0000;
+}
+</style>

src/views/base/crew/components/table-member.vue

@@ -0,0 +1,100 @@
+<template>
+    <!-- 工程管理 新增、编辑 表单组件 -->
+    <div>
+      <TableModel
+        :formLabel="formLabelMember"
+        :columnsList="columnsListMember"
+        :request-api="queryIsAllApi"
+        ref="tableRef"
+        @transIdList="getIdList"
+        :show-right-tools="false"
+        :show-operation="false"
+        style="margin-bottom: 100px"
+      >
+      </TableModel>
+
+      <div
+        style="display: flex; justify-content: right"
+      >
+        <el-button type="success" @click="onSubmit">绑定</el-button>
+        <el-button
+          @click="
+            () => {
+                this.$emit('closeHat', true)
+            }
+        "
+        >取消</el-button
+        >
+      </div>
+
+    </div>
+</template>
+
+<script>
+import { formLabelMember, columnsListMember } from '../table-member'
+import {
+  queryIsAllApi,
+  addCrewApi
+} from '@/api/base/crew'
+import { commonMixin } from '@/views/base/mixins/common'
+export default {
+    name: 'TableMember',
+    props: {
+        memberParam: {
+          type: Object,
+          default: null
+        }
+    },
+    mixins: [commonMixin],
+    components: {  },
+    created() {
+      console.log(this.memberParam)
+    },
+    mounted() {
+
+    },
+    data() {
+        return {
+          formLabelMember,
+          columnsListMember,
+        }
+    },
+    methods: {
+      queryIsAllApi,
+      getIdList(idList) {
+        this.exportList = []
+        idList.forEach(item => {
+          this.exportList.push(item.id)
+        })
+      },
+      async onSubmit() {
+        let res = await addCrewApi({
+          id: this.memberParam.id,
+          idList: this.exportList,
+        })
+        if(res.code === 200) {
+          this.$modal.msgSuccess('添加成功')
+          this.$emit('closeMember', true)
+        }
+      }
+    },
+}
+</script>
+
+<style scoped>
+::v-deep .el-select {
+    width: 100%;
+}
+::v-deep .el-form-item__label{
+  font-weight: normal;
+}
+.binding, .unbind{
+  cursor: pointer;
+}
+.binding:hover{
+  border-bottom: 2px solid #11AB21;
+}
+.unbind:hover{
+  border-bottom: 2px solid #FF0000;
+}
+</style>

src/views/base/crew/index.vue

@@ -30,18 +30,21 @@
           type="primary"
           size="mini"
           @click="handleEditData(data)"
+          v-if="data.teamStatus === '正常'"
         >编辑</el-button
         >
         <el-button
           type="danger"
           size="mini"
           @click="handleDeleteData(data.id, deleteCrewApi)"
-        >删除</el-button
+          v-if="data.teamStatus === '正常' && data.peopleCount === 1"
+        >解散</el-button
         >
+<!--        <span v-else>-</span>-->
       </template>
       <template slot="peopleCount" slot-scope="{ data }">
         <span
-          class="people-count"
+          :class="[{ peopleCount: data.teamStatus === '正常' }]"
           @click="handleCrew(data)"
         >
           {{ data.peopleCount }}
@@ -72,17 +75,32 @@
         />
       </template>
     </DialogModel>
+
+    <DialogModel
+      :dialogConfig="dialogConfigCrewTab"
+      @closeDialogOuter="closeDialogCrewTabOuter"
+    >
+      <template slot="outerContent">
+        <!-- 新增以及修改数据的表单组件 -->
+        <TableCrew
+          :table-crew-params="tableCrewData"
+        />
+      </template>
+    </DialogModel>
+
   </div>
 </template>
 
 <script>
 import { formLabel, columnsList, dialogConfig } from './config'
+import { dialogConfigCrewTab } from './table-crew'
 import { commonMixin } from '../mixins/common'
 import {
   queryCrewListApi,
   deleteCrewApi
 } from '@/api/base/crew'
 import FormCrew from './components/form-crew.vue'
+import TableCrew from './components/table-crew.vue'
 export default {
   name: 'crew',
   methods: {
@@ -94,13 +112,21 @@ export default {
         this.exportList.push(item.id)
       })
     },
+    closeDialogCrewTabOuter() {
+      this.dialogConfigCrewTab.outerVisible = false
+      this.$refs.tableRef.getTableList()
+    },
     handleCrew(v) {
-      console.log(v)
+      if(v.teamStatus === '正常') {
+        this.tableCrewData = v
+        this.dialogConfigCrewTab.outerVisible = true
+      }
     }
   },
   mixins: [commonMixin],
   components: {
-    FormCrew
+    FormCrew,
+    TableCrew
   },
   created() {
 
@@ -115,10 +141,12 @@ export default {
       columnsList,
       // 弹框区配置项
       dialogConfig,
+      dialogConfigCrewTab,
       // 新建时弹框标题
       addDialogTitle: '新增班组',
       // 修改时弹框标题
       editDialogTitle: '修改班组',
+      tableCrewData: undefined,
     }
   },
 }
@@ -126,7 +154,7 @@ export default {
 
 <style lang="scss" scoped>
 
-  .people-count{
+  .peopleCount{
 
     cursor: pointer;
     color: #11AB21;
@@ -134,7 +162,7 @@ export default {
 
   }
 
-  .people-count:hover{
+  .peopleCount:hover{
 
     border-bottom: 2px solid #11AB21;
 

src/views/base/crew/table-crew.js

@@ -1,20 +1,20 @@
 export const formLabelCrewTab = [
-    { f_label: '姓名', f_model: 'name', f_type: 'ipt' },
+    { f_label: '姓名', f_model: 'relName', f_type: 'ipt' },
     { f_label: '性别', f_model: 'sex', f_type: 'sel', f_selList: [
         { label: '男', value: '1' },
         { label: '女', value: '0' },
       ] },
 ]
 export const columnsListCrewTab = [
-    { t_props: 'teamName', t_label: '姓名', },
+    { t_props: 'relName', t_label: '姓名', t_slot: 'relName' },
-    { t_props: 'proName', t_label: '身份证', },
+    { t_props: 'idCard', t_label: '身份证', },
-    { t_props: 'relName', t_label: '电话', },
+    { t_props: 'relPhone', t_label: '电话', },
-    { t_props: 'peopleCount', t_label: '性别', t_slot: 'peopleCount' },
+    { t_props: 'sex', t_label: '性别', t_slot: 'sex' },
-    { t_props: 'teamStatus', t_label: '智能安全帽', t_slot: 'teamStatus' },
+    { t_props: 'devName', t_label: '智能安全帽', t_slot: 'devName' },
 ]
 
 export const dialogConfigCrewTab = {
-    outerWidth: '60%',
+    outerWidth: '80%',
-    outerTitle: '',
+    outerTitle: '班组成员列表',
     outerVisible: false,
 }

src/views/base/crew/table-hat.js

@@ -0,0 +1,13 @@
+export const formLabelHat = [
+    { f_label: '关键字', f_model: 'keyWord', f_type: 'ipt' },
+]
+export const columnsListHat = [
+    { t_props: 'devName', t_label: '智能安全帽名称', },
+    { t_props: 'devCode', t_label: '智能安全帽编码', },
+]
+
+export const dialogConfigHat = {
+    outerWidth: '50%',
+    outerTitle: '选择安全帽',
+    outerVisible: false,
+}

src/views/base/crew/table-member.js

@@ -0,0 +1,14 @@
+export const formLabelMember = [
+    { f_label: '姓名', f_model: 'relName', f_type: 'ipt' },
+]
+export const columnsListMember = [
+    { t_props: 'relName', t_label: '姓名', },
+    { t_props: 'idCard', t_label: '身份证号', },
+    { t_props: 'relPhone', t_label: '手机号', },
+]
+
+export const dialogConfigMember = {
+    outerWidth: '50%',
+    outerTitle: '选择新成员',
+    outerVisible: false,
+}

src/views/base/device/components/form-device.vue

@@ -0,0 +1,251 @@
+<template>
+    <!-- 工程管理 新增、编辑 表单组件 -->
+    <div>
+        <el-form
+            label-width="100px"
+            size="medium"
+            ref="projectParamsRef"
+            :model="projectParams"
+            :rules="projectParamsRules"
+        >
+          <el-form-item label="项目部名称" prop="departName">
+            <el-select
+              v-model="projectParams.departName"
+              allow-create
+              clearable
+              filterable
+              placeholder="请选择"
+              @change="departNameChange"
+            >
+              <el-option
+                v-for="item in projRange"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="项目部类型" prop="departType">
+            <el-select
+              v-model="projectParams.departType"
+              clearable
+              filterable
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in typeRange"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="地区" prop="areaId">
+            <el-select
+              v-model="projectParams.areaId"
+              clearable
+              filterable
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in provinceRange"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="负责人" prop="headUser">
+            <el-input v-model="projectParams.headUser" placeholder="请输入" />
+          </el-form-item>
+          <el-form-item label="负责人电话" prop="headUserPhone">
+            <el-input v-model="projectParams.headUserPhone" :maxlength="11" placeholder="请输入" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remarks">
+            <el-input v-model="projectParams.remarks" placeholder="请输入" />
+          </el-form-item>
+          <el-form-item>
+              <el-button type="success" @click="onSubmit">确认</el-button>
+              <el-button
+                  @click="
+                      () => {
+                          this.$emit('closeDialog')
+                      }
+                  "
+                  >取消</el-button
+              >
+          </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import {
+  queryProvincesApi,
+  queryProjDeptTypeApi,
+  queryProjDeptNameApi,
+  addProjDeptApi,
+  editProjDeptApi
+} from '@/api/base/projDept'
+export default {
+    name: 'FormDevice',
+    props: {
+        editParams: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    components: {  },
+    created() {
+      this.getRanges()
+    },
+    mounted() {
+        console.log(this.editParams)
+        if (this.editParams) {
+            Object.assign(this.projectParams, this.editParams)
+            this.subSort = 2
+        } else {
+            this.subSort = 1
+        }
+    },
+    data() {
+        return {
+            subSort: '', // 提交类型：新增 1 / 修改 2
+            projectParams: {
+              departName: undefined, //项目部名称
+              departType: undefined, //项目部类型
+              areaId: undefined, // 地区
+              headUser: undefined, // 负责人
+              headUserPhone: undefined, //负责人电话
+              remarks: undefined, // 备注
+            },
+            // 校验规则
+            projectParamsRules: {
+              departName: [
+                  {
+                      required: true,
+                      message: '请输入项目部名称',
+                      trigger: 'blur',
+                  },
+              ],
+              departType: [
+                {
+                  required: true,
+                  message: '请输入项目部类型',
+                  trigger: 'blur',
+                },
+              ],
+            },
+            // 各类下拉
+            projRange: [],
+            provinceRange: [],
+            typeRange: [],
+            // 手机号正则
+            phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
+        }
+    },
+    methods: {
+        /** 获取各类下拉框 */
+        async getRanges() {
+          // 获取省份下拉选
+          let provinceRes = await queryProvincesApi()
+          this.provinceRange = provinceRes.data.map(item => {
+            return {
+              label: item.areaName,
+              value: item.areaId
+            }
+          })
+          // 获取项目部类型下拉选
+          let typeRes = await queryProjDeptTypeApi({
+            dictType: 'depar_type'
+          })
+          this.typeRange = typeRes.data.map(item => {
+            return {
+              label: item.dictLabel,
+              value: item.dictCode
+            }
+          })
+          // 获取项目部名称下拉选
+          let projRes = await queryProjDeptNameApi()
+          this.projRange = projRes.data.map(item => {
+            return {
+              label: item.departName,
+              value: item.departName,
+              departType: item.departType,
+              areaName: item.areaName,
+              headUser: item.headUser,
+              headUserPhone: item.headUserPhone,
+              remarks: item.remarks,
+            }
+          })
+        },
+        /** 改变树结构 */
+        changeTree(leaf) {
+          leaf.map(item => {
+            item.value = item.id
+            if(item.children) {
+              this.changeTree(item.children)
+            }
+          })
+          return leaf
+        },
+        /** 项目部名称改变 */
+        departNameChange(e) {
+          this.projRange.forEach(item => {
+            if(e === item.label) {
+              this.projectParams.departType = item.departType
+              this.projectParams.areaId = item.areaId
+              this.projectParams.headUser = item.headUser
+              this.projectParams.headUserPhone = item.headUserPhone
+              this.projectParams.remarks = item.remarks
+            }
+          })
+        },
+        /** 级联选择器改变 */
+        handleCas(e) {
+          this.projectParams.impUnit = e[e.length - 1]
+        },
+        /** 确认按钮 */
+        onSubmit() {
+            this.$refs.projectParamsRef.validate(valid => {
+                if (valid) {
+                    if(this.projectParams.headUserPhone !== undefined && this.projectParams.headUserPhone !== "" && this.projectParams.headUserPhone !== null) {
+                      if(!this.phoneReg.test(this.projectParams.headUserPhone)) {
+                        this.$modal.msgError('请填写正确的联系方式')
+                        return false
+                      }
+                    }
+                    console.log('校验通过', this.projectParams, this.subSort)
+                    // 1. 表单校验通过后调后台 Api
+                    if(this.subSort === 1) {
+                      addProjDeptApi(this.projectParams).then(res => {
+                        this.$modal.msgSuccess('操作成功')
+                        // 2. 成功之后通知父组件关闭弹框
+                        this.$emit('closeDialog', true)
+                      }).catch(err => {
+                        console.log(err)
+                      })
+                    } else if(this.subSort === 2) {
+                      editProjDeptApi(this.projectParams).then(res => {
+                        this.$modal.msgSuccess('操作成功')
+                        // 2. 成功之后通知父组件关闭弹框
+                        this.$emit('closeDialog', true)
+                      }).catch(err => {
+                        console.log(err)
+                      })
+                    }
+                }
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+::v-deep .el-select {
+    width: 100%;
+}
+::v-deep .el-form-item__label{
+  font-weight: normal;
+}
+</style>

src/views/base/device/config.js

@@ -0,0 +1,20 @@
+export const formLabel = [
+    { f_label: '设备类型', f_model: 'areaId', f_type: 'ipt', },
+    { f_label: '设备名称', f_model: 'departName', f_type: 'ipt' },
+    { f_label: '设备编码', f_model: 'headUser', f_type: 'ipt' },
+    { f_label: '状态', f_model: 'headUser', f_type: 'ipt' },
+]
+export const columnsList = [
+    { t_props: 'departName', t_label: '设备类型', },
+    { t_props: 'departType', t_label: '设备编码' },
+    { t_props: 'areaName', t_label: '设备名称' },
+    { t_props: 'headUser', t_label: '所属边代设备', },
+    { t_props: 'headUserPhone', t_label: '预警配置', },
+    { t_props: 'remarks', t_label: '设备状态', },
+]
+
+export const dialogConfig = {
+    outerWidth: '60%',
+    outerTitle: '',
+    outerVisible: false,
+}

src/views/base/device/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- 工程管理页面 -->
+  <div class="app-container">
+    <!-- 表格 -->
+    <TableModel
+      :formLabel="formLabel"
+      :columnsList="columnsList"
+      :request-api="queryProjDeptListApi"
+      ref="tableRef"
+      @transIdList="getIdList"
+    >
+      <template slot="btn" slot-scope="{ queryParams }">
+        <el-button type="primary" @click="handleAddData()" icon="el-icon-plus" size="mini"
+        >新建项目部</el-button
+        >
+        <el-button
+          @click="handleExportData(
+                    exportList,
+                    'base/tbProDepart/export',
+                    '项目部清单',
+                    queryParams
+                  )"
+          icon="el-icon-upload2"
+          size="mini"
+        >导出数据</el-button
+        >
+      </template>
+      <template slot="handle" slot-scope="{ data }">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="handleEditData(data)"
+        >编辑</el-button
+        >
+        <el-button
+          type="danger"
+          size="mini"
+          @click="handleDeleteData(data.id, deleteProjDeptApi)"
+        >删除</el-button
+        >
+      </template>
+<!--      <template slot="isMatch" slot-scope="{ data }">
+        {{ data.proId == null ? '不匹配' : '匹配' }}
+      </template>-->
+    </TableModel>
+
+    <!-- 新增以及修改时的弹框 -->
+    <DialogModel
+      :dialogConfig="dialogConfig"
+      @closeDialogOuter="closeDialogOuter"
+    >
+      <template slot="outerContent">
+        <!-- 新增以及修改数据的表单组件 -->
+        <FormDevice
+          :editParams="editParams"
+          @closeDialog="closeDialog"
+        />
+      </template>
+    </DialogModel>
+  </div>
+</template>
+
+<script>
+import { formLabel, columnsList, dialogConfig, queryProvinces } from './config'
+import { commonMixin } from '../mixins/common'
+import {
+  queryProjDeptListApi,
+  deleteProjDeptApi
+} from '@/api/base/projDept'
+import FormDevice from './components/form-device.vue'
+export default {
+  name: 'ProjectDepart',
+  methods: {
+    queryProjDeptListApi,
+    deleteProjDeptApi,
+    getIdList(idList) {
+      this.exportList = []
+      idList.forEach(item => {
+        this.exportList.push(item.id)
+      })
+    }
+  },
+  mixins: [commonMixin],
+  components: {
+    FormDevice
+  },
+  created() {
+    queryProvinces()
+  },
+  data() {
+    return {
+      // 搜索区表单配置项
+      formLabel,
+      // 表格导出id列表
+      exportList: [],
+      // 列表区配置项
+      columnsList,
+      // 弹框区配置项
+      dialogConfig,
+      // 新建时弹框标题
+      addDialogTitle: '新建项目部',
+      // 修改时弹框标题
+      editDialogTitle: '修改项目部',
+    }
+  },
+}
+</script>

src/views/base/person/components/form-person.vue

@@ -101,10 +101,10 @@ export default {
         if (this.editParams) {
             Object.assign(this.projectParams, this.editParams)
             // 查询未脱敏数据
-            queryInfoApi(this.editParams.id).then(res => {
+            /* queryInfoApi(this.editParams.id).then(res => {
               this.projectParams.idCard = res.data.idCard
               this.projectParams.relPhone = res.data.relPhone
-            }).catch(err => {})
+            }).catch(err => {}) */
             this.subSort = 2
         } else {
             this.subSort = 1

src/views/base/proj/index.vue

@@ -36,6 +36,7 @@
           type="danger"
           size="mini"
           @click="handleDeleteData(data.id, deleteProjApi)"
+          v-if="data.powerTotal === 0"
         >删除</el-button
         >
       </template>