manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/components/taskComponent.vue

<template>
  <div>
    <div style="height: 72vh;overflow: auto;">
        <el-form ref="form1" :model="addForm" :rules="taskRules" label-width="120px">
            <el-form-item label="所属项目" v-if="showOrNot" prop="projectId">
                <el-select v-model="addForm.projectId" :placeholder="$t('defaultText.pleaseChoose')" @change="agentCreatesEvents(1)" filterable="true" style="width:100%;">
                    <el-option v-for="item in projectList" :key="item.id" :label="item.projectName + item.projectCode" :value="item.id">
                        <span style="float: left;color: #8492a6;">{{ item.projectCode }}</span>
                        <span style="float: right;font-size: 13px;">{{ item.projectName }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属任务分组" v-if="showOrNot" prop="groupId">
                <el-select v-model="addForm.groupId" :placeholder="$t('defaultText.pleaseChoose')" @change="agentCreatesEvents(2)" filterable="true" style="width:100%;">
                    <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属任务列表" v-if="showOrNot" prop="stagesId">
                <el-select v-model="addForm.stagesId" :placeholder="$t('defaultText.pleaseChoose')" filterable="true" 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('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) && !(groupResponsibleId == user.id)" @change="selchg()">
                    <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 && !(groupResponsibleId == user.id)" :placeholder="$t('enterthetaskcontent')" clearable></el-input>
            </el-form-item>
            <!-- {{timelabel}}{{mileageCup}} -->
            <el-form-item :label="!timelabel ? $t('starttimes') : $t('jie-zhi-shi-jian')" prop="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 && !(groupResponsibleId == user.id)" @change="DateChange()" v-if="!timelabel"></el-date-picker>
                <span style="margin-left:30px;margin-right:10px;" v-if="!timelabel">{{ $t('deadline') }}</span>
                <el-date-picker style="width:40%;" 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 && !(groupResponsibleId == user.id)" @change="DateChange()"></el-date-picker>
                <span style="margin-left:30px;margin-right:10px;" v-if="timelabel && mileageCup">{{ $t('wan-cheng-shi-jian') }}</span>
                <el-date-picker style="width:40%;" v-if="timelabel && mileageCup" v-model="addForm.finishDate" 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 && !(groupResponsibleId == user.id)" @change="DateChange()"></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 && !(groupResponsibleId == user.id)" 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 v-if="user.userNameNeedTranslate == 1" :size="'mini'" :filterable="true" :subject="users" :subjectId="executorItem.executorId" :distinction="'1'" @selectCal="selectCal" :index="index" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)"></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 && !(groupResponsibleId == user.id)" v-model="gstimday[index]" style="width:16%;" :min="1" :max="100"  :placeholder="$t('danweitian')" @change="chggstim(0,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.day') }}</span>
                <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" v-model="gstimhour[index]" style="width:16%;" :min="1" :max="100"  :placeholder="$t('pleaseentertheplannedworking')" @change="chggstim(1,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.hour') }}</span>

                <!-- <el-input-number v-model="numnnumnum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> -->

                <!-- 移除执行人 -->
                <i class="el-icon-delete" v-if="index>0 && (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id|| permissions.projectManagement || groupResponsibleId == user.id)" 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)) || 
            groupResponsibleId == user.id)" 
            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>
                <!-- 任务进展 -->
                <template v-if="!timelabel || isRelationItem">
                
                <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('tixiang') }}{{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">{{recentProgressInfo.creatorName}}{{ $t('geng-xin-yu') }}{{recentProgressInfo.indate | relativeTime}}</div> -->
                        <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 foooot">
                    <el-button type="primary" @click="innerVisibless = false">{{ $t('Shutdown') }}</el-button>
                </span>
                </el-dialog>
                </template>
                <!-- 子任务/关联任务 -->
                <p ><i class="iconfont firerock-icontree" style="color:#20A0ff;margin-left:10px;">{{timelabel && !isRelationItem ? $t('guanlian') : $t('zirwu')}}</i>
                    <el-link style="float:right;" @click="addRelation" v-if="timelabel && !isRelationItem">{{ $t('associatedTask') }}</el-link>
                    <el-link style="float:right;" @click="addSubTask" v-else>{{ $t('addingsubtask') }}</el-link>
                </p>
                <!-- 关联任务列表 -->
                <el-table key="guanlian" :data="relationSubTaskList" v-if="timelabel && !isRelationItem"
                :header-cell-style="{'font-weight':'normal'}"
                highlight-current-row
                v-loading="listLoading"
                style="width: 100%;margin-top:10px;"
                @row-click="relationTaskClick">
                    <el-table-column prop="taskStatus" :label="$t('wan-cheng')" width="50" >
                        <template slot-scope="scope">
                            <el-checkbox :disabled="scope.row.taskStatus==2" :checked="scope.row.taskStatus==1?true:false" size="large" class="cb" @change="relationFinishTask(scope.row)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskName" :label="$t('biao-ti')" >
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.taskName" placement="top" style="cursor:pointer;color:#409eff;">
                                <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" > {{scope.row.taskName}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('operation')" width="130" align="left">
                        <template slot-scope="scope">
                            <el-button @click.stop.native="deleteRelationItem(scope.row.id)" size="mini">{{ $t('dissociated') }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--子任务列表 -->
                <el-table key="zi" :data="addForm.subTaskList" v-else
                        :header-cell-style="{'font-weight':'normal'}"
                        highlight-current-row v-loading="listLoading" style="width: 100%;margin-top:10px;" @row-click="taskLineClick">
                            <el-table-column prop="taskStatus" :label="$t('wan-cheng')" width="50" >
                            <template slot-scope="scope">
                            <el-checkbox :disabled="scope.row.taskStatus==2" :checked="scope.row.taskStatus==1?true:false" size="large" class="cb"  
                                            @change="finishTask(scope.row)"
                                            ></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" :label="$t('biao-ti')" >
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                                <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" > {{scope.row.name}}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="executorName" :label="$t('zhi-hang-ren')" width="100" >
                            <template slot-scope="scope">
                                <span v-if="user.userNameNeedTranslate != 1">
                                    {{scope.row.executorName == null?$t('dai-fen-pei'):scope.row.executorName}}
                                </span>
                                <span v-if="user.userNameNeedTranslate == 1">
                                    <span v-if="scope.row.executorName == null">
                                        {{$t('dai-fen-pei')}}
                                    </span>
                                    <span v-else>
                                        <span v-for="item,index in scope.row.executorName" :key="index">
                                            <ww-open-data type='userName' :openid='item'></ww-open-data>
                                            <span v-if="index < scope.row.executorName.length - 1">,</span>
                                        </span>
                                    </span>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="endDate" :label="$t('deadline')" width="100" >
                            <template slot-scope="scope">
                                <p v-if="scope.row.endDate >= times">{{scope.row.endDate}}</p>
                                <p v-else style="background: #e62412; color: #fff;text-align: center; border-radius: 3px;">{{scope.row.endDate}}</p>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
        </el-form>
        <!-- 关联文件列表 -->
        <template v-if="isEditFile">
            <div style="width:100%;margin:1em 0;">
                <i class="iconfont firerock-icontree" style="color:#20A0ff;margin-left:10px;">{{ $t('jiafuchengguo') }}</i>
                <el-link @click="relationFileClick()" style="float:right;margin-left:10px">{{ $t('associatedfiles') }}</el-link>
                <el-upload style="float:right;" action="#" :http-request="uploadFileClick" :show-file-list="false" :multiple="false">
                    <el-link>{{ $t('uoloadFiles') }}</el-link>
                </el-upload>
                
            </div>
            <el-table
                v-loading="fileListLoading"
                ref="filetable"
                :data="taskFileList"
                :header-cell-style="{'font-weight':'normal'}"
                highlight-current-row
                max-height="240"
                style="width: 100%;margin-top:10px;margin-bottom:15px">
                <el-table-column :label="$t('headerTop.serialNumber')" prop="documentType" min-width="40" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.$index + 1}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('filenames')" prop="documentName" min-width="180"></el-table-column>
                <el-table-column :label="$t('filesize')" prop="size" min-width="60" align="center"></el-table-column>
                <el-table-column :label="$t('founder')" prop="creatorName" min-width="60" align="center">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="user.userNameNeedTranslate != 1">{{scope.row.creatorName}}</span>
                            <span v-if="user.userNameNeedTranslate == 1">
                                <ww-open-data type='userName' :openid='scope.row.creatorName'></ww-open-data>
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('creationtime')" prop="indate" min-width="120" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.indate[0] + '-' + scope.row.indate[1] + '-' + scope.row.indate[2] + '\u0020\u0020' + scope.row.indate[3] + ':' + scope.row.indate[4] + ':' + scope.row.indate[5]}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('operation')" min-width="90">
                    <template slot-scope="scope">
                        <el-link :href="scope.row.url" :download="scope.row.documentName" type="primary" style="margin-right:7px">{{ $t('other.download') }}</el-link>
                        <el-link @click="taskFileDelete(scope.row.id)">{{ $t('btn.delete') }}</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 关联文件dialog -->
        <el-dialog v-if="relationFileDialog" :visible.sync="relationFileDialog" :title="$t('associatedfiles')" append-to-body>
            <span>{{ $t('wenjian1guanli') }}</span>
            <div>
                <span>{{ $t('xuanzwenjian') }}</span>
                <el-select v-model="addFileId" filterable >
                    <el-option
                        v-for="item in projectFileList"
                        :key="item.id"
                        :label="item.documentName"
                        :value="item.id"
                    ></el-option>
                </el-select>
                <el-button @click="addTaskFile()">{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>
        <el-dialog v-if="isRelationTab" :visible.sync="isRelationTab" :title="$t('associatedTask')" width="800px" append-to-body>
            <el-form ref="relationItemForm" label-width="100px">
                <el-form-item :label="$t('selecttask')" prop="taskType">
                    <el-select v-model="relationvalue" multiple style="width:80%">
                        <el-option
                        v-for="item in relationdata"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer foooot">
                <el-button @click="isRelationTab = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="addRelationTask()">{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>
    </div>
    <div slot="footer" class="dialog-footer foooot">
        <el-button v-if="(user.id == addForm.createrId || currentProject.inchargerId == user.id || currentProject.creatorId == user.id || permissions.projectManagement) && canAddTask" @click.native="deleteTask()" style="float:left;">{{ $t('btn.delete') }}</el-button>
        <el-button @click.native="closeBounceds()">{{ $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 || isRelationItem" >
        <el-page-header  @back="backToParentTask" :title="timelabel ? $t('returnmilestone') : $t('parenttask')" :content="timelabel ? relationPar.name : addForm.parentTname"></el-page-header>
    </div> -->
    <!-- 评论 -->
    <div class="remark" v-show="addForm.id != null">
        <span class="zh">
                <div class="player">
                    <p>{{ $t('participantin') }}</p>
                    <div class="bj">
                        <span  v-for="(pl, i) in critic" :key="i">
                        <span style="background: #778899" v-if="user.userNameNeedTranslate != 1">{{pl.length > 2 ? pl.substring(pl.length - 2, pl.length) : pl}}</span>
                        <span v-if="user.userNameNeedTranslate == 1">
                            <ww-open-data type='userName' :openid='pl'></ww-open-data>
                        </span>
                        </span>
                        <!-- <span style="background: #778899">{{pl.length}}</span> -->
                    </div>
                </div>
            <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> -->
                                    <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>
                                <!-- </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>
  </div>
</template>

<script>
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 {
  props: {
    integrationTask:{
        type: Object,
        default: {}
    },
    // 是否显示选择任务
    showOrNot: {
        type: Boolean,
        default: false
    }
  },
  components: {
    quillEditor, // 富文本
    selectCat
  },
  data() {
    return {
        numnnumnum: 2,
        componentFlg: false,
        mileageCup: false,
        loadingExport : false,
        saveTemplateLoading: false,
        joinMembList:[],
        setInchargerDialog: false,
        recentProgressInfo:{},
        addToTmpDialog:false,
        templateForm:{},
        importTaskDialog:false,
        importToStageId:null,
        exportDialog: false,
        exportTaskType:null,
        groupTemplateList:[],
        createGroupWay:'new',
        modGroupDialog:false,
        subTaskVisible:false,
        orderList:[{id:"seq",name:this.$t('manuallydragthesequence'),isDesc:false},{id:"create_date",name:this.$t('creationtimeisthelatest'),isDesc:true},
                        {id:"end_date",name:this.$t('deadlineisthelatest'),isDesc:true},
                        {id:"task_level",name:this.$t('highestpriority'),isDesc:true}],
        order:"seq",
        isDesc:false,
        taskDataList:[],
        displayTable: false,
        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'],
        stageListHeight:0,
        taskListinH:0,
        groupWidth:260,
        drag: false,
        stageDrag: false,
        dragging: false,
        stageList:[],
        selectedGroup:{},
        allGroupData:[],
        defaultGroupId:null,
        addGroupDialog: false,
        addStageDialog: false,
        groupSearch:null,
        groupType:0,//0-分组，1-视图
        groupList: [],
        groupForm:{},
        stageForm:[],
        curProjectId:null,
        projectList:null,
        activeIndex:"1",
        activeName:"projectInside",
        searchField:null,
        keyword:null,
        user: JSON.parse(sessionStorage.getItem("user")),
        permissions: JSON.parse(sessionStorage.getItem("permissions")),
        userDetailVisible: false,
        userDetail:{},
        date: new Date(),
        users: [],
        tableHeight: 0,
        listLoading: false,
        
        subProjectVisible: false,
        subProjectList: [],//子项目列表
        currentProject:{},
        addSubProject: false,
        addFormVisible: false,
        addLoading: false,
        title: "",
        addForm: {
            name: '',
            executorListFront: []
        },
        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" }],
            projectId: [{ required: true, message: '请选择所属项目', trigger: "blur" }],
            groupId: [{ required: true, message: '请选择所属任务分组', trigger: "blur" }],
            stagesId: [{ required: true, message: '请选择所属任务列表', trigger: "blur" }],
        },
        formGrouping: {
            name: [{ required: true, message: this.$t('pleaseenteragroupname'), trigger: "blur" }],
        },
        sleectId: null,
        sleectProjectId: null,
        sidebarIndex: 0, // 侧边栏索引
        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,
        gstimday:[1],
        gstimhour:[8],
        timelabel: false,
        relationdata: [],
        isRelationTab: false,
        relationvalue:[],
        relationSubTaskList:[],
        relationItemData: null,
        relationPar:{name: ''},
        isRelationItem: false,
        // 关联文件
        fileListLoading:false,
        projectFileList:[],
        taskFileList:[],
        relationFileDialog: false,
        addFileId: null,
        isEditFile: false,
        // 设置项目参与人
        participantsDialog: false,
        participantsFilterText: '',
        deptMembData: [
            {
                id: 0,
                label: this.$t('lable.unassigned'),
            }
        ],
        defaultProps: {
            children: 'children',
            label: 'label'
        },
        chosenMembCount: 0,
        ididid:null,
        alreadyPartArray: [],
        projectCreatorId: null,
        projectInchargerId: null,
        canAddTask: false, // 是否可创建任务的判断标志
        canEditStageList: false, //是否可编辑列表的判断标志
        groupResponsibleId: '', // 分组负责人的id
        groupDetailsShow: false,
        groupDetailData: {},
        groupDetailTil: '',
        setTemplateData: {},
        setTemplateDialog: false,
        
        taskListPage: 1,
        taskListSize: 20,
        taskListTotal: 0,
        dynamicTab: true,
        dailyList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    console.log('我获取到的数据', this.integrationTask, this.showOrNot)
    this.triggerEvent(this.integrationTask)
    this.gstimhour = [this.user.timeType.allday]
    this.gstimday = [1]

    this.timess()
  },
  methods: {
    // 触发事件
    triggerEvent(obj) {
        console.log(obj, '触发事件')
        this.curProjectId = obj.curProjectId
        this.getProjectList()
        if(!obj.taskVue) {
            this.getStageList(obj.integrationTaskNingwai)
        }
        this.getUsers(); // 获取名单数据
        if(obj.create) {
            this.mileageCup = false
            this.addFormVisible = true;
            this.addForm = {projectId: obj.stage.projectId, groupId: obj.stage.groupId, stagesId: obj.stage.id, taskLevel:0, planHours: 8, taskType: 0};
            this.addForm.executorListFront = [{executorId:null, planHours:this.user.timeType.allday}];
            this.gstimhour = [this.user.timeType.allday]
            this.gstimday = [1]
            this.addLoading = false;
            this.isEditFile = false;
            this.title=this.$t('createtask ');
            this.commentList = [];
            this.timelabel = false
        } else {
            if(!obj.taskVue) {
                this.isEditFile = true;
                this.getDetail(obj.curProjectId)
            }
            this.getTaskDetail(obj.id);
            this.getTaskProgressList(obj.id); // 获取任务进展列表 
            this.gain(obj.task); // 获取评论列表
            this.getDailyList(obj.id) // 获取来自日报
            this.getRelationTaskList(obj.num, obj.id)
            this.getTaskFileList(obj.num,obj.id)
        }
    },
    // 代办任务创建事件
    agentCreatesEvents(num) {
        if(num == 1) {
            this.addForm.groupId = ''
            this.addForm.stagesId = ''
            this.getTaskGrouping()
        } else if(num == 2) {
            this.addForm.stagesId = ''
            this.getTaskList()
        }
    },
    //获取项目列表
    getProjectList() {
        this.http.post(this.port.project.list, {},
        res => {
            if (res.code == "ok") {
                this.projectList = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    // 获取任务分组
    getTaskGrouping() {
        this.http.post('/task-group/list', {projectId:this.addForm.projectId},
        res => {
            if (res.code == "ok") {
                this.groupList = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    getTaskList() {
        let obj = {
            groupId: this.addForm.groupId,
            projectId: this.addForm.projectId,
            order: 'seq',
            isDesc: false
        }
        this.getStageList(obj)
    },
    // 关闭最外层弹窗
    closeBounceds() {
        console.log('我被触发了')
        this.$emit('closeBounced', {})
    },
    chggstim(e,i){
        if(e){
            this.gstimday[i] = Math.ceil(this.gstimhour[i] / this.user.timeType.allday)
        }else{
            this.gstimhour[i] = this.gstimday[i] * this.user.timeType.allday
        }
    },
    removeExecutorLine(index,e) {
        if(e == 1){
            this.relationItemData.executorList.splice(index,1);
            this.gstimday.splice(index,1)
            this.gstimhour.splice(index,1)
            this.$forceUpdate();
        }else{
            this.addForm.executorListFront.splice(index,1);
            this.gstimday.splice(index,1)
            this.gstimhour.splice(index,1)
            this.$forceUpdate();
        }
        
    },
    addExecutorLine(e) {
        if(e == 1){
            if (this.relationItemData.executorList == null) {
                this.relationItemData.executorList = [];//初始化
            }
            this.relationItemData.executorList.push({executorId:null, planHours:this.user.timeType.allday});
            this.gstimday.push(1)
            this.gstimhour.push(this.user.timeType.allday)
            this.$forceUpdate();
        }else{
            if (this.addForm.executorListFront == null) {
                this.addForm.executorListFront = [];//初始化
            }
            this.addForm.executorListFront.push({executorId:null, planHours:this.user.timeType.allday});
            this.gstimday.push(1)
            this.gstimhour.push(this.user.timeType.allday)
            this.$forceUpdate();
            }
        
    },
    getTaskDetail(id) {
        this.http.post('/task/getTask',{id: id},
        res => {
            if (res.code == "ok") {
                if(this.user.userNameNeedTranslate == 1) {
                    for(var i in res.data.subTaskList) {
                        if(res.data.subTaskList[i].executorName) {
                            res.data.subTaskList[i].executorName = res.data.subTaskList[i].executorName.split(',')
                        }
                    }   
                }
                this.addForm = res.data;
                this.addForm.createDate = null;
                this.addForm.indate = null;
                this.addLoading = false;

                this.canAddTask = res.data.canAddTask

                this.recentProgressInfo = res.data.progress;

                this.addForm.executorListFront = res.data.executorList;

                this.gstimday = []
                this.gstimhour = []
                for(let i=0;i<this.addForm.executorListFront.length;i++){
                    this.gstimhour.push(this.addForm.executorListFront[i].planHours)
                    this.gstimday.push(Math.ceil(this.addForm.executorListFront[i].planHours / this.user.timeType.allday))
                }
                console.log(this.gstimday, this.gstimhour)
                // //删除中间传值的变量数组
                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() {
        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,e) {
        this.commentList = [];
        this.taskId = e == 1 ? task.taskId : task.id;
        this.http.post('/task-comment/getList', {taskId: e == 1 ? task.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
                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)
        console.log(this.critic, '参与人',this.critic.length)
    },
    getRelationTaskList(i,e){  //获取关联任务列表
        let eid = null
        if(i){
            eid = e
        }else{
            eid = this.addForm.id
        }
        this.http.post('/task/getMilestoneTaskList',{
            milestoneId: eid
        },res => {
            if(res.code == 'ok') {
                this.relationSubTaskList = res.data
                // console.log('res',res.data);
            }else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },error => {
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
    // 获取来自日报
    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"
            });
        });
    },
    // 获取任务下的文档列表
    getTaskFileList(e,eid){
        let etaskId
        if(e == 1){etaskId = eid}
        else{etaskId = this.addForm.id}
        this.fileListLoading = true
        this.http.post('/task-files/getTaskFiles',{
            taskId: etaskId
        },res => {
            if(res.code == 'ok'){
                this.fileListLoading = false
                this.taskFileList = res.data
                console.log('taskFileList',res.data);
            }else {
                this.fileListLoading = false
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },error => {
            this.fileListLoading = false
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
    DateChange(){
        if(this.addForm.startDate != undefined && this.addForm.endDate != undefined){
            let stdate = Date.parse(this.addForm.startDate)
            let eddate = Date.parse(this.addForm.endDate)
            if(stdate <= eddate){
                let days = (eddate - stdate) / (1*24*60*60*1000) + 1
                for (let i=0;i<this.gstimday.length;i++) {
                    this.gstimday[i] = days
                    this.gstimhour[i] = days * this.user.timeType.allday
                }
                this.$forceUpdate()
            }
        }
        
    },
    // 自定义组件事件
    selectCal(obj) {
        if(obj.distinction == '1') {
            this.addForm.executorListFront[obj.index].executorId = obj.id
        } else if(obj.distinction == '2') {
            this.groupForm.inchargerId = obj.id
        }
    },
    getDetail(id) {
        this.http.post('/project/detail',{ 
            id: id
        },
        res => {
            if (res.code == "ok") {
                console.log('触发更新试一下')
                this.currentProject = res.data;
                this.getjurisdictionIds(this.currentProject)
                this.joinMembList = this.currentProject.participationList;
            } else {
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
            }
        );
    },
    getjurisdictionIds(pro){
        console.log('pro',pro.creatorId);
        this.projectCreatorId = pro.creatorId
        this.projectInchargerId = pro.inchargerId
    },
    //加载项目内的任务列表
    getStageList(obj) {
        this.http.post('/stages/list', {
            groupId: obj.groupId,
            projectId: obj.projectId,
            order: obj.order,
            isDesc: obj.isDesc
        },
        res => {
            if (res.code == "ok") {
                this.stageList = res.data.list;
                this.canAddTask = res.data.canAddTask
                this.canEditStageList = res.data.canEditStageList
                this.timess() // 处理时间的方法
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    timess(){
        // console.log('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}`
        console.log(this.times, '时间')
    },
    // 提交按钮
    submitInsert() {
        if (this.textContent !== true) return  this.$message({
            showClose: true,
            message: this.$t('pictureistoolargepleaseuploaditagain'),
            type: 'warning'
        });
        //检查是有重名的执行人
        var exeList = this.addForm.executorListFront;
        // for(let i=0;i<this.gstimhour.length;i++){
        //     exeList[i].planHours = this.gstimhour[i]
        // }
        
        for (var i=0;i<exeList.length;i++) {
            var findSameUser = false;
            exeList[i].planHours = this.gstimhour[i]
            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'
                });
            }
        }
        if(this.addForm.startDate && this.addForm.endDate) {
            if(this.addForm.endDate < this.addForm.startDate) {
                return this.$message({
                    showClose: true,
                    message: this.$t('ren-wu-jie-zhi-shi-jian-bu-neng-xiao-yu-kai-shi-shi-jian'),
                    type: 'error'
                });
            }
        }
        
        this.$refs.form1.validate(valid => {
            if (valid) {
                delete this.addForm.subTaskList;
                delete this.addForm.refTaskList;
                delete this.addForm.progress;
                //去掉没有执行人的.(因为要有计划工时，执行人可以暂不设置)
                // this.addForm.executorListFront = this.addForm.executorListFront.filter(exe=>exe.executorId);
                this.addForm.executorListStr = JSON.stringify(this.addForm.executorListFront);
                this.addLoading = true;
                this.http.post('/task/save',this.addForm,
                    res => {
                        this.addLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: this.$t('message.submittedSuccessfully'),
                                type: "success"
                            });
                            
                            if (this.addForm.parentTid == null) {
                                console.log('我是对的')
                                let obj = {
                                    submitInsert: true,
                                    showOrNot: this.showOrNot
                                }
                                this.$emit('closeBounced', obj)
                            } else {
                                console.log('我也是对的')
                                // this.backToParentTask();
                                this.$emit('closeBounced', {backToParentTaskSub: true})
                            }
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                }
        });
    },
    backToParentTask() {
        this.getTaskDetail(this.timelabel ? this.relationPar.id : this.addForm.parentTid);
        this.isEditFile = true;
        if(this.timelabel){
            this.isRelationItem = false
            this.getRelationTaskList(1, this.relationPar.id)
            this.gain(this.relationPar)
        }
    },
    onEditorFocus() {
        this.onEditorBlur()
    },
    // 获得焦点时触发
    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
    },
    //删除当前编辑的任务
    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.$emit('closeBounced', {deleteTask: true})
                } else {
                    this.$message({
                    message: res.msg,
                    type: "error"
                    });
                }
            },
            error => {
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        });
    },
    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" 
    },
    //创建任务进展
    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"
                    });
                }
            }
        );
    },
    addI() { // 打开选择查看
        this.$refs.addRem.style.display="block" 
    },
    selchg(){   //类型切换
        if(this.addForm.taskType == 1){
            this.timelabel = true
            if(!this.addForm.executorListFront[0].executorId) {
                console.log(this.currentProject)
                this.addForm.executorListFront[0].executorId = this.currentProject.inchargerId
            }
        }else{
            this.timelabel = false
        }
    },
    DateChange(){
        if(this.addForm.startDate != undefined && this.addForm.endDate != undefined){
            let stdate = Date.parse(this.addForm.startDate)
            let eddate = Date.parse(this.addForm.endDate)
            if(stdate <= eddate){
                let days = (eddate - stdate) / (1*24*60*60*1000) + 1
                for (let i=0;i<this.gstimday.length;i++) {
                    this.gstimday[i] = days
                    this.gstimhour[i] = days * this.user.timeType.allday
                }
                this.$forceUpdate()
            }
            // console.log("gstimday",this.gstimday);
            
        }
        
    },
    kkk(el){
        var k = this.checkLists.indexOf(el.id)
        if (k == -1) {
            this.checkLists.push(el.id)
        } else {
            this.checkLists.splice(k, 1)
        }
    },
    //删除任务进展
    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"
                    });
                }
            }
        );
    },
    addRelation(){  //关联任务卡片
        this.relationvalue = []
        this.isRelationTab = true
        this.getrelation()
    },
    getrelation(){  //获取选择关联列表
        this.http.post('/task/getTaskOnlyList',{
            projectId: this.curProjectId
        },
        res => {
            if (res.code == "ok") {
                this.relationdata = []
                res.data.forEach( (item) =>{
                    if(item.taskType != 1){
                        this.relationdata.push(item)
                    }
                })
                
                // console.log('map',this.relationdata);
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    //显示子任务创建卡片
    addSubTask() {
        if(this.isRelationItem){return}
        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.addForm.executorListFront = [{executorId:null, planHours:8}];
        this.addLoading = false;

        //创建子任务，非编辑状态
        this.isEditFile = false;

        // 触发外界子任务事件
        this.$emit('closeBounced', {addSubTask: true, addForms: this.addForm})
    },
    // 关联任务点击事件
    relationTaskClick(row,column,event){
        // console.log('relationTaskClick',row);
        this.relationPar = JSON.parse(JSON.stringify(this.addForm))
        // console.log(this.relationPar);
        this.addFormVisible = true;
        this.addLoading = false;
        this.isRelationItem = true;
        this.isEditFile = true;
        this.title = this.$t('editingtasks');
        this.getTaskDetail(row.taskId);
        this.getUsers();
        this.gain(row,1);
        this.getRelationTaskList(1, row.taskId)
        this.getTaskFileList(1,row.taskId)
    },
    // 解除关联
    deleteRelationItem(eid){
        this.listLoading = true
        this.http.post('/task/removeMileStoneTask',{
            id: eid
        },res => {
            if(res.code == 'ok') {
                this.getRelationTaskList()
                this.listLoading = false
                this.$message({
                    message: this.$t('jie-chu-cheng-gong'),
                    type: 'success'
                })
            }else {
                this.listLoading = false
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },error => {
            this.listLoading = false
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
    // 关联任务列表是否完成修改
    relationFinishTask(row){
        this.http.post('/task/finish',{
            id: row.taskId,
            taskStatus: row.taskStatus
        },res => {
            if(res.code == 'ok'){
                // if(this.groupType == 0){
                //     this.getStageList();
                // }else {
                //     this.getViewTaskList();
                    let obj = {
                        submitInsert: true
                    }
                    this.$emit('closeBounced', obj)
                // }
            }else{
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },error => {
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
    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();
                // }
                let obj = {
                    submitInsert: true
                }
                this.$emit('closeBounced', obj)
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    // 关联文件按钮
    relationFileClick(){
        this.relationFileDialog = true
        this.addFileId = null
        this.getProjectFileList()
    },
    // 获取项目下的文档列表
    getProjectFileList(){
        this.http.post('/task-files/getDocumentList',{
            projectId: this.curProjectId
        },res => {
            if(res.code == 'ok'){
                this.projectFileList = res.data
                console.log('list',res.data);
            }else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },error => {
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
    // 列表的删除按钮
    taskFileDelete(eid){
        this.$confirm('是否移除此文件？', this.$t('other.prompts'), {
            confirmButtonText: this.$t('btn.determine'),
            cancelButtonText: this.$t('btn.cancel'),
            type: 'warning'
        }).then(()=>{
            this.http.post('/task-files/delete',{
                id: eid
            },res => {
                if(res.code == 'ok'){
                    this.$message({
                        message: res.data,
                        type: 'success'
                    })
                    this.getTaskFileList()
                }else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
            },error => {
                this.$message({
                    message: error,
                    type: 'error'
                })
            })
        }).catch(()=>{
            this.$message({
                message: this.$t('thedeletionhasbeencancelled'),
                type: 'info'
            })
        })
    },
    // 确认关联文件
    addTaskFile(){
        if(this.addFileId == null){
            this.$message({message: this.$t('xuanzguanlianwenjian') , type: 'warning'})
            return
        }
        this.http.post('/task-files/addDocumentRef',{
            documentId: this.addFileId,
            taskId: this.addForm.id,
            projectId: this.curProjectId
        },res => {
            if(res.code == 'ok'){
                this.$message({
                    message: this.$t('guan-lian-cheng-gong'),
                    type: 'success'
                })
                this.relationFileDialog = false
                this.getTaskFileList()
            }else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },error => {
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
    addRelationTask(){  //添加关联任务
        this.http.post('/task/addMileStoneTask',{
            milestoneId: this.addForm.id,
            taskIds: JSON.stringify(this.relationvalue)
        },
        res =>{
            if(res.code == "ok") {
                this.isRelationTab = false
                this.$message({
                    message: this.$t('addsuccessful'),
                    type: 'success'
                })
                this.getRelationTaskList()
                this.$forceUpdate()
            }else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },
        error => {
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
    backToParentTask() {
        // this.getTaskDetail(this.addForm.parentTid);
        this.getTaskDetail(this.timelabel ? this.relationPar.id : this.addForm.parentTid);
        this.isEditFile = true;
        if(this.timelabel){
            this.isRelationItem = false
            // this.relationPar = {name: ''}
            this.getRelationTaskList(1, this.relationPar.id)
            this.gain(this.relationPar)
        }
    },
    // 点击评论发布
    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;
        })
    },
    sss(){
        this.$refs.addRem.style.display="none" 
    },
    taskLineClick(row, column, event) {
        if(this.isRelationItem){return}
        this.mileageCup = true
        if(row.taskType == 1){
            this.timelabel = true
            this.isRelationItem = false
        }else{
            this.timelabel = false
        }
        this.addFormVisible = true;
        this.isEditFile = true;
        this.addLoading = false;

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

        this.$emit('closeBounced', {taskLineClickAbs: true, items: row})
    },
    // 列表的上传按钮
    uploadFileClick(item){
        console.log("upload",item.file);
        let files = new FormData()
        files.append("projectId",this.curProjectId);
        files.append("taskId", this.addForm.id);
        files.append("file", item.file);
        this.http.uploadFile('/task-files/uploadFile',files,
        res => {
            if(res.code == 'ok'){
                console.log(res);
                this.$message({
                    message: this.$t('yi-shang-chuan'),
                    type: 'success'
                })
                this.getTaskFileList()
            }else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        },error => {
            this.$message({
                message: error,
                type: 'error'
            })
        })
    },
  },
};
</script>

<style lang="scss" scoped>
.foooot {
    padding: 10px 20px 20px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.Daily p {
    margin: 0 !important;
    padding: 0 0 10px 0 !important;
}
.sub-all {
    div {
        display: inline-block;
        padding: 0 20px;
        font-size: 20px;
        cursor: pointer;
    }
    .subOn {
        color: #66b1ff;
    }
}
.DailyBody {
    margin: 0 20px;
}
.Daily{
    height: 120%;
    overflow: auto;
}

.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;
}
.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;
        direction: rtl;
    }
    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>