aiot-app/pages/repair/selectUser/index.vue

<template>
  <view class="assign-container">
    <u-popup :show="popShow" @close="close">
      <view class="select-container">
        <view class="title">
          <view class="btn-box">
            <text class="btn cancel" @tap="close">取消</text>
            <text class="btn confirm" @tap="submit">确定</text>
          </view>
        </view>
        <view class="select-wrapper">
          <view class="col deptInp">
            <text class="label">部门：</text>
            <input
              type="text"
              disabled
              :value="formData.deptVal"
              @tap="openPicker"
              placeholder="请选择"
            />
          </view>
          <view class="col userInp">
            <text class="label">接收人：</text>
            <uni-data-select
              :localdata="userList"
              @change="handleUserChange"
              v-model="formData.executorId"
            />
          </view>
        </view>
      </view>
    </u-popup>
    <ba-tree-picker
      ref="treePicker"
      :multiple="false"
      @select-change="confirm"
      title="选择部门"
      :localdata="listData"
      valueKey="code"
      textKey="name"
      childrenKey="children"
    />
  </view>
</template>

<script>
import { post, get, postJ } from '@/utils/api.js'
import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
export default {
  components: {
    baTreePicker
  },
  data () {
    return {
      popShow: false,
      deptPickerShow: false,
      listData: [],
      userList: [],
      formData: {
        deptVal: '',
        executorName: '',
        executorId: ''
      }
    }
  },
  created () {
    this.getDept()
  },
  methods: {
    //工单id
    open (id) {
      this.popShow = true
    },
    openPicker () {
      this.$refs.treePicker._show()
      // this.deptPickerShow = true
      // console.log(1111);
    },
    handleUserChange (id) {
      console.log(id)
      const obj = this.userList.find(n => {
        return n.userId == id
      })
      this.formData.executorName = obj.trueName || ''
    },
    close () {
      this.formData = {
        deptVal: '',
        executorName: '',
        executorId: '',
        reassignExplain: ''
      }
      this.userList = []
      this.popShow = false
    },
    submit () {
      if (!this.formData.executorId) {
        uni.showToast({
          icon: 'error',
          title: '请选择接收人'
        })
        return
      }
      let currentUser = this.userList.find(n => {
        return n.userId == this.formData.executorId
      })
      this.$emit('submit', currentUser)
    },
    confirm (data, name) {
      this.formData.deptVal = name

      this.formData.executorName = ''
      this.formData.executorId = ''
      this.getUser(data[0])
    },
    getDept () {
      get(this.apiUrl + '/main/org/dept/effectiveTree').then(res => {
        if (res?.success) {
          this.listData = res.data
        }
      })
    },
    getUser (deptCode) {
      post(this.apiUrl + '/main/user/list', {
        deptCode,
        page: 1,
        size: 9999
      }).then(res => {
        if (res?.success) {
          this.userList = res.data.items.map(item => {
            item.text = item.trueName
            item.value = item.userId
            return item
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.select-container {
  min-height: 60vh;
  .title {
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background-color: $j-primary-border-green;
    font-weight: bold;
    position: relative;
    font-size: 28rpx;
    color: #fff;
    .btn-box {
      position: absolute;
      top: 50%;
      right: 10rpx;
      transform: translateY(-50%);
    }
    .btn {
      width: 60rpx;
      height: 32rpx;
      display: inline-block;
      font-size: 28rpx;
      border: 1px solid #fff;
      text-align: center;
      line-height: 30rpx;
    }
  }

  .select-wrapper {
    .col {
      display: flex;
      // min-height: 0rpx;
      margin-top: 22rpx;
      align-items: center;
      padding-right: 14rpx;
      .label {
        display: inline-block;
        width: 200rpx;
        text-align: right;
      }
      input {
        flex: 1;
        border: 1rpx solid #e5e5e5;
        height: 66rpx;
        border-radius: 8rpx;
        font-size: 28rpx;
        padding: 8rpx 16rpx;
        box-sizing: border-box;
        color: #6a6a6a;
      }
      textarea {
        border: 1rpx solid #e5e5e5;
        flex: 1;
        height: 100rpx;
      }
    }
  }
}
</style>