Commit 660b60cd authored by Z's avatar Z

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

parent 32dd7a90
......@@ -59,26 +59,27 @@
</template>
<script>
import { mapState, mapActions } from 'vuex'
import Sortable from 'sortablejs'
export default {
import {mapState, mapActions} from 'vuex'
import Sortable from 'sortablejs'
export default {
components: {
D2Contextmenu: () => import('../contextmenu'),
D2ContextmenuList: () => import('../contextmenu/components/contentmenuList')
},
data () {
data() {
return {
contextmenuFlag: false,
contentmenuX: 0,
contentmenuY: 0,
contextmenuListIndex: [
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
{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' }
{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'
}
......@@ -101,7 +102,7 @@ export default {
/**
* @description 右键菜单功能点击
*/
handleContextmenu (event) {
handleContextmenu(event) {
let target = event.target
// 解决 https://github.com/d2-projects/d2-admin/issues/54
let flag = false
......@@ -122,13 +123,13 @@ export default {
/**
* @description 右键菜单的row-click事件
*/
contextmenuClick (command) {
contextmenuClick(command) {
this.handleControlItemClick(command, this.tagName)
},
/**
* @description 接收点击关闭控制上选项的事件
*/
handleControlItemClick (command, tagName = null) {
handleControlItemClick(command, tagName = null) {
if (tagName) {
this.contextmenuFlag = false
}
......@@ -156,18 +157,18 @@ export default {
/**
* @description 接收点击 tab 标签的事件
*/
handleClick (tab, event) {
handleClick(tab, event) {
// 找到点击的页面在 tag 列表里是哪个
const page = this.opened.find(page => page.fullPath === tab.name)
const { name, params, query } = page
const {name, params, query} = page
if (page) {
this.$router.push({ name, params, query })
this.$router.push({name, params, query})
}
},
/**
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
*/
handleTabsEdit (tagName, action) {
handleTabsEdit(tagName, action) {
if (action === 'remove') {
this.close({
tagName
......@@ -175,14 +176,14 @@ export default {
}
}
},
mounted () {
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 })
const {oldIndex, newIndex} = evt
this.openedSort({oldIndex, newIndex})
}
})
}
}
}
</script>
......@@ -2,17 +2,13 @@
<div class="main">
<div class="searchs">
<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>
</div>
<!-- 搜索区 -->
<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-select
size="small"
......@@ -21,17 +17,13 @@
style="width:160px;"
>
<el-option
v-for="item in list.search.bar"
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-col :span="6"> -->
<el-form-item label="任务类型" class="nature">
<el-select
size="small"
......@@ -40,18 +32,13 @@
style="width:160px;"
>
<el-option
v-for="item in list.search.taskType"
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-col :span="6"> -->
<el-form-item label="关键词">
<el-input
size="small"
......@@ -60,8 +47,6 @@
placeholder="请输入关键词"
/>
</el-form-item>
<!-- </el-col> -->
<!-- </el-row> -->
<el-button class="button buttondark" size="small">批量删除</el-button>
</el-form>
</div>
......@@ -75,7 +60,6 @@
style="width: 100%"
@selection-change="listPick"
>
<!-- :header-cell-style="setListsHeadStyle"-->
<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="taskType" label="任务类型" align="center" width="120"></el-table-column>
......@@ -99,7 +83,7 @@
<el-pagination
@size-change="pagesSizeChange"
@current-change="pagesNowPageChange"
:current-page="currentPage4"
:current-page="data.page.nowPageNum"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="prev, pager, next, sizes, jumper"
......@@ -111,15 +95,97 @@
title="创建任务"
:visible.sync="cache.status.createDialog"
width="60%"
:before-close="dialogCreateBeforeClose">
:before-close="dialogCreateBeforeClose"
>
<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>
<span slot="footer" class="dialog-footer">
<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="dialogCreateSubmitSend">保存并发布</el-button>
<el-button size="small" type="primary" @click="dialogCreateSubmit('createForm')">保 存</el-button>
<el-button size="small" type="primary" @click="dialogCreateSubmitSend('createForm')">保存并发布</el-button>
</span>
</el-dialog>
</div>
......@@ -137,6 +203,28 @@
cache: {
status: {
createDialog: false
},
list:{
taskType: [
{
id: "0",
name: "全部"
},
{
id: "1",
name: "测试"
}
],
bar: [
{
id: "0",
name: "全部"
},
{
id: "1",
name: "柜组1"
}
],
}
},
list: {
......@@ -166,28 +254,6 @@
sendDate: "2019/02/08"
}
],
search: {
bar: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
],
taskType: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
]
}
},
data: {
search: {
......@@ -196,15 +262,41 @@
date: "",
keys: ""
},
create: {
taskName: '',
taskType: '',
bar: '',
taskTime: '',
taskDetail: '',
},
createDefault: {
taskName: '',
taskType: '',
bar: '',
taskTime: '',
taskDetail: '',
},
page: {
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() {
},
methods: {
searchsCreate(){
this.cache.status.createDialog = true
},
listPick() {
},
testButtonClick() {
......@@ -213,20 +305,32 @@
},
pagesNowPageChange() {
},
setListsHeadStyle({row, column, rowIndex, columnIndex}) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
},
dialogCreateTaskTypeChange(){},
dialogCreateBarChange(){},
dialogCreateBeforeClose() {
this.cache.status.createDialog = false
},
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() {
this.$refs[inForm].validate(valid => {
if(valid){
} else {
return false
}
})
},
}
};
......@@ -324,7 +428,7 @@
</style>
<style lang="scss" scoped>
.dialogMain {
border: 2px solid red;
/*border: 2px solid red;*/
height: 100%;
}
</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