opms_wechat/components/SelectProduct.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-15 10:34:49
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-20 18:20:37
 * @Description: file content
 * @FilePath: \frontend_mobile\components\SelectProduct.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.prodName"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            placeholder="请输入产品名称"
            shape="circle"
            border="surround"></u-input>
        </view>
        <view class="search-btn" @click="getProjectList()">搜索</view>
      </view>
      <view class="tit">产品名称/产品类别/产品型号</view>

      <view class="flex_l allCheck">
        <u-checkbox-group placement="column">
          <u-checkbox label="全部" :checked="isallcheck" @change="checkboxChange"></u-checkbox>
        </u-checkbox-group>
      </view>
      <u-empty mode="list" v-if="checkboxList.length == 0"></u-empty>
      <view class="concat-list" v-else>
        <u-checkbox-group v-model="userValue" placement="column">
          <view class="radio-item" v-for="item in checkboxList" :key="item.id">
            <u-checkbox
              :label="item.label"
              :name="item.id"
              :checked="item.ischeck"
              @change="radioChange(item)"></u-checkbox>
          </view>
        </u-checkbox-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import productApi from '@/api/base/product'
  import to from 'await-to-js'
  export default {
    name: 'OmsCustomerContact',
    data() {
      return {
        selectVisible: false,
        checkboxList: [],
        queryForm: {
          prodName: '',
          pageNum: 1,
          pageSize: 999,
          type: '全部客户',
        },
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        userValue: null,
        isallcheck: false, //全选
        checkedId: [],
      }
    },

    methods: {
      async getProjectList() {
        let params = Object.assign(this.queryForm, this.queryParams)
        const [err, res] = await to(productApi.getList(params))
        if (err) return
        if (res.code == 200) {
          if (res.data.list) {
            this.checkboxList = res.data.list.map((item) => ({
              ...item,
              label: `${item.prodName}/${item.prodClass}/${item.prodCode}`,
              ischeck: false,
              prodNum: '1',
            }))
          } else {
            this.checkboxList = []
          }
          let allChecked = this.checkboxList.length == 0 ? false : this.checkboxList.every((el) => el.ischeck === true)
          if (allChecked) {
            this.isallcheck = true //都有 全选
          } else {
            this.isallcheck = false // 反选
          }
        }
      },
      open() {
        this.selectVisible = true
        this.getProjectList()
      },
      close() {
        this.selectVisible = false
        let selected = this.checkboxList.filter((item) => item.ischeck)
        this.$emit('close', selected)
      },
      radioChange(item) {
        item.ischeck = !item.ischeck
        let allChecked = this.checkboxList.length == 0 ? false : this.checkboxList.every((el) => el.ischeck === true)
        if (allChecked) {
          this.isallcheck = true //都有 全选
        } else {
          this.isallcheck = false // 反选
        }
        console.log(' this.isallcheck', this.isallcheck)
      },
      // 全部
      checkboxChange() {
        this.isallcheck = !this.isallcheck
        this.checkboxList.forEach((el) => {
          el.ischeck = this.isallcheck
        })
        console.log(this.checkboxList)
      },
    },
  }
</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;
    }
  }
  .allCheck {
    padding: 30rpx 0 0 30rpx;
  }
  .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>