|
@@ -0,0 +1,332 @@
|
|
|
+<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" size="small" icon="Edit" @click="editStatus = true">编辑</el-button>
|
|
|
+ <el-button v-if="form.id && editStatus" type="info" size="small" icon="Close" @click="editStatus = false">
|
|
|
+ 取消编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="form.id" type="success" size="small" @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" :rules="rules" label-width="120px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="单据号" prop="formCode">
|
|
|
+ <el-input v-if="editStatus" v-model="form.formCode" disabled placeholder="系统自动生成" />
|
|
|
+ <span v-else>{{ form.formCode }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="表单日期" prop="formDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-if="editStatus"
|
|
|
+ clearable
|
|
|
+ v-model="form.formDate"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="请选择表单日期"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <span v-else>{{ parseTime(form.formDate, '{y}-{m}-{d}') }}</span>
|
|
|
+ </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="deliveryMethod">
|
|
|
+ <el-select v-if="editStatus" v-model="form.deliveryMethod" clearable placeholder="请选择">
|
|
|
+ <el-option v-for="dict in deliveryMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ <span v-else>{{ form.deliveryMethod }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运费单价" prop="freightPrice">
|
|
|
+ <el-input-number
|
|
|
+ v-if="editStatus"
|
|
|
+ v-model="form.freightPrice"
|
|
|
+ :min="0"
|
|
|
+ :precision="2"
|
|
|
+ controls-position="right"
|
|
|
+ />
|
|
|
+ <span v-else>{{ form.freightPrice }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运费总价" prop="freightAmount">
|
|
|
+ <el-input-number
|
|
|
+ v-if="editStatus"
|
|
|
+ v-model="form.freightAmount"
|
|
|
+ :min="0"
|
|
|
+ :precision="2"
|
|
|
+ controls-position="right"
|
|
|
+ />
|
|
|
+ <span v-else>{{ form.freightAmount }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="带箱方式:" prop="packagingMethod">
|
|
|
+ <el-select v-if="editStatus" v-model="form.packagingMethod" clearable placeholder="请选择">
|
|
|
+ <el-option v-for="dict in packagingMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ <span v-else>{{ form.packagingMethod }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-if="editStatus" v-model="form.remark" placeholder="请输入备注" />
|
|
|
+ <span v-else>{{ form.remark }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <!-- 渲染数据区 -->
|
|
|
+ <div class="form-details-btns-container">
|
|
|
+ <el-button type="primary" icon="Plus" @click="handleShowDialogProducts" v-hasPermi="['business:outsource:add']">
|
|
|
+ 添加外协产品明细
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="el-table-container">
|
|
|
+ <div class="el-table-inner-container">
|
|
|
+ <el-table v-loading="loading" :data="formatDetails" size="small" border height="100%">
|
|
|
+ <el-table-column label="批次号" align="center" prop="lotCode" width="120" />
|
|
|
+ <el-table-column label="产品描述" align="center" prop="supplierName" width="320" />
|
|
|
+ <el-table-column
|
|
|
+ :label="form.packagingMethod === 0 ? '箱号' : '原箱号'"
|
|
|
+ align="center"
|
|
|
+ prop="original_carrier"
|
|
|
+ width="320"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ v-if="form.packagingMethod === 1"
|
|
|
+ label="新箱号"
|
|
|
+ align="center"
|
|
|
+ prop="new_carrier"
|
|
|
+ width="320"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-if="editStatus" v-model="scope.row.originalCarrier" readonly placeholder="请选择新箱号">
|
|
|
+ <template #append>
|
|
|
+ <el-button icon="Search" @click="handleShowDialogOutsourceCarriers" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <span v-else>{{ scope.row.originalCarrier }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" align="center" prop="remark" />
|
|
|
+ <el-table-column
|
|
|
+ v-if="editStatus"
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ width="144"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ icon="Delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['business:outsource:remove']"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 外协商选择 -->
|
|
|
+ <dialog-suppliers ref="dialogSuppliersRef" :single-selected="handleSingleSelectedSupplier" />
|
|
|
+ <!-- 产品选择 -->
|
|
|
+ <dialog-products
|
|
|
+ ref="dialogProductsRef"
|
|
|
+ :supplier-id="form.supplierId"
|
|
|
+ :multiple-selected="handleMultipleSelectedProducts"
|
|
|
+ />
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { getOrder, addOrder, updateOrder } from '@/api/business/outsourcedOrder'
|
|
|
+import dialogSuppliers from './DialogSuppliers'
|
|
|
+import dialogProducts from './DialogProducts'
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
+/** 父组件传参 */
|
|
|
+const props = defineProps({
|
|
|
+ getList: {
|
|
|
+ type: Function,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ deliveryMethod: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
+ },
|
|
|
+ packagingMethod: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
+ }
|
|
|
+})
|
|
|
+const { getList, deliveryMethod, packagingMethod } = toRefs(props)
|
|
|
+/** 字典数组区 */
|
|
|
+/** 表单抽屉 页变量 */
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+const multiple = ref(true)
|
|
|
+const visible = ref(false)
|
|
|
+const editStatus = ref(false)
|
|
|
+const isFullscreen = ref(false)
|
|
|
+const webHost = import.meta.env.VITE_APP_BASE_API
|
|
|
+const form = ref({})
|
|
|
+const formatDetails = ref([])
|
|
|
+const currentDetail = ref({})
|
|
|
+const rules = {
|
|
|
+ supplierName: [{ required: true, message: '外协商名称不能为空', trigger: 'blur' }]
|
|
|
+}
|
|
|
+const emptyDetail = ref({
|
|
|
+ id: null,
|
|
|
+ lotId: null,
|
|
|
+ dayworkId: null,
|
|
|
+ productId: null,
|
|
|
+ productDescription: null,
|
|
|
+ technologicalProcessId: null,
|
|
|
+ technologyVersion: null,
|
|
|
+ originalCarrier: null,
|
|
|
+ originalCarrierCount: null,
|
|
|
+ newCarrier: null,
|
|
|
+ newCarrierCount: null,
|
|
|
+ remark: null
|
|
|
+})
|
|
|
+
|
|
|
+/*********************** 方法区 ****************************/
|
|
|
+/** 打开抽屉 */
|
|
|
+function open(id) {
|
|
|
+ reset()
|
|
|
+ visible.value = true
|
|
|
+ if (id) {
|
|
|
+ getOrder(id).then((response) => {
|
|
|
+ form.value = response.data
|
|
|
+ form.value.detail = []
|
|
|
+ editStatus.value = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ editStatus.value = true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 查询表单信息 */
|
|
|
+function getForm() {
|
|
|
+ loading.value = true
|
|
|
+ getOrder(form.value.id).then((response) => {
|
|
|
+ loading.value = false
|
|
|
+ form.value = response.data
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 取消按钮 */
|
|
|
+function cancel() {
|
|
|
+ visible.value = false
|
|
|
+ reset()
|
|
|
+}
|
|
|
+
|
|
|
+/** 表单重置 */
|
|
|
+function reset() {
|
|
|
+ form.value = {
|
|
|
+ id: null,
|
|
|
+ tenantId: null,
|
|
|
+ formCode: null,
|
|
|
+ formDate: proxy.parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
+ supplierId: '0',
|
|
|
+ supplierName: '',
|
|
|
+ deliveryMethod: '0',
|
|
|
+ freightPrice: 0.0,
|
|
|
+ freightAmount: 0.0,
|
|
|
+ packagingMethod: '0',
|
|
|
+ remark: null,
|
|
|
+ details: []
|
|
|
+ }
|
|
|
+ proxy.resetForm('formRef')
|
|
|
+}
|
|
|
+/** 提交按钮 */
|
|
|
+function submitForm() {
|
|
|
+ proxy.$refs['formRef'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (form.value.id != null) {
|
|
|
+ updateOrder(form.value).then((response) => {
|
|
|
+ proxy.$modal.msgSuccess('修改成功')
|
|
|
+ visible.value = false
|
|
|
+ getList.value()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addOrder(form.value).then((response) => {
|
|
|
+ proxy.$modal.msgSuccess('新增成功')
|
|
|
+ visible.value = false
|
|
|
+ getList.value()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+/***************************** 外协商对话框相关 *****************************/
|
|
|
+// 打开外协商选择对话框
|
|
|
+const handleShowDialogSuppliers = () => {
|
|
|
+ proxy.$refs.dialogSuppliersRef.open()
|
|
|
+}
|
|
|
+// 外协商选择带回
|
|
|
+const handleSingleSelectedSupplier = (data) => {
|
|
|
+ form.value.supplierId = data.id
|
|
|
+ form.value.supplierName = data.name
|
|
|
+}
|
|
|
+
|
|
|
+/***************************** 产品对话框相关 *****************************/
|
|
|
+// 打开产品选择对话框
|
|
|
+const handleShowDialogProducts = () => {
|
|
|
+ proxy.$refs.dialogProductsRef.open()
|
|
|
+}
|
|
|
+// 产品选择带回
|
|
|
+const handleMultipleSelectedProducts = (selection) => {
|
|
|
+ selection.forEach((item) => {
|
|
|
+ const newDetail = {}
|
|
|
+ form.value.details.push(newDetail)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/***************************** 外协箱子对话框相关 *****************************/
|
|
|
+// 打开外协箱子选择对话框
|
|
|
+const handleShowDialogOutsourceCarriers = () => {}
|
|
|
+// 产品选择带回
|
|
|
+const handleMultipleSelectedOutsourceCarriers = (selection) => {
|
|
|
+ selection.forEach((item) => {
|
|
|
+ const newDetail = {}
|
|
|
+ form.value.details.push(newDetail)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 暴露给父组件的方法 */
|
|
|
+defineExpose({
|
|
|
+ open
|
|
|
+})
|
|
|
+</script>
|