出租设备查询

src/api/search/equipment.js

@@ -27,6 +27,14 @@ export function getRentDetailApi(query) {
     })
 }
 
+// 获取出租装备列表
+export function getLeaseDevListApi(query) {
+    return request({
+        url: '/material-mall/comprehensive/getLeaseDevList',
+        method: 'get',
+        params: query
+    })
+}
 
 
 

src/main.js

@@ -25,6 +25,7 @@ import {
     selectDictLabel,
     selectDictLabels,
     handleTree,
+    indexContinuation
 } from '@/utils/bonus'
 // 分页组件
 import Pagination from '@/components/Pagination'
@@ -58,6 +59,7 @@ Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
 Vue.prototype.globalUrl = global_
+Vue.prototype.indexContinuation = indexContinuation
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)

src/utils/bonus.js

@@ -232,3 +232,8 @@ export function tansParams(params) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+
+// 处理表格索引延续问题
+export function indexContinuation(num, size) {
+  return (num - 1) * size + 1
+}

src/views/leaseSearch/index.vue

@@ -0,0 +1,168 @@
+<template>
+    <!-- 基础页面 -->
+    <div class="app-container">
+        <el-form
+            v-show="showSearch"
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            inline
+            @submit.native.prevent="handleQuery"
+        >
+            <el-form-item label="关键字" prop="keyWord">
+                <el-input
+                    v-model="queryParams.keyWord"
+                    placeholder="请输入工程名称"
+                    clearable
+                    @keyup.enter.native="handleQuery"
+                />
+            </el-form-item>
+
+            <!-- <el-form-item style="display: flex; justify-content: flex-end"> -->
+            <!-- 表单按钮 -->
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleQuery"
+                    >查询</el-button
+                >
+                <el-button icon="el-icon-refresh" @click="handleReset"
+                    >重置</el-button
+                >
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <!-- <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
+      </el-col> -->
+            <right-toolbar
+                :showSearch.sync="showSearch"
+                @queryTable="getList"
+            ></right-toolbar>
+        </el-row>
+
+        <el-table
+            :data="tableList"
+            fit
+            highlight-current-row
+            style="width: 100%"
+        >
+            <el-table-column
+                type="index"
+                width="55"
+                label="序号"
+                align="center"
+                :index="
+                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
+                "
+            />
+            <el-table-column
+                v-for="(column, index) in tableColumns"
+                show-overflow-tooltip
+                :key="column.prop"
+                :label="column.label"
+                :prop="column.prop"
+                align="center"
+            >
+                <template v-slot="scope" v-if="column.prop === 'typeCategory'">
+                    <span
+                        >{{ scope.row.firstName }}
+                        <span v-show="scope.row.firstName">></span>
+                        {{ scope.row.secondName
+                        }}<span v-show="scope.row.secondName">></span
+                        >{{ scope.row.thirdName }}</span
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+        />
+    </div>
+</template>
+
+<script>
+import { getLeaseDevListApi } from '@/api/search/equipment'
+
+export default {
+    data() {
+        return {
+            showSearch: true,
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                keyWord: '',
+            },
+            total: 0, // 总条数
+            // 表头
+            tableColumns: [
+                { label: '装备类目', prop: 'typeCategory' },
+                { label: '装备名称', prop: 'deviceName' },
+                { label: '装备型号', prop: 'typeName' },
+                { label: '在租数量', prop: 'deviceCount' },
+                { label: '出租方联系人', prop: 'person' },
+                { label: '出租方联系方式', prop: 'personPhone' },
+            ],
+            // 表格数据
+            tableList: [],
+        }
+    },
+    created() {
+        this.getList()
+    },
+    methods: {
+        // 查询
+        handleQuery() {
+            this.getList()
+        },
+        // 重置
+        handleReset() {
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.queryParams.keyWord = ''
+            this.getList()
+        },
+        // 获取列表
+        async getList() {
+            console.log('列表-查询', this.queryParams)
+            try {
+                const params = { ...this.queryParams }
+                const res = await getLeaseDevListApi(params)
+                console.log('🚀 ~ 获取列表 ~ res:', res)
+                this.tableList = res.data.rows
+                this.total = res.data.total || 0
+            } catch (error) {
+                console.log('🚀 ~ 获取列表 ~ error:', error)
+                this.tableList = []
+                this.total = 0
+            }
+        },
+        // 多选
+        selectionChange(val) {
+            console.log('selectionChange', val)
+        },
+        // 导出数据
+        handleExport() {
+            try {
+                let fileName = `数据_${new Date().getTime()}.xLsx`
+                let url = ''
+                const params = { ...this.queryParams }
+                console.log('🚀 ~ 导出 ~ params:', params)
+                // this.derive(url, params, fileName)
+            } catch (error) {
+                console.log('导出数据失败', error)
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped></style>