<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm" :inline="true">
|
<el-form-item label="销售订单号：">
|
<el-input v-model="searchForm.salesContractNo" placeholder="请输入" clearable prefix-icon="Search"
|
style="width: 200px"
|
@change="handleQuery"/>
|
</el-form-item>
|
<el-form-item label="车牌号：">
|
<el-input v-model="searchForm.shippingCarNumber" placeholder="请输入" clearable prefix-icon="Search"
|
style="width: 200px"
|
@change="handleQuery"/>
|
</el-form-item>
|
<el-form-item label="快递单号：">
|
<el-input v-model="searchForm.expressNumber" placeholder="请输入" clearable prefix-icon="Search"
|
style="width: 200px"
|
@change="handleQuery"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery"> 搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_list">
|
<div class="actions">
|
<div></div>
|
<div>
|
<el-button @click="handleOut">导出</el-button>
|
<el-button type="danger" plain @click="handleDelete">删除</el-button>
|
</div>
|
</div>
|
<el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange"
|
:row-key="(row) => row.id" style="width: 100%" height="calc(100vh - 21.5em)">
|
<el-table-column align="center" type="selection" width="55"/>
|
<el-table-column align="center" label="序号" type="index" width="60"/>
|
<el-table-column label="销售订单" prop="salesContractNo" show-overflow-tooltip/>
|
<el-table-column label="发货订单号" prop="shippingNo" show-overflow-tooltip/>
|
<el-table-column label="客户名称" prop="customerName" show-overflow-tooltip/>
|
<el-table-column label="产品名称" prop="productName" show-overflow-tooltip/>
|
<el-table-column label="规格型号" prop="specificationModel" show-overflow-tooltip/>
|
<el-table-column label="发货时间" prop="shippingDate" show-overflow-tooltip/>
|
<el-table-column label="发货车牌号" prop="shippingCarNumber" show-overflow-tooltip/>
|
<el-table-column label="快递公司" prop="expressCompany" show-overflow-tooltip/>
|
<el-table-column label="快递单号" prop="expressNumber" show-overflow-tooltip/>
|
<el-table-column label="审核状态" prop="status" align="center" width="120">
|
<template #default="scope">
|
<el-tag :type="getApprovalStatusType(scope.row.status)">
|
{{ getApprovalStatusText(scope.row.status) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="220" align="center">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
:disabled="!isApproved(scope.row.status)"
|
@click="openForm('edit', scope.row)">补充发货信息
|
</el-button>
|
<el-button
|
link
|
type="primary"
|
style="color: #67C23A"
|
@click="openDetail(scope.row)"
|
>详情
|
</el-button>
|
<el-button
|
link
|
type="danger"
|
:disabled="isApproving(scope.row.status)"
|
@click="handleDeleteSingle(scope.row)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current" :limit="page.size" @pagination="paginationChange"/>
|
</div>
|
<el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增发货台账' : '编辑发货台账'"
|
width="40%"
|
@close="closeDia">
|
<el-form :model="form" label-width="120px" label-position="top" :rules="rules" ref="formRef">
|
<el-row :gutter="30">
|
<el-col :span="24">
|
<el-form-item label="发货类型：" prop="type">
|
<el-select
|
v-model="form.type"
|
placeholder="请选择发货类型"
|
style="width: 100%"
|
@change="handleShippingTypeChange"
|
>
|
<el-option label="货车" value="货车"/>
|
<el-option label="快递" value="快递"/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24">
|
<el-form-item label="发货日期：" prop="shippingDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.shippingDate"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择发货日期"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24" v-if="form.type === '货车'">
|
<el-form-item label="发货车牌号：" prop="shippingCarNumber">
|
<el-input
|
v-model="form.shippingCarNumber"
|
placeholder="请输入发货车牌号"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-else>
|
<el-form-item label="快递公司：" prop="expressCompany">
|
<el-input
|
v-model="form.expressCompany"
|
placeholder="请输入快递公司"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30" v-if="form.type === '快递'">
|
<el-col :span="24">
|
<el-form-item label="快递单号：" prop="expressNumber">
|
<el-input
|
v-model="form.expressNumber"
|
placeholder="请输入快递单号"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24">
|
<el-form-item label="发货图片：">
|
<ImageUpload v-model:file-list="deliveryFileList" :limit="9"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 详情弹框 -->
|
<el-dialog v-model="detailDialogVisible" title="发货台账详情" width="55%" @close="closeDetail">
|
<div v-if="detailRow" class="detail-wrapper">
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="销售订单">{{ detailRow.salesContractNo || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="发货订单号">{{ detailRow.shippingNo || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="客户名称">{{ detailRow.customerName || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="产品名称">{{ detailRow.productName || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="规格型号">{{ detailRow.specificationModel || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="发货类型">{{ detailRow.type || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="发货日期">{{ detailRow.shippingDate || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="审核状态">{{ getApprovalStatusText(detailRow.status) }}</el-descriptions-item>
|
<el-descriptions-item label="发货车牌号">{{ detailRow.shippingCarNumber || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="快递公司">{{ detailRow.expressCompany || '--' }}</el-descriptions-item>
|
<el-descriptions-item label="快递单号" :span="2">{{ detailRow.expressNumber || '--' }}</el-descriptions-item>
|
</el-descriptions>
|
<el-table :data="getDeliveryProductInfoList()"
|
border
|
size="small"
|
class="delivery-product-table"
|
style="width: 100%; margin-top: 16px;">
|
<el-table-column label="批号"
|
prop="batchNo"
|
min-width="160"
|
show-overflow-tooltip/>
|
<el-table-column label="产品名称"
|
prop="productName"
|
min-width="160"
|
show-overflow-tooltip/>
|
<el-table-column label="规格型号"
|
prop="specificationModel"
|
min-width="160"
|
show-overflow-tooltip/>
|
<el-table-column label="发货数量"
|
prop="deliveryQuantity"
|
min-width="120"
|
align="center"/>
|
</el-table>
|
<ImagePreview :file-list="detailRow.storageBlobVOs || []" />
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="closeDetail">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import {onMounted, ref, reactive, toRefs, getCurrentInstance} from "vue";
|
import {ElMessageBox} from "element-plus";
|
import {getCurrentDate} from "@/utils/index.js";
|
import {
|
deliveryLedgerListPage,
|
delDeliveryLedger,
|
deductStock,
|
getDeliveryDetail,
|
} from "@/api/salesManagement/deliveryLedger.js";
|
import {delLedgerFile} from "@/api/salesManagement/salesLedger.js";
|
import ImageUpload from "@/components/AttachmentUpload/image/index.vue";
|
import ImagePreview from "@/components/AttachmentPreview/image/index.vue";
|
|
|
const {proxy} = getCurrentInstance();
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const salesOrderOptions = ref([]);
|
const page = reactive({
|
current: 1,
|
size: 100,
|
});
|
const total = ref(0);
|
const deliveryFileList = ref([]);
|
// 详情弹框
|
const detailDialogVisible = ref(false);
|
const detailRow = ref(null);
|
const detailProductList = ref([]);
|
|
// 用户信息表单弹框数据
|
const operationType = ref("");
|
const dialogFormVisible = ref(false);
|
const data = reactive({
|
searchForm: {
|
salesContractNo: "", // 销售订单号
|
shippingCarNumber: "", // 车牌号
|
expressNumber: "", // 快递单号
|
},
|
form: {
|
id: null,
|
salesContractNo: "",
|
customerName: "",
|
specificationModel: "",
|
productName: "",
|
type: "货车", // 货车, 快递
|
shippingDate: "",
|
shippingCarNumber: "",
|
expressCompany: "",
|
expressNumber: "", // 快递单号
|
},
|
rules: {
|
salesContractNo: [{required: true, message: "请选择销售订单", trigger: "change"}],
|
customerName: [{required: true, message: "请输入客户名称", trigger: "blur"}],
|
type: [
|
{required: true, message: "请选择发货类型", trigger: "change"}
|
],
|
shippingDate: [{required: true, message: "请选择发货时间", trigger: "change"}],
|
shippingCarNumber: [
|
{validator: (_, value, callback) => validateShippingCarNumber(value, callback), trigger: "blur"}
|
],
|
expressCompany: [
|
{validator: (_, value, callback) => validateExpressCompany(value, callback), trigger: "blur"}
|
],
|
},
|
});
|
const {form, rules} = toRefs(data);
|
const {searchForm} = toRefs(data);
|
|
|
// 查询列表
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const paginationChange = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
deliveryLedgerListPage({...searchForm.value, ...page})
|
.then((res) => {
|
tableLoading.value = false;
|
tableData.value = res.data.records || [];
|
total.value = res.data.total || 0;
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
// 销售订单变化时自动填充客户名称
|
const handleSalesOrderChange = (value) => {
|
const selectedOrder = salesOrderOptions.value.find(item => item.salesContractNo === value);
|
if (selectedOrder) {
|
form.value.customerName = selectedOrder.customerName;
|
}
|
};
|
|
// 表格选择数据
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
// 打开弹框
|
const openForm = async (type, row) => {
|
// 补充发货信息：仅“审核通过”允许编辑
|
if (type === 'edit' && row && !isApproved(row.status)) {
|
proxy.$modal.msgWarning("只有审核通过的数据才可以补充发货信息");
|
return;
|
}
|
|
operationType.value = type;
|
|
if (type === 'edit' && row) {
|
form.value = {
|
id: row.id ?? null,
|
salesContractNo: row.salesContractNo ?? "",
|
customerName: row.customerName ?? "",
|
type: row.type || "货车",
|
shippingDate: row.shippingDate || getCurrentDate(),
|
shippingCarNumber: row.shippingCarNumber ?? "",
|
expressCompany: row.expressCompany ?? "",
|
expressNumber: row.expressNumber ?? "",
|
};
|
deliveryFileList.value = row.storageBlobVOs || [];
|
}
|
|
dialogFormVisible.value = true;
|
};
|
|
// 打开详情弹框
|
const openDetail = async (row) => {
|
detailRow.value = row || null;
|
detailProductList.value = [];
|
detailDialogVisible.value = true;
|
if (!row?.id) return;
|
try {
|
const res = await getDeliveryDetail(row.id);
|
const detailData = res?.data;
|
detailRow.value = {
|
...row,
|
...(Array.isArray(detailData) ? {} : detailData || {}),
|
};
|
detailProductList.value = resolveDeliveryDetailList(detailData);
|
} catch (error) {
|
proxy.$modal.msgError("加载发货台账详情失败");
|
}
|
};
|
const resolveDeliveryDetailList = data => {
|
if (Array.isArray(data)) return data;
|
if (!data || typeof data !== "object") return [];
|
return [
|
data.batchNoDetailList,
|
data.batchNoList,
|
data.shippingBatchList,
|
data.shippingInfoDetailList,
|
data.detailList,
|
data.batchDetailList,
|
data.rows,
|
data.records,
|
data.list,
|
data.data,
|
].find(value => Array.isArray(value) && value.length) || [];
|
};
|
const getDeliveryProductInfoList = () => {
|
const row = detailRow.value;
|
if (!row) return [];
|
const normalizeBatchNoList = value => {
|
if (Array.isArray(value)) return value;
|
if (typeof value === "string" && value.includes(",")) {
|
return value.split(",").map(item => item.trim()).filter(Boolean);
|
}
|
return value ? [value] : [];
|
};
|
const detailList = detailProductList.value.length ? detailProductList.value : [
|
row.batchNoDetailList,
|
row.batchNoList,
|
row.shippingBatchList,
|
row.shippingInfoDetailList,
|
row.detailList,
|
row.batchDetailList,
|
].find(value => Array.isArray(value) && value.length);
|
const batchNoList = normalizeBatchNoList(row.batchNo);
|
const toTableRow = (item = {}) => ({
|
batchNo:
|
typeof item === "string" || typeof item === "number"
|
? item
|
: item.batchNo ?? item.batchNumber ?? row.batchNo ?? "--",
|
productName: item.productName ?? row.productName ?? "--",
|
specificationModel:
|
item.specificationModel ?? item.model ?? row.specificationModel ?? "--",
|
deliveryQuantity:
|
item.deliveryQuantity ??
|
item.quantity ??
|
item.shippingQuantity ??
|
row.deliveryQuantity ??
|
row.quantity ??
|
"--",
|
});
|
if (detailList?.length) {
|
return detailList.map(toTableRow);
|
}
|
if (batchNoList.length) {
|
return batchNoList.map(batchNo => toTableRow({batchNo}));
|
}
|
return [toTableRow()];
|
};
|
const closeDetail = () => {
|
detailDialogVisible.value = false;
|
detailRow.value = null;
|
detailProductList.value = [];
|
};
|
|
// 提交表单
|
const submitForm = () => {
|
proxy.$refs["formRef"].validate((valid) => {
|
if (valid) {
|
const payload = {
|
id: form.value.id,
|
type: form.value.type,
|
shippingDate: form.value.shippingDate,
|
shippingCarNumber: form.value.type === "货车" ? form.value.shippingCarNumber : "",
|
expressCompany: form.value.type === "快递" ? form.value.expressCompany : "",
|
expressNumber: form.value.type === "快递" ? form.value.expressNumber : "",
|
storageBlobDTOs: deliveryFileList.value || [],
|
};
|
deductStock(payload).then((res) => {
|
proxy.$modal.msgSuccess("操作成功");
|
closeDia();
|
getList();
|
});
|
}
|
});
|
};
|
|
// 关闭弹框
|
const closeDia = () => {
|
proxy.resetForm("formRef");
|
deliveryFileList.value = []; // 清空文件列表
|
dialogFormVisible.value = false;
|
};
|
|
// 导出
|
const handleOut = () => {
|
ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
proxy.download("/shippingInfo/export", {}, "发货台账.xlsx");
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
// 批量删除
|
const handleDelete = () => {
|
if (selectedRows.value.length === 0) {
|
proxy.$modal.msgWarning("请选择数据");
|
return;
|
}
|
|
// 检查选中的行是否有"审核中"状态
|
const approvingRows = selectedRows.value.filter(row => isApproving(row.status));
|
if (approvingRows.length > 0) {
|
proxy.$modal.msgWarning("审核中的数据不能删除");
|
return;
|
}
|
|
const ids = selectedRows.value.map((item) => item.id);
|
ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
delDeliveryLedger(ids).then((res) => {
|
proxy.$modal.msgSuccess("删除成功");
|
getList();
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
// 单个删除
|
const handleDeleteSingle = (row) => {
|
// 检查是否为"审核中"状态
|
if (isApproving(row.status)) {
|
proxy.$modal.msgWarning("审核中的数据不能删除");
|
return;
|
}
|
|
ElMessageBox.confirm("此操作将删除该记录，是否确认？", "删除", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
delDeliveryLedger([row.id]).then((res) => {
|
proxy.$modal.msgSuccess("删除成功");
|
getList();
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
// 发货类型校验：货车时要求车牌，快递时要求快递公司
|
const validateShippingCarNumber = (value, callback) => {
|
if (form.value.type === "货车") {
|
if (!value) return callback(new Error("请输入发货车牌号"));
|
}
|
callback();
|
};
|
const validateExpressCompany = (value, callback) => {
|
if (form.value.type === "快递") {
|
if (!value) return callback(new Error("请输入快递公司"));
|
}
|
callback();
|
};
|
|
// 发货图片上传前校检
|
function handleDeliveryBeforeUpload(file) {
|
// 校检文件类型
|
const isImage = file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg';
|
if (!isImage) {
|
proxy.$modal.msgError("只能上传 jpg、jpeg、png 格式的图片!");
|
return false;
|
}
|
// 校检文件大小
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
if (!isLt10M) {
|
proxy.$modal.msgError("上传图片大小不能超过 10MB!");
|
return false;
|
}
|
proxy.$modal.loading("正在上传图片，请稍候...");
|
return true;
|
}
|
|
// 发货图片上传失败
|
function handleDeliveryUploadError(err) {
|
proxy.$modal.msgError("上传图片失败");
|
proxy.$modal.closeLoading();
|
}
|
|
// 发货图片上传成功回调
|
function handleDeliveryUploadSuccess(res, file, uploadFiles) {
|
proxy.$modal.closeLoading();
|
if (res.code === 200) {
|
file.tempId = res.data.tempId;
|
proxy.$modal.msgSuccess("上传成功");
|
} else {
|
proxy.$modal.msgError(res.msg);
|
proxy.$refs.deliveryFileUpload.handleRemove(file);
|
}
|
}
|
|
// 移除发货图片
|
function handleDeliveryRemove(file) {
|
console.log('file--', file)
|
// 如果是编辑模式且文件有 id，需要调用接口删除
|
if (operationType.value === "edit") {
|
let ids = [];
|
ids.push(file.uid);
|
delLedgerFile(ids).then((res) => {
|
proxy.$modal.msgSuccess("删除成功");
|
// 从文件列表中移除
|
const index = deliveryFileList.value.findIndex(item => item.uid === file.uid);
|
if (index > -1) {
|
deliveryFileList.value.splice(index, 1);
|
}
|
}).catch(() => {
|
proxy.$modal.msgError("删除失败");
|
});
|
} else {
|
// 新增模式或没有 id 的文件，直接从列表中移除
|
const index = deliveryFileList.value.findIndex(item => item.uid === file.uid);
|
if (index > -1) {
|
deliveryFileList.value.splice(index, 1);
|
}
|
}
|
}
|
|
// 发货类型切换时清空对应字段
|
const handleShippingTypeChange = (val) => {
|
if (val === "货车") {
|
form.value.expressCompany = "";
|
form.value.expressNumber = "";
|
} else {
|
form.value.shippingCarNumber = "";
|
}
|
};
|
|
// 获取审核状态文本
|
const getApprovalStatusText = (status) => {
|
if (status === null || status === undefined || status === '') {
|
return '待审核';
|
}
|
// 如果是数字
|
if (typeof status === 'number') {
|
const statusMap = {
|
0: '待审核',
|
1: '审核中',
|
2: '审核拒绝',
|
3: '审核通过'
|
};
|
return statusMap[status] || '待审核';
|
}
|
// 如果是字符串，直接返回或映射
|
const statusStr = String(status).trim();
|
const statusTextMap = {
|
'待审核': '待审核',
|
'审核中': '审核中',
|
'审核拒绝': '审核拒绝',
|
'审核通过': '审核通过',
|
'已发货': '已发货',
|
'0': '待审核',
|
'1': '审核中',
|
'2': '审核拒绝',
|
'3': '审核通过'
|
};
|
return statusTextMap[statusStr] || statusStr || '待审核';
|
};
|
|
// 获取审核状态标签类型（颜色）
|
const getApprovalStatusType = (status) => {
|
if (status === null || status === undefined || status === '') {
|
return 'info';
|
}
|
// 如果是数字
|
if (typeof status === 'number') {
|
const typeMap = {
|
0: 'info', // 待审核 - 灰色
|
1: 'warning', // 审核中 - 黄色
|
2: 'danger', // 审核拒绝 - 红色
|
3: 'success' // 审核通过 - 绿色
|
};
|
return typeMap[status] || 'info';
|
}
|
// 如果是字符串
|
const statusStr = String(status).trim();
|
const typeTextMap = {
|
'待审核': 'info',
|
'审核中': 'warning',
|
'审核拒绝': 'danger',
|
'审核通过': 'success',
|
'已发货': 'success',
|
'0': 'info',
|
'1': 'warning',
|
'2': 'danger',
|
'3': 'success'
|
};
|
return typeTextMap[statusStr] || 'info';
|
};
|
|
// 检查审核状态是否为"审核通过"
|
const isApproved = (status) => {
|
if (status === null || status === undefined || status === '') {
|
return false;
|
}
|
// 如果是数字，3 表示审核通过
|
if (typeof status === 'number') {
|
return status === 3;
|
}
|
// 如果是字符串
|
const statusStr = String(status).trim();
|
return statusStr === '审核通过' || statusStr === '3';
|
};
|
|
// 检查审核状态是否为"审核中"
|
const isApproving = (status) => {
|
if (status === null || status === undefined || status === '') {
|
return false;
|
}
|
// 如果是数字，1 表示审核中
|
if (typeof status === 'number') {
|
return status === 1;
|
}
|
// 如果是字符串
|
const statusStr = String(status).trim();
|
return statusStr === '审核中' || statusStr === '1';
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.table_list {
|
margin-top: unset;
|
}
|
|
.actions {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
}
|
|
// 隐藏图片上传组件的预览按钮（放大镜）
|
:deep(.el-upload-list--picture-card .el-upload-list__item-actions) {
|
.el-upload-list__item-preview {
|
display: none;
|
}
|
}
|
|
.detail-wrapper {
|
padding: 8px 0;
|
}
|
|
.detail-images {
|
margin-top: 16px;
|
}
|
|
.detail-images-title {
|
font-weight: 600;
|
margin-bottom: 10px;
|
color: #303133;
|
}
|
|
.detail-image {
|
width: 120px;
|
height: 120px;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
border-radius: 6px;
|
}
|
|
.detail-images-empty {
|
margin-top: 16px;
|
color: #909399;
|
}
|
</style>
|
