lsappBms/lss_vue_wx/src/views/assets/assetsMaintain.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="维护资产">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()"></mt-button>
            </router-link>
        </mt-header>
        <div class="detail_body">
            <div class="detailBox">
                <div style="padding:0.12rem;">资产编号</div>
                <mt-field id="userId" placeholder="请选择资产编号" disableClear disabled v-on:click.native="choosePeo()" type="textarea" v-model="idStr"></mt-field>
            </div>
            <div class="detailBox">
                <mt-field label="维护人" placeholder="请输入维护人" v-model="assetsForm.operator"></mt-field>
                <mt-field label="联系方式" placeholder="请输入维护人联系方式" v-model="assetsForm.operatorPhone"></mt-field>
            </div>
            <div class="detailBox">
                <mt-field label="维护厂家" placeholder="请输入维护厂家" v-model="assetsForm.company"></mt-field>
                <mt-field label="联系方式" placeholder="请输入维护厂家联系方式" v-model="assetsForm.companyPhone"></mt-field>
            </div>
            <div class="btn">
                <mt-button class="allBtn" size="large" type="primary" v-on:click.native="submit()">确定</mt-button>
                <mt-button class="allBtn" size="large" v-on:click.native="jumpBack()">取消</mt-button>
            </div>
        </div>

        <mt-popup v-model="popupVisible" position="right" class="allocation">
            <mt-header class="detail_head" fixed title="待维修资产">
                <router-link to="" slot="left">
                    <mt-button icon="back" v-on:click="toPrev()"></mt-button>
                </router-link>
            </mt-header>
            <div class="detailBox">
                <mt-checklist title="checkbox list" v-model="ids" :options="list" @change="checkon"></mt-checklist>
            </div>
        </mt-popup>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                id: this.$route.params.id,
                list: [],
                ids: [],
                idStr: '',
                assetsForm: {
                    goodsId: this.$route.params.id,
                    ids: '',
                    operator: '',
                    operatorPhone: '',
                    company: '',
                    companyPhone: '',
                },
                state: "",
                userName: "",
                popupVisible: false,
                canClick: true,
			}
		},
		methods: {
            // 待维护资产
            getMainList() {
                this.http.post(this.port.assets.maintainList, {
                    'id': this.id
                } , 
                res => {
                    if (res.code == "ok") {
                        var list = [];
                        for(var i in res.data) {
                            list.push({
                                label: res.data[i].modelNo,
                                value: res.data[i].id,
                            })
                        }
                        this.list = list;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            choosePeo() {
                this.popupVisible = true;
            },

            toPrev() {
                this.popupVisible = false;
            },

            checkon() {
                this.idStr = "";
                this.assetsForm.ids = "";
                for(var i in this.ids) {
                    for(var j in this.list) {
                        if(this.ids[i] == this.list[j].value) {
                            this.idStr += this.list[j].label + ',';
                            this.assetsForm.ids += this.list[j].value + ',';
                            break;
                        }
                    }
                }
                this.idStr = this.idStr.substring(0,this.idStr.length-1)
                this.assetsForm.ids = this.assetsForm.ids.substring(0,this.assetsForm.ids.length-1)
            },

            // 创建
            submit() {
                if(this.canClick) {
                    this.canClick = false;
                    if(this.assetsForm.ids == "") {
                        this.$toast({
                            message: '请选择资产编号',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.operator == null || this.assetsForm.operator == "") {
                        this.$toast({
                            message: '请输入维护人',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.operatorPhone == null || this.assetsForm.operatorPhone == "") {
                        this.$toast({
                            message: '请输入维护人联系方式',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.company == null || this.assetsForm.company == "") {
                        this.$toast({
                            message: '请输入维护厂家',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.companyPhone == null || this.assetsForm.companyPhone == "") {
                        this.$toast({
                            message: '请输入维护厂家联系方式',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else {
                        this.$indicator.open();
                        var _this = this;
                        this.http.post( this.port.assets.maintain, this.assetsForm,
                        res => {
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: '维护成功',
                                    duration: 2000
                                });
                                setTimeout(function(){
                                    _this.$router.go(-1);
                                }, 1000);
                            } else {
                                this.canClick = true;
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        },
                        error => {
                            this.canClick = true;
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        });
                    }
                } else {
                    this.$toast({
                        message: '请勿重复提交',
                        duration: 2000
                    });
                }
            },

            jumpBack() {
                this.$router.go(-1);
            }
        },
        created() {
            this.getMainList();
        },
		mounted() {
            
		}
	}

</script>

<style scoped>
    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
        padding-bottom: 0.15rem;
    }

    .detail {
        background: #EFEFEF;
        overflow: hidden;
    }

    .detailBox {
        background: #fff;
        margin-bottom: 0.11rem;
    }

    .left{
        float:left;
        margin: 0.15rem;
    }

    .upload .left {
        margin: 0.1rem 0.11rem;
    }

    .right div{
        line-height: 0.21rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn {
        width: 80%;
        margin: 0.2rem auto 80px;
    }

    .allocation {
        width: 100%;
        height: 100%;
    }

    .address_first .current{
        background:#eee;
        color: #6f83ff;
        border-left: 2px solid #6f83ff;
    }

    .right > ul {
        margin: 0;
        padding: 0;
        overflow: auto;
        -webkit-transition-duration: 0.4s;
        box-sizing:border-box;
        padding: 0.08rem 0.1rem;
    }

    .right > ul > li {
        display: inline-block;
        height: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: #ccc;
        padding: 0 0.12rem;
        margin: 0.06rem 0.03rem;
        border: 1px solid #ccc;
        border-radius: 50px;
        min-width: 0.3rem;
        text-align: center;
    }

    .right > ul > li.add {
        border: 1px solid #777;
        color: #777;
    }
    
    .right > ul > li.active {
        border: 1px solid #2680EB;
        color: #2680EB;
    }

    .upload_add {
        display: inline-block;
        margin-bottom: 0.2rem;
    }

    .upload_add_image {
        padding-top: 0.08rem;
        margin: 0.15rem 0 0 0.3rem ;
        width: 1rem;
        height: 0.9rem;
        border: 1px dashed rgba(0, 0, 0, .2);
    }

    .upload_add-image .camera {
        font-size: 24px;
    }

    .upload_add_image p {
        padding: 0;
        margin: 0;
        color: #8e8e8e;
    }

    .right div img.pic {
        width: 0.8rem;
        height: 0.8rem;
        margin: 0.15rem 0 0 0.3rem ;
    }

    .textColor {
        margin-top: 0.4rem;
        color: #8e8e8e;
        padding: 0.12rem;
        font-size: 0.12rem;
    }

    .example {
        color: #8e8e8e;
        padding: 0.02rem 0.12rem;
        font-size: 0.12rem;
    }

    .allBtn {
        width: 80%;
        margin: 0.18rem auto;
    }
</style>
<style>
    .detail_head .mint-header-title {
        font-weight: 600;
        font-size: 0.15rem;
    }

    .detail_head .mint-button-text {
        color: #26a2ff;
    }

    .detailBox .mint-cell {
        padding: 0 0 0 0.02rem;
    }
    
    .mint-popup.allocation  {
        background: #efefef;
    }

    .mint-msgbox {
        width: 70%;
    }

    .mint-cell-wrapper {
        background-image: none;
    }

    input:disabled {
        background: #fff;
    }

    textarea:disabled {
        background: #fff;
    }
</style>