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 >
                    <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;"  slot="prepend" placeholder="请选择">
                            <el-option label="进行中" value="0" @click.native="hiddens()"></el-option>
                            <el-option label="已完成" 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 style="float:right;">
                    <el-link type="primary" :underline="false" @click="handleAdd(-1,null)">新增任务</el-link>
                </el-form-item> -->
            </el-form>
        </el-col>
        <div style="display: flex;width: 100%;">
            <div class="classification">
                <div>
                    <p :class="idx == 1 ? 'on' : ''" @click="switchs(1)">我执行的</p>
                    <p :class="idx == 2 ? 'on' : ''" @click="switchs(2)">我创建的</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="name" label="任务名称" sortable width="380">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" width="380" v-if="scope.row.name">
                            <p id="caseContent">{{scope.row.name}}</p>
                            <div slot="reference" class="name-wrapper">
                                <div class="cal" @click="editTask(scope.row)">{{scope.row.name}}</div>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="projectName" label="项目名称" sortable width="350">
                        <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="执行人" sortable width="200">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="showUser(scope.row.executorId)">{{scope.row.executorName}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stagesName" label="任务阶段" sortable width="230" @mouseover="mouseOver">
                    </el-table-column>
                    <el-table-column prop="createDate" label="创建时间" sortable width="250"></el-table-column>
                    <el-table-column label="截止时间" width="290" fixed="right">
                        <template slot-scope="scope">
                            <div style="display: flex;justify-content: space-between;padding-right: 40px">
                            <span style="display: inline-block;margin-right: 55px">{{scope.row.endDate}}</span>
                            <el-button v-if="searchField == 0" size="small" type="primary" @click="completes(scope.row.id, 0)">完成</el-button>
                            <el-button v-if="searchField == 1" size="small" type="warning" @click="completes(scope.row.id, 1)">重启</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="title" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth" width="600px">
            <el-form ref="form1" :model="addForm" :rules="rules" label-width="100px">
                <el-form-item label="任务名称" >
                    <el-input v-model="addForm.code" :disabled="user.role==0" placeholder="请输入项目编号" clearable></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="addForm.name" :disabled="user.role==0" placeholder="请输入项目名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="全部参与者">
                    <el-select v-model="addForm.userId" multiple filterable placeholder="请选择参与者" style="width:100%;" @change="changeParticipator">
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主要负责人" >
                    <el-select v-model="addForm.inchargerId" :disabled="addForm.userId.length==0 ||  user.role==0" filterable placeholder="请选择负责人" style="width:100%;" @change="changeIncharger">
                        <el-option v-for="item in participator" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitInsert" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog> -->

        <!--用户详细信息弹出框-->
        <el-dialog title="查看详情" v-if="userDetailVisible" :visible.sync="userDetailVisible" :close-on-click-modal="false" customClass="customWidth" width="400px">
            <div class="line"><span>姓名</span><span>{{userDetail.name}}</span></div>
            <div class="line"><span>手机号码</span><span>{{userDetail.phone}}</span></div>
            <div class="line"><span>部门</span><span>{{userDetail.departmentName}}</span></div>
            <div class="line"><span>成本</span><span>{{userDetail.cost}}元/小时</span></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userDetailVisible = false" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 子项目列表 -->
        <el-dialog title="子项目列表" 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="序号">
                <template slot-scope="scope" >
                        {{scope.$index+1+(page-1)*size}}
                    </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" ></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope" >
                    <el-button size="small" type="primary" @click="addNewSubProject(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteSubPro(scope.row)">删除</el-button>
                </template>
            </el-table-column>

            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="subProjectVisible = false" >关闭</el-button>
                <el-button type="primary" @click="addNewSubProject()" >新增子项目</el-button>
            </div>
        </el-dialog>


        <!-- 新增子项目弹出框 -->
        <el-dialog title="新增/修改子项目" v-if="addSubProject" :visible.sync="addSubProject" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="form2" :model="addForm" :rules="rules" label-width="100px">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入项目名称" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addSubProject = false">取消</el-button>
                <el-button type="primary" @click="submitInsertSubProject" :loading="addLoading">提交</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">
        <!-- <div style="width: 200%;height:80%;position: absolute;right:-100%;top:0;background:#000;opacity: 0;" @click="sss"></div> -->
            <el-form ref="form1" :model="addForm" :rules="taskRules" label-width="100px">
                <!--子任务需要选择任务列表 -->
                <el-form-item label="任务列表" 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="类型">
                    <el-select v-model="addForm.taskType" style="width:100%;" :disabled="this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id">
                        <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="任务内容" prop="name">
                    <el-input v-model="addForm.name" :maxlength="40" :disabled="this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id" placeholder="请输入任务内容" clearable></el-input>
                </el-form-item>
                
                <el-form-item label="执行人">
                    <el-select v-model="addForm.executorId" filterable placeholder="请选择执行人" style="width:100%;" >
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="截止时间" prop="endDate">
                    <el-date-picker v-model="addForm.endDate" type="date" style="width:40%;" value-format="yyyy-MM-dd"  
                    placeholder="请选择日期" :disabled="this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id"></el-date-picker>
                    <span style="margin-left:30px;margin-right:10px;">计划工时</span><el-input-number :disabled="this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id" v-model="addForm.planHours" style="width:30%;" :min="1" :max="100"  placeholder="请输入计划工作时长，单位小时" ></el-input-number ><span style="margin-left:10px;">小时</span>
                </el-form-item>
                
                <el-form-item label="优先级">
                    <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="详细描述" 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;">任务进展</i>
                        <span ref="addPro" style="display: block; float:right;"><el-link @click="addprogress">添加任务进展</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">状态正常</el-radio>
                            <el-radio :label="1" class="rala2">存在风险</el-radio>
                            <el-radio :label="2" class="rala3">进展逾期</el-radio>
                        </el-radio-group>

                        <el-input
                        type="textarea"
                        border="0"
                        :autosize="{ minRows: 2, maxRows: 6}"
                        placeholder="请输入详细进展描述"
                        v-model.trim="text2"
                        style="margin:10px 0 0 0">
                        </el-input>

                        <h4 style="font-weight: normal;">提醒谁查看：{{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)"></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">取消</el-button>
                            <el-button size="mini" type="primary" @click="addTaskProgress">发布</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">状态正常</span>
                            <span v-else-if="recentProgressInfo.status == 1">状态正常</span>
                            <span v-else>进展逾期</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>删除列表</span></el-dropdown-item>
                                    </el-dropdown-menu>
                            </el-dropdown>
                            <div class="elCard_qu">{{recentProgressInfo.creatorName}}更新于{{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;">查看历史记录</el-button></div>
                        </div>
                    </div>

                    <!-- 任务列表没有数据的时候展示 -->
                    <div class="nones" v-if="ProgressList.length <= 0">
                        暂无数据    
                    </div>

                    <!-- 任务进展完整状态 -->
                    <el-dialog title="提示" :visible.sync="innerVisibless" append-to-body width="500px">
                    <div class="integrity">
                        <h3 style="font-weight: normal;display: inline-block;margin: 0 0 20px 0;">任务进展：{{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">状态正常</span>
                                            <span v-if="activity.status == 1" style="color: #FD7624">存在风险</span>
                                            <span v-if="activity.status == 2" style="color: red">进展预期</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">关闭</el-button>
                    </span>
                    </el-dialog>

                    <!-- 子任务 -->
                    <!-- <p ><i class="iconfont firerock-icontree" style="color:#20A0ff;margin-left:10px;">子任务</i>
                        <el-link style="float:right;" @click="addSubTask">添加子任务</el-link>
                    </p> -->
                    <!--子任务列表 -->
                    <!-- <el-table :data="addForm.subTaskList" 
                            :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="完成" width="50" >
                                <template slot-scope="scope">
                                   <el-checkbox :disabled="scope.row.taskStatus==2" :checked="scope.row.taskStatus==1?true:false" size="large" class="cb"  
                                                @click.stop.native=""
                                                @change="finishTask(scope.row)"
                                                ></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="标题" >
                                <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="执行人" width="100" >
                                <template slot-scope="scope">
                                    {{scope.row.executorName == null?"待分配":scope.row.executorName}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="endDate" label="截止时间" 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>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="user.id == this.addForm.createrId || currentProject.inchargerId == user.id" @click.native="deleteTask" style="float:left;">删除</el-button>
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitInsert" :loading="addLoading">提交</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="返回父任务" :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">参与人</p>
                            <span  v-for="(pl, i) in critic" :key="i">
                            <div class="bj" style="width: 14%">
                                <span style="background: #778899">{{pl.length > 2 ? pl.substring(pl.length - 2, pl.length) : pl}}</span>
                                <!-- <span style="background: #778899">{{pl.length}}</span> -->
                            </div>
                            </span>
                        </div>
                    <!-- </span> -->
                    <div class="subject">
                        <div class="sub-all">所有动态</div>
                        <div class="sub-details" ref="main">
                            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" 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>屈经理完成了依赖任务</em><span>4月20日</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">
                                        {{item.userName.length > 2 ? item.userName.substring(item.userName.length - 2, item.userName.length) : item.userName}}
                                    </i>
                                    <div>
                                        <!-- <p>{{item.userName}}</p> -->
                                        <p>{{item.userName}}</p>
                                        <em>{{item.content}}</em>
                                    </div>
                                    <span>{{item.createTime | relativeTime}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="issue">
                        <!-- <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="请输入内容"
                            :autosize="{ minRows: 6, maxRows: 6}"
                            v-model.trim="textarea2"
                            class="inputDeeps"
                            >
                            </el-input></div>
                            <el-button class="issue-button" type="primary" @click="release()">发布</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 {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* 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;
    }
    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 '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 // 富文本
        },
        data() {
            return {
                searchField: '0',
                keyword:null,
                user: JSON.parse(sessionStorage.getItem("user")),
                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: "请输入项目名称", trigger: "blur" }],
                },
                idx: 1,
                taskDetails: false,
                addForm: {
                    name: '',
                },
                rules: {
                    name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
                },
                rules2: {
                    stagesName: [{ required: true, message: "请输入任务列表名称", trigger: "blur" }],
                },
                taskRules : {
                    name: [{ required: true, message: "请输入任务内容", 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: '请输入文本...',
                     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: '状态正常',
                    timestamp: '7小时前',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-circle-check',
                    color: '#409EFF'
                    }, {
                    content: '进展逾期',
                    timestamp: '八小时前',
                    color: '#F87872'
                    }],
                ProgressList: [],
                checkboxGrounp: [], // 选中人的数据
                checkLists: [], // 选中人数据的ID
                taskIid: null,
                viewList: [{id:1,name:"全部任务"},{id:2,name:"进行中的任务"},{id:3,name:"已完成的任务"},{id:4,name:"待安排任务"},
                {id:5,name:"我创建的任务"},{id:6,name:"我执行的任务"},{id:7,name:"今天的任务"},{id:8,name:"已超期的任务"}],
                importanceList:[{id:0,name:"一般"},{id:1,name:"重要"},{id:2,name:"紧急"},],
                taskTypeList:[{id:0,name:"任务", icon:"iconfont firerock-iconrenwu"},{id:1,name:"里程碑",icon:"iconfont firerock-iconicon-"},{id:2,name:"风险",icon:"iconfont firerock-iconfengxian"}],
                taskTypeColor:['#20A0FF','#8613ad','#bf0404'],
                taskTypeIcon:['iconfont firerock-iconrenwu','iconfont firerock-iconicon-','iconfont firerock-iconfengxian'],
                taskStatusList:['进行中','已完成','已撤销'],
                //优先级
                taskLevelColor:['#262626','#E6A23C','#F56C6C'],
                stageList: '',
                selectedGroup:{},
            };
        },
        methods: {
            deleteSubPro(subProject) {
                this.$confirm("确定要删除子项目" + subProject.name + "吗?","删除子项目", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    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: "删除成功",
                                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
                },
                res => {
                    if (res.code == "ok") {
                        this.users = res.data.records;
                    } 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;
                this.http.post('/task/listByPage', {
                    status: this.searchField,
                    viewId: this.idx,
                    pageIndex: this.page,
                    pageSize: this.size,
                },
                res => {
                    this.listLoading = false;
                    if(res.code == 'ok') {
                        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.addForm = {
                        name: '',
                        userId: [],
                        code:'',
                        inchargerId:null,
                    }
                } else {
                    this.title = "修改项目";
                    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: "操作成功",
                                    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() {
                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);
                        }
                        
                        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("确定要项目" + item.projectName + "吗?","删除项目", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    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: "删除成功",
                                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() {
                // 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: "操作成功",
                            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.getTaskDetail(task.id);
                this.getTaskProgressList(task.id); // 获取任务进展列表 
                this.getUsers(); // 获取名单数据
                this.gain(task); // 获取评论列表
                // this.getStageList()
            }, 
            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;
                        // console.log(this.addForm, '看看数据')
                    } 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
                },
                res => {
                    if (res.code == "ok") {
                        this.users = res.data.records;
                    } 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") {
                        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)
            },
            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: '发布成功',
                                type: "success"
                            });
                            this.checkboxGrounp = [],
                            this.checkLists = [],
                            this.text2 = '',
                            this.radio = 0
                        } 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: '删除成功',
                                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.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: '图片超过了2MB，请重新上传',
                        type: 'warning'
                    });
                }
                this.textContent = true
            },
            backToParentTask() {
                this.getTaskDetail(this.addForm.parentTid);
            },
            // 点击发布
            release() {
                if(this.textarea2.length <= 0) return this.$message({message: "请输入内容", type: "error"})
                this.http.post('/task-comment/add', {taskId: this.taskId, userId: this.user.id, content: this.textarea2},
                res => {
                    if(res.code == "ok"){
                        this.commentList.push(res.data)
                        this.sppk(this.commentList)
                        this.textarea2 = ""
                        this.contRoll() // 滚动到底部
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                })
            },
            // 滚动到底部
            contRoll(){
                this.$nextTick(() => {
                    this.$refs.main.scrollTop = this.$refs.contRoll.scrollHeight;
                })
            },
            submitInsert() {
                if (this.textContent !== true) return  this.$message({
                    showClose: true,
                    message: '图片太大，请重新上传',
                    type: 'warning'
                });
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        delete this.addForm.subTaskList;
                        delete this.addForm.progress;
                        this.http.post('/task/save',this.addForm,
                            res => {
                                if (res.code == "ok") {
                                    this.$message({
                                        message: "提交成功",
                                        type: "success"
                                    });
                                    
                                    if (this.addForm.parentTid == null) {
                                        this.addFormVisible = false;
                                        if (this.groupType == 0) {
                                            this.getStageList();
                                        } else {
                                            // this.getViewTaskList();
                                        }
                                    } else {
                                        this.backToParentTask();
                                    }
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error"
                                    });
                                }
                            },
                            error => {
                                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;
                        // 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='您确定要删除当前任务及其子任务吗?';
                } else {
                    warning='您确定要删除当前任务吗?';
                }
                this.$confirm(warning, "提示", {
                    //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)
            }
        },
        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();
        },
    };
</script>

<style lang="scss" scoped>
// .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>