shenze-sysMan/src/components/typeDownMenu/index.vue

<template>
  <van-dropdown-menu class="titleMenu" swipe-threshold="3">
    <!-- 用户 -->
    <!-- <van-dropdown-item v-if="isShowAdmin()" :title="adminTypeTitle" v-model="adminType" :options="adminList"
      @change="adminTypeChange" /> -->
    <!-- 设备类型 -->
    <van-dropdown-item :title="machineTypeTitle" v-model="machineType" :options="machineList"
      @change="machineTypeChange" />
    <!-- 账号类型 -->
    <van-dropdown-item v-if="isShowAdminAndCompany()" :title="foreignTypeTitle" v-model="foreignType"
      :options="foreignList" @change="foreignTypeChange" />
    <!-- 公司平台 -->
    <van-dropdown-item v-if="isShowCompany()" :title="companyTypeTitle" v-model="companyType" :options="companyList"
      @change="companyTypeChange" />
    <!-- 支付方式 -->
    <van-dropdown-item :title="paymentTypeTitle" v-model="paymentType" :options="payList" @change="paymentTypeChange" />
    <!-- 设备筛选 -->
    <van-dropdown-item v-if="isShowDevice()" :title="deviceTypeTitle" v-model="deviceType" :options="deviceList"
      @change="deviceTypeChange" />
    <!-- 订单状态 -->
    <van-dropdown-item v-if="!isHome" :title="orderStatusTitle" v-model="orderStatus" :options="orderStatusList"
      @change="orderStatusChange" />
  </van-dropdown-menu>
</template>

<script>
import { onMounted, toRefs, reactive, ref } from "vue";
import { getAdminList, getEquipmentList } from '@/service/typeSelectList';
import { getLoginUser } from '@/common/js/utils';
import { useI18n } from 'vue-i18n';

export default {
  name: "typeSelectList",
  components: {},
  props: {
    // 是否首页
    isHome: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const user = getLoginUser(); // 获取登录用户

    const { t } = useI18n();
    // 支付方式
    const paymentType = ref(null);
    // 支付方式标题
    const paymentTypeTitle = ref(t('typeSelectList.paymentMethod'));
    // 支付方式列表
    const payList = ref(user.ifForeign === '0' ? [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.mainSweepOfAlipay'), value: 'ALIPAY_NATIVE' },
      { text: t('typeSelectList.weChatScanning'), value: 'WEIXIN_NATIVE' },
      { text: t('typeSelectList.antiScanningOfAlipay'), value: 'ALIPAY_CARD' },
      { text: t('typeSelectList.weChatBackScanning'), value: 'WEIXIN_CARD' }
    ] : [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.noPaymentRequired'), value: 0 },
      { text: t('typeSelectList.coin'), value: 1 },
      { text: t('typeSelectList.notes'), value: 2 },
      { text: t('typeSelectList.coinsNotes'), value: 3 },
      { text: t('typeSelectList.creditCard'), value: 4 },
      { text: t('typeSelectList.electronicPayment'), value: 5 },
    ]);
    // 选择支付方式
    const paymentTypeChange = (value) => {
      paymentTypeTitle.value = payList.value.find(payList => payList.value === value).text;
      searchParams.payType = value;
      outputDate();
    }


    // 公司平台
    const companyType = ref(null);
    // 公司平台标题
    const companyTypeTitle = ref(t('typeSelectList.companies'));
    // 公司平台列表
    const companyList = [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.sz'), value: '0' },
      { text: t('typeSelectList.sc'), value: '1' },
    ];
    // 选择公司平台
    const companyTypeChange = (value) => {
      companyTypeTitle.value = companyList.find(companyList => companyList.value === value).text;
      searchParams.companyType = value;
      outputDate();
    }

    // 账号类型
    const foreignType = ref(null);
    // 账号类型标题
    const foreignTypeTitle = ref(t('typeSelectList.ifForeignes'));
    // 账号地区列表
    const foreignList = [
      { text: t('typeSelectList.mainland'), value: '0' },
      { text: t('typeSelectList.overseas'), value: '1' },
    ];
    // 选择账号类型
    const foreignTypeChange = (value) => {
      foreignTypeTitle.value = foreignList.find(foreignList => foreignList.value === value).text;
      if (value == "0") {
        payList.value = [
          { text: t('typeSelectList.whole'), value: '' },
          { text: t('typeSelectList.mainSweepOfAlipay'), value: 'ALIPAY_NATIVE' },
          { text: t('typeSelectList.weChatScanning'), value: 'WEIXIN_NATIVE' },
          { text: t('typeSelectList.antiScanningOfAlipay'), value: 'ALIPAY_CARD' },
          { text: t('typeSelectList.weChatBackScanning'), value: 'WEIXIN_CARD' }
        ];
      } else {
        payList.value = [
          { text: t('typeSelectList.whole'), value: '' },
          { text: t('typeSelectList.noPaymentRequired'), value: 0 },
          { text: t('typeSelectList.coin'), value: 1 },
          { text: t('typeSelectList.notes'), value: 2 },
          { text: t('typeSelectList.coinsNotes'), value: 3 },
          { text: t('typeSelectList.creditCard'), value: 4 },
          { text: t('typeSelectList.electronicPayment'), value: 5 },
        ];
      }
      searchParams.ifForeign = value;
      outputDate();
    }

    // 设备类型
    const machineType = ref(null);
    // 设备类型标题
    const machineTypeTitle = ref(t('typeSelectList.machines'));
    // 设备类型列表
    const machineList = [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.MG'), value: '0' },
      { text: t('typeSelectList.POP'), value: '1' },
    ];
    // 选择设备类型
    const machineTypeChange = (value) => {
      machineTypeTitle.value = machineList.find(machineList => machineList.value === value).text;
      searchParams.machineType = value;
      outputDate();
    }

    // 设备筛选
    const deviceType = ref(null);
    // 设备筛选标题
    const deviceTypeTitle = ref(t('typeSelectList.allDevices'));
    // 设备列表
    const deviceList = ref([]);
    // 获取设备列表
    const getDeviceListFun = async () => {
      const { data } = await getEquipmentList({ adminId: user.id });
      if (data.code === '00000') {
        deviceList.value = data.data.map(item => {
          return { text: item.name != null ? item.name : item.clientId, value: item.id }
        });
        deviceList.value.unshift({ text: t('typeSelectList.allDevices'), value: '' });
      }
    }
    // 设备选择
    const deviceTypeChange = (value) => {
      deviceTypeTitle.value = deviceList.value.find(deviceList => deviceList.value === value).text;
      if (deviceTypeTitle.value != t('typeSelectList.allDevices')) {
        searchParams.equipmentId = value;
      } else {
        searchParams.equipmentId = '';
      }
      outputDate();
    }

    // 订单状态
    const orderStatus = ref(null);
    // 订单状态标题
    const orderStatusTitle = ref(t('typeSelectList.orderStatus'));
    // 订单状态列表
    const orderStatusList = [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.unpaid'), value: 0 },
      { text: t('typeSelectList.paid'), value: 1 },
      { text: t('typeSelectList.refunding'), value: 2 },
      { text: t('typeSelectList.refunded'), value: 3 },
    ]
    // 选择订单状态
    const orderStatusChange = (value) => {
      orderStatusTitle.value = orderStatusList.find(orderStatusList => orderStatusList.value === value).text;
      searchParams.status = value;
      outputDate();
    }

    // 商户筛选
    const adminType = ref(null);
    // 商户筛选标题
    const adminTypeTitle = ref(t('typeSelectList.thisMerchant'));
    // 商户列表
    const adminList = ref([]);
    // 获取商户列表
    const getAdminListFun = async () => {
      const { data } = await getAdminList({ adminId: user.id });
      if (data.code === '00000') {
        adminList.value = data.data.map(item => {
          return { text: item.username, value: item.id }
        });
        adminList.value.unshift({ text: t('typeSelectList.allSuboUsers'), value: 'all' });
        adminList.value.unshift({ text: t('typeSelectList.thisMerchant'), value: 'this' });
      }
    }
    // 选择商户
    const adminTypeChange = (value) => {
      adminTypeTitle.value = adminList.value.find(adminList => adminList.value === value).text;
      searchParams.adminType = (adminTypeTitle.value === t('typeSelectList.allSuboUsers')) ? 'all' : '';
      searchParams.userName = (adminTypeTitle.value === t('typeSelectList.allSuboUsers')) ? 'all' : (adminTypeTitle.value === t('typeSelectList.thisMerchant')) ? user.username : adminTypeTitle.value;
      outputDate();
    }


    // 筛选参数
    let searchParams = reactive({
      userName: user.username,
      adminType: '',
      clientId: '',
      payType: '',
      productNo: '',
      equipmentId: '',
      companyType: '',
      machineType: '',
      ifForeign: '',
    });


    // 是否商户
    const isShowAdmin = () => { return (user && user.type === 1); }
    // 是否管理员
    const isShowCompany = () => { return (user && user.type === 0); }
    // 是否管理员和公司人员
    const isShowAdminAndCompany = () => { return (user && user.type < 2); }
    // 是否商户及子账户
    const isShowDevice = () => { return (user && (user.type === 2 || user.type === 3)); }
    // 返回参数
    const outputDate = () => { emit('upselectdata', searchParams); }

    onMounted(() => {
      getAdminListFun();
      getDeviceListFun();
    });
    return {
      ...toRefs(searchParams),
      // 是否商户
      isShowAdmin,
      // 是否管理员
      isShowCompany,
      // 是否商户及子账户
      isShowDevice,
      // 是否管理员和公司人员
      isShowAdminAndCompany,
      // 商家选择
      adminList,
      adminType,
      adminTypeTitle,
      adminTypeChange,

      // 订单状态
      orderStatusList,
      orderStatus,
      orderStatusTitle,
      orderStatusChange,

      // 设备选择
      deviceList,
      deviceType,
      deviceTypeTitle,
      deviceTypeChange,

      // 设备类型选择
      machineList,
      machineType,
      machineTypeTitle,
      machineTypeChange,

      // 账号类型选择
      foreignList,
      foreignType,
      foreignTypeTitle,
      foreignTypeChange,

      // 公司平台选择
      companyList,
      companyType,
      companyTypeTitle,
      companyTypeChange,

      // 支付方式选择
      payList,
      paymentType,
      paymentTypeTitle,
      paymentTypeChange,
    };
  },
};
</script>

<style lang="less" scoped>
@import "@/common/style/common.less";
</style>