配套申请界面自定义及接口联调

applications/dee-mes/src/privateComponents/components/MatchRequestItemsCon/index.vue

 <!--
  * @Author: gjn
- * @Date: 2023-09-15 14:22:41
- * @Description:签审对象_检验环节
+ * @Date: 2023-11-08 9:51:41
+ * @Description:配套申请
 -->
 <template>
-  <div class="MatchRequestItemsCon">
+  <div v-dee-loading="loading" class="MatchRequestItemsCon">
+    <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+    <div class="dee-table dee-table-dis-border">
+      <el-table
+        ref="outerTable"
+        :data="tableData"
+        align="center"
+        :row-class-name="outerRowClassName"
+        row-key="id"
+        @selection-change="handleSelectionChange"
+        @expand-change="handleExpandChange"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <!-- 展开项表格开始位置-->
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-table
+              v-dee-loading="internalLoading"
+              :data="props.row.internalDataList"
+              align="center"
+              highlight-current-row
+              stripe
+            >
+              <el-table-column
+                type="index"
+                :width="80"
+                label="序号"
+                align="center"
+              />
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <span class="btn-icon-s" title="删除" @click="deleteOccupy(scope.row,props.row)">
+                    <img src="/icons/c-remove.png" alt="">
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-for="(item,index) in internalColumn"
+                :key="index"
+                align="center"
+                :prop="item.key"
+                :label="item.title"
+              />
+            </el-table>
+          </template>
+        </el-table-column>
+        <!-- 展开项里表格结束位置 -->
+        <el-table-column
+          type="index"
+          :width="80"
+          label="序号"
+          align="center"
+        />
+        <el-table-column
+          v-for="(item,index) in outerColumn"
+          :key="index"
+          align="center"
+          :prop="item.key"
+          :label="item.title"
+          :min-width="item.minWidth"
+        />
+        <el-table-column label="其他库房详情" min-width="110">
+          <template slot-scope="scope">
+            <span class="link" @click="openDetails(scope,'otherStorageZoneItems')">
+              查看
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="其他物料占用详情" min-width="130">
+          <template slot-scope="scope">
+            <span class="link" @click="openDetails(scope,'otherMatchOccupyItems')">
+              查看
+            </span>
+          </template>
+        </el-table-column>
+
+      </el-table>
+
+    </div>
+    <dee-dialog
+      v-if="dialogVisible"
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="70%"
+      center
+    >
       <dee-as-com
-      ref="table"
+        ref="dialogTable"
+        table-height="500px"
         :lay-config="cmpOptions"
-      :basic-data="basicData"
+        :basic-data="dialogTitle==='占用'?selectionRows[0]:currentRow"
       />
+      <div v-if="dialogTitle==='占用'" class="dialogBtn">
+        <el-button
+          slot="sub_text"
+          type="primary"
+          class="searchBtn"
+          @click="handleOccupy"
+          @keyup.native.enter="handleOccupy"
+        >确定</el-button>
+        <el-button
+          slot="sub_cancel"
+          type="info"
+          class="searchBtn"
+          @click="handleClose"
+        >取消</el-button>
+      </div>
+    </dee-dialog>
   </div>
 </template>
 
 <script>
+import { get, post } from '@/utils/http'
 export default {
   name: 'MatchRequestItemsCon',
   components: {},
@@ -25,27 +131,179 @@ export default {
   },
   data() {
     return {
-      cmpOptions: {
-        typeName: 'OutStorageMatchItem',
-        layKey: 'matchRequestItems'
+      loading: false,
+      internalLoading: false,
+      outerColumn: [
+        { 'title': '物料编码', 'key': 'extMaterial.resCode', 'minWidth': 100 },
+        { 'title': '物料名称', 'key': 'extMaterial.resName', 'minWidth': 100 },
+        { 'title': '需求数量', 'key': 'reqAmount', 'minWidth': 100 },
+        { 'title': '库房', 'key': 'productWorkCenter.extname', 'minWidth': 100 },
+        { 'title': '占用数量', 'key': 'takeAmount', 'minWidth': 120 },
+        { 'title': '版本', 'key': 'elecHardwareConfPieceNo' }
+      ],
+      internalColumn: [
+        { 'title': '验收单编号', 'key': 'inventory.testNo' },
+        { 'title': '库位', 'key': 'inventory.workunit' },
+        { 'title': '分配数量', 'key': 'allocatedAmount' },
+        { 'title': '批次号', 'key': 'inventory.lotNo' },
+        { 'title': '序列号', 'key': 'inventory.serno' },
+        { 'title': '入库时间', 'key': 'inventory.createTime' },
+        { 'title': '状态', 'key': 'outStorageState' },
+        { 'title': '架次', 'key': 'inventory.sorties' },
+        { 'title': '版次', 'key': 'inventory.softConfPieceNo' }
+      ],
+      tableData: [],
+      tools: [{
+        name: '占用',
+        icon: '/icons/c-creatBook.png',
+        handler: {
+          click: () => {
+            if (this.selectionRows.length !== 1) return this.$utils.showMessageWarning('必须选择一条数据进行操作!')
+            this.dialogTitle = '占用'
+            this.dialogVisible = true
+            this.cmpOptions = { typeName: 'Inventory', layKey: 'matchApplyOccupy' }
           }
         }
       },
+      {
+        name: '发起配套出库申请',
+        icon: '/icons/c-sensN.png',
+        handler: {
+          click: () => {
+            this.handleSubmit()
+          }
+        }
+      }],
+      dialogTitle: '',
+      dialogVisible: false,
+      cmpOptions: {
+        typeName: 'Inventory',
+        layKey: 'matchApplyOccupy'
+      },
+      selectionRows: [],
+      currentRow: {}
+    }
+  },
   computed: {},
   watch: {},
   created() {
-    this.$bus.$on('refreshMatchItems', (data) => {
-      this.$refs.table && this.$refs.table.$refs.asCom.getData()
+  },
+  mounted() {
+    this.getOuterTableData()
+  },
+  methods: {
+    getOuterTableData() {
+      this.loading = true
+      get(`/ExtSupportingItem/searchByAo?aoId=${this.basicData.extProcessPlanId}`).then(res => {
+        if (!res.items) return
+        this.tableData = res.items.map(item => {
+          item.internalDataList = []
+          return item
         })
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleExpandChange(row, rows) {
+      const isExpend = rows.some(r => r.id === row.id) // 判断当前行展开状态
+      if (isExpend) {
+        this.getInternalColumn(row)
+      } else {
+        return
+      }
     },
-  mounted() {},
-  // 组件方法
-  methods: {}
+    getInternalColumn(row) {
+      get(`/ExtSupportingItem/searchTakeInfo?supportingItemId=${row.id}`).then(res => {
+        this.tableData.forEach((item, index) => {
+          if (item.id === row.id) {
+            item.internalDataList = res.items
+          }
+        })
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+      })
+    },
+    outerRowClassName({ row, rowIndex }) {
+      return 'outer-table-row'
+    },
+    handleOccupy() {
+      const targetSelect = this.$refs.dialogTable && this.$refs.dialogTable.$refs.asCom && this.$refs.dialogTable.$refs.asCom.selectedData || []
+      if (!targetSelect.length) return this.$utils.showMessageWarning('请选择需要操作的数据!')
+      const params = targetSelect.map(item => {
+        return {
+          inventoryId: item.id,
+          allocatedAmount: item.allocatedAmount
+        }
+      })
+      const noAmount = params.find(item => !item.allocatedAmount)
+      if (noAmount) return this.$utils.showMessageWarning('所勾选的数据占用数量必填!')
+      post(`/ExtSupportingItem/adjust/reTake?itemId=${this.selectionRows[0].id}`, params).then(res => {
+        this.$utils.showMessageSuccess('占用成功!')
+        this.handleClose()
+        this.getInternalColumn(this.selectionRows[0])
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+      })
+    },
+    deleteOccupy(row, outerRow) {
+      post(`/ExtSupportingItem/adjust/cancelTake?jobResponseId=${row.id}`).then(res => {
+        this.$utils.showMessageSuccess('解除成功!')
+        this.getInternalColumn(outerRow)
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+      })
+    },
+    handleSelectionChange(row) {
+      this.selectionRows = row
+    },
+    openDetails(scope, layKey) {
+      this.currentRow = JSON.parse(JSON.stringify(scope.row))
+      this.dialogTitle = scope.column.label
+      this.dialogVisible = true
+      this.cmpOptions = { typeName: 'Inventory', layKey: layKey }
+    },
+    handleSubmit() {
+      if (!this.selectionRows.length) return this.$utils.showMessageWarning('请选择需要操作的数据!')
+      const ids = this.selectionRows.map(item => item.id)
+      post(`/OutStorageRequest/outStorageMatch/submit`, ids).then(res => {
+        this.$utils.showMessageSuccess('提交成功!')
+        this.refreshAllIn(this.selectionRows)
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+      })
+    },
+    refreshAllIn(selectionRows) {
+      selectionRows.forEach(row => {
+        this.getInternalColumn(row)
+      })
+    },
+    handleClose() {
+      this.dialogVisible = false
+    }
+  }
 }
 </script>
 
 <style  lang='scss'>
 .MatchRequestItemsCon{
-  height: 100%;
+  height:calc(100% - 20px);
+  .btn-icon-s{
+    img{
+      height: 18px;
+      width: 18px;
+    }
+ }
+ .el-table .el-table__cell{
+  padding: 6px 0!important;
+ }
+  .outer-table-row{
+    background-color:#eebda81a;
+  }
 }
 </style>