yunsu/ys_vue/src/views/mold/moldList.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-col :span="3">
                    <el-form-item>
                        <el-select v-model="filters.projectId" clearable placeholder="请选择项目">
                        <el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-select v-model="filters.searchType" placeholder="请选择查询条件">
                        <el-option label="编号" value="0"></el-option>
                        <el-option label="名称" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-input v-model="filters.keyName" placeholder="请输入编号或名称进行搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getMoldList">查询</el-button>
                </el-form-item>
                <el-form-item style="float: right" v-if="user.parentId == 1">
                    <el-button type="primary" @click="showAdd">新建</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="molds" :height="tableHeight" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column prop="modelName" label="模具名称" width="140" sortable>
                <template slot-scope="scope">
                    <el-link :underline="false" type="primary" @click="toDetail(scope.row)">{{scope.row.modelName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="modelNo" label="模具编号" width="120" sortable></el-table-column>
            <el-table-column prop="equipmentNo" label="云模盒编号" width="120" sortable></el-table-column>
            <el-table-column prop="hillNumber" label="电量" align="center" width="100" sortable></el-table-column>
            <el-table-column prop="diffTime" label="倒计时" align="center" width="100" sortable></el-table-column>
            <el-table-column prop="projectName" label="所属项目" width="140" sortable></el-table-column>
            <el-table-column prop="companyName" label="所属资产方" width="300" sortable></el-table-column>
            <el-table-column prop="produceCompany" label="所属生产方" width="200" sortable></el-table-column>
            <el-table-column prop="initialModulus" label="初始模次" width="100" align="center" sortable></el-table-column>
            <el-table-column prop="settingLife" label="模次寿命" width="100" align="center" sortable></el-table-column>
            <el-table-column prop="initial" label="穴数" width="100" align="center" sortable></el-table-column>
            <el-table-column prop="rfid" label="对应RFID码" width="120" align="center" sortable></el-table-column>
            <el-table-column label="状态" width="100" align="center" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1" style="color:#00CD66;">运行</span>
                    <span v-else style="color:#999999;">静止</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center" fixed="right" sortable v-if="user.parentId == 1">
                <template slot-scope="scope">
                    <el-button size="small" type="danger" @click="handleDel(scope.row)">删除</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]"
                :page-size="20"
                layout="total, sizes, prev, pager, next"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="新建模具" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth">
            <el-form :model="addForm" label-width="100px" :rules="formRules" ref="addForm" :inline="true" class="demo-form-inline">
                <el-form-item label="模具名称" prop="modelName">
                    <el-input v-model="addForm.modelName" autocomplete="off" placeholder="请输入模具名称"></el-input>
                </el-form-item>
                <el-form-item label="模具编号" prop="modelNo">
                    <el-input v-model="addForm.modelNo" autocomplete="off" placeholder="请输入模具编号"></el-input>
                </el-form-item>
                <el-form-item label="云模盒编号" prop="equipmentId">
                    <el-select v-model="addForm.equipmentId" clearable filterable placeholder="请选择云模盒编号" style="width:202px">
                        <el-option v-for="item in boxes" :key="item.id" :label="item.equipmentNo" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem("user")),
                molds: [],
                filters: {
                    keyName: "",
                    searchType: "编号",
                    projectId: ""
                },
                team: [{label:'资产方',value:0},{label:'生产方',value:1}],

                formRules: {
                    modelNo: [
                        { required: true, message: "请输入模具编号", trigger: "blur" }
                    ],
                    modelName: [
                        { required: true, message: "请输入模具名称", trigger: "blur" }
                    ],
                    equipmentId: [
                        {
                            required: true,
                            message: "请选择云模盒编号",
                            trigger: ["blur", "change"]
                        }
                    ]
                },
                listLoading: false,
                total: 0,
                tableHeight: 0,
                boxes: [],
                projects: [],

                addLoading: false,
                addFormVisible: false,
                addForm: {
                    modelNo: "",
                    modelName: "",
                    equipmentId: ""
                }
            };
        },
        methods: {
            getMsg() {
                this.http.post( this.port.base.moulds, {
                    belongCompanyId: this.user.companyId
                },
                res => {
                    if (res.code == "ok") {
                        this.boxes = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });

                this.http.post( this.port.project.projects, {},
                res => {
                    if (res.code == "ok") {
                        this.projects = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getMoldList();
            },

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

            //获取模具列表
            getMoldList() {
                this.listLoading = true;
                this.http.post( this.port.mold.molds, {
                    keyName: this.filters.keyName,
                    pageNum: this.page,
                    pageSize: this.size,
                    projectId: this.filters.projectId == "" ? -1 : this.filters.projectId,
                    searchType: this.filters.searchType == "编号"? 0:1
                },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        var list = res.data.list
                        for(var i in list){
                            if(list[i].endTime == null){
                                list[i].diffTime = "";
                            } else {
                                list[i].diffTime = util.formatDate.dateDiff(
                                    util.formatDate.format(new Date(list[i].endTime), 'yyyy-MM-dd'), 
                                    util.formatDate.format(new Date(new Date()), 'yyyy-MM-dd')
                                );
                            }
                        }
                        this.molds = list;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //详情
            toDetail(row) {
                this.$router.push("/moldList/" + row.id);
            },

            //删除
			handleDel: function (row) {
                this.$confirm('确认删除该模具吗?', '提示', {
					type: 'warning'
				}).then(() => {
                    this.http.post(this.port.mold.delMold, {
                        id: row.id
                    }, res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getUsers();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    }, error => {
                        this.$message({
                            message: error,
                            type: 'error'
                        });
                    })
				});
            },

            //添加界面
            showAdd() {
                this.addFormVisible = true;
                this.addForm = {
                    modelNo: "",
                    modelName: "",
                    equipmentId: ""
                };
            },

            addSubmit() {
                this.$refs.addForm.validate(valid => {
                    if (valid) {
                        this.addLoading = true;
                        this.http.post(
                            this.port.mold.addMold,
                            this.addForm,
                        res => {
                            this.addLoading = false;
                            if (res.code == "ok") {
                                this.addFormVisible = false;
                                this.$message({
                                    message: "创建成功",
                                    type: "success"
                                });
                                this.getMoldList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.addLoading = false;
                            this.addFormVisible = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                });
            }
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 210;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 210;
            };
        },
        mounted() {
            this.getMsg();
            this.getMoldList();
        }
    };
</script>

<style scoped>
</style>