584 lines
20 KiB
Vue
584 lines
20 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch">
|
||
<el-row :gutter="40">
|
||
<el-col :span="5">
|
||
<el-form-item label="借用时间" prop="borrowTime">
|
||
<el-date-picker v-model="borrowTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||
end-placeholder="结束日期" clearable placeholder="请选择借用时间" format="YYYY/MM/DD"
|
||
value-format="YYYY-MM-DD">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-form-item label="项目号" prop="xmNo">
|
||
<el-input v-model="queryParams.xmNo" placeholder="请输入项目号" clearable @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-form-item label="订单编号" prop="sapNo">
|
||
<el-input v-model="queryParams.sapNo" placeholder="请输入订单编号" clearable @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-form-item label="单据号" prop="billNo">
|
||
<el-input v-model="queryParams.billNo" placeholder="请输入单据号" clearable @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item>
|
||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" plain icon="Plus" @click="handleAdd"
|
||
v-hasPermi="['wisdom:borrow:add']">新增借料</el-button>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="1.5">
|
||
<el-button type="success" plain icon="Printer" @click="handlePrint" v-print="printViewInfo"
|
||
v-hasPermi="['wisdom:borrow:print']">打印单据</el-button>
|
||
</el-col>
|
||
|
||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" :data="outboundList" @selection-change="printSelectionChange" border
|
||
show-overflow-tooltip>
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
|
||
<el-table-column label="单据号" align="center" prop="billNo" width="180" />
|
||
<el-table-column label="状态" align="center">
|
||
<template #default="scope">
|
||
<dict-tag :options="dictTagData()" :value="scope.row.isBorrowed" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="订单编号" align="center" prop="sapNo" width="150" />
|
||
<el-table-column label="项目号" align="center" prop="xmNo" width="150" />
|
||
<el-table-column label="项目描述" align="center" prop="xmMs" width="150" />
|
||
<el-table-column label="（借用方）项目号" align="center" prop="xmNoCk" width="150" />
|
||
<el-table-column label="（借用方）项目描述" align="center" prop="xmMsCk" width="150" />
|
||
<el-table-column label="物料号" align="center" prop="wlNo" width="100" />
|
||
<el-table-column label="物料描述" align="center" prop="wlMs" width="150" />
|
||
<el-table-column label="供应商编码" align="center" prop="gysNo" width="150" />
|
||
<el-table-column label="供应商名称" align="center" prop="gysMc" width="150" />
|
||
<el-table-column label="合同单价" align="center" prop="htDj" />
|
||
|
||
<el-table-column label="计量单位" align="center" prop="dw" />
|
||
<el-table-column label="借用数量" align="center" prop="realQty" width="120" />
|
||
<el-table-column label="所属大库" align="center" prop="parentWarehouseName" width="150" />
|
||
<el-table-column label="所属小库" align="center" prop="warehouseName" width="150" />
|
||
<el-table-column label="库位码" align="center" prop="pcode" width="120" />
|
||
<el-table-column label="托盘码" align="center" prop="trayCode" />
|
||
<el-table-column label="身份码" align="center" prop="entityId" width="150" />
|
||
<el-table-column label="出库类型" align="center" prop="operationTypeName" />
|
||
<el-table-column label="借用时间" align="center" width="100">
|
||
<template #default="scope">
|
||
<span>{{ parseTime(scope.row.borrowTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="理货员" align="center" prop="operatorName" />
|
||
<el-table-column label="备注" align="center" prop="remark" width="150" />
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template #default="scope">
|
||
<el-button v-show="scope.row.isBorrowed == 1" link type="primary" icon="Edit"
|
||
@click="handleReturn(scope.row)">还料</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||
<!-- 打印 -->
|
||
<div id="printMe" class="printMeBox" v-show="showContent">
|
||
<printBill :billAllObj="printList" />
|
||
</div>
|
||
<!-- 添加或修改库存单据主对话框 -->
|
||
<el-dialog :title="title" v-model="open" append-to-body width="70%">
|
||
<el-form ref="stockRef" :model="storeData" :rules="rules">
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-form-item label="项目号">
|
||
<el-input v-model="outQueryParams.xmNo" placeholder="请输入项目号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="订单号">
|
||
<el-input v-model="outQueryParams.sapNo" placeholder="请输入订单号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="物料号">
|
||
<el-input v-model="outQueryParams.wlNo" placeholder="请输入物料号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-button type="primary" @click="searchPlan">查询</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-form-item label="出库类型" prop="ckType">
|
||
<el-select v-model="storeData.ckType" placeholder="请选择出库类型" disabled>
|
||
<el-option v-for="dict in storeTypeList" :key="dict.id" :label="dict.typeName" :value="dict.typeCode" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="施工队" prop="teamCode">
|
||
<el-select v-model="storeData.teamCode" placeholder="请选择施工队" clearable>
|
||
<el-option v-for="dict in wzTypeList" :key="dict.id" :label="dict.teamName" :value="dict.teamCode" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<el-form-item label="理货员" prop="operator">
|
||
<el-select v-model="storeData.operator" placeholder="请选择理货员" clearable>
|
||
<el-option v-for="dict in personList" :key="dict.userId" :label="dict.userName"
|
||
:value="dict.userId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="借用时间" prop="borrowTime">
|
||
<el-date-picker clearable v-model="storeData.borrowTime" type="date" value-format="YYYY-MM-DD"
|
||
placeholder="请选择借用时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-form-item label="归还时间">
|
||
<el-date-picker clearable v-model="storeData.returnTime" type="date" value-format="YYYY-MM-DD"
|
||
placeholder="请选择归还时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="项目号">
|
||
<el-input v-model="storeData.xmNoCk" placeholder="请输入项目号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="项目名称">
|
||
<el-input v-model="storeData.xmMsCk" placeholder="请输入项目名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-table :data="planList" height="400" show-overflow-tooltip style="width: 100%"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="物料号" align="center" prop="wlNo" width="100" />
|
||
<el-table-column label="订单号" align="center" prop="sapNo" width="100" />
|
||
<el-table-column label="物料描述" align="center" prop="wlMs" width="300" />
|
||
<el-table-column label="出库数量" align="center" prop="realQty" width="120">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.realQty" placeholder="请输入出库数量" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="单价" align="center" prop="htDj" />
|
||
<el-table-column label="单位" align="center" prop="dw" />
|
||
<el-table-column label="库位" align="center" prop="pcode" width="150"></el-table-column>
|
||
<el-table-column label="容器码" align="center" prop="trayCode"></el-table-column>
|
||
|
||
<el-table-column label="身份码" align="center" prop="entityId" width="200"></el-table-column>
|
||
|
||
<el-table-column label="项目号" align="center" prop="xmNo" width="150" />
|
||
<el-table-column label="项目名称" align="center" prop="xmMs" width="250" />
|
||
<el-table-column label="供应商" align="center" prop="gysMc" width="200" />
|
||
<el-table-column label="备注" align="center" width="200">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">出 库</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 还料弹框 -->
|
||
<el-dialog title="还料" v-model="returnOpen" append-to-body width="40%">
|
||
<el-form ref="returnRef" :model="returnData" label-width="100px">
|
||
<el-form-item label="还料时间">
|
||
<el-date-picker style="width: 100%" v-model="returnData.returnTime" value-format="YYYY-MM-DD HH:mm:ss"
|
||
format="YYYY-MM-DD HH:mm:ss" type="date" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="returnForm">还 料</el-button>
|
||
<el-button @click="cancelReturn">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="outbound">
|
||
import { returnBill ,listStockByXm} from "@/api/wisdom/borrow"; //列表
|
||
import { warehouseAll } from "@/api/information/warehouseinfo";
|
||
import { listOuttype } from "@/api/information/outtype"; //出库类型
|
||
import { listConstruction } from "@/api/information/construction"; //施工队
|
||
import { personListDict } from "@/api/system/user"; //理货员
|
||
import { getKwAllList } from "@/api/information/pcdedetail"; //库位下拉数据
|
||
import printBill from '@/components/printBill/bill.vue'
|
||
import { ref } from "vue";
|
||
import { listStock } from "@/api/wisdom/record"
|
||
import { addOutbound } from "@/api/wisdom/outbound"
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
|
||
const outboundList = ref([]);
|
||
const open = ref(false);
|
||
|
||
const loading = ref(true);
|
||
const showSearch = ref(true);
|
||
const ids = ref([]);
|
||
|
||
const total = ref(0);
|
||
const title = ref("");
|
||
|
||
const planList = ref([]); //从供应计划中添加列表
|
||
|
||
const storeTypeList = ref([]); //出库类型下拉数据
|
||
const wzTypeList = ref([]); //施工队下拉数据
|
||
|
||
const personList = ref([]); //理货员下拉数据
|
||
const orderNum = ref("") //搜索条件：订单号
|
||
const showContent = ref(false); // 控制打印内容是否显示
|
||
const dateStr = ref("") //打印单据生成的日期
|
||
const printList = ref([]) //要打印的数据列表
|
||
const kwOptions = ref([]); //库位下拉
|
||
const borrowTime = ref([])
|
||
const data = reactive({
|
||
form: {},
|
||
storeData: {
|
||
ckType: "JLCK"
|
||
}, //借料数据
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
isBorrowed: "1",
|
||
// borrowTime:[], //借料时间
|
||
xmNo: "",
|
||
sapNo: "",
|
||
billNo: "",
|
||
ids: []
|
||
},
|
||
outQueryParams: {
|
||
xmNo: "",
|
||
wlNo: "",
|
||
sapNo: "",
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
isChuku: 0,
|
||
},
|
||
rules: {
|
||
ckType: [{ required: true, message: "出库类型不能为空", trigger: "change" }],
|
||
teamCode: [{ required: true, message: "施工队不能为空", trigger: "change" }],
|
||
borrowTime: [{ required: true, message: "借用时间不能为空", trigger: "change" }],
|
||
operator: [{ required: true, message: "理货员不能为空", trigger: "change" }]
|
||
},
|
||
printViewInfo: {
|
||
id: "printMe", //打印区域的唯一的id属性
|
||
popTitle: '入库信息打印',
|
||
|
||
|
||
beforeOpenCallback() {
|
||
showContent.value = false;
|
||
}, // 开始打印之前的callback
|
||
openCallback() { }, // 调用打印时的callback
|
||
closeCallback() { }, // 关闭打印的callback(无法区分确认or取消)
|
||
clickMounted() { },
|
||
|
||
standard: '',
|
||
extarCss: ''
|
||
}
|
||
});
|
||
|
||
const { queryParams, storeData, rules, form, printViewInfo, outQueryParams } = toRefs(data);
|
||
|
||
const statusList = ref([
|
||
{ value: 1, label: '未还料', elTagType: "danger", elTagClass: null },
|
||
{ value: 2, label: '已还料', elTagType: "primary", elTagClass: null }
|
||
])
|
||
|
||
const dictTagData = () => {
|
||
return statusList.value.map(item => ({
|
||
...item,
|
||
value: String(item.value)
|
||
}));
|
||
}
|
||
|
||
/** 查询库存单据主列表 */
|
||
function getList() {
|
||
loading.value = true;
|
||
listStock({ ...queryParams.value, bizType: '2' }).then(response => {
|
||
outboundList.value = response.rows;
|
||
total.value = response.total;
|
||
loading.value = false;
|
||
});
|
||
}
|
||
getList();
|
||
|
||
// 取消按钮
|
||
function cancel() {
|
||
open.value = false;
|
||
reset();
|
||
}
|
||
|
||
// 表单重置
|
||
function reset() {
|
||
planList.value = []
|
||
storeData.value = {
|
||
ckType: "JLCK"
|
||
}
|
||
orderNum.value = ""
|
||
proxy.resetForm("stockRef");
|
||
}
|
||
|
||
/** 搜索按钮操作 */
|
||
function handleQuery() {
|
||
if (borrowTime.value && borrowTime.value.length > 0) {
|
||
queryParams.value.startDate = borrowTime.value[0]
|
||
queryParams.value.endDate = borrowTime.value[1]
|
||
} else {
|
||
queryParams.value.startDate = ""
|
||
queryParams.value.endDate = ""
|
||
}
|
||
queryParams.value.pageNum = 1;
|
||
getList();
|
||
}
|
||
|
||
/** 重置按钮操作 */
|
||
function resetQuery() {
|
||
proxy.resetForm("queryRef");
|
||
borrowTime.value = []
|
||
handleQuery();
|
||
}
|
||
|
||
//出库 多选框选中数据
|
||
function handleSelectionChange(selection) {
|
||
ids.value = selection.map(info => info.id)
|
||
}
|
||
//打印单据 多选框选中数据
|
||
function printSelectionChange(selection) {
|
||
printList.value = selection
|
||
queryParams.value.ids = selection.map(item => item.id)
|
||
// console.log(queryParams.value.ids)
|
||
}
|
||
//打印单据
|
||
function handlePrint() {
|
||
if (printList.value.length == 0) {
|
||
proxy.$modal.msgError("请勾选数据");
|
||
return
|
||
}
|
||
const date = new Date();
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth() + 1; // 月份从0开始，需要加1
|
||
const day = date.getDate();
|
||
const hour = date.getHours();
|
||
const minute = date.getMinutes();
|
||
const second = date.getSeconds();
|
||
dateStr.value = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
|
||
showContent.value = true
|
||
}
|
||
|
||
|
||
/** 新增按钮操作 */
|
||
function handleAdd() {
|
||
reset();
|
||
open.value = true;
|
||
title.value = "添加借料单据";
|
||
//获取出库类型下拉数据
|
||
listOuttype({ pageNum: 1, pageSize: 50 }).then(response => {
|
||
storeTypeList.value = response.rows
|
||
})
|
||
//获取施工队下拉数据
|
||
listConstruction({ pageNum: 1, pageSize: 50 }).then(response => {
|
||
wzTypeList.value = response.rows
|
||
})
|
||
|
||
//理货员下拉数据
|
||
personListDict().then(response => {
|
||
personList.value = response.data
|
||
})
|
||
|
||
|
||
}
|
||
//查询库存中数据 搜索
|
||
function searchPlan() {
|
||
if (!outQueryParams.value.xmNo && !outQueryParams.value.wlNo && !outQueryParams.value.sapNo) {
|
||
proxy.$modal.msgWarning("查询条件不能为空");
|
||
return
|
||
}
|
||
listStockByXm(outQueryParams.value).then(response => {
|
||
response.rows.forEach(e => {
|
||
e.remark = e.remark
|
||
});
|
||
if (response.rows.length == 0) {
|
||
proxy.$modal.msgWarning("库存无数据");
|
||
planList.value = []
|
||
} else {
|
||
planList.value = response.rows
|
||
}
|
||
})
|
||
|
||
|
||
}
|
||
|
||
|
||
/** 借料出库 提交按钮 */
|
||
function submitForm() {
|
||
proxy.$refs["stockRef"].validate(valid => {
|
||
|
||
if (valid) {
|
||
if (ids.value.length == 0) {
|
||
proxy.$modal.msgError("请勾选数据");
|
||
return
|
||
}
|
||
let dataList = planList.value.filter(x => ids.value.includes(x.id)).map(info => ({
|
||
id: info.id,
|
||
realQty: info.realQty,
|
||
remark: info.remark
|
||
}))
|
||
let submitData = {
|
||
rkBill: {
|
||
borrowTime: storeData.value.borrowTime, //借用时间
|
||
returnTime: storeData.value?.returnTime , // 归还时间
|
||
teamCode: storeData.value.teamCode, //施工队
|
||
operator: storeData.value.operator, //理货员
|
||
xmNoCk: storeData.value.xmNoCk ? storeData.value.xmNoCk : "", //原本要出的项目号-借用方项目
|
||
xmMsCk: storeData.value.xmMsCk ? storeData.value.xmMsCk : "", //原本要出的项目描述-借用方项目号
|
||
bizType: '2',
|
||
operationType:'JLCK'
|
||
},
|
||
rkInfoList: dataList,
|
||
}
|
||
addOutbound(submitData).then(response => {
|
||
proxy.$modal.msgSuccess("操作成功");
|
||
open.value = false;
|
||
getList();
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
const returnId = ref([])
|
||
const returnData = ref({})
|
||
const returnOpen = ref(false)
|
||
//打开还料弹框
|
||
function handleReturn(row) {
|
||
returnId.value[0] = row.id
|
||
returnData.value.returnTime = ''
|
||
returnOpen.value = true
|
||
}
|
||
//还料保存
|
||
function returnForm() {
|
||
if (!returnData.value.returnTime) {
|
||
proxy.$modal.msgError("请选择还料时间");
|
||
return
|
||
}
|
||
let ids = JSON.parse(JSON.stringify(returnId.value))
|
||
let items = ids.map(item => {
|
||
return {
|
||
recordId: item,
|
||
returnTime: returnData.value.returnTime
|
||
}
|
||
});
|
||
returnBill({items}).then(response => {
|
||
proxy.$modal.msgSuccess("操作成功");
|
||
returnOpen.value = false;
|
||
getList();
|
||
});
|
||
}
|
||
//取消还料弹框
|
||
function cancelReturn() {
|
||
returnOpen.value = false
|
||
}
|
||
|
||
|
||
/** 导出按钮操作 */
|
||
function handleExport() {
|
||
proxy.download('wisdom/stock/export', {
|
||
...queryParams.value
|
||
}, `stock_${new Date().getTime()}.xlsx`)
|
||
}
|
||
|
||
const warehouseData = ref([]) //仓库下拉列表
|
||
function warehouseFun() {
|
||
//所属仓库下拉数据
|
||
warehouseAll().then(response => {
|
||
warehouseData.value = response.data
|
||
})
|
||
}
|
||
warehouseFun()
|
||
//库位字典
|
||
function pcodeList(value) {
|
||
console.log(value)
|
||
getKwAllList(value[1]).then(response => {
|
||
kwOptions.value = response.data
|
||
returnData.value.pcode = ""
|
||
})
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.el-table .warning-row {
|
||
--el-table-tr-bg-color: var(--el-color-warning-light-9);
|
||
}
|
||
|
||
.el-table .success-row {
|
||
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
||
}
|
||
|
||
.titleBox {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.printMeBox {
|
||
div {
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
|
||
.topBox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.topEveryBox {
|
||
width: 50%;
|
||
}
|
||
|
||
.tableBox {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.oneLineBox {
|
||
display: flex;
|
||
}
|
||
|
||
.everyBox {
|
||
width: 25%;
|
||
}
|
||
|
||
.bottomBox {
|
||
margin-top: 10px;
|
||
}
|
||
</style> |