update

src/components/layout/Aside.vue

@@ -28,7 +28,8 @@ export default {
         { name: '功能区管理', path: '/menu/list', icon: 'el-icon-menu' },
         { name: '图文管理', path: '/essay/list', icon: 'el-icon-connection' },
         { name: '页面管理', path: '/pages/list', icon: 'el-icon-postcard' },
-        { name: '通知管理', path: '/notice/list', icon: 'el-icon-chat-line-square' }
+        { name: '通知管理', path: '/notice/list', icon: 'el-icon-chat-line-square' },
+        { name: '首页管理', path: '/home', icon: 'el-icon-s-home' }
       ]
     }
   },

src/modules/banner/views/List.vue

@@ -25,7 +25,7 @@
           <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
         </template>
         <template v-slot:sort-select="{ row }">
-          <el-select style="width: px;" v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
+          <el-select style="width: px" v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
           </el-select>
         </template>

src/modules/home/api.js

+import httpRequest from '@/utils/axios'
+
+/**
+ * 新建页面
+ */
+export function updateInfo(data) {
+  return httpRequest.post('/api/road/v1/backend/area/update', data)
+}
+
+/**
+ * 获取应用列表
+ */
+export function getAppList(params) {
+  return httpRequest.get('/api/road/v1/backend/area/list', { params })
+}

src/modules/home/components/DisplayType.vue

+<template>
+  <div>
+    <el-form :disabled="!!$route.query.type" ref="form" :rules="rules" :model="data" label-width="100px">
+      <el-form-item label="按钮文案：" prop="title">
+        <el-input v-model="data.title"></el-input>
+      </el-form-item>
+      <el-form-item label="页面展示：" prop="desc">
+        <v-editor :disabled="!!$route.query.type" v-model="data.desc"></v-editor>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import VEditor from '@/components/tinymce/Index.vue'
+export default {
+  components: { VEditor },
+  props: {
+    data: { type: Object, default: () => {} }
+  },
+  data() {
+    return {
+      form: {
+        edit: '',
+        btnText: ''
+      },
+      rules: {
+        title: [{ required: true, message: '请填写按钮文案', trigger: 'change' }],
+        desc: [{ required: true, message: '请填写页面内容', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    submitForm() {
+      let flag = false
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          flag = true
+        }
+      })
+      return flag
+    }
+  },
+  mounted() {
+    console.log(this.data, 'display')
+  }
+}
+</script>
+
+<style lang="scss">
+.tox-notifications-container {
+  display: none !important;
+}
+</style>

src/modules/home/components/SetBasic.vue

+<template>
+  <div>
+    <el-form ref="form" :disabled="!!$route.query.type" :inline="true" :rules="rules" :model="form">
+      <el-form-item label="页面标题：" prop="title">
+        <el-input v-model="form.title"></el-input>
+      </el-form-item>
+      <el-form-item label="活动名称：" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="人数限制：" prop="max_number">
+        <el-input v-model="form.max_number"></el-input>
+      </el-form-item>
+      <el-form-item label="关联项目：" prop="project_id">
+        <el-select v-model="form.project_id" placeholder="请选择">
+          <el-option v-for="item in projectMap" :key="item.key" :label="item.value" :value="item.key"> </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动开始时间：" prop="activity_time">
+        <el-date-picker
+          v-model="form.activity_time"
+          type="datetime"
+          @change="activityDateChange"
+          placeholder="选择日期时间"
+          :picker-options="pickerOptions"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="报名时间：" prop="time">
+        <el-date-picker
+          @change="dateChange"
+          v-model="form.time"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="报名开始日期"
+          end-placeholder="报名结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    form: { type: Object, default: () => {} }
+  },
+  data() {
+    return {
+      rules: {
+        title: { required: true, message: '请填写页面标题', trigger: 'blur' },
+        name: { required: true, message: '请填写活动标题', trigger: 'blur' },
+        max_number: [
+          { required: true, message: '请填写最大参与人数', trigger: 'blur' },
+          {
+            trigger: 'blur',
+            min: 1,
+            message: '最大人数限制不能小于1人',
+            validator(rule, value, callback) {
+              if (parseInt(Number(value)) && Number(value) >= 1) {
+                callback()
+              } else {
+                callback(new Error('最大人数限制不能小于1人'))
+              }
+            }
+          }
+        ],
+        project_id: { required: true, message: '请关联项目', trigger: 'change' },
+        time: { required: true, message: '请选择时间', trigger: 'change' },
+        activity_time: { required: true, message: '请选择时间', trigger: 'change' }
+      },
+      pickerOptions: {
+        disabledDate(v) {
+          return v.getTime() < new Date().getTime() - 86400000
+        }
+      }
+    }
+  },
+  computed: {
+    projectMap() {
+      return this.$store.state.commonMap.project_map || {}
+    }
+  },
+  mounted() {
+    console.log(this.form)
+  },
+  methods: {
+    submitForm() {
+      let flag = false
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          flag = true
+        }
+      })
+      return flag
+    },
+    // 日期改变的时候。吧日期转成后台需要的格式
+    dateChange(date) {
+      this.form.start_time = this.setDate(date[0])
+      this.form.end_time = this.setDate(date[1])
+    },
+    setDate(val) {
+      const d = new Date(val)
+      const date = `${d.getFullYear()}-${this.toDo(d.getMonth() + 1)}-${this.toDo(d.getDate())} ${this.toDo(
+        d.getHours()
+      )}:${this.toDo(d.getMinutes())}:${this.toDo(d.getSeconds())}`
+      return date
+    },
+    toDo(n) {
+      return n < 10 ? `0${n}` : n
+    },
+    activityDateChange() {
+      this.form.activity_time = this.setDate(this.form.activity_time)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/modules/home/index.js

+import AppLayout from '@/components/layout/Index.vue'
+
+const routes = [
+  {
+    path: '/home',
+    component: AppLayout,
+    children: [
+      { path: '/', component: () => import('./views/Index.vue') }
+    ]
+  }
+]
+
+export { routes }

src/modules/home/views/Index.vue

+<template>
+  <div>
+    <div class="breadcrumb">首页管理</div>
+    <app-card class="register-box">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="培训动态" name="1">
+          <el-form :model="form1" label-width="100px" style="width: 400px">
+            <el-form-item label="标题">
+              <el-input v-model="form1.title"></el-input>
+            </el-form-item>
+            <el-form-item label="跳转链接">
+              <el-input v-model="form1.url"></el-input>
+            </el-form-item>
+            <el-form-item label="更多跳转链接">
+              <el-input v-model="form1.desc"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="updateInfo(form1)">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="左侧卡片" name="2">
+          <el-form :model="form2" label-width="100px" style="width: 400px">
+            <el-form-item label="标题">
+              <el-input v-model="form2.title"></el-input>
+            </el-form-item>
+            <el-form-item label="副标题">
+              <el-input v-model="form2.desc"></el-input>
+            </el-form-item>
+            <el-form-item label="跳转链接">
+              <el-input v-model="form2.url"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="updateInfo(form2)">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="右上卡片" name="3">
+          <el-form :model="form3" label-width="100px" style="width: 400px">
+            <el-form-item label="标题">
+              <el-input v-model="form3.title"></el-input>
+            </el-form-item>
+            <el-form-item label="副标题">
+              <el-input v-model="form3.desc"></el-input>
+            </el-form-item>
+            <el-form-item label="跳转链接">
+              <el-input v-model="form3.url"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="updateInfo(form3)">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="右下卡片" name="4">
+          <el-form :model="form4" label-width="100px" style="width: 400px">
+            <el-form-item label="标题">
+              <el-input v-model="form4.title"></el-input>
+            </el-form-item>
+            <el-form-item label="副标题">
+              <el-input v-model="form4.desc"></el-input>
+            </el-form-item>
+            <el-form-item label="跳转链接">
+              <el-input v-model="form4.url"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="updateInfo(form4)">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </app-card>
+  </div>
+</template>
+
+<script>
+import { getAppList, updateInfo } from '../api.js'
+export default {
+  data() {
+    return {
+      form1: {
+        title: '',
+        url: '',
+        desc: ''
+      },
+      form2: {
+        title: '',
+        title2: '',
+        url: ''
+      },
+      form3: {
+        title: '',
+        title2: '',
+        url: ''
+      },
+      form4: {
+        title: '',
+        title2: '',
+        url: ''
+      },
+      activeName: '1'
+    }
+  },
+  mounted() {
+    getAppList().then(res => {
+      const data = res.data.list
+      this.form1 = data.find(i => i.type === '4')
+      this.form2 = data.find(i => i.type === '1')
+      this.form3 = data.find(i => i.type === '2')
+      this.form4 = data.find(i => i.type === '3')
+    })
+  },
+  methods: {
+    updateInfo(item) {
+      updateInfo(item).then(res => {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/modules/pages/views/Update.vue

@@ -14,6 +14,9 @@
             <el-radio label="2">二级列表页</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="展示条数" v-if="ruleForm.type == '1'">
+          <el-input type="number" v-model="ruleForm.size" placeholder="请填写展示的条数"></el-input>
+        </el-form-item>
         <el-form-item label="页面模板">
           <el-radio-group v-model="ruleForm.layout">
             <div style="margin-top: 10px; padding-bottom: 10px">
@@ -53,7 +56,8 @@ export default {
       ruleForm: {
         type: '1',
         layout: '1',
-        title: ''
+        title: '',
+        size: 3
       }
     }
   },