yunsu/ys_vue/src/views/base/allocation.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.companyId" clearable filterable placeholder="请选择公司">
                            <el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id">
                            </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="getMoulds">查询</el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                    <a class="download" href="/upload/云模盒批量导入模板.xlsx" download="云模盒批量导入模板.xlsx">
                        <el-button type="primary">
                            下载模板
                        </el-button>
                    </a>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-upload ref="upload" action="customize" :show-file-list="false" :http-request="uploadFile" :limit="1">
                        <el-button type="primary" :loading="uploading">批量导入</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button type="primary" @click="showAllocation">新建</el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button type="primary" @click="issued">下发</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="allocations" :height="tableHeight" highlight-current-row v-loading="listLoading" @selection-change="handleSelectionChange" style="width: 100%;">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="equipmentNo" label="云模盒编号" width="180" sortable>
                <template slot-scope="scope">12345678998765432132</template>
            </el-table-column>
            <el-table-column prop="hillNumber" label="电量" width="80" align="center" sortable></el-table-column>
            <el-table-column prop="useLife" label="使用年限" width="100" align="center" sortable>
                <template slot-scope="scope">{{scope.row.useLife}}年</template>
            </el-table-column>
            <el-table-column prop="useLife" label="倒计时" width="100" align="center" sortable>
                <template slot-scope="scope">{{scope.row.diffTime}}</template>
            </el-table-column>
            <el-table-column prop="modelName" label="模具名称" sortable></el-table-column>
            <el-table-column prop="modelNo" label="模具编号" width="120" align="center" sortable></el-table-column>
            <el-table-column prop="companyName" label="公司名称" sortable></el-table-column>
            <el-table-column prop="agent" label="代理商" width="120" sortable></el-table-column>
            <el-table-column label="云模盒状态" align="center" width="120" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.isUse == 0">未启用</span>
                    <span v-else>已启用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160">
                <template slot-scope="scope">
                    <el-button size="small" v-if="scope.row.modelNo != null && scope.row.isUse == 0" type="primary" @click="openEnable(scope.$index)">启用</el-button>
                    <el-button size="small" v-if="scope.row.modelNo != null && scope.row.isUse == 1" type="danger" @click="disableEquipment(scope.$index)">停用</el-button>
                    <!--  :disabled="scope.row.isUse == 1" -->
                    <el-button size="small" :style="scope.row.modelNo != null?'':'float:right;margin-right:6px'" @click="showEdit(scope.$index, scope.row, scope.row.isUse == 1)">修改</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="newAllocation" label-width="100px" :rules="formRules" ref="newAllocation" :inline="true" class="demo-form-inline">
                <el-form-item label="云模盒编号" prop="equipmentNo">
                    <el-input v-model="newAllocation.equipmentNo" autocomplete="off" placeholder="请输入云模盒编号"></el-input>
                </el-form-item>
                <el-form-item label="所属公司" prop="belongCompanyId">
                    <el-select v-model="newAllocation.belongCompanyId" filterable clearable placeholder="请选择所属公司" style="width: 202px">
                        <el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="使用年限" prop="useLife">
                    <el-input v-model.number="newAllocation.useLife" type="age" autocomplete="off" placeholder="请输入使用年限"></el-input>
                </el-form-item>
                <el-form-item label="代理商" prop="agent">
                    <el-input v-model="newAllocation.agent" autocomplete="off" placeholder="请输入代理商" style="width: 202px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addMould()">提交</el-button>
            </div>
        </el-dialog>

        <!--修改界面-->
        <el-dialog title="修改云模盒" v-if="editFormVisible" :visible.sync="editFormVisible" :close-on-click-modal="false" customClass="customWidth">
            <el-form :model="newAllocation" label-width="100px" :rules="formRules" ref="newAllocation" :inline="true" class="demo-form-inline">
                <el-form-item label="云模盒编号" prop="equipmentNo">
                    <el-input v-model="newAllocation.equipmentNo" autocomplete="off" placeholder="请输入云模盒编号"></el-input>
                </el-form-item>
                <el-form-item label="所属公司" prop="belongCompanyId">
                    <el-select v-model="newAllocation.belongCompanyId" filterable clearable placeholder="请选择所属公司" style="width: 202px" :disabled="newAllocation.usage">
                        <el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="使用年限" prop="useLife">
                    <el-input v-model.number="newAllocation.useLife" type="age" autocomplete="off" placeholder="请输入使用年限"></el-input>
                </el-form-item>
                <el-form-item label="代理商" prop="agent">
                    <el-input v-model="newAllocation.agent" autocomplete="off" placeholder="请输入代理商" style="width: 202px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editMould(newAllocation.id)">提交</el-button>
            </div>
        </el-dialog>

        <!-- 启用弹窗 -->
        <el-dialog title="启用" :visible.sync="operateDialogVisible" width="400px">
            <el-form label-width="100px" :rules="formRules" :inline="true" class="demo-form-inline">
                <!-- <el-form-item label="某个参数">
                    <el-input autocomplete="off" placeholder="填了也不会发生什么"></el-input>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="operateDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="enable">启用</el-button>
            </span>
        </el-dialog>

        <!-- 下发弹窗 -->
        <el-dialog title="下发" :visible.sync="issuedVisible" width="450px">
            <el-form :model="issuedVal" label-width="130px" :rules="formRules" ref="issuedVal" :inline="true" class="demo-form-inline">
                <el-form-item label="报警电池电量" prop="alarmBattery">
                    <el-input v-model.number="issuedVal.alarmBattery" type="age" autocomplete="off" placeholder="请输入报警电池电量" style="width:250px;"></el-input>
                    %
                </el-form-item>
                <el-form-item label="热报警度数" prop="alarmDegree">
                    <el-input v-model.number="issuedVal.alarmDegree" type="age" autocomplete="off" placeholder="请输入热报警度数" style="width:250px;"></el-input>
                    ℃
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="issuedVisible = false">取消</el-button>
                <el-button type="primary" @click="saveIssued">下发</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                allocations: [],
                companies: {},
                newAllocation: {
                    equipmentNo: "", //设备编号
                    useLife: "", //使用年限
                    equipmentName: "", //设备名称
                    id: "", //设备id
                    belongCompanyId: "", //所属公司ID
                    agent: "", //代理商
                    usage: true //是否可以修改公司
                },
                filters: {
                    keyName: "",
                    companyId: ""
                },
                formRules: {
                    equipmentNo: [
                        { required: true, message: "请输入云模盒编号", trigger: "blur" }
                    ],
                    useLife: [
                        { required: true, message: '请输入使用年限'},
                        { type: 'number', message: '使用年限必须为数字值'}
                    ],
                    belongCompanyId: [
                        { required: true, message: "请选择所属公司", trigger: ["blur", "change"] }
                    ],
                    agent: [
                        { required: true, message: "请输入代理商", trigger: "blur" }
                    ],
                    alarmBattery: [
                        { required: true, message: '请输入报警电池电量'},
                        { type: 'number', message: '报警电池电量必须为数字值'}
                    ],
                    alarmDegree: [
                        { required: true, message: '请输入热报警度数'},
                        { type: 'number', message: '热报警度数必须为数字值'}
                    ],
                },

                listLoading: false,
                addLoading: false,
                editLoading: false,
                uploading: false,

                total: 0,
                page: 1,
                size: 20,
                tableHeight: 0,

                addFormVisible: false,
                editFormVisible: false,
                operateDialogVisible: false,
                activeIndex: 0,

                issuedVal: {
                    alarmBattery: 30,
                    alarmDegree: 80,
                },
                issuedVisible: false,
                multipleSelection: [],
            };
        },
        methods: {
            getMsg() {
                //获取公司下拉列表
                this.http.post( this.port.base.getCompanys, {},
                res => {
                    if (res.code == "ok") {
                        this.companies = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getMoulds();
            },

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

            //读取云模盒信息
            getMoulds() {
                this.listLoading = true;
                this.http.post(this.port.base.mouldeList,{
                    pageNum: this.page,
                    pageSize: this.size,
                    keyName: this.filters.keyName,
                    companyId: this.filters.companyId
                },
                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'), 
                                    list[i].endTime,
                                    util.formatDate.format(new Date(new Date()), 'yyyy-MM-dd')
                                );
                            }
                        }
                        this.allocations = list;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //添加界面
            showAllocation() {
                this.addFormVisible = true;
                this.newAllocation = {
                    id: "",
                    useLife: "",
                    equipmentNo: "",
                    belongCompanyId: "",
                    agent: ""
                };
            },
           
            //添加模具
            addMould() {
                this.$refs.newAllocation.validate(valid => {
                    if (valid) {
                    this.addLoading = true;
                    this.http.post(
                        this.port.base.editMould,
                        {
                            equipmentNo: this.newAllocation.equipmentNo,
                            belongCompanyId: this.newAllocation.belongCompanyId,
                            useLife: this.newAllocation.useLife,
                            agent: this.newAllocation.agent
                        },
                        res => {
                            this.addLoading = false;
                            if (res.code == "ok") {
                                this.addFormVisible = false;
                                this.$message({
                                    message: "添加成功",
                                    type: "success"
                                });
                                this.getMoulds();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.addLoading = false;
                            this.addFormVisible = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        }
                    );
                    }
                });
            },

             //修改界面
            showEdit(index, row, usageBoolean) {
                this.editFormVisible = true;
                this.newAllocation = {
                    id: row.id,
                    useLife: row.useLife,
                    equipmentNo: row.equipmentNo,
                    belongCompanyId: row.belongCompanyId,
                    agent: row.agent,
                    usage: usageBoolean
                };
            },

            //编辑模具
            editMould() {
                this.$refs.newAllocation.validate(valid => {
                    if (valid) {
                        this.editLoading = true;
                        this.http.post( this.port.base.editMould, {
                            id: this.newAllocation.id,
                            equipmentNo: this.newAllocation.equipmentNo,
                            equipmentName: this.newAllocation.equipmentName,
                            belongCompanyId: this.newAllocation.belongCompanyId,
                            useLife: this.newAllocation.useLife,
                            agent: this.newAllocation.agent
                        },
                        res => {
                            this.editLoading = false;
                            if (res.code == "ok") {
                                this.editFormVisible = false;
                                this.$message({
                                    message: "修改成功",
                                    type: "success"
                                });
                                this.getMoulds();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.editLoading = false;
                            this.editFormVisible = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                });
            },

            //打开启用窗口
            openEnable(index) {
                this.operateDialogVisible = true;
                this.activeIndex = index;
            },

            //启用设备
            enable() {
                if(this.allocations[this.activeIndex].belongCompanyId == null){
                    this.$message({
                        message: "输入所属公司后才能启用模具",
                        type: "error"
                    });
                }else{
                    this.operateDialogVisible = false;
                    this.allocations[this.activeIndex].isUse = 1;
                    this.http.post( this.port.base.enableMould, {
                        id: this.allocations[this.activeIndex].id,
                        isUse: 1
                    },
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: "设备已启用",
                                type: "success"
                            });
                            this.getMoulds();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },

            //停用云模盒
            disableEquipment(index) {
                if(this.allocations[index].belongCompanyId == null){
                    this.$message({
                        message: "输入所属公司后才能启用模具",
                        type: "error"
                    });
                }else{
                    this.operateDialogVisible = false;
                    this.allocations[index].isUse = 0;
                    this.http.post( this.port.base.enableMould, {
                        id: this.allocations[index].id,
                        isUse: 0
                    },
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: "设备已停用",
                                type: "success"
                            });
                            this.getMoulds();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },

            //导入云模盒
            uploadFile(params) {
                var fileObj = params.file;
                var form = new FormData();
                form.append("file", fileObj);
                this.uploading = true;
                this.http.uploadFile( this.port.base.importMouldEquipmentExcel,  form,
                res => {
                    this.uploading = false;
                    this.$refs.upload.clearFiles();
                    if (res.code == "ok") {
                        this.$message({
                            message: "上传成功",
                            type: "success"
                        });
                        this.getMoulds();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.uploading = false;
                    this.$refs.upload.clearFiles();
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //列表选择
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //下发云模盒
            issued() {
                this.issuedVisible = true;
            },

            saveIssued() {
                console.log(this.multipleSelection)
                console.log(this.issuedVal)
                console.log(this.issuedVal.alarmBattery.toString(16))
                console.log(this.issuedVal.alarmDegree.toString(16))
                if(this.multipleSelection.length == 0) {
                    this.$message({
                        message: "请选择要下发的云模盒",
                        type: "error"
                    });
                } else {
                    var str = '';
                    for(var i in this.multipleSelection) {
                        str += this.multipleSelection[i].equipmentNo + ',';
                    }
                    str = str.substring(0,str.length-1)
                    this.http.post( this.port.base.setPacket, {
                        lowPowerLimit: this.issuedVal.alarmBattery.toString(16),
                        hotAlarmLimit: this.issuedVal.alarmDegree.toString(16),
                        equipmentNo: str
                    },
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: "下发成功",
                                type: "success"
                            });
                            this.getMoulds();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        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.getMoulds();
        }
    };
</script>

<style scoped>
    .download {
        color: #fff;
        text-decoration: none;
    }
</style>