doSugar.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <!-- 远程做糖 -->
  3. <div class="sugarPage flex-col">
  4. <s-header :name="$t('device.remoteSugarMaking')" :noback="false"></s-header>
  5. <div class="box1 flex-col">
  6. <div class="block2 flex-row justify-between">
  7. <div class="block3 flex-col"></div>
  8. <span class="info2">{{ $t('device.equipmentName') }}:{{ deviceDetal ? deviceDetal.name : '' }}</span>
  9. </div>
  10. <div v-if="machineType === null || machineType === '0'">
  11. <van-field v-model="fieldValue" is-link readonly :label="$t('device.clickToSelectPattern')"
  12. :placeholder="$t('device.pleaseSelectAPattern')" @click="show = true" />
  13. <van-popup v-model:show="show" round position="bottom">
  14. <van-cascader v-model="cascaderValue" :title="$t('device.pleaseSelectAPattern')" :options="options"
  15. @close="show = false" @finish="onFinish">
  16. <template #option="{ option }">
  17. <div class="cascader-item">
  18. <van-image :src="option.imgUrl" width="55px" height="55px"></van-image>
  19. <div class="cascader-label">{{ option.value }}</div>
  20. </div>
  21. </template>
  22. </van-cascader>
  23. </van-popup>
  24. <div class="textRow o-pr-20">
  25. <span @click="pushToDaySugarList">{{ $t('device.todaysSugarList') }}>></span>
  26. </div>
  27. <div v-if="!doSugartData" class="block5 flex-col" @click="submitDoSugar"><span class="txt3">{{
  28. $t('device.submitToMakeSugar') }}</span></div>
  29. <van-button v-if="doSugartData" style="padding: 1em;" round type="primary" class="block5 flex-col"
  30. :disabled="doSugartType" @click="checkData()">{{ $t('device.viewResults') }}</van-button>
  31. </div>
  32. <div v-if="machineType === '1'">
  33. <van-field v-model="fieldValue" is-link readonly :label="$t('device.clickToSelectTaste')"
  34. :placeholder="$t('device.pleaseSelectTaste')" @click="show = true" />
  35. <van-popup v-model:show="show" round position="bottom">
  36. <van-cascader v-model="cascaderValue" :title="$t('device.pleaseSelectTaste')" :options="options"
  37. @close="show = false" @finish="onFinish">
  38. <template #option="{ option }">
  39. <div class="cascader-item">
  40. <van-image :src="option.imgUrl" width="55px" height="55px"></van-image>
  41. <div class="cascader-label">{{ option.value }}</div>
  42. </div>
  43. </template>
  44. </van-cascader>
  45. </van-popup>
  46. <div class="textRow o-pr-20">
  47. <span @click="pushToDaySugarList">{{ $t('device.todaysMakeList') }}>></span>
  48. </div>
  49. <div v-if="!doSugartData" class="block5 flex-col" @click="submitDoSugar"><span class="txt3">{{
  50. $t('device.submitToMakeSugar') }}</span></div>
  51. <van-button v-if="doSugartData" round type="primary" class="volumeChangeButton" :disabled="doSugartType"
  52. @click="checkData()">{{ $t('device.viewResults') }}</van-button>
  53. </div>
  54. <div v-if="machineType === '2'">
  55. <van-field v-model="fieldValue" is-link readonly :label="$t('device.clickToSelectTaste')"
  56. :placeholder="$t('device.pleaseSelectTaste')" @click="show = true" />
  57. <van-popup v-model:show="show" round position="bottom">
  58. <van-cascader v-model="cascaderValue" :title="$t('device.pleaseSelectTaste')" :options="options"
  59. @close="show = false" @finish="onFinish">
  60. <template #option="{ option }">
  61. <div class="cascader-item">
  62. <van-image :src="option.imgUrl" width="55px" height="55px"></van-image>
  63. <div class="cascader-label">{{ option.value }}</div>
  64. </div>
  65. </template>
  66. </van-cascader>
  67. </van-popup> -->
  68. <div class="textRow o-pr-20">
  69. <span @click="pushToDaySugarList">{{ $t('device.todaysMakeList') }}>></span>
  70. </div>
  71. <div v-if="!doSugartData" class="block5 flex-col" @click="submitDoSugar"><span class="txt3">{{
  72. $t('device.submitToMakeSugar') }}</span></div>
  73. <van-button v-if="doSugartData" round type="primary" class="volumeChangeButton" :disabled="doSugartType"
  74. @click="checkData()">{{ $t('device.viewResults') }}</van-button>
  75. </div>
  76. </div>
  77. </div>
  78. </template>
  79. <script>
  80. import { onMounted, ref } from 'vue';
  81. import sHeader from "@/components/SimpleHeader";
  82. import { useRoute, useRouter } from 'vue-router';
  83. import { getDeviceDetal, selectProducts, doSugar, selectSugarStatus } from '@/service/device'
  84. import { showFailToast, showSuccessToast, showToast } from 'vant';
  85. import { useI18n } from 'vue-i18n';
  86. import { styleUrl } from "../../common/js/utils";
  87. export default {
  88. setup() {
  89. const { t } = useI18n();
  90. const route = useRoute();
  91. const router = useRouter();
  92. const deviceId = route.query.deviceId;
  93. const machineType = route.query.machineType;
  94. const deviceDetal = ref(null);
  95. const show = ref(false);
  96. const fieldValue = ref('');
  97. const cascaderValue = ref('');
  98. const options = ref([]);
  99. const onFinish = ({ selectedOptions }) => {
  100. console.log('onFinish', selectedOptions);
  101. show.value = false;
  102. fieldValue.value = selectedOptions[0].value
  103. }
  104. const doSugartData = ref(null);
  105. const doSugartType = ref(true);
  106. // 初始化页面获取列表
  107. onMounted(async () => {
  108. styleUrl('doSugar')
  109. getDeviceDetalFun();
  110. });
  111. const showSugarPhoto = (no) => {
  112. return require(`../../assets/order/spunSugar/goods/${no}.png`);
  113. };
  114. // 获取设备列表数据
  115. const getDeviceDetalFun = async () => {
  116. const { data } = await getDeviceDetal({ id: deviceId });
  117. if (data.code === '00000') {
  118. deviceDetal.value = data.data;
  119. getProduct();
  120. } else { showFailToast(data.message); }
  121. }
  122. // 获取花形下拉列表
  123. const getProduct = async () => {
  124. const { data } = await selectProducts({ equipmentId: deviceId });
  125. if (data.code) {
  126. if (machineType != '2') {
  127. options.value = data.data.map(item => {
  128. return {
  129. text: item.productName,
  130. value: item.productName,
  131. imgUrl: showSugarPhoto(item.no),
  132. };
  133. })
  134. } else {
  135. // data.data.map(item => {
  136. // console.log("编号", item.no);
  137. // if (item.no == 'I01') {
  138. // return {
  139. // text: item.productName,
  140. // value: item.productName,
  141. // imgUrl: showSugarPhoto(item.no),
  142. // };
  143. // }
  144. // })
  145. data.data.forEach(item => {
  146. if (item.no == 'I01') {
  147. options.value.push(
  148. {
  149. text: item.productName,
  150. value: item.productName,
  151. imgUrl: showSugarPhoto(item.no),
  152. children: []
  153. }
  154. )
  155. }
  156. })
  157. data.data.forEach(item => {
  158. if (item.no.includes('J')) {
  159. options.value[0].children.push(
  160. {
  161. text: item.productName,
  162. value: item.productName,
  163. imgUrl: showSugarPhoto(item.no),
  164. children: [],
  165. }
  166. )
  167. }
  168. })
  169. data.data.forEach(item => {
  170. if (item.no.includes('C')) {
  171. options.value[0].children.forEach(item1 => {
  172. item1.children.push(
  173. {
  174. text: item.productName,
  175. value: item.productName,
  176. imgUrl: showSugarPhoto(item.no),
  177. }
  178. )
  179. })
  180. }
  181. })
  182. }
  183. } else { showFailToast(data.message); }
  184. // console.log(options.value);
  185. }
  186. const submitDoSugar = async () => {
  187. doSugartData.value = null;
  188. doSugartType.value = true;
  189. if (fieldValue.value === '') { showFailToast(t('device.pleaseSelectAPattern')); return; }
  190. const { data } = await doSugar({ equipmentId: deviceId, productName: fieldValue.value });
  191. if (data.code) {
  192. doSugartData.value = data.data;
  193. setTimeout(() => {
  194. doSugartType.value = false;
  195. }, 5000);
  196. } else { showFailToast(data.message); }
  197. }
  198. const checkData = async () => {
  199. const { data } = await selectSugarStatus({ no: doSugartData.value.no });
  200. if (data.code) {
  201. if (data.data == '1') {
  202. showToast(t('device.receiveInstruction'));
  203. } else {
  204. showSuccessToast(data.message);
  205. }
  206. doSugartData.value = null;
  207. doSugartType.value = true;
  208. } else {
  209. if (data.data == '0') {
  210. showToast(t('device.notUploadData'));
  211. } else if (data.data == '2') {
  212. showToast(t('device.machineException'));
  213. } else if (data.data == '3') {
  214. showToast(t('device.netException'));
  215. } else {
  216. showToast(data.message);
  217. }
  218. }
  219. };
  220. const pushToDaySugarList = async () => {
  221. router.push({ path: 'toDaySugarList', query: { deviceId: deviceId } })
  222. }
  223. return {
  224. deviceDetal,
  225. show,
  226. fieldValue,
  227. cascaderValue,
  228. options,
  229. onFinish,
  230. submitDoSugar,
  231. doSugartData,
  232. doSugartType,
  233. checkData,
  234. pushToDaySugarList,
  235. showSugarPhoto,
  236. machineType
  237. };
  238. },
  239. components: { sHeader },
  240. };
  241. </script>
  242. <style lang="less" scoped>
  243. @import "../../common/style/common";
  244. </style>