merchant/src/pages/subPages/express.vue

<template>
<el-container direction="vertical">
    <el-header height="40px" style="border-bottom: 1px solid #eee">
        <div style="float:left;">柜体控制</div>
        <div style="float:right;height:40px;">
            <el-dropdown @command="onHandleCabinet">
                <span class="el-dropdown-link">
                    柜体操作
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-lock" style="color:red;" command="lock">锁柜</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-unlock" command="unlock">解除锁柜</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-warning" command="unwarn">解除报警</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-refresh-left" style="color:#409EFF;" command="reset">重启</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-header>

    <el-tabs type="card" v-model="tabActive" style="margin-top:10px;" :before-leave="onBeforeChangeTab" @tab-click="onTabClick">
        <template v-for="(item,index) in cabinetList">
            <el-tab-pane :label="item.alias" :key="index" :name="item.id">
                <div>
                    <el-row justify="space-around" :gutter="10">
                        <template v-for="(v,k) in boxList[index]">
                            <el-col :span="6" :key="k">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>
                                            {{v.box_number}}号箱
                                            <el-tag size="mini">已{{v.status_text}}</el-tag>
                                        </span>
                                        <el-dropdown @command="command=>onHandleBox(command,v.cabinet_number,v.box_number,v.order_sn)">
                                            <span class="el-dropdown-link">
                                                操作
                                                <i class="el-icon-arrow-down el-icon--right"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item icon="el-icon-unlock" style="color:red;" command="openBox">开箱</el-dropdown-item>
                                                <el-dropdown-item icon="el-icon-phone-outline" style="color:#409EFF;" command="inform" :disabled="v.order_sn == ''">通知</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>

                                    <!--                    <div style="height:72px;">
                      <el-row type="flex" align="middle" style="height:100%;">
                        <el-tag effect="dark">箱子已{{v.status_text}}</el-tag>
                      </el-row>
                    </div>-->
                                    <div v-if="v.order_sn == ''">
                                        <div style="height:72px;display:flex;justify-content:center;align-items:center;">
                                            <h4>空闲中</h4>
                                        </div>
                                    </div>

                                    <el-row type="flex" justify="space-between" v-if="v.order_sn != ''">
                                        <!--                      <el-row type="flex" align="middle">
                        <el-tag type="danger" effect="dark">{{v.status_text}}</el-tag>
                      </el-row>-->
                                        <div style="height:72px;">
                                            <h4 class="info">
                                                <div class="label">订单号：</div>
                                                <div class="value">{{v.order_sn}}</div>
                                                <!-- <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button> -->
                                            </h4>
                                            <h4 class="info">
                                                <div class="label">入柜日期：</div>
                                                <div class="value">{{v.enter_time}}</div>
                                            </h4>
                                            <h4 class="info">
                                                <div class="label">存件时间：</div>
                                                <div class="value">{{v.use_time}}</div>
                                            </h4>
                                        </div>
                                    </el-row>

                                    <!--  <div style="height:72px;" v-if="v.box_status == 3">
                                        <el-row type="flex" align="middle" style="height:100%;">
                                            <el-tag type="info" effect="dark">{{v.status_text}}</el-tag>
                                        </el-row>
                    </div>-->
                                </el-card>
                            </el-col>
                        </template>
                        <el-col :span="6">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>新增箱子</span>
                                </div>
                                <div style="height:72px;">
                                    <el-row type="flex" align="middle" justify="center" style="height:100%;">
                                        <el-button type="primary" @click="onAddBox(item.id)">新增</el-button>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <!--  <el-row style="margin-top:10px;" type="flex" justify="end">
              <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
            </el-row>
            -->
                </div>
            </el-tab-pane>
        </template>
        <el-tab-pane name="add">
            <span slot="label">
                <i class="el-icon-plus">新增</i>
            </span>
        </el-tab-pane>
    </el-tabs>

    <el-dialog title="新增柜体" :visible.sync="addVisible" width="50%" @closed="onCloseAddDialog">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="请求地址" prop="requrl">
                <el-input v-model="ruleForm.requrl"></el-input>
            </el-form-item>
            <el-form-item label="柜子名称" prop="alias">
                <el-input v-model="ruleForm.alias"></el-input>
            </el-form-item>
            <el-form-item label="柜子编号" prop="number">
                <el-input v-model="ruleForm.number"></el-input>
            </el-form-item>
            <el-form-item label="柜子登录key" prop="login_key">
                <el-input v-model="ruleForm.login_key"></el-input>
            </el-form-item>
            <el-form-item label="箱子个数" prop="count">
                <el-input v-model="ruleForm.count"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="onCloseAddDialog">取 消</el-button>
            <el-button type="primary" @click="onAddSubmit('ruleForm')">立即添加</el-button>
        </span>
    </el-dialog>
</el-container>
</template>

<script>
import {
    cabinetList,
    boxList,
    addCabinet,
    reboot,
    openBox,
    sendMsg,
    addBox,
    lockCabinet,
    unLockCabinet,
    releaseAlarm
} from "@/api";
import moment from "moment";
export default {
    data() {
        return {
            tabActive: "",
            addVisible: false,
            ruleForm: {
                requrl: "",
                alias: "",
                number: "",
                login_key: "",
                count: "",
            },
            rules: {
                requrl: [{
                    required: true,
                    message: "请输入请求地址",
                    trigger: "blur",
                }, ],
                alias: [{
                    required: true,
                    message: "请输入柜子名称",
                    trigger: "blur",
                }, ],
                number: [{
                    required: true,
                    message: "请输入柜子编号",
                    trigger: "blur",
                }, ],
                login_key: [{
                    required: true,
                    message: "请输入柜子登录key",
                    trigger: "blur",
                }, ],
                count: [{
                    required: true,
                    message: "请输入箱子个数",
                    trigger: "blur",
                }, ],
            },
            cabinetList: [],
            boxList: [],
            currentCabinetState: {},
        };
    },
    computed: {
        diffTime() {
            return (date) => {
                const currentTime = moment();
                const startDate = moment(date);
                const date3 = currentTime.diff(startDate, "minute"); //计算相差的分钟数
                const h = Math.floor(date3 / 60); //相差的小时数
                const mm = date3 % 60; //计算相差小时后余下的分钟数
                return `${h}小时${mm}分钟`;
            };
        },
    },
    created() {
        this.getCabinetList();
    },
    methods: {
        getCabinetList() {
            cabinetList().then((res) => {
                console.log(res);
                if (res && res.msg == "ok") {
                    this.cabinetList = res.data.rows.map((item) => {
                        item.id = item.id + "";
                        return item;
                    });

                    this.boxList = res.data.rows.map(() => {
                        return [];
                    });
                    this.getBoxList(res.data.rows[0].id, 0);
                    this.tabActive = res.data.rows[0].id + "";
                    console.log(this.tabActive);
                }
            });
        },
        getBoxList(id, cabinetIndex) {
            const _self = this;
            boxList({
                cabinet_number: id,
            }).then((res) => {
                console.log(res);
                if (res && res.data.rows) {
                    let boxList = [..._self.boxList];
                    boxList[cabinetIndex] = res.data.rows;
                    _self.boxList = boxList;
                }
            });
        },
        onCloseAddDialog() {
            this.ruleForm = {};
            this.addVisible = false;
            this.$refs.ruleForm.resetFields();
        },
        onBeforeChangeTab(activeName) {
            if (activeName == "add") {
                this.addVisible = true;
                return false;
            }
        },
        onAddSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addCabinet();
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        addCabinet() {
            let requrl = "";
            let alias = "";
            let number = "";
            let login_key = "";
            let count = "";
            addCabinet(requrl, alias, number, login_key, count).then((res) => {
                console.log(res);
                if (res && res.msg == "ok") {
                    this.getCabinetList();
                }
            });
        },
        onTabClick(e) {
            if (e.name != "add") {
                this.getBoxList(e.name, e.index);
            }
        },
        onHandleBox(command, cabinet_number, box_number, order_sn) {
            if (command == "openBox") {
                this.$confirm(
                        `确认打开【${cabinet_number}】柜【${box_number}】箱？`,
                        "提示"
                    )
                    .then(() => {
                        openBox({
                            cabinet_number: cabinet_number,
                            box_number: box_number,
                        }).then((res) => {
                            if (res && res.msg == "ok") {
                                this.$message({
                                    message: "操作成功",
                                    type: "success",
                                    center: true,
                                    duration: 1000,
                                });
                                this.getCabinetList();
                            } else {
                                this.$message({
                                    message: "操作失败",
                                    type: "error",
                                    center: true,
                                    duration: 1000,
                                });
                            }
                            console.log(res);
                        });
                    })
                    .catch(() => {
                        console.log("取消");
                    });
            } else if (command == "inform") {
                this.$confirm(`是否通知用户？`, "提示")
                    .then(() => {
                        sendMsg({
                            cabinet_number: cabinet_number,
                            box_number: box_number,
                            order_sn: order_sn,
                        }).then((res) => {
                            if (res && res.msg == "ok") {
                                this.$message({
                                    message: "操作成功",
                                    type: "success",
                                    center: true,
                                    duration: 1000,
                                });
                            } else {
                                this.$message({
                                    message: "操作失败",
                                    type: "error",
                                    center: true,
                                    duration: 1000,
                                });
                            }
                            console.log(res);
                        });
                    })
                    .catch(() => {
                        console.log("取消");
                    });
            }
        },
        onHandleCabinet(command) {
            const cabinet_number = this.tabActive;
            if (command == "lock") {
                this.$confirm("确认锁定当前柜体？", "提示").then(() => {
                    lockCabinet({
                        cabinet_number,
                    }).then((res) => {
                        if (res && res.msg == "ok") {
                            this.$message({
                                message: "锁定成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                            this.getCabinetList();
                        } else {
                            this.$message({
                                message: "锁定失败",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                        }
                    });
                });
            } else if (command == "unlock") {
                this.$confirm("确认解锁当前柜体？", "提示").then(() => {
                    unLockCabinet({
                        cabinet_number,
                    }).then((res) => {
                        if (res && res.msg == "ok") {
                            this.$message({
                                message: "解锁成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                            this.getCabinetList();
                        } else {
                            this.$message({
                                message: "解锁失败",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                        }
                    });
                });
            } else if (command == 'unwarn') {
                this.$confirm("确认解除当前报警？", "提示").then(() => {
                    releaseAlarm({
                        cabinet_number,
                    }).then((res) => {
                        if (res && res.msg == "ok") {
                            this.$message({
                                message: "解除成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                            this.getCabinetList();
                        } else {
                            this.$message({
                                message: "解除失败",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                        }
                    });
                });
            } else if (command == 'reset') {
                this.$confirm("确认重启当前柜体？", "提示").then(() => {
                    reboot({
                        cabinet_number,
                    }).then((res) => {
                        if (res && res.msg == "ok") {
                            this.$message({
                                message: "重启成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                            this.getCabinetList();
                        } else {
                            this.$message({
                                message: "重启失败",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                        }
                    });
                });
            }

            console.log(command);
        },
        onAddBox(id) {
            this.$confirm("确定新增箱子？", "提示")
                .then(() => {
                    addBox({
                        cabinet_number: id,
                    }).then((res) => {
                        if (res && res.msg == "ok") {
                            this.$message({
                                message: "新增成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                            this.getCabinetList();
                        } else {
                            this.$message({
                                message: "新增失败",
                                type: "success",
                                center: true,
                                duration: 1000,
                            });
                        }
                    });
                })
                .catch(() => {
                    console.log("取消");
                });
        },
    },
};
</script>

<style scoped>
.box-card {
    color: #fff;
    background: rgba(107, 107, 107, 1);
    margin-top: 10px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-tag {
    background: transparent;
    color: #fff;
}

.info {
    display: flex;
}

.info .label {
    width: 80px;
    text-align: right;
}

.info .value {
    flex: 1;
}
</style>