工机具使用查询二级开发

src/api/stquery/projUsingRecord.js

@@ -28,3 +28,11 @@ export function usingRecord(query) {
   })
 }
 
+// 获取 工程机具使用二级 列表
+export function getRecordListApi(query) {
+  return request({
+    url: '/material/projUsingRecord/getLeaseList',
+    method: 'get',
+    params: query
+  })
+}

src/views/stquery/projUsingRecord.vue

@@ -194,24 +194,36 @@
                 prop="unit"
                 :show-overflow-tooltip="true"
             />
-            <el-table-column
+            <el-table-column label="租赁数量" align="center" prop="outNum" :show-overflow-tooltip="true">
-                label="租赁数量"
+                <template slot-scope="scope">
-                align="center"
+                    <span class="clickText" v-if="scope.row.manageType == 0" @click="outNumDialog(scope.row)">
-                prop="outNum"
+                        {{ scope.row.outNum }}
-                :show-overflow-tooltip="true"
+                    </span>
-            />
+                    <span v-else>
-            <el-table-column
+                        {{ scope.row.outNum}}
-                label="归还数量"
+                    </span>
-                align="center"
+                </template>
-                prop="backNum"
+            </el-table-column>
-                :show-overflow-tooltip="true"
+            <el-table-column label="归还数量" align="center" prop="backNum" :show-overflow-tooltip="true">
-            />
+                <template slot-scope="scope">
-            <el-table-column
+                    <span class="clickText" v-if="scope.row.manageType == 0" @click="backNumDialog(scope.row)">
-                label="在用数量"
+                        {{ scope.row.backNum }}
-                align="center"
+                    </span>
-                prop="usNum"
+                    <span v-else>
-                :show-overflow-tooltip="true"
+                        {{ scope.row.backNum}}
-            />
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="在用数量" align="center" prop="usNum" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                    <span class="clickText" v-if="scope.row.manageType == 0" @click="usNumDialog(scope.row)">
+                        {{ scope.row.usNum }}
+                    </span>
+                    <span v-else>
+                        {{ scope.row.usNum}}
+                    </span>
+                </template>
+            </el-table-column>
             <!-- <el-table-column label="在用总价值（元）" align="center" prop="xxx" :show-overflow-tooltip="true" />
       <el-table-column label="投入总价值（元）" align="center" prop="sss" :show-overflow-tooltip="true" /> -->
         </el-table>
@@ -224,6 +236,47 @@
             :page-sizes="[5, 10, 15, 20, 30]"
             @pagination="getList"
         />
+
+        <el-dialog :title="titleDialog" :visible.sync="showDialog" width="80%" @close="closeDialog">
+            <el-form :model="dialogQuery" ref="dialogQuery" size="small" :inline="true" label-width="80px">
+                <el-form-item label="设备编号" prop="maCode">
+                    <el-input
+                    v-model="dialogQuery.maCode"
+                    placeholder="请输入设备编号"
+                    clearable :maxlength="20"
+                    style="width: 240px"/>
+                </el-form-item>
+
+                <el-form-item>
+                    <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleDialogQuery"
+                    >查询</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table :data="dialogList" border>
+                <el-table-column label="序号" align="center" width="80" type="index"
+                    :index="indexContinuation(dialogQuery.pageNum, dialogQuery.pageSize)">
+                </el-table-column>
+                <el-table-column label="机具名称" prop="typeName" align="center" />
+                <el-table-column label="规格型号" prop="typeModelName" align="center" />
+                <el-table-column label="设备编号" prop="maCode" align="center" />
+                <el-table-column label="租赁价" prop="leasePrice" align="center" />
+                <el-table-column label="购置价" prop="buyPrice" align="center" />
+                <el-table-column label="租赁时间" prop="startTime" align="center" />
+                <el-table-column v-if="dialogType != 0" label="归还时间" prop="endTime" align="center" />
+            </el-table>
+
+            <pagination
+            v-show="dialogTotal > 0"
+            :total="dialogTotal"
+            :page.sync="dialogQuery.pageNum"
+            :limit.sync="dialogQuery.pageSize"
+            @pagination="getRecords"
+            />
+        </el-dialog>
     </div>
 </template>
 
@@ -232,6 +285,7 @@ import {
     getUnitData,
     getProData,
     usingRecord,
+    getRecordListApi
 } from '@/api/stquery/projUsingRecord'
 
 export default {
@@ -275,6 +329,18 @@ export default {
 
             tableList: [],
             isUseChecked: false,
+
+            titleDialog: '', //二级弹窗标题
+            showDialog: false, //二级弹窗显示
+            dialogType: undefined, // 弹窗类型
+            dialogList: [], // 弹窗列表数据
+            dialogQuery: {
+              pageNum: 1,
+              pageSize: 10,
+              maCode: undefined,
+              numType: undefined, // 0租赁 1归还
+            },
+            dialogTotal: 0,
         }
     },
     created() {
@@ -373,6 +439,62 @@ export default {
             }
             this.getList()
         },
+
+        //租赁弹窗
+        outNumDialog(row) {
+            this.titleDialog = '查看租赁'
+            this.showDialog = true
+            this.dialogType = null
+            this.dialogQuery.typeId= row.typeId
+            this.dialogQuery.agreementId= row.agreementId
+            this.dialogQuery.numType= this.dialogType
+            this.getRecords()
+        },
+        //归还弹窗
+        backNumDialog(row) {
+            this.titleDialog = '查看归还'
+            this.showDialog = true
+            this.dialogType = 1
+            this.dialogQuery.typeId= row.typeId
+            this.dialogQuery.agreementId= row.agreementId
+            this.dialogQuery.numType= this.dialogType
+            this.getRecords()
+        },
+        //在用弹窗
+        usNumDialog(row) {
+            this.titleDialog = '查看在用'
+            this.showDialog = true
+            this.dialogType = 0
+            this.dialogQuery.typeId= row.typeId
+            this.dialogQuery.agreementId= row.agreementId
+            this.dialogQuery.numType= this.dialogType
+            this.getRecords()
+        },
+        //查看二级列表
+        handleDialogQuery() {
+            this.showDialog = true
+            this.dialogQuery.pageNum = 1;
+            this.dialogQuery.keyWord = "";
+            this.getRecords()
+        },
+        /** 查看二级列表 */
+        getRecords() {
+            getRecordListApi(this.dialogQuery).then((response) => {
+            this.dialogList = response.data.rows
+            this.dialogTotal = response.data.total
+            })
+        },
+
+        //关闭弹窗
+        closeDialog () {
+            this.showDialog = false
+            this.dialogQuery = {
+                pageNum: 1,
+                pageSize: 10,
+                maCode: undefined,
+                numType: undefined, // 0租赁 1归还
+            }
+        }
     },
 }
 </script>
@@ -381,4 +503,8 @@ export default {
     width: 60px !important;
     margin-bottom: 10px;
 }
+.clickText {
+  color: #02a7f0;
+  cursor: pointer;
+}
 </style>