优化后台资产盘点明细查看

ruoyi-ui/src/views/inventory/detail/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
       <el-form-item label="单据编号" prop="orderNumber">
         <el-input
           v-model="queryParams.orderNumber"
           placeholder="请输入单据编号"
           clearable
+          disabled
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
@@ -74,7 +75,8 @@
     <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="单据编号" align="center" prop="orderNumber" />
+      <el-table-column label="资产名称" align="center" prop="assetInfo.name" />
+      <el-table-column label="资产编号" align="center" prop="assetInfo.number" />
       <el-table-column label="盘点元数据" align="center" prop="inventoryMetadata" >
         <template slot-scope="props">
           <el-button
@@ -172,6 +174,14 @@ import { listDetail, getDetail, delDetail, addDetail, updateDetail } from "@/api
 export default {
   name: "Detail",
   dicts: ['sys_yes_no'],
+  props: {
+    orderNumber: {
+      type: String,
+      default() {
+        return null
+      }
+    }
+  },
   components: {
     AssetInfo: () => import("@/components/asset/assetCard.vue"),
   },
@@ -222,6 +232,7 @@ export default {
     };
   },
   created() {
+    this.queryParams.orderNumber = this.orderNumber
     this.getList();
   },
   methods: {
@@ -230,6 +241,9 @@ export default {
       this.loading = true;
       listDetail(this.queryParams).then(response => {
         this.detailList = response.rows;
+        this.detailList.forEach(element => {
+          element.assetInfo = JSON.parse(element.inventoryMetadata)
+        })
         this.total = response.total;
         this.loading = false;
       });
@@ -258,6 +272,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.queryParams.orderNumber = this.orderNumber
       this.handleQuery();
     },
     // 多选框选中数据

ruoyi-ui/src/views/inventory/inventory/index.vue

@@ -130,7 +130,13 @@
     <el-table v-loading="loading" :data="inventoryList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="资产盘点记录编号" align="center" prop="id" />
-      <el-table-column label="单据编号" align="center" prop="orderNumber" />
+      <el-table-column label="单据编号" align="center" prop="orderNumber" width="120">
+        <template slot-scope="scope">
+          <el-tooltip class="item" effect="dark" content="查看明细" placement="left">
+            <div class="clickNumber" @click="onOpenDetail(scope.row.orderNumber)">{{scope.row.orderNumber}}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
       <el-table-column label="任务名称" align="center" prop="name" />
       <el-table-column label="盘点部门" align="center" prop="deptName" >
         <!-- <template slot-scope="scope">
@@ -244,6 +250,10 @@
     <el-dialog :visible.sync="openUserSearch">
       <UserSearch @submit="onSelectUser" @cancel="() => {openUserSearch = false}" v-if="openUserSearch"></UserSearch>
     </el-dialog>
+
+    <el-dialog :visible.sync="openDetail" width="900px">
+      <InventoryDetaile :orderNumber="inventoryNumber" v-if="openDetail"></InventoryDetaile>
+    </el-dialog>
   </div>
 </template>
 
@@ -253,6 +263,7 @@ import { listInventory, getInventory, delInventory, addInventory, updateInventor
 import { treeSelect } from "@/api/asset/location";
 import { listDept } from "@/api/system/dept";
 import UserSearch from '@/components/SysUserSearch/index.vue'
+import InventoryDetaile from '@/views/inventory/detail/index.vue'
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
@@ -260,11 +271,16 @@ export default {
   dicts: ['inventory_result', 'asset_record_status', 'inventory_status'],
   components : {
     UserSearch,
+    InventoryDetaile,
     Treeselect
   },
   data() {
     return {
       openUserSearch: false,
+      // 是否显示明细
+      openDetail: false,
+      // 盘点单号
+      inventoryNumber: '',
       // 遮罩层
       loading: true,
       // 选中数组
@@ -331,6 +347,11 @@ export default {
     this.getDeptTree()
   },
   methods: {
+    onOpenDetail(number) {
+      this.inventoryNumber = number
+      console.log('inventoryNumber', this.inventoryNumber)
+      this.openDetail = true
+    },
     /** 查询部门下拉树结构 */
     getDeptTree() {
       deptTreeSelect().then((response) => {
@@ -482,4 +503,12 @@ export default {
     height: 32px;
   }
 }
+.clickNumber{
+  color: #409EFF;
+
+  &:hover{
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
 </style>