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="modelTitle"
                label="模块名称"
            />
            <el-table-column align="center" prop="method" label="请求方式" />
            <el-table-column align="center" prop="task" label="实例" />
            <el-table-column align="center" prop="id" label="机具名称" />
            <el-table-column align="center" prop="typeId" label="机具规格" />
            <el-table-column align="center" prop="description" label="描述" />
            <el-table-column align="center" prop="time" label="日期" />
            <el-table-column align="center" label="状态">
                <template slot-scope="{ row }">
                    <el-tag size="mini" type="success" v-if="row.status == 0"
                        >正常</el-tag
                    >
                    <el-tag size="mini" type="warning" v-else>异常</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="creator" label="创建人" />
            <el-table-column align="center" prop="remark" label="备注" />
            <el-table-column align="center" label="操作">
                <template slot-scope="{ row }">
                    <el-button
                        size="mini"
                        type="text"
                        @click="previewLogsDetails(row.id)"
                        >详情</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"
        />

        <!-- 详情弹框 -->
        <el-dialog
            title="日志详情"
            :visible.sync="logsDetailsDialogVisible"
            width="60%"
        >
            <el-descriptions
                class="margin-top"
                :column="3"
                size="medium"
                border
                :labelStyle="commonStyle"
                :contentStyle="commonStyle"
            >
                <el-descriptions-item
                    v-for="(item, v) in detailsLabelList"
                    :key="v"
                >
                    <template slot="label"> {{ item.label }} </template>
                    {{ logsDetailsInfoDemo[item.content] || '' }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
    import { getLogsListApi, getLogsDetailsApi } from '@/api/inventoryLogs'
    export default {
        name: 'myInventoryLogs',
        data() {
            return {
                queryParams: {
                    pageNum: 5,
                    pageSize: 1,
                },
                tableList: [{ id: 1 }, { id: 2 }],
                total: 5,
                logsDetailsInfo: null /* 日志详情 */,
                logsDetailsDialogVisible: false,
                commonStyle: {
                    'text-align': 'center',
                },
                /* 日志详情label以及内容 */
                detailsLabelList: [
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                    { label: '占位', content: 'vdDemo' },
                ],
                logsDetailsInfoDemo: {
                    vdDemo: '123',
                },
            }
        },
        methods: {
            /* 查询列表 */
            async getList() {
                const { data: res } = await getLogsListApi()
                this.tableList = res.rows
                this.total = res.total
                console.log(res, '=======日志列表')
            },
            /* 搜索按钮 */
            handleQuery() {
                this.getList()
            },
            /* 重置按钮 */
            resetQuery() {
                this.resetForm('queryForm')
                this.getList()
            },
            /* 查看详情 */
            async previewLogsDetails(id) {
                // const { data: res } = await getLogsDetailsApi(id)
                // console.log(res, '=======日志详情')

                this.logsDetailsDialogVisible = true
                // this.logsDetailsInfo = res
            },
        },
        created() {
            this.getList()
        },
    }
</script>

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