water-design-const-web/src/views/basic/class-org/index.vue

<template>
    <!-- 基础管理-设备管理 -->
    <div class="app-container">
        <el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
            <el-form-item label="项目名称" prop="proName">
                <el-input
                    clearable
                    placeholder="请输入项目名称"
                    v-model="queryParams.proName"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="所属单位" prop="unit">
                <el-input
                    clearable
                    placeholder="请输入所属单位"
                    v-model="queryParams.unit"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="负责人" prop="chargePerson">
                <el-input
                    clearable
                    placeholder="请输入负责人"
                    v-model="queryParams.chargePerson"
                    @keyup.enter.native="handleQuery"
                />
            </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 :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="handleAddDevice"
                    v-hasPermi="['basic:device:add']"
                >
                    新建分类
                </el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="deviceList" border>
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="项目名称" align="center" />

            <el-table-column label="操作" align="center" width="240">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                        v-hasPermi="['basic:device:edit']"
                    >
                        编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        style="color: #f56c6c"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['basic:device:remove']"
                    >
                        删除分类
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getDeviceList"
        />

        <!-- 添加或修改岗位对话框 -->
        <el-dialog width="40%" append-to-body :title="addOrEditFormTitle" :visible.sync="addOrEditFormVisible">
            <AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
        </el-dialog>
    </div>
</template>

<script>
import AddOrEditForm from './addOrEditForm.vue'

export default {
    name: 'DeviceManage',
    components: {
        AddOrEditForm,
        UseOrReturnForm,
        UseRecordTable,
    },
    data() {
        return {
            total: 0, // 总条数
            loading: false, // 加载中
            addOrEditFormTitle: '新增', // 新增或编辑对话框标题
            addOrEditFormVisible: false, // 新增或编辑对话框是否显示
            useOrReturnFormTitle: '领用', // 领用或归还对话框标题
            useOrReturnFormVisible: false, // 领用或归还对话框是否显示
            useRecordFormVisible: false, // 使用记录对话框是否显示
            // 设备列表
            deviceList: [
                {
                    id: 1,
                    deviceName: '设备1',
                    deviceCode: '123456',
                    Keeper: '张三',
                    status: '正常',
                    remark: '备注1',
                },
                {
                    id: 2,
                    deviceName: '设备2',
                    deviceCode: '123456',
                    Keeper: '李四',
                    status: '异常',
                    remark: '备注2',
                },
            ],

            // 列配置
            columnList: [
                {
                    label: '设备名称',
                    prop: 'deviceName',
                },
                {
                    label: '设备编号',
                    prop: 'deviceCode',
                },
                {
                    label: '所属保管人',
                    prop: 'Keeper',
                },
                {
                    label: '设备状态',
                    prop: 'status',
                },
                {
                    label: '备注',
                    prop: 'remark',
                },
            ],

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                proName: undefined,
                unit: undefined,
                chargePerson: undefined,
            },
        }
    },
    created() {
        // this.getDeviceList()
    },
    methods: {
        // 查询按钮
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getDeviceList()
        },

        // 重置按钮
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },

        // 新增按钮操作
        handleAddDevice() {
            this.addOrEditFormTitle = '新增'
            this.editForm = null
            this.addOrEditFormVisible = true
        },

        //  获取设备列表
        getDeviceList() {
            this.loading = true
            listProject(this.queryParams).then((response) => {
                this.proList = response.rows
                this.total = response.total
                this.loading = false
            })
        },

        // 领用或归还按钮
        handleUseOrReturn(row) {
            console.log(row)
            this.useOrReturnFormTitle = row.status == '正常' ? '领用' : '归还'
            this.useOrReturnFormVisible = true
        },

        // 查看记录按钮
        handleViewRecord(row) {
            console.log(row)
            this.useRecordFormVisible = true
        },

        // 编辑按钮
        handleEdit(row) {
            this.addOrEditFormTitle = '编辑'
            this.addOrEditFormVisible = true
            const { deviceId, deviceName, deviceCode, remark, Keeper } = row
            const editForm = { deviceId, deviceName, deviceCode, remark, Keeper }
            this.$nextTick(() => {
                this.$refs.addOrEditComponentRef.setFormData(editForm)
            })
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.addOrEditFormTitle = '编辑'
            this.addOrEditFormVisible = true
        },

        // 删除按钮
        handleDelete(row) {},

        // 关闭新增或编辑对话框
        closeAddOrEditFormDialog() {
            this.$refs.addOrEditComponentRef.resetForm()
            this.addOrEditFormVisible = false
        },

        // 关闭领用或归还对话框
        closeUseOrReturnFormDialog() {
            this.$refs.useOrReturnFormComponentRef.resetForm()
            this.useOrReturnFormVisible = false
        },
    },
}
</script>