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

ybf_admin/src/layout/header-aside/components/tabs/index.vue

@@ -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>

ybf_admin/src/pages/task/bar/index.vue

@@ -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>