预警后台初始化-部分模块搭建及调试-d2

src/api/base/crew.js

@@ -0,0 +1,55 @@
+/**
+ * 班组管理页面 API
+ */
+import request from '@/utils/request'
+
+/** 班组列表查询 */
+export const queryCrewListApi = (data) => {
+  return request.get('/base/tbTeam/list', {
+    params: data
+  })
+}
+
+/** 新增班组 */
+export const addCrewApi = (data) => {
+  return request.post('/base/tbTeam', data)
+}
+
+/** 修改人员 */
+export const editPersonApi = (data) => {
+  return request.put('/base/tbPeople', data)
+}
+
+/** 删除班组 */
+export const deleteCrewApi = (id) => {
+  return request.delete(`/base/tbTeam/${id}`)
+}
+
+/** 人员信息查询 */
+export const queryInfoApi = (id) => {
+  return request.get(`/base/tbPeople/${id}`)
+}
+
+/** 班组长查询 isAll: 0 */
+export const queryLeaderApi = (data) => {
+  return request.get('/base/tbPeople/list', {
+    params: data
+  })
+}
+
+/** 成员查询 isAll: 0 */
+export const queryIsAllApi = (data) => {
+  return request.get('/base/tbPeople/list', {
+    params: {
+      isAll: 0,
+      ...data
+    }
+  })
+}
+
+/** 工程查询 isAll: 0 */
+export const queryProjApi = (data) => {
+  return request.get('/base/tbProject/list', {
+    params: data
+  })
+}

src/api/base/person.js

@@ -0,0 +1,31 @@
+/**
+ * 人员管理页面 API
+ */
+import request from '@/utils/request'
+
+/** 人员列表查询 */
+export const queryPersonListApi = (data) => {
+  return request.get('/base/tbPeople/list', {
+    params: data
+  })
+}
+
+/** 新增人员 */
+export const addPersonApi = (data) => {
+  return request.post('/base/tbPeople', data)
+}
+
+/** 修改人员 */
+export const editPersonApi = (data) => {
+  return request.put('/base/tbPeople', data)
+}
+
+/** 删除人员 */
+export const deletePersonApi = (id) => {
+  return request.delete(`/base/tbPeople/${id}`)
+}
+
+/** 人员信息查询 */
+export const queryInfoApi = (id) => {
+  return request.get(`/base/tbPeople/${id}`)
+}

src/api/base/proj.js

@@ -31,17 +31,46 @@ export const queryDeptApi = (data) => {
   })
 }
 
+/** 杆塔列表查询 */
+export const queryTowerListApi = (data) => {
+  return request.get('/base/tbProPower/list', {
+    params: data
+  })
+}
+
+/** 新增杆塔查询 */
+export const queryExistTowerApi = (data) => {
+  return request.get('/base/tbProPower/getList', {
+    params: data
+  })
+}
+
 /** 新增工程 */
 export const addProjApi = (data) => {
   return request.post('/base/tbProject', data)
 }
 
+/** 新增杆塔 */
+export const addTowerApi = (data) => {
+  return request.post('/base/tbProPower', data)
+}
+
 /** 修改工程 */
 export const editProjApi = (data) => {
   return request.put('/base/tbProject', data)
 }
 
+/** 修改杆塔 */
+export const editTowerApi = (data) => {
+  return request.put('/base/tbProPower', data)
+}
+
 /** 删除工程 */
 export const deleteProjApi = (id) => {
   return request.delete(`/base/tbProject/${id}`)
 }
+
+/** 删除杆塔 */
+export const deleteTowerApi = (id) => {
+  return request.delete(`/base/tbProPower/${id}`)
+}

src/components/TableModel/index.vue

@@ -357,11 +357,11 @@ export default {
                 console.log(res, '列表数据')
                 if (res.code === 200) {
                   if (res.data) {
-                    this.tableList = res.data.rows
+                    this.tableList = res.data.rows || res.data
-                    this.total = res.data.total
+                    this.total = res.data.total || res.data.length
                   } else {
-                    this.tableList = res.rows
+                    this.tableList = res.rows || res.data
-                    this.total = res.total
+                    this.total = res.total || res.rows.length
                   }
                 }
               }
@@ -373,11 +373,11 @@ export default {
             console.log(res, '列表数据')
             if (res.code === 200) {
               if (res.data) {
-                this.tableList = res.data.rows
+                this.tableList = res.data.rows || res.data
-                this.total = res.data.total
+                this.total = res.data.total || res.data.length
               } else {
-                this.tableList = res.rows
+                this.tableList = res.rows || res.data
-                this.total = res.total
+                this.total = res.total || res.rows.length
               }
             }
           }

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

@@ -0,0 +1,294 @@
+<template>
+    <!-- 工程管理 新增、编辑 表单组件 -->
+    <div>
+        <el-form
+            label-width="100px"
+            size="medium"
+            ref="projectParamsRef"
+            :model="projectParams"
+            :rules="projectParamsRules"
+        >
+          <el-row type="flex" justify="space-between" :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="班组名称" prop="teamName">
+                <el-input v-model="projectParams.teamName" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="班组长" prop="relId">
+                <el-select
+                  v-model="projectParams.relId"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                  @change="leaderChange"
+                >
+                  <el-option
+                    v-for="item in leaderRange"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                    <span style="float: left">{{ item.label }}</span>
+                    <span style="padding-left: 25px">{{ item._idCard }}</span>
+                    <span style="float: right">{{ item._relPhone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row type="flex" justify="space-between" :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="所属工程" prop="proId">
+                <el-select
+                  v-model="projectParams.proId"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                  @change="projChange"
+                >
+                  <el-option
+                    v-for="item in projRange"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+      <div style="margin-left: 20px; margin-bottom: 15px">选择工程成员</div>
+
+      <TableModel
+        :columnsList="columnsListCrew"
+        :request-api="queryIsAllApi"
+        ref="tableRef"
+        @transIdList="getIdList"
+        :show-btn-crews="false"
+        :show-right-tools="false"
+        style="margin-bottom: 100px"
+        :selectable="(row) => {
+          return row.id !== ableSelect
+        }"
+      >
+        <template slot="handle" slot-scope="{ data }">
+          <i
+            style="font-size: 30px; color: red; cursor: pointer"
+            class="el-icon-remove"
+            @click="delCrew(data)"
+            v-if="ableSelect !== data.id"
+          ></i>
+        </template>
+        <template slot="idCard" slot-scope="{ data }">
+          {{ idCardCrypto(data.idCard) }}
+        </template>
+        <template slot="relPhone" slot-scope="{ data }">
+          {{ phoneCrypto(data.relPhone) }}
+        </template>
+      </TableModel>
+
+      <div
+        style="display: flex; justify-content: right"
+      >
+        <el-button type="success" @click="onSubmit">确认</el-button>
+        <el-button
+          @click="
+            () => {
+                this.$emit('closeDialog')
+            }
+        "
+        >取消</el-button
+        >
+      </div>
+
+    </div>
+</template>
+
+<script>
+import { commonMixin } from '@/views/base/mixins/common'
+import { columnsListCrew } from '../config-crew'
+import {
+  addCrewApi,
+  queryLeaderApi,
+  queryIsAllApi,
+  queryProjApi
+} from '@/api/base/crew'
+export default {
+    name: 'FormPerson',
+    props: {
+        crewParams: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    mixins: [commonMixin],
+    components: {  },
+    created() {
+      this.getRanges()
+    },
+    mounted() {
+      if (this.crewParams) {
+          Object.assign(this.projectParams, this.crewParams)
+          this.subSort = 2
+      } else {
+          this.subSort = 1
+      }
+    },
+    data() {
+        return {
+            columnsListCrew,
+            exportList: [],
+            subSort: '', // 提交类型：新增 1 / 修改 2
+            ableSelect: undefined,
+            projectParams: {
+              teamName: undefined, //班组名称
+              relId: undefined, //班组长
+              proId: undefined, // 所属工程
+            },
+            // 校验规则
+            projectParamsRules: {
+              teamName: [
+                  {
+                      required: true,
+                      message: '请输入班组名称',
+                      trigger: 'blur',
+                  },
+              ],
+              relId: [
+                {
+                  required: true,
+                  message: '请选择班组长',
+                  trigger: 'blur',
+                },
+              ],
+              proId: [
+                {
+                  required: true,
+                  message: '请选择所属工程',
+                  trigger: 'blur',
+                },
+              ],
+            },
+            // 各类下拉
+            leaderRange: [],
+            projRange: []
+        }
+    },
+    methods: {
+        queryIsAllApi,
+        getIdList(idList) {
+          this.exportList = []
+          idList.forEach(item => {
+            this.exportList.push(item.id)
+          })
+        },
+        /** 获取各类下拉框 */
+        async getRanges() {
+          // 获取班组长下拉选
+          let leaderRes = await queryLeaderApi({
+            isAll: 0
+          })
+          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
+          })
+          this.projRange = projRes.data.map(item => {
+            return {
+              label: item.proName,
+              value: item.id
+            }
+          })
+        },
+        /** 改变树结构 */
+        changeTree(leaf) {
+          leaf.map(item => {
+            item.value = item.id
+            if(item.children) {
+              this.changeTree(item.children)
+            }
+          })
+          return leaf
+        },
+        leaderChange(e) {
+          this.leaderRange.forEach(item => {
+            if(e === item.value) {
+              this.ableSelect = e
+              this.projectParams.relName = item.label
+              this.projectParams.relPhone = item.relPhone
+            }
+          })
+        },
+        projChange(e) {
+          this.projRange.forEach(item => {
+            if(e === item.value) {
+              this.projectParams.proName = item.label
+            }
+          })
+        },
+        delCrew(v) {
+          this.$modal
+            .confirm('确定移除此项吗？')
+            .then(() => {
+              this.$refs.tableRef.tableList.forEach((item, index) => {
+                if(item.id === v.id) {
+                  this.$refs.tableRef.tableList.splice(index, 1)
+                }
+              })
+            })
+            .catch(() => {})
+        },
+        /** 级联选择器改变 */
+        handleCas(e) {
+          this.projectParams.impUnit = e[e.length - 1]
+        },
+        /** 确认按钮 */
+        onSubmit() {
+            this.$refs.projectParamsRef.validate(valid => {
+                if (valid) {
+                    this.projectParams.idList = this.exportList
+                    console.log('校验通过', this.projectParams, this.subSort)
+                    // 1. 表单校验通过后调后台 Api
+                    if(this.subSort === 1) {
+                      addCrewApi(this.projectParams).then(res => {
+                        this.$modal.msgSuccess('操作成功')
+                        // 2. 成功之后通知父组件关闭弹框
+                        this.$emit('closeDialog', true)
+                      }).catch(err => {
+                        console.log(err)
+                      })
+                    } else if(this.subSort === 2) {
+                      editPersonApi(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/crew/config-crew.js

@@ -0,0 +1,5 @@
+export const columnsListCrew = [
+    { t_props: 'relName', t_label: '姓名', },
+    { t_props: 'idCard', t_label: '身份证', t_slot: 'idCard' },
+    { t_props: 'relPhone', t_label: '电话', t_slot: 'relPhone' },
+]

src/views/base/crew/config.js

@@ -0,0 +1,20 @@
+export const formLabel = [
+    { f_label: '关键字', f_model: 'keyWord', f_type: 'ipt' },
+    { f_label: '班组名称', f_model: 'teamName', f_type: 'ipt' },
+    { f_label: '班组长', f_model: 'relName', f_type: 'ipt' },
+]
+export const columnsList = [
+    { t_props: 'teamName', t_label: '班组名称', },
+    { t_props: 'proName', t_label: '所属工程', },
+    { t_props: 'relName', t_label: '班组长', },
+    { t_props: 'peopleCount', t_label: '班组成员', t_slot: 'peopleCount' },
+    { t_props: 'teamStatus', t_label: '班组状态', t_slot: 'teamStatus' },
+    { t_props: 'createTime', t_label: '创建日期', },
+    { t_props: 'jsTime', t_label: '解散日期', },
+]
+
+export const dialogConfig = {
+    outerWidth: '60%',
+    outerTitle: '',
+    outerVisible: false,
+}

src/views/base/crew/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <!-- 工程管理页面 -->
+  <div class="app-container">
+    <!-- 表格 -->
+    <TableModel
+      :formLabel="formLabel"
+      :columnsList="columnsList"
+      :request-api="queryCrewListApi"
+      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/tbPeople/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, deleteCrewApi)"
+        >删除</el-button
+        >
+      </template>
+      <template slot="peopleCount" slot-scope="{ data }">
+        <span
+          class="people-count"
+          @click="handleCrew(data)"
+        >
+          {{ data.peopleCount }}
+        </span>
+      </template>
+      <template slot="teamStatus" slot-scope="{ data }">
+        <span
+          v-if="data.teamStatus === '正常'"
+          style="color: #11AB21;"
+        >{{ data.teamStatus }}</span>
+        <span
+          v-else
+          style="color: #FF0000"
+        >{{ data.teamStatus }}</span>
+      </template>
+    </TableModel>
+
+    <!-- 新增以及修改时的弹框 -->
+    <DialogModel
+      :dialogConfig="dialogConfig"
+      @closeDialogOuter="closeDialogOuter"
+    >
+      <template slot="outerContent">
+        <!-- 新增以及修改数据的表单组件 -->
+        <FormCrew
+          :crew-params="editParams"
+          @closeDialog="closeDialog"
+        />
+      </template>
+    </DialogModel>
+  </div>
+</template>
+
+<script>
+import { formLabel, columnsList, dialogConfig } from './config'
+import { commonMixin } from '../mixins/common'
+import {
+  queryCrewListApi,
+  deleteCrewApi
+} from '@/api/base/crew'
+import FormCrew from './components/form-crew.vue'
+export default {
+  name: 'crew',
+  methods: {
+    queryCrewListApi,
+    deleteCrewApi,
+    getIdList(idList) {
+      this.exportList = []
+      idList.forEach(item => {
+        this.exportList.push(item.id)
+      })
+    },
+    handleCrew(v) {
+      console.log(v)
+    }
+  },
+  mixins: [commonMixin],
+  components: {
+    FormCrew
+  },
+  created() {
+
+  },
+  data() {
+    return {
+      // 搜索区表单配置项
+      formLabel,
+      // 表格导出id列表
+      exportList: [],
+      // 列表区配置项
+      columnsList,
+      // 弹框区配置项
+      dialogConfig,
+      // 新建时弹框标题
+      addDialogTitle: '新增班组',
+      // 修改时弹框标题
+      editDialogTitle: '修改班组',
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .people-count{
+
+    cursor: pointer;
+    color: #11AB21;
+    font-weight: bold;
+
+  }
+
+  .people-count:hover{
+
+    border-bottom: 2px solid #11AB21;
+
+  }
+
+</style>

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

@@ -0,0 +1,20 @@
+export const formLabelCrewTab = [
+    { f_label: '姓名', f_model: 'name', 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: 'proName', t_label: '身份证', },
+    { t_props: 'relName', t_label: '电话', },
+    { t_props: 'peopleCount', t_label: '性别', t_slot: 'peopleCount' },
+    { t_props: 'teamStatus', t_label: '智能安全帽', t_slot: 'teamStatus' },
+]
+
+export const dialogConfigCrewTab = {
+    outerWidth: '60%',
+    outerTitle: '',
+    outerVisible: false,
+}

src/views/base/mixins/common.js

@@ -68,6 +68,11 @@ export const commonMixin = {
             return phoneNumber.replace(reg, "$1****$2")
           }
           return phoneNumber
+        },
+        /** 身份证号脱密处理 */
+        idCardCrypto(idCard) {
+          let reg = /^(.{6})(?:\d+)(.{4})$/
+          return idCard.replace(reg, '\$1******\$2')
         }
     }
 }

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

@@ -0,0 +1,264 @@
+<template>
+    <!-- 工程管理 新增、编辑 表单组件 -->
+    <div>
+        <el-form
+            label-width="100px"
+            size="medium"
+            ref="projectParamsRef"
+            :model="projectParams"
+            :rules="projectParamsRules"
+        >
+          <el-row type="flex" justify="space-between" :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="姓名" prop="relName">
+                <el-input v-model="projectParams.relName" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="身份证号" prop="idCard">
+                <el-input v-model="projectParams.idCard" :maxlength="18" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row type="flex" justify="space-between" :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="性别" prop="sex">
+                <el-select
+                  v-model="projectParams.sex"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="item in sexRange"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="手机号" prop="relPhone">
+                <el-input v-model="projectParams.relPhone" :maxlength="11" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row type="flex" justify="space-between" :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="岗位工种" prop="postCode">
+                <el-select
+                  v-model="projectParams.postCode"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="item in jobRange"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <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 {
+  addPersonApi,
+  editPersonApi,
+  queryInfoApi
+} from '@/api/base/person'
+import { call } from 'runjs/lib/script'
+export default {
+    name: 'FormPerson',
+    props: {
+        editParams: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    components: {  },
+    created() {
+
+    },
+    mounted() {
+        if (this.editParams) {
+            Object.assign(this.projectParams, this.editParams)
+            // 查询未脱敏数据
+            queryInfoApi(this.editParams.id).then(res => {
+              this.projectParams.idCard = res.data.idCard
+              this.projectParams.relPhone = res.data.relPhone
+            }).catch(err => {})
+            this.subSort = 2
+        } else {
+            this.subSort = 1
+        }
+    },
+    data() {
+        return {
+            subSort: '', // 提交类型：新增 1 / 修改 2
+            projectParams: {
+              relName: undefined, //姓名
+              idCard: undefined, //身份证号
+              sex: undefined, // 性别
+              relPhone: undefined, // 手机号
+              postCode: undefined, //岗位工种
+            },
+            // 校验规则
+            projectParamsRules: {
+              relName: [
+                  {
+                      required: true,
+                      message: '请输入姓名',
+                      trigger: 'blur',
+                  },
+              ],
+              idCard: [
+                {
+                  required: true,
+                  message: '身份证号格式不正确',
+                  validator: this.validateIdCard,
+                  trigger: 'blur',
+                },
+              ],
+              sex: [
+                {
+                  required: true,
+                  message: '请选择性别',
+                  trigger: 'blur',
+                },
+              ],
+              relPhone: [
+                {
+                  required: true,
+                  message: '手机号格式不正确',
+                  validator: this.validatePhone,
+                  trigger: 'blur',
+                },
+              ],
+              postCode: [
+                {
+                  required: true,
+                  message: '请选择岗位工种',
+                  trigger: 'blur',
+                },
+              ],
+            },
+            // 各类下拉
+            sexRange: [
+              { label: '男', value: 1 },
+              { label: '女', value: 0 },
+            ],
+            jobRange: [
+              { label: '班组负责人', value: '0900101' },
+              { label: '班组安全员', value: '0900102' },
+              { label: '班组技术员', value: '0900103' },
+              { label: '特种作业人员', value: '0900106' },
+            ],
+            // 正则
+            phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+            idCardReg: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
+        }
+    },
+    methods: {
+        /** 获取各类下拉框 */
+        async getRanges() {
+          // 获取省份下拉选
+          let provinceRes = await queryProvincesApi()
+          this.provinceRange = provinceRes.data.map(item => {
+            return {
+              label: item.areaName,
+              value: item.areaId
+            }
+          })
+        },
+        /** 校验手机号 */
+        validatePhone(rule, value, callback) {
+          if(!this.phoneReg.test(value)) {
+            callback(new Error('手机号格式不正确'))
+          } else {
+            callback()
+          }
+        },
+        /** 校验身份证 */
+        validateIdCard(rule, value, callback) {
+          if(!this.idCardReg.test(value)) {
+            callback(new Error('身份证号格式不正确'))
+          } else {
+            callback()
+          }
+        },
+        /** 改变树结构 */
+        changeTree(leaf) {
+          leaf.map(item => {
+            item.value = item.id
+            if(item.children) {
+              this.changeTree(item.children)
+            }
+          })
+          return leaf
+        },
+        /** 级联选择器改变 */
+        handleCas(e) {
+          this.projectParams.impUnit = e[e.length - 1]
+        },
+        /** 确认按钮 */
+        onSubmit() {
+            this.$refs.projectParamsRef.validate(valid => {
+                if (valid) {
+                    /* if(this.projectParams.relPhone !== undefined && this.projectParams.relPhone !== "" && this.projectParams.relPhone !== 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) {
+                      addPersonApi(this.projectParams).then(res => {
+                        this.$modal.msgSuccess('操作成功')
+                        // 2. 成功之后通知父组件关闭弹框
+                        this.$emit('closeDialog', true)
+                      }).catch(err => {
+                        console.log(err)
+                      })
+                    } else if(this.subSort === 2) {
+                      editPersonApi(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/person/config.js

@@ -0,0 +1,20 @@
+export const formLabel = [
+    { 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 columnsList = [
+    { t_props: 'relName', t_label: '姓名', },
+    { t_props: 'sex', t_label: '性别', t_slot: 'sex' },
+    { t_props: 'postCode', t_label: '岗位工种', t_slot: 'postCode' },
+    { t_props: 'idCard', t_label: '身份证号', t_slot: 'idCard' },
+    { t_props: 'relPhone', t_label: '电话', t_slot: 'relPhone' },
+]
+
+export const dialogConfig = {
+    outerWidth: '60%',
+    outerTitle: '',
+    outerVisible: false,
+}

src/views/base/person/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <!-- 工程管理页面 -->
+  <div class="app-container">
+    <!-- 表格 -->
+    <TableModel
+      :formLabel="formLabel"
+      :columnsList="columnsList"
+      :request-api="queryPersonListApi"
+      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="handleDownload(
+                    'base/tbPeople/downLoad',
+                    '人员模板',
+                    queryParams
+                  )"
+          icon="el-icon-download"
+          size="mini"
+        >数据模板下载</el-button
+        >
+        <el-button
+          icon="el-icon-download"
+          size="mini"
+        >导入数据</el-button
+        >
+        <el-button
+          @click="handleExportData(
+                    exportList,
+                    'base/tbPeople/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, deletePersonApi)"
+        >删除</el-button
+        >
+      </template>
+      <template slot="sex" slot-scope="{ data }">
+        {{ data.sex === 1 ? '男' : '女' }}
+      </template>
+      <template slot="postCode" slot-scope="{ data }">
+        {{ queryPostcode(data.postCode) }}
+      </template>
+      <template slot="idCard" slot-scope="{ data }">
+        {{ idCardCrypto(data.idCard) }}
+      </template>
+      <template slot="relPhone" slot-scope="{ data }">
+        {{ phoneCrypto(data.relPhone) }}
+      </template>
+    </TableModel>
+
+    <!-- 新增以及修改时的弹框 -->
+    <DialogModel
+      :dialogConfig="dialogConfig"
+      @closeDialogOuter="closeDialogOuter"
+    >
+      <template slot="outerContent">
+        <!-- 新增以及修改数据的表单组件 -->
+        <FormPerson
+          :editParams="editParams"
+          @closeDialog="closeDialog"
+        />
+      </template>
+    </DialogModel>
+  </div>
+</template>
+
+<script>
+import { formLabel, columnsList, dialogConfig } from './config'
+import { commonMixin } from '../mixins/common'
+import {
+  queryPersonListApi,
+  deletePersonApi
+} from '@/api/base/person'
+import FormPerson from './components/form-person.vue'
+export default {
+  name: 'person',
+  methods: {
+    queryPersonListApi,
+    deletePersonApi,
+    getIdList(idList) {
+      this.exportList = []
+      idList.forEach(item => {
+        this.exportList.push(item.id)
+      })
+    },
+    handleDownload(url, fileName, queryParams) {
+      this.download(
+        url,
+        {
+          ...queryParams
+        },
+        `${fileName}_${new Date().getTime()}.xlsx`,
+      )
+    },
+    queryPostcode(val) {
+      switch (val) {
+        case '0900101':
+          return '班组负责人'
+        case '0900102':
+          return '班组安全员'
+        case '0900103':
+          return '班组技术员'
+        case '0900106':
+          return '特种作业人员'
+      }
+    }
+  },
+  mixins: [commonMixin],
+  components: {
+    FormPerson
+  },
+  created() {
+
+  },
+  data() {
+    return {
+      // 搜索区表单配置项
+      formLabel,
+      // 表格导出id列表
+      exportList: [],
+      // 列表区配置项
+      columnsList,
+      // 弹框区配置项
+      dialogConfig,
+      // 新建时弹框标题
+      addDialogTitle: '新增人员',
+      // 修改时弹框标题
+      editDialogTitle: '修改人员',
+    }
+  },
+}
+</script>

src/views/base/proj/components/table-tower-add.vue

@@ -8,8 +8,23 @@
       :model="towerAddParams"
       :rules="towerAddParamsRules"
     >
-      <el-form-item label="杆塔名称" prop="name">
+      <el-form-item label="杆塔名称" prop="gtName">
-        <el-input v-model="towerAddParams.name" placeholder="请输入" />
+        <el-select
+          v-model="towerAddParams.gtName"
+          clearable
+          filterable
+          allow-create
+          placeholder="请选择"
+          style="width: 100%"
+          @change="towerChange"
+        >
+          <el-option
+            v-for="item in towerRange"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="坐标经度" prop="lon">
         <el-input v-model="towerAddParams.lon" placeholder="请输入" />
@@ -33,6 +48,11 @@
 </template>
 
 <script>
+import {
+  queryExistTowerApi,
+  addTowerApi,
+  editTowerApi
+} from '@/api/base/proj'
 export default {
   name: 'towerAdd',
   props: {
@@ -42,29 +62,50 @@ export default {
     }
   },
   methods: {
+    /** 查询杆塔 */
+    async getRanges() {
+      let towerRes = await queryExistTowerApi()
+      this.towerRange = towerRes.data.map(item => {
+        return {
+          label: item.gtName,
+          value: item.gtName,
+          lon: item.lon,
+          lat: item.lat
+        }
+      })
+    },
+    /** 杆塔改变 */
+    towerChange(e) {
+      this.towerRange.forEach(item => {
+        if(e === item.label) {
+          this.towerAddParams.lon = item.lon
+          this.towerAddParams.lat = item.lat
+        }
+      })
+    },
     /** 确认按钮 */
     onSubmit() {
       this.$refs.towerAddParamsRef.validate(valid => {
         if (valid) {
-          console.log('校验通过', this.towerAddParams, this.subSort)
+          console.log('校验通过', this.towerAddParams, this.sendAddData)
           // 1. 表单校验通过后调后台 Api
-          /* if(this.subSort === 1) {
+          if(this.subSort === 1) {
-            addProjDeptApi(this.projectParams).then(res => {
+            addTowerApi(this.towerAddParams).then(res => {
               this.$modal.msgSuccess('操作成功')
               // 2. 成功之后通知父组件关闭弹框
-              this.$emit('closeDialog', true)
+              this.$emit('closeAdd', true)
             }).catch(err => {
               console.log(err)
             })
           } else if(this.subSort === 2) {
-            editProjDeptApi(this.projectParams).then(res => {
+            editTowerApi(this.towerAddParams).then(res => {
               this.$modal.msgSuccess('操作成功')
               // 2. 成功之后通知父组件关闭弹框
-              this.$emit('closeDialog', true)
+              this.$emit('closeAdd', true)
             }).catch(err => {
               console.log(err)
             })
-          } */
+          }
         }
       })
     },
@@ -73,28 +114,29 @@ export default {
 
   },
   created() {
-
+    this.getRanges()
   },
   mounted() {
-    console.log(this.sendAddData, '=======')
+    Object.assign(this.towerAddParams, this.sendAddData)
-    if (this.sendAddData) {
+    if (this.sendAddData.submitType === 'edit') {
-      Object.assign(this.towerAddParams, this.sendAddData)
+      this.sendAddData.proId = this.sendAddData.id
       this.subSort = 2
     } else {
       this.subSort = 1
     }
+    console.log(this.sendAddData, '=======')
   },
   data() {
     return {
       subSort: '', // 提交类型：新增 1 / 修改 2
       towerAddParams: {
-        name: undefined, //杆塔名称
+        gtName: undefined, //杆塔名称
         lon: undefined, // 经度
         lat: undefined, // 纬度
       },
       // 校验规则
       towerAddParamsRules: {
-        name: [
+        gtName: [
           {
             required: true,
             message: '请输入杆塔名称',
@@ -116,6 +158,8 @@ export default {
           },
         ],
       },
+      // 下拉
+      towerRange: []
     }
   },
 }

src/views/base/proj/components/table-tower.vue

@@ -5,9 +5,10 @@
     <TableModel
       :formLabel="formLabelTower"
       :columnsList="columnsListTower"
-      :request-api="queryProjListApi"
+      :request-api="queryTowerListApi"
       ref="tableRef"
       @transIdList="getIdList"
+      :show-sel="false"
     >
       <template slot="btn" slot-scope="{ queryParams }">
         <el-button type="primary" @click="handleAddTower()" icon="el-icon-plus" size="mini"
@@ -16,8 +17,8 @@
         <el-button
           @click="handleExportData(
                     exportList,
-                    'base/tbProject/export',
+                    'base/tbProPower/export',
-                    '工程清单',
+                    '杆塔清单',
                     queryParams
                   )"
           icon="el-icon-upload2"
@@ -27,6 +28,11 @@
         <el-button
           icon="el-icon-download"
           size="mini"
+          @click="handleDownload(
+            'base/tbProPower/downLoad',
+            '杆塔模板',
+            queryParams
+          )"
         >数据模板下载</el-button
         >
         <el-button
@@ -45,7 +51,7 @@
         <el-button
           type="danger"
           size="mini"
-          @click="handleDeleteData(data.id, deleteProjApi)"
+          @click="handleDeleteData(data.id, deleteTowerApi)"
         >删除</el-button
         >
       </template>
@@ -70,7 +76,8 @@
 
 <script>
 import {
-  queryProjListApi
+  queryTowerListApi,
+  deleteTowerApi
 } from '@/api/base/proj'
 import { formLabelTower, columnsListTower, dialogConfigTowerAdd } from '../config-tower'
 import { commonMixin } from '../../mixins/common'
@@ -84,16 +91,27 @@ export default {
     },
   },
   methods: {
-    queryProjListApi,
+    queryTowerListApi,
+    deleteTowerApi,
     handleAddTower() {
+      this.sendAddData = {
+        submitType: 'add',
+        proId: this.sendData.id
+      }
+      this.dialogConfigTowerAdd.outerTitle = '新增杆塔'
       this.dialogConfigTowerAdd.outerVisible = true
     },
     handleEditTower(data) {
+      data.submitType = 'edit'
       this.sendAddData = data
+      this.dialogConfigTowerAdd.outerTitle = '修改杆塔'
       this.dialogConfigTowerAdd.outerVisible = true
     },
-    closeAdd() {
+    closeAdd(type) {
       this.dialogConfigTowerAdd.outerVisible = false
+      if(type) {
+        this.$refs.tableRef.getTableList()
+      }
     },
     closeDialogTowerAddOuter() {
       this.dialogConfigTowerAdd.outerVisible = false
@@ -104,6 +122,16 @@ export default {
         this.exportList.push(item.id)
       })
     },
+    /** 下载模板 */
+    handleDownload(url, fileName, queryParams) {
+      this.download(
+        url,
+        {
+          ...queryParams
+        },
+        `${fileName}_${new Date().getTime()}.xlsx`,
+      )
+    },
   },
   mixins: [commonMixin],
   components: {

src/views/base/proj/config-tower.js

@@ -1,8 +1,8 @@
 export const formLabelTower = [
-    { f_label: '杆塔名称', f_model: 'name', f_type: 'ipt' },
+    { f_label: '杆塔名称', f_model: 'gtName', f_type: 'ipt' },
 ]
 export const columnsListTower = [
-    { t_props: 'name', t_label: '杆塔名称', },
+    { t_props: 'gtName', t_label: '杆塔名称', },
     { t_props: 'lon', t_label: '杆塔经度' },
     { t_props: 'lat', t_label: '杆塔纬度' },
 ]
@@ -15,6 +15,6 @@ export const dialogConfigTower = {
 
 export const dialogConfigTowerAdd = {
     outerWidth: '40%',
-    outerTitle: '新增杆塔',
+    outerTitle: '',
     outerVisible: false,
 }

src/views/base/proj/config.js

@@ -43,6 +43,7 @@ export const columnsList = [
     { t_props: 'relName', t_label: '电压等级' },
     { t_props: 'proTypeName', t_label: '工程类型', },
     { t_props: 'proStatusName', t_label: '工程状态', },
+    { t_props: 'areaName', t_label: '建管单位', },
     { t_props: 'lon', t_label: '经度', },
     { t_props: 'lat', t_label: '纬度', },
     { t_props: 'powerTotal', t_label: '杆塔', t_slot: 'powerTotal' },

src/views/base/proj/index.vue

@@ -97,6 +97,7 @@ export default {
     deleteProjApi,
     closeDialogTowerOuter() {
       this.dialogConfigTower.outerVisible = false
+      this.$refs.tableRef.getTableList()
     },
     getIdList(idList) {
       this.exportList = []