devicesmgt/sgzb-ui/src/views/inventoryLogs/index.vue

<template>
    <!-- 库存日志 -->
    <div class="app-container">
        <el-row>
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
            >
                <el-form-item label="模块名称" prop="userName">
                    <el-input
                        placeholder="请输入模块名称"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="请求方式" prop="phonenumber">
                    <el-input
                        placeholder="请输入请求方式"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="创建人" prop="status">
                    <el-select
                        placeholder="创建人"
                        clearable
                        filterable
                        style="width: 200px"
                    >
                    </el-select>
                </el-form-item>
                <el-form-item label="请求时间">
                    <el-date-picker
                        style="width: 200px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >搜索</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
        </el-row>

        <el-table :data="tableList" border>
            <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
            />
            <el-table-column align="center" prop="title" label="模块名称" />
            <el-table-column align="center" prop="title" label="请求方式" />
            <el-table-column align="center" prop="title" label="实例" />
            <el-table-column align="center" prop="v_name" label="机具名称" />
            <el-table-column align="center" prop="title" label="机具规格" />
            <el-table-column align="center" prop="title" label="描述" />
            <el-table-column align="center" prop="title" label="响应内容" />
            <el-table-column align="center" prop="title" label="请求时间" />
            <el-table-column align="center" prop="title1" label="创建人" />
            <el-table-column align="center" prop="title" label="备注" />
            <el-table-column align="center" label="操作">
                <template slot-scope="{ row }">
                    <el-button size="mini" type="text">查询</el-button>
                    <el-button size="mini" type="text" style="color: #f56c6c"
                        >删除</el-button
                    >
                </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 { getLogsListApi } from '@/api/inventoryLogs'
    export default {
        name: 'myInventoryLogs',
        data() {
            return {
                tableList: [
                    { title: '12', methods: 'post', v_name: '机具' },
                    { title: '12', methods: 'post', v_name: '机具' },
                    { title: '12', methods: 'post', v_name: '机具' },
                    { title: '12', methods: 'post', v_name: '机具' },
                    { title: '12', methods: 'post', v_name: '机具' },
                    { title: '12', methods: 'post', v_name: '机具' },
                    { title: '12', methods: 'post', v_name: '机具' },
                    { title: '12', methods: 'post', v_name: '机具' },
                ],
                total: 5,
                queryParams: {
                    pageNum: 5,
                    pageSize: 1,
                },
            }
        },
        methods: {
            /* 查询列表 */
            async getList() {
                const res = await getLogsListApi(this.queryParams)
                console.log(res, '日志列表')
            },
            /* 搜索按钮操作 */
            handleQuery() {
                this.getList()
            },
            /* 重置按钮操作 */
            resetQuery() {
                this.resetForm('queryForm')
                this.getList()
            },
        },
        created() {
            this.getList()
        },
    }
</script>

<style scoped>
    .el-table :empty::before {
        content: '-';
        color: gray;
    }
</style>