update

src/components/layout/Aside.vue

@@ -26,7 +26,7 @@ export default {
       menuList: [
         { name: 'Banner管理', path: '/banner/list', icon: 'el-icon-notebook-2' },
         { name: '功能区管理', path: '/menu/list', icon: 'el-icon-user' },
-        { name: '图文管理', path: '/audit/list', icon: 'el-icon-connection' },
+        { name: '图文管理', path: '/essay/list', icon: 'el-icon-connection' },
         { name: '页面管理', path: '/pages/list', icon: 'el-icon-connection' }
       ]
     }

src/modules/essay/api.js

+import httpRequest from '@/utils/axios'
+
+/**
+ * 新建图文
+ */
+export function createEssay(data) {
+  return httpRequest.post('/api/road/v1/backend/doc/create', data)
+}
+
+/**
+ * 获取应用列表
+ */
+export function getAppList(params) {
+  return httpRequest.get('/api/road/v1/backend/doc/list', { params })
+}
+
+/**
+ * 更新图文
+ */
+export function updateEssay(data) {
+  return httpRequest.post('/api/road/v1/backend/doc/update', data)
+}
+
+/**
+ * 获取图文详情
+ */
+export function getDetails(params) {
+  return httpRequest.get('/api/road/v1/backend/doc/view', { params })
+}
+
+/**
+ * 删除图文
+ */
+export function deleteEssay(data) {
+  return httpRequest.post('/api/road/v1/backend/doc/delete', data)
+}
+
+// /**
+//  * 获取应用列表
+//  */
+// export function getAppList(params) {
+//   return httpRequest.get('/api/register/v1/activity/index', { params })
+// }
+// /**
+//  * 新建报名
+//  */
+// export function createRegister(data) {
+//   return httpRequest.post('/api/register/v1/activity/create', data)
+// }
+
+// /**
+//  * 报名详情
+//  */
+// export function getRegisterDetail(params) {
+//   return httpRequest.get('/api/register/v1/activity/view', { params })
+// }
+
+// /**
+//  * 更新报名
+//  */
+// export function updateRegister(data) {
+//   return httpRequest.post('/api/register/v1/activity/update', data)
+// }
+
+// /**
+//  * 删除报名
+//  */
+// export function deleteRegister(data) {
+//   return httpRequest.post('/api/register/v1/activity/delete', data)
+// }
+// /**
+//  * 停止活动
+//  */
+// export function stopRegister(data) {
+//   return httpRequest.post('/api/register/v1/activity/drop', data)
+// }

src/modules/essay/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/essay/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/essay/index.js

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

src/modules/essay/views/List.vue

+<template>
+  <app-card class="register-box">
+    <app-list v-bind="tableOptions" ref="list">
+      <div class="line"></div>
+      <div class="btn-box">
+        <el-button type="primary" @click="$router.push({ path: '/essay/update' })">新建图文</el-button>
+      </div>
+      <template v-slot:filter-time>
+        <el-date-picker
+          v-model="filterDate"
+          @change="changeDate"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </template>
+      <template v-slot:picture="{ row }">
+        <div :style="`background-image:url(${row.picture});background-size: cover;width:170px;height:80px;`"></div>
+      </template>
+      <template v-slot:release-status="{ row }">
+        <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
+      </template>
+      <template v-slot:sort-select="{ row }">
+        <el-select 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>
+      <template v-slot:table-x="{ row }">
+        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+        <el-button type="text" @click="handleDelete(row)">删除</el-button>
+      </template>
+    </app-list>
+  </app-card>
+</template>
+
+<script>
+// 接口
+import { getAppList, updateEssay, deleteEssay } from '../api'
+
+export default {
+  data() {
+    const count = []
+    for (let i = 0; i < 100; i++) {
+      count.push({ value: i, options: i })
+    }
+    return {
+      value1: '',
+      filterDate: '',
+      options: count,
+      createdStart: '',
+      createdEnd: ''
+    }
+  },
+  computed: {
+    // 列表配置
+    tableOptions() {
+      return {
+        limit: 10,
+        remote: {
+          httpRequest: getAppList,
+          params: {
+            title: '',
+            status: '',
+            created_time_start: this.createdStart,
+            created_time_end: this.createdEnd
+          },
+          callback: res => {
+            res.map(item => {
+              item.status = !!parseInt(item.status)
+              return item
+            })
+            return res
+          }
+        },
+        filters: [
+          {
+            type: 'input',
+            prop: 'title',
+            label: '标题:'
+          },
+          {
+            type: 'select',
+            prop: 'status',
+            label: '发布状态:',
+            options: [
+              { value: '0', label: '未发布' },
+              { value: '1', label: '已发布' }
+            ]
+          },
+          {
+            slots: 'filter-time',
+            label: '创建时间:'
+          }
+        ],
+        columns: [
+          { label: 'id', prop: 'id', align: 'center' },
+          { label: '封面图', slots: 'picture', align: 'center', width: '170px' },
+          { label: '标题', prop: 'title', align: 'center' },
+          { label: '摘要', prop: 'remark', align: 'center' },
+          { label: '备注', prop: 'comment', align: 'center' },
+          {
+            label: '发布状态',
+            slots: 'release-status',
+            align: 'center'
+          },
+          { label: '创建时间', prop: 'created_time', align: 'center' },
+          { label: '排序', slots: 'sort-select', align: 'center' },
+          { label: '操作', slots: 'table-x', align: 'center' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 时间搜索
+    changeDate() {
+      if (this.filterDate) {
+        this.createdStart = this.filterDate[0]
+        this.createdEnd = this.filterDate[1]
+      } else {
+        this.createdStart = ''
+        this.createdEnd = ''
+        // this.$refs.list.refetch(true)
+      }
+    },
+    // 更新发布状态
+    updateStatus(row) {
+      const params = row
+      params.status = row.status ? '1' : '0'
+      updateEssay(row).then(res => {
+        if (res.code === 0) {
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          })
+          this.$refs.list.refetch(true)
+        }
+      })
+    },
+    handleEdit(row) {
+      this.$router.push({ path: '/essay/update', query: { id: row.id } })
+    },
+    handleDelete(row) {
+      deleteEssay({ id: row.id }).then(res => {
+        if (res.code === 0) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.$refs.list.refetch(true)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.register-box {
+  .el-form-item {
+    margin-right: 20px !important;
+  }
+  .line {
+    // border-top: 1px solid #D6D6D6;
+    height: 1px;
+    background: #d6d6d6;
+    margin: 8px 0 23px;
+    box-sizing: border-box;
+  }
+  .btn-box {
+    margin-bottom: 16px;
+  }
+}
+</style>

src/modules/essay/views/Update.vue

+<template>
+  <div class="create-box">
+    <app-card :title="!$route.query.id ? '新建菜单' : '编辑菜单'">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+        style="width: 80%; margin: 0 auto"
+      >
+        <el-form-item label="封面图" prop="picture">
+          <upload-image v-model="ruleForm.picture"></upload-image>
+        </el-form-item>
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="ruleForm.title"></el-input>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="ruleForm.comment"></el-input>
+        </el-form-item>
+        <el-form-item label="跳转链接">
+          <el-input v-model="ruleForm.url"></el-input>
+        </el-form-item>
+        <el-form-item label="摘要">
+          <el-input v-model="ruleForm.remark"></el-input>
+        </el-form-item>
+        <el-form-item label="正文" prop="content">
+          <v-editor v-model="ruleForm.content"></v-editor>
+        </el-form-item>
+        <el-form-item label="是否启用" prop="status">
+          <el-switch v-model="status"></el-switch>
+        </el-form-item>
+        <el-form-item label="关联选择">
+          <el-button type="primary" @click="drawer = true">点击选择</el-button>
+        </el-form-item>
+        <el-form-item>
+          <div style="padding-top: 20px; width: 200px; margin: 0 auto">
+            <el-button type="primary" @click="submitForm">确认</el-button>
+            <el-button @click="drawer = true">取消</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </app-card>
+    <el-drawer size="40%" :visible.sync="drawer" :direction="direction">
+      <div style="padding: 0 20px">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="关联图文" name="1"></el-tab-pane>
+          <el-tab-pane label="关联页面" name="2"></el-tab-pane>
+          <el-tab-pane label="跳转链接" name="3"></el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import VEditor from '@/components/tinymce/Index.vue'
+import UploadImage from '@/components/upload/UploadImage.vue'
+import { createEssay, getDetails, updateEssay } from '../api'
+export default {
+  components: {
+    UploadImage,
+    VEditor
+  },
+  data() {
+    return {
+      activeName: '1',
+      status: true,
+      drawer: false,
+      direction: 'rtl',
+      ruleForm: {
+        title: '',
+        comment: '',
+        url: '',
+        picture: '',
+        remark: '',
+        content: '',
+        status: true,
+        relations_id_page: '',
+        relations_id_banner: '',
+        relations_id_menu: ''
+      },
+      rules: {
+        title: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
+        picture: [{ required: true, message: '请上传banner', trigger: 'blur' }],
+        status: [{ required: true, message: '', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入正文', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    id() {
+      return this.$route.query.id
+    }
+  },
+  methods: {
+    // 提交
+    submitForm() {
+      this.ruleForm.type = this.activeName
+      this.ruleForm.status = this.status ? 1 : 0
+      if (this.id) {
+        updateEssay(this.ruleForm).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              message: '编辑成功',
+              type: 'success'
+            })
+            this.$router.go(-1)
+          }
+        })
+      } else {
+        createEssay(this.ruleForm).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              message: '提交成功',
+              type: 'success'
+            })
+            this.$router.go(-1)
+          }
+        })
+      }
+    },
+    // 获取详情
+    getDetails() {
+      getDetails({ id: this.id }).then(res => {
+        this.status = !!parseInt(res.data.status)
+        this.ruleForm = res.data
+      })
+    }
+  },
+  mounted() {
+    if (this.id) {
+      this.getDetails()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>