add.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <template>
  2. <div class="addIdx">
  3. <s-header :name="titleName" :noback="false"></s-header>
  4. <van-form show-error-message @submit="onSubmit">
  5. <div class="cust_vantBorder">
  6. <div class="kBordBott">
  7. <van-field type="number" colon :border="false" required v-model="cofficentForm.version" clearable name="version"
  8. :label="$t('apkManage.add.version')" :placeholder="$t('apkManage.add.versionPlace')" :rules="[
  9. {
  10. required: true,
  11. message: $t('apkManage.add.versionPlace'),
  12. },
  13. ]" />
  14. </div>
  15. <div class="kBordBott">
  16. <van-field colon :border="false" required v-model="cofficentForm.versionName" clearable name="versionName"
  17. :label="$t('apkManage.add.versionName')" :placeholder="$t('apkManage.add.versionNamePlace')" :rules="[
  18. {
  19. required: true,
  20. message: $t('apkManage.add.versionNamePlace'),
  21. },
  22. ]" />
  23. </div>
  24. <div class="kBordBott">
  25. <van-field colon :border="false" required @click-input="busiInpClk" readonly clearable
  26. v-model="cofficentForm.modelName" name="modelName" :label="$t('apkManage.add.model')"
  27. :placeholder="$t('apkManage.add.modelPlace')" :rules="[
  28. {
  29. required: true,
  30. message: $t('apkManage.add.modelPlace'),
  31. trigger: ['onChange', 'onSubmit'],
  32. },
  33. ]">
  34. <template #right-icon>
  35. <div class="l-flex-RC">
  36. <van-icon v-if="cofficentForm.modelName" @click="
  37. cofficentForm.modelName = '';
  38. cofficentForm.model = '';
  39. " class="o-mr-6" name="clear" />
  40. <van-icon @click="busiInpClk" name="arrow-down" />
  41. </div>
  42. </template>
  43. </van-field>
  44. </div>
  45. </div>
  46. <div class="kBordBott">
  47. <van-field colon :border="false" required clearable name="isForce" :label="$t('apkManage.add.forceUpdate')"
  48. :placeholder="$t('apkManage.add.forceUpdatePlace')" :rules="[
  49. {
  50. required: true,
  51. message: $t('apkManage.add.forceUpdatePlace'),
  52. trigger: ['onChange', 'onSubmit'],
  53. },
  54. ]">
  55. <template #input>
  56. <van-radio-group v-model="cofficentForm.isForce" direction="horizontal">
  57. <van-radio name="true">{{ $t('apkManage.add.yes') }}</van-radio>
  58. <van-radio name="false">{{ $t('apkManage.add.no') }}</van-radio>
  59. </van-radio-group>
  60. </template>
  61. </van-field>
  62. </div>
  63. <div class="cust_vantBorder">
  64. <div class="kBordBott">
  65. <van-field type="number" colon :border="false" required v-model="cofficentForm.apkSize" clearable name="apkSize"
  66. :label="$t('apkManage.add.apkSize')" :placeholder="$t('apkManage.add.apkSizePlace')" :rules="[
  67. {
  68. required: true,
  69. message: $t('apkManage.add.apkSizePlace'),
  70. },
  71. ]" />
  72. </div>
  73. <div class="kBordBott">
  74. <van-field colon :border="false" required v-model="cofficentForm.downloadUrl" clearable name="downloadUrl"
  75. :label="$t('apkManage.add.downloadLink')" :placeholder="$t('apkManage.add.downloadLinkPlace')" :rules="[
  76. {
  77. required: true,
  78. message: $t('apkManage.add.downloadLinkPlace'),
  79. },
  80. ]" />
  81. </div>
  82. <div class="kBordBott">
  83. <van-field colon :border="false" required v-model="cofficentForm.versionInfo" clearable name="versionInfo"
  84. :label="$t('apkManage.add.versionIntroduction')" :placeholder="$t('apkManage.add.versionIntroductionPlace')"
  85. :rules="[
  86. {
  87. required: true,
  88. message: $t('apkManage.add.versionIntroductionPlace'),
  89. },
  90. ]" />
  91. </div>
  92. </div>
  93. <div style="margin: 16px">
  94. <van-button round block type="primary" native-type="submit">
  95. {{ titleName }}
  96. </van-button>
  97. </div>
  98. </van-form>
  99. <!-- 型号选择框 -->
  100. <van-popup v-model:show="busiPopShow" position="bottom">
  101. <van-picker v-model="busiDefaIdx" :title="$t('apkManage.add.version')" :columns="busiPopList"
  102. :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
  103. </van-popup>
  104. </div>
  105. </template>
  106. <script>
  107. // 导入接口
  108. // 导入接口
  109. import { Api_postAddApk, Api_postUpdateApk } from "@/service/apkManage";
  110. import sHeader from "@/components/SimpleHeader";
  111. import { reactive, onMounted, ref } from "vue";
  112. import { showToast } from "vant";
  113. import { useRoute, useRouter } from "vue-router";
  114. import { useI18n } from "vue-i18n";
  115. import { styleUrl } from "../../common/js/utils";
  116. export default {
  117. components: { sHeader },
  118. setup() {
  119. const { t } = useI18n();
  120. const titleName = ref(t("apkManage.add.addTitle"));
  121. const route = useRoute();
  122. onMounted(() => {
  123. // 加载样式
  124. styleUrl('apkManage');
  125. const row = route.query.row ? JSON.parse(route.query.row) : {};
  126. // 看路径有没有id,有就是编辑
  127. if (row.id) {
  128. titleName.value = t("apkManage.add.editTitle");
  129. cofficentForm.value = row;
  130. // 转换成字符串
  131. cofficentForm.value.isForce = cofficentForm.value.isForce + '';
  132. cofficentForm.value.modelName = row.model;
  133. busiDefaIdx.value = [row.model];
  134. }
  135. });
  136. // 表单参数
  137. let cofficentForm = ref({
  138. apkSize: "",
  139. downloadUrl: "",
  140. isForce: "",
  141. version: "",
  142. versionInfo: "",
  143. versionName: "",
  144. model: "",
  145. modelName: "",
  146. });
  147. // 路由
  148. const router = useRouter();
  149. // 点击提交
  150. const onSubmit = async () => {
  151. // 如果是编辑
  152. let res;
  153. if (cofficentForm.value.id) {
  154. res = await Api_postUpdateApk(cofficentForm.value);
  155. } else {
  156. res = await Api_postAddApk(cofficentForm.value);
  157. }
  158. const { data } = res;
  159. if (data.code === "00000") {
  160. showToast(data.message);
  161. setTimeout(() => {
  162. router.back();
  163. }, 500);
  164. }
  165. };
  166. // 型号选择框框
  167. const busiDefaIdx = ref(["301ch"]);
  168. const busiPopShow = ref(false);
  169. const busiPopList = reactive([
  170. {
  171. name: "301ch",
  172. id: "301ch",
  173. },
  174. {
  175. name: "301en",
  176. id: "301en",
  177. },
  178. {
  179. name: "301enOffline",
  180. id: "301enOffline",
  181. },
  182. {
  183. name: "320ch",
  184. id: "320ch",
  185. },
  186. {
  187. name: "320en",
  188. id: "320en",
  189. },
  190. {
  191. name: "320enOffline",
  192. id: "320enOffline",
  193. },
  194. {
  195. name: "280ch",
  196. id: "280ch",
  197. },
  198. {
  199. name: "280en",
  200. id: "280en",
  201. },
  202. {
  203. name: "P10ch",
  204. id: "P10ch",
  205. },
  206. {
  207. name: "P10en",
  208. id: "P10en",
  209. },
  210. {
  211. name: "P20ch",
  212. id: "P20ch",
  213. },
  214. {
  215. name: "P20en",
  216. id: "P20en",
  217. },
  218. {
  219. name: "P30ch",
  220. id: "P30ch",
  221. },
  222. {
  223. name: "P30en",
  224. id: "P30en",
  225. },
  226. {
  227. name: "SI320ch",
  228. id: "SI320ch",
  229. },
  230. {
  231. name: "SI320en",
  232. id: "SI320en",
  233. },
  234. {
  235. name: "SBC320ch",
  236. id: "SBC320ch",
  237. },
  238. {
  239. name: "SBC320en",
  240. id: "SBC320en",
  241. },
  242. {
  243. name: "lua",
  244. id: "lua",
  245. },
  246. ]);
  247. const busiPopFieldName = reactive({
  248. text: "name",
  249. value: "id",
  250. });
  251. // 点击型号
  252. const busiInpClk = () => {
  253. busiPopShow.value = true;
  254. };
  255. const busiPopConfirm = ({ selectedOptions }) => {
  256. cofficentForm.value.model = selectedOptions[0].id;
  257. cofficentForm.value.modelName = selectedOptions[0].name;
  258. busiPopShow.value = false;
  259. };
  260. return {
  261. onSubmit,
  262. cofficentForm,
  263. titleName,
  264. busiPopShow,
  265. busiPopList,
  266. busiPopFieldName,
  267. busiInpClk,
  268. busiPopConfirm,
  269. busiDefaIdx
  270. };
  271. },
  272. };
  273. </script>
  274. <style lang="less" scoped></style>