976 lines
34 KiB
Vue
976 lines
34 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="data.dialogVisible"
|
|||
|
|
:title="data.isDetail ? '进仓详情' : (data.editId ? '编辑进仓记录' : '新增进仓记录')"
|
|||
|
|
:before-close="handleClose"
|
|||
|
|
width="900px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<el-form ref="formDataRef" :model="ruleForm" :rules="rules" label-width="120px" :disabled="data.isDetail">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="中转仓" prop="warehouseId">
|
|||
|
|
<el-select
|
|||
|
|
v-model="ruleForm.warehouseId"
|
|||
|
|
placeholder="请选择中转仓"
|
|||
|
|
clearable
|
|||
|
|
filterable
|
|||
|
|
style="width: 100%"
|
|||
|
|
@change="handleWarehouseChange"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in warehouseList"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="item.warehouseName"
|
|||
|
|
:value="item.id"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="运送清单" prop="deliveryId">
|
|||
|
|
<el-select
|
|||
|
|
v-model="ruleForm.deliveryId"
|
|||
|
|
placeholder="请选择运送清单"
|
|||
|
|
clearable
|
|||
|
|
filterable
|
|||
|
|
style="width: 100%"
|
|||
|
|
@change="handleDeliveryChange"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in deliveryList"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="`${item.deliveryNumber || '--'} - ${item.licensePlate || '--'}`"
|
|||
|
|
:value="item.id"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="订单" prop="orderId">
|
|||
|
|
<el-select
|
|||
|
|
v-model="ruleForm.orderId"
|
|||
|
|
placeholder="请选择订单（可多选）"
|
|||
|
|
multiple
|
|||
|
|
clearable
|
|||
|
|
filterable
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in orderList"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="`订单${item.id} - 单价: ${item.firmPrice || '--'}元/斤`"
|
|||
|
|
:value="item.id"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="进仓时间" prop="inTime">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="ruleForm.inTime"
|
|||
|
|
type="datetime"
|
|||
|
|
placeholder="请选择进仓时间"
|
|||
|
|
style="width: 100%"
|
|||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="来源地" prop="sourceLocation">
|
|||
|
|
<el-input
|
|||
|
|
v-model="ruleForm.sourceLocation"
|
|||
|
|
placeholder="请输入来源地"
|
|||
|
|
maxlength="255"
|
|||
|
|
style="width: calc(100% - 100px); margin-right: 10px;"
|
|||
|
|
/>
|
|||
|
|
<el-button type="primary" @click="openSourceLocationMap">选择位置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="来源地经度">
|
|||
|
|
<el-input v-model="ruleForm.sourceLon" placeholder="经度" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="来源地纬度">
|
|||
|
|
<el-input v-model="ruleForm.sourceLat" placeholder="纬度" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="牛只数量(头)" prop="cattleCount">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="ruleForm.cattleCount"
|
|||
|
|
:min="1"
|
|||
|
|
:max="9999"
|
|||
|
|
placeholder="请输入牛只数量"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="重量(公斤)" prop="weight">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="ruleForm.weight"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="2"
|
|||
|
|
placeholder="请输入重量"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<template #append>kg</template>
|
|||
|
|
</el-input-number>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="状态" prop="status">
|
|||
|
|
<el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 100%">
|
|||
|
|
<el-option label="待进仓" :value="1" />
|
|||
|
|
<el-option label="已进仓" :value="2" />
|
|||
|
|
<el-option label="已出仓" :value="3" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="照片">
|
|||
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|||
|
|
<!-- 拖拽上传区域 -->
|
|||
|
|
<el-upload
|
|||
|
|
drag
|
|||
|
|
action="#"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:before-upload="beforePhotoUpload"
|
|||
|
|
:limit="9"
|
|||
|
|
accept="image/*"
|
|||
|
|
:on-change="handlePhotoChange"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
|||
|
|
<div class="el-upload__text">将图片文件拖到此处，或<em>点击上传</em></div>
|
|||
|
|
<template #tip>
|
|||
|
|
<div class="el-upload__tip">支持 jpg/png/gif 格式，单个文件不超过 10MB，最多上传 9 张</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
<!-- 图片预览列表 -->
|
|||
|
|
<div v-if="photoFileList.length > 0" class="photo-preview-list">
|
|||
|
|
<div
|
|||
|
|
v-for="(file, index) in photoFileList"
|
|||
|
|
:key="index"
|
|||
|
|
class="photo-preview-item"
|
|||
|
|
>
|
|||
|
|
<el-image
|
|||
|
|
:src="file.url || file.response?.data?.url || ''"
|
|||
|
|
fit="cover"
|
|||
|
|
class="photo-preview-image"
|
|||
|
|
:preview-src-list="photoFileList.map(f => f.url || f.response?.data?.url || '').filter(Boolean)"
|
|||
|
|
:initial-index="index"
|
|||
|
|
/>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
:icon="Delete"
|
|||
|
|
circle
|
|||
|
|
size="small"
|
|||
|
|
class="photo-delete-btn"
|
|||
|
|
@click="handlePhotoRemove(file)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="视频">
|
|||
|
|
<el-upload
|
|||
|
|
drag
|
|||
|
|
action="#"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:on-change="handleVideoChange"
|
|||
|
|
:on-remove="handleVideoRemove"
|
|||
|
|
:before-upload="beforeVideoUpload"
|
|||
|
|
:limit="3"
|
|||
|
|
accept="video/*"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
|||
|
|
<div class="el-upload__text">将视频文件拖到此处，或<em>点击上传</em></div>
|
|||
|
|
<template #tip>
|
|||
|
|
<div class="el-upload__tip">支持 mp4/avi/rmvb/mkv 格式，单个文件不超过 100MB，最多上传 3 个</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
<!-- 视频预览列表 -->
|
|||
|
|
<div v-if="videoFileList.length > 0" class="video-preview-list">
|
|||
|
|
<div
|
|||
|
|
v-for="(file, index) in videoFileList"
|
|||
|
|
:key="index"
|
|||
|
|
class="video-preview-item"
|
|||
|
|
>
|
|||
|
|
<video
|
|||
|
|
:src="file.url || file.response?.data?.url || ''"
|
|||
|
|
controls
|
|||
|
|
class="video-preview-player"
|
|||
|
|
></video>
|
|||
|
|
<div class="video-name">{{ file.name || '视频' }}</div>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
:icon="Delete"
|
|||
|
|
circle
|
|||
|
|
size="small"
|
|||
|
|
class="video-delete-btn"
|
|||
|
|
@click="handleVideoRemove(file)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="备注">
|
|||
|
|
<el-input
|
|||
|
|
v-model="ruleForm.remark"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
placeholder="请输入备注"
|
|||
|
|
maxlength="500"
|
|||
|
|
show-word-limit
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<span class="dialog-footer">
|
|||
|
|
<el-button v-if="!data.isDetail" :loading="data.saveLoading" type="primary" @click="onClickSave">
|
|||
|
|
保存
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleClose">{{ data.isDetail ? '关闭' : '取消' }}</el-button>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 来源地地址选择地图 -->
|
|||
|
|
<el-dialog v-model="showSourceLocationMap" title="选择来源地地址" width="900px">
|
|||
|
|
<baidu-map
|
|||
|
|
class="map"
|
|||
|
|
:center="ruleForm.sourceLon && ruleForm.sourceLat ? {lng: parseFloat(ruleForm.sourceLon), lat: parseFloat(ruleForm.sourceLat)} : {lng: 116.404, lat: 39.915}"
|
|||
|
|
:zoom="15"
|
|||
|
|
:scroll-wheel-zoom="true"
|
|||
|
|
@click="handleSourceLocationClick"
|
|||
|
|
style="height: 500px"
|
|||
|
|
>
|
|||
|
|
<bm-marker
|
|||
|
|
v-if="ruleForm.sourceLon && ruleForm.sourceLat"
|
|||
|
|
:position="{lng: parseFloat(ruleForm.sourceLon), lat: parseFloat(ruleForm.sourceLat)}"
|
|||
|
|
:dragging="true"
|
|||
|
|
@dragging="handleSourceMarkerDrag"
|
|||
|
|
/>
|
|||
|
|
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
|
|||
|
|
</baidu-map>
|
|||
|
|
<template #footer>
|
|||
|
|
<span class="dialog-footer">
|
|||
|
|
<el-button @click="showSourceLocationMap = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="showSourceLocationMap = false">确定</el-button>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 图片预览 -->
|
|||
|
|
<el-dialog v-model="showImageViewer" title="图片预览" width="800px">
|
|||
|
|
<el-image :src="imageViewerUrl" style="width: 100%" fit="contain" />
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, watch } from 'vue';
|
|||
|
|
import { ElMessage } from 'element-plus';
|
|||
|
|
import { Plus, UploadFilled, Delete } from '@element-plus/icons-vue';
|
|||
|
|
import { BaiduMap, BmMapType, BmMarker } from 'vue-baidu-map-3x';
|
|||
|
|
import { warehouseInAdd, warehouseInEdit, warehouseInDetail } from '@/api/warehouseIn.js';
|
|||
|
|
import { warehouseAll } from '@/api/warehouse.js';
|
|||
|
|
import { orderPageQuery, shippingList } from '@/api/shipping.js';
|
|||
|
|
|
|||
|
|
const emits = defineEmits(['success']);
|
|||
|
|
const formDataRef = ref(null);
|
|||
|
|
const showSourceLocationMap = ref(false);
|
|||
|
|
const showImageViewer = ref(false);
|
|||
|
|
const imageViewerUrl = ref('');
|
|||
|
|
const photoFileList = ref([]);
|
|||
|
|
const videoFileList = ref([]);
|
|||
|
|
|
|||
|
|
const warehouseList = ref([]);
|
|||
|
|
const orderList = ref([]);
|
|||
|
|
const deliveryList = ref([]);
|
|||
|
|
|
|||
|
|
const data = reactive({
|
|||
|
|
dialogVisible: false,
|
|||
|
|
saveLoading: false,
|
|||
|
|
editId: null,
|
|||
|
|
isDetail: false,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const ruleForm = reactive({
|
|||
|
|
id: null,
|
|||
|
|
warehouseId: null,
|
|||
|
|
orderId: [],
|
|||
|
|
deliveryId: null,
|
|||
|
|
sourceLocation: '',
|
|||
|
|
sourceLon: '',
|
|||
|
|
sourceLat: '',
|
|||
|
|
cattleCount: null,
|
|||
|
|
weight: null,
|
|||
|
|
inTime: '',
|
|||
|
|
photos: '',
|
|||
|
|
videos: '',
|
|||
|
|
remark: '',
|
|||
|
|
status: 1,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const rules = reactive({
|
|||
|
|
warehouseId: [
|
|||
|
|
{ required: true, message: '请选择中转仓', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
deliveryId: [
|
|||
|
|
{ required: true, message: '请选择运送清单', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
cattleCount: [
|
|||
|
|
{ required: true, message: '请输入牛只数量', trigger: 'blur' },
|
|||
|
|
{ type: 'number', min: 1, message: '牛只数量必须大于0', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
inTime: [
|
|||
|
|
{ required: true, message: '请选择进仓时间', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 加载中转仓列表
|
|||
|
|
const loadWarehouseList = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await warehouseAll();
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
warehouseList.value = res.data || [];
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载中转仓列表失败', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 加载订单列表
|
|||
|
|
const loadOrderList = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await orderPageQuery({ pageNum: 1, pageSize: 1000 });
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const responseData = res.data || res;
|
|||
|
|
if (responseData && typeof responseData === 'object' && 'rows' in responseData) {
|
|||
|
|
orderList.value = responseData.rows || [];
|
|||
|
|
} else if (responseData && responseData.data && 'rows' in responseData.data) {
|
|||
|
|
orderList.value = responseData.data.rows || [];
|
|||
|
|
} else {
|
|||
|
|
orderList.value = [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载订单列表失败', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 加载运送清单列表
|
|||
|
|
const loadDeliveryList = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await shippingList({ pageNum: 1, pageSize: 1000 });
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const responseData = res.data || res;
|
|||
|
|
if (responseData && typeof responseData === 'object' && 'rows' in responseData) {
|
|||
|
|
deliveryList.value = responseData.rows || [];
|
|||
|
|
} else if (responseData && responseData.data && 'rows' in responseData.data) {
|
|||
|
|
deliveryList.value = responseData.data.rows || [];
|
|||
|
|
} else {
|
|||
|
|
deliveryList.value = [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载运送清单列表失败', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClose = () => {
|
|||
|
|
if (formDataRef.value) {
|
|||
|
|
formDataRef.value.resetFields();
|
|||
|
|
}
|
|||
|
|
Object.assign(ruleForm, {
|
|||
|
|
id: null,
|
|||
|
|
warehouseId: null,
|
|||
|
|
orderId: [],
|
|||
|
|
deliveryId: null,
|
|||
|
|
sourceLocation: '',
|
|||
|
|
sourceLon: '',
|
|||
|
|
sourceLat: '',
|
|||
|
|
cattleCount: null,
|
|||
|
|
weight: null,
|
|||
|
|
inTime: '',
|
|||
|
|
photos: '',
|
|||
|
|
videos: '',
|
|||
|
|
remark: '',
|
|||
|
|
status: 1,
|
|||
|
|
});
|
|||
|
|
photoFileList.value = [];
|
|||
|
|
videoFileList.value = [];
|
|||
|
|
data.editId = null;
|
|||
|
|
data.isDetail = false;
|
|||
|
|
data.dialogVisible = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onClickSave = () => {
|
|||
|
|
if (!formDataRef.value) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
formDataRef.value.validate((valid) => {
|
|||
|
|
if (!valid) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
data.saveLoading = true;
|
|||
|
|
|
|||
|
|
// 处理订单ID（多个订单用逗号分隔）
|
|||
|
|
const orderIdStr = ruleForm.orderId && ruleForm.orderId.length > 0
|
|||
|
|
? ruleForm.orderId.join(',')
|
|||
|
|
: null;
|
|||
|
|
|
|||
|
|
// 处理照片和视频URL（多个用逗号分隔）
|
|||
|
|
const photosStr = photoFileList.value.map(file => file.url || file.response?.data?.url || '').filter(url => url).join(',');
|
|||
|
|
const videosStr = videoFileList.value.map(file => file.url || file.response?.data?.url || '').filter(url => url).join(',');
|
|||
|
|
|
|||
|
|
const params = {
|
|||
|
|
warehouseId: ruleForm.warehouseId,
|
|||
|
|
orderId: orderIdStr,
|
|||
|
|
deliveryId: ruleForm.deliveryId,
|
|||
|
|
sourceLocation: ruleForm.sourceLocation,
|
|||
|
|
sourceLon: ruleForm.sourceLon,
|
|||
|
|
sourceLat: ruleForm.sourceLat,
|
|||
|
|
cattleCount: ruleForm.cattleCount,
|
|||
|
|
weight: ruleForm.weight,
|
|||
|
|
inTime: ruleForm.inTime,
|
|||
|
|
photos: photosStr,
|
|||
|
|
videos: videosStr,
|
|||
|
|
remark: ruleForm.remark,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (data.editId) {
|
|||
|
|
// 编辑
|
|||
|
|
params.id = data.editId;
|
|||
|
|
params.status = ruleForm.status;
|
|||
|
|
warehouseInEdit(params)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
ElMessage.success('编辑成功');
|
|||
|
|
handleClose();
|
|||
|
|
emits('success');
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(res.msg || '编辑失败');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
ElMessage.error('编辑失败：' + (error.message || '未知错误'));
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
data.saveLoading = false;
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 新增
|
|||
|
|
warehouseInAdd(params)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
ElMessage.success('新增成功');
|
|||
|
|
handleClose();
|
|||
|
|
emits('success');
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(res.msg || '新增失败');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
ElMessage.error('新增失败：' + (error.message || '未知错误'));
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
data.saveLoading = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onShowDialog = (row, isDetail = false) => {
|
|||
|
|
data.isDetail = isDetail || false;
|
|||
|
|
data.editId = null;
|
|||
|
|
|
|||
|
|
if (row) {
|
|||
|
|
data.editId = row.id;
|
|||
|
|
// 如果是详情模式，先获取详情数据
|
|||
|
|
if (isDetail) {
|
|||
|
|
warehouseInDetail(row.id)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code === 200 && res.data) {
|
|||
|
|
const detailData = res.data;
|
|||
|
|
Object.assign(ruleForm, {
|
|||
|
|
id: detailData.id,
|
|||
|
|
warehouseId: detailData.warehouseId,
|
|||
|
|
orderId: detailData.orderId ? detailData.orderId.split(',').map(id => parseInt(id)) : [],
|
|||
|
|
deliveryId: detailData.deliveryId,
|
|||
|
|
sourceLocation: detailData.sourceLocation || '',
|
|||
|
|
sourceLon: detailData.sourceLon || '',
|
|||
|
|
sourceLat: detailData.sourceLat || '',
|
|||
|
|
cattleCount: detailData.cattleCount,
|
|||
|
|
weight: detailData.weight,
|
|||
|
|
inTime: detailData.inTime || '',
|
|||
|
|
photos: detailData.photos || '',
|
|||
|
|
videos: detailData.videos || '',
|
|||
|
|
remark: detailData.remark || '',
|
|||
|
|
status: detailData.status !== undefined ? detailData.status : 1,
|
|||
|
|
});
|
|||
|
|
// 处理照片和视频文件列表
|
|||
|
|
if (detailData.photos) {
|
|||
|
|
photoFileList.value = detailData.photos.split(',').map(url => ({ url, name: 'photo' }));
|
|||
|
|
}
|
|||
|
|
if (detailData.videos) {
|
|||
|
|
videoFileList.value = detailData.videos.split(',').map(url => ({ url, name: 'video' }));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
ElMessage.error('获取详情失败：' + (error.message || '未知错误'));
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 编辑模式，直接使用传入的数据
|
|||
|
|
Object.assign(ruleForm, {
|
|||
|
|
id: row.id,
|
|||
|
|
warehouseId: row.warehouseId,
|
|||
|
|
orderId: row.orderId ? row.orderId.split(',').map(id => parseInt(id)) : [],
|
|||
|
|
deliveryId: row.deliveryId,
|
|||
|
|
sourceLocation: row.sourceLocation || '',
|
|||
|
|
sourceLon: row.sourceLon || '',
|
|||
|
|
sourceLat: row.sourceLat || '',
|
|||
|
|
cattleCount: row.cattleCount,
|
|||
|
|
weight: row.weight,
|
|||
|
|
inTime: row.inTime || '',
|
|||
|
|
photos: row.photos || '',
|
|||
|
|
videos: row.videos || '',
|
|||
|
|
remark: row.remark || '',
|
|||
|
|
status: row.status !== undefined ? row.status : 1,
|
|||
|
|
});
|
|||
|
|
// 处理照片和视频文件列表
|
|||
|
|
if (row.photos) {
|
|||
|
|
photoFileList.value = row.photos.split(',').map(url => ({ url, name: 'photo' }));
|
|||
|
|
}
|
|||
|
|
if (row.videos) {
|
|||
|
|
videoFileList.value = row.videos.split(',').map(url => ({ url, name: 'video' }));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 新增模式，重置表单
|
|||
|
|
Object.assign(ruleForm, {
|
|||
|
|
id: null,
|
|||
|
|
warehouseId: null,
|
|||
|
|
orderId: [],
|
|||
|
|
deliveryId: null,
|
|||
|
|
sourceLocation: '',
|
|||
|
|
sourceLon: '',
|
|||
|
|
sourceLat: '',
|
|||
|
|
cattleCount: null,
|
|||
|
|
weight: null,
|
|||
|
|
inTime: '',
|
|||
|
|
photos: '',
|
|||
|
|
videos: '',
|
|||
|
|
remark: '',
|
|||
|
|
status: 1,
|
|||
|
|
});
|
|||
|
|
photoFileList.value = [];
|
|||
|
|
videoFileList.value = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
data.dialogVisible = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 中转仓选择变化
|
|||
|
|
const handleWarehouseChange = (warehouseId) => {
|
|||
|
|
// 可以在这里添加逻辑
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 运送清单选择变化
|
|||
|
|
const handleDeliveryChange = (deliveryId) => {
|
|||
|
|
if (!deliveryId) {
|
|||
|
|
// 清空相关字段
|
|||
|
|
ruleForm.sourceLocation = '';
|
|||
|
|
ruleForm.sourceLon = '';
|
|||
|
|
ruleForm.sourceLat = '';
|
|||
|
|
ruleForm.cattleCount = null;
|
|||
|
|
ruleForm.weight = null;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从 deliveryList 中找到对应的运送清单
|
|||
|
|
const selectedDelivery = deliveryList.value.find(item => item.id === deliveryId);
|
|||
|
|
if (selectedDelivery) {
|
|||
|
|
// 自动填充来源地信息
|
|||
|
|
if (selectedDelivery.startLocation) {
|
|||
|
|
ruleForm.sourceLocation = selectedDelivery.startLocation;
|
|||
|
|
}
|
|||
|
|
if (selectedDelivery.startLon) {
|
|||
|
|
ruleForm.sourceLon = selectedDelivery.startLon;
|
|||
|
|
}
|
|||
|
|
if (selectedDelivery.startLat) {
|
|||
|
|
ruleForm.sourceLat = selectedDelivery.startLat;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自动填充牛只数量
|
|||
|
|
if (selectedDelivery.ratedQuantity) {
|
|||
|
|
ruleForm.cattleCount = selectedDelivery.ratedQuantity;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自动计算重量：entruckWeight - emptyWeight
|
|||
|
|
if (selectedDelivery.entruckWeight && selectedDelivery.emptyWeight) {
|
|||
|
|
const entruckWeight = parseFloat(selectedDelivery.entruckWeight) || 0;
|
|||
|
|
const emptyWeight = parseFloat(selectedDelivery.emptyWeight) || 0;
|
|||
|
|
const calculatedWeight = entruckWeight - emptyWeight;
|
|||
|
|
if (calculatedWeight > 0) {
|
|||
|
|
ruleForm.weight = parseFloat(calculatedWeight.toFixed(2));
|
|||
|
|
}
|
|||
|
|
} else if (selectedDelivery.entruckWeight) {
|
|||
|
|
// 如果只有装车重量，也可以填充
|
|||
|
|
ruleForm.weight = parseFloat(selectedDelivery.entruckWeight) || null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 打开来源地地图选择地址
|
|||
|
|
const openSourceLocationMap = () => {
|
|||
|
|
if (ruleForm.sourceLocation && ruleForm.sourceLocation.trim()) {
|
|||
|
|
showSourceLocationMap.value = true;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (window.BMap && window.BMap.Geocoder) {
|
|||
|
|
const geocoder = new window.BMap.Geocoder();
|
|||
|
|
geocoder.getPoint(ruleForm.sourceLocation, (point) => {
|
|||
|
|
if (point) {
|
|||
|
|
ruleForm.sourceLon = point.lng;
|
|||
|
|
ruleForm.sourceLat = point.lat;
|
|||
|
|
ElMessage.success('已定位到该地址');
|
|||
|
|
} else {
|
|||
|
|
ElMessage.warning('未找到该地址，请在地图上手动选择');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, 500);
|
|||
|
|
} else {
|
|||
|
|
showSourceLocationMap.value = true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 地图点击事件
|
|||
|
|
const handleSourceLocationClick = (e) => {
|
|||
|
|
ruleForm.sourceLon = e.point.lng;
|
|||
|
|
ruleForm.sourceLat = e.point.lat;
|
|||
|
|
if (window.BMap && window.BMap.Geocoder) {
|
|||
|
|
const geocoder = new window.BMap.Geocoder();
|
|||
|
|
geocoder.getLocation(e.point, (res) => {
|
|||
|
|
if (res) {
|
|||
|
|
ruleForm.sourceLocation = res.address;
|
|||
|
|
ElMessage.success('已设置来源地地址');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 标记拖拽事件
|
|||
|
|
const handleSourceMarkerDrag = (e) => {
|
|||
|
|
ruleForm.sourceLon = e.point.lng;
|
|||
|
|
ruleForm.sourceLat = e.point.lat;
|
|||
|
|
if (window.BMap && window.BMap.Geocoder) {
|
|||
|
|
const geocoder = new window.BMap.Geocoder();
|
|||
|
|
geocoder.getLocation(e.point, (res) => {
|
|||
|
|
if (res) {
|
|||
|
|
ruleForm.sourceLocation = res.address;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 图片预览（保留用于兼容）
|
|||
|
|
const handlePictureCardPreview = (file) => {
|
|||
|
|
imageViewerUrl.value = file.url || file.response?.data?.url || '';
|
|||
|
|
showImageViewer.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 照片文件变化处理（拖拽上传时触发）
|
|||
|
|
const handlePhotoChange = (file, fileList) => {
|
|||
|
|
// 验证文件
|
|||
|
|
if (!beforePhotoUpload(file)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 手动上传文件
|
|||
|
|
uploadPhotoFile(file);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 手动上传照片文件
|
|||
|
|
const uploadPhotoFile = async (file) => {
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', file.raw || file);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 获取 token
|
|||
|
|
let token = '';
|
|||
|
|
const userStore = localStorage.getItem('userStore');
|
|||
|
|
if (userStore) {
|
|||
|
|
const us = JSON.parse(userStore);
|
|||
|
|
token = us.token || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const response = await fetch('/api/common/upload', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': token,
|
|||
|
|
},
|
|||
|
|
body: formData,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
const photoUrl = result.data?.url || result.data;
|
|||
|
|
photoFileList.value.push({
|
|||
|
|
url: photoUrl,
|
|||
|
|
name: file.name,
|
|||
|
|
uid: file.uid || Date.now(),
|
|||
|
|
});
|
|||
|
|
ElMessage.success('照片上传成功');
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(result.msg || '照片上传失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('照片上传失败:', error);
|
|||
|
|
ElMessage.error('照片上传失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 删除照片
|
|||
|
|
const handlePhotoRemove = (file) => {
|
|||
|
|
const index = photoFileList.value.findIndex(item => item.uid === file.uid || item.url === file.url);
|
|||
|
|
if (index > -1) {
|
|||
|
|
photoFileList.value.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 视频文件变化处理（拖拽上传时触发）
|
|||
|
|
const handleVideoChange = (file, fileList) => {
|
|||
|
|
// 验证文件
|
|||
|
|
if (!beforeVideoUpload(file)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 手动上传文件
|
|||
|
|
uploadVideoFile(file);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 手动上传视频文件
|
|||
|
|
const uploadVideoFile = async (file) => {
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', file.raw || file);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 获取 token
|
|||
|
|
let token = '';
|
|||
|
|
const userStore = localStorage.getItem('userStore');
|
|||
|
|
if (userStore) {
|
|||
|
|
const us = JSON.parse(userStore);
|
|||
|
|
token = us.token || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const response = await fetch('/api/common/upload', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': token,
|
|||
|
|
},
|
|||
|
|
body: formData,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
const videoUrl = result.data?.url || result.data;
|
|||
|
|
videoFileList.value.push({
|
|||
|
|
url: videoUrl,
|
|||
|
|
name: file.name,
|
|||
|
|
uid: file.uid || Date.now(),
|
|||
|
|
});
|
|||
|
|
ElMessage.success('视频上传成功');
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(result.msg || '视频上传失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('视频上传失败:', error);
|
|||
|
|
ElMessage.error('视频上传失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 删除视频
|
|||
|
|
const handleVideoRemove = (file) => {
|
|||
|
|
const index = videoFileList.value.findIndex(item => item.uid === file.uid || item.url === file.url);
|
|||
|
|
if (index > -1) {
|
|||
|
|
videoFileList.value.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 上传前验证照片
|
|||
|
|
const beforePhotoUpload = (file) => {
|
|||
|
|
const isImage = file.type.startsWith('image/');
|
|||
|
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
|||
|
|
|
|||
|
|
if (!isImage) {
|
|||
|
|
ElMessage.error('只能上传图片文件!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!isLt10M) {
|
|||
|
|
ElMessage.error('图片大小不能超过 10MB!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查数量限制
|
|||
|
|
if (photoFileList.value.length >= 9) {
|
|||
|
|
ElMessage.error('最多只能上传 9 张照片!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true; // 允许继续处理
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 上传前验证视频
|
|||
|
|
const beforeVideoUpload = (file) => {
|
|||
|
|
const isVideo = file.type.startsWith('video/');
|
|||
|
|
const isLt100M = file.size / 1024 / 1024 < 100;
|
|||
|
|
|
|||
|
|
if (!isVideo) {
|
|||
|
|
ElMessage.error('只能上传视频文件!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!isLt100M) {
|
|||
|
|
ElMessage.error('视频大小不能超过 100MB!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查数量限制
|
|||
|
|
if (videoFileList.value.length >= 3) {
|
|||
|
|
ElMessage.error('最多只能上传 3 个视频!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true; // 允许继续处理
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 监听对话框打开，加载数据
|
|||
|
|
watch(() => data.dialogVisible, (newVal) => {
|
|||
|
|
if (newVal) {
|
|||
|
|
loadWarehouseList();
|
|||
|
|
loadOrderList();
|
|||
|
|
loadDeliveryList();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 暴露方法给父组件调用
|
|||
|
|
defineExpose({
|
|||
|
|
onShowDialog,
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.map {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 500px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 照片预览列表样式 */
|
|||
|
|
.photo-preview-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.photo-preview-item {
|
|||
|
|
position: relative;
|
|||
|
|
width: 120px;
|
|||
|
|
height: 120px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.photo-preview-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.photo-delete-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 5px;
|
|||
|
|
right: 5px;
|
|||
|
|
z-index: 10;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 视频预览列表样式 */
|
|||
|
|
.video-preview-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-preview-item {
|
|||
|
|
position: relative;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-preview-player {
|
|||
|
|
width: 100%;
|
|||
|
|
max-height: 300px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-name {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #606266;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-delete-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
right: 15px;
|
|||
|
|
z-index: 10;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|