添加新建项目页面

src/views/addProject.vue

@@ -4,73 +4,71 @@
     <v-slidebar></v-slidebar>
     <div class="main-container">
       <el-main>
-        <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
-          <el-step title="基础信息"></el-step>
-          <el-step title="选择范围"></el-step>
-          <el-step title="选择项目组件"></el-step>
-        </el-steps>
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
-          <el-form-item label="项目名称：">
-            <el-input v-model="formInline.name" placeholder="审批人"></el-input>
+        <!-- <el-row>
+          <el-col :span="14">
+            <el-steps
+              :active="active"
+              finish-status="success"
+              simple
+              style="margin-bottom: 30px; background: #fff;"
+            >
+              <el-step title="基础信息"></el-step>
+              <el-step title="选择范围"></el-step>
+              <el-step title="选择项目组件"></el-step>
+            </el-steps>
+          </el-col>
+          <el-col :span="5" :offset="5">
+            <el-button>暂存</el-button>
+            <el-button type="primary" @click="next">下一步</el-button>
+          </el-col>
+        </el-row> -->
+        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
+          <el-form-item label="活动名称">
+            <el-input v-model="sizeForm.name"></el-input>
           </el-form-item>
-          <el-form-item label="项目时间：">
-            <el-date-picker
-              v-model="formInline.date"
-              type="daterange"
-              unlink-panels
-              range-separator="~"
-              start-placeholder="请选择开始时间"
-              end-placeholder="请选择结束时间"
-              :picker-options="pickerOptions"
-              value-format="yyyy-MM-dd hh:mm:ss"
-            ></el-date-picker>
+          <el-form-item label="活动区域">
+            <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary">查询</el-button>
+          <el-form-item label="活动时间">
+            <el-col :span="11">
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="sizeForm.date1"
+                style="width: 100%;"
+              ></el-date-picker>
+            </el-col>
+            <el-col class="line" :span="2">-</el-col>
+            <el-col :span="11">
+              <el-time-picker
+                type="fixed-time"
+                placeholder="选择时间"
+                v-model="sizeForm.date2"
+                style="width: 100%;"
+              ></el-time-picker>
+            </el-col>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" plain>重置</el-button>
+          <el-form-item label="活动性质">
+            <el-checkbox-group v-model="sizeForm.type">
+              <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
+              <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
+              <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
+            </el-checkbox-group>
           </el-form-item>
-        </el-form>
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
-          <el-form-item label="发布状态：">
-            <el-select v-model="formInline.type" placeholder="请选择发布状态">
-              <el-option label="状态1" value="shanghai"></el-option>
-              <el-option label="状态2" value="beijing"></el-option>
-            </el-select>
+          <el-form-item label="特殊资源">
+            <el-radio-group v-model="sizeForm.resource" size="medium">
+              <el-radio border label="线上品牌商赞助"></el-radio>
+              <el-radio border label="线下场地免费"></el-radio>
+            </el-radio-group>
           </el-form-item>
-        </el-form>
-        <el-form :model="formInline" class="demo-form-inline">
-          <el-form-item>
-            <el-button type="primary">新建项目</el-button>
+          <el-form-item size="large">
+            <el-button type="primary" @click="onSubmit">立即创建</el-button>
+            <el-button>取消</el-button>
           </el-form-item>
         </el-form>
-        <el-table :data="tableData" :header-cell-style="{background:'#FAFAFA',color:'#000'}">
-          <el-table-column prop="id" label="ID编号" width="140"></el-table-column>
-          <el-table-column prop="projectName" label="项目名称" width="120"></el-table-column>
-          <el-table-column prop="createName" label="创建人"></el-table-column>
-          <el-table-column prop="projectBrief" label="项目简介"></el-table-column>
-          <el-table-column prop="address" label="所属地区"></el-table-column>
-          <el-table-column prop="startTime" label="项目开始时间"></el-table-column>
-          <el-table-column prop="endTime" label="项目结束时间"></el-table-column>
-          <el-table-column prop="state" label="状态"></el-table-column>
-          <el-table-column fixed="right" label="操作" width="200">
-            <template slot-scope="scope">
-              <el-button class="title" type="text" size="small">编辑</el-button>
-              <el-button class="title" type="text" size="small">发布</el-button>
-              <el-button class="title" type="text" size="small">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[100, 200, 300, 400]"
-          :page-size="100"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="400"
-        ></el-pagination>
       </el-main>
     </div>
   </el-container>
@@ -102,11 +100,17 @@ export default {
       tableData: Array(10).fill(item),
       timingTime: "",
       currentPage: 1,
-      formInline: {
+      sizeForm: {
         name: "",
-        date: "",
-        type: ""
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: ""
       },
+      active: 0,
       pickerOptions: {
         shortcuts: [
           {
@@ -139,6 +143,15 @@ export default {
         ]
       }
     };
+  },
+  create() {},
+  methods: {
+    next() {
+      if (this.active++ > 2) this.active = 0;
+    },
+    onSubmit() {
+      console.log("submit!");
+    }
   }
 };
 </script>
@@ -148,7 +161,7 @@ export default {
 }
 
 .main-container {
-  width: 100%;
+  /* width: 100%; */
   margin-left: 200px;
   margin-top: 80px;
 }