opms_wechat/components/SelectDealer.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-15 10:34:49
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-05-22 11:14:36
 * @Description: file content
 * @FilePath: \oms\components\SelectDealer.vue
-->
<template>
  <view>
    <u-popup :show="selectVisible" @close="close">
      <view class="select-header">
        <view class="tit">选择{{ distrLabel }}</view>
        <view class="save-btn" @click="close()">保存</view>
      </view>
      <view class="search-container">
        <view class="search-input">
          <u-input
            clearable
            placeholderStyle="font-size:26rpx"
            :customStyle="{ height: '66rpx' }"
            v-model="queryForm.distName"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            placeholder="请输入客户名称"
            shape="circle"
            @input="getList()"
            border="surround"></u-input>
        </view>
      </view>
      <view class="tit">{{ distrLabel }}/助记名/所在省份/归属销售/负责人</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 distrApi from '@/api/base/distr'
  import to from 'await-to-js'
  export default {
    name: 'OmsCustomerContact',
    props: {
      distrId: {
        type: String | Array,
        default: () => null,
      },
    },
    data() {
      return {
        selectVisible: false,
        userList: [],
        queryForm: {
          distName: '',
          pageNum: 1,
          pageSize: 999,
        },
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        userValue: null,
        selected: null,
      }
    },
    computed: {
      distrLabel: function () {
        let str = ''
        if (this.distrId) {
          str = this.distrId == '30' ? '经销商' : '代理商'
        } else {
          str = '经销商/代理商'
        }
        return str
      },
    },
    methods: {
      async getList() {
        let params = this.queryForm
        if (this.distrId) {
          params.distType = parseInt(this.distrId) - 20 + ''
        }
        const [err, res] = await to(distrApi.getList(params))
        if (err) return
        if (res.code == 200) {
          if (res.data.list && res.data.list.length > 0) {
            this.userList = res.data.list.map((item) => ({
              id: item.id,
              label: `${item.distName}/${item.abbrName}/${item.provinceDesc}/${item.belongSale}/${item.distBoss}`,
              name: item.distName,
            }))
          } else {
            this.userList = []
          }
        }
      },
      open() {
        this.selectVisible = true
        this.getList()
      },
      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>