用户桥梁分配权限

src/views/peoplesManage/infoManage/editUserPermissions.vue

  <el-dialog title="用户数据权限修改" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
    <el-form class="form-main" :model="ruleForm2"  ref="ruleForm2">
      <el-row :gutter="16">
        <el-col :xs="12" :sm="12" :lg="12">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
              <el-col :span="8">
                <el-form-item label="账号">{{ruleForm2.account}}</el-form-item>
              </el-col>
              <el-col :span="12">
              <el-col :span="8">
                <el-form-item label="用户姓名">{{ruleForm2.name}}</el-form-item>
              </el-col>
              <el-col :span="12"  style='margin-top:30px'>
              <el-col :span="8">
                <el-form-item label="用户类型">{{(ruleForm2.type) ? '管理员' : '普通用户'}}</el-form-item>
              </el-col>
              <el-col :span="12" style='margin-top:30px'>
              <el-col :span="8">
                <el-form-item label="职位">{{ruleForm2.job}}</el-form-item>
              </el-col>
              <el-col :span="24" style='margin-top:30px'>
              <el-col :span="16">
                <el-form-item label="所属机构">{{ruleForm2.comp}}</el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
<!--         <el-col :xs="12" :sm="12" :lg="12">
          <div class="list-item">
            <el-row>
              <el-col :span="24">
              </el-col>
            </el-row>
          </div>
        </el-col> -->
        <el-col :xs="24" :sm="24" :lg="24">
          <el-transfer class="check-transfer"
            filterable
            v-model="valueBridge"
            :titles="['所有桥梁', '负责桥梁']"
            :button-texts="['删除', '添加']"
            :props="{
              key: 'id',
              label: 'value'
            }"
            :left-default-checked="bridgeListsChecked"
            :data="bridgeLists">
          </el-transfer>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="el-btn-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>
          <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>
  props: ['dialog', 'id'],
  data() {
    return {
      arr: [],
      bridgeLists: [],
      bridgeListsChecked: [],
      valueBridge: [],
      shouHead: false,
      state4: '',
      ruleForm2: {
        job: '',
        type: 0
      },
      tableData3: [],
      timeout: null,
      dialogTableVisible: false
    }
  },
  created() {
    this.getAllBridges()
  },
  watch: {
    dialog() {
      this.dialogTableVisible = true
      queryRegister({ id: this.id }).then(response => {
        if (response.success) {
          const $data = response.data
          }
        }
      })
      queryResponsibleBridge({ uid: this.id }).then(response => {
      queryResponsibleBridge({ uid: this.id, active: 1 }).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 })
            this.valueBridge.push($info[j].id)
          }
        }
      })
      this.dialogTableVisible = true
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        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([{ 'value': '暂无数据', 'id': '' }])
            setTimeout(function() {
              cb([])
            }, 300)
          }
        })
      }, 3000 * Math.random())
    },
    handleSelect(item) {
      this.state4 = ''
      if (item.value === '暂无数据' && item.id === '') {
        return
      }
      let flag = false
      for (let i = 0; i < this.tableData3.length; i++) {
        if (item.id === this.tableData3[i].address) {
          flag = true
          break
    getAllBridges() {
      DeviceOfservice({ key: this.state4, active: 1 }).then(response => {
        const $info = response.data
        if ($info.length) {
          this.bridgeListsChecked.push($info[0].id)
          const $data = $info.map(item => {
            return { 'value': item.shortName, 'id': item.id }
          })
          this.bridgeLists = $data
        }
      }
      if (!flag) {
        const $data = { name: item.value, address: item.id }
        this.tableData3.push($data)
      }
    },
    handleModifyStatus(value) {
      const index = this.tableData3.indexOf(value)
      this.tableData3.splice(index, 1)
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
      })
    },
    closed() {
      this.tableData3 = []
      this.arr = []
      this.valueBridge = []
      this.dialogTableVisible = false
    },
    submit() {
      this.tableData3.map(item => {
        this.arr.push(item.address)
      })
      if (!this.arr.length) {
      if (!this.valueBridge.length) {
        this.$message.error('请至少选择一个桥梁')
        return
      }
      updatePermission({ id: this.id, bridges: this.arr }).then(response => {
      updatePermission({ id: this.id, bridges: this.valueBridge }).then(response => {
        if (response.success) {
          this.tableData3 = []
          this.arr = []
          this.valueBridge = []
          this.$emit('chilF')
          const that = this
          setTimeout(function() {
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item{
    margin: 0;
    margin-bottom: 10px;
  }
  .textarea-div{
    line-height: 26px;
    margin-bottom: 10px;
  }
  .list-item{
    margin-bottom: 20px;
    padding: 10px 15px;
  }
  .el-autocomplete {
    width: 100%
  }
  .check-transfer.el-transfer{
    padding-left: 15px;
    margin-bottom: 15px;
  }
  .check-transfer .el-transfer-panel{
    width: 240px;
  }
</style>

src/views/peoplesManage/infoManage/index.vue

        const $data = response.data.data
        for (let i = 0; i < $data.length; i++) {
          $data[i].bridgeName = ''
          queryResponsibleBridge({ uid: $data[i].id }).then(response => {
          queryResponsibleBridge({ uid: $data[i].id, active: 1 }).then(response => {
            if (response.success) {
              const arr = []
              const $info = response.data