index.vue 5.1 KB

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