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

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="资产详情">
            <router-link to="/assets" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
            <mt-button slot="right" v-if="power.indexOf('assets_operation')>-1" v-on:click.native="jumpTo(3)">操作记录</mt-button>
        </mt-header>
        <div class="detail_body">
            <div class="detailBox userInfo" v-on:click="showBase()">
                <div class="left">
                    <img v-if="detail.pic != null" :src="detail.pic">
                    <img v-else src="../../assets/image/noPic.png">
                </div>
                <div class="right">
                    <div>
                        <span class="name">{{detail.name}}</span>
                    </div>
                    <div class="department">
                        {{detail.modelNumber}}
                    </div>
                    <div>
                        <span class="num">{{detail.goodsNosVO!=null?detail.goodsNosVO.length:0}}{{detail.unit}}</span>
                        <span v-if="power.indexOf('update_assets')>-1" class="arrow"><img src="../../assets/image/pull_down_blue.png"></span>
                    </div>
                </div>
            </div>
            <div class="detailBox">
                <mt-cell v-if="power.indexOf('maintenance_assets')>-1" title="维护资产" is-link v-on:click.native="jumpTo(1)"></mt-cell>
                <mt-cell v-if="power.indexOf('update_assets')>-1" title="资产编号" is-link v-on:click.native="jumpTo(2)"></mt-cell>
            </div>
            <div class="detailBox">
                <div class="assDel assDel_Head">
                    资产详情列表
                    <img v-if="power.indexOf('update_assets')>-1" v-on:click="addNo()" src="../../assets/image/add.png">
                </div>
                <div class="assDel assDel_Status">
                    <span class="active" v-on:click="changeState(-1)">全部 {{delList.length}}</span>
                    <span v-on:click="changeState(0)">未用 {{unuList.length}}</span>
                    <span v-on:click="changeState(1)">在用 {{useList.length}}</span>
                    <span v-on:click="changeState(3)">报废 {{scrList.length}}</span>
                </div>
                <div class="assDel assDel_List">
                    <div class="one_assDel" v-for="item in delList" v-if="state == -1 || item.state == state">
                        <mt-cell-swipe v-if="power.indexOf('handle_assets') == -1 && power.indexOf('update_assets') == -1" :right="[]" :class="item.username==null?'noName':''">
                            <div class="one_assDel_head">
                                <span class="canJump"><span style="color:#DC143C;font-weight:600">{{item.isMaintain == 1?"[待维护] ":""}}</span>{{item.modelNo}}</span>
                                <span v-if="item.state == 0">未用</span>
                                <span v-if="item.state == 1">在用</span>
                                <span v-if="item.state == 3">报废</span>
                            </div>
                            <div class="one_assDel_body">
                                <span>{{item.username}} {{item.phone}}</span>
                            </div>
                        </mt-cell-swipe>

                        <mt-cell-swipe v-if="power.indexOf('handle_assets') > -1 && power.indexOf('update_assets') == -1" :right="[
                            { content: '处置', style: { background: 'rgba(38,162,255,0.9)', color: '#fff' }, handler: () => handle(item.id) },
                            ]" :class="item.username==null?'noName':''">
                            <div class="one_assDel_head">
                                <span class="canJump"><span style="color:#DC143C;font-weight:600">{{item.isMaintain == 1?"[待维护] ":""}}</span>{{item.modelNo}}</span>
                                <span v-if="item.state == 0">未用</span>
                                <span v-if="item.state == 1">在用</span>
                                <span v-if="item.state == 3">报废</span>
                            </div>
                            <div class="one_assDel_body">
                                <span>{{item.username}} {{item.phone}}</span>
                            </div>
                        </mt-cell-swipe>

                        <mt-cell-swipe v-if="power.indexOf('handle_assets') == -1 && power.indexOf('update_assets') > -1" :right="[
                            { content: '删除', style: { background: 'rgba(220,0,0,0.7)', color: '#fff', }, handler: () => deleteNos(item.id)}
                            ]" :class="item.username==null?'noName':''">
                            <div class="one_assDel_head">
                                <span class="canJump"><span style="color:#DC143C;font-weight:600">{{item.isMaintain == 1?"[待维护] ":""}}</span>{{item.modelNo}}</span>
                                <span v-if="item.state == 0">未用</span>
                                <span v-if="item.state == 1">在用</span>
                                <span v-if="item.state == 3">报废</span>
                            </div>
                            <div class="one_assDel_body">
                                <span>{{item.username}} {{item.phone}}</span>
                            </div>
                        </mt-cell-swipe>

                        <mt-cell-swipe v-if="power.indexOf('handle_assets') > -1 && power.indexOf('update_assets') > -1" :right="[
                            { content: '处置', style: { background: 'rgba(38,162,255,0.9)', color: '#fff' }, handler: () => handle(item.id) },
                            { content: '删除', style: { background: 'rgba(220,0,0,0.7)', color: '#fff', }, handler: () => deleteNos(item.id)}
                            ]" :class="item.username==null?'noName':''">
                            <div class="one_assDel_head">
                                <span class="canJump"><span style="color:#DC143C;font-weight:600">{{item.isMaintain == 1?"[待维护] ":""}}</span>{{item.modelNo}}</span>
                                <span v-if="item.state == 0">未用</span>
                                <span v-if="item.state == 1">在用</span>
                                <span v-if="item.state == 3">报废</span>
                            </div>
                            <div class="one_assDel_body">
                                <span>{{item.username}} {{item.phone}}</span>
                            </div>
                        </mt-cell-swipe>
                    </div>
                </div>
            </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="closeBase()"></mt-button>
                </router-link>
            </mt-header>
            <div class="detail_body">
                <div class="detailBox userInfo" v-on:click="power.indexOf('update_assets') > -1 ?jumpTo(0):''">
                    <div class="left">
                        <img v-if="detail.pic != null" :src="detail.pic">
                        <img v-else src="../../assets/image/noPic.png">
                    </div>
                    <div class="right">
                        <div>
                            <span class="nameEdit">{{detail.name}}</span>
                            <span v-if="power.indexOf('update_assets')>-1" class="arrowEdit"><img src="../../assets/image/edit.png"></span>
                        </div>
                        <div class="department">
                            {{detail.modelNumber}}
                        </div>
                        <div>
                            <span class="num">{{detail.goodsNosVO!=null?detail.goodsNosVO.length:0}}{{detail.unit}}</span>
                        </div>
                    </div>
                </div>
                <div class="detailBox">
                    <mt-cell title="所属分类" :value="detail.tagName"></mt-cell>
                    <mt-cell title="数量" :value="detail.goodsNosVO!=null?detail.goodsNosVO.length:0"></mt-cell>
                    <mt-cell title="单位" :value="detail.unit"></mt-cell>
                    <mt-cell title="地址" :value="detail.address"></mt-cell>
                </div>
                <div class="detailBox">
                    <mt-cell title="生产厂家" :value="detail.factory"></mt-cell>
                    <mt-cell title="服务期限" :value="detail.serviceLife"></mt-cell>
                    <mt-cell title="下次维护时间" :value="detail.nextIndate"></mt-cell>
                </div>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
                id: this.$route.params.id,
                power: sessionStorage.getItem("power"),
                detail: "",
                delList: [],
                useList: [],
                serList: [],
                scrList: [],
                unuList: [],
                state: -1,
                
                popupVisible: false,
			}
		},
		methods: {
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.assets.detail, {
                    'id': this.id
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                        this.delList = res.data.goodsNosVO;
                        var list = res.data.goodsNosVO,
                            useList = [],
                            serList = [],
                            scrList = [],
                            unuList = [];
                        for(var i in list) {
                            if(list[i].state == 0) {
                                unuList.push(list[i])
                            } else if(list[i].state == 1) {
                                useList.push(list[i])
                                serList.push(list[i])
                            } else if(list[i].state == 3) {
                                scrList.push(list[i])
                            }
                        }
                        this.useList = useList;
                        this.serList = serList;
                        this.scrList = scrList;
                        this.unuList = unuList;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            changeState(type) {
                if(type == 3) {
                    $(".assDel_Status span:eq(3)").addClass("active").siblings().removeClass("active");
                } else {
                    $(".assDel_Status span:eq("+ (type + 1) +")").addClass("active").siblings().removeClass("active");    
                }
                this.state = type;
            },

            // 添加资产编号
            addNo() {
                MessageBox({
                    $type:'prompt',
                    title:'',
                    message:'添加资产数量',
                    closeOnClickModal:false,
                    showCancelButton:true,
                    inputValidator:function(v){
                        if (v === null) {
                        　　 return true;
                        }
                        var str = /^[0-9]*[1-9][0-9]*$/;
                        if(str.test(v) && 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.assets.addNo, {
                            'goodsId': this.id,
                            'count': value
                        } , 
                        res => {
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: '创建成功',
                                    duration: 2000
                                });
                                this.getDetail();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                }).catch(() => {
                });
            },            

            // 删除资产编号
            deleteNos(id) {
                MessageBox.confirm('', { 
                    message: '是否删除该资产？', 
                        title: '', 
                        confirmButtonText: '确定', 
                        cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.assets.delNo, {
                            'id': id
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "删除成功",
                                    duration: 2000
                                });
                                for(var i in this.delList) {
                                    if(this.delList[i].id == id) {
                                        this.delList.splice(i, 1);
                                    }
                                }
                                var list = this.delList,
                                    useList = [],
                                    serList = [],
                                    scrList = [],
                                    unuList = [];
                                for(var i in list) {
                                    if(list[i].state == 0) {
                                        unuList.push(list[i])
                                    } else if(list[i].state == 1) {
                                        useList.push(list[i])
                                        serList.push(list[i])
                                    } else if(list[i].state == 3) {
                                        scrList.push(list[i])
                                    }
                                }
                                this.useList = useList;
                                this.serList = serList;
                                this.scrList = scrList;
                                this.unuList = unuList;
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            // 跳转
            jumpBack() {
                this.$router.push("/assets");
            },

            jumpTo(type) {
                if(type == 0) {
                    this.$router.push("/assetsEdit/" + this.id );
                } else if(type == 1) {
                    this.$router.push("/assetsMaintain/" + this.id );
                } else if(type == 2) {
                    this.$router.push("/assetsNumber/" + this.id + "/" + this.detail.divisionCode + "/" + this.detail.suffixCode );
                } else if(type == 3) {
                    this.$router.push("/assetsOperation/" + this.id );
                }
            },

            handle(id) {
                this.$router.push("/assetsHandle/" + id );
            },

            // 展示基础资料
            showBase() {
                this.popupVisible = true;
            },

            closeBase() {
                this.popupVisible = false;
            },
        },
        created() {
            this.getDetail();
        },
		mounted() {
            
		}
	}

</script>

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

    .detail_body {
        margin-top: 0.4rem;
    }

    .detail {
        background: #EFEFEF;
    }

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

    .userInfo {
        padding: 0.22rem 0.1rem;
    }

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

    .left img {
        width: 0.6rem;
        height: 0.6rem;
    }

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

    span.name {
        font-size: 0.16rem;
        font-weight: 600;
        margin: 0 0.15rem 0 0;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    
    span.nameEdit {
        font-size: 0.16rem;
        font-weight: 600;
        margin: 0 0.15rem 0 0;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
    }
    
    span.num {
        font-size: 0.14rem;
        color: #26a2ff;
    }

    div.department {
        font-size: 0.13rem;
        color: #9E9E9E;
    }

    span.arrow {
        float: right;
    }

    span.arrow img {
        width: 0.12rem;
        margin-right: 0.05rem;
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg); /* IE 9 */
        -moz-transform: rotate(-90deg); /* Firefox */
        -webkit-transform: rotate(-90deg); /* Safari and Chrome */
        -o-transform: rotate(-90deg); /* Opera */
    }

    span.arrowEdit {
        float: right;
    }

    span.arrowEdit img {
        width: 0.15rem;
        margin-right: 0.05rem;
    }

    .assDel {
        padding: 0.12rem 0.1rem;
    }

    .assDel_List {
        padding-top: 0; 
    }

    .assDel_Status span {
        display: inline-block;
        text-align: center;
        width: 24%;
        color: #aaa;
        font-size: 0.15rem;
    }

    .assDel_Status span.active {
        color: #26a2ff;
    }

    .assDel_Head img {
        float: right;
        width: 0.2rem;
        height: 0.2rem;
    }

    .one_assDel {
        margin: 0 0 0.15rem 0;
    }

    .mint-cell-wrapper {
        padding: 0;
    }

    .one_assDel_head {
        width: 100%;
    }

    .one_assDel_body {
        width: 100%;
    }

    .one_assDel_head > span {
        display:inline-block;
        vertical-align: middle;
        color: #666;
        line-height: 0.4rem;
    }

    .one_assDel_head > span:nth-child(1){
        width: 85%;
        font-size: 0.15rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .one_assDel_head > span:nth-child(2){
        float: right;
    }

    .one_assDel_body span {
        color: #aaa;
        vertical-align: middle;
    }

    .one_assDel_body img {
        float: right;
        width: 0.25rem;
        height: 0.25rem;
        vertical-align: middle;
    }

    /* 资产基础数据样式 */
    .allocation {
        width: 100%;
        height: 100%;
    }

    .address_first .current{
        background:#eee;
        color: #6f83ff;
        border-left: 2px solid #6f83ff;
    }
</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;
    }

    .one_assDel .mint-cell-value {
        display: block;
        width: 100%;
    }

    .one_assDel .mint-cell:last-child {
        background-image: none;
    }

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

    .one_assDel .mint-cell-swipe-button {
        line-height: 0.55rem;
    }

    .one_assDel .noName .mint-cell-swipe-button {
        line-height: 48px;
    }
</style>