|
|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <AidopDemoShell :title="pageTitle" subtitle="只读列表">
|
|
|
+ <!--
|
|
|
+ S5 委外发料单 · 只读骨架页(S5-OUTSOURCE-ISSUE-PROTOTYPE-FIELD-MAP-1)。
|
|
|
+ 列名/查询项/详情结构均来自旧系统截图与 sql.txt(NbrMaster / NbrDetail),
|
|
|
+ 真实业务数据源尚未定位(见字段对接表草案),本页不接真实接口、不写任何数据,
|
|
|
+ 列表恒为空数据结构,仅承接页面与字段结构。
|
|
|
+ -->
|
|
|
+ <el-form :inline="true" :model="query" class="mb12" @submit.prevent>
|
|
|
+ <el-form-item label="发料单号">
|
|
|
+ <el-input v-model="query.nbr" clearable style="width: 200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="委外单号">
|
|
|
+ <el-input v-model="query.address" clearable style="width: 200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发料日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ type="daterange"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ unlink-panels
|
|
|
+ style="width: 260px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="doSearch">查询</el-button>
|
|
|
+ <el-button @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table :data="rows" row-key="id" border stripe>
|
|
|
+ <el-table-column type="index" label="#" width="60" align="center" />
|
|
|
+ <el-table-column prop="nbr" label="发料单号" min-width="180" show-overflow-tooltip resizable />
|
|
|
+ <el-table-column prop="date" label="发料日期" width="140" resizable />
|
|
|
+ <el-table-column prop="statusDescr" label="状态" width="90" resizable />
|
|
|
+ <el-table-column prop="address" label="委外单号" min-width="180" show-overflow-tooltip resizable />
|
|
|
+ <el-table-column prop="departmentDescr" label="部门" min-width="140" show-overflow-tooltip resizable />
|
|
|
+ <el-table-column prop="user1" label="发料人" width="120" resizable />
|
|
|
+ <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip resizable />
|
|
|
+ <el-table-column prop="createUser" label="创建用户" width="120" resizable />
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="160" resizable />
|
|
|
+ <el-table-column label="操作" width="220" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" @click="viewRow(row)">查看</el-button>
|
|
|
+ <el-button link disabled>编辑</el-button>
|
|
|
+ <el-button link disabled>物料卡</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <el-empty description="暂无数据" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="pager">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="query.page"
|
|
|
+ v-model:page-size="query.pageSize"
|
|
|
+ :total="total"
|
|
|
+ :page-sizes="[10, 20, 50]"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查看详情骨架:基础信息 + 发料单明细结构(来自 4.png / 5.png),只读、空结构 -->
|
|
|
+ <el-dialog v-model="detailVisible" title="委外发料单" width="900px" append-to-body>
|
|
|
+ <el-descriptions :column="3" border title="基础信息">
|
|
|
+ <el-descriptions-item label="领料单号">{{ detail.nbr }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="委外采购单">{{ detail.address }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="发料日期">{{ detail.date }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="部门">{{ detail.departmentDescr }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="申请人">{{ detail.createUser }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="发料人">{{ detail.user1 }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="备注" :span="3">{{ detail.remark }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <div class="detail-section-title">发料单明细</div>
|
|
|
+ <el-table :data="detailLines" border stripe size="small">
|
|
|
+ <el-table-column type="index" label="项次" width="64" align="center" />
|
|
|
+ <el-table-column prop="itemNum" label="物料编码" min-width="140" />
|
|
|
+ <el-table-column prop="um" label="单位" width="80" />
|
|
|
+ <el-table-column prop="qtyOrd" label="工单需求数" width="110" />
|
|
|
+ <!-- 发料数量 / 已发数 / 批次号 的真实 NbrDetail 列名未确认(见待补字段表),仅承接表头结构,不绑定推测 key -->
|
|
|
+ <el-table-column label="发料数量" width="100" />
|
|
|
+ <el-table-column label="已发数" width="90" />
|
|
|
+ <el-table-column prop="locationFrom" label="转出库位" width="120" />
|
|
|
+ <el-table-column prop="locationTo" label="转入库位" width="120" />
|
|
|
+ <el-table-column label="批次号" width="120" />
|
|
|
+ <el-table-column prop="status" label="状态" width="80" />
|
|
|
+ <el-table-column prop="remark" label="备注" min-width="120" />
|
|
|
+ <template #empty>
|
|
|
+ <el-empty description="暂无数据" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+ </AidopDemoShell>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="aidopS5WarehouseOutsourceIssue">
|
|
|
+import { computed, reactive, ref } from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import AidopDemoShell from '/@/views/aidop/components/AidopDemoShell.vue';
|
|
|
+
|
|
|
+// 列表行结构(key 来自 sql.txt SELECT 列;本页不接真实接口,rows 恒为空)
|
|
|
+interface OutsourceIssueRow {
|
|
|
+ id?: number;
|
|
|
+ nbr?: string;
|
|
|
+ date?: string;
|
|
|
+ statusDescr?: string;
|
|
|
+ address?: string;
|
|
|
+ departmentDescr?: string;
|
|
|
+ user1?: string;
|
|
|
+ remark?: string;
|
|
|
+ createUser?: string;
|
|
|
+ createTime?: string;
|
|
|
+}
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+const pageTitle = computed(() => (route.meta?.title as string) || '委外发料单');
|
|
|
+
|
|
|
+const query = reactive({
|
|
|
+ nbr: '',
|
|
|
+ address: '',
|
|
|
+ dateStart: '',
|
|
|
+ dateEnd: '',
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+});
|
|
|
+const dateRange = ref<[string, string] | null>(null);
|
|
|
+
|
|
|
+// 真实数据源待补证(见字段对接表草案):本页不发起请求,列表保持空数据结构。
|
|
|
+const rows = ref<OutsourceIssueRow[]>([]);
|
|
|
+const total = ref(0);
|
|
|
+
|
|
|
+const detailVisible = ref(false);
|
|
|
+const detail = reactive<OutsourceIssueRow>({});
|
|
|
+const detailLines = ref<Record<string, unknown>[]>([]);
|
|
|
+
|
|
|
+function doSearch() {
|
|
|
+ query.dateStart = dateRange.value?.[0] || '';
|
|
|
+ query.dateEnd = dateRange.value?.[1] || '';
|
|
|
+ query.page = 1;
|
|
|
+ // 真实查询接口未就绪,仅维持空结构,不构造任何假数据。
|
|
|
+}
|
|
|
+
|
|
|
+function resetQuery() {
|
|
|
+ query.nbr = '';
|
|
|
+ query.address = '';
|
|
|
+ dateRange.value = null;
|
|
|
+ query.dateStart = '';
|
|
|
+ query.dateEnd = '';
|
|
|
+ query.page = 1;
|
|
|
+}
|
|
|
+
|
|
|
+function viewRow(row: OutsourceIssueRow) {
|
|
|
+ Object.assign(detail, row);
|
|
|
+ detailLines.value = [];
|
|
|
+ detailVisible.value = true;
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.mb12 {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+.pager {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.detail-section-title {
|
|
|
+ margin: 16px 0 8px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+</style>
|