index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <script>
  2. import {uploadFile} from "@/api/commitment";
  3. import {v4 as uuidv4} from "uuid";
  4. export default {
  5. props:{
  6. value:{
  7. type: Object,
  8. default: ()=>{}
  9. }
  10. },
  11. computed:{
  12. formStates:{
  13. get(){
  14. return this.value
  15. },
  16. set(value){
  17. this.$emit('input', value)
  18. }
  19. }
  20. },
  21. data(){
  22. return {
  23. checkResultColumns: [
  24. {
  25. text: '整改',
  26. value: 1
  27. },
  28. {
  29. text: '整改扣分',
  30. value: 2
  31. },
  32. {
  33. text: '符合',
  34. value: 0
  35. }
  36. ],
  37. checkGoalColumns: [
  38. {
  39. text: '整改 0分',
  40. value: 0
  41. },
  42. {
  43. text: '整改扣分 -10分',
  44. value: -10
  45. },
  46. {
  47. text: '符合',
  48. value: 0
  49. }
  50. ],
  51. checkResultPopupVisible: false,
  52. checkScorePopupVisible: false,
  53. }
  54. },
  55. methods:{
  56. handleCheckResultConfirm(value) {
  57. this.formStates.auditResult = value.text
  58. this.checkResultPopupVisible = false
  59. },
  60. handleCheckGoalConfirm(value) {
  61. this.formStates.auditScore = value.text
  62. this.checkScorePopupVisible = false
  63. },
  64. beforeUpload(file) {
  65. const isLt50M = file.size / 1024 / 1024 < 50;
  66. if (!isLt50M) {
  67. this.$toast('上传的图片大小不能超过 50MB!');
  68. return false;
  69. }
  70. return true;
  71. },
  72. afterRead(file) {
  73. uploadFile({
  74. uuid: uuidv4(),
  75. file: file
  76. }).then(res => {
  77. if (res.code === 0) {
  78. this.formStates.fileList.push({
  79. uuid: res.data,
  80. url: URL.createObjectURL(file.file)
  81. })
  82. }
  83. })
  84. },
  85. }
  86. }
  87. </script>
  88. <template>
  89. <view>
  90. <van-form v-if="formStates">
  91. <!--核查结果-->
  92. <van-field
  93. readonly
  94. clickable
  95. name="auditResult"
  96. :value="formStates.auditResult"
  97. label="核查结果"
  98. placeholder="请选择核查结果"
  99. @click="checkResultPopupVisible = true"
  100. />
  101. <van-popup v-model="checkResultPopupVisible" position="bottom">
  102. <van-picker
  103. show-toolbar
  104. value-key="text"
  105. :columns="checkResultColumns"
  106. @confirm="(value)=>handleCheckResultConfirm(value)"
  107. @cancel="checkResultPopupVisible = false"
  108. />
  109. </van-popup>
  110. <!--核查得分-->
  111. <van-field
  112. readonly
  113. clickable
  114. name="auditScore"
  115. :value="formStates.auditScore"
  116. label="核查得分"
  117. placeholder="请选择核查得分"
  118. @click="checkScorePopupVisible = true"
  119. />
  120. <van-popup v-model="checkScorePopupVisible" position="bottom">
  121. <van-picker
  122. show-toolbar
  123. value-key="text"
  124. :columns="checkGoalColumns"
  125. @confirm="(value)=>handleCheckGoalConfirm(value)"
  126. @cancel="checkScorePopupVisible = false"
  127. />
  128. </van-popup>
  129. <!--核查说明-->
  130. <van-field
  131. clickable
  132. name="auditRemark"
  133. v-model="formStates.auditRemark"
  134. label="核查说明"
  135. type="textarea"
  136. placeholder="请输入核查说明"
  137. />
  138. <!--附件上传-->
  139. <van-field label="文件上传">
  140. <template #input>
  141. <view class="upload-files">
  142. <view
  143. v-for="(item,index) in formStates.fileList"
  144. :key="index"
  145. >
  146. <img :src="item.url" style="width: 80px; height: 80px;"/>
  147. </view>
  148. <van-uploader v-if="!formStates.fileList || (formStates.fileList && formStates.fileList.length < 3)"
  149. :before-upload="beforeUpload"
  150. accept="image/*,pdf"
  151. :after-read="(file)=>afterRead(file)"
  152. >
  153. </van-uploader>
  154. </view>
  155. <view class="upload-description">
  156. <view>
  157. 支持png、jpg、pdf,最大50M
  158. </view>
  159. <view>
  160. 最多3个附件
  161. </view>
  162. </view>
  163. </template>
  164. </van-field>
  165. <slot name="footer"></slot>
  166. </van-form>
  167. </view>
  168. </template>
  169. <style scoped lang="scss">
  170. </style>