manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/task/list.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item :label="$t('tasklist')">
                    <div style="margin-left: 8px">
                    <!-- <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入项目名称关键字" clearable="true"> -->
                        <el-select v-model="searchField" style="width:120px;" size="small" slot="prepend" :placeholder="$t('defaultText.pleaseChoose')">
                            <el-option :label="$t('ongoing')" value="0" @click.native="hiddens()"></el-option>
                            <el-option :label="$t('state.completed')" value="1" @click.native="hiddens()"></el-option>
                        </el-select>
                        <!-- <el-button slot="append" @click="searchList" icon="el-icon-search"></el-button> -->
                    <!-- </el-input> -->
                    </div>
                </el-form-item>

                <el-form-item :label="$t('subordinatedepartments')" v-if="user.timeType.projectWithDept">
                    <el-cascader v-model="deptId" :options="departmentList" size="small" :placeholder="$t('qing-xuan-ze-bu-men')"
                        :props="{ checkStrictly: true, expandTrigger: 'hover' }" :show-all-levels="false" clearable filterable @change="hiddens"
                    ></el-cascader>
                </el-form-item>

                <el-form-item :label="$t('lable.department')" v-if="!user.timeType.projectWithDept">
                    <div style="margin-left: 8px">
                        <el-cascader v-if="user.userNameNeedTranslate != 1" v-model="screenDeptId" :placeholder="$t('defaultText.pleaseChoose')" style="width: 125px"
                        :options="departmentList" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" clearable
                        @change="getList()" size="mini"></el-cascader>

                        <vueCascader :size="'mini'" :widthStr="'125'" :clearable="true" :subject="departmentList" :radios="true" :distinction="'1'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>
                    </div>
                </el-form-item>

                <el-form-item :label="$t('types')">
                    <div style="margin-left: 8px">
                        <el-select v-model="typeField" style="width:120px;" size="small" slot="prepend" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="hiddens()">
                            <el-option :label="$t('other.task')" value="0"></el-option>
                            <el-option :label="$t('other.milestone')" value="1"></el-option>
                            <el-option :label="$t('risk')" value="2"></el-option>
                        </el-select>
                    </div>
                </el-form-item>

                <el-form-item :label="$t('other.project')">
                    <div style="margin-left: 8px">
                        <el-select v-model="screenProjectId" filterable style="width:150px;" size="small" slot="prepend" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="screenProjectChange">
                            <el-option v-for="item in allProjectList" :key="item.id"  :label="item.projectName" :value="item.id"></el-option>
                        </el-select>
                    </div>
                </el-form-item>

                <el-form-item :label="$t('lable.taskGrouping')">
                    <div style="margin-left: 8px">
                        <el-select v-model="screenTaskGroupingId" style="width:150px;" size="small" :disabled="!screenProjectId" slot="prepend" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="hiddens()">
                            <el-option v-for="item in taskGroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </div>
                </el-form-item>

                <el-form-item :label="$t('ren-yuan')">
                    <div style="margin-left: 8px">
                        <el-select v-model="screenPersonnelId" filterable style="width:120px;" size="small" slot="prepend" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="hiddens()" v-if="user.userNameNeedTranslate != '1'">
                            <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>

                        <selectCat :subject="users" :subjectId="screenPersonnelId" :filterable="true" :clearable="true"  @selectCal="selectCal" :size="'small'" :distinction="'10'" v-if="user.userNameNeedTranslate == '1'"></selectCat>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div style="display: flex;">
                        <div style="margin-left: 20px">
                            <el-select v-model="dateType" style="width:120px;" size="small" slot="prepend" :placeholder="$t('defaultText.pleaseChoose')">
                                <el-option :label="$t('starttimes')" :value="0" @click.native="hiddens(1)"></el-option>
                                <el-option :label="$t('deadline')" :value="1" @click.native="hiddens(1)"></el-option>
                            </el-select>
                        </div>
                        <div style="margin-left: 8px">
                            <el-date-picker
                            v-model="dateSelect"
                            type="daterange"
                            size="small"
                            range-separator="-"
                            :start-placeholder="$t('interval')"
                            :end-placeholder="$t('interval')"
                            value-format="yyyy-MM-dd"
                            clearable
                            @change="hiddens()">
                            </el-date-picker>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item style="float: right;" v-if="user.companyId != '3092'">
                     <el-link type="primary" icon="el-icon-circle-plus-outline" :underline="false" @click="addTask()">{{ $t('xinJianRenWu') }}</el-link>
                     <el-link type="primary" :underline="false" @click="exportTaskList()" style="margin-left: 20px;" v-loading="exportTaskLoading">{{ $t('export.export') }}</el-link>
                </el-form-item>
            </el-form>
        </el-col>
        <div style="display: flex;width: 100%;">
            <div class="classification">
                <div>
                    <p :class="idx == 0 ? 'on' : ''" @click="switchs(0)" v-if="permissions.projectView || permissions.projectManagement || permissions.projectViewAllTasks">{{ $t('alltaskss') }}</p>
                    <p :class="idx == 1 ? 'on' : ''" @click="switchs(1)">{{ $t('perform') }}</p>
                    <p :class="idx == 2 ? 'on' : ''" @click="switchs(2)">{{ $t('created') }}</p>
                </div>
            </div>
            <div style="max-width: 94%;min-width: 90%">
                <!--列表-->
                <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
                    <el-table-column type="index" width="60">
                        <template slot-scope="scope" >
                            {{scope.$index+1+(page-1)*size}} 
                        </template>
                    </el-table-column>
                    <el-table-column prop="projectName" :label="$t('headerTop.projectName')" sortable width="260" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link type="primary" :href="'#/projectInside/'+scope.row.projectId">{{scope.row.projectName}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stagesName" :label="$t('taskstage')" sortable width="180" @mouseover="mouseOver">
                    </el-table-column>
                    <el-table-column prop="taskLevel" :label="$t('priority')" sortable width="100">
                        <template slot-scope="scope">
                            <div>
                                <span v-if="scope.row.taskLevel == 0">{{ $t('yi-ban') }}</span>
                                <span v-if="scope.row.taskLevel == 1" style="color: #E6A23C">{{ $t('zhong-yao') }}</span>
                                <span v-if="scope.row.taskLevel == 2" style="color: #F56C6C">{{ $t('jin-ji') }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" :label="$t('nameofthetask')" sortable width="330">
                        <template slot-scope="scope">
                            <div v-if="scope.row.name.length > 20">
                                <el-popover trigger="hover" placement="top" width="330" v-if="scope.row.name">
                                    <p id="caseContent">{{scope.row.name}}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <div class="cal" >
                                            <el-link type="primary" @click="editTask(scope.row)">{{scope.row.name}}</el-link>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                            <div v-else>
                                <div class="cal">
                                    <el-link type="primary" @click="editTask(scope.row)">{{scope.row.name}}</el-link>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="projectCategorySub" label="项目分组" sortable width="300" v-if="user.companyId == '428'"></el-table-column> -->
                    <el-table-column prop="departmentName" :label="$t('subordinatedepartments')" sortable width="300" v-if="user.timeType.projectWithDept">
                        <template slot-scope="scope">
                            <div>
                                <span v-if="user.userNameNeedTranslate == '1'"><TranslationOpenDataText type='departmentName' :openid='scope.row.departmentName'></TranslationOpenDataText></span>
                                <span v-if="user.userNameNeedTranslate != '1'">{{departmentName}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="executorName" :label="$t('zhi-hang-ren')" sortable width="130">
                        <template slot-scope="scope">
                            <!-- <el-link type="primary" @click="showUser(scope.row.executorId)">{{scope.row.executorName}}</el-link> -->
                            <span v-if="user.userNameNeedTranslate == '1'">
                                <span v-for="(item, index) in scope.row.executorNameList" :key="index">
                                    <TranslationOpenDataText type='userName' :openid='item'></TranslationOpenDataText>
                                    <span v-if="index < scope.row.executorNameList.length - 1">,</span>
                                </span>
                            </span>
                            <span v-if="user.userNameNeedTranslate != '1'">{{scope.row.executorName}}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="startDate" :label="$t('starttimes')" sortable width="180"></el-table-column>
                    <el-table-column prop="endDate" :label="$t('deadline')" width="310" fixed="right" sortable>
                        <template slot-scope="scope">
                            <div style="display: flex;justify-content: space-between;padding-right: 40px">
                            <span style="display: inline-block;margin-right: 55px">
                                <span  :class="judgedate(scope.row.endDate) && searchField == '0' && scope.row.taskStatus == 0 ? 'redwarningspan autodatespan' : 'autodatespan'">{{scope.row.endDate}}</span>
                            </span>
                            <el-button v-if="searchField == 0" size="small" type="primary" @click="completes(scope.row.id, 0, scope.row)">{{ $t('wan-cheng') }}</el-button>
                            <el-button v-if="searchField == 1" size="small" type="warning" @click="completes(scope.row.id, 1, scope.row)">{{ $t('zhong-qi') }}</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 重启时输入原因 -->
                <el-dialog :title="$t('zhongQiRenWu')" :visible.sync="causeRejectionDialog" width="600px" :before-close="handleClose">
                    <div>
                        <el-form ref="causeRejectionForm" :model="causeRejectionForm" label-width="80px">
                            <el-form-item :label="$t('zhongQiYuanYin')">
                                <el-input type="textarea" v-model.trim="causeRejectionForm.cause"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('zeRenRen')">
                                <el-select v-if="user.userNameNeedTranslate != '1'" multiple collapse-tags v-model="causeRejectionForm.responsible" size="small" filterable clearable :placeholder="$t('qingXuanZeZeRenRen')" @change="$forceUpdate()">
                                    <el-option v-for="item in causeRejectionForm.users" :key="item.id" :label="item.name" :value="item.id">
                                        <span style="float: left">{{ item.name }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 20px;margin-right: 20px" v-if="item.jobNumber">{{ item.jobNumber }}</span>
                                    </el-option>
                                </el-select>

                                <selectCat :subject="causeRejectionForm.users" :subjectId="causeRejectionForm.responsible" :multiSelect="true" :filterable="true"  @selectCal="selectCal" :size="'small'" :distinction="'5'" v-if="user.userNameNeedTranslate == '1'"></selectCat>
                                <!-- <selectCat :subject="causeRejectionForm.users" :subjectId="causeRejectionForm.responsible" :multiSelect="true" :filterable="true"  @selectCal="selectCal" :size="'small'" :distinction="'5'"></selectCat> -->
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="causeRejectionDialog = false">{{ $t('quXiao') }}</el-button>
                        <el-button type="primary" @click="causeRejectionClick()">{{ $t('queDing') }}</el-button>
                    </span>
                </el-dialog>

                <!--工具条-->
                <el-col :span="24" class="toolbar">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[20, 50 , 80 , 100]"
                        :page-size="20"
                        :current-page="page"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                        style="float:right;"
                    ></el-pagination>
                </el-col>
            </div>
        </div>
        <!--用户详细信息弹出框-->
        <el-dialog :title="$t('Checkthedetails')" v-if="userDetailVisible" :visible.sync="userDetailVisible" :close-on-click-modal="false" customClass="customWidth" width="400px">
            <div class="line"><span>{{ $t('lable.name') }}</span>
                <span v-if="user.userNameNeedTranslate == '1'"><TranslationOpenDataText type='userName' :openid='userDetail.name'></TranslationOpenDataText></span>
                <span v-if="user.userNameNeedTranslate != '1'">{{userDetail.name}}</span>
            </div>
            <div class="line"><span>{{ $t('Worknumber') }}</span><span>{{userDetail.jobNumber}}</span></div>
            <div class="line"><span>{{ $t('lable.phone') }}</span><span>{{userDetail.phone}}</span></div>
            <div class="line"><span>{{ $t('lable.department') }}</span>
                <span v-if="user.userNameNeedTranslate == '1'"><TranslationOpenDataText type='departmentName' :openid='userDetail.name'></TranslationOpenDataText></span>
                <span v-if="user.userNameNeedTranslate != '1'">{{userDetail.departmentName}}</span>
            </div>
            <div class="line"><span>{{ $t('costof') }}</span><span>{{userDetail.cost}}{{ $t('Yuananhour') }}</span></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userDetailVisible = false" >{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>
        <!-- 子项目列表 -->
        <el-dialog :title="$t('listofsubitems')" show-header="false" v-if="subProjectVisible" :visible.sync="subProjectVisible" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-table :data="subProjectList" highlight-current-row  height="400" style="width: 100%;">
            <el-table-column type="index" width="60" :label="$t('headerTop.serialNumber')">
                <template slot-scope="scope" >
                        {{scope.$index+1+(page-1)*size}}
                    </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('names')" ></el-table-column>
            <el-table-column :label="$t('operation')" width="150">
                <template slot-scope="scope" >
                    <el-button size="small" type="primary" @click="addNewSubProject(scope.row)">{{ $t('bian-ji') }}</el-button>
                    <el-button size="small" type="danger" @click="deleteSubPro(scope.row)">{{ $t('btn.delete') }}</el-button>
                </template>
            </el-table-column>

            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="subProjectVisible = false" >{{ $t('Shutdown') }}</el-button>
                <el-button type="primary" @click="addNewSubProject()" >{{ $t('addsubitems') }}</el-button>
            </div>
        </el-dialog>

        <!-- 任务详情信息弹出框 -->
        <el-dialog :class="addForm.id==null?'':'jm'" :title="title" v-if="addFormVisible" :visible.sync="addFormVisible" 
        :close-on-click-modal="false" customClass="customWidth" width="840px" :top="'6vh'">
        <!-- <div style="width: 200%;height:80%;position: absolute;right:-100%;top:0;background:#000;opacity: 0;" @click="sss"></div> -->
            <!-- 整合 -->
            <taskComponent ref="thskComponents" :integrationTask="integrationTask" :showOrNot="showOrNot" @closeBounced="closeBounced"></taskComponent>
            <div slot="title" v-if="addForm.parentTid != null">
                <el-page-header  @back="backToParentTask" :title="$t('parenttask')" :content="addForm.parentTname"></el-page-header>
            </div>
        </el-dialog>

        <!-- 发起会议 -->
            <el-dialog :title="$t('faQiHuiYi')" :visible.sync="meeting" width="500px" :before-close="handleClose" style="z-index: 2020 !important ">
                <div class="block">
                    <div>
                        <span class="demonstration">{{ $t('huiYiKaiShiShiJian') }}</span>
                        <el-date-picker
                        v-model="meetingStartValue"
                        type="datetime"
                        :placeholder="$t('xuanZeRiQiShiJian')"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        clearable
                        default-time="10:00:00">
                        </el-date-picker>
                    </div>
                    <div style="margin-top: 20px">
                        <span class="demonstration">{{ $t('huiYiJieShuShiJian') }}</span>
                        <el-date-picker
                        v-model="meetingEndValue"
                        type="datetime"
                        :placeholder="$t('xuanZeRiQiShiJian')"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        clearable.
                        default-time="11:00:00">
                        </el-date-picker>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="meeting = false">{{ $t('quXiao') }}</el-button>
                    <el-button type="primary" @click="confirmMeeting()">{{ $t('queDing') }}</el-button>
                </span>
            </el-dialog>

    </section>
</template>
<style scoped>
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
.line {
    padding:10px;
}
.line span{
    font-size:18px;
}
.line span:nth-child(even){
    float:right;
}
.classification {
    width: 120px;
    border-right: 1px solid #f2f2f2;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
}
.classification p{
    width: 120px;
    text-align: center;
    line-height: 50px;
    margin: 0;
    cursor: pointer;
}
.classification p:hover {
    background: #dddddd;
}
.on {
    color: #409EFF;
}
.acl{
    display: inline-block;
    width: 300px;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.cal {
    color: #409EFF;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.autodatespan{
    padding: 1.5px 2.5px;
    width: 90px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    display: block;
}
.redwarningspan{
    background: #e62412;
    color: #fff;
    border-radius: 3px;
}
/* p {
    margin: 0 !important;
} */
</style>
<style lang="scss" scoped>
.counli {
    em {
        font-style: normal;
        display: inline-block;
        margin-left: 9%;
    }
    span {
        float: right;
    }
}
.carts {
    position: relative;
    .el-image{
        border-radius: 50%;
        float: left;
        width: 20%;
    }
    i {
        width: 30px; 
        height: 30px; 
        // background: #778899; 
        display: inline-block; 
        float: left; 
        border-radius:50%; 
        font-style:normal;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background: #778899;
        overflow: hidden;
    }
    div {
        text-align: left;
        p {
            text-align: left;
            margin-left: 10px;
            margin-left: 13%;
        }
        em {
            display: block;
            font-style: normal;
            margin-left: 13%;
        }
    }
    span {
        font-size: 10px;
        float: right;
        margin-top: -40px;
    }
}
.issue {
    // height: 20%;
    // position: relative;
    // z-index: 4;
    .zh{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .textareays {
        background: #000;
        height: 140px;
        border: 0;
        .el-textarea__inner {
            height: 85%;
        }
    }
    .issue-button {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
}
.inputDeep {
    position: absolute;
    bottom: 85px;
    width: 95%;
    margin: 0 12px;
}
.inputDeep .el-textarea .el-textarea__inner{
    border: 0 !important;
    resize: none !important;
}
.inputDeeps .el-textarea__inner {
    border: 0 !important;
    resize: none !important;
}
.scop_span {
    display: inline-block;
    padding: 2px 5px;
}
</style>
<script>
import { error } from 'dingtalk-jsapi';
    import util from "../../common/js/util";

    // 引入自定义组件
    import selectCat from "@/components/select.vue"
    // 引入自定义级联组件
    import vueCascader from "@/components/cascader.vue"
    import cascaderOption from "@/components/cascaderOption.vue"

    import taskComponent from "@/components/taskComponent.vue"

    // 富文本样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    // 导入富文本
    import { quillEditor } from 'vue-quill-editor'

    export default {
        name: "two-list-headerslots",
        display: "Two list header slot",
        order: 14,
        components: { 
            // draggable,
            // // editor,
            // FileCenter,
            // ProjectInfo,
            // Summary,
            // Earning,
            quillEditor, // 富文本
            selectCat,
            taskComponent,
            vueCascader,
            cascaderOption
        },
        data() {
            return {
                meeting: false,
                causeRejectionDialog: false,
                causeRejectionForm: {
                    cause: '',
                    responsible: []
                },
                isDeleting: true,
                showOrNot: false,
                typeField: null,

                searchField: '0',
                keyword:null,
                user: JSON.parse(sessionStorage.getItem("user")),
                permissions: JSON.parse(sessionStorage.getItem("permissions")),
                userDetailVisible: false,
                userDetail:{},
                date: new Date(),
                users: [],
                participator:[],
                tableHeight: 0,
                listLoading: false,
                total: 0,
                page: 1,
                size: 20,
                list: [],
                subProjectVisible: false,
                subProjectList: [],//子项目列表
                currentProject:{},
                addSubProject: false,
                addFormVisible: false,
                addLoading: false,
                title: "",
                addForm: {
                    name: '',
                    userId: [],
                },
                rules: {
                    name: [{ required: true, message: this.$t('Pleaseenteraprojectname'), trigger: "blur" }],
                },
                idx: 1,
                taskDetails: false,
                addForm: {
                    name: '',
                },
                rules: {
                    name: [{ required: true, message: this.$t('pleaseenteragroupname'), trigger: "blur" }],
                },
                rules2: {
                    stagesName: [{ required: true, message: this.$t('pleaseenteratasklistname'), trigger: "blur" }],
                },
                taskRules : {
                    name: [{ required: true, message: this.$t('enterthetaskcontent'), trigger: "blur" }],
                },
                sleectId: null,
                sleectProjectId: null,
                sidebarIndex: null, // 侧边栏索引
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                count: 0,
                textarea2: '',
                taskId: null,
                commentList: [],
                radio: 0,
                critic: [], // 评论头像的数组
                editorOption: { // 富文本框里面的默认值
                    placeholder: this.$t('pleaseentethetext'),
                     modules: {
                        toolbar:[
                            ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                            // ['blockquote', 'code-block'],     //引用，代码块
                    
                            [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
                            // [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                            // [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                            // [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                            // [{ 'direction': 'rtl' }],             // 文本方向
                    
                            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                    
                            [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
                            // [{ 'font': [] }],     //字体
                            [{ 'align': [] }],    //对齐方式
                    
                            ['clean'],    //清除字体样式
                            // ['image','video']    //上传图片、上传视频
                            ['image']    //上传图片、上传视频
                        ], //工具栏设置
                    },
                    theme: 'snow',
                },
                textContent: true, // 控制提交 
                times: null,
                text2: '',
                innerVisibless: false, // 任务展示弹出层
                activities: [{
                    content: this.$t('normals'),
                    timestamp: this.$t('hoursago'),
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-circle-check',
                    color: '#409EFF'
                    }, {
                    content: this.$t('withinthetimelimit'),
                    timestamp: this.$t('hoursago8'),
                    color: '#F87872'
                    }],
                ProgressList: [],
                checkboxGrounp: [], // 选中人的数据
                checkLists: [], // 选中人数据的ID
                taskIid: null,
                viewList: [{id:1,name:this.$t('alltaskss')},{id:2,name:this.$t('taskinprogress')},{id:3,name:this.$t('missionscompleted')},{id:4,name:this.$t('taskscheduled')},
                {id:5,name:this.$t('createdthetask')},{id:6,name:this.$t('missionIwason')},{id:7,name:this.$t('todaytask')},{id:8,name:this.$t('taskthatisoverdue')}],
                importanceList:[{id:0,name:this.$t('yi-ban')},{id:1,name:this.$t('zhong-yao')},{id:2,name:this.$t('jin-ji')},],
                taskTypeList:[{id:0,name:this.$t('other.task'), icon:"iconfont firerock-iconrenwu"},{id:1,name:this.$t('other.milestone'),icon:"iconfont firerock-iconicon-"},{id:2,name:this.$t('risk'),icon:"iconfont firerock-iconfengxian"}],
                taskTypeColor:['#20A0FF','#8613ad','#bf0404'],
                taskTypeIcon:['iconfont firerock-iconrenwu','iconfont firerock-iconicon-','iconfont firerock-iconfengxian'],
                taskStatusList:[this.$t('ongoing'),this.$t('state.completed'),this.$t('state.undone')],
                //优先级
                taskLevelColor:['#262626','#E6A23C','#F56C6C'],
                stageList: '',
                selectedGroup:{},
                dateClass: true,
                dateType: 0,
                dateSelect: [],
                groupName: '',
                groupNameList: [],
                departmentList: [],
                deptId: [],
                dynamicTab: true,
                dailyList: [],

                askComponentFlg: false,
                integrationTask: {},
                integrationTaskNingwai: {},

                // 会议时间
                meetingStartValue: '',
                meetingEndValue: '',
                toMeetTaskId:'',

                // 筛选条件
                screenProjectId: '',
                screenTaskGroupingId: '',
                screenPersonnelId: '',
                allProjectList: [],
                exportTaskLoading: false,
                screenDeptId: [],
            };
        },
        methods: {
            parentMeetingCli(id) {
                this.meeting = true
                if(id) {
                 this.toMeetTaskId = id
                }
                console.log(id)
            },
            confirmMeeting() {
                var date = new Date();
                let startTime = this.meetingStartValue
                let endTime = this.meetingEndValue
                this.http.post('/task//operateMeeting',{taskId:this.toMeetTaskId,startTime:startTime,endTime:endTime},
                res => {
                    if (res.code == "ok") {
                        this.meeting=false,
                        this.$message({
                        message: this.$t('chengGongFaQiHuiYi'),
                        type: "success"
                        });
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            closeBounced(obj) {
                if(!obj.backToParentTaskSub) {
                    this.addFormVisible = false
                    this.taskComponentFlg = false
                    if(obj.addSubTask) {
                        this.addSubTask()
                    }

                    if(obj.taskLineClickAbs) {
                        this.taskLineClick(obj.items)
                    }

                    if(obj.deleteTask) {
                        this.getList()
                    }

                    if(obj.showOrNot) {
                        this.getList()
                    }

                    if(obj.submitInsert) {
                        this.getList()
                    }
                } else {
                    this.backToParentTask()
                }
            },

            // 获取来自日报
            getDailyList(id) {
                this.http.post('/report/getTaskReportList',{ 
                    // taskId: '22131'
                    taskId: id
                },
                res => {
                    if (res.code == "ok") {
                        this.dailyList = res.data
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            judgedate(itemD){
                let nowdate = new Date()
                let idate = new Date(itemD + " 23:59:59")
                return nowdate > idate ? true : false
            },

            deleteSubPro(subProject) {
                this.$confirm(this.$t('makesuretodeletethesubproject') + subProject.name + this.$t('ma'),this.$t('deletesubproject'), {
                    confirmButtonText: this.$t('btn.determine'),
                    cancelButtonText: this.$t('btn.cancel'),
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post('/sub-project/deleteProject',{ 
                        id: subProject.id 
                    },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: this.$t('message.successfullyDeleted'),
                                type: "success"
                            });
                            this.subProject(this.currentProject);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                })
                .catch(() => {});
            },
            searchList() {
                this.page = 1;
                this.getList();
            },
            addNewSubProject(subProject) {
                if (subProject == null) {
                    this.addForm = {projectId: this.currentProject.id}
                } else {
                    this.addForm = subProject;
                }
                this.addSubProject = true;
            },
            exportTaskList(){
                let parameter = {
                    status: this.searchField,
                    viewId: this.idx,
                    pageIndex: this.page,
                    pageSize: this.size,
                    // type: this.typeField
                    projectId: this.screenProjectId,
                    groupId: this.screenTaskGroupingId,
                    targetUserId: this.screenPersonnelId
                }
                if(this.typeField != 'null' && this.typeField != null && this.typeField != '') {
                    parameter.type = this.typeField
                }
                if(this.dateSelect != null && this.dateSelect.length != 0){
                    parameter.dateType = this.dateType
                    parameter.startDate = this.dateSelect[0]
                    parameter.endDate = this.dateSelect[1]
                }
                if(this.deptId.length > 0) {
                    parameter.deptId = this.deptId[this.deptId.length - 1]
                } else {
                    parameter.deptId = ''
                }
                this.http.post('/task/exportTaskList', parameter,
                    res => {
                    if (res.code == "ok") {
                        var filePath = res.data;
                        var fName = this.$t('daiBanRenWuDaoChuXlsx')
                        const a = document.createElement('a'); // 创建a标签
                        a.setAttribute('download', fName);// download属性
                        a.setAttribute('href', filePath);// href链接
                        a.click(); //自执行点击事件
                        a.remove();
                        this.exportLoading = false
                        this.byQuarterDialog  = false
                        
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                },
            //显示子项目
            subProject(item) {
                this.subProjectVisible = true;
                this.currentProject = item;
                this.http.post('/sub-project/list', {
                    projectId: item.id
                },
                res => {
                    if (res.code == "ok") {
                        this.subProjectList = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            //显示用户详情
            showUser(userId) {
                this.userDetailVisible = true;
                this.http.post(this.port.manage.userDetail, {
                    userId: userId
                },
                res => {
                    if (res.code == "ok") {
                        this.userDetail = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            //选择参与人
            changeParticipator() {
                //检查是否在参与人中，如果没有需要加入到参与人中
                // console.log(this.addForm.userId);
                var find = false;
                this.participator = [];
                this.addForm.userId.forEach(u=>{
                    var findUser = this.users.filter(au=>au.id == u)[0];
                    this.participator.push(findUser);
                })
                
            },
            getUsers() {
                // this.http.post(this.port.manage.list, {
                //     departmentId: -1,
                //     pageIndex: 1,
                //     // pageSize: 99999
                //     pageSize: -1
                // },
                this.http.post('/user/getSimpleActiveUserList', {},
                res => {
                    if (res.code == "ok") {
                        this.users = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            addStagePost() {
                let param = JSON.parse(JSON.stringify(this.stageForm));
                param.taskList = [];
                this.http.post('/stages/save',param,
                res => {
                    if (res.code == "ok") {
                        this.stageList = res.data;
                        this.addStageDialog = false;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },

            handleSizeChange(val) {
                this.size = val;
                this.getList();
            },

            //获取项目列表
            getList() {
                console.log('执行函数', this.screenDeptId)
                this.listLoading = true;
                let parameter = {
                    status: this.searchField,
                    viewId: this.idx,
                    pageIndex: this.page,
                    pageSize: this.size,
                    // type: this.typeField
                    projectId: this.screenProjectId,
                    groupId: this.screenTaskGroupingId,
                    targetUserId: this.screenPersonnelId
                }
                console.log(parameter)
                if(this.typeField != 'null' && this.typeField != null && this.typeField != '') {
                    parameter.type = this.typeField
                }
                if(this.dateSelect != null && this.dateSelect.length != 0){
                    parameter.dateType = this.dateType
                    parameter.startDate = this.dateSelect[0]
                    parameter.endDate = this.dateSelect[1]
                }
                // if(this.user.companyId == '428') {
                //     parameter.groupName = this.groupName
                // }
                if(this.deptId.length > 0) {
                    parameter.deptId = this.deptId[this.deptId.length - 1]
                } else {
                    parameter.deptId = ''
                }
                if(this.screenDeptId.length > 0) {
                    parameter.deptId = this.screenDeptId[this.screenDeptId.length - 1]
                }
                this.http.post('/task/listByPage', parameter,
                res => {
                    this.listLoading = false;
                    if(res.code == 'ok') {
                        if(this.user.userNameNeedTranslate == 1) {
                            for(var i in res.data.records) {
                                let arr = []
                                if(res.data.records[i].executorName) {
                                    arr = res.data.records[i].executorName.split(',')
                                }
                                res.data.records[i].executorNameList = arr
                            }
                        }
                        this.list = res.data.records
                        this.total = res.data.total
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                    // console.log(res)
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                })
            },

            // 导出任务
            exportTask() {
                // console.log('执行代码')
                this.exportTaskLoading = true
                let url = '' // 导出连接
                let parameter = {
                    status: this.searchField,
                    viewId: this.idx,
                    pageIndex: this.page,
                    pageSize: this.size,
                    // type: this.typeField
                    projectId: this.screenProjectId,
                    groupId: this.screenTaskGroupingId,
                    targetUserId: this.screenPersonnelId
                }
                if(this.typeField != 'null' && this.typeField != null && this.typeField != '') {
                    parameter.type = this.typeField
                }
                if(this.dateSelect != null && this.dateSelect.length != 0){
                    parameter.dateType = this.dateType
                    parameter.startDate = this.dateSelect[0]
                    parameter.endDate = this.dateSelect[1]
                }
                if(this.deptId.length > 0) {
                    parameter.deptId = this.deptId[this.deptId.length - 1]
                } else {
                    parameter.deptId = ''
                }
                this.http.post(url, parameter,
                res => {
                    if (res.code == "ok") {
                        this.exportTaskLoading = false;
                        var aTag = document.createElement('a');
                        aTag.download = this.$t('navigation.upcomingTasks');
                        aTag.href = res.data;
                        aTag.click();
                    } else {
                        this.exportTaskLoading = false;
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                    this.exportTaskLoading = false;
                });
            },  

            //显示新增界面
            handleAdd(i, item) {
                if(i == -1) {
                    this.title = this.$t('addWork');
                    this.addForm = {
                        name: '',
                        userId: [],
                        code:'',
                        inchargerId:null,
                    }
                } else {
                    this.title = this.$t('modifytheproject');
                    var list = item.participator , arr = [];
                    for(var j in list) {
                        arr.push(list[j].id)
                    }
                    
                    this.addForm = {
                        id: item.id,
                        name: item.projectName,
                        userId: arr,
                        code:item.projectCode,
                        inchargerId: item.inchargerId
                    }
                    this.changeParticipator();
                }
                this.addFormVisible = true;
            },

            //提交子项目创建修改请求
            submitInsertSubProject () {
                this.$refs.form2.validate(valid => {
                    if (valid) {
                        this.http.post('/sub-project/saveOrUpdate',this.addForm,
                        res => {
                            if (res.code == "ok") {
                                this.$message({
                                    message: this.$t('operationissuccessful'),
                                    type: "success"
                                });
                                this.subProject(this.currentProject);
                                this.addSubProject = false;
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                            }
                        );
                        }
                });
            },
            // submitInsert() {
            //     console.log("111");
            //     this.$refs.form1.validate(valid => {
            //         if (valid) {
            //             this.addLoading = true;
            //             let formData = new FormData();
            //             formData.append("name", this.addForm.name);
            //             if(this.addForm.id != null) {
            //                 formData.append("id", this.addForm.id);
            //             }
            //             if(this.addForm.userId.length != 0) {
            //                 for(var j in this.addForm.userId) {
            //                     formData.append("userId", this.addForm.userId[j]);
            //                 }
            //             }
            //             if(this.addForm.inchargerId != null) {
            //                 formData.append("inchargerId", this.addForm.inchargerId);
            //             }
            //             if(this.addForm.code != null) {
            //                 formData.append("code", this.addForm.code);
            //             }
            //             formData.delete("refTaskList")
            //             console.log('走了')
            //             this.http.uploadFile(this.port.project.add,formData,
            //             res => {
            //                 this.addLoading = false;
            //                 if (res.code == "ok") {
            //                     this.$message({
            //                         message: this.addForm.id!=null?'修改':'创建'+"成功",
            //                         type: "success"
            //                     });
            //                     this.addFormVisible = false;
            //                     this.getList();
            //                 } else {
            //                     this.$message({
            //                         message: res.msg,
            //                         type: "error"
            //                     });
            //                 }
            //             },
            //             error => {
            //                 this.addLoading = false;
            //                 this.$message({
            //                     message: error,
            //                     type: "error"
            //                 });
            //             });
            //             }
            //     });
            // },

            // 删除
            deletePro(i, item) {
                this.$confirm(this.$t('identifytheproject') + item.projectName + this.$t('ma'),this.$t('deletetheproject'), {
                    confirmButtonText: this.$t('btn.determine'),
                    cancelButtonText: this.$t('btn.cancel'),
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post(this.port.project.delete,{ 
                        id: item.id 
                    },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: this.$t('message.successfullyDeleted'),
                                type: "success"
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                })
                .catch(() => {});
            },

            detail(i) {
                this.$router.push("/list/" + this.list[i].id + "/" + this.list[i].projectName);
            },

            // 切换当前选项的索引
            switchs(e) {
                this.idx = e
                this.page = 1
                // console.log(this.searchField)
                this.getList()
            },
            // 下拉框选择
            hiddens(e) {
                if(e == 1 && (this.dateSelect == null || this.dateSelect.length == 0)){
                    return
                }
                // console.log(this.searchField)
                this.page = 1
                this.getList()
            },
            // 完成
            completes(e, el, obj) {
                console.log(obj)
                let arr = []
                let userArr = []
                if(obj.executorList) {
                    for(let i in obj.executorList) {
                        if(i == 0) {
                            userArr.push(obj.executorList[0].executorId)
                        }
                        let oobj = {
                            name: obj.executorList[i].executorName,
                            id: obj.executorList[i].executorId
                        }
                        arr.push(oobj)
                    }
                }
                this.causeRejectionForm = {
                    id: e,
                    taskStatus: el,
                    cause: '',
                    responsible: userArr.length > 0 ? userArr : '',
                    users: arr
                }
                if(el == 1 && this.user.timeType.restartTaskNeedReason == 1) {
                    this.causeRejectionDialog = true
                } else {
                    this.restart(this.causeRejectionForm)
                }
            },
            // 重启 和 完成
            restart(obj) {
                let from = {
                    id: obj.id,
                    taskStatus: obj.taskStatus,
                    personLiableIds: obj.userList,
                    reason: obj.cause
                }
                this.http.post('/task/finish', from,
                res => {
                    this.causeRejectionDialog = false
                    if (res.code == "ok") {
                        this.$message({
                            message: this.$t('operationissuccessful'),
                            type: "success"
                        });
                        this.getList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.causeRejectionDialog = false
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                })
            },
            // 重启任务点击事件
            causeRejectionClick() {
                this.causeRejectionForm.userList = this.causeRejectionForm.responsible.toString()
                console.log(this.causeRejectionForm)
                // return
                this.restart(this.causeRejectionForm)
            },
            // 点击任务事件
            editTask(task) {
                this.addFormVisible = true;
                // this.addLoading = false;
                this.title = this.$t('editingtasks');
                this.dynamicTab = true
                this.showOrNot = false
                console.log(task, '<=== 点击的数据', this.integrationTaskNingwai.length)
                const { projectId } = task
                // 自定义组件
                this.integrationTask = {
                    id: task.id,
                    task: task,
                    num: 1,
                    curProjectId: projectId || '',
                    create: false,
                    integrationTaskNingwai: {
                        groupId: task.groupId,
                        isDesc: false,
                        order: "seq",
                        projectId: projectId || '',
                    },
                    taskVue: projectId ? false : true,
                    meetingId: this.addForm.meetingId
                }
                this.taskComponentFlg = true

                this.getTaskDetail(task.id);
                // this.getTaskProgressList(task.id); // 获取任务进展列表 
                // this.getUsers(); // 获取名单数据
                // this.gain(task); // 获取评论列表
                // this.getDailyList(task.id) // 获取来自日报

                // this.getStageList()
            }, 
            addExecutorLine() {
                this.addForm.executorListFront.push({executorId:null, planHours:8});
                this.$forceUpdate();
            },
            removeExecutorLine(index) {
                this.addForm.executorListFront.splice(index,1);
                this.$forceUpdate();
            },
            getTaskDetail(id) {
                this.http.post('/task/getTask',{id: id},
                res => {
                    if (res.code == "ok") {
                        this.addForm = res.data;
                        this.addForm.createDate = null;
                        this.addForm.indate = null;
                        this.addLoading = false;
                        this.recentProgressInfo = this.addForm.progress;

                        this.addForm.executorListFront = this.addForm.executorList;
                        //删除中间传值的变量数组
                        delete this.addForm.executorList;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            //获取任务进展列表
            getTaskProgressList(taskId) {
                this.taskIid = taskId
                this.http.post('/task-progress/list', {taskId: taskId},
                    res => {
                        if (res.code == "ok") {
                            this.ProgressList = res.data;
                            this.recentProgressInfo = res.data[0]
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            },
            getUsers() {
                // console.log(this.port.manage.list)
                // this.http.post(this.port.manage.list, {
                //     departmentId: -1,
                //     pageIndex: 1,
                //     pageSize: 99999
                // },
                this.http.post('/user/getSimpleActiveUserList', {},
                res => {
                    if (res.code == "ok") {
                        this.users = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 获取评论列表
            gain (task) {
                this.commentList = [];
                this.taskId = task.id;
                this.http.post('/task-comment/getList', {taskId: task.id},
                res => {
                    if (res.code == "ok") {
                        for(var i in res.data) {
                            if(res.data[i].content.indexOf('$userName=') != '-1') {
                                let obj = {
                                    msg1: res.data[i].content.split('$')[0],
                                    msg2: res.data[i].content.split('$')[1].split('=')[1],
                                    msg3: res.data[i].content.split('$')[2]
                                }
                                res.data[i].content = obj
                            } else {
                                if(this.user.userNameNeedTranslate == 1) {
                                    let obj = {
                                        msg1: res.data[i].content,
                                        msg2: '',
                                        msg3: ''
                                    }
                                    res.data[i].content = obj
                                }
                            }
                        }
                        this.commentList = res.data
                        console.log(res.data, '数据')
                        this.sppk(this.commentList) // 获取参与人的方法
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 获取评论参与人
            sppk(comit) {
                var sk = []
                comit.forEach(function(e){
                    sk.push(e.userName)
                })
                this.critic = new Set(sk)
            },
            sss(){
                this.$refs.addRem.style.display="none" 
            },
            addprogress(){ // 添加子任务进展事件
                this.$refs.proBox.style.display="block"
                this.$refs.addPro.style.display="none"
            },
            shutPro() { // 关闭任务进展
                this.$refs.addPro.style.display="block"
                this.$refs.addRem.style.display="none" 
                this.$refs.proBox.style.display="none" 
            },
            addI() { // 打开选择查看
                this.$refs.addRem.style.display="block" 
            },
            load() {
                 if(this.count >= 0) return
                this.count += 2
            },
            onEditorFocus() {
                this.onEditorBlur()
            },
            kkk(el){
                var k = this.checkLists.indexOf(el.id)
                if (k == -1) {
                    this.checkLists.push(el.id)
                } else {
                    this.checkLists.splice(k, 1)
                }
            },
            shutPro() { // 关闭任务进展
                this.$refs.addPro.style.display="block"
                this.$refs.addRem.style.display="none" 
                this.$refs.proBox.style.display="none" 
            },
            addTaskProgress() { //创建任务进展
                var param = {
                    taskId: this.taskIid,
                    status: this.radio,
                    content: this.text2,
                    participatorIds: this.checkLists.toString()
                };
                this.http.post('/task-progress/addProgress', param,
                    res => {
                        if (res.code == "ok") {
                            this.shutPro()
                            this.getTaskProgressList(this.taskIid)
                            this.$message({
                                message: this.$t('releasesuccess'),
                                type: "success"
                            });
                            this.checkboxGrounp = [],
                            this.checkLists = [],
                            this.text2 = '',
                            this.radio = 0
                            let obj = {
                                id: this.taskIid
                            }
                            this.gain(obj)
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            },
            //删除任务进展
            deleteTaskProgress(id) {
                this.http.post('/task-progress/deleteProgress', {id: id},
                    res => {
                        if (res.code == "ok") {
                            this.getTaskProgressList(this.taskIid)
                            this.$message({
                                message: this.$t('message.successfullyDeleted'),
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            },
            //显示子任务创建卡片
            addSubTask() {
                this.addFormVisible = true;
                this.addForm = {parentTname: this.addForm.name,parentTid: this.addForm.id,projectId: this.addForm.projectId, groupId: this.addForm.groupId,  taskLevel:0, planHours: 8, taskType: 0};
                this.addLoading = false;
            },
            taskLineClick(row, column, event) {
                this.editTask(row);
            },
            finishTask(task) {
                this.http.post('/task/finish',{id: task.id, taskStatus: task.taskStatus},
                        res => {
                            if (res.code == "ok") {
                                if (this.groupType == 0) {
                                    this.getStageList();
                                } else {
                                    // this.getViewTaskList();
                                }
                                
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
            },
            //认领任务
            addAsMyTask(task) {
                this.http.post('/task/addAsMyTask',{id: task.id},
                res => {
                    if (res.code == "ok") {
                        this.getStageList();
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            timess(){
                var date = new Date()
                let Y = date.getFullYear()
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
                let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
                this.times = `${Y}-${M}-${D}`
            },
            showSubTaskList(task) {
                this.subTaskVisible = true;
                this.addForm = task;
            },
            addTask(stage) {
                this.addFormVisible = true;
                // this.addForm = {projectId: stage.projectId, groupId: stage.groupId, stagesId: stage.id, taskLevel:0, planHours: 8, taskType: 0};
                this.addForm = {projectId: '', groupId: '', stagesId: '', taskLevel:0, planHours: 8, taskType: 0};
                this.addLoading = false;
                this.title=this.$t('createtask ');
                this.commentList = [];
                this.showOrNot = true

                let obj = {
                    create: true,
                    addForm: this.addForm,
                    executorListFront: [{executorId:null, planHours:8}],
                    stage: this.addForm,
                    integrationTaskNingwai: this.integrationTaskNingwai,
                    taskVue: true,         
                    meetingId: this.addForm.meetingId
                }
                this.integrationTask = obj

                this.taskComponentFlg = true
            },
            addStage() {
                this.addStageDialog = true;
                this.stageForm = {groupId: this.selectedGroup.id, projectId: this.curProjectId};
            },
            // 获得焦点时触发
            onEditorBlur(){
                let theEle = this.$refs.text; // 获取元素
                var img = theEle.value.match(/<img[^>]+>/g); // 赛选 img 标签
                var arrImg = ''
                for (var j = 0; j < img.length; j++) {
                    // 正则匹配，摘出img标签下的src里的内容，即capture
                    img[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
                        arrImg += capture
                    });
                }
                // 原来的字符流大小，单位为字节
                var strLen = arrImg.length;
                // 计算后得到的文件流大小，单位为字节
                var fileSize=parseInt(strLen-(strLen/8)*2);
                var size = "";
	            size = (fileSize/1024/1024).toFixed(2);
                if (size > 2){
                    this.textContent = false
                     this.$message({
                        showClose: true,
                        message: this.$t('imageexceeds2MBpleaseuploaditagain'),
                        type: 'warning'
                    });
                }
                this.textContent = true
            },
            backToParentTask() {
                console.log('我是不是出发了')
                this.getTaskDetail(this.addForm.parentTid);
                this.$refs.thskComponents.backToParentTask()
            },
            // 点击发布
            release() {
                if(this.textarea2.length <= 0) return this.$message({message: this.$t('pleaseentercontent'), type: "error"})
                this.http.post('/task-comment/add', {taskId: this.taskId, userId: this.user.id, content: this.textarea2},
                res => {
                    if(res.code == "ok"){
                        if(res.data.content.indexOf('$userName=') != '-1') {
                            let obj = {
                                msg1: res.data.content.split('$')[0],
                                msg2: res.data.content.split('$')[1].split('=')[1],
                                msg3: res.data.content.split('$')[2]
                            }
                            res.data.content = obj
                        } else {
                            if(this.user.userNameNeedTranslate == 1) {
                                let obj = {
                                    msg1: res.data.content,
                                    msg2: '',
                                    msg3: ''
                                }
                                res.data.content = obj
                            }
                        }
                        this.commentList.push(res.data)
                        this.sppk(this.commentList)
                        this.textarea2 = ""
                        this.contRoll() // 滚动到底部
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                })
            },
            // 滚动到底部
            contRoll(){
                this.$nextTick(() => {
                    this.$refs.main.scrollTop = this.$refs.contRoll.scrollHeight;
                })
            },
            submitInsert() {
                if (this.textContent !== true) return  this.$message({
                    showClose: true,
                    message: this.$t('pictureistoolargepleaseuploaditagain'),
                    type: 'warning'
                });
                //检查是有重名的执行人
                var exeList = this.addForm.executorListFront;
                for (var i=0;i<exeList.length;i++) {
                    var findSameUser = false;
                    for (var j=i+1;j<exeList.length; j++) {
                        if (exeList[i].executorId && exeList[j].executorId && exeList[i].executorId == exeList[j].executorId) {
                            findSameUser = true;
                            break;
                        }
                    }
                    if (findSameUser) {
                        return this.$message({
                            showClose: true,
                            message: this.$t('executorhasduplication'),
                            type: 'error'
                        });
                    }
                }
                
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        delete this.addForm.subTaskList;
                        delete this.addForm.progress;
                        delete this.addForm.refTaskList;
                        this.addForm.executorListStr = JSON.stringify(this.addForm.executorListFront);
                        this.addLoading = true;
                        this.http.post('/task/save',this.addForm,
                            res => {
                                this.addLoading = false
                                if (res.code == "ok") {
                                    this.$message({
                                        message: this.$t('message.submittedSuccessfully'),
                                        type: "success"
                                    });
                                    
                                    if (this.addForm.parentTid == null) {
                                        this.addFormVisible = false;
                                        if (this.groupType == 0) {
                                            this.getStageList();
                                        } else {
                                            // this.getViewTaskList();
                                        }
                                    } else {
                                        this.backToParentTask();
                                    }
                                    this.getList()
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error"
                                    });
                                }
                            },
                            error => {
                                this.addLoading = false
                                this.$message({
                                    message: error,
                                    type: "error"
                                });
                                }
                            );
                        }
                });
            },
            //加载项目内的任务列表
            getStageList() {
                // console.log('进来了')
                this.http.post('/stages/list',{groupId: this.selectedGroup.id, projectId: this.selectedGroup.projectId, order: this.order, isDesc: this.isDesc},
                res => {
                    if (res.code == "ok") {
                        this.stageList = res.data.list;
                        // console.log('触发获取任务列表函数')
                        this.timess() // 处理时间的方法
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            //删除当前编辑的任务
            deleteTask() {
                var warning='';
                if (this.addForm.subTaskList.length > 0) {
                    warning=this.$t('currenttaskanditssubtasks');
                } else {
                    warning=this.$t('wanttodeletethecurrent task');
                }
                this.$confirm(warning, this.$t('other.prompts'), {
                    //type: 'warning'
                }).then(() => {
                    this.isDeleting = true;
                    this.http.post('/task/delete',{id: this.addForm.id},
                    res => {
                        this.isDeleting = false;
                        if (res.code == "ok") {
                            this.addFormVisible = false;
                            // this.getStageList();
                            this.getList();
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.isDeleting = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                });
            },
            chan() {
                // console.log(this.critic)
            },
            getSthForSb() {
                this.http.post('/task/getGroupNameList ',{},
                res => {
                    if (res.code == "ok") {
                        console.log('看看是', res.data)
                        this.groupNameList = res.data
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 获取部门
            getDepartmentList() {
                this.http.post( this.port.manage.depList, {},
                    res => {
                    if (res.code == "ok") {
                        let dptlist = JSON.parse(JSON.stringify(res.data));
                        this.departmentList = this.changeArr(dptlist);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                    },error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            changeArr(arr) {
                for (var i = 0; i < arr.length; i++) {
                    if(arr[i].id != -1 && arr[i].id != 0) {
                        if (arr[i].children != null && arr[i].children.length>0) {
                            arr[i].children = this.changeArr(arr[i].children);
                        }
                        arr[i].id && (arr[i].value = arr[i].id);
                        delete arr[i].id;
                    }
                }
                for(var i in arr) {
                    if(arr[i].id == -1 || arr[i].id == 0) {
                        arr.splice(i,1)
                    }    
                }
                return arr;
            },
            selectCal(obj) {
                if(obj.distinction == '1') {
                    this.addForm.executorListFront[obj.index].executorId = obj.id
                } else if(obj.distinction == '5') {
                    let arr = []
                    for(var i in obj.arrUserList) {
                        arr.push(obj.arrUserList[i].id) 
                    }
                    this.causeRejectionForm.responsible = arr
                } else if(obj.distinction == '10') {
                    this.screenPersonnelId = obj.id
                    this.hiddens()
                }
            },

            screenProjectChange() {
                if(!this.screenProjectId) {
                    this.screenTaskGroupingId = ''
                } else {
                    this.getTaskGroupList()
                }   
                this.hiddens()

            },

            // 获取项目列表
            getAllProjectlist() {
                this.http.post('/project/getProjectList',{},
                res => {
                    if (res.code == "ok") {
                        this.allProjectList = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 获取任务分组列表
            getTaskGroupList() {
                this.http.post('/task-group/list',{
                    projectId: this.screenProjectId
                },
                res => {
                    if (res.code == "ok") {
                        this.taskGroupList = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            vueCasader(obj) {
                if(obj.distinction == '1') {
                    if(obj.id != '') {
                        let arr = []
                        arr.push(obj.id)
                        this.screenDeptId = arr
                    } else {
                        this.screenDeptId = []
                    }
                    this.getList()
                }
            }
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
        },
        mounted() {
            this.getList();
            this.getUsers();
            // this.getDailyList()
            if(this.user.timeType.projectWithDept) {
                this.getDepartmentList()
            }
            this.getDepartmentList()
            this.getAllProjectlist()
            // if(this.user.companyId == '428') {
            //     this.getSthForSb()
            // }
        },
    };
</script>

<style lang="scss" scoped>
    .Daily p {
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
    }
    .sub-all {
        // display: flex;
        div {
            display: inline-block;
            padding: 0 20px;
            font-size: 20px;
            cursor: pointer;
        }
        .subOn {
            color: #66b1ff;
        }
    }
    .DailyBody {
        margin: 0 20px;
    }
    .Daily{
        height: 120%;
        overflow: auto;
    }
// .classification {
//     width: 120px;
//     // height: 100%;
//     border-right: 1px solid #f2f2f2;
//     display: flex;
//     flex-wrap: wrap;
//     // align-items: center;
//     // justify-content: center;
//     padding-top: 20px;
// }
// .classification p{
//     width: 120px;
//     text-align: center;
//     line-height: 50px;
//     margin: 0;
//     cursor: pointer;
// }
// .classification p:hover {
//     background: #dddddd;
// }
// .on {
//     // background: #dddddd;
//     color: #409EFF;
// }
// .acl{
//     display: inline-block;
//     width: 300px;
//     height: 22px;
//     // line-height: 22px;
//     overflow: hidden;
//     white-space: nowrap;
//     text-overflow: ellipsis;
//     margin: 0;
//     padding: 0;
//     line-height: 0;
// }
// .cal {
//     width: 300px;
//     overflow: hidden;
//     white-space: nowrap;
//     text-overflow: ellipsis;
//     cursor: pointer;
// }
</style>