shenze-sysMan/src/views/device/doSugar.vue

<template>
  <!-- 远程做糖 -->
  <div class="sugarPage flex-col">
    <s-header :name="$t('device.remoteSugarMaking')" :noback="false"></s-header>
    <div class="box1 flex-col">
      <div class="block2 flex-row justify-between">
        <div class="block3 flex-col"></div>
        <span class="info2">{{ $t('device.equipmentName') }}：{{ deviceDetal ? deviceDetal.name : '' }}</span>
      </div>
      <div v-if="machineType === null || machineType === '0'">
        <van-field v-model="fieldValue" is-link readonly :label="$t('device.clickToSelectPattern')"
          :placeholder="$t('device.pleaseSelectAPattern')" @click="show = true" />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader v-model="cascaderValue" :title="$t('device.pleaseSelectAPattern')" :options="options"
            @close="show = false" @finish="onFinish">
            <template #option="{ option }">
              <div class="cascader-item">
                <van-image :src="option.imgUrl" width="55px" height="55px"></van-image>
                <div class="cascader-label">{{ option.value }}</div>
              </div>
            </template>
          </van-cascader>
        </van-popup>
        <div class="textRow o-pr-20">
          <span @click="pushToDaySugarList">{{ $t('device.todaysSugarList') }}>></span>
        </div>
        <div v-if="!doSugartData" class="block5 flex-col" @click="submitDoSugar"><span class="txt3">{{
          $t('device.submitToMakeSugar') }}</span></div>
        <van-button v-if="doSugartData" style="padding: 1em;" round type="primary" class="block5 flex-col"
          :disabled="doSugartType" @click="checkData()">{{ $t('device.viewResults') }}</van-button>
      </div>
      <div v-if="machineType === '1'">
        <van-field v-model="fieldValue" is-link readonly :label="$t('device.clickToSelectTaste')"
          :placeholder="$t('device.pleaseSelectTaste')" @click="show = true" />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader v-model="cascaderValue" :title="$t('device.pleaseSelectTaste')" :options="options"
            @close="show = false" @finish="onFinish">
            <template #option="{ option }">
              <div class="cascader-item">
                <van-image :src="option.imgUrl" width="55px" height="55px"></van-image>
                <div class="cascader-label">{{ option.value }}</div>
              </div>
            </template>
          </van-cascader>
        </van-popup>
        <div class="textRow o-pr-20">
          <span @click="pushToDaySugarList">{{ $t('device.todaysMakeList') }}>></span>
        </div>
        <div v-if="!doSugartData" class="block5 flex-col" @click="submitDoSugar"><span class="txt3">{{
          $t('device.submitToMakeSugar') }}</span></div>
        <van-button v-if="doSugartData" round type="primary" class="volumeChangeButton" :disabled="doSugartType"
          @click="checkData()">{{ $t('device.viewResults') }}</van-button>
      </div>
      <div v-if="machineType === '2'">
        <van-field v-model="fieldValue" is-link readonly :label="$t('device.clickToSelectTaste')"
          :placeholder="$t('device.pleaseSelectTaste')" @click="show = true" />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader v-model="cascaderValue" :title="$t('device.pleaseSelectTaste')" :options="options"
            @close="show = false" @finish="onFinish">
            <template #option="{ option }">
              <div class="cascader-item">
                <van-image :src="option.imgUrl" width="55px" height="55px"></van-image>
                <div class="cascader-label">{{ option.value }}</div>
              </div>
            </template>
          </van-cascader>
        </van-popup>
        <div class="textRow o-pr-20">
          <span @click="pushToDaySugarList">{{ $t('device.todaysMakeList') }}>></span>
        </div>
        <div v-if="!doSugartData" class="block5 flex-col" @click="submitDoSugar"><span class="txt3">{{
          $t('device.submitToMakeSugar') }}</span></div>
        <van-button v-if="doSugartData" round type="primary" class="volumeChangeButton" :disabled="doSugartType"
          @click="checkData()">{{ $t('device.viewResults') }}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from 'vue-router';
import { getDeviceDetal, selectProducts, doSugar, selectSugarStatus } from '@/service/device'
import { showFailToast, showSuccessToast, showToast } from 'vant';
import { useI18n } from 'vue-i18n';
import { styleUrl } from "../../common/js/utils";

export default {
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const deviceId = route.query.deviceId;
    const machineType = route.query.machineType;
    const deviceDetal = ref(null);
    const show = ref(false);
    const fieldValue = ref('');
    const cascaderValue = ref('');
    const options = ref([]);
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions[0].value
      console.log('onFinish', selectedOptions[0].value);
    }
    const doSugartData = ref(null);
    const doSugartType = ref(true);

    // 初始化页面获取列表
    onMounted(async () => {
      styleUrl('doSugar')
      getDeviceDetalFun();
    });

    const showSugarPhoto = (no) => {
      return require(`../../assets/order/spunSugar/goods/${no}.png`);
    };

    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === '00000') {
        deviceDetal.value = data.data;
        getProduct();
      } else { showFailToast(data.message); }
    }
    // 获取花形下拉列表
    const getProduct = async () => {
      const { data } = await selectProducts({ equipmentId: deviceId });
      if (data.code) {
        if(machineType != '2') {
          options.value = data.data.map(item => {
            return {
              text: item.productName,
              value: item.productName,
              imgUrl: showSugarPhoto(item.no),
            };
          })
        } else {
          // data.data.map(item => {
          //   console.log("编号", item.no);
          //   if (item.no == 'I01') {
          //     return {
          //       text: item.productName,
          //       value: item.productName,
          //       imgUrl: showSugarPhoto(item.no),
          //     };
          //   }
          // })
          data.data.forEach(item => {
            if (item.no == 'I01') {
              options.value.push(
                {
                  text: item.productName,
                  value: item.productName,
                  imgUrl: showSugarPhoto(item.no),
                  children: []
                }
              )
            } else if (item.no.includes('J')) {
              options.value[0].children.push(
                {
                  text: item.productName,
                  value: item.productName,
                  imgUrl: showSugarPhoto(item.no),
                  children: [],
                }
              )
            } else if (item.no.includes('C')) {
              options.value[0].children.forEach(item1 => {
                item1.children.push(
                  {
                    text: item.productName,
                    value: item.productName,
                    imgUrl: showSugarPhoto(item.no),
                  }
                )
              })
            }
          })
        }
      } else { showFailToast(data.message); }
      console.log(options.value);
    }
    const submitDoSugar = async () => {
      doSugartData.value = null;
      doSugartType.value = true;
      if (fieldValue.value === '') { showFailToast(t('device.pleaseSelectAPattern')); return; }
      const { data } = await doSugar({ equipmentId: deviceId, productName: fieldValue.value });
      if (data.code) {
        doSugartData.value = data.data;
        setTimeout(() => {
          doSugartType.value = false;
        }, 5000);
      } else { showFailToast(data.message); }
    }
    const checkData = async () => {
      const { data } = await selectSugarStatus({ no: doSugartData.value.no });
      if (data.code) {
        if (data.data == '1') {
          showSuccessToast(t('device.receiveInstruction'));
        } else {
          showSuccessToast(data.message);
        }
        doSugartData.value = null;
        doSugartType.value = true;
      } else {
        if (data.data == '0') {
          showToast(t('device.notUploadData'));
        } else if (data.data == '2') {
          showToast(t('device.machineException'));
        } else if (data.data == '3') {
          showToast(t('device.netException'));
        } else {
          showToast(data.message);
        }
      }
    };

    const pushToDaySugarList = async () => {
      router.push({ path: 'toDaySugarList', query: { deviceId: deviceId } })
    }

    return {
      deviceDetal,
      show,
      fieldValue,
      cascaderValue,
      options,
      onFinish,
      submitDoSugar,
      doSugartData,
      doSugartType,
      checkData,
      pushToDaySugarList,
      showSugarPhoto,
      machineType
    };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>