detail.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <div id="detail">
  3. <van-row>
  4. <van-col span="24" class="main animate__animated animate__backInRight">
  5. <van-col span="24" class="one">
  6. <van-form @submit="toSave" label-width="2em">
  7. <van-cell-group>
  8. <van-field
  9. v-model="form.title"
  10. name="title"
  11. type="textarea"
  12. rows="1"
  13. autosize
  14. label="标题"
  15. placeholder="请输入文件标题"
  16. :rules="[{ required: true, message: '请输入文件标题' }]"
  17. />
  18. <van-field name="file" label="文件">
  19. <template #input>
  20. <vUpload :file="form.file"></vUpload>
  21. </template>
  22. </van-field>
  23. <van-field name="files" label="文件2">
  24. <template #input>
  25. <vUpload :file="form.files"></vUpload>
  26. </template>
  27. </van-field>
  28. </van-cell-group>
  29. <div class="btn">
  30. <van-button type="primary" size="small" native-type="submit"> 提交保存 </van-button>
  31. </div>
  32. </van-form>
  33. </van-col>
  34. </van-col>
  35. </van-row>
  36. </div>
  37. </template>
  38. <script setup lang="ts">
  39. // 基础
  40. import type { Ref } from 'vue';
  41. // reactive, ref, onMounted
  42. import { onMounted, ref } from 'vue';
  43. import { useRoute } from 'vue-router';
  44. import { showToast } from 'vant';
  45. // 接口
  46. import { PolicyfileStore } from '@common/src/stores/basic/policyfile';
  47. import type { IQueryResult } from '@/util/types.util';
  48. const polAxios = PolicyfileStore();
  49. // 路由
  50. const route = useRoute();
  51. const id: Ref<any> = ref('');
  52. // 表单
  53. const form: Ref<any> = ref({ file: [], files: [] });
  54. // 请求
  55. onMounted(async () => {
  56. id.value = route.query.id;
  57. await search();
  58. });
  59. const search = async () => {
  60. if (id.value) {
  61. let res: IQueryResult = await polAxios.fetch(id.value);
  62. if (res.errcode == '0') {
  63. form.value = res.data;
  64. }
  65. }
  66. };
  67. // 保存
  68. const toSave = async (e) => {
  69. let res: IQueryResult;
  70. console.log(e);
  71. // if (id.value) res = await polAxios.update({ ...e, _id: id.value });
  72. // else res = await polAxios.create(e);
  73. // if (res.errcode == '0') {
  74. // showToast({ message: '信息删除成功', type: 'success', duration: 500 });
  75. // toBack();
  76. // } else {
  77. // showToast({ message: `${res.errmsg}`, type: 'fail', duration: 500 });
  78. // }
  79. };
  80. // 返回;
  81. const toBack = () => {
  82. window.history.go(-1);
  83. };
  84. </script>
  85. <style scoped lang="scss">
  86. .main {
  87. .one {
  88. .btn {
  89. text-align: center;
  90. margin: 10px 0;
  91. }
  92. }
  93. }
  94. </style>