青涩知夏-》评论管理

src/api/comment.js

@@ -0,0 +1,47 @@
+import { axios } from '@/utils/request'
+
+export function fetchCommentLists (query) {
+  return axios({
+    url: '/comments/comments/v1/get',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchCommentList (query) {
+  return axios({
+    url: '/comments/comments/v1/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function replyComment (data) {
+  return axios({
+    url: '/comments/admin/v1/reply',
+    method: 'post',
+    data
+  })
+}
+
+export function fetchComment (id) {
+  return axios({
+    url: `/comments/comments/v1/${id}`,
+    method: 'get'
+  })
+}
+
+export function updateComment (data) {
+  return axios({
+    url: '/comments/comments/v1/update',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteComment (id) {
+  return axios({
+    url: `/comments/comments/v1/${id}`,
+    method: 'delete'
+  })
+}

src/views/comment/CommentList.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="app-container">
+    <a-card :bordered="false">
+      <SearchForm ref="SearchForm" @reloadData="reloadData"/>
+      <s-table
+        ref="table"
+        size="default"
+        rowKey="id"
+        :columns="columns"
+        :data="loadData"
+        :alert="options.alert"
+        :rowSelection="options.rowSelection"
+        showPagination="true"
+      >
+
+        <span slot="content" slot-scope="text">
+          <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
+        </span>
+        <span slot="postTitle" slot-scope="text">
+          <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
+        </span>
+
+        <!--   添加操作     -->
+        <span slot="action" slot-scope="text, record">
+          <template>
+            <a @click="handleEdit(record)">回复</a>
+
+            <a-divider type="vertical" />
+
+            <a-popconfirm
+              title="确定删除这条评论？"
+              @confirm="handleDelete(record)"
+              @cancel="cancel"
+              okText="Yes"
+              cancelText="No"
+            >
+              <a href="#">删除</a>
+            </a-popconfirm>
+          </template>
+        </span>
+      </s-table>
+      <CreateForm
+        :formType="formType"
+        :visible="visible"
+        ref="createCommentForm"
+        @resetData="resetData"
+        @refreshTable="refreshTable"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { STable, Ellipsis } from '@/components'
+import { table, filters } from './comment-constants'
+import CreateForm from './modules/CreateForm'
+import { fetchCommentLists, deleteComment } from '@/api/comment'
+import SearchForm from './modules/SearchForm'
+
+export default {
+  name: 'CommentList',
+  components: {
+    CreateForm,
+    STable,
+    Ellipsis,
+    SearchForm
+  },
+  filters: filters,
+  data () {
+    return {
+      queryParam: {},
+      loadData: parameter => {
+        return fetchCommentLists(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      },
+      options: {
+        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.handleSelectChange
+        }
+      },
+      columns: table.columns,
+      visible: false,
+      formType: 'create'
+    }
+  },
+  methods: {
+    resetData (flag) {
+      this.visible = flag
+      this.record = null
+    },
+    refreshTable () {
+      this.$refs.table.refresh()
+    },
+    reloadData (queryParam) {
+      this.queryParam = queryParam
+      this.refreshTable()
+    },
+    createHandler () {
+      this.formType = 'create'
+      this.visible = true
+      this.$refs.createCommentForm.resetForm()
+    },
+    handleEdit (record) {
+      this.$refs.createCommentForm.handleEdit(record)
+      this.formType = 'edit'
+      this.visible = true
+    },
+    handleSub () {
+      this.visible = true
+    },
+    handleDelete (row) {
+      deleteComment(row.id).then(res => {
+        this.$refs.table.refresh()
+      })
+    },
+    cancel () {},
+    handleSelectChange (value) {
+      console.log(`Selected: ${value}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .edit-input {
+    padding-right: 100px;
+  }
+  .cancel-btn {
+    position: absolute;
+    right: 15px;
+    top: 10px;
+  }
+</style>

src/views/comment/comment-constants.js

@@ -0,0 +1,61 @@
+// 表格列信息
+const table = {
+  columns: [
+    {
+      title: 'ID',
+      align: 'center',
+      dataIndex: 'id'
+    },
+    {
+      title: '作者',
+      align: 'center',
+      dataIndex: 'authorName'
+    },
+    {
+      title: '回复对象',
+      align: 'center',
+      dataIndex: 'parentUserName'
+    },
+    {
+      title: '文章标题',
+      align: 'center',
+      dataIndex: 'postTitle',
+      scopedSlots: { customRender: 'postTitle' }
+    },
+    {
+      title: '评论内容',
+      align: 'center',
+      dataIndex: 'content',
+      scopedSlots: { customRender: 'content' }
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      align: 'center',
+      width: '150px',
+      scopedSlots: { customRender: 'action' }
+    }
+  ]
+}
+
+// 表格里面的列key value
+const filters = {
+  syncStatusTypeFilter (status) {
+    const statusMap = {
+      0: 'error',
+      1: 'success'
+    }
+    return statusMap[status]
+  },
+  statusTypeFilter (status) {
+    const statusMap = {
+      1: 'error',
+      2: 'success'
+    }
+    return statusMap[status]
+  },
+  tagsListFilter (tagsList) {
+    return '这是一个测试'
+  }
+}
+export { table, filters }

src/views/comment/modules/CreateForm.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <a-drawer
+      :title="title"
+      placement="right"
+      :closable="true"
+      @close="onClose"
+      :visible="drawerVisible"
+      :width="950">
+      <a-form @submit="handleSubmit" :form="commentForm" class="form">
+        <a-row class="form-row" :gutter="16">
+          <a-col :lg="24" :md="12" :sm="24">
+            <a-form-item label="回复内容">
+              <a-input
+                placeholder="请输入回复内容"
+                v-decorator="['content', { rules: [{ required: true, message: '请输入回复内容', whitespace: true }] }]"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <div
+          :style="{
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e9e9e9',
+            padding: '10px 16px',
+            background: '#fff',
+            textAlign: 'right',
+            zIndex: '10'
+          }"
+        >
+          <a-button :style="{marginRight: '8px'}" @click="onClose">取消</a-button>
+          <a-button type="primary" @click="handleSubmit">提交</a-button>
+        </div>
+      </a-form>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import {
+  replyComment
+} from '@/api/comment'
+import { fetchTagsList } from '@/api/tags'
+export default {
+  name: 'CreateCommentForm',
+  props: {
+    formType: {
+      type: String,
+      default: 'create'
+    },
+    visible: {
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      dynamicTags: [],
+      tagsSize: 5,
+      id: null,
+      drawerVisible: false,
+      commentForm: this.$form.createForm(this, { name: 'create_comment' })
+    }
+  },
+  watch: {
+    visible (val) {
+      this.drawerVisible = val
+    },
+    formType (val) {
+      this.title = (val === 'create' ? '新增评论' : '更新评论')
+    }
+  },
+  beforeCreate () {
+  },
+  created () {
+    this.getTagsList()
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.commentForm.validateFieldsAndScroll((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+          const createParams = { ...values }
+          const arr = []
+            createParams['parentId'] = this.id
+            replyComment(createParams)
+              .then(res => {
+                this.$emit('refreshTable')
+              })
+              .catch(err => {console.log(err)})
+          }
+          this.resetForm()
+          this.drawerVisible = false
+          this.$emit('resetData', false)
+      })
+    },
+    handleEdit (record) {
+      this.id = record.id
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.resetForm()
+      this.drawerVisible = false
+      this.$emit('resetData', false)
+    },
+    resetForm () {
+      this.commentForm.resetFields()
+    },
+    getTagsList () {
+      fetchTagsList().then(response => {
+        this.dynamicTags = response.models
+      })
+    },
+    handleSelectChange (value) {
+      console.log(`Selected: ${value}`)
+    }
+  }
+}
+</script>
+<style>
+  .edit-input {
+    padding-right: 100px;
+  }
+  .cancel-btn {
+    position: absolute;
+    right: 15px;
+    top: 10px;
+  }
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+</style>

src/views/comment/modules/SearchForm.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="分类名称">
+              <a-input v-model="queryParam.name" placeholder="请输入分类名称"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="!advanced && 8 || 24" :sm="24">
+            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <a-button type="primary" @click="handlerSearch">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  name: 'SearchForm',
+  props: {
+  },
+  components: {
+  },
+  data () {
+    return {
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {}
+    }
+  },
+  methods: {
+    handlerSearch () {
+      this.$emit('reloadData', this.queryParam)
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    resetSearchForm () {
+      this.queryParam = {
+        createTime: moment(new Date())
+      }
+    }
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>