opms_wechat/pages/partners/components/SelectCompany.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-15 10:34:49
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-23 10:57:44
 * @Description: file content
 * @FilePath: \oms\components\SelectCustomer.vue
-->
<template>
  <view>
    <u-popup :show="selectVisible" @close="close">
      <view class="select-header">
        <view class="tit">选择公司</view>
        <view class="flex">
          <!-- <view class="save-btn" @click="handleAdd()">新增</view> -->
          <view class="save-btn" @click="close()">保存</view>
        </view>
      </view>
      <view class="search-container">
        <view class="search-input">
          <u-input
            clearable
            placeholderStyle="font-size:26rpx"
            :customStyle="{ height: '66rpx' }"
            v-model="queryForm.partnerName"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            placeholder="请输入公司名称"
            shape="circle"
            @input="getUserList()"
            border="surround"></u-input>
        </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>
    <u-overlay :show="showAdd" zIndex="999999">
      <view class="add-warp">
        <view class="tit">创建公司</view>
        <u-input v-model="value"></u-input>
        <view class="flex flex-between" style="margin-top: 10px">
          <view style="width: 100px">
            <u-button type="primary" size="small" text="取消" @click="handleCloseAdd"></u-button>
          </view>
          <view style="width: 100px">
            <u-button type="primary" size="small" text="提交" @click="handleAddSub"></u-button>
          </view>
        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script>
  import partnerApi from '@/api/partner'

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

    methods: {
      handleCloseAdd() {
        this.showAdd = false
      },
      handleAddSub() {},
      handleAdd() {
        this.value = ''
        this.showAdd = true
      },
      async getUserList() {
        let params = Object.assign(this.queryForm, this.queryParams)
        const [err, res] = await to(partnerApi.getCompanyList(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.partnerName,
              name: item.partnerName,
            }))
          } 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>
  .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;
    }
  }
  .add-warp {
    width: 80%;
    height: 150px;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    .tit {
      margin-bottom: 10px;
    }
  }
</style>