|
|
@@ -1,140 +1,164 @@
|
|
|
<template>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="7">
|
|
|
- <el-card class="box-card">
|
|
|
- <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">产品清单</div>
|
|
|
- <el-table :data="formData.data.skuInfoList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" height="calc(100vh - 315px)">
|
|
|
- <el-table-column label="产品规格">
|
|
|
- <template #default="{ row }">
|
|
|
- <div>{{ row.skuSpecCode }}</div>
|
|
|
- <div>{{ row.skuSpecName }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="剩余可装箱数" prop="surplusQuantity" align="center" width="110" />
|
|
|
- <el-table-column label="净重（g）" width="120">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-input-number
|
|
|
- onmousewheel="return false;"
|
|
|
- v-model="row.quantity"
|
|
|
- placeholder="净重"
|
|
|
- style="width: 100%"
|
|
|
- :controls="false"
|
|
|
- :min="0"
|
|
|
- :precision="0"
|
|
|
- :max="row.surplusQuantity" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <div style="font-size: 16px; font-weight: 700; margin: 10px 0">包裹规格信息</div>
|
|
|
- <el-form :model="formData.data" :rules="rules" label-width="120px" ref="refForm">
|
|
|
- <el-form-item label="尺寸（cm）" required>
|
|
|
- <el-row>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="" prop="length">
|
|
|
- <el-input-number
|
|
|
- onmousewheel="return false;"
|
|
|
- v-model="formData.data.length"
|
|
|
- placeholder="长"
|
|
|
- style="width: 100%"
|
|
|
- :controls="false"
|
|
|
- :min="0"
|
|
|
- :precision="2" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="" prop="width">
|
|
|
- <el-input-number
|
|
|
- onmousewheel="return false;"
|
|
|
- v-model="formData.data.width"
|
|
|
- placeholder="宽"
|
|
|
- style="width: 100%"
|
|
|
- :controls="false"
|
|
|
- :min="0"
|
|
|
- :precision="2" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="" prop="height">
|
|
|
- <el-input-number
|
|
|
- onmousewheel="return false;"
|
|
|
- v-model="formData.data.height"
|
|
|
- placeholder="高"
|
|
|
- style="width: 100%"
|
|
|
- :controls="false"
|
|
|
- :min="0"
|
|
|
- :precision="2" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- <el-button type="primary" style="width: 100%" @click="submitPack()" v-preReClick>装包裹</el-button>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="17">
|
|
|
- <el-card class="box-card">
|
|
|
- <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">包裹规格数据</div>
|
|
|
- <div
|
|
|
- style="max-height: calc(100vh - 190px); overflow-x: hidden; overflow-y: auto"
|
|
|
- v-if="formData.data.orderEncasementList && formData.data.orderEncasementList.length > 0">
|
|
|
- <div style="box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px" v-for="(item, index) in formData.data.orderEncasementList" :key="index">
|
|
|
- <div style="background-color: #edf0f5; padding: 4px">
|
|
|
- <el-row :gutter="4" class="row-top">
|
|
|
- <el-col :span="5">单包裹规格格（cm）</el-col>
|
|
|
- <el-col :span="4">单包裹净重（kg）</el-col>
|
|
|
- <el-col :span="4">单包裹体积（m³）</el-col>
|
|
|
- <el-col :span="2">总包裹数</el-col>
|
|
|
- <el-col :span="3">总净重（kg）</el-col>
|
|
|
- <el-col :span="3">总体积（m³）</el-col>
|
|
|
- <el-col :span="3">操作</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="4" class="row-bottom">
|
|
|
- <el-col :span="5">{{ `${item.length}*${item.width}*${item.height}` }}</el-col>
|
|
|
- <el-col :span="4">{{ item.netWeight / 1000 }}</el-col>
|
|
|
- <el-col :span="4">{{ (item.length * item.width * item.height) / 1000000 }}</el-col>
|
|
|
- <el-col :span="2">{{ item.total }}</el-col>
|
|
|
- <el-col :span="3">{{ (item.netWeight / 1000) * item.total }}</el-col>
|
|
|
- <el-col :span="3">{{ ((item.length * item.width * item.height) / 1000000) * item.total }}</el-col>
|
|
|
- <el-col :span="3">
|
|
|
- <el-button type="primary" @click="copyPack(item)" text>复制包裹</el-button>
|
|
|
- <el-button type="danger" @click="deletePack(item)" text>删除</el-button>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="7">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">产品清单</div>
|
|
|
+ <el-table :data="formData.data.skuInfoList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" height="calc(100vh - 315px)">
|
|
|
+ <el-table-column label="产品规格">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div>{{ row.skuSpecCode }}</div>
|
|
|
+ <div>{{ row.skuSpecName }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="剩余可装箱数" prop="surplusQuantity" align="center" width="110" />
|
|
|
+ <el-table-column label="净重（g）" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="row.quantity"
|
|
|
+ placeholder="净重"
|
|
|
+ style="width: 100%"
|
|
|
+ :controls="false"
|
|
|
+ :min="0"
|
|
|
+ :precision="0"
|
|
|
+ :max="row.surplusQuantity" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="font-size: 16px; font-weight: 700; margin: 10px 0">包裹规格信息</div>
|
|
|
+ <el-form :model="formData.data" :rules="rules" label-width="120px" ref="refForm">
|
|
|
+ <el-form-item label="尺寸（cm）" required>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="" prop="length">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="formData.data.length"
|
|
|
+ placeholder="长"
|
|
|
+ style="width: 100%"
|
|
|
+ :controls="false"
|
|
|
+ :min="0"
|
|
|
+ :precision="2" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="" prop="width">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="formData.data.width"
|
|
|
+ placeholder="宽"
|
|
|
+ style="width: 100%"
|
|
|
+ :controls="false"
|
|
|
+ :min="0"
|
|
|
+ :precision="2" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="" prop="height">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="formData.data.height"
|
|
|
+ placeholder="高"
|
|
|
+ style="width: 100%"
|
|
|
+ :controls="false"
|
|
|
+ :min="0"
|
|
|
+ :precision="2" />
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- </div>
|
|
|
- <div style="background-color: white; border: 1px solid #ebeef5">
|
|
|
- <el-table
|
|
|
- border
|
|
|
- :data="item.orderEncasementDetailList"
|
|
|
- :row-style="{ height: '35px' }"
|
|
|
- :cell-style="{ padding: '0' }"
|
|
|
- header-row-class-name="tableHeaderTwo"
|
|
|
- :span-method="arraySpanMethod">
|
|
|
- <el-table-column label="产品品号" prop="skuSpecCode" width="150" />
|
|
|
- <el-table-column label="产品品名" prop="skuSpecName" />
|
|
|
- <el-table-column label="打包数量" align="center" width="120">
|
|
|
- <template #default="{ row }">
|
|
|
- <div>
|
|
|
- {{ row.quantity ? row.quantity : 0 }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="总包裹数" align="center" width="120">
|
|
|
- <template #default="{ row }">
|
|
|
- <div>x {{ item.total }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" style="width: 100%" @click="submitPack()" v-preReClick>装包裹</el-button>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="17">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">包裹规格数据</div>
|
|
|
+ <div
|
|
|
+ style="max-height: calc(100vh - 190px); overflow-x: hidden; overflow-y: auto"
|
|
|
+ v-if="formData.data.orderEncasementList && formData.data.orderEncasementList.length > 0">
|
|
|
+ <div
|
|
|
+ style="box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px"
|
|
|
+ v-for="(item, index) in formData.data.orderEncasementList"
|
|
|
+ :key="index">
|
|
|
+ <div style="background-color: #edf0f5; padding: 4px">
|
|
|
+ <el-row :gutter="4" class="row-top">
|
|
|
+ <el-col :span="5">单包裹规格格（cm）</el-col>
|
|
|
+ <el-col :span="4">单包裹净重（kg）</el-col>
|
|
|
+ <el-col :span="4">单包裹体积（m³）</el-col>
|
|
|
+ <el-col :span="2">总包裹数</el-col>
|
|
|
+ <el-col :span="3">总净重（kg）</el-col>
|
|
|
+ <el-col :span="3">总体积（m³）</el-col>
|
|
|
+ <el-col :span="3">操作</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="4" class="row-bottom">
|
|
|
+ <el-col :span="5">{{ `${item.length}*${item.width}*${item.height}` }}</el-col>
|
|
|
+ <el-col :span="4">{{ item.netWeight / 1000 }}</el-col>
|
|
|
+ <el-col :span="4">{{ (item.length * item.width * item.height) / 1000000 }}</el-col>
|
|
|
+ <el-col :span="2">{{ item.total }}</el-col>
|
|
|
+ <el-col :span="3">{{ (item.netWeight / 1000) * item.total }}</el-col>
|
|
|
+ <el-col :span="3">{{ ((item.length * item.width * item.height) / 1000000) * item.total }}</el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-button type="primary" @click="copyPack(item)" text>复制包裹</el-button>
|
|
|
+ <el-button type="danger" @click="deletePack(item)" text>删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div style="background-color: white; border: 1px solid #ebeef5">
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ :data="item.orderEncasementDetailList"
|
|
|
+ :row-style="{ height: '35px' }"
|
|
|
+ :cell-style="{ padding: '0' }"
|
|
|
+ header-row-class-name="tableHeaderTwo"
|
|
|
+ :span-method="arraySpanMethod">
|
|
|
+ <el-table-column label="产品品号" prop="skuSpecCode" width="150" />
|
|
|
+ <el-table-column label="产品品名" prop="skuSpecName" />
|
|
|
+ <el-table-column label="打包数量" align="center" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div>
|
|
|
+ {{ row.quantity ? row.quantity : 0 }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总包裹数" align="center" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div>x {{ item.total }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog title="复制包裹" v-if="openCopy" v-model="openCopy" width="500">
|
|
|
+ <el-form :model="formCopy.data" :rules="rulesCopy" label-width="100px" ref="refCopy">
|
|
|
+ <el-form-item label="复制数量" prop="total">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="formCopy.data.total"
|
|
|
+ placeholder="请输入复制数量"
|
|
|
+ style="width: 100%"
|
|
|
+ :controls="false"
|
|
|
+ :min="0"
|
|
|
+ :precision="0" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="openCopy = false" size="large">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitCopy()" size="large" v-preReClick>提 交</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { useRoute } from "vue-router";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const route = useRoute();
|
|
|
@@ -229,11 +253,47 @@ const arraySpanMethod = ({ row, columnIndex }) => {
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
+const openCopy = ref(false);
|
|
|
+const formCopy = reactive({
|
|
|
+ data: {
|
|
|
+ id: "",
|
|
|
+ total: undefined,
|
|
|
+ },
|
|
|
+});
|
|
|
+const rulesCopy = ref({
|
|
|
+ total: [{ required: true, message: "请输入复制数量", trigger: "blur" }],
|
|
|
+});
|
|
|
const copyPack = (item) => {
|
|
|
- console.log(item);
|
|
|
+ formCopy.data = {
|
|
|
+ id: item.id,
|
|
|
+ total: undefined,
|
|
|
+ };
|
|
|
+ openCopy.value = true;
|
|
|
+};
|
|
|
+const submitCopy = () => {
|
|
|
+ proxy.$refs.refCopy.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ proxy.post("/issueBill/copyAllowance", formCopy.data).then(() => {
|
|
|
+ openCopy.value = false;
|
|
|
+ ElMessage({ message: "复制成功", type: "success" });
|
|
|
+ getDetails();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
};
|
|
|
-const deletePack = (item) => {
|
|
|
- console.log(item);
|
|
|
+const deletePack = (row) => {
|
|
|
+ ElMessageBox.confirm("你是否确认此操作", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ proxy.post("/issueBill/deleteAllowance", { id: row.id }).then(() => {
|
|
|
+ ElMessage({ message: "删除成功", type: "success" });
|
|
|
+ getDetails();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
};
|
|
|
</script>
|
|
|
|
lxf