lsappBms/lss_vue_wx/src/views/task/taskEdit.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="编辑任务">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click.native='jumpBack()'></mt-button>
            </router-link>
        </mt-header>
        <div class="detail_body">
            <div class="detailBox">
                <mt-field label="任务名称" placeholder="请输入任务名称" v-model="taskForm.name"></mt-field>
                <mt-field label="任务编码" placeholder="请输入任务编码" v-model="taskForm.code"></mt-field>
                <mt-field label="计划时间" placeholder="请选择计划时间" type="date" v-model="taskForm.planTime"></mt-field>
                <mt-field label="工作量" placeholder="请输入工作量" type="number" v-model="taskForm.workLoad">天</mt-field>
                <mt-field label="接收人" id="recUser" placeholder="请选择接收人" v-on:click.native="chooseRec()" disableClear disabled v-model="taskForm.recipientName"></mt-field>
                <mt-field label="参与人" id="parUser" placeholder="请选择参与人" v-on:click.native="choosePar()" disableClear disabled v-model="taskForm.participantsNames"></mt-field>
                <mt-field label="任务内容" placeholder="请输入任务内容" type="textarea" rows="4" v-model="taskForm.content" class="taskContent"></mt-field>
            </div>
            <div class="detailBox">
                <mt-field label="付款方" placeholder="请输入付款方" v-model="taskForm.payer"></mt-field>
                <mt-field label="收款方" placeholder="请输入收款方" v-model="taskForm.payee"></mt-field>
                <mt-field label="费用" placeholder="请输入费用" type="number" v-model="taskForm.fee">元</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==taskForm.tagId}" v-on:click="chooseTag(item.id)">
                            {{item.name}}
                            <img v-if="index > 4" 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>
        <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="uselist" @change="checkon"></mt-checklist>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
                id: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem("user")),
                detail: '',
                taskForm: {
                    id: this.$route.params.id,
                    publishId: JSON.parse(sessionStorage.getItem("user")).id,
                    name: '',
                    code: '',
                    planTime: '',
                    workLoad: '',
                    recipientName: '',
                    recipientId: '',
                    participantsNames: '',
                    participantsIds: '',
                    content: '',
                    payer: '',
                    payee: '',
                    fee: '',
                    tagId: 0,
                },
                labels: [],
                
                users: [],
                uselist: [],
                popupVisible: false,
                ids: [],

                canClick: true,
			}
		},
		methods: {
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.task.detail, {
                    'id': this.id
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                        var participantsIds = '',
                            participantsNames = '';
                        for(var i in res.data.participantsVOS) {
                            participantsIds += res.data.participantsVOS[i].userId + ',';
                            participantsNames += res.data.participantsVOS[i].userName + ',';
                            this.ids.push(res.data.participantsVOS[i].userId)
                        }
                        participantsIds = participantsIds.substring(0,participantsIds.length-1);
                        participantsNames = participantsNames.substring(0,participantsNames.length-1)

                        this.taskForm = {
                            id: this.$route.params.id,
                            publishId: JSON.parse(sessionStorage.getItem("user")).id,
                            name: res.data.name,
                            code: res.data.code,
                            planTime: res.data.planTime,
                            workLoad: res.data.workLoad,
                            recipientName: res.data.recipientName,
                            recipientId: res.data.recipientId,
                            participantsNames: participantsNames,
                            participantsIds: participantsIds,
                            content: res.data.content,
                            payer: res.data.payer,
                            payee: res.data.payee,
                            fee: res.data.fee,
                            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.task.label, {} , 
                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.task.addLabel, {
                            'name': value,
                        } , 
                        res => {
                            this.$indicator.close();
                            if (res.code == "ok") {
                                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.taskForm.tagId = id;
            },

            delTag(id) {
                MessageBox.confirm('', { 
                    message: '是否删除该分类？', 
                        title: '', 
                        confirmButtonText: '确定', 
                        cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.task.delLabel, {
                            '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 => { 
                 });
            },

            // 人员列表
            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) {
                                    if(list[j].id != this.user.id) {
                                        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
                    });
                })
            },

            chooseRec() {
                var _this = this;
                var dataShippingSpace = this.users;
                var pickerDiv = document.getElementById("recUser");
                var pickerView = new PickerView({
                    bindElem: pickerDiv, 
                    data: dataShippingSpace, 
                    title: "负责人", 
                    leftText: "取消", 
                    rightText: "确定", 
                    rightFn: function(selectArr) {
                        _this.taskForm.recipientId = selectArr[0].id;
                        _this.taskForm.recipientName = selectArr[0].name;
                    }
                });
            },

            choosePar() {
                this.uselist = [];
                for(var i in this.users) {
                    this.uselist.push({
                        label: this.users[i].name,
                        value: this.users[i].id,
                    })
                }
                this.popupVisible = true;
            },

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

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

            // 创建
            submit() {
                if(this.canClick) {
                    this.canClick = false;
                    if(this.taskForm.name == null || this.taskForm.name == "") {
                        this.$toast({
                            message: '请输入任务名称',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.taskForm.code == null || this.taskForm.code == "") {
                        this.$toast({
                            message: '请输入任务编码',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.taskForm.planTime == null || this.taskForm.planTime == "") {
                        this.$toast({
                            message: '请选择计划时间',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.taskForm.workLoad == null || this.taskForm.workLoad == "") {
                        this.$toast({
                            message: '请输入工作量',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else if(this.taskForm.content == null || this.taskForm.content == "") {
                        this.$toast({
                            message: '请输入工作内容',
                            duration: 2000
                        });
                        this.canClick = true;
                        return false;
                    } else {
                        this.$indicator.open();
                        var _this = this , 
                            form = {
                                id: this.taskForm.id,
                                publishId: this.user.id,
                                name: this.taskForm.name,
                                code: this.taskForm.code,
                                planTime: this.taskForm.planTime,
                                workLoad: this.taskForm.workLoad,
                                content: this.taskForm.content,
                                tagId: this.taskForm.tagId
                            };
                        if(this.taskForm.recipientId != '') {
                            form.recipientId = this.taskForm.recipientId
                        }
                        if(this.taskForm.participantsIds != '') {
                            form.participantsIdes = this.taskForm.participantsIds
                        }
                        if(this.taskForm.payer != '') {
                            form.payer = this.taskForm.payer
                        }
                        if(this.taskForm.payee != '') {
                            form.payee = this.taskForm.payee
                        }
                        if(this.taskForm.fee != '') {
                            form.fee = this.taskForm.fee
                        }
                        this.http.post( this.port.task.add, form,
                        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.getUserList();
            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 {
        padding: 0.15rem 0.15rem 0.1rem 0.15rem;
    }

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

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

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

    .allocation .detailBox {
        margin-top: 0.12rem;
    }

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

    .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>