|
|
@@ -0,0 +1,146 @@
|
|
|
+<template>
|
|
|
+ <div class="common-form-container">
|
|
|
+ <van-form label-width="90" label-align="top" colon @submit="onSubmit">
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="form-header">
|
|
|
+ <div class="form-header-left">
|
|
|
+ <i class="line-icon" />
|
|
|
+ <div class="form-title">任务进度更新</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-form-content">
|
|
|
+ <div class="common-form-item">
|
|
|
+ <van-field
|
|
|
+ v-model="form.processing_status_text"
|
|
|
+ class="common-field"
|
|
|
+ :right-icon="selectIcon"
|
|
|
+ readonly
|
|
|
+ label="任务完成情况"
|
|
|
+ placeholder="请输入任务完成情况"
|
|
|
+ :rules="rules.processing_status"
|
|
|
+ @click="showPicker = true"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="form.feedback_content"
|
|
|
+ class="common-field common-textarea"
|
|
|
+ rows="8"
|
|
|
+ type="textarea"
|
|
|
+ label="反馈内容"
|
|
|
+ maxlength="300"
|
|
|
+ placeholder="请描述现场情况"
|
|
|
+ show-word-limit
|
|
|
+ :rules="rules.feedback_content"
|
|
|
+ />
|
|
|
+ <van-field label="文件上传" :error-message="uploaderErrors">
|
|
|
+ <template #input>
|
|
|
+ <FileUpload v-model="form.fileList" type="image" :file-size="5" :limit="12" :isShowTip="false" :fileType="['png', 'jpg', 'jpeg']" @change="handleFileListChange">
|
|
|
+ <template #upload-tip>
|
|
|
+ <div class="upload-tip">
|
|
|
+ <div>支持上传png、jpg、jpeg</div>
|
|
|
+ <div>文件不大于5M</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </FileUpload>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-form-footer">
|
|
|
+ <van-button class="btn" @click="onCancel">取消</van-button>
|
|
|
+ <van-button class="btn primary-btn" :loading="submitting" type="primary" native-type="submit">提交</van-button>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ :model-value="pickerValue"
|
|
|
+ :columns="options"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import {useRoute, useRouter} from "vue-router";
|
|
|
+import {reactive, ref} from "vue";
|
|
|
+import {showSuccessToast} from "vant";
|
|
|
+import selectIcon from "@/assets/images/selectIcon.png";
|
|
|
+import {Numeric} from "vant/es/utils";
|
|
|
+import FileUpload from "@/components/FileUpload/index.vue";
|
|
|
+import {validateFile} from "@/utils/validate";
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+const router = useRouter();
|
|
|
+let id = ref('');
|
|
|
+// 表单数据
|
|
|
+const form = ref({
|
|
|
+ processing_status: '',
|
|
|
+ processing_status_text: '',
|
|
|
+ feedback_content: '',
|
|
|
+ fileList: []
|
|
|
+});
|
|
|
+const pickerValue = ref<Numeric[]>([]);
|
|
|
+let uploaderErrors = ref('');
|
|
|
+// 表单校验规则
|
|
|
+const rules = reactive({
|
|
|
+ processing_status: [{ required: true, message: '请选择任务完成情况' }],
|
|
|
+ feedback_content: [{ required: true, message: '反馈内容不能为空' }],
|
|
|
+ fileList: [{ validator: validateFile, message: '请上传文件' }]
|
|
|
+});
|
|
|
+let showPicker = ref(false);
|
|
|
+
|
|
|
+const options = [
|
|
|
+ { text: '处理中', value: '处理中' },
|
|
|
+ { text: '已完成', value: '已完成' },
|
|
|
+];
|
|
|
+// 选择任务完成情况
|
|
|
+const onConfirm = ({ selectedValues, selectedOptions }) => {
|
|
|
+ showPicker.value = false;
|
|
|
+ pickerValue.value = selectedValues;
|
|
|
+ form.value.processing_status = selectedOptions[0].value;
|
|
|
+ form.value.processing_status_text = selectedOptions[0].text;
|
|
|
+};
|
|
|
+// 是否在提交
|
|
|
+let submitting = ref(false);
|
|
|
+// 文件上传回调
|
|
|
+const handleFileListChange = () => {
|
|
|
+ let flag = true;
|
|
|
+ if (form.value.fileList && form.value.fileList.length === 0) {
|
|
|
+ uploaderErrors.value = '请上传文件';
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ uploaderErrors.value = '';
|
|
|
+ return flag;
|
|
|
+};
|
|
|
+// 返回
|
|
|
+const onCancel = () => {
|
|
|
+ router.go(-1);
|
|
|
+};
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const onSubmit = () => {
|
|
|
+ if (submitting.value) return;
|
|
|
+ let flag = handleFileListChange();
|
|
|
+ if (!flag) return;
|
|
|
+ uploaderErrors.value = '';
|
|
|
+ submitting.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ submitting.value = false;
|
|
|
+ showSuccessToast('提交成功');
|
|
|
+ onCancel();
|
|
|
+ }, 1500);
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ id.value = route.query.id;
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.upload-tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0, 0, 0, 0.45);
|
|
|
+}
|
|
|
+</style>
|
