<template>
<a
-spin :spinning="confirm
Loading">
<JFormContainer :disabled="disabled">
<template #detail>
<a
-form ref="formRef" class="
antd
-modal
-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="MachineWeightForm">
<a
-row>
<a
-col :span="24">
<a
-form
-item label="设备编号" v
-bind="validateInfos.deviceSn" id="MachineWeightForm
-deviceSn" name="deviceSn">
<a
-input v
-model:value="formData.deviceSn" placeholder="设备编号" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="车次编码" v
-bind="validateInfos.carNumber" id="MachineWeightForm
-carNumber" name="carNumber">
<a
-input v
-model:value="formData.carNumber" placeholder="车次编码" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="车牌号" v
-bind="validateInfos.licensePlate" id="MachineWeightForm
-licensePlate" name="licensePlate">
<a
-input v
-model:value="formData.licensePlate" placeholder="车牌号" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="毛重（kg）" v
-bind="validateInfos.grossWeight" id="MachineWeightForm
-grossWeight" name="grossWeight">
<a
-input
-number v
-model:value="formData.grossWeight" placeholder="毛重（kg）" style="width: 100%" />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="皮重（kg）" v
-bind="validateInfos.tareWeight" id="MachineWeightForm
-tareWeight" name="tareWeight">
<a
-input
-number v
-model:value="formData.tareWeight" placeholder="皮重（kg）" style="width: 100%" />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="净重（kg）" v
-bind="validateInfos.netWeight" id="MachineWeightForm
-netWeight" name="netWeight">
<a
-input
-number v
-model:value="formData.netWeight" placeholder="净重（kg）" style="width: 100%" />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="单位名称" v
-bind="validateInfos.companyName" id="MachineWeightForm
-companyName" name="companyName">
<a
-input v
-model:value="formData.companyName" placeholder="车牌号" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="规格型号" v
-bind="validateInfos.goodsModel" id="MachineWeightForm
-goodsModel" name="goodsModel">
<a
-input v
-model:value="formData.goodsModel" placeholder="规格型号" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="商品名称" v
-bind="validateInfos.goodsName" id="MachineWeightForm
-goodsName" name="goodsName">
<a
-input v
-model:value="formData.goodsName" placeholder="商品名称" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="司机姓名" v
-bind="validateInfos.driverName" id="MachineWeightForm
-driverName" name="driverName">
<a
-input v
-model:value="formData.driverName" placeholder="司机姓名" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="司机电话" v
-bind="validateInfos.driverMobile" id="MachineWeightForm
-driverMobile" name="driverMobile">
<a
-input v
-model:value="formData.driverMobile" placeholder="司机电话" allow
-clear />
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item
label="第一次过磅
时间"
v
-bind="validateInfos.enterTime"
id="MachineWeightForm
-enterTime"
name="enterTime"
>
<a
-date
-picker
placeholder="第一次过磅
时间"
v
-model:value="formData.enterTime"
showTime
value
-format="YYYY
-MM
-DD HH:mm:ss"
style="width: 100%"
allow
-clear
/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第一次过磅车牌图片" v
-bind="validateInfos.enterPlateName" id="MachineWeightForm
-enterPlateName" name="enterPlateName">
<Base64ImagePreview v
-model:value="formData.enterPlateName"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第一次过磅车图片" v
-bind="validateInfos.enterLicenseName" id="MachineWeightForm
-enterLicenseName" name="enterLicenseName">
<Base64ImagePreview v
-model:value="formData.enterLicenseName"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第一次过磅车头相机抓拍图片" v
-bind="validateInfos.enterCaptureHead" id="MachineWeightForm
-enterCaptureHead" name="enterCaptureHead">
<Base64ImagePreview v
-model:value="formData.enterCaptureHead"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第一次过磅车尾相机抓拍图片" v
-bind="validateInfos.enterCaptureTrail" id="MachineWeightForm
-enterCaptureTrail" name="enterCaptureTrail">
<Base64ImagePreview v
-model:value="formData.enterCaptureTrail"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第一次过磅车仓相机抓拍图片" v
-bind="validateInfos.enterCaptureWare" id="MachineWeightForm
-enterCaptureWare" name="enterCaptureWare">
<Base64ImagePreview v
-model:value="formData.enterCaptureWare"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第一次过磅车身相机抓拍图片" v
-bind="validateInfos.enterCaptureBody" id="MachineWeightForm
-enterCaptureBody" name="enterCaptureBody">
<Base64ImagePreview v
-model:value="formData.enterCaptureBody"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第一次过磅磅房相机抓拍图片" v
-bind="validateInfos.enterCapturePoundRoom" id="MachineWeightForm
-enterCapturePoundRoom" name="enterCapturePoundRoom">
<Base64ImagePreview v
-model:value="formData.enterCapturePoundRoom"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item
label="第二次过磅
时间"
v
-bind="validateInfos.outTime"
id="MachineWeightForm
-outTime"
name="outTime"
>
<a
-date
-picker
placeholder="第二次过磅
时间"
v
-model:value="formData.outTime"
showTime
value
-format="YYYY
-MM
-DD HH:mm:ss"
style="width: 100%"
allow
-clear
/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第二次过磅车牌图片" v
-bind="validateInfos.outPlateName" id="MachineWeightForm
-outPlateName" name="outPlateName">
<Base64ImagePreview v
-model:value="formData.outPlateName"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第二次过磅车图片" v
-bind="validateInfos.outLicenseName" id="MachineWeightForm
-outLicenseName" name="outLicenseName">
<Base64ImagePreview v
-model:value="formData.outLicenseName"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第二次过磅车头相机抓拍图片" v
-bind="validateInfos.outCaptureHead" id="MachineWeightForm
-outCaptureHead" name="outCaptureHead">
<Base64ImagePreview v
-model:value="formData.outCaptureHead"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第二次过磅车尾相机抓拍图片" v
-bind="validateInfos.outCaptureTrail" id="MachineWeightForm
-outCaptureTrail" name="outCaptureTrail">
<Base64ImagePreview v
-model:value="formData.outCaptureTrail"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第二次过磅车仓相机抓拍图片" v
-bind="validateInfos.outCaptureWare" id="MachineWeightForm
-outCaptureWare" name="outCaptureWare">
<Base64ImagePreview v
-model:value="formData.outCaptureWare"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第二次过磅车身相机抓拍图片" v
-bind="validateInfos.outCaptureBody" id="MachineWeightForm
-outCaptureBody" name="outCaptureBody">
<Base64ImagePreview v
-model:value="formData.outCaptureBody"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="第二次过磅磅房相机抓拍图片" v
-bind="validateInfos.outCapturePoundRoom" id="MachineWeightForm
-outCapturePoundRoom" name="outCapturePoundRoom">
<Base64ImagePreview v
-model:value="formData.outCapturePoundRoom"/>
</a
-form
-item>
</a
-col>
<a
-col :span="24">
<a
-form
-item label="备注" v
-bind="validateInfos.remark" id="MachineWeightForm
-remark" name="remark">
<a
-textarea v
-model:value="formData.remark" :rows="4" placeholder="备注" />
</a
-form
-item>
</a
-col>
</a
-row>
</a
-form>
</template>
</JFormContainer>
</a
-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils';
import {queryById, saveOrUpdate} from '@/api/machine/MachineWeight.api';
import { Form } from '
ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import JDictSelectTag from '../../../../components/Form/src/jeecg/components/JDictSelectTag.vue';
import Base64ImagePreview from '@/components/Form/src/jeecg/components/Base64ImagePreview.vue';
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({}) },
formBpm: { type: Boolean, default: true },
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
deviceSn: '',
carNumber: '',
licensePlate: '',
plateColor: '',
grossWeight: undefined,
tareWeight: undefined,
netWeight: undefined,
companyName: '',
goodsModel: '',
goodsName: '',
driverName: '',
driverMobile: '',
enterTime: '',
enterPlateName: '',
enterLicenseName: '',
enterCaptureHead: '',
enterCaptureTrail: '',
enterCaptureWare: '',
enterCaptureBody: '',
enterCapturePoundRoom: '',
outTime: '',
outPlateName: '',
outLicenseName: '',
outCaptureHead: '',
outCaptureTrail: '',
outCaptureWare: '',
outCaptureBody: '',
outCapturePoundRoom: '',
remark: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 8 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 14 } });
const confirm
Loading = ref<boolean>(false);
//表单验证
const validatorRules = reactive({});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
// 表单禁用
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
/**
* 新增
*/
function add() {
edit({});
}
/**
* 编辑
*/
function edit(record) {
nextTick(() => {
resetFields();
let id = record.id
if (id){
queryById({id}).then(res => {
const tmpData = {};
Object.keys(formData).forEach((key) => {
if (res.hasOwnProperty(key)) {
tmpData[key] = res[key];
}
});
//赋值
Object.assign(formData, tmpData);
})
}
});
}
/**
* 提交
数据
*/
async function submitForm() {
try {
// 触发表单验证
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
confirm
Loading.value = true;
const isUpdate = ref<boolean>(false);
//
时间格式化
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//循环
数据
for (let data in model) {
//如果该
数据是数组并且是字符串类型
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//如果是字符串类型的需要变成以逗号分割的字符串
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirm
Loading.value = false;
});
}
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.
antd
-modal
-form {
padding: 14px;
}
</style>
<template>
<div class="clearfix">
<a
-upload
:listType="listType"
accept="image/*"
:fileList="
uploadFileList"
:disabled="disabled"
@preview="handlePreview"
>
</a
-upload>
<a
-modal :open="previewVisible" :footer="null" @cancel="handleCancel()">
<img alt="example" style="width: 100%" :src="previewImage" />
</a
-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, nextTick } from 'vue';
import {
LoadingOutlined,
UploadOutlined } from '@
ant-design/icons
-vue';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { propTypes } from '/@/utils/propTypes';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { useMessage } from '/@/hooks/web/useMessage';
import { getFileAccessHttpUrl, getHeaders, getRandom } from '/@/utils/common/compUtils';
const { createMessage, createErrorModal } = useMessage();
export default defineComponent({
name: 'Base64Image
Upload',
components: {
LoadingOutlined,
UploadOutlined },
inheritAttrs: false,
props: {
//绑定值
value: propTypes.oneOfType([propTypes.string, propTypes.array]),
//按钮文本
listType: {
type: String,
required: false,
default: 'picture
-card',
},
//是否禁用
disabled: {
type: Boolean,
required: false,
default: false,
},
},
emits: ['options
-change', 'change', 'update:value'],
setup(props, { emit, refs }) {
const emitData = ref<any[]>([]);
const attrs = useAttrs();
const [state] = useRuleFormItem(props, 'value', 'change', emitData);
//是否是初始化加载
const initTag = ref<boolean>(true);
//文件列表
let
uploadFileList = ref<any[]>([]);
//预览图
const previewImage = ref<string | undefined>('');
//预览框
状态
const previewVisible = ref<boolean>(false);
/**
* 监听value变化
*/
watch(
() => props.value,
(val) => {
if (initTag.value == true) {
initFileList(val);
}
},
{ immediate: true }
);
/**
* 初始化文件列表
*/
function initFileList(paths) {
if (!paths || paths.length == 0) {
uploadFileList.value = [];
return;
}
let files = [];
const isBase64 = paths.startsWith('data:image');
let fileObj = {
uid: getRandom(10),
name: 'base64
-image.png',
status: 'done',
url: isBase64 ? paths : `data:image/png;base64,${paths}`,
response: {
status: 'history',
message: paths ,
},
}
files.push(fileObj);
uploadFileList.value = files;
}
/**
* 预览图片
*/
function handlePreview(file) {
previewImage.value = file.url;
previewVisible.value = true;
}
function handleCancel() {
previewVisible.value = false;
}
return {
state,
attrs,
previewImage,
previewVisible,
uploadFileList,
handlePreview,
handleCancel,
};
},
});
</script>
<style scoped>
.
ant-upload-select
-picture
-card i {
font
-size: 32px;
color: #999;
}
.
ant-upload-select
-picture
-card .
ant-upload-text {
margin
-top: 8px;
color: #666;
}
</style>
需求，图片等待接口响应
时，显示转圈圈加载，等响应后再显示图片
在使用Vue的AntDesign组件时，发现a-card的loading属性为true会导致a-upload上传文件时无法获取服务器返回数据。去掉loading属性后，上传功能恢复正常。
扫一扫
4502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
