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">
                <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 > 3" 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="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="请输入产品序列" v-model="assetsForm.goodsSequence"></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.projectNo"></mt-field>
                <mt-field label="项目名称" placeholder="请输入项目名称" v-model="assetsForm.projectName"></mt-field>
                <mt-field label="采购日期" placeholder="请选择采购日期" type="date" v-model="assetsForm.purchaseDate"></mt-field>
            </div>
            <div class="detailBox">
                <mt-field label="设备厂家" placeholder="请输入设备厂家" v-model="assetsForm.deviceFactory"></mt-field>
                <mt-field label="设备联系人" placeholder="请输入设备联系人" v-model="assetsForm.deviceContact"></mt-field>
                <mt-field label="联系人电话" placeholder="请输入设备联系人电话" v-model="assetsForm.deviceContactPhone"></mt-field>
                <mt-field label="供应商" placeholder="请输入供应商" v-model="assetsForm.factory"></mt-field>
                <mt-field label="采购价格" placeholder="请输入采购价格" type="number" v-model="assetsForm.price"></mt-field>
                <mt-field label="质保期限" placeholder="请输入质保期限（单位：年）" type="number" v-model="assetsForm.warrantyPeriod"></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">
                <mt-field label="备注" placeholder="请输入备注" type="textarea" class="content" rows="5" v-model="assetsForm.content"></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>
    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,

                    projectNo: '',
                    projectName: '',
                    purchaseDate: '',
                    price: '',
                    warrantyPeriod: '',
                    content: '',

                    goodsSequence: '',
                    deviceFactory: '',
                    deviceContact: '',
                    deviceContactPhone: '',
                },
                labels: [],
                tagId: 0,
                limit: 1,
                canClick: true,
                
                unit: [],
                project: [],
                projectNo: [],
                projectName: [],
			}
		},
		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,

                            projectNo: res.data.projectNo,
                            projectName: res.data.projectName,
                            purchaseDate: res.data.purchaseDate,
                            price: res.data.price,
                            warrantyPeriod: res.data.warrantyPeriod,
                            content: res.data.content,

                            goodsSequence: res.data.goodsSequence,
                            deviceFactory: res.data.deviceFactory,
                            deviceContact: res.data.deviceContact,
                            deviceContactPhone: res.data.deviceContactPhone,
                        }
                        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
                    });
                })
            },

            getUnit() {
                this.http.post(this.port.assets.unit, {} , 
                res => {
                    if (res.code == "ok") {
                        var list = res.data;
                        for(var i in list) {
                            list[i].name = list[i].unit;
                        }
                        this.unit = list;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            getProject() {
                this.http.post(this.port.assets.project, {} , 
                res => {
                    if (res.code == "ok") {
                        this.project = res.data;
                        var list = res.data;
                        for(var i in list) {
                            this.projectNo.push({
                                id: list[i].id,
                                name: list[i].projectNo
                            });
                            this.projectName.push({
                                id: list[i].id,
                                name: list[i].projectName
                            })
                        }
                    } 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;
            },

            chooseUnit() {
                var _this = this;
                var dataShippingSpace = this.unit;
                var pickerDiv = document.getElementById("unit");
                var pickerView = new PickerView({
                    bindElem: pickerDiv, 
                    data: dataShippingSpace, 
                    title: "单位", 
                    leftText: "取消", 
                    rightText: "确定", 
                    rightFn: function(selectArr) {
                        _this.assetsForm.unit = selectArr[0].name;
                    }
                });
            },

            chooseProject(i) {
                var _this = this;
                var dataShippingSpace = i==0?this.projectNo:this.projectName;
                var pickerDiv = i==0?document.getElementById("projectNo"):document.getElementById("projectName");
                var pickerView = new PickerView({
                    bindElem: pickerDiv, 
                    data: dataShippingSpace, 
                    title: i==0?"项目编号":"项目名称", 
                    leftText: "取消", 
                    rightText: "确定", 
                    rightFn: function(selectArr) {
                        var list = _this.project;
                        for(var j in list) {
                            if(list[j].id == selectArr[0].id) {
                                _this.assetsForm.projectNo = list[j].projectNo;
                                _this.assetsForm.projectName = list[j].projectName;
                            }
                        }
                    }
                });
            },

            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.modelNumber == null || this.assetsForm.modelNumber == "") {
                        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 if(this.assetsForm.address == null || this.assetsForm.address == "") {
                        this.$toast({
                            message: '请输入地址',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.projectNo == null || this.assetsForm.projectNo == "") {
                        this.$toast({
                            message: '请输入项目编号',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.projectName == null || this.assetsForm.projectName == "") {
                        this.$toast({
                            message: '请输入项目名称',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.purchaseDate == null || this.assetsForm.purchaseDate == "") {
                        this.$toast({
                            message: '请选择采购日期',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.factory == null || this.assetsForm.factory == "") {
                        this.$toast({
                            message: '请输入供应商',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.price == null || this.assetsForm.price == "") {
                        this.$toast({
                            message: '请输入采购价格',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.warrantyPeriod == null || this.assetsForm.warrantyPeriod == "") {
                        this.$toast({
                            message: '请输入质保期限（单位：年）',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.serviceLife == null || this.assetsForm.serviceLife == "") {
                        this.$toast({
                            message: '请输入服务期限',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.assetsForm.content.length >= 100) {
                        this.$toast({
                            message: '备注内容请控制在100字以内',
                            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;
        height: auto;
        background: #efefef;
    }

    .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;
    }
    
    .content .mint-cell-wrapper {
        position: relative;
    }

    .content .mint-cell-title {
        position: absolute;
        top: 0;
    }

    .content .mint-cell-value {
        margin-left: 105px;
    }
</style>