Skip to content

Y
ybf
Commit 660b60cd authored by Z's avatar Z
Browse files
Options

✨ Z: Dot: Task/Bar: Create task dialog: Done.

parent 32dd7a90
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 174 deletions
ybf_admin/src/layout/header-aside/components/tabs/index.vue
View file @ 660b60cd
...@@ -59,130 +59,131 @@ ...@@ -59,130 +59,131 @@
</template> </template>
<script> <script>
import { mapState, mapActions } from 'vuex' import {mapState, mapActions} from 'vuex'
import Sortable from 'sortablejs' import Sortable from 'sortablejs'
export default {
components: { export default {
D2Contextmenu: () => import('../contextmenu'), components: {
D2ContextmenuList: () => import('../contextmenu/components/contentmenuList') D2Contextmenu: () => import('../contextmenu'),
}, D2ContextmenuList: () => import('../contextmenu/components/contentmenuList')
data () {
return {
contextmenuFlag: false,
contentmenuX: 0,
contentmenuY: 0,
contextmenuListIndex: [
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
],
contextmenuList: [
{ icon: 'arrow-left', title: '关闭左侧', value: 'left' },
{ icon: 'arrow-right', title: '关闭右侧', value: 'right' },
{ icon: 'times', title: '关闭其它', value: 'other' },
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
],
tagName: '/index'
}
},
computed: {
...mapState('d2admin/page', [
'opened',
'current'
])
},
methods: {
...mapActions('d2admin/page', [
'close',
'closeLeft',
'closeRight',
'closeOther',
'closeAll',
'openedSort'
]),
/**
* @description 右键菜单功能点击
*/
handleContextmenu (event) {
let target = event.target
// 解决 https://github.com/d2-projects/d2-admin/issues/54
let flag = false
if (target.className.indexOf('el-tabs__item') > -1) flag = true
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
target = target.parentNode
flag = true
}
if (flag) {
event.preventDefault()
event.stopPropagation()
this.contentmenuX = event.clientX
this.contentmenuY = event.clientY
this.tagName = target.getAttribute('aria-controls').slice(5)
this.contextmenuFlag = true
}
},
/**
* @description 右键菜单的row-click事件
*/
contextmenuClick (command) {
this.handleControlItemClick(command, this.tagName)
}, },
/** data() {
* @description 接收点击关闭控制上选项的事件 return {
*/ contextmenuFlag: false,
handleControlItemClick (command, tagName = null) { contentmenuX: 0,
if (tagName) { contentmenuY: 0,
this.contextmenuFlag = false contextmenuListIndex: [
} {icon: 'times-circle', title: '关闭全部', value: 'all'}
const params = { ],
pageSelect: tagName contextmenuList: [
} {icon: 'arrow-left', title: '关闭左侧', value: 'left'},
switch (command) { {icon: 'arrow-right', title: '关闭右侧', value: 'right'},
case 'left': {icon: 'times', title: '关闭其它', value: 'other'},
this.closeLeft(params) {icon: 'times-circle', title: '关闭全部', value: 'all'}
break ],
case 'right': tagName: '/index'
this.closeRight(params)
break
case 'other':
this.closeOther(params)
break
case 'all':
this.closeAll()
break
default:
this.$message.error('无效的操作')
break
} }
}, },
/** computed: {
* @description 接收点击 tab 标签的事件 ...mapState('d2admin/page', [
*/ 'opened',
handleClick (tab, event) { 'current'
// 找到点击的页面在 tag 列表里是哪个 ])
const page = this.opened.find(page => page.fullPath === tab.name)
const { name, params, query } = page
if (page) {
this.$router.push({ name, params, query })
}
}, },
/** methods: {
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index ...mapActions('d2admin/page', [
*/ 'close',
handleTabsEdit (tagName, action) { 'closeLeft',
if (action === 'remove') { 'closeRight',
this.close({ 'closeOther',
tagName 'closeAll',
}) 'openedSort'
]),
/**
* @description 右键菜单功能点击
*/
handleContextmenu(event) {
let target = event.target
// 解决 https://github.com/d2-projects/d2-admin/issues/54
let flag = false
if (target.className.indexOf('el-tabs__item') > -1) flag = true
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
target = target.parentNode
flag = true
}
if (flag) {
event.preventDefault()
event.stopPropagation()
this.contentmenuX = event.clientX
this.contentmenuY = event.clientY
this.tagName = target.getAttribute('aria-controls').slice(5)
this.contextmenuFlag = true
}
},
/**
* @description 右键菜单的row-click事件
*/
contextmenuClick(command) {
this.handleControlItemClick(command, this.tagName)
},
/**
* @description 接收点击关闭控制上选项的事件
*/
handleControlItemClick(command, tagName = null) {
if (tagName) {
this.contextmenuFlag = false
}
const params = {
pageSelect: tagName
}
switch (command) {
case 'left':
this.closeLeft(params)
break
case 'right':
this.closeRight(params)
break
case 'other':
this.closeOther(params)
break
case 'all':
this.closeAll()
break
default:
this.$message.error('无效的操作')
break
}
},
/**
* @description 接收点击 tab 标签的事件
*/
handleClick(tab, event) {
// 找到点击的页面在 tag 列表里是哪个
const page = this.opened.find(page => page.fullPath === tab.name)
const {name, params, query} = page
if (page) {
this.$router.push({name, params, query})
}
},
/**
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
*/
handleTabsEdit(tagName, action) {
if (action === 'remove') {
this.close({
tagName
})
}
} }
},
mounted() {
const el = document.querySelectorAll('.d2-multiple-page-sort .el-tabs__nav')[0]
Sortable.create(el, {
onEnd: (evt) => {
const {oldIndex, newIndex} = evt
this.openedSort({oldIndex, newIndex})
}
})
} }
},
mounted () {
const el = document.querySelectorAll('.d2-multiple-page-sort .el-tabs__nav')[0]
Sortable.create(el, {
onEnd: (evt) => {
const { oldIndex, newIndex } = evt
this.openedSort({ oldIndex, newIndex })
}
})
} }
}
</script> </script>
ybf_admin/src/pages/task/bar/index.vue
View file @ 660b60cd
...@@ -2,17 +2,13 @@ ...@@ -2,17 +2,13 @@
<div class="main"> <div class="main">
<div class="searchs"> <div class="searchs">
<div class="buttons"> <div class="buttons">
<el-button class="button buttonlight" size="small">创建任务</el-button> <el-button class="button buttonlight" size="small" @click="searchsCreate">创建任务</el-button>
<el-button class="button buttondark" size="small">发布任务</el-button> <el-button class="button buttondark" size="small">发布任务</el-button>
<el-button class="button buttondark" size="small">批量删除</el-button> <el-button class="button buttondark" size="small">批量删除</el-button>
</div> </div>
<!-- 搜索区 --> <!-- 搜索区 -->
<el-form class="searchzone" :inline="true" :model="data.search" label-width="auto"> <el-form class="searchzone" :inline="true" :model="data.search" label-width="auto">
<!-- 第一行 -->
<!-- <el-row type="flex" justify="start"> -->
<!-- 柜组 -->
<!-- <el-col :span="6"> -->
<el-form-item label="柜组"> <el-form-item label="柜组">
<el-select <el-select
size="small" size="small"
...@@ -21,17 +17,13 @@ ...@@ -21,17 +17,13 @@
style="width:160px;" style="width:160px;"
> >
<el-option <el-option
v-for="item in list.search.bar" v-for="item in cache.list.bar"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- </el-col> -->
<!-- 任务类型 -->
<!-- <el-col :span="6"> -->
<el-form-item label="任务类型" class="nature"> <el-form-item label="任务类型" class="nature">
<el-select <el-select
size="small" size="small"
...@@ -40,18 +32,13 @@ ...@@ -40,18 +32,13 @@
style="width:160px;" style="width:160px;"
> >
<el-option <el-option
v-for="item in list.search.taskType" v-for="item in cache.list.taskType"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- </el-col> -->
<!-- 关键字 -->
<!-- <el-col :span="6"> -->
<el-form-item label="关键词"> <el-form-item label="关键词">
<el-input <el-input
size="small" size="small"
...@@ -60,8 +47,6 @@ ...@@ -60,8 +47,6 @@
placeholder="请输入关键词" placeholder="请输入关键词"
/> />
</el-form-item> </el-form-item>
<!-- </el-col> -->
<!-- </el-row> -->
<el-button class="button buttondark" size="small">批量删除</el-button> <el-button class="button buttondark" size="small">批量删除</el-button>
</el-form> </el-form>
</div> </div>
...@@ -75,7 +60,6 @@ ...@@ -75,7 +60,6 @@
style="width: 100%" style="width: 100%"
@selection-change="listPick" @selection-change="listPick"
> >
<!-- :header-cell-style="setListsHeadStyle"-->
<el-table-column type="selection" width="60"></el-table-column> <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="taskName" label="任务名" align="center" width="200"></el-table-column>
<el-table-column prop="taskType" label="任务类型" align="center" width="120"></el-table-column> <el-table-column prop="taskType" label="任务类型" align="center" width="120"></el-table-column>
...@@ -99,7 +83,7 @@ ...@@ -99,7 +83,7 @@
<el-pagination <el-pagination
@size-change="pagesSizeChange" @size-change="pagesSizeChange"
@current-change="pagesNowPageChange" @current-change="pagesNowPageChange"
:current-page="currentPage4" :current-page="data.page.nowPageNum"
:page-sizes="[100, 200, 300, 400]" :page-sizes="[100, 200, 300, 400]"
:page-size="100" :page-size="100"
layout="prev, pager, next, sizes, jumper" layout="prev, pager, next, sizes, jumper"
...@@ -111,15 +95,97 @@ ...@@ -111,15 +95,97 @@
title="创建任务" title="创建任务"
:visible.sync="cache.status.createDialog" :visible.sync="cache.status.createDialog"
width="60%" width="60%"
:before-close="dialogCreateBeforeClose"> :before-close="dialogCreateBeforeClose"
>
<div class="dialogMain"> <div class="dialogMain">
<span>会当凌绝顶，一览众山小。</span> <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="taskType">
<el-select
v-model="data.create.taskType"
placeholder="请选择任务类型"
@change="dialogCreateTaskTypeChange"
style="width:100%;"
>
<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-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="柜组：" prop="bar">
<el-select
v-model="data.create.bar"
placeholder="请选择柜组"
@change="dialogCreateBarChange"
style="width:100%;"
>
<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-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="任务周期：" prop="taskTime">
<el-select
v-model="data.create.bar"
placeholder="请选择柜组"
@change="dialogCreateBarChange"
style="width:100%;"
>
<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-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="产品详情：" prop="taskTime">
<el-date-picker
v-model="data.create.taskTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width:100%;"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogCreateCancel">取 消</el-button> <el-button size="small" @click="dialogCreateCancel">取 消</el-button>
<el-button size="small" type="primary" @click="dialogCreateSubmit">保 存</el-button> <el-button size="small" type="primary" @click="dialogCreateSubmit('createForm')">保 存</el-button>
<el-button size="small" type="primary" @click="dialogCreateSubmitSend">保存并发布</el-button> <el-button size="small" type="primary" @click="dialogCreateSubmitSend('createForm')">保存并发布</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
...@@ -137,6 +203,28 @@ ...@@ -137,6 +203,28 @@
cache: { cache: {
status: { status: {
createDialog: false createDialog: false
},
list:{
taskType: [
{
id: "0",
name: "全部"
},
{
id: "1",
name: "测试"
}
],
bar: [
{
id: "0",
name: "全部"
},
{
id: "1",
name: "柜组1"
}
],
} }
}, },
list: { list: {
...@@ -166,28 +254,6 @@ ...@@ -166,28 +254,6 @@
sendDate: "2019/02/08" sendDate: "2019/02/08"
} }
], ],
search: {
bar: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
],
taskType: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
]
}
}, },
data: { data: {
search: { search: {
...@@ -196,15 +262,41 @@ ...@@ -196,15 +262,41 @@
date: "", date: "",
keys: "" keys: ""
}, },
create: {
taskName: '',
taskType: '',
bar: '',
taskTime: '',
taskDetail: '',
},
createDefault: {
taskName: '',
taskType: '',
bar: '',
taskTime: '',
taskDetail: '',
},
page: { page: {
nowPageNum: 4 nowPageNum: 4
} }
},
rule:{
create: {
taskName: [{required: true, message: '任务名称不能为空', trigger: 'change'}],
taskType: [{required: true, message: '任务类型不能为空', trigger: 'change'}],
taskDetail: [{required: true, message: '任务详情不能为空', trigger: 'change'}],
bar: [{required: true, message: '柜组不能为空', trigger: 'change'}],
taskTime: [{required: true, message: '任务周期不能为空', trigger: 'change'}],
}
} }
}; };
}, },
created() { created() {
}, },
methods: { methods: {
searchsCreate(){
this.cache.status.createDialog = true
},
listPick() { listPick() {
}, },
testButtonClick() { testButtonClick() {
...@@ -213,20 +305,32 @@ ...@@ -213,20 +305,32 @@
}, },
pagesNowPageChange() { pagesNowPageChange() {
}, },
setListsHeadStyle({row, column, rowIndex, columnIndex}) { dialogCreateTaskTypeChange(){},
if (rowIndex === 0) { dialogCreateBarChange(){},
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
},
dialogCreateBeforeClose() { dialogCreateBeforeClose() {
this.cache.status.createDialog = false
}, },
dialogCreateCancel() { dialogCreateCancel() {
this.data.create = JSON.parse(JSON.stringify(this.data.createDefault))
this.cache.status.createDialog = false
}, },
dialogCreateSubmit() { dialogCreateSubmit(inForm) {
this.$refs[inForm].validate(valid => {
if(valid){
} else {
return false
}
})
}, },
dialogCreateSubmitSend() { dialogCreateSubmitSend() {
this.$refs[inForm].validate(valid => {
if(valid){
} else {
return false
}
})
}, },
} }
}; };
...@@ -324,7 +428,7 @@ ...@@ -324,7 +428,7 @@
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.dialogMain { .dialogMain {
border: 2px solid red; /*border: 2px solid red;*/
height: 100%; height: 100%;
} }
</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