123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <script>
- import {uploadFile} from "@/api/commitment";
- import {v4 as uuidv4} from "uuid";
- export default {
- props: {
- value: {
- type: Object,
- default: () => {
- }
- }
- },
- computed: {
- formStates: {
- get() {
- return this.value
- },
- set(value) {
- this.$emit('input', value)
- }
- }
- },
- data() {
- return {
- checkResultColumns: [
- {
- text: '整改',
- value: 1
- },
- {
- text: '整改扣分',
- value: 2
- },
- {
- text: '符合',
- value: 0
- }
- ],
- checkGoalColumns: [
- {
- text: '整改 0分',
- value: 0
- },
- {
- text: '整改扣分 -10分',
- value: -10
- },
- {
- text: '符合',
- value: 0
- }
- ],
- checkResultPopupVisible: false,
- checkScorePopupVisible: false,
- }
- },
- methods: {
- handleCheckResultConfirm(value) {
- this.formStates.auditResult = value.text
- this.checkResultPopupVisible = false
- //如果选择的不是符合,核查得分选择去掉符合
- //先清空核查得分
- this.formStates.auditScore = ''
- if (this.formStates.auditResult === '整改') {
- this.checkGoalColumns = [
- {
- text: '整改 0分',
- value: 0
- },
- ]
- this.formStates.auditScore = '整改 0分'
- } else if (this.formStates.auditResult === '整改扣分') {
- this.checkGoalColumns = [
- {
- text: '整改扣分 -10分',
- value: -10
- }
- ]
- this.formStates.auditScore = '整改扣分 -10分'
- } else {
- this.checkGoalColumns = [
- {
- text: '符合',
- value: 0
- }
- ]
- this.formStates.auditScore = '符合'
- }
- },
- handleCheckGoalConfirm(value) {
- this.formStates.auditScore = value.text
- this.checkScorePopupVisible = false
- },
- beforeUpload(file) {
- const isLt50M = file.size / 1024 / 1024 < 50;
- if (!isLt50M) {
- this.$toast('上传的图片大小不能超过 50MB!');
- return false;
- }
- return true;
- },
- afterRead(file) {
- uploadFile({
- uuid: uuidv4(),
- file: file
- }).then(res => {
- if (res.code === 0) {
- this.formStates.fileList.push({
- uuid: res.data,
- url: URL.createObjectURL(file.file)
- })
- }
- })
- },
- }
- }
- </script>
- <template>
- <view>
- <van-form v-if="formStates">
- <!--核查结果-->
- <van-field
- readonly
- clickable
- name="auditResult"
- :value="formStates.auditResult"
- label="核查结果"
- placeholder="请选择核查结果"
- @click="checkResultPopupVisible = true"
- />
- <van-popup v-model="checkResultPopupVisible" position="bottom">
- <van-picker
- show-toolbar
- value-key="text"
- :columns="checkResultColumns"
- @confirm="(value)=>handleCheckResultConfirm(value)"
- @cancel="checkResultPopupVisible = false"
- />
- </van-popup>
- <!--核查得分-->
- <van-field
- readonly
- clickable
- :disabled="!formStates.auditResult"
- name="auditScore"
- :value="formStates.auditScore"
- label="核查得分"
- placeholder="请选择核查得分"
- @click="checkScorePopupVisible = true"
- />
- <van-popup v-if="formStates.auditResult" v-model="checkScorePopupVisible" position="bottom">
- <van-picker
- show-toolbar
- value-key="text"
- :columns="checkGoalColumns"
- @confirm="(value)=>handleCheckGoalConfirm(value)"
- @cancel="checkScorePopupVisible = false"
- />
- </van-popup>
- <!--核查说明-->
- <van-field
- clickable
- name="auditRemark"
- v-model="formStates.auditRemark"
- label="核查说明"
- type="textarea"
- placeholder="请输入核查说明"
- />
- <!--附件上传-->
- <van-field label="文件上传">
- <template #input>
- <view class="upload-files">
- <view
- v-for="(item,index) in formStates.fileList"
- :key="index"
- >
- <img :src="item.url" style="width: 80px; height: 80px;"/>
- </view>
- <van-uploader v-if="!formStates.fileList || (formStates.fileList && formStates.fileList.length < 3)"
- :before-upload="beforeUpload"
- accept="image/*,pdf"
- :after-read="(file)=>afterRead(file)"
- >
- </van-uploader>
- </view>
- <view class="upload-description">
- <view>
- 支持png、jpg、pdf,最大50M
- </view>
- <view>
- 最多3个附件
- </view>
- </view>
- </template>
- </van-field>
- <slot name="footer"></slot>
- </van-form>
- </view>
- </template>
- <style scoped lang="scss">
- </style>
|