lsappBms/lss_vue/src/views/assets/assetsEdit.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="assetsForm.name"></mt-field>
                <mt-field label="型号" placeholder="请输入物品型号" v-model="assetsForm.modelNumber"></mt-field>
                <mt-field label="数量" placeholder="请输入数量" type="number" v-model="assetsForm.number"></mt-field>
                <mt-field label="单位" placeholder="请输入单位" v-model="assetsForm.unit"></mt-field>
                <div class="upload">
                    <div class="left">物品图片</div>
                    <div class="right upload_add" v-on:click="choosePic()">
                        <div v-if="assetsForm.pic == null || assetsForm.pic == ''" class="upload_add_image" align="center">
                            <img src="../../assets/image/camera.png" class="camera">
                            <p class="font13">添加图片</p>
                        </div>
                        <div v-else class="right">
                            <img class="pic" :src="assetsForm.pic">
                        </div>
                    </div>
                    <input @change="fileChange($event)" type="file" accept="image/*" id="upload_file" style="display: none"/>
                </div>
                <mt-field label="地址" placeholder="请输入地址" v-model="assetsForm.address"></mt-field>
            </div>
            <div class="detailBox">
                <mt-field label="生产厂家" placeholder="请输入生产厂家" v-model="assetsForm.factory"></mt-field>
                <mt-field label="服务期限" placeholder="请输入服务期限" type="number" v-model="assetsForm.serviceLife"></mt-field>
                <mt-field label="下次维护日期" placeholder="请选择下次维护日期" type="date" v-model="assetsForm.nextIndate"></mt-field>
            </div>
            <div class="detailBox">
                <div class="left_tag">所属分类</div>
                <div class="right">
                    <ul class="address_first">
                        <li v-for="(item,index) in labels" :id="'btn'+item.id" v-bind:class="{'active':item.id==tagId}" v-on:click="chooseTag(item.id)">
                            {{item.name}}
                            <img v-if="index > 7" v-on:click="delTag(item.id)" src="../../assets/image/del.png">
                        </li>
                        <li v-on:click="addNewTag()" class="add">+</li>
                    </ul>
                </div>
            </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>
    import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
                id: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem("user")),
                assetsForm: {
                    id: '',
                    name: '',
                    modelNumber: '',
                    number: '',
                    unit: '',
                    address: '',
                    factory: '',
                    serviceLife: '',
                    nextIndate: '',
                    pic: '',
                    tagId: 0,
                },
                labels: [],
                tagId: 0,
                limit: 1,
                canClick: true,
			}
		},
		methods: {
            // 详情
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.assets.detail, {
                    'id': this.id
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.assetsForm = {
                            id: this.id,
                            name: res.data.name,
                            modelNumber: res.data.modelNumber,
                            number: res.data.goodsNosVO==null?0:res.data.goodsNosVO.length,
                            unit: res.data.unit,
                            address: res.data.address,
                            factory: res.data.factory,
                            serviceLife: res.data.serviceLife,
                            nextIndate: res.data.nextIndate,
                            pic: res.data.pic,
                            tagId: res.data.tagId,
                        }
                        this.tagId = res.data.tagId
                        this.getLabels();
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            // 标签列表
			getLabels() {
                this.http.post(this.port.label.list, {} , 
                res => {
                    if (res.code == "ok") {
                        this.labels = res.data;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            addNewTag() {
                MessageBox({
                    $type:'prompt',
                    title:'',
                    message:'请输入资产类型名称',
                    closeOnClickModal:false,
                    showCancelButton:true,
                    inputValidator:function(v){
                        if (v === null) {
                        　　 return true;
                        }
                        if (v != ""){
                            return true
                        } else {
                            return false
                        }
                    },
                    inputErrorMessage:'请输入资产类型名称',
                    showInput:true
                }).then(({ value, action }) => {
                    if(value == null) {
                        this.$toast({
                            message: '创建失败',
                            duration: 2000
                        });
                        return false;
                    } else {
                        this.$indicator.open();
                        this.http.post(this.port.label.add, {
                            'name': value,
                        } , 
                        res => {
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: '创建成功',
                                    duration: 2000
                                });
                                this.getLabels();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                }).catch(() => {
                });
            },

            chooseTag(id) {
                $("#btn"+id).addClass("active").siblings().removeClass("active");
                this.assetsForm.tagId = id;
            },

            delTag(id) {
                MessageBox.confirm('', { 
                    message: '是否删除该分类？', 
                        title: '', 
                        confirmButtonText: '确定', 
                        cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.label.del, {
                            'id': id
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "删除成功",
                                    duration: 2000
                                });
                                this.getLabels();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            // 图片上传
            choosePic() {
                document.getElementById('upload_file').click();
            },

            fileChange(el) {
                if (!el.target.files[0].size) return;
                this.fileAdd(el.target.files[0]);
                el.target.value = ''
            },

            fileAdd(file) {
                //判断是否为图片文件
                if (file.type.indexOf('image') == -1) {
                    this.$toast({
                        message: '请选择图片文件',
                        duration: 2000
                    });
                } else {
                    var form = new FormData();
                    form.append("file", file);
                    this.$indicator.open();
                    this.http.uploadFile( this.port.assets.upload, form,
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.$toast({
                                message: '上传成功',
                                duration: 2000
                            });
                            this.assetsForm.pic = res.data;
                            document.getElementById('upload_file').value = "";
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    },
                    error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    });
                }
            },

            // 创建
            submit() {
                if(this.canClick) {
                    this.canClick = false;
                    if(this.assetsForm.name == null || this.assetsForm.name == "") {
                        this.$toast({
                            message: '请输入物品名称',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.number == null || this.assetsForm.number == "") {
                        this.$toast({
                            message: '请输入物品数量',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.unit == null || this.assetsForm.unit == "") {
                        this.$toast({
                            message: '请输入物品单位',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else {
                        this.$indicator.open();
                        var _this = this;
                        this.http.post( this.port.assets.update, 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();
        },
		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;
    }

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

    .left{
        float:left;
        /* margin: 0.15rem; */
        padding: 0.15rem 0 0.1rem 0;
    }

    .left_tag {
        margin: 0;
        padding: 0.15rem 0.15rem 0.1rem 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.22rem;
        font-size: 0.14rem;
        color: #ccc;
        padding: 0.02rem 0.12rem;
        margin: 0.06rem 0.07rem;
        border: 1px solid #ccc;
        border-radius: 50px;
        min-width: 0.3rem;
        text-align: center;
        position: relative;
    }

    .right > ul > li img {
        position: absolute;
        top: -0.05rem;
        right: -0.08rem;
        width: 0.18rem;
        height: 0.18rem;
    }

    .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;
    }
</style>