lsappBms/lss_vue_wx/src/views/assets/assetsHandle.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">
                <mt-field label="资产编号" placeholder="请输入物品名称" v-model="detail.modelNo" disabled></mt-field>
                <mt-field id="state" label="资产状态" placeholder="请选择资产状态" disableClear disabled v-on:click.native="chooseType()" v-model="state"></mt-field>
                <mt-field v-if="assetsForm.state == 1" id="userId" label="对应人员" placeholder="请选择对应人员" disableClear disabled v-on:click.native="choosePeo()" v-model="userName"></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>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                id: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem("user")),
                detail: "",
                users: [],
                assetsForm: {
                    id: '',
                    state: 0,
                    userId: 0,
                    currentUserId: JSON.parse(sessionStorage.getItem("user")).id,
                },
                state: "",
                userName: "",
                popupVisible: false,
                canClick: true,
			}
		},
		methods: {
            // 详情
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.assets.detailNo, {
                    'id': this.id
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                        this.assetsForm = {
                            id: res.data.id,
                            state: res.data.state,
                            userId: res.data.userId == null?0:res.data.userId,
                            currentUserId: JSON.parse(sessionStorage.getItem("user")).id,
                        }
                        if(res.data.state == 0) {
                            this.state = "未用"
                        } else if(res.data.state == 1) {
                            this.state = "在用"
                        } else if(res.data.state == 3) {
                            this.state = "报废"
                        }
                        this.userName = res.data.username==null?'':res.data.username;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            getUserList() {
                this.http.post(this.port.user.list, {} , 
                res => {
                    if (res.code == "ok") {
                        for(var i in res.data) {
                            // if(res.data[i].departmentGuid == this.user.deptId) {
                                var list = res.data[i].userVOS;
                                for(var j in list) {
                                    this.users.push({
                                        id: list[j].id,
                                        name: list[j].name,
                                    })
                                }
                            // }
                        }
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            chooseType() {
                var _this = this;
                var dataShippingSpace = [];
                if(this.detail.state == 0) {
                    dataShippingSpace = [
                        {name: "在用"},
                        {name: "报废"},
                    ];
                } else if(this.detail.state == 1) {
                    dataShippingSpace = [
                        {name: "未用"},
                    ];
                }
                var pickerDiv = document.getElementById("state");
                var vCardType = this.detail.state;
                var pickerView = new PickerView({
                    bindElem: pickerDiv, 
                    data: dataShippingSpace, 
                    title: "资产状态", 
                    leftText: "取消", 
                    rightText: "确定", 
                    rightFn: function(selectArr) {
                        if (selectArr[0].name == "未用") {
                            vCardType = "0";
                            _this.assetsForm.state = 0;
                            _this.assetsForm.userId = 0;
                            _this.state = "未用";
                        } else if (selectArr[0].name == "在用") {
                            vCardType = "1";
                            _this.assetsForm.state = 1;
                            _this.state = "在用";
                        } else if (selectArr[0].name == "报废") {
                            vCardType = "3";
                            _this.assetsForm.state = 3;
                            _this.assetsForm.userId = 0;
                            _this.state = "报废";
                        }
                    }
                });
            },

            choosePeo() {
                if(this.detail.state != 1) {
                    var _this = this;
                    var dataShippingSpace = this.users;
                    var pickerDiv = document.getElementById("userId");
                    var vCardType = this.detail.userId;
                    var pickerView = new PickerView({
                        bindElem: pickerDiv, 
                        data: dataShippingSpace, 
                        title: "对应人员", 
                        leftText: "取消", 
                        rightText: "确定", 
                        rightFn: function(selectArr) {
                            _this.assetsForm.userId = selectArr[0].id;
                            _this.userName = selectArr[0].name;
                        }
                    });
                }
            },

            // 创建
            submit() {
                if(this.canClick) {
                    this.canClick = false;
                    if(this.assetsForm.state == 1 && this.assetsForm.userId == 0) {
                        this.$toast({
                            message: '请选择对应人员',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.detail.state == this.assetsForm.state) {
                        this.$toast({
                            message: '请更改状态后提交',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else {
                        this.$indicator.open();
                        var _this = this;
                        this.http.post( this.port.assets.handle, 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.getDetail();
            this.getUserList();
        },
		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;
    }
</style>