系统-工具管理-工具清单新增一张关联信息表格

1 month ago · 2465e3981f
2 changed files with 149 additions and 3 deletions
--- a/src/api/production/tool.js
+++ b/src/api/production/tool.js
@ -18,3 +18,7 @@ export const searchToolTransDetailPage = data =>
 // 出入库类型下拉列表
 export const searchToolTransTypeList = data =>
  createAPI('/production/tool/searchToolTransTypeList', 'post', data)
+
+// 工具实例出入库记录明细分页查询（工具清单联动明细）
+export const searchToolInstanceTransDetailPage = data =>
+  createAPI('/production/tool/searchToolInstanceTransDetailPage', 'post', data)
--- a/src/views/modules/tool/toolInstanceQuery.vue
+++ b/src/views/modules/tool/toolInstanceQuery.vue
@ -45,6 +45,7 @@
      :height="height"
      border
      highlight-current-row
+      @row-click="handleRowClick"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
@ -87,6 +88,42 @@
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
+
+    <!-- 明细（点击上方工具清单行联动显示） -->
+    <div class="trans-section" style="margin-top: 10px;">
+      <el-table
+        :data="detailList"
+        :height="detailHeight"
+        border
+        highlight-current-row
+        v-loading="detailLoading"
+        style="width: 100%;">
+        <el-table-column
+          v-for="(item,index) in detailColumnList"
+          :key="index"
+          :sortable="item.columnSortable"
+          :prop="item.columnProp"
+          header-align="center"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+          :align="item.align"
+          :fixed="item.fixed==''?false:item.fixed"
+          :min-width="item.columnWidth"
+          :label="item.columnLabel">
+          <template slot-scope="scope">
+            <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="detailSizeChange"
+        @current-change="detailCurrentChange"
+        :current-page="detailPageIndex"
+        :page-sizes="[20, 50, 100]"
+        :page-size="detailPageSize"
+        :total="detailTotal"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </div>
  </div>
 </template>

@ -94,7 +131,7 @@
 /**
 * 模具实例查询页面 - rqrq
 */
-import { searchToolInstancePage } from '@/api/production/tool.js'
+import { searchToolInstancePage, searchToolInstanceTransDetailPage } from '@/api/production/tool.js'

 /** rqrq - 仅需在此维护列；columnList 由 computed 转为与 cancelSfdcForWareHouse 相同字段结构 */
 const TOOL_INSTANCE_COLUMN_SPECS = [
@ -115,6 +152,21 @@ const TOOL_INSTANCE_COLUMN_SPECS = [
  { prop: 'repairReminder', label: '维修提醒', width: 220, align: 'left', tooltip: true, slotKey: 'reminder' }
 ]

+/** 出入库明细列（关联 tool_trans_header 获取类型/状态/经手人） */
+const TOOL_TRANS_DETAIL_COLUMN_SPECS = [
+  { prop: 'transNo', label: '出入库单号', width: 140, align: 'left', tooltip: true },
+  { prop: 'transType', label: '出入库类型', width: 130, align: 'left', tooltip: true },
+  { prop: 'createdDate', label: '出入库时间', width: 150, align: 'center' },
+  { prop: 'remark', label: '备注', width: 140, align: 'left', tooltip: true },
+  { prop: 'status', label: '单据状态', width: 90, align: 'center' },
+  { prop: 'receiver', label: '经手人', width: 90, align: 'left' },
+  { prop: 'wareHouseId', label: '仓库', width: 90, align: 'left' },
+  { prop: 'locationId', label: '库位', width: 90, align: 'left' },
+  { prop: 'orderRef1', label: '关联单号1', width: 120, align: 'left', tooltip: true },
+  { prop: 'orderRef2', label: '关联单号2', width: 120, align: 'left', tooltip: true },
+  { prop: 'orderRef3', label: '关联单号3', width: 120, align: 'left', tooltip: true }
+]
+
 export default {
  name: 'toolInstanceQuery',
  data () {
@ -134,7 +186,16 @@ export default {
      },
      pageIndex: 1,
      pageSize: 20,
-      totalPage: 0
+      totalPage: 0,
+
+      // 出入库明细（点击上方工具清单行联动加载）
+      detailHeight: 200,
+      detailLoading: false,
+      currentToolRow: null,
+      detailList: [],
+      detailPageIndex: 1,
+      detailPageSize: 20,
+      detailTotal: 0
    }
  },
  computed: {
@ -161,11 +222,35 @@ export default {
        showOverflowTooltip: !!spec.tooltip,
        slotKey: spec.slotKey || ''
      }))
+    },
+    detailColumnList () {
+      return TOOL_TRANS_DETAIL_COLUMN_SPECS.map(spec => ({
+        tableId: 'toolTransDetailList',
+        tableName: this.$route.meta.title,
+        columnProp: spec.prop,
+        columnLabel: spec.label,
+        columnHidden: false,
+        columnImage: false,
+        columnSortable: false,
+        columnWidth: spec.width,
+        format: null,
+        functionId: this.$route.meta.menuId,
+        sortLv: 0,
+        status: true,
+        fixed: '',
+        serialNumber: null,
+        columnType: null,
+        align: spec.align || 'left',
+        showOverflowTooltip: !!spec.tooltip,
+        slotKey: spec.slotKey || ''
+      }))
    }
  },
  mounted () {
    this.$nextTick(() => {
-      this.height = window.innerHeight - 280
+      const total = window.innerHeight - 280
+      this.height = Math.floor(total * 0.65) - 30
+      this.detailHeight = Math.floor(total * 0.47) - 30
    })
    // this.searchTable()
  },
@ -211,6 +296,51 @@ export default {
      this.searchTable()
    },

+    /** 点击上方工具清单行时联动加载出入库明细 */
+    handleRowClick (row) {
+      this.currentToolRow = row
+      this.detailPageIndex = 1
+      this.queryDetail()
+    },
+    /** 根据选中的工具实例查询出入库明细（时间倒排） */
+    queryDetail () {
+      const row = this.currentToolRow
+      if (!row || !row.toolInstanceId) {
+        this.detailList = []
+        this.detailTotal = 0
+        return
+      }
+      this.detailLoading = true
+      const payload = {
+        site: row.site ? String(row.site).trim() : undefined,
+        toolInstanceId: String(row.toolInstanceId).trim(),
+        page: this.detailPageIndex,
+        limit: this.detailPageSize
+      }
+      searchToolInstanceTransDetailPage(payload).then(({ data }) => {
+        this.detailLoading = false
+        if (data && data.code === 0 && data.page) {
+          this.detailList = data.page.list || []
+          this.detailTotal = data.page.totalCount
+        } else {
+          this.detailList = []
+          this.detailTotal = 0
+        }
+      }).catch(() => {
+        this.detailLoading = false
+        this.$message.error('明细查询失败')
+      })
+    },
+    detailSizeChange (val) {
+      this.detailPageSize = val
+      this.detailPageIndex = 1
+      this.queryDetail()
+    },
+    detailCurrentChange (val) {
+      this.detailPageIndex = val
+      this.queryDetail()
+    },
+
    /** rqrq - 动态导出列（与 cancelSfdcForWareHouse 相同实现） */
    fields () {
      let json = '{'
@ -249,3 +379,15 @@ export default {
  }
 }
 </script>
+
+<style scoped>
+.trans-section {
+  border: 1px solid #e4e7ed;
+  padding: 10px 10px 6px 10px;
+}
+.section-title {
+  margin: 0 0 6px 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>