|
@@ -0,0 +1,199 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-drawer title="外协单信息" :with-header="false" v-model="visible" direction="rtl" size="100%">
|
|
|
|
+ <div class="form-container column-container">
|
|
|
|
+ <div class="form-btns-container">
|
|
|
|
+ <span class="title-label">
|
|
|
|
+ <el-icon><Document /></el-icon>
|
|
|
|
+ <span>收回单信息</span>
|
|
|
|
+ </span>
|
|
|
|
+ <el-button-group>
|
|
|
|
+ <el-button v-if="editStatus" type="primary" icon="Finished" @click="submitForm"> 保存 </el-button>
|
|
|
|
+ <el-button v-else type="warning" icon="Edit" @click="editStatus = true">编辑</el-button>
|
|
|
|
+ <el-button v-if="form.id && editStatus" type="info" icon="Close" @click="editStatus = false">
|
|
|
|
+ 取消编辑
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button v-if="form.id" type="success" @click="getForm">
|
|
|
|
+ <i class="fa fa-refresh" aria-hidden="true" /> 刷新
|
|
|
|
+ </el-button>
|
|
|
|
+ </el-button-group>
|
|
|
|
+
|
|
|
|
+ <div class="close-btn" @click="cancel">
|
|
|
|
+ <i class="fa fa-times" aria-hidden="true" />
|
|
|
|
+ <!-- <span>关闭</span> -->
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-form ref="formRef" class="master-container" :model="form" v-loading="loading" label-width="120px">
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="单据号" prop="formCode">
|
|
|
|
+ <el-input v-model="form.formCode" readonly />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="表单日期" prop="formDate">
|
|
|
|
+ <el-date-picker v-model="form.formDate" type="date" value-format="YYYY-MM-DD" style="width: 100%">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="外协商名称" prop="supplierName">
|
|
|
|
+ <el-input v-if="editStatus" v-model="form.supplierName" readonly placeholder="请输入外协商名称">
|
|
|
|
+ <template #append>
|
|
|
|
+ <el-button icon="Search" @click="handleShowDialogSuppliers" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-input>
|
|
|
|
+ <span v-else>{{ form.supplierName }}</span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
|
+ <el-input v-model="form.remark" readonly />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-form>
|
|
|
|
+ <!-- 渲染数据区 -->
|
|
|
|
+ <div class="form-details-btns-container">
|
|
|
|
+ <el-button type="primary" icon="Plus" @click="handleShowDialogOutSourceDetails"> 添加收回明细 </el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="el-table-container">
|
|
|
|
+ <div class="el-table-inner-container">
|
|
|
|
+ <el-table v-loading="loading" :data="form.details" size="small" border height="100%">
|
|
|
|
+ <el-table-column label="行号" type="index" align="center" width="48" />
|
|
|
|
+ <el-table-column label="批次号" align="center" prop="lotCode" width="104" />
|
|
|
|
+ <el-table-column label="产品描述" align="center" prop="productDescription" width="320" />
|
|
|
|
+ <el-table-column label="产品数量" align="center" prop="productNum" width="96" />
|
|
|
|
+ <el-table-column
|
|
|
|
+ :label="form.packagingMethod === '0' ? '箱号' : '原箱号'"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="originalCarrier"
|
|
|
|
+ width="320"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ v-if="form.packagingMethod === '1'"
|
|
|
|
+ label="新箱号"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="newCarrier"
|
|
|
|
+ width="320"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column label="外协工序" align="center" prop="processNames" width="320" />
|
|
|
|
+ <el-table-column label="收回数量" align="center" prop="receiptNum" width="104">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-input-number
|
|
|
|
+ v-model="scope.row.receiptNum"
|
|
|
|
+ :min="0"
|
|
|
|
+ controls-position="right"
|
|
|
|
+ style="text-align: center"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="备注" align="center" prop="remark">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-input v-model="scope.row.remark" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 外协商选择 -->
|
|
|
|
+ <dialog-outsource-details
|
|
|
|
+ ref="dialogOutsourceDetailsRef"
|
|
|
|
+ :multiple-selected="handleMultipleSelectedOutsourceDetails"
|
|
|
|
+ />
|
|
|
|
+ </el-drawer>
|
|
|
|
+</template>
|
|
|
|
+<script setup>
|
|
|
|
+import { getReceipt, addReceipt, updateReceipt } from '@/api/business/returnReceipt'
|
|
|
|
+import dialogOutsourceDetails from './DialogOutsourceDetails'
|
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
|
+/** 表单抽屉 页变量 */
|
|
|
|
+const loading = ref(false)
|
|
|
|
+const visible = ref(false)
|
|
|
|
+const editStatus = ref(false)
|
|
|
|
+const webHost = import.meta.env.VITE_APP_BASE_API
|
|
|
|
+const form = ref({})
|
|
|
|
+
|
|
|
|
+/**************************** 方法区 ****************************/
|
|
|
|
+/** 打开抽屉 */
|
|
|
|
+const open = (id) => {
|
|
|
|
+ reset()
|
|
|
|
+ visible.value = true
|
|
|
|
+ if (id) {
|
|
|
|
+ loading.value = true
|
|
|
|
+ getReceipt(id).then((response) => {
|
|
|
|
+ form.value = response.data
|
|
|
|
+ loading.value = false
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ editStatus.value = true
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 取消按钮 */
|
|
|
|
+const cancel = () => {
|
|
|
|
+ visible.value = false
|
|
|
|
+ reset()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 表单重置 */
|
|
|
|
+const reset = () => {
|
|
|
|
+ form.value = {
|
|
|
|
+ id: null,
|
|
|
|
+ formCode: '',
|
|
|
|
+ formDate: proxy.parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
|
+ supplierId: '0',
|
|
|
|
+ supplierName: '',
|
|
|
|
+ remark: '',
|
|
|
|
+ details: []
|
|
|
|
+ }
|
|
|
|
+ proxy.resetForm('formRef')
|
|
|
|
+}
|
|
|
|
+/***************************** 外协明细对话框相关 *****************************/
|
|
|
|
+// 打开外协明细选择对话框
|
|
|
|
+const handleShowDialogOutSourceDetails = () => {
|
|
|
|
+ const outsourceDetailIds = form.value.details.map((item) => item.outsourceDetailId)
|
|
|
|
+ proxy.$refs.dialogOutsourceDetailsRef.open(outsourceDetailIds)
|
|
|
|
+}
|
|
|
|
+// 外协明细选择带回
|
|
|
|
+const handleMultipleSelectedOutsourceDetails = (selection) => {
|
|
|
|
+ selection.forEach((item) => {
|
|
|
|
+ const newDetail = {
|
|
|
|
+ outsourceDetailId: item.id,
|
|
|
|
+ productDescription: item.productDescription,
|
|
|
|
+ productNum: item.productNum,
|
|
|
|
+ receiptNum: 0,
|
|
|
|
+ processNames: item.processNames,
|
|
|
|
+ remark: ''
|
|
|
|
+ }
|
|
|
|
+ form.value.details.push(newDetail)
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 提交按钮 */
|
|
|
|
+function submitForm() {
|
|
|
|
+ proxy.$refs['formRef'].validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ if (form.value.id != null) {
|
|
|
|
+ updateReceipt(form.value).then((response) => {
|
|
|
|
+ proxy.$modal.msgSuccess('修改成功')
|
|
|
|
+ visible.value = false
|
|
|
|
+ getList.value()
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ addReceipt(form.value).then((response) => {
|
|
|
|
+ proxy.$modal.msgSuccess('新增成功')
|
|
|
|
+ visible.value = false
|
|
|
|
+ getList.value()
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 暴露给父组件的方法 */
|
|
|
|
+defineExpose({
|
|
|
|
+ open
|
|
|
|
+})
|
|
|
|
+</script>
|