index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <template>
  2. <!-- 生产部录入信息Factory information -->
  3. <div class="fife" style="background-color:#ebedf0">
  4. <s-header :name="'设备出厂信息录入'" :noback="false"></s-header>
  5. <br>
  6. <van-form @submit="onSubmit">
  7. <van-cell-group inset>
  8. <van-field v-model="name" name="姓名" label="姓名" placeholder="姓名"
  9. :rules="[{ required: true, message: '请填写真实姓名' }]" />
  10. <van-field v-model="phone" name="电话" label="电话" placeholder="手机号码"
  11. :rules="[{ required: true, message: '请填写联系电话' }]" />
  12. <van-field v-model="username" name="账号名称" label="账号名称" placeholder="登录账号名称"
  13. :rules="[{ required: true, message: '请填写账号名' }]" />
  14. <van-field v-model="clientId" name="设备唯一码" label="设备唯一码" placeholder="设备唯一码" readonly
  15. :rules="[{ required: true, message: '设备唯一码不能为空' }]" />
  16. <van-field v-model="country" is-link readonly name="发往国家" label="发往国家" placeholder="发往国家"
  17. :rules="[{ required: true, message: '请填写发往国家' }]" @click="showPicker = true" />
  18. <van-popup v-model:show="showPicker" round position="bottom">
  19. <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
  20. </van-popup>
  21. <van-field v-model="location" name="地区名称" label="地区名称" placeholder="省市/地区名称" />
  22. <!-- <van-field v-model="location" name="地区名称" label="地区名称" placeholder="省市/地区名称" :required="isRequired"
  23. :rules="[{ required: isRequired, message: '国内必须精确到省市' }]" /> -->
  24. </van-cell-group>
  25. <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
  26. <van-button round class="custom-button" type="primary" size="small" native-type="submit" block>
  27. 提交
  28. </van-button>
  29. </div>
  30. </van-form>
  31. </div>
  32. </template>
  33. <script>
  34. import sHeader from "@/components/SimpleHeader";
  35. import { inputLocInfo } from "../../service/fife/index";
  36. import { ref, onMounted } from "vue";
  37. import { showFailToast, showToast } from "vant";
  38. // import { computed } from "vue";
  39. export default {
  40. components: { sHeader },
  41. setup: function () {
  42. const phone = ref('');
  43. const name = ref('');
  44. const username = ref('');
  45. const country = ref('');
  46. const location = ref('');
  47. const clientId = ref('');
  48. const showPicker = ref(false);
  49. const columns = [
  50. // { text: '中国', value: '中国' },
  51. { text: '英国', value: '英国' },
  52. { text: '美国', value: '美国' },
  53. { text: '加拿大', value: '加拿大' },
  54. { text: '澳大利亚', value: '澳大利亚' },
  55. { text: '德国', value: '德国' },
  56. { text: '奥地利', value: '奥地利' },
  57. { text: '瑞士', value: '瑞士' },
  58. { text: '俄罗斯', value: '俄罗斯' },
  59. { text: '白俄罗斯', value: '白俄罗斯' },
  60. { text: '乌克兰', value: '乌克兰' },
  61. { text: '日本', value: '日本' },
  62. { text: '西班牙', value: '西班牙' },
  63. { text: '墨西哥', value: '墨西哥' },
  64. { text: '阿根廷', value: '阿根廷' },
  65. { text: '法国', value: '法国' },
  66. { text: '比利时', value: '比利时' },
  67. { text: '保加利亚', value: '保加利亚' },
  68. { text: '丹麦', value: '丹麦' },
  69. { text: '芬兰', value: '芬兰' },
  70. { text: '荷兰', value: '荷兰' },
  71. { text: '比利时', value: '比利时' },
  72. { text: '捷克', value: '捷克' },
  73. { text: '罗马尼亚', value: '罗马尼亚' },
  74. { text: '挪威', value: '挪威' },
  75. { text: '葡萄牙', value: '葡萄牙' },
  76. { text: '巴西', value: '巴西' },
  77. { text: '瑞典', value: '瑞典' },
  78. { text: '斯洛伐克', value: '斯洛伐克' },
  79. { text: '匈牙利', value: '匈牙利' },
  80. { text: '意大利', value: '意大利' },
  81. { text: '韩国', value: '韩国' },
  82. { text: '波兰', value: '波兰' },
  83. { text: '乌克兰', value: '乌克兰' },
  84. { text: '亚美尼亚', value: '亚美尼亚' },
  85. { text: '阿拉伯', value: '阿拉伯' },
  86. { text: '泰国', value: '泰国' },
  87. { text: '以色列', value: '以色列' },
  88. { text: '格鲁吉亚', value: '格鲁吉亚' },
  89. { text: '土耳其', value: '土耳其' },
  90. { text: '拉脱维亚', value: '拉脱维亚' },
  91. { text: '爱沙尼亚', value: '爱沙尼亚' },
  92. { text: '蒙古国', value: '蒙古国' },
  93. { text: '伊朗', value: '伊朗' },
  94. ];
  95. const onConfirm = ({ selectedOptions }) => {
  96. if (selectedOptions[0] != null) {
  97. showPicker.value = false;
  98. country.value = selectedOptions[0].text;
  99. }
  100. }
  101. const getClientId = () => {
  102. // const urlParams = new URLSearchParams(window.location.hash);
  103. const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
  104. clientId.value = urlParams.get('clientId');
  105. }
  106. onMounted(() => {
  107. getClientId();
  108. })
  109. const locationCheck = ref({});
  110. const onSubmit = async () => {
  111. // 提交表单
  112. const locationCheck = {
  113. name: name.value,
  114. phone: phone.value,
  115. username: username.value,
  116. clientId: clientId.value,
  117. country: country.value,
  118. location: location.value
  119. }
  120. // console.log("username >>> ", username.value);
  121. // console.log("locationCheck >>> ", locationCheck);
  122. const { data } = await inputLocInfo(locationCheck);
  123. if (data.code === "00000") {
  124. // 成功
  125. // ElMessage.success("保存成功");
  126. // console.log("data.data 》》》》" , data.data);
  127. showToast(data.data);
  128. } else {
  129. // console.log("data.message 》》》》" , data.message);
  130. showFailToast(data.message);
  131. }
  132. }
  133. // const isRequired = computed(() => {
  134. // return country.value === '中国';
  135. // });
  136. return {
  137. onSubmit,
  138. clientId,
  139. locationCheck,
  140. onConfirm,
  141. columns,
  142. showPicker,
  143. country,
  144. name,
  145. location,
  146. username,
  147. phone,
  148. // isRequired
  149. };
  150. }
  151. }
  152. </script>
  153. <style>
  154. .custom-button {
  155. width: 120px;
  156. }
  157. </style>