admin

src/api/bridge.js

import request from '@/utils/request'
/*  添加桥梁 */
export function addDevice(params) {
  return request({
    url: '/ajax/bridge',
    method: 'post',
    params
  })
}
/*  更新桥梁信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/bridge/update',
    method: 'post',
    params
  })
}
/*  删除桥梁信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/bridge/delete',
    method: 'get',
    params
  })
}
/*  查询单个桥梁 */
export function queryDevice(params) {
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}
/*  分页查询桥梁 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/bridge/pq',
    method: 'get',
    params
  })
}
/*  校验桥梁编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/bridge/checkCode',
    method: 'get',
    params
  })
}
/*  校验桥梁简称 */
export function checkBridgeShortName(params) {
  return request({
    url: '/ajax/bridge/checkShortName',
    method: 'get',
    params
  })
}
/*  校验桥梁全称 */
export function checkBridgeName(params) {
  return request({
    url: '/ajax/bridge/checkName',
    method: 'get',
    params
  })
}
/*  上传图片 */
export function uploadBridgeImg() {
  return request({
    url: '/ajax/bridge/upload',
    method: 'post'
  })
}

src/api/collectionbox.js

/*  添加采集盒 */
export function addDevice(params) {
  console.log(params)
  return request({
    url: '/ajax/device',
    method: 'post',

src/api/sensor.js

import request from '@/utils/request'
/*  添加传感器 */
export function addDevice(params) {
  return request({
    url: '/ajax/transducer',
    method: 'post',
    params
  })
}
/*  更新传感器信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/transducer/update',
    method: 'post',
    params
  })
}
/*  删除传感器信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/transducer/delete',
    method: 'get',
    params
  })
}
/*  查询单个传感器 */
export function queryDevice(params) {
  return request({
    url: '/ajax/transducer/qo',
    method: 'get',
    params
  })
}
/*  分页查询传感器 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/transducer/pq',
    method: 'get',
    params
  })
}
/*  传感器所属采集盒编号列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/device/listByCode',
    method: 'get',
    params
  })
}
/*  校验传感器编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/transducer/checkCode',
    method: 'get',
    params
  })
}
/*  校验传感器内部编号 */
export function checkDeviceInternalCode(params) {
  return request({
    url: '/ajax/transducer/checkSeq',
    method: 'get',
    params
  })
}
/*  查询采集盒名字 */
export function queryServer(params) {
  return request({
    url: '/ajax/device/qo',
    method: 'get',
    params
  })
}

src/api/server.js

import request from '@/utils/request'
/*  添加服务器 */
export function addDevice(params) {
  return request({
    url: '/ajax/server',
    method: 'post',
    params
  })
}
/*  更新服务器信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/server/update',
    method: 'post',
    params
  })
}
/*  删除服务器信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/server/delete',
    method: 'get',
    params
  })
}
/*  查询单个服务器 */
export function queryDevice(params) {
  return request({
    url: '/ajax/server/qo',
    method: 'get',
    params
  })
}
/*  分页查询服务器 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/server/pq',
    method: 'get',
    params
  })
}
/*  服务器所属采桥梁列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/bridge/list',
    method: 'get',
    params
  })
}
/*  校验服务器编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/server/checkCode',
    method: 'get',
    params
  })
}
/*  校验服务器内部编号 */
export function checkDeviceInternalCode(params) {
  return request({
    url: '/ajax/server/checkSeq',
    method: 'get',
    params
  })
}
/*  查询服务器名字 */
export function queryServer(params) {
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}

src/api/userManagemen.js

import request from '@/utils/request'
/*  停用用户 */
export function deleteUser(params) {
  return request({
    url: '/ajax/sys/ban',
    method: 'get',
    params
  })
}
/*  查询负责桥梁 */
export function queryResponsibleBridge(params) {
  return request({
    url: '/ajax/bridge/byUserId',
    method: 'get',
    params
  })
}
/*  分页查询用户 */
export function pageQueryUser(params) {
  return request({
    url: '/ajax/sys/pq',
    method: 'get',
    params
  })
}
/*  检查账号是否注册 */
export function checkRegister(params) {
  return request({
    url: '/ajax/sys/check',
    method: 'get',
    params
  })
}
/*  新增新用户 */
export function addRegister(params) {
  return request({
    url: '/ajax/sys/insert',
    method: 'post',
    params
  })
}
/*  更新新用户 */
export function updateRegister(params) {
  return request({
    url: '/ajax/sys/update',
    method: 'post',
    params
  })
}
/*  查找用户信息 */
export function queryRegister(params) {
  return request({
    url: '/ajax/sys/qo',
    method: 'get',
    params
  })
}
/*  传感器所属采集盒编号列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/bridge/list',
    method: 'get',
    params
  })
}
/*  更新用户权限 */
export function updatePermission(params) {
  return request({
    url: '/ajax/sys/userBridge/refresh',
    method: 'post',
    params
  })
}

src/views/baseInfoManage/boxesConfig/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="所属服务器编号" v-model="listQuery.title">
      <el-input style="width: 200px;" class="filter-item" placeholder="所属服务器编号" v-model="listQuery.scode">
      </el-input>
       <el-input style="width: 200px;" class="filter-item" placeholder="采集盒编号" v-model="listQuery.importance">
       <el-input style="width: 200px;" class="filter-item" placeholder="采集盒编号" v-model="listQuery.code">
      </el-input>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加采集盒</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="采集盒配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px">
    <el-dialog title="采集盒配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main" label-width="120px" label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-size="listQuery.limit" layout="prev, pager, next, jumper" :total="total">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
      if (value === '') {
        callback(new Error('请输入内部编号'))
      } else {
        if (!this.ruleForm2.serverId) {
          callback('请先选择所属服务器编号')
          return
        }
        if (this.edit) {
          checkDeviceInternalCode({ seq: value, id: this.edit }).then(response => {
          checkDeviceInternalCode({ seq: value, id: this.edit, serverId: this.ruleForm2.serverId }).then(response => {
            if (response.data) {
              callback(new Error('采集盒编号已存在，请重新输入'))
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceInternalCode({ seq: value }).then(response => {
          checkDeviceInternalCode({ seq: value, serverId: this.ruleForm2.serverId }).then(response => {
            if (response.data) {
              callback(new Error('采集盒编号已存在，请重新输入'))
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
        if (valid) {
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              this.getList()
              setTimeout(function() {
                that.pop('已成功添加传感器')
              }, 1000)
              this.resetForm(this.ruleForm2)
              this.getList()
              this.dialogTableVisible = false
            }).catch(error => {
              console.log(error)
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.ruleForm2.mark = ''
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
    },
    getList() {
      this.listLoading = true
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      //  this.getList()
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      //  this.getList()
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      //  this.getList()
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('确实要删除:采集盒' + row.code + '吗？', '提示', {
      this.ruleForm2.serverId = ''
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        DeviceOfservice({ code: this.ruleForm2.bridge }).then(response => {
        DeviceOfservice({ code: this.ruleForm2.server }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.code, 'id': item.id }
            })
            cb($data)
            if ($info.length === 1 && this.ruleForm2.bridge === $info[0].code) {
            if ($info.length === 1 && this.ruleForm2.server === $info[0].code) {
              this.ruleForm2.serverId = $info[0].id
            } else {
              this.ruleForm2.serverId = ''
  .el-btn-col{
    margin-top: 45px
  }
  .editTe{
    margin: 10px 0 0 22px
  }
</style>

src/views/baseInfoManage/bridgesInfo/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="桥梁名称" v-model="listQuery.title">
      <el-input style="width: 200px;" class="filter-item" placeholder="桥梁名称" v-model="listQuery.name">
      </el-input>
       <el-input style="width: 200px;" class="filter-item" placeholder="桥梁编号" v-model="listQuery.importance">
       <el-input style="width: 200px;" class="filter-item" placeholder="桥梁编号" v-model="listQuery.code">
      </el-input>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加桥梁</el-button>
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="桥梁编号">
        <template slot-scope="scope">
          <span>{{scope.row.num}}</span>
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="桥梁简称">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
          <span>{{scope.row.shortName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="桥梁位置">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
          <span>{{scope.row.location}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="维护机构">
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Actions" width="230" class-name="small-padding fixed-width">
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="桥梁信息" :visible.sync="dialogTableVisible" width="80%">
    <el-form class="form-main" label-width="120px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="18" :lg="16">
          <el-row>
            <el-col :span="12">
              <el-form-item label="桥梁编号">
                <el-input placeholder="请输入桥梁编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="桥梁简称">
                <el-input placeholder="请输入桥梁简称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="桥梁全称">
                <el-input placeholder="请输入桥梁全称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="桥梁位置信息">
                <city></city>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地理位置信息">
                <el-input placeholder="请输入地理位置信息"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="桥梁开通日期">
                <el-date-picker
                  v-model="value2"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="维护机构">
                <el-input placeholder="请输入维护机构"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维护单位电话">
                <el-input placeholder="请输入维护单位电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维护单位电邮">
                <el-input placeholder="请输入维护单位电邮"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xs="24" :sm="6" :lg="8">
          <div style="width:100%;display: flex;justify-content:center">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
    <el-dialog title="桥梁信息" ref="ruleForm" :visible.sync="dialogTableVisible" width="80%" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main" label-width="120px" label-position='right' status-icon>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="18" :lg="16">
            <el-row>
              <el-col :span="12">
                <el-form-item label="桥梁编号" prop="code">
                  <el-input placeholder="请输入桥梁编号" v-model="ruleForm2.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="桥梁简称" prop="shortName">
                  <el-input placeholder="请输入桥梁简称" v-model="ruleForm2.shortName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="桥梁全称" prop="name">
                  <el-input placeholder="请输入桥梁全称" v-model="ruleForm2.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="桥梁位置信息" prop="addrCode">
                  <city @paren="toshow" :addrCode='ruleForm2.addrCode'></city>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地理位置信息" prop="location">
                  <el-input placeholder="请输入地理位置信息" v-model="ruleForm2.location"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="桥梁开通日期" prop="serviceDay">
                  <el-date-picker
                    value-format='yyyyMMdd'
                    v-model="ruleForm2.serviceDay"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="维护机构" prop="org">
                  <el-input placeholder="请输入维护机构" v-model="ruleForm2.org"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维护单位电话" prop="phone">
                  <el-input placeholder="请输入维护单位电话" v-model="ruleForm2.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维护单位电邮" prop="email">
                  <el-input placeholder="请输入维护单位电邮" v-model="ruleForm2.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="6" :lg="8">
            <div style="width:100%;display: flex;justify-content:center">
              <el-upload
                class="avatar-uploader"
                action="/ajax/bridge/upload"
                accept='image'
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </div>
          <p style="width:100%;text-align:center;font-size:20px;color:#999;">上传桥梁图片<br>
              JPEG/JPG/PNG格式大小5M以内</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="详细描述" class="el-to-block"><br />
            <el-input type="textarea" maxlength=500  rows=6></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" class="el-to-block"><br />
            <el-input type="textarea" maxlength=100 rows=3></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="dialogTableVisible=false">确认</el-button>
            <el-button type="primary" @click="dialogTableVisible=false">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
            </div>
            <p style="width:100%;text-align:center;font-size:20px;color:#999;">上传桥梁图片<br>
                JPEG/JPG/PNG格式大小5M以内</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="详细描述" class="el-to-block" prop="descp">
              <el-input type="textarea" maxlength=500  rows=6 v-model="ruleForm2.descp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" class="el-to-block" prop="remark">
              <el-input type="textarea" maxlength=100 rows=3 v-model="ruleForm2.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button type="primary" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-size="listQuery.limit" layout="prev, pager, next, jumper" :total="total">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
//  import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkBridgeShortName, checkBridgeName } from '@/api/bridge'
import waves from '@/directive/waves'
import city from '../../city/linkage'
//  import { parseTime } from '@/utils'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入桥梁编号'))
      } else {
        if (this.edit) {
          checkDeviceCode({ code: value, id: this.edit }).then(response => {
            if (response.data) {
              callback(new Error('桥梁编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceCode({ code: value }).then(response => {
            if (response.data) {
              callback(new Error('桥梁编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var shortName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入桥梁简称'))
      } else {
        if (this.edit) {
          checkBridgeShortName({ shortName: value, id: this.edit }).then(response => {
            if (response.data) {
              callback(new Error('桥梁简称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkBridgeShortName({ shortName: value }).then(response => {
            if (response.data) {
              callback(new Error('桥梁简称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var name = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入桥梁全称'))
      } else {
        if (this.edit) {
          checkBridgeName({ name: value, id: this.edit }).then(response => {
            if (response.data) {
              callback(new Error('桥梁全称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkBridgeName({ name: value }).then(response => {
            if (response.data) {
              callback(new Error('桥梁全称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      value2: '',
      edit: '',
      imageUrl: '',
      ruleForm2: {
        code: '',
        shortName: '',
        name: '',
        addrCode: '',
        serviceDay: '',
        location: '',
        descp: '',
        remark: '',
        img: '',
        org: '',
        phone: '',
        email: ''
      },
      rules2: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        shortName: [
          { required: true, validator: shortName, trigger: 'blur' }
        ],
        name: [
          { required: true, validator: name, trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入地理位置信息', trigger: 'blur' }
        ],
        serviceDay: [
          { required: true, message: '请输入桥梁开通日期', trigger: 'blur' }
        ],
        org: [
          { required: true, message: '请输入维护机构名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入维护机构电话', trigger: 'blur' }
        ],
        addrCode: [
          { required: true, message: '请选择桥梁位置信息', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入维护机构电邮', trigger: 'blur' }
        ]
      },
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      list: null,
      dataList: { total: 20, data: [{ num: 1111, name: '北京科技大学', address: '北京', org: '机电学院', message: '想落户上海，你还差几分？抢人才看出身，清华北大照单全收' }] },
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
        name: '',
        code: '',
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
    city
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              this.getList()
              setTimeout(function() {
                that.pop('已成功添加桥梁')
              }, 1000)
              this.resetForm(this.ruleForm2)
              this.dialogTableVisible = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateDevice(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新桥梁')
                }, 1000)
                this.resetForm('ruleForm2')
                this.getList()
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  code: '',
                  shortName: '',
                  name: '',
                  addrCode: '',
                  serviceDay: '',
                  location: '',
                  descp: '',
                  remark: '',
                  img: '',
                  org: '',
                  phone: '',
                  email: ''
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.imageUrl = ''
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
      this.imageUrl = ''
    },
    getList() {
      this.listLoading = true
      this.list = this.dataList.data
      this.total = this.dataList.total
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
      /*  fetchList(this.listQuery).then(response => {
        this.list = this.dataList.data
        this.total =  this.dataList.total
      pageQueryDevice(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })  */
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      //  this.getList()
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      //  this.getList()
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      //  this.getList()
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('已成功删除该传感器', '提示', {
      this.$confirm('确实要删除:桥梁' + row.code + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteDevice({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功删除该桥梁')
          }
        })
      }).catch(() => {
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      }).catch(() => {
      })
      /*  this.$confirm('确实要删除:桥梁12324吗？, 是否继续?', '提示', {
      confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
        }); */
    },
    resetTemp() {
    resetTemp(row) {
      this.ruleForm2 = {
        code: row.code,
        shortName: row.shortName,
        name: row.shortName,
        addrCode: row.addrCode,
        serviceDay: row.serviceDay,
        location: row.location,
        descp: row.descp,
        remark: row.remark,
        img: row.img,
        org: row.org,
        phone: row.phone,
        email: row.email
      }
      this.edit = row.id
    },
    handleCreate() {
      this.dialogTableVisible = true
    },
    handleUpdate(row) {
      this.resetTemp(row)
      this.dialogTableVisible = true
      this.imageUrl = '/data/bridge' + row.img
    },
    querySearchAsync(queryString, cb) {
      if (queryString === '') {
        cb([])
        return
      }
      this.ruleForm2.deviceId = ''
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        DeviceOfservice({ code: this.ruleForm2.device }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.code, 'id': item.id }
            })
            cb($data)
            if ($info.length === 1 && this.ruleForm2.bridge === $info[0].code) {
              this.ruleForm2.deviceId = $info[0].id
            } else {
              this.ruleForm2.deviceId = ''
            }
          } else {
            cb([])
          }
        })
      }, 3000 * Math.random())
    },
    handleSelect(item) {
      this.ruleForm2.deviceId = item.id
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.ruleForm2.img = res.data[0].uri
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG && !isPNG) {
        this.$message.error('图片过大或格式不对请重新上传')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        this.$message.error('图片过大或格式不对请重新上传')
      }
      return isJPG && isLt2M
      return (!isJPG || !isPNG) && isLt2M
    },
    toshow(value) {
      this.ruleForm2.addrCode = value
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete{
    display: block
  }
  .el-btn-col{
    margin-top: 45px
  }
  .avatar-uploader{
    border: 1px dashed #409EFF;
    border-radius: 6px;

src/views/baseInfoManage/sensorsConfig/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="采集盒编号" v-model="listQuery.title">
      <el-input style="width: 200px;" class="filter-item" placeholder="采集盒编号" v-model="listQuery.cdCode">
      </el-input>
       <el-input style="width: 200px;" class="filter-item" placeholder="传感器编号" v-model="listQuery.importance">
       <el-input style="width: 200px;" class="filter-item" placeholder="传感器编号" v-model="listQuery.code">
      </el-input>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加传感器</el-button>
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="传感器编号">
        <template slot-scope="scope">
          <span>{{scope.row.num}}</span>
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="传感器所在主缆">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
          <span>{{scope.row.cableType}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="传感器位置">
      <el-table-column width="150px" align="center" label="传感器位置">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
          <span>{{scope.row.locType}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="所属采集盒编号">
        <template slot-scope="scope">
          <span>{{scope.row.org}}</span>
          <span>{{scope.row.deviceName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Actions" width="230" class-name="small-padding fixed-width">
        </template>
      </el-table-column>
    </el-table>
     <el-dialog title="传感器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px">
    <el-form class="form-main" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="采集盒编号">
            <el-autocomplete
              v-model="state4"
              :fetch-suggestions="querySearchAsync"
              placeholder="请选择采集盒编号"
              @select="handleSelect">
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传感器编号">
            <el-input placeholder="请输入传感器编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内部编号">
            <el-input placeholder="请输入内部编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传感器所在主缆">
            <el-select v-model="value" placeholder="请选择主缆">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传感器位置">
            <el-select v-model="value1" placeholder="请选择主缆传感器位置">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
         
         <el-col :span="24" >
         备注
          <div class="editTe">
            <el-input type="textarea"></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button type="info">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
    <el-dialog title="传感器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main" label-width="120px" label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采集盒编号" prop="device">
              <el-autocomplete
                 v-model="ruleForm2.device"
                :fetch-suggestions="querySearchAsync"
                placeholder="请选择采集盒编号"
                @select="handleSelect">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器编号" prop="code">
              <el-input placeholder="请输入传感器编号" v-model="ruleForm2.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内部编号" prop="seq">
              <el-input placeholder="请输入内部编号" v-model="ruleForm2.seq"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器所在主缆" prop="cableType">
              <el-select v-model="ruleForm2.cableType" placeholder="请选择主缆">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器位置" prop="locType">
              <el-select v-model="ruleForm2.locType" placeholder="请选择主缆传感器位置">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" maxlength=100 v-model="ruleForm2.remark" rows=4></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button type="info" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-size="listQuery.limit" layout="prev, pager, next, jumper" :total="total">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
//  import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode, queryServer } from '@/api/sensor'
import waves from '@/directive/waves'
//  import { parseTime } from '@/utils'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    var device = (rule, value, callback) => {
      const that = this
      setTimeout(function() {
        if (value === '' || that.ruleForm2.deviceId === '') {
          callback(new Error('请选择采集盒编号'))
        } else {
          callback()
        }
      }, 300)
    }
    var seq = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入内部编号'))
      } else {
        if (!this.ruleForm2.deviceId) {
          callback('请先选择采集盒编号')
          return
        }
        if (this.edit) {
          checkDeviceInternalCode({ seq: value, id: this.edit, deviceId: this.ruleForm2.deviceId }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceInternalCode({ seq: value, deviceId: this.ruleForm2.deviceId }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入传感器编号'))
      } else {
        if (this.edit) {
          checkDeviceCode({ code: value, id: this.edit }).then(response => {
            if (response.data) {
              callback(new Error('传感器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceCode({ code: value }).then(response => {
            if (response.data) {
              callback(new Error('传感器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      options: [{
        value: '上游主缆',
        value: '下游主缆',
        label: '下游主缆'
      }],
      value: '',
      options1: [{
        value: '东跨',
        label: '东跨'
        value: '北跨',
        label: '北跨'
      }],
      value1: '',
      restaurants: [],
      state4: '',
      edit: '',
      ruleForm2: {
        code: '',
        cableType: '上游主缆',
        device: '',
        seq: '',
        deviceId: '',
        locType: '东跨',
        remark: ''
      },
      rules2: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        device: [
          { required: true, validator: device, trigger: 'blur' }
        ],
        cableType: [
          { required: true, message: '请选择主缆', trigger: 'blur' }
        ],
        locType: [
          { required: true, message: '请选择传感器位置', trigger: 'blur' }
        ],
        seq: [
          { required: true, validator: seq, trigger: 'blur' }
        ]
      },
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      list: null,
      dataList: { total: 20, data: [{ num: 1111, name: '北京科技大学', address: '北京', org: '机电学院', message: '想落户上海，你还差几分？抢人才看出身，清华北大照单全收' }] },
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
        cdCode: '',
        code: '',
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
    }
  },
  created() {
    this.restaurants = this.loadAll()
    this.getList()
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //   let paramsData = {
        //     'title': this.ruleFormDem.demandTit,
        //     'descp': this.ruleFormDem.demandDesc,
        //     'province': this.ruleFormDem.province,
        //     'city': this.ruleFormDem.city,
        //     'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
        //     'cost': this.selectCostRange,
        //     'duration': this.selectLongTime,
        //     'orgName': this.ruleFormDem.orgName,
        //     'contactNum': this.ruleFormDem.linkTel,
        //     'creator': this.kxUserId,
        //     'source': this.platSource
        //   };
        //   this.$axios.post(httpUrl.kxQurey.demand.add, paramsData).then((res) => {
        //     if (res.success) {
        //       this.$alert('我们已收到您的需求，马上为您对接合适的专家和专业机构，您可以登录科袖网与对方做进一步沟通。', '需求发布成功！', {
        //         confirmButtonText: '进入科袖网，发现更多服务和资源',
        //         type: 'success',
        //         center: true,
        //         cancelButtonText: '取消',
        //         callback: action => {
        //           if (action === 'confirm') {
        //             window.open(util.ekexiuUrl, '科袖网首页');
        //           };
        //         }
        //       });
        //       this.resetForm(formName);
        //       this.$emit('dialogChangedLogin', false);
        //     } else {
        //       this.$message({
        //         message: '需求发布失败，请重新发布！',
        //         type: 'warning'
        //       });
        //     };
        //     console.log(res);
        //   });
        // } else {
        //   console.log('error submit!!');
        //   return false
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              this.getList()
              setTimeout(function() {
                that.pop('已成功添加传感器')
              }, 1000)
              this.resetForm(this.ruleForm2)
              this.dialogTableVisible = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateDevice(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新传感器')
                }, 1000)
                this.resetForm('ruleForm2')
                this.getList()
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  code: '',
                  cableType: '',
                  device: '',
                  seq: '',
                  deviceId: '',
                  locType: '',
                  remark: ''
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
    },
    getList() {
      this.listLoading = true
      this.list = this.dataList.data
      this.total = this.dataList.total
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
      /*  fetchList(this.listQuery).then(response => {
        this.list = this.dataList.data
        this.total =  this.dataList.total
      pageQueryDevice(this.listQuery).then(response => {
        const $data = response.data.data
        for (let i = 0; i < $data.length; i++) {
          $data[i].deviceName = ''
          queryServer({ id: $data[i].deviceId }).then(response => {
            this.list[i].deviceName = response.data.code
            this.$forceUpdate()
          })
        }
        this.list = $data
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })  */
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      //  this.getList()
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      //  this.getList()
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      //  this.getList()
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('已成功删除该传感器', '提示', {
      this.$confirm('确实要删除:传感器' + row.code + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteDevice({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功删除该传感器')
          }
        })
      }).catch(() => {
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      }).catch(() => {
      })
      /*  this.$confirm('确实要删除:桥梁12324吗？, 是否继续?', '提示', {
      confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
        }); */
    },
    resetTemp() {
    resetTemp(row) {
      this.ruleForm2 = {
        code: row.code,
        cableType: row.cableType,
        device: row.deviceName,
        seq: row.seq,
        deviceId: row.deviceId,
        locType: row.locType,
        remark: row.remark
      }
      this.edit = row.id
    },
    handleCreate() {
      this.dialogTableVisible = true
    },
    handleUpdate(row) {
    },
    loadAll() {
      return [{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' }]
      this.resetTemp(row)
      this.dialogTableVisible = true
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString + 'wewe')
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      console.log(results + 'dddd')
      if (queryString === '') {
        cb([])
        return
      }
      this.ruleForm2.deviceId = ''
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
        DeviceOfservice({ code: this.ruleForm2.device }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.code, 'id': item.id }
            })
            cb($data)
            if ($info.length === 1 && this.ruleForm2.bridge === $info[0].code) {
              this.ruleForm2.deviceId = $info[0].id
            } else {
              this.ruleForm2.deviceId = ''
            }
          } else {
            cb([])
          }
        })
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      console.log(item + 'ccc')
      this.ruleForm2.deviceId = item.id
    }
  }
}
  .el-btn-col{
    margin-top: 45px
  }
  .editTe{
    margin: 10px 0 0 22px
  }
</style>

src/views/baseInfoManage/serversConfig/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="所属桥梁编号" v-model="listQuery.title">
      <el-input style="width: 200px;" class="filter-item" placeholder="所属桥梁编号" v-model="listQuery.bcode">
      </el-input>
       <el-input style="width: 200px;" class="filter-item" placeholder="服务器编号" v-model="listQuery.importance">
       <el-input style="width: 200px;" class="filter-item" placeholder="服务器编号" v-model="listQuery.code">
      </el-input>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加服务器</el-button>
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="服务器编号">
        <template slot-scope="scope">
          <span>{{scope.row.num}}</span>
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="采集盒数量">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
          <span>{{scope.row.devices}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="所属桥梁">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
          <span>{{scope.row.bridgeName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Actions" width="230" class-name="small-padding fixed-width">
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="采集服务器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px">
      <el-form class="form-main" label-width="120px">
    <el-dialog title="采集服务器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main" label-width="120px" label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务器编号">
              <el-input placeholder="请输入服务器编号"></el-input>
            <el-form-item label="服务器编号" prop="code">
              <el-input placeholder="请输入服务器编号" v-model="ruleForm2.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采集盒数量">
              <el-input placeholder="请输入采集盒数量"></el-input>
            <el-form-item label="采集盒数量" prop="devices">
              <el-input placeholder="请输入采集盒数量" v-model="ruleForm2.devices"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="所属桥梁">
          <el-col :span="12">
            <el-form-item label="所属桥梁" prop="bridge">
              <el-autocomplete
                v-model="state4"
                 v-model="ruleForm2.bridge"
                :fetch-suggestions="querySearchAsync"
                placeholder="请选择所属桥梁"
                @select="handleSelect">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内部编号">
              <el-input placeholder="请输入内部编号"></el-input>
            <el-form-item label="内部编号" prop="seq">
              <el-input placeholder="请输入内部编号" v-model="ruleForm2.seq"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="24" >
           备注
            <div class="editTe">
              <el-input type="textarea"></el-input>
            </div>
          <el-col :span="24" >
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" maxlength=100 v-model="ruleForm2.remark" rows=4></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
              <el-button type="info">返回</el-button>
              <el-button type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button type="info" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-size="listQuery.limit" layout="prev, pager, next, jumper" :total="total">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
//  import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode, queryServer } from '@/api/server'
import waves from '@/directive/waves'
//  import { parseTime } from '@/utils'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    var bridge = (rule, value, callback) => {
      const that = this
      setTimeout(function() {
        if (value === '' || that.ruleForm2.bridgeId === '') {
          callback(new Error('请选择所属桥梁'))
        } else {
          callback()
        }
      }, 300)
    }
    var seq = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入内部编号'))
      } else {
        if (!this.ruleForm2.bridgeId) {
          callback('请先选择服务器编号')
          return
        }
        if (this.edit) {
          checkDeviceInternalCode({ seq: value, id: this.edit, bridgeId: this.ruleForm2.bridgeId }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceInternalCode({ seq: value, bridgeId: this.ruleForm2.bridgeId }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入服务器编号'))
      } else {
        if (this.edit) {
          checkDeviceCode({ code: value, id: this.edit }).then(response => {
            if (response.data) {
              callback(new Error('服务器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceCode({ code: value }).then(response => {
            if (response.data) {
              callback(new Error('服务器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      restaurants: [],
      state4: '',
      edit: '',
      ruleForm2: {
        code: '',
        bridge: '',
        seq: '',
        bridgeId: '',
        remark: '',
        devices: ''
      },
      rules2: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        bridge: [
          { required: true, validator: bridge, trigger: 'blur' }
        ],
        devices: [
          { required: true, message: '请输入采集盒数量', trigger: 'blur' }
        ],
        seq: [
          { required: true, validator: seq, trigger: 'blur' }
        ]
      },
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      list: null,
      dataList: { total: 20, data: [{ num: 1111, name: '北京科技大学', address: '北京', org: '机电学院', message: '想落户上海，你还差几分？抢人才看出身，清华北大照单全收' }] },
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
       },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
        bcode: '',
        code: '',
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
    }
  },
  created() {
    this.restaurants = this.loadAll()
    this.getList()
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //   let paramsData = {
        //     'title': this.ruleFormDem.demandTit,
        //     'descp': this.ruleFormDem.demandDesc,
        //     'province': this.ruleFormDem.province,
        //     'city': this.ruleFormDem.city,
        //     'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
        //     'cost': this.selectCostRange,
        //     'duration': this.selectLongTime,
        //     'orgName': this.ruleFormDem.orgName,
        //     'contactNum': this.ruleFormDem.linkTel,
        //     'creator': this.kxUserId,
        //     'source': this.platSource
        //   };
        //   this.$axios.post(httpUrl.kxQurey.demand.add, paramsData).then((res) => {
        //     if (res.success) {
        //       this.$alert('我们已收到您的需求，马上为您对接合适的专家和专业机构，您可以登录科袖网与对方做进一步沟通。', '需求发布成功！', {
        //         confirmButtonText: '进入科袖网，发现更多服务和资源',
        //         type: 'success',
        //         center: true,
        //         cancelButtonText: '取消',
        //         callback: action => {
        //           if (action === 'confirm') {
        //             window.open(util.ekexiuUrl, '科袖网首页');
        //           };
        //         }
        //       });
        //       this.resetForm(formName);
        //       this.$emit('dialogChangedLogin', false);
        //     } else {
        //       this.$message({
        //         message: '需求发布失败，请重新发布！',
        //         type: 'warning'
        //       });
        //     };
        //     console.log(res);
        //   });
        // } else {
        //   console.log('error submit!!');
        //   return false
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              this.getList()
              setTimeout(function() {
                that.pop('已成功添加传感器')
              }, 1000)
              this.resetForm(this.ruleForm2)
              this.dialogTableVisible = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateDevice(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新传感器')
                }, 1000)
                this.resetForm('ruleForm2')
                this.getList()
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  code: '',
                  bridge: '',
                  seq: '',
                  bridgeId: '',
                  devices: '',
                  remark: ''
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
    },
    getList() {
      this.listLoading = true
      this.list = this.dataList.data
      this.total = this.dataList.total
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
      /*  fetchList(this.listQuery).then(response => {
        this.list = this.dataList.data
        this.total =  this.dataList.total
      pageQueryDevice(this.listQuery).then(response => {
        const $data = response.data.data
        for (let i = 0; i < $data.length; i++) {
          $data[i].bridgeName = ''
          queryServer({ id: $data[i].bridgeId }).then(response => {
            this.list[i].bridgeName = response.data.shortName
            this.$forceUpdate()
          })
        }
        this.list = $data
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })  */
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      //  this.getList()
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      //  this.getList()
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      //  this.getList()
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('已成功删除该传感器', '提示', {
      this.$confirm('确实要删除:服务器' + row.code + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteDevice({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功删除该传感器')
          }
        })
      }).catch(() => {
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      }).catch(() => {
      })
      /*  this.$confirm('确实要删除:桥梁12324吗？, 是否继续?', '提示', {
      confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
        }); */
    },
    resetTemp() {
    resetTemp(row) {
      this.ruleForm2 = {
        code: row.code,
        bridge: row.bridgeName,
        seq: row.seq,
        bridgeId: row.bridgeId,
        devices: row.devices,
        remark: row.remark
      }
      this.edit = row.id
    },
    handleCreate() {
      this.dialogTableVisible = true
    },
    handleUpdate(row) {
    },
    loadAll() {
      return [{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' }]
      this.resetTemp(row)
      this.dialogTableVisible = true
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString + 'wewe')
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      console.log(results + 'dddd')
      if (queryString === '') {
        cb([])
        return
      }
      this.ruleForm2.bridgeId = ''
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
        DeviceOfservice({ key: this.ruleForm2.bridge, active: 1 }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.shortName, 'id': item.id }
            })
            cb($data)
            if ($info.length === 1 && this.ruleForm2.bridge === $info[0].shortName) {
              this.ruleForm2.bridgeId = $info[0].id
            } else {
              this.ruleForm2.bridgeId = ''
            }
          } else {
            cb([])
          }
        })
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      console.log(item + 'ccc')
      this.ruleForm2.bridgeId = item.id
      console.log(item.id)
    }
  }
}
  .el-btn-col{
    margin-top: 45px
  }
  .editTe{
    margin: 10px 0 0 22px
  }
</style>

src/views/city/linkage.vue

    <el-select
      v-model="sheng"
      @change="choseProvince"
      placeholder="省级地区">
      placeholder="省">
      <el-option
        v-for="item in province"
        :key="item.id"
    <el-select
      v-model="shi"
      @change="choseCity"
      placeholder="市级地区">
      placeholder="市">
      <el-option
        v-for="item in shi1"
        :key="item.id"
    <el-select
      v-model="qu"
      @change="choseBlock"
      placeholder="区级地区">
      placeholder="区(县)">
      <el-option
        v-for="item in qu1"
        :key="item.id"
<script>
import axios from 'axios'
export default {
  props: ['addrCode'],
  data() {
    return {
      mapJson: '../../static/map.json',
      province: '',
      province: [],
      sheng: '',
      shi: '',
      shi1: [],
      block: ''
    }
  },
  watch: {
    addrCode: function() {
      if (!this.addrCode) {
        this.sheng = ''
        this.shi = ''
        this.qu = ''
        return
      }
      const s = this.addrCode.substring(0, 2) + '0000'
      const si = this.addrCode.substring(0, 4) + '00'
      const x = this.addrCode
      this.province.map(item => {
        if (item.id === s) {
          this.sheng = item.value
          item.children.map(item => {
            if (item.id === si) {
              this.shi = item.value
              item.children.map(item => {
                if (x === item.id) {
                  this.qu = item.value
                }
              })
            }
          })
        }
      })
    }
  },
  methods: {
    getCityData: function() {
      var that = this
      axios.get(this.mapJson).then(function(response) {
      axios.get('/ajax/dict/items?dict=XZQH').then(function(response) {
        if (response.status === 200) {
          var data = response.data
          var data = response.data.data
          that.province = []
          that.city = []
          that.block = []
          for (var item in data) {
            if (item.match(/0000$/)) {
              that.province.push({ id: item, value: data[item], children: [] })
            } else if (item.match(/00$/)) {
              that.city.push({ id: item, value: data[item], children: [] })
          data.map(item => {
            if (item.code.match(/0000$/)) {
              that.province.push({ id: item.code, value: item.caption, children: [] })
            } else if (item.code.match(/00$/)) {
              that.city.push({ id: item.code, value: item.caption, children: [] })
            } else {
              that.block.push({ id: item, value: data[item] })
              that.block.push({ id: item.code, value: item.caption })
            }
          }
          })
          for (var index in that.province) {
            for (var index1 in that.city) {
              if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
          this.sheng = this.province[index2].value
        }
      }
      this.$emit('paren', this.E)
    },
    choseCity: function(e) {
      for (var index3 in this.city) {
          this.shi = this.city[index3].value
        }
      }
      this.$emit('paren', this.E)
    },
    choseBlock: function(e) {
      for (var index3 in this.qu1) {
        }
      }
      this.E = e
      this.$emit('paren', this.E)
    }
  },
  created: function() {

src/views/peoplesManage/infoManage/editUser.vue

<template>
   <el-form class="form-main" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="账号">
            <el-input placeholder="请输入账号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户姓名">
            <el-input placeholder="请输入用户姓名"></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="12">
          <el-form-item label="职位">
            <el-input placeholder="请输入用户职位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户类型">
            <el-select v-model="value" placeholder="请选择用户类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input placeholder="请输入手机号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱">
            <el-input placeholder="请输入邮箱地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在机构">
            <el-input placeholder="请输入所在用户机构"></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="24" >
         备注
          <div class="editTe">
            <el-input type="textarea" row=4></el-input>
          </div>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button type="info">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  <el-dialog title="编辑用户" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px" @close='closed'>
     <el-form class="form-main" :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop='account'>
              <el-input placeholder="请输入账号" v-model="ruleForm2.account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop='name'>
              <el-input placeholder="请输入用户姓名" v-model="ruleForm2.name"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="职位" prop='job'>
              <el-input placeholder="请输入用户职位" v-model="ruleForm2.job"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型" prop='type'>
              <el-select v-model="ruleForm2.type" placeholder="请选择用户类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop='phone'>
              <el-input placeholder="请输入手机号码" v-model="ruleForm2.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱" prop='email'>
              <el-input placeholder="请输入邮箱地址" v-model="ruleForm2.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在机构" prop='comp'>
              <el-input placeholder="请输入所在用户机构" v-model="ruleForm2.comp"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="24" >
            <el-form-item label="备注" prop='remark'>
              <el-input type="textarea" rows=4 v-model="ruleForm2.remark"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button type="info"  @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
</template>
<script>
import { checkRegister, addRegister, updateRegister, queryRegister } from '@/api/userManagemen'
export default {
  props: ['dialog', 'id'],
  data() {
    var account = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        if (this.edit) {
          checkRegister({ account: value, id: this.edit }).then(response => {
            if (!response.data) {
              callback(new Error('账户已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkRegister({ account: value }).then(response => {
            if (!response.data) {
              callback(new Error('账户已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var phone = (rule, value, callback) => {
      const regTel = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (value === '') {
        callback()
      } else {
        if (!regTel.test(value)) {
          callback(new Error('手机号码格式不正确'))
        }
      }
    }
    var email = (rule, value, callback) => {
      const regTel = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (value === '') {
        callback()
      } else {
        if (!regTel.test(value)) {
          callback(new Error('邮箱格式不正确'))
        }
      }
    }
    return {
      options: [{
        value: '上游主缆',
        label: '上游主缆'
        value: 0,
        label: '普通用户'
      }, {
        value: '下游主缆',
        label: '下游主缆'
        value: 1,
        label: '管理员'
      }],
      value: ''
      dialogTableVisible: false,
      ruleForm2: {
        edit: '',
        account: '',
        name: '',
        comp: '',
        job: '',
        phone: '',
        email: '',
        remark: '',
        type: 0
      },
      rules2: {
        account: [
          { required: true, validator: account, trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' }
        ],
        comp: [
          { required: true, message: '请输入所在用户机构', trigger: 'blur' }
        ],
        job: [
          { required: true, message: '请输入用户职位', trigger: 'blur' }
        ],
        phone: [
          { validator: phone, trigger: 'blur' }
        ],
        email: [
          { validator: email, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialog() {
      this.dialogTableVisible = true
      this.edit = this.id
      if (this.edit) {
        queryRegister({ id: this.edit }).then(response => {
          if (response.success) {
            const $data = response.data
            this.ruleForm2 = {
              account: $data.account,
              name: $data.name,
              comp: $data.comp,
              job: $data.job,
              phone: $data.phone || '',
              email: $data.email || '',
              remark: $data.remark || '',
              type: $data.type
            }
          }
        })
      }
    }
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            addRegister(this.ruleForm2).then(response => {
              this.$emit('chilF')
              setTimeout(function() {
                that.pop('已成功添加')
              }, 1000)
              this.resetForm(this.ruleForm2)
              this.dialogTableVisible = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateRegister(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新')
                }, 1000)
                this.resetForm('ruleForm2')
                this.$emit('chilF')
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  account: '',
                  name: '',
                  comp: '',
                  job: '',
                  phone: '',
                  email: '',
                  remark: '',
                  type: 0
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.edit = ''
      this.$emit('chilF', true)
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
      this.$emit('chilF', true)
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    resetTemp(row) {
      this.ruleForm2 = {
        account: row.account,
        name: row.name,
        comp: row.comp,
        job: row.job,
        phone: row.phone,
        email: row.email,
        remark: row.remark,
        type: row.type
      }
      this.edit = row.id
    }
  }
}

src/views/peoplesManage/infoManage/editUserPermissions.vue

<template>
  <el-dialog title="用户数据权限修改" :visible.sync="dialogTableVisible" width="80%">
    <el-form class="form-main">
  <el-dialog title="用户数据权限修改" :visible.sync="dialogTableVisible" width="80%" @close='closed'>
    <el-form class="form-main" :model="ruleForm2"  ref="ruleForm2">
      <el-row :gutter="16">
        <el-col :xs="12" :sm="12" :lg="12">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
                <el-form-item label="账号">000000001</el-form-item>
                <el-form-item label="账号">{{ruleForm2.account}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户姓名">2</el-form-item>
                <el-form-item label="用户姓名">{{ruleForm2.name}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户类型">000000001</el-form-item>
              <el-col :span="12"  style='margin-top:30px'>
                <el-form-item label="用户类型">{{(ruleForm2.type) ? '管理员' : '普通用户'}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位">2</el-form-item>
              <el-col :span="12" style='margin-top:30px'>
                <el-form-item label="职位">{{ruleForm2.job}}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所属机构">1926831</el-form-item>
              <el-col :span="24" style='margin-top:30px'>
                <el-form-item label="所属机构">{{ruleForm2.comp}}</el-form-item>
              </el-col>
            </el-row>
          </div>
                  </el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="24"> 
              <el-col :span="24" style="margin-top:30px"> 
                 <el-table
                  :show-header="shouHead"
                  :data="tableData3"
                  height="250"
                  border
      </el-row>
      <el-row>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
            <el-button type="primary" @click="dialogTableVisible=false">确认</el-button>
          </div>
        </el-col>
            <div class="el-btn-col-box">
              <el-button type="primary" @click="submit">确认</el-button>
              <el-button type="info"  @click="closed">返回</el-button>
            </div>
          </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { queryRegister, queryResponsibleBridge, DeviceOfservice, updatePermission } from '@/api/userManagemen'
export default {
  props: ['dialog', 'id'],
  data() {
    return {
      tableData3: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      restaurants: [],
      arr: [],
      shouHead: false,
      state4: '',
      ruleForm2: {
        account: '',
        name: '',
        comp: '',
        job: '',
        type: 0
      },
      tableData3: [],
      timeout: null,
      dialogTableVisible: false
    }
  },
  created() {
    this.restaurants = this.loadAll()
  watch: {
    dialog() {
      this.dialogTableVisible = true
      queryRegister({ id: this.id }).then(response => {
        if (response.success) {
          const $data = response.data
          this.ruleForm2 = {
            account: $data.account,
            name: $data.name,
            comp: $data.comp,
            job: $data.job,
            type: $data.type
          }
        }
      })
      queryResponsibleBridge({ uid: this.id }).then(response => {
        if (response.success) {
          const $info = response.data
          for (let j = 0; j < $info.length; j++) {
            this.tableData3.push({ name: $info[j].shortName, address: $info[j].id })
          }
        }
      })
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    loadAll() {
      return [{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' }]
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString + 'wewe')
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      console.log(results + 'dddd')
      if (queryString === '') {
        cb([])
        return
      }
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
        DeviceOfservice({ key: this.state4, active: 1 }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.shortName, 'id': item.id }
            })
            cb($data)
          } else {
            cb([])
          }
        })
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
    handleSelect(item) {
      this.state4 = ''
      let flag = false
      for (let i = 0; i < this.tableData3.length; i++) {
        if (item.id === this.tableData3[i].address) {
          flag = true
          break
        }
      }
      if (!flag) {
        const $data = { name: item.value, address: item.id }
        this.tableData3.push($data)
      }
    },
    handleSelect(item) {
      console.log(item + 'ccc')
    handleModifyStatus(value) {
      const index = this.tableData3.indexOf(value)
      this.tableData3.splice(index, 1)
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    closed() {
      this.tableData3 = []
      this.arr = []
      this.dialogTableVisible = false
    },
    submit() {
      this.tableData3.map(item => {
        this.arr.push(item.address)
      })
      updatePermission({ id: this.id, bridges: this.arr }).then(response => {
        if (response.success) {
          this.tableData3 = []
          this.arr = []
          this.$emit('chilF')
          const that = this
          setTimeout(function() {
            that.pop('权限修改修改成功')
          }, 1000)
          this.dialogTableVisible = false
        }
      })
    }
  }
}

src/views/peoplesManage/infoManage/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="账号" v-model="listQuery.title">
      <el-input style="width: 200px;" class="filter-item" placeholder="账号" v-model="listQuery.account">
      </el-input>
       <el-input style="width: 200px;" class="filter-item" placeholder="用户姓名" v-model="listQuery.importance">
       <el-input style="width: 200px;" class="filter-item" placeholder="用户姓名" v-model="listQuery.name">
      </el-input>
       <el-input style="width: 250px;" class="filter-item" placeholder="所在机构" v-model="listQuery.importance">
       <el-input style="width: 250px;" class="filter-item" placeholder="所在机构" v-model="listQuery.comp">
      </el-input>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加传感器</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加用户</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="110px" align="center" label="账号">
        <template slot-scope="scope">
          <span>{{scope.row.num}}</span>
          <span>{{scope.row.account}}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="用户姓名">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="50px" align="center" label="职位">
      <el-table-column width="200px" align="center" label="职位">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
          <span>{{scope.row.job}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="联系电话">
      <el-table-column width="110px" align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{scope.row.org}}</span>
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="用户类型">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
          <span>{{(scope.row.type) ? '管理员' : '普通用户'}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="账户状态">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
          <span>{{(scope.row.active) ? '未停用' : '已停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="所在机构">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
          <span>{{scope.row.comp}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="负责桥梁">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
          <span>{{scope.row.bridgeName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Actions" width="260px" class-name="small-padding fixed-width">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
          <el-button size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">停用
          </el-button>
           <el-button size="mini" type="primary" @click="handleModifyStatus(scope.row,'deleted')">分配权限
           <el-button size="mini" type="primary" @click="distribution(scope.row)">分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
     <el-dialog title="编辑用户" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px">
     <editUser></editUser>
     <editSystemMessage></editSystemMessage>
  </el-dialog>
  <editUserPermissions></editUserPermissions>
    <editUser :dialog="dialogTableVisible" @chilF='chilF' :id='edit'></editUser>
    <editSystemMessage></editSystemMessage>
    <editUserPermissions :dialog='dialogPerssion' @chilF='chilF' :id='edit'></editUserPermissions>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-size="listQuery.limit" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
</template>
<script>
//  import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
import { deleteUser, queryResponsibleBridge, pageQueryUser } from '@/api/userManagemen'
import waves from '@/directive/waves'
import editUser from './editUser'
import editSystemMessage from './editSystemMessage'
import editUserPermissions from './editUserPermissions'
//  import { parseTime } from '@/utils'
export default {
  name: 'complexTable',
  },
  data() {
    return {
      options: [{
        value: '上游主缆',
        label: '上游主缆'
      }, {
        value: '下游主缆',
        label: '下游主缆'
      }],
      value: '',
      options1: [{
        value: '东跨',
        label: '东跨'
      }, {
        value: '西跨',
        label: '西跨'
      }, {
        value: '南跨',
        label: '南跨'
      }, {
        value: '中跨',
        label: '中跨'
      }, {
        value: '北跨',
        label: '北跨'
      }],
      value1: '',
      restaurants: [],
      state4: '',
      timeout: null,
      dialogTableVisible: false,
      edit: '',
      tableKey: 0,
      list: null,
      dataList: { total: 20, data: [{ num: 1111, name: '北京科技大学', address: '北京', org: '机电学院', message: '想落户上海，你还差几分？抢人才看出身，清华北大照单全收' }] },
      total: null,
      listLoading: true,
      dialogPerssion: false,
      dialogTableVisible: false,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
        account: '',
        name: '',
        comp: '',
        active: 0,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
    }
  },
  created() {
    this.restaurants = this.loadAll()
    this.getList()
  },
  components: {
    editUserPermissions
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //   let paramsData = {
        //     'title': this.ruleFormDem.demandTit,
        //     'descp': this.ruleFormDem.demandDesc,
        //     'province': this.ruleFormDem.province,
        //     'city': this.ruleFormDem.city,
        //     'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
        //     'cost': this.selectCostRange,
        //     'duration': this.selectLongTime,
        //     'orgName': this.ruleFormDem.orgName,
        //     'contactNum': this.ruleFormDem.linkTel,
        //     'creator': this.kxUserId,
        //     'source': this.platSource
        //   };
        //   this.$axios.post(httpUrl.kxQurey.demand.add, paramsData).then((res) => {
        //     if (res.success) {
        //       this.$alert('我们已收到您的需求，马上为您对接合适的专家和专业机构，您可以登录科袖网与对方做进一步沟通。', '需求发布成功！', {
        //         confirmButtonText: '进入科袖网，发现更多服务和资源',
        //         type: 'success',
        //         center: true,
        //         cancelButtonText: '取消',
        //         callback: action => {
        //           if (action === 'confirm') {
        //             window.open(util.ekexiuUrl, '科袖网首页');
        //           };
        //         }
        //       });
        //       this.resetForm(formName);
        //       this.$emit('dialogChangedLogin', false);
        //     } else {
        //       this.$message({
        //         message: '需求发布失败，请重新发布！',
        //         type: 'warning'
        //       });
        //     };
        //     console.log(res);
        //   });
        // } else {
        //   console.log('error submit!!');
        //   return false
        }
      })
    },
    getList() {
      this.listLoading = true
      this.list = this.dataList.data
      this.total = this.dataList.total
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
      /*  fetchList(this.listQuery).then(response => {
        this.list = this.dataList.data
        this.total =  this.dataList.total
      pageQueryUser(this.listQuery).then(response => {
        const $data = response.data.data
        for (let i = 0; i < $data.length; i++) {
          $data[i].bridgeName = ''
          queryResponsibleBridge({ uid: $data[i].id }).then(response => {
            if (response.success) {
              const arr = []
              const $info = response.data
              for (let j = 0; j < $info.length; j++) {
                arr.push($info[j].shortName)
              }
              this.list[i].bridgeName = arr.join(',')
              this.$forceUpdate()
            }
          })
        }
        this.list = $data
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })  */
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      //  this.getList()
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      //  this.getList()
      this.listQuery.pageNo = val
      this.getList()
    },
    chilF(val) {
      if (!val) {
        this.getList()
      }
      this.edit = ''
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      //  this.getList()
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('已成功删除该传感器', '提示', {
      this.$confirm('确实要停用:用户' + row.name + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        type: 'warning',
        center: true
      }).then(() => {
        deleteUser({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功停用该用户')
          }
        })
      }).catch(() => {
      })
      /*  this.$confirm('确实要删除:桥梁12324吗？, 是否继续?', '提示', {
      confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
        }); */
    },
    resetTemp() {
    },
    handleCreate() {
      this.dialogTableVisible = true
      this.dialogTableVisible = !this.dialogTableVisible
    },
    handleUpdate(row) {
      this.edit = row.id
      this.dialogTableVisible = !this.dialogTableVisible
    },
    loadAll() {
      return [{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' }]
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString + 'wewe')
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      console.log(results + 'dddd')
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      console.log(item + 'ccc')
    distribution(row) {
      this.edit = row.id
      this.dialogPerssion = !this.dialogPerssion
    }
  }
}