oa-system/src/components/OP/GroupsTaskAssignment.vue

<template>
    <div class="communal-list"  v-loading.fullscreen.lock="fullscreenLoading">
        <div class="communal-title">
            <div>团组任务分配</div>
        </div>
        <div class="konzh" style="display: flex;justify-content: space-between;">
            <el-form style="display: flex;" label-width="70px" class="demo-form-inline">
                <el-form-item style="width: 300px;margin-right: 20px;" label="团组名称">
                    <el-select v-model="diId" filterable clearable placeholder="请选择" style="width:100%;"
                        @change="diidChange()">
                        <el-option v-for="item1 in delegationInfos" :key=item1.id :label=item1.name
                            :value=item1.id></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 300px;margin-right: 20px;" label="操作分类">
                    <el-select v-model="ctId" filterable clearable placeholder="请选择" style="width:100%;"
                    @change="sdIdChange()">
                        <el-option v-for=" item1 in setData" :key=item1.id :label=item1.name :value=item1.id></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
                <!-- <div style="width: 240px;margin-right: 20px;">
                    <el-select v-model="diId" filterable clearable placeholder="请选择" style="width:100%;"
                        @change="diidChange()">
                        <el-option v-for="item1 in delegationInfos" :key=item1.id :label=item1.name
                            :value=item1.id></el-option>
                    </el-select>
                </div>
                <div style="width: 200px;">
                    <el-select v-model="ctId" filterable clearable placeholder="请选择" style="width:100%;"
                        @change="sdIdChange()">
                        <el-option v-for=" item1 in setData" :key=item1.id :label=item1.name :value=item1.id></el-option>
                    </el-select>
                </div> -->
  
            <div style="width: 30%;text-align: right;">
                <el-button type="primary" style="margin-left: 10px;" @click="btn">保存</el-button>
            </div>
        </div>
        <div class="tzinif-info">
            <div class="tzinif-info-li">
                <label>团 号：</label>
                <span>{{ DelegationInfo.tourCode  }}</span>
            </div>
            <div class="tzinif-info-li">
                <label>客 户：</label>
                <span>{{ DelegationInfo.clientName }}</span>
            </div>
            <div class="tzinif-info-li">
                <label>出访国家：</label>
                <span>{{ DelegationInfo.visitCountry |filter_city}}</span>
            </div>
            <div class="tzinif-info-li">
                <label>起止日期：</label>
                <span>{{ DelegationInfo.visitStartDate|filter_time }}~{{ DelegationInfo.visitEndDate|filter_time}}</span>
            </div>
            <div class="tzinif-info-li">
                <label>天数/人数：</label>
                <span>{{ DelegationInfo.visitDays }}/{{ DelegationInfo.visitPNumber }}</span>
            </div>
        </div>
        <!-- <div class="tzinif">
            <span style="font-weight: bold;">团 号：</span>{{ DelegationInfo.tourCode }}
            <span style="font-weight: bold;">客 户：</span>{{ DelegationInfo.clientName }}
            <span style="font-weight: bold;">出访国家：</span>{{ DelegationInfo.visitCountry }}
            <span style="font-weight: bold;">起止日期：</span>{{ DelegationInfo.visitStartDate }} ～ {{
                DelegationInfo.visitEndDate }}
            <span style="font-weight: bold;">天数/人数：</span>{{ DelegationInfo.visitDays }}天/{{ DelegationInfo.visitPNumber }}人
        </div> -->
        <!-- <div>
            <div>人员安排</div>
        </div> -->
        <div style="margin-top: 10px;border-top: 1px solid #C0C4CC;">
            <div style="display: flex;flex-wrap: wrap;">
                <div v-for="(  item, index  ) in   user  " 
                :key="index" 
                style="width: 12.5%;margin: 10px 0;text-align: center;">
                    <el-checkbox :label="item.id" :value="userStr.indexOf(item.id) != -1" border @change="check(item.id)"
                        style="width: 120px;">{{
                            item.name
                        }}</el-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rules: {},
            token: '',
            userId: 0,
            delegationInfos: [],
            setData: [],
            user: [],
            diId: '',
            ctId: '',
            userStr: [],
            TaskAssignment: {},
            DelegationInfo: {},
            fullscreenLoading:false,
        }
    },
    methods: {
        GetTaskAssignmen() {
            this.fullscreenLoading=true;
            var that = this
            var url = "/api/Groups/GetTaskAssignmen";
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.delegationInfos = res.data.data.delegationInfos;
                    that.diId=res.data.data.delegationInfos[0].id;
                    that.setData = res.data.data.setData;
                    that.ctId=res.data.data.setData[0].id;
                    that.user = res.data.data.user;
                    setTimeout(() => {
                        that.TaskAssignmenQuery();
                    }, 500);
                    console.log(that.setData)
                }
            })
        },
        TaskAssignmenQuery() {
            var that = this
            var url = "/api/Groups/TaskAssignmenQuery";
            this.$axios({
                method: 'post',
                url: url,
                data: {
                    diId: that.diId,
                    ctId: that.ctId,
                },
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.userStr = res.data.data.userStr
                    that.TaskAssignment = res.data.data.taskAssignment
                    that.DelegationInfo = res.data.data.delegationInfo
                    that.fullscreenLoading=false;
                } else {
                    that.userStr = [];
                    that.TaskAssignment = {};
                    that.DelegationInfo = {}
                    that.fullscreenLoading=false;
                }
            })
        },
        btn() {
            var id = 0
            var that = this;
            if (that.TaskAssignment.id != undefined) {
                id = that.TaskAssignment.id;
            }
            var url = "/api/Groups/GetTaskAssignmenOp";
            this.$axios({
                method: 'post',
                url: url,
                data: {
                    diId: that.diId,
                    ctId: that.ctId,
                    uIdStr: that.userStr,
                    isEnable: 1,
                    createUserId: that.userId,
                    remark: ""
                },
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                } else {
                    that.$message.error('保存失败！' + res.data.msg);
                }
            })
        },
        diidChange() {
            this.userStr = [];
            this.TaskAssignmenQuery()
            console.log(this.userStr)
        },
        sdIdChange() {
            this.TaskAssignmenQuery()
            console.log(this.userStr)
        },
        check(id) {
            var index = this.userStr.indexOf(id)
            if (index == -1) {
                this.userStr.push(id)
            } else {
                this.userStr = this.userStr.filter((x) => x !== id)
            }
        }
    },
    filters:{
        filter_city(value){
            if(value){
                return value.replaceAll('|','、')
            }
        },
        filter_time(value){
            if(value){
                return value.split(" ")[0]
            }
        }
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.GetTaskAssignmen();
    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 820px;
}

.communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}
.tzinif-info {
    display: flex;
    margin-top: 10px;
}

.tzinif-info-li {
    margin-right: 30px;
}

.tzinif-info-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.tzinif-info-li span {
    color: #606266;
    font-size: 14px;
}
.konzh .el-form-item{
    margin-bottom: 0;
}
</style>