<template> <div class="ztask-coms"> <div class="ztask-searchs"> <div class="ztask-searchs-items"> <el-button size="small" @click="searchsCreate">创建任务</el-button> <el-button type="primary" size="small" @click="searchsDels">批量删除</el-button> </div> <div class="ztask-searchs-items"> <el-form class="ztask-searchs-forms" :inline="true" :model="data.search" label-width="auto"> <el-form-item label="柜组"> <el-select size="small" v-model="data.search.bar" placeholder="请选择柜组" style="width:160px;" > <el-option v-for="item in cache.list.bar" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="任务类型"> <el-select size="small" v-model="data.search.taskType" placeholder="请选择任务类型" style="width:160px;" > <el-option v-for="item in cache.list.taskType" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="日期"> <el-date-picker size="small" v-model="data.search.taskDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:200px;"> </el-date-picker> </el-form-item> <el-form-item label="关键词"> <el-input size="small" v-model="data.search.keys" style="width:160px" placeholder="请输入关键词" /> </el-form-item> </el-form> <el-button type="primary" size="small" @click="searchsSearch">搜 索</el-button> </div> </div> <div class="ztask-lists"> <el-table stripe ref="multipleTable" :data="list.main" tooltip-effect="dark" style="width: 100%" @selection-change="listsSelectChange" > <el-table-column type="selection" width="60"></el-table-column> <el-table-column prop="taskName" label="任务名称" align="center" width="200"></el-table-column> <el-table-column prop="taskDetail" label="任务内容" align="center"></el-table-column> <el-table-column label="创建日期" align="center" width="160"> <template slot-scope="scope">{{ scope.row.createTime }}</template> </el-table-column> <el-table-column label="操作" align="center" fixed="right" width="240"> <template slot-scope="scope"> <el-button v-if="scope.row.taskStatus === 'Top'" class="buttonTextNormal" type="text" @click="listsUntopClick(scope.row.id)">已置顶 </el-button> <el-button v-if="scope.row.taskStatus !== 'Top'" class="buttonTextNormal" type="text" @click="listsTopClick(scope.row.id)">置顶 </el-button> <el-button type="text" class="buttonTextNormal" @click="listsSeeClick(scope.row.id)">详情</el-button> <el-button type="text" class="buttonTextNormal" @click="listsEditClick(scope.row.id)">编辑</el-button> <el-button type="text" class="buttonTextWarning" @click="listsDelClick(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> <div class="ztask-pages"> <el-pagination class="ztask-page" @size-change="pagesSizeChange" @current-change="pagesNowPageChange" :current-page="data.page.nowPageNum" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="prev, pager, next, sizes, jumper" :total="400" ></el-pagination> </div> <div class="ztask-dialogs"> <el-dialog title="创建集团任务" :visible.sync="cache.status.createDialog" width="40%" :before-close="dialogCreateBeforeClose" > <div class="dialogMain"> <el-form :model="data.create" :rules="rule.create" label-width="120px" ref="createForm"> <el-row> <el-col :span="24"> <el-form-item label="任务标题:" prop="taskName"> <el-input v-model="data.create.taskName" autocomplete="off" placeholder="请输入任务标题"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="作者:" prop="author"> <el-select v-model="data.create.author" placeholder="请选择作者" @change="dialogCreateAuthorChange" style="width:100%;" > <el-option v-for="item in list.man" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="任务详情:" prop="taskDetail"> <el-input type="textarea" :rows="5" placeholder="请输入任务详情" v-model="data.create.taskDetail" ></el-input> </el-form-item> </el-col> </el-row> </el-form> </div> <span slot="footer" class="dialog-footer"> <el-button size="small" @click="dialogCreateCancel">取 消</el-button> <el-button size="small" type="primary" @click="dialogCreateSubmitSend('createForm')">保存并发布</el-button> </span> </el-dialog> <el-dialog title="查看集团任务" :visible.sync="cache.status.seeDialog" width="60%" :before-close="dialogSeeBeforeClose" > <div class="dialogMain"> <el-form :model="data.see" :rules="rule.see" label-width="120px" ref="seeForm"> <el-row> <el-col :span="24"> <el-form-item label="任务标题:" prop="taskName"> <el-input :disabled="true" v-model="data.see.taskName" autocomplete="off" placeholder="任务标题为空"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="作者:" prop="author"> <el-input :disabled="true" v-model="data.see.authore" autocomplete="off" placeholder="作者为空"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="任务详情:" prop="taskDetail"> <el-input :disabled="true" type="textarea" :rows="5" placeholder="任务详情为空" v-model="data.see.taskDetail" ></el-input> </el-form-item> </el-col> </el-row> </el-form> </div> <span slot="footer" class="dialog-footer"> <el-button size="small" @click="dialogSeeCancel">取 消</el-button> <el-button size="small" type="primary" @click="dialogSeeSubmitSend('createForm')">发 布</el-button> </span> </el-dialog> </div> </div> </template> <script> export default { components: {}, data() { return { cache: { status: { createDialog: false, seeDialog: false }, list: { bar: [ { id: "0", name: "全部" }, { id: "1", name: "柜组1" } ], taskType: [ { id: "0", name: "全部" }, { id: "1", name: "测试" } ], status: [ { id: "0", name: "全部" }, { id: "1", name: "已发布" } ], } }, list: { main: [ { id: '1001', taskName: 'TaskComAlice', taskDetail: 'TaskComAliceDetail', createTime: '2020-01-01 01:01:00', taskStatus: 'Top' }, { id: '1002', taskName: 'TaskComBob', taskDetail: 'TaskComBobDetail', createTime: '2020-01-02 02:02:00', taskStatus: '' }, { id: '1003', taskName: 'TaskComClid', taskDetail: 'TaskComClidDetail', createTime: '2020-01-03 03:03:00', taskStatus: '' }, { id: '1004', taskName: 'TaskComDive', taskDetail: 'TaskComDiveDetail', createTime: '2020-01-04 04:04:00', taskStatus: '' }, { id: '1005', taskName: 'TaskComEmma', taskDetail: 'TaskComEmmaDetail', createTime: '2020-01-05 05:05:00', taskStatus: '' }, { id: '1006', taskName: 'TaskComFaker', taskDetail: 'TaskComFakerDetail', createTime: '2020-01-06 06:06:00', taskStatus: '' }, { id: '1007', taskName: 'TaskComGlass', taskDetail: 'TaskComGlassDetail', createTime: '2020-01-07 07:07:00', taskStatus: '' }, { id: '1008', taskName: 'TaskComHardy', taskDetail: 'TaskComHardyDetail', createTime: '2020-01-08 08:08:00', taskStatus: '' }, { id: '1009', taskName: 'TaskComIda', taskDetail: 'TaskComIdaDetail', createTime: '2020-01-09 09:09:00', taskStatus: '' }, { id: '1010', taskName: 'TaskComJoke', taskDetail: 'TaskComJokeDetail', createTime: '2020-01-10 10:10:00', taskStatus: '' }, { id: '1011', taskName: 'TaskComKey', taskDetail: 'TaskComKeyDetail', createTime: '2020-01-11 11:11:00', taskStatus: '' }, { id: '1012', taskName: 'TaskComLux', taskDetail: 'TaskComLuxDetail', createTime: '2020-01-12 12:12:00', taskStatus: '' }, ], man: [ { id: '1001', name: 'Alice' }, { id: '1002', name: 'Bob' }, { id: '1003', name: 'Clid' }, { id: '1004', name: 'Dive' }, ] }, data: { search: { bar: '', taskType: '', taskDate: '', keys: '', }, page: { nowPageNum: 1, }, create: { taskName: '', author: '', taskDetail: '', }, createDefault: { taskName: '', author: '', taskDetail: '', }, see: { taskName: '', author: '', taskDetail: '', }, seeDefault: { taskName: '', author: '', taskDetail: '', }, }, rule: { create: { taskName: [{required: true, message: '任务名称不能为空', trigger: 'change'}], taskDetail: [{required: true, message: '任务详情不能为空', trigger: 'change'}], }, see: {}, } }; }, created() { }, methods: { searchsCreate() { this.cache.status.createDialog = true }, searchsDels() { }, searchsSearch() { }, listsSelectChange() { }, listsUntopClick() { }, listsTopClick() { }, listsSeeClick(inData) { this.cache.status.seeDialog = true this.data.see = { taskName: 'Bob', author: 'author', taskDetail: 'taskDetail', } }, listsEditClick(inData) { this.cache.status.createDialog = true this.data.create = { taskName: 'taskName', author: 'author', taskDetail: 'taskDetail', } }, listsDelClick() { }, pagesSizeChange() { }, pagesNowPageChange() { }, dialogCreateAuthorChange() { }, dialogCreateBeforeClose() { this.cache.status.createDialog = false }, dialogCreateCancel() { this.data.create = JSON.parse(JSON.stringify(this.data.createDefault)) this.cache.status.createDialog = false }, dialogCreateSubmitSend() { this.$refs[inForm].validate(valid => { if (valid) { } else { return false } }) }, dialogSeeBeforeClose() { this.cache.status.seeDialog = false }, dialogSeeCancel() { this.data.see = JSON.parse(JSON.stringify(this.data.seeDefault)) this.cache.status.seeDialog = false }, dialogSeeSubmitSend() { }, } }; </script> <style lang="scss" scoped> .ztask-coms { /*border: 2px solid cyan;*/ height: calc((100vh - 220px) * 1.0); } .ztask-searchs { /*border: 2px solid #0ea4c5;*/ height: 70px; display: flex; flex-direction: row; justify-content: space-between; } .ztask-searchs-items { /*border: 2px solid #00c561;*/ margin: 17px 0px 20px 0px; width: auto; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .ztask-searchs-forms { /*border: 2px solid #f900ff;*/ height: 30px; margin-bottom: 10px; } .ztask-lists { /*border: 2px solid #0dc50e;*/ height: calc((100vh - 338px) * 1.0); overflow: auto; } .ztask-pages { /*border: 2px solid red;*/ /*height: 56px;*/ height: 42px; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; } .ztask-page { /*border: 2px solid red;*/ position: relative; margin-right: 0; } .buttonTextNormal { color: #666666; } .buttonTextWarning { color: #D0021B; } </style>