|
@@ -0,0 +1,159 @@
|
|
|
+<template>
|
|
|
+ <xn-form-container
|
|
|
+ :title="formData.id ? '司机回签' : '司机回签'"
|
|
|
+ :width="700"
|
|
|
+ v-model:open="open"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ @close="onClose"
|
|
|
+ >
|
|
|
+ <a-form ref="formRef" :model="formData" :rules="formRules" :wrapper-col="wrapperCol" :label-col="labelCol">
|
|
|
+ <a-form-item label="卸货重量:" name="unloadWeight">
|
|
|
+ <a-input-number v-model:value="formData.unloadWeight" style="width:90%" :precision="2" :min="1" :max="999999" placeholder="请输入卸货重量" allow-clear /><span style="margin-left:10px;">吨</span>
|
|
|
+ </a-form-item>
|
|
|
+<!-- <a-form-item label="单据图片:" name="licensePlate">
|
|
|
+ <a-input v-model:value="formData.licensePlate" placeholder="请输入车牌号码" allow-clear />
|
|
|
+ </a-form-item>-->
|
|
|
+ <a-form-item label="上传图片:" name="filePathList" :rules="[{ required: true, message: '请上传图片' }]">
|
|
|
+ <a-upload
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ class="avatar-uploader"
|
|
|
+ list-type="picture"
|
|
|
+ :show-upload-list="true"
|
|
|
+ :custom-request="customRequest"
|
|
|
+ :remove="file => removeOtherFile(file,index)"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ accept="image/png, image/jpeg, image/jpg"
|
|
|
+
|
|
|
+ >
|
|
|
+ <a-button>
|
|
|
+ <upload-outlined></upload-outlined>
|
|
|
+ upload
|
|
|
+ </a-button>
|
|
|
+ </a-upload>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ <template #footer>
|
|
|
+ <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
|
|
|
+ <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
|
|
|
+ </template>
|
|
|
+ </xn-form-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="bizRecordForm">
|
|
|
+ import { cloneDeep } from 'lodash-es'
|
|
|
+ import { required } from '@/utils/formRules'
|
|
|
+ import bizRecordApi from '@/api/biz/bizRecordApi'
|
|
|
+ import fileApi from '@/api/dev/fileApi'
|
|
|
+ import sysConfig from "@/config";
|
|
|
+ import {message, Modal, Upload } from 'ant-design-vue';
|
|
|
+ // 抽屉状态
|
|
|
+ const open = ref(false)
|
|
|
+ const emit = defineEmits({ successful: null })
|
|
|
+ const formRef = ref()
|
|
|
+ // 表单数据
|
|
|
+ const formData = ref({filePathList:[],fileNameList:[]})
|
|
|
+ const submitLoading = ref(false)
|
|
|
+
|
|
|
+ //设置表单样式
|
|
|
+ const labelCol = ref({ span: 5})
|
|
|
+ const wrapperCol = ref({ span: 16})
|
|
|
+
|
|
|
+ const fileList = ref([])
|
|
|
+
|
|
|
+ // 打开抽屉
|
|
|
+ const onOpen = (record) => {
|
|
|
+ open.value = true
|
|
|
+ if (record) {
|
|
|
+ let recordData = cloneDeep(record)
|
|
|
+ formData.value = Object.assign({}, recordData)
|
|
|
+ formData.value.id = record.recordId
|
|
|
+ formData.value.filePathList = []
|
|
|
+ formData.value.fileNameList = []
|
|
|
+ fileList.value = []
|
|
|
+ if(formData.value.unloadImg!=null){
|
|
|
+ for (var i=0;i<formData.value.unloadImg.split(',').length;i++){
|
|
|
+ fileList.value.push({
|
|
|
+ name: formData.value.unloadName.split(',')[i],
|
|
|
+ url:sysConfig.PREVIEW_PATH + formData.value.unloadImg.split(',')[i]
|
|
|
+ })
|
|
|
+ formData.value.filePathList.push(formData.value.unloadImg.split(",")[i])
|
|
|
+ formData.value.fileNameList.push(formData.value.unloadName.split(",")[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 关闭抽屉
|
|
|
+ const onClose = () => {
|
|
|
+ formRef.value.resetFields()
|
|
|
+ formData.value = {}
|
|
|
+ formData.value.fileNameList = []
|
|
|
+ formData.value.filePathList = []
|
|
|
+ fileList.value = []
|
|
|
+ open.value = false
|
|
|
+ }
|
|
|
+ // 默认要校验的
|
|
|
+ const formRules = {
|
|
|
+ unloadWeight: [required('请输入卸货重量')],
|
|
|
+ }
|
|
|
+ // 验证并提交数据
|
|
|
+ const onSubmit = () => {
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ submitLoading.value = true
|
|
|
+ const formDataParam = cloneDeep(formData.value)
|
|
|
+ console.log("formData:"+formDataParam.filePahList)
|
|
|
+ bizRecordApi
|
|
|
+ .updateWeight(formDataParam)
|
|
|
+ .then(() => {
|
|
|
+ onClose()
|
|
|
+ emit('successful')
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ submitLoading.value = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ }
|
|
|
+
|
|
|
+ const customRequest = (data) => {
|
|
|
+ console.log("data:"+JSON.stringify(data.file.name))
|
|
|
+ //保存图片
|
|
|
+ const fileData = new FormData()
|
|
|
+ fileData.append('file', data.file)
|
|
|
+ fileApi
|
|
|
+ .uploadImgMap(fileData)
|
|
|
+ .then((result) => {
|
|
|
+ formData.value.filePathList.push(result.imageFile)
|
|
|
+ formData.value.fileNameList.push(data.file.name)
|
|
|
+ }).finally(()=>{
|
|
|
+ data.onSuccess()
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //文件删除
|
|
|
+ const removeOtherFile = (file) => {
|
|
|
+ fileList.value.forEach((item,index)=>{
|
|
|
+ console.log(item.name+"======="+file.name)
|
|
|
+ if(item.name === file.name){
|
|
|
+
|
|
|
+ fileList.value.splice(index, 1);
|
|
|
+ formData.value.filePathList.splice(index,1)
|
|
|
+ formData.value.fileNameList.splice(index,1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const beforeUpload = (file) => {
|
|
|
+ const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
|
+ if (!isJpgOrPng) {
|
|
|
+ message.error('请上传JPG/PNG格式的图片!')
|
|
|
+ }
|
|
|
+ return isJpgOrPng || Upload.LIST_IGNORE
|
|
|
+ }
|
|
|
+ // 抛出函数
|
|
|
+ defineExpose({
|
|
|
+ onOpen
|
|
|
+ })
|
|
|
+</script>
|