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="350">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" width="350" v-if="scope.row.name">
                            <p id="caseContent">{{scope.row.name}}</p>
                            <div slot="reference" class="name-wrapper">
                                <div class="cal">{{scope.row.name}}</div>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="projectName" label="项目名称" sortable width="350"></el-table-column>
                    <el-table-column prop="executorName" label="负责人" sortable width="250">
                        <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="350" @mouseover="mouseOver">
                        <!-- <template slot-scope="scope">
                            <el-popover trigger="click" placement="top" width="450" v-if="scope.row.taskDesc">
                            <p v-html='scope.row.taskDesc'></p>
                            <div slot="reference" class="name-wrapper">
                                <div class="acl" v-html='scope.row.taskDesc'></div>
                            </div>
                            </el-popover>
                        </template> -->
                    </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"
                        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>
    </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>
<script>
import { error } from 'dingtalk-jsapi';
    import util from "../../common/js/util";

    export default {
        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,
            };
        },
        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"
                    });
                });
            },

            //分页
            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"
                    });
                }
                )
            },
        },
        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>