opms_wechat/frontend_mobile/components/SelectUser.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-15 10:34:49
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-15 14:10:58
 * @Description: file content
 * @FilePath: \oms\components\selectUser.vue
-->
<template>
  <view>
    <u-popup :show="selectVisible" @close="close">
      <view class="tit">选择员工</view>
      <view class="search-container">
        <view class="search-input">
          <u-input
            clearable
            placeholderStyle="font-size:26rpx"
            :customStyle="{ height: '66rpx' }"
            v-model="queryForm.keyWords"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            placeholder="请输入姓名"
            shape="circle"
            border="surround"></u-input>
        </view>
        <view class="search-btn" @click="getUserList()">搜索</view>
      </view>
      <u-empty mode="list" v-if="userList.length == 0"></u-empty>
      <view class="concat-list" v-else>
        <u-radio-group v-model="userValue" placement="column">
          <view class="radio-item" v-for="item in userList" :key="item.id">
            <u-radio :label="item.label" :name="item.id" @change="radioChange"></u-radio>
          </view>
        </u-radio-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import userApi from '@/api/system/user'
  import to from 'await-to-js'
  export default {
    name: 'OmsCustomerContact',
    props: {
      queryParams: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        selectVisible: false,
        userList: [],
        queryForm: {
          keyWords: '',
          pageNum: 1,
          pageSize: 999,
        },
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        userValue: null,
        selected: null,
      }
    },

    methods: {
      async getUserList() {
        let params = Object.assign(this.queryForm, this.queryParams)
        const [err, res] = await to(userApi.getList(params))
        if (err) return
        if (res.code == 200) {
          if (res.data.list) {
            this.userList = res.data.list.map((item) => ({ id: item.id, label: item.nickName }))
          } else {
            this.userList = []
          }
        }
      },
      open() {
        this.selectVisible = true
        this.getUserList()
      },
      close() {
        this.selectVisible = false
        this.$emit('close', this.selected)
      },
      radioChange(n) {
        this.selected = this.userList.find((item) => item.id == n)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .tit {
    font-size: 26rpx;
    font-weight: bold;
    padding: 30rpx 0 0 30rpx;
  }
  .search-container {
    padding: 30rpx 30rpx 0 30rpx;
    display: flex;
    align-items: center;
    .search-input {
      flex: 1;
    }
    .search-btn {
      text-align: center;
      line-height: 60rpx;
      border-radius: 12rpx;
      width: 100rpx;
      height: 60rpx;
      font-size: 26rpx;
      margin: 0 0 0 12rpx;
      background: $u-primary;
      color: #ffffff;
    }
  }
  .concat-list {
    padding: 0 0 20rpx 0;
    width: 100%;
    height: 900rpx;
    overflow: auto;
    margin-top: 20rpx;
    .radio-item {
      padding: 20rpx 30rpx;
      border-bottom: 1px solid #ccc;
    }
  }
</style>