Commit 0953186f authored by Z's avatar Z

Z: Dot: taskBar's page recode & taskCom main page done.

parent 35d0e243
This diff is collapsed.
<template> <template>
<div>集团任务</div> <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-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'" type="text" @click="listsUntopClick(scope.row.id)">已置顶</el-button>
<el-button v-if="scope.row.taskStatus !== 'Top'" type="text" @click="listsTopClick(scope.row.id)">置顶</el-button>
<el-button type="text" @click="listsSeeClick(scope.row)">详情</el-button>
<el-button type="text" @click="listsEditClick(scope.row)">编辑</el-button>
<el-button type="text" @click="listsDelClick(scope.row)" class="listButtonRed">删除</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>
</template> </template>
<script>
export default {
components: {},
data() {
return {
cache: {
status: {
},
list:{
bar: [
{
id: "0",
name: "全部"
},
{
id: "1",
name: "柜组1"
}
],
taskType: [
{
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: ''
},
]
},
data: {
search:{
bar: '',
taskType: '',
keys: '',
},
page:{
nowPageNum: '',
}
},
rule:{
}
};
},
created() {
},
methods: {
searchsCreate(){},
searchsDels(){},
searchsSearch(){},
listsSelectChange(){},
listsUntopClick(){},
listsTopClick(){},
listsSeeClick(){},
listsEditClick(){},
listsDelClick(){},
pagesSizeChange(){},
pagesNowPageChange(){},
}
};
</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;
}
</style>
<template> <template>
<div>任务统计</div> <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="任务类型" class="nature">
<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-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'" type="text" @click="listsUntopClick(scope.row.id)">已置顶</el-button>
<el-button v-if="scope.row.taskStatus !== 'Top'" type="text" @click="listsTopClick(scope.row.id)">置顶</el-button>
<el-button type="text" @click="listsSeeClick(scope.row)">详情</el-button>
<el-button type="text" @click="listsEditClick(scope.row)">编辑</el-button>
<el-button type="text" @click="listsDelClick(scope.row)" class="listButtonRed">删除</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>
</template> </template>
<script>
export default {
components: {},
data() {
return {
cache: {
status: {
},
list:{
bar: [
{
id: "0",
name: "全部"
},
{
id: "1",
name: "柜组1"
}
],
taskType: [
{
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: ''
},
]
},
data: {
search:{
bar: '',
taskType: '',
keys: '',
},
page:{
nowPageNum: '',
}
},
rule:{
}
};
},
created() {
},
methods: {
searchsCreate(){},
searchsDels(){},
searchsSearch(){},
listsSelectChange(){},
listsUntopClick(){},
listsTopClick(){},
listsSeeClick(){},
listsEditClick(){},
listsDelClick(){},
pagesSizeChange(){},
pagesNowPageChange(){},
}
};
</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;
}
</style>
...@@ -38,16 +38,22 @@ export default { ...@@ -38,16 +38,22 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.mains { .mains {
border: 1px solid red; /*border: 1px solid red;*/
height: 90vh; height: calc((100vh - 140px) * 1.0);
margin: 10px 10px; min-width: 1000px;
margin: 10px 20px 10px 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
} }
.ztabs { .ztabs {
// border: 2px solid red; /*border: 2px solid darkviolet;*/
min-height: 100vh;
// min-height: 500px; height: calc((100vh - 180px) * 1.0);
}
d2-container { width: 100%;
overflow: hidden;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment