yunsu/ys_int/src/views/detection/detection.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-col :span="2">
                    <el-form-item>
                        <el-select v-model="filters.value" :placeholder="$t('base.choose')">
                            <el-option :label="$t('base.num')" value="0"></el-option>
                            <el-option :label="$t('base.name')" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-input v-model="filters.name" :placeholder="$t('msg.keySearch')" style="width: 300px;" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getMoulds(filters.name)">{{$t('base.query')}}</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="moulds" :height="tableHeight" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="modelNo" :label="$t('mold.moldNo')" width="100" sortable></el-table-column>
            <el-table-column :label="$t('mold.modelName')" width="200" sortable>
                <template slot-scope="scope">
                    <a style="color: #409EFF; cursor: pointer" @click="toMould(scope.row.id)">{{scope.row.modelName}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="equipmentNo" :label="$t('basic.equipmentNo')" width="120" sortable></el-table-column>
            <el-table-column prop="projectName" :label="$t('mold.projectName')" width="200" sortable></el-table-column>
            <el-table-column prop="factoryName" :label="$t('mold.factoryName')" width="200" sortable></el-table-column>
            <el-table-column prop="area" :label="$t('mold.area')" width="200" sortable></el-table-column>
            <el-table-column prop="runTimes" :label="$t('mold.runTimes')" align="center" width="100" sortable></el-table-column>
            <el-table-column prop="ocCycle" :label="$t('mold.ocCycle')" align="center" width="140" sortable></el-table-column>
            <el-table-column prop="hillNumber" :label="$t('mold.hillNumber')" align="center" width="80" sortable></el-table-column>
            <el-table-column prop="state" :label="$t('runTest.state')" align="center" width="100" sortable></el-table-column>
            <el-table-column :label="$t('runTest.stage')" align="center" width="160">
                <template slot-scope="scope">
                    <span v-if="scope.row.stage == 0">{{$t('runTest.stage0')}}</span>
                    <span v-else-if="scope.row.stage == 1">{{$t('runTest.stage1')}}</span>
                    <span v-else-if="scope.row.stage == 2">{{$t('runTest.stage2')}}</span>
                    <span v-else-if="scope.row.stage == 3">{{$t('runTest.stage3')}}</span>
                    <span v-else>{{$t('runTest.stage4')}}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('runTest.isMaintain')" align="center" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.isMaintain == 1">{{$t('runTest.isMaintain0')}}</span>
                    <span v-else>{{$t('runTest.isMaintain1')}}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('runTest.process')" align="center" width="85">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="toMaintenance(scope.row.id)">{{$t('base.detail')}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[20 , 50 , 80 , 100 , 200]"
                :page-size="20"
                layout="total, sizes, prev, pager, next"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>
    </section>
</template>

<script>
    import util from "../../common/js/util";

    export default {
        data() {
            return {
                moulds: [],
                filters: {
                    name: "",
                    value: "0"
                },
                listLoading: false,
                total: 0,
                tableHeight: 0,
                page: 1,
                size: 20
            };
        },
        methods: {
            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getMoulds();
            },

            handleSizeChange(val) {
                this.size = val;
                this.getMoulds();
            },

            //跳转到运行监测详情
            toMaintenance(id) {
                this.$router.push("/detection/" + id);
            },

            //跳转到模具详情
            toMould(id) {
                this.$router.push("/moldList/" + id + "/0");
            },

            //获取模具信息
            getMoulds(keyWord) {
                this.listLoading = true;
                if (keyWord == null) {
                    var type = 0;
                } else {
                    var type = this.filters.value;
                }
                var params = {
                    pageNum: this.page,
                    pageSize: this.size,
                    projectId: -1,
                    searchType: type,
                    keyName: keyWord,
                    type: 0
                };
                this.http.post( this.port.mold.molds , params,
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.moulds = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            }
        },

        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 210;
        },

        mounted() {
            this.getMoulds();
        }
    };
</script>

<style scoped>
</style>