<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" inline>
            <el-form-item label="设备名称">
                <el-input v-model="queryParams.equipmentName" clearable placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item label="归属类型">
                <el-select v-model="queryParams.affiliationType" placeholder="请选择归属类型" clearable>
                    <el-option v-for="(item, index) in dict.type.affiliation_type" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分类编码">
                <el-input v-model="queryParams.classificationCode" clearable placeholder="请输入分类编码"></el-input>
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select v-model="queryParams.equipmentState" clearable placeholder="请选择设备状态">
                    <el-option v-for="(item, index) in dict.type.equipment_state" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-button class="ml20" type="primary" icon="el-icon-search" size="mini" @click="getList">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form>

        <el-table stripe :data="warehousingLedger" width="100%">
            <el-table-column align="center" type="index" width="50" fixed="left" />
            <el-table-column align="center" prop="inStockType" label="入库类型" fixed="left" />
            <el-table-column align="center" prop="inStockTime" label="入库时间" width="200" fixed="left" />
            <el-table-column align="center" prop="encode" label="自编码" width="200" fixed="left">
            </el-table-column>
            <el-table-column align="center" prop="equipmentName" label="设备名称" fixed="left">
            </el-table-column>
            <el-table-column align="center" prop="model" label="型号" fixed="left">
            </el-table-column>


            <el-table-column align="center" prop="classificationCode" label="分类编码">
            </el-table-column>
            <el-table-column align="center" prop="unit" label="单位">
            </el-table-column>
            <el-table-column align="center" prop="affiliationType" label="归属类型">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.affiliation_type, row.affiliationType) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="equipmentState" label="设备状态">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.equipment_state, row.equipmentState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="dateOfProduction" label="安装时间" width="130">
            </el-table-column>
            <el-table-column align="center" prop="price" label="价格（元）" width="100">
            </el-table-column>
            <el-table-column align="center" prop="lifeOfUtility" label="效用年限（年）" width="130">
            </el-table-column>
            <el-table-column align="center" prop="place" label="地点">
            </el-table-column>
            <el-table-column align="center" prop="useName" label="使用人">
            </el-table-column>
            <el-table-column align="center" prop="remark" label="备注" width="200">
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleLook(scope.row)">查看
                    </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="title" :visible.sync="dialogVisible" width="60%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" :disabled="!isEdit" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="入库类型:" prop="inStockType">
                            <el-input v-model="form.inStockType" placeholder="请输入入库类型" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地点:" prop="place">
                            <el-input v-model="form.place" placeholder="请输入地点" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="入库时间:" prop="inStockTime">
                            <el-input v-model="form.inStockTime" placeholder="请输入库时间" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="归属类型:" prop="affiliationType">
                            <el-input v-model="form.affiliationType" placeholder="请输入归属类型" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="设备名称:" prop="equipmentName">
                            <el-input v-model="form.equipmentName" placeholder="请输入设备名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设备状态:" prop="equipmentState">
                            <el-select v-model="form.equipmentState" placeholder="请选择设备状态" style="width: 100%;">
                                <el-option label="正常" value="0"></el-option>
                                <el-option label="维修" value="1"></el-option>
                                <el-option label="报废" value="2"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="型号:" prop="model">
                            <el-input v-model="form.model" placeholder="请输入型号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="安装时间:" prop="dateOfProduction" style="width: 100%;">
                            <el-date-picker v-model="form.dateOfProduction" type="date" placeholder="选择日期"
                                style="width: 100%;" value-format="yyyy-MM-dd" clearable></el-date-picker>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="价格（元）:" prop="price">
                            <el-input v-model="form.price" placeholder="请输入价格（元）" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类编码:" prop="classificationCode">
                            <el-input v-model="form.classificationCode" placeholder="请输入分类编码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="效用年限（年）:" prop="lifeOfUtility">
                            <el-input v-model="form.lifeOfUtility" placeholder="请输入效用年限（年)" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单位:" prop="unit">
                            <el-input v-model="form.unit" placeholder="请输入单位" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="使用人:" prop="useName">
                            <el-input v-model="form.useName" placeholder="请输入使用人" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注:" prop="remark">
                            <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>

import {
    getinStock,
    queryinStock,
} from '@/api/smartSchool/schoolProperty/warehousingLedger.js'


export default {
    dicts: ['equipment_state', 'affiliation_type'],
    name: "index",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 入库台帐
            warehousingLedger: [

            ],
            // 弹出层标题
            title: "",
            // 查看对话框
            dialogVisible: false,

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                equipmentName: '',
                affiliationType: '',
                classificationCode: '',
                equipmentState: '',

            },
            isEdit: false,
            // 表单参数
            form: {},

            // 表单校验
            rules: {


            },


        };
    },
    created() {
        this.getList()

    },

    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            getinStock(this.queryParams).then((response) => {
                this.warehousingLedger = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;

        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                equipmentName: '',
                affiliationType: '',
                classificationCode: '',
                equipmentState: '',

            };
            this.getList();
        },
        /** 查看详情 */
        handleLook(row) {
            const id = row.id || this.ids;
            this.$modal.loading('正在加载数据，请稍等...');
            queryinStock(id).then(response => {
                this.$modal.closeLoading();
                this.form = response.data;
                this.dialogVisible = true;
                this.isEdit = false;
                this.title = "查看入库台帐";

            }).catch(error => {

            })
        },















    },
};
</script>

<style></style>
