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">
                <!-- <div style="margin-left: 20px;display: inline-block">
                <el-form-item label="任务列表">
                </el-form-item>
                </div> -->
                <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="项目分组" v-if="user.companyId == '428'">
                    <div style="margin-left: 8px">
                        <el-select v-model="groupName" style="width:200px;" placeholder="请选择" clearable @change="hiddens()">
                            <el-option v-for="(item, index) in groupNameList" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                    </div>
                </el-form-item> -->

                <el-form-item :label="$t('subordinatedepartments')" v-if="user.timeType.projectWithDept">
                    <!-- <span style="margin-left:5px;margin-right:5px;color:#606266;">部门</span> -->
                    <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 style="float:right;">
                    <el-link type="primary" :underline="false" @click="handleAdd(-1,null)">新增任务</el-link>
                </el-form-item> -->

                <!-- <div style="margin-left: 40px;display: inline-block">
                <el-form-item label="类型">
                </el-form-item>
                </div> -->
                <el-form-item :label="$t('types')">
                    <div style="margin-left: 8px">
                    <!-- <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入项目名称关键字" clearable="true"> -->
                        <el-select v-model="typeField" style="width:120px;" size="small" slot="prepend" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="hiddens()">
                            <!-- <el-option label="任务" value="0" @click.native="hiddens()"></el-option>
                            <el-option label="里程碑" value="1" @click.native="hiddens()"></el-option>
                            <el-option label="风险" value="2" @click.native="hiddens()"></el-option> -->
                            <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>
                        <!-- <el-button slot="append" @click="searchList" icon="el-icon-search"></el-button> -->
                    <!-- </el-input> -->
                    </div>
                </el-form-item>
                <el-form-item >
                    <div style="margin-left: 80px">
                        <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>
                </el-form-item>
                <el-form-item >
                    <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>
                </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">{{ $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="stagesName" :label="$t('taskstage')" sortable width="180" @mouseover="mouseOver">
                    </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'"><ww-open-data type='departmentName' :openid='scope.row.departmentName'></ww-open-data></span>
                                <span v-if="user.userNameNeedTranslate != '1'">{{departmentName}}</span>
                            </div>
                        </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="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">
                                    <ww-open-data type='userName' :openid='item'></ww-open-data>
                                    <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="260" 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)">{{ $t('wan-cheng') }}</el-button>
                            <el-button v-if="searchField == 1" size="small" type="warning" @click="completes(scope.row.id, 1)">{{ $t('zhong-qi') }}</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <!--工具条-->
                <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'"><ww-open-data type='userName' :openid='userDetail.name'></ww-open-data></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'"><ww-open-data type='departmentName' :openid='userDetail.name'></ww-open-data></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="800px" :top="'6vh'">
        <!-- <div style="width: 200%;height:80%;position: absolute;right:-100%;top:0;background:#000;opacity: 0;" @click="sss"></div> -->
            <div style="height: 72vh;overflow: auto;">
                <el-form ref="form1" :model="addForm" :rules="taskRules" label-width="100px">
                    <!--子任务需要选择任务列表 -->
                    <el-form-item :label="$t('tasklist')" prop="stages" v-if="addForm.parentTid != null">
                        <el-select v-model="addForm.stagesId" style="width:100%;" >
                            <el-option v-for="item in stageList" :key="item.id" :label="item.stagesName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('types')">
                        <el-select v-model="addForm.taskType" style="width:100%;" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement">
                            <el-option v-for="item in taskTypeList" :key="item.id" :label="item.name" :value="item.id">
                                <i :class="item.icon" ></i>
                                <span>{{item.name}}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('taskdefinition')" prop="name">
                        <el-input v-model="addForm.name" :maxlength="40" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement" :placeholder="$t('enterthetaskcontent')" clearable></el-input>
                    </el-form-item>
                    
                    <el-form-item :label="addForm.taskType == 1 ? $t('deadline') : $t('starttimes')" :prop="addForm.taskType == 1 ? 'endDate' : 'startDate'">
                        <el-date-picker v-model="addForm.startDate" type="date" style="width:40%;" value-format="yyyy-MM-dd"  
                        :placeholder="$t('pleaseselectadate')" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement" v-if="addForm.taskType != 1"></el-date-picker>
                        <span style="margin-left:30px;margin-right:10px;" v-if="addForm.taskType != 1">{{ $t('deadline') }}</span>
                        <el-date-picker v-model="addForm.endDate" type="date" value-format="yyyy-MM-dd"  
                        :placeholder="$t('pleaseselectadate')" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement"></el-date-picker>
                        </el-form-item>
                    <div style="border: 1px solid #ddd;margin:5px 0;padding:5px 0;">
                    <el-form-item :label="$t('zhi-hang-ren')+(index+1)" v-for="(executorItem, index) in addForm.executorListFront" :key="index">

                        <el-select v-if="user.userNameNeedTranslate != '1'" v-model="executorItem.executorId" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement" size="small" filterable clearable :placeholder="$t('pleaseselectanexecutor')" style="width:40%;" @change="$forceUpdate()">
                            <el-option v-for="item in 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" v-if="item.jobNumber">{{ item.jobNumber }}</span>
                            </el-option>
                        </el-select>
                        
                        <selectCat :subject="users" :subjectId="executorItem.executorId" :index="index" @selectCal="selectCal" :size="'mini'" v-if="user.userNameNeedTranslate == '1'"></selectCat>

                        <span style="margin-left:30px;margin-right:10px;">{{ $t('plantime') }}</span>
                        <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement" v-model="executorItem.planHours" style="width:30%;" :min="1" :max="100"  :placeholder="$t('pleaseentertheplannedworking')" ></el-input-number ><span style="margin-left:10px;">{{ $t('time.hour') }}</span>
                        <!--移除执行人 -->
                        <i class="el-icon-delete" v-if="index>0 && (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id|| permissions.projectManagement)" style="margin-left:5px" @click="removeExecutorLine(index)"></i>
                    </el-form-item>
                    <el-link type="primary" v-if="(addForm.executorListFront == null || addForm.executorListFront.length<10)&& (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id || permissions.projectManagement)" style="margin-left:35px;" @click="addExecutorLine">{{ $t('addinganexecutor') }}</el-link>
                    </div>
                    
                    <el-form-item :label="$t('priority')">
                        <el-select v-model="addForm.taskLevel" style="width:100%;" >
                            <el-option v-for="item in importanceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 富文本 -->
                    <el-form-item :label="$t('detaileddescription')" style="height: 200px">
                        <!-- <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor> -->
                        <!-- <el-input type="textarea" v-model="addForm.taskDesc" :rows="3"></el-input> -->
                        <!-- <quill-edito v-model="addForm.taskDesc"></quill-edito> -->
                        <quill-editor style="height: 150px" ref="text" v-model="addForm.taskDesc" class="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"/>
                    </el-form-item>
                    <!-- 富文本 -->
                    <div v-if="addForm.id != null">
                        <el-divider ></el-divider>
                        <!-- 任务进展 -->
                        <p ><i class="iconfont firerock-icontree" style="color:#20A0ff;margin-left:10px;">{{ $t('taskprogress') }}</i>
                            <span ref="addPro" style="display: block; float:right;"><el-link @click="addprogress">{{ $t('addtaskprogress') }}</el-link></span>
                        </p>
                        <!-- 任务进展展示 -->
                        <div style="display: none;" ref="proBox" class="progress">
                            <!-- <el-form :model="> -->
                            <el-radio-group v-model="radio">
                                <el-radio :label="0" class="rala1">{{ $t('normals') }}</el-radio>
                                <el-radio :label="1" class="rala2">{{ $t('atrisk') }}</el-radio>
                                <el-radio :label="2" class="rala3">{{ $t('withinthetimelimit') }}</el-radio>
                            </el-radio-group>

                            <el-input
                            type="textarea"
                            border="0"
                            :autosize="{ minRows: 2, maxRows: 6}"
                            :placeholder="$t('detailedprogressdescription')"
                            v-model="text2"
                            style="margin:10px 0 0 0">
                            </el-input>

                            <h4 style="font-weight: normal;">{{ $t('whotoremindtocheck') +'：'}}{{checkLists.length}}</h4>

                            <i class="el-icon-circle-plus pron_i" style="font-size: 28px;color: #409EFF;" @click="addI(0)"></i>

                            <div class="remind" ref="addRem" style="display: none">
                                <el-checkbox-group v-model="checkboxGrounp" v-for="item in users" :key="item.id">
                                    <p>
                                        <el-checkbox :label="item.name" @change="kkk(item)">
                                            <span>
                                                <span v-if="user.userNameNeedTranslate != '1'">
                                                    {{item.name}}
                                                </span>
                                                <span v-if="user.userNameNeedTranslate == '1'">
                                                    <ww-open-data type='userName' :openid='item.name'></ww-open-data>
                                                </span>
                                            </span>
                                        </el-checkbox>
                                    </p>
                                </el-checkbox-group>
                            </div>
                            <div class="ssp" @click="sss"></div>
                            <!-- </el-form> -->
                            <div class="pro_btn">
                                <el-button size="mini" @click="shutPro">{{ $t('btn.cancel') }}</el-button>
                                <el-button size="mini" type="primary" @click="addTaskProgress">{{ $t('fa-bu') }}</el-button>
                            </div>

                        </div>

                        <div class="ddl" v-if="recentProgressInfo != null && recentProgressInfo.id != null">
                            <div class="elCard" style="margin-bottom: 10px; height:" >
                                <i class="el-icon-success" style="color: #43d14f;" v-if="recentProgressInfo.status == 0"></i>
                                <i class="el-icon-success" style="color: #fd7624;" v-else-if="recentProgressInfo.status == 1"></i>
                                <i class="el-icon-success" style="color: #fd4d47;" v-else></i>
                                <span v-if="recentProgressInfo.status == 0">{{ $t('normals') }}</span>
                                <span v-else-if="recentProgressInfo.status == 1">{{ $t('normals') }}</span>
                                <span v-else>{{ $t('withinthetimelimit') }}</span>

                                <el-dropdown trigger="click" style="float:right;cursor:pointer; float: right;">
                                        <i class="el-icon-more" ></i>
                                        <el-dropdown-menu slot="dropdown">

                                            <el-dropdown-item divided>
                                                <span @click="deleteTaskProgress(recentProgressInfo.id)"><i class="el-icon-delete"></i>{{ $t('deleteList ') }}</span></el-dropdown-item>
                                        </el-dropdown-menu>
                                </el-dropdown>
                                <div class="elCard_qu">
                                    <span>
                                        <span v-if="user.userNameNeedTranslate != '1'">
                                            {{recentProgressInfo.creatorName}}
                                        </span>
                                        <span v-if="user.userNameNeedTranslate == '1'">
                                            <ww-open-data type='userName' :openid='recentProgressInfo.creatorName'></ww-open-data>
                                        </span>
                                    </span>
                                    {{ $t('geng-xin-yu') }}{{recentProgressInfo.indate | relativeTime}}
                                </div>
                                <p style="padding-left: 20px;">{{recentProgressInfo.content}}</p>
                                <div class="examine"><el-button type="text" @click="innerVisibless = true" style="color: #8F87A3;">{{ $t('viewingHistory') }}</el-button></div>
                            </div>
                        </div>

                        <!-- 任务列表没有数据的时候展示 -->
                        <div class="nones" v-if="ProgressList.length <= 0">
                            {{ $t('nodata') }} 
                        </div>

                        <!-- 任务进展完整状态 -->
                        <el-dialog :title="$t('other.prompts')" :visible.sync="innerVisibless" append-to-body width="500px">
                        <div class="integrity">
                            <h3 style="font-weight: normal;display: inline-block;margin: 0 0 20px 0;">{{ $t('taskprogress') }}：{{ProgressList.length}}</h3>
                            <!-- <span class="write"><i class="el-icon-circle-plus"></i>填写进展</span> -->
                            <el-divider></el-divider>

                            <!--  -->
                                <div class="block" style="height: 200px;">
                                    <el-timeline style="padding:20px 0 0 0;">
                                        <el-timeline-item
                                        v-for="(activity, index) in ProgressList"
                                        :key="index">
                                        <div class="tb">
                                            <span v-if="activity.status == 0" style="color: #43D14F" class="icon"></span>
                                            <span v-if="activity.status == 1" style="color: #FD7624" class="icon"></span>
                                            <span v-if="activity.status == 2" style="color: red" class="icon"></span>
                                            <div>
                                                <span v-if="activity.status == 0" style="color: #43D14F">{{ $t('normals') }}</span>
                                                <span v-if="activity.status == 1" style="color: #FD7624">{{ $t('atrisk') }}</span>
                                                <span v-if="activity.status == 2" style="color: red">{{ $t('withinthetimelimit') }}</span>
                                                <span style="display: inline-block; float: right; color: #8C8C8C">{{activity.indate | relativeTime}}</span>
                                            </div>
                                            <p style="color: #8C8C8C">{{activity.content}}</p>
                                            
                                        </div>
                                        </el-timeline-item>
                                    </el-timeline>
                                </div>
                            <!--  -->
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="innerVisibless = false">{{ $t('Shutdown') }}</el-button>
                        </span>
                        </el-dialog>
                        </div>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="user.id == addForm.createrId || currentProject.inchargerId == user.id || currentProject.creatorId == user.id || permissions.projectManagement" @click.native="deleteTask" style="float:left;">{{ $t('btn.delete') }}</el-button>
                <el-button @click.native="addFormVisible = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="submitInsert" :loading="addLoading">{{ $t('btn.submit') }}</el-button>
            </div>
            <div slot="title" v-if="addForm.parentTid != null" >
                <!-- <el-link @click="backToParentTask"><i class="el-icon-arrow-left single_line">返回父级任务</i> | {{addForm.parentTname}}</el-link> -->
                <el-page-header  @back="backToParentTask" :title="$t('parenttask')" :content="addForm.parentTname"></el-page-header>
            </div>
            <!-- 评论 -->
            <div class="remark" v-show="addForm.id != null">
                <span class="zh">
                    <!-- <span  v-for="(pl, i) in critic" :key="i"> -->
                        <!-- <div class="player" v-if="pl"> -->
                        <div class="player">
                            <p @click="chan">{{ $t('participantin') }}</p>
                            <span  v-for="(pl, i) in critic" :key="i">
                            <div class="bj" style="width: 14%;">
                                <span style="background: #778899" v-if="user.userNameNeedTranslate != '1'">{{pl.length > 2 ? pl.substring(pl.length - 2, pl.length) : pl}}</span>
                                <span style="background: #778899" v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='userName' :openid='pl'></ww-open-data></span>
                            </div>
                            </span>
                        </div>
                    <!-- </span> -->
                    <div class="subject">
                        <div class="sub-all">
                            <div :class="dynamicTab ? 'subOn' : ''" @click="dynamicTab = true">{{ $t('alldynamic') }}</div>
                            <div :class="dynamicTab ? '' : 'subOn'" @click="dynamicTab = false">{{ $t('xiang-guan-ri-bao') }}</div>
                        </div>
                        <div class="sub-details" ref="main" v-if="dynamicTab">
                            <ul class="infinite-list" v-infinite-scroll="load" ref="contRoll">
                                <div style="width: 100%" v-if="commentList.length <= 0">
                                    <img src="../../assets/image/xiao.png" alt="">
                                </div>
                                <li v-for="i in count" class="infinite-list-item counli" :key="i">
                                    <p><i class="el-icon-s-fold"></i> <em>{{ $t('managerQucompletedthedependencytask') }}</em><span>{{ $t('onApril20') }}</span></p>
                                </li>
                                <li class="carts" v-for="item in commentList" :key="item.id">
                                    <!-- <el-image style="width: 30px; height: 30px" :src="url" :fit="fit"></el-image> -->
                                    <!-- <i :style="'background' + item.userColor"> -->
                                    <i :style="'background' + item.userColor">
                                        <i v-if="user.userNameNeedTranslate != '1'">
                                            {{item.userName.length > 2 ? item.userName.substring(item.userName.length - 2, item.userName.length) : item.userName}}
                                        </i>
                                        <i v-if="user.userNameNeedTranslate == '1'">
                                            <ww-open-data type='userName' :openid='item.userName'></ww-open-data>
                                        </i>
                                    </i>
                                    <div>
                                        <!-- <p>{{item.userName}}</p> -->
                                        <p v-if="user.userNameNeedTranslate != '1'">{{item.userName}}</p>
                                        <p v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='userName' :openid='item.userName'></ww-open-data></p>
                                        <em>
                                            <!-- {{item.content}} -->
                                            <p style="display: inline-block;padding: 0;margin: 0;" v-if="user.userNameNeedTranslate == 1">
                                                {{item.content.msg1}}
                                                <ww-open-data type='userName' :openid='item.content.msg2'></ww-open-data>
                                                {{item.content.msg3}}
                                            </p>
                                            <p style="display: inline-block;padding: 0;margin: 0;" v-if="user.userNameNeedTranslate != 1">{{item.content}}</p>
                                        </em>
                                    </div>
                                    <span>{{item.createTime | relativeTime}}</span>
                                </li>
                            </ul>
                        </div>

                        <div class="Daily" v-if="!dynamicTab">
                            <div class="one_daily_body DailyBody">
                                <el-card shadow="never" v-for="(item2,index2) in dailyList" :key="index2" style="margin-bottom: 20px;">
                                    <p>
                                        {{ $t('tian-bao-ren') }}： <span v-if="user.userNameNeedTranslate != 1">{{item2.userName}}</span>
                                        <span v-if="user.userNameNeedTranslate == 1">
                                            <ww-open-data type='userName' :openid='item2.userName'></ww-open-data>
                                        </span>
                                        <span style="float: right;">{{item2.createDate}}</span>
                                    </p>
                                    <p>{{ $t('other.approvalStatus') }}：
                                        <span v-if="user.company.packageEngineering == 0">
                                            <span style="margin-left:15px;color:#DAA520;"  v-if="item2.state == 0">
                                                <span v-if="item2.isDeptAudit==0">
                                                    <span v-if="item2.projectAuditState==0">
                                                        <!-- 待项目审核人 --> {{$t('other.waitForTheProjectReviewer')}}
                                                        <span v-if="item2.projectAuditorName != null">(
                                                            <span v-if="user.userNameNeedTranslate == '1'">
                                                                <ww-open-data type='userName' :openid='item2.projectAuditorName'></ww-open-data>
                                                            </span>
                                                            <span v-if="user.userNameNeedTranslate != '1'">{{item2.projectAuditorName}}</span>
                                                            )</span> 
                                                        <!-- 审核 --> {{$t('other.audit')}}
                                                    </span>
                                                    <span style="color:#32CD32;" v-else-if="item2.projectAuditState==1">
                                                        <!-- 项目审核人 --> {{$t('other.projectAuditor')}}
                                                        <span v-if="item2.projectAuditorName != null">(
                                                            <!-- {{item2.projectAuditorName}} -->
                                                            <span v-if="user.userNameNeedTranslate == '1'">
                                                                <ww-open-data type='userName' :openid='item2.projectAuditorName'></ww-open-data>
                                                            </span>
                                                            <span v-if="user.userNameNeedTranslate != '1'">{{item2.projectAuditorName}}</span>
                                                            )</span>
                                                        <!-- 审核通过 --> {{$t('state.approved')}}
                                                    </span>
                                                </span>
                                                <span v-else-if="item2.isDeptAudit==1">
                                                    ({{$t('other.await')}}
                                                    <span v-if="user.userNameNeedTranslate == '1'">
                                                        <ww-open-data type='departmentName' :openid='item2.auditDeptName'></ww-open-data>
                                                    </span>
                                                    <span v-if="user.userNameNeedTranslate != '1'">{{item2.auditDeptName}}</span>
                                                    {{$t('other.audit')}})
                                                </span>
                                                </span> 
                                            <span style="margin-left:15px;color:#DAA520;" v-else-if="item2.state == -1">{{$t('other.importWaitingForReview')}}</span>
                                            <span style="margin-left:15px;color:#32CD32;" v-else-if="item2.state == 1">{{$t('state.alreadyPassed')}}
                                                <span style="color:#c7e944" v-if="item2.reportAutoApprove == 1">{{$t('other.automaticReview')}}</span>
                                            </span>
                                            
                                            <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 2">{{$t('state.rejected')}} {{$t('other.reason')}}:{{item2.rejectReason}}</span>
                                            <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 3">{{$t('state.waitingsubmit')}}</span>
                                        </span>
                                        <span v-if="user.company.packageEngineering == 1">
                                            <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == -1">{{$t('other.importWaitingForReview')}}</span>
                                            <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == 0 && item2.departmentAuditState == -1">{{$t('other.waitingForProfessionalReview')}}</span>
                                            <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == 0 && item2.departmentAuditState == 0">{{$t('other.waitingForDepartmentReview')}}</span>
                                            <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == 0 && item2.departmentAuditState == 1">{{$t('other.waitForTheProjectReviewer')}}<span v-if="item2.projectAuditorName != null">
                                                (
                                                    <span v-if="user.userNameNeedTranslate != 1">
                                                        {{item2.projectAuditorName}}
                                                    </span>
                                                    <span v-if="user.userNameNeedTranslate == 1">
                                                        <ww-open-data type='userName' :openid='item2.projectAuditorName'></ww-open-data>
                                                    </span>
                                                )
                                            </span>{{$t('other.audit')}}</span>
                                            <span style="margin-left:15px;color:#32CD32;" v-else-if="item2.state == 1">{{$t('state.alreadyPassed')}}</span>
                                            <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 2">{{$t('state.rejected')}} {{$t('other.reason')}}:{{item2.rejectReason}}</span>
                                            <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 3">{{$t('state.waitingsubmit')}}</span>
                                        </span>
                                    </p>
                                    <p v-if="user.timeType.customDegreeActive==1 && item2.degree_id != null && item2.degree_id != -1">{{user.timeType.customDegreeName}}：{{item2.degreeName}}</p>
                                    <p v-if="user.timeType.customDataActive==1">{{user.timeType.customDataName}}：{{item2.customData}}</p>
                                    <!-- 自定义日报文本 -->
                                    <p v-if="user.timeType.customTextActive==1">{{user.timeType.customTextName}}：{{item2.customText}}</p>
                                    <p v-if="user.company.packageEngineering == 1">
                                        {{$t('other.professionalProgress')}}：
                                        <span style="margin-right:10px;" v-for="progressItem in item2.professionProgress" :key="progressItem.id">{{progressItem.professionName}}({{progressItem.progress}}%) 
                                            <el-tooltip v-if="progressItem.auditState == 0"  :content="$t('state.WaitingAudit')" effect="light" placement="top">
                                            <i class="iconfont firerock-icondaibandengdaishenhe"></i>
                                            </el-tooltip>
                                            <el-tooltip v-if="progressItem.auditState == 1" :content="$t('state.alreadyPassed')" effect="light" placement="top">
                                            <i  class="iconfont firerock-iconshenhetongguo"></i>
                                            </el-tooltip>
                                            <el-tooltip v-if="progressItem.auditState == 2" :content="$t('state.notThrough')" effect="light" placement="top">
                                            <i  class="iconfont firerock-iconshenhebohui"></i>
                                            </el-tooltip>
                                            </span>
                                    </p>
                                    <div v-if="item2.multiWorktime==0">
                                    <p style="display: inline-block;">{{$t('time.duration')}}：
                                        <span v-if="item2.reportTimeType == 0" style="margin-right:10px;">{{typeList[item2.timeType]}}</span>
                                        <span v-if="item2.reportTimeType == 2" style="margin-right:10px;">{{item2.startTime+'-'+item2.endTime}}</span>
                                    {{item2.time.toFixed(1)}}h  
                                    <el-tag type="danger" size="mini" style="margin-left: 65px" v-if="item2.isOvertime === 1">{{$t('other.WorkOvertime')}}<span v-if="item2.overtimeHours">{{item2.overtimeHours.toFixed(1)}}h</span></el-tag>
                                    </p>
                                    <p>{{$t('other.matters')}}：<span v-html="item2.content"></span></p>
                                    </div>
                                    <div v-if="item2.multiWorktime==1" >
                                        <p>{{$t('other.projectDuration')}}：{{item2.time.toFixed(1)}}h  <el-tag type="danger" size="mini" style="margin-left: 65px" v-if="item2.isOvertime === 1">{{ $t('other.WorkOvertime') }}<span v-if="item2.overtimeHours">{{item2.overtimeHours.toFixed(1)}}h</span></el-tag></p>
                                        <div v-for="(timeItem, tIndex) in item2.worktimeList" :key="tIndex"
                                            style="border: 0.5px #ddd solid;margin-bottom:5px;padding:5px;">
                                            <p style="display: inline-block;">{{$t('time.duration')}}：
                                                <span v-if="item2.reportTimeType == 2" style="margin-right:10px;">{{timeItem.startTime+'-'+timeItem.endTime}}</span>
                                            {{timeItem.time.toFixed(1)}}h  
                                            </p>
                                            <p>{{$t('other.matters')}}：<span v-html="timeItem.content"></span></p>
                                        </div>
                                    </div>
                                    <p v-if="item2.state == 1 && user.timeType.needEvaluate == 1">{{$t('other.evaluation')}}：<span v-html="item2.evaluate"></span></p>
                                    
                                    <!--照片的显示 -->
                                    <p v-if="item2.pics != null && item2.pics.length > 0"> 
                                        <el-image v-for="(pic, index) in item2.pics" :key="index"
                                            style="width: 100px; height: 100px; margin-right:10px;"
                                            :src="pic" 
                                            :preview-src-list="item2.pics">
                                        </el-image>
                                    </p>
                                </el-card>
                            </div>
                        </div>
                    </div>
                    <div class="issue" v-if="dynamicTab">
                        <!-- <el-input type="textarea" class="textareays" label-width="100%" label-height="140px"></el-input> -->
                        <div class="issue_fixation">
                            <div class="inputDeep"><el-input
                            type="textarea"
                            :placeholder="$t('pleaseentercontent')"
                            :autosize="{ minRows: 6, maxRows: 6}"
                            v-model="textarea2"
                            class="inputDeeps"
                            >
                            </el-input></div>
                            <el-button class="issue-button" type="primary" @click="release()">{{ $t('fa-bu') }}</el-button>
                        </div>
                    </div>
                </span>
            </div>
            <!-- 评论 -->
        </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: 73px;
    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 '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
        },
        data() {
            return {
                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: []
            };
        },
        methods: {
            // 获取来自日报
            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;
            },
            //显示子项目
            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() {
                this.listLoading = true;
                let parameter = {
                    status: this.searchField,
                    viewId: this.idx,
                    pageIndex: this.page,
                    pageSize: this.size,
                    // type: this.typeField
                }
                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 = ''
                }
                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"
                    });
                })
            },

            //显示新增界面
            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) {
                this.http.post('/task/finish', {
                    id: e,
                    taskStatus: el
                },
                res => {
                    if (res.code == "ok") {
                        this.$message({
                            message: this.$t('operationissuccessful'),
                            type: "success"
                        });
                        this.getList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                }
                )
            },
            // 点击任务事件
            editTask(task) {
                // console.log(task)
                this.addFormVisible = true;
                // this.addLoading = false;
                this.title = this.$t('editingtasks');
                this.getTaskDetail(task.id);
                this.getTaskProgressList(task.id); // 获取任务进展列表 
                this.getUsers(); // 获取名单数据
                this.gain(task); // 获取评论列表
                this.dynamicTab = true
                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.addLoading = false;
                this.title=this.$t('createtask ');
                this.commentList = [];
            },
            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() {
                this.getTaskDetail(this.addForm.parentTid);
            },
            // 点击发布
            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() {
                this.addLoading = true
                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.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.http.post('/task/delete',{id: this.addForm.id},
                    res => {
                        if (res.code == "ok") {
                            this.addFormVisible = false;
                            // this.getStageList();
                            this.getList();
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        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
                }
            }
        },
        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()
            }
            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>