vue+element简易版 发布动态、评论功能

列表页 proevent.vue

<template>
  <el-card style="margin:0 auto; width:1200px;font-family: 微软雅黑">
    <div style="text-align: right">
      <span style="margin-right: 30%;font-size: 20px;font-weight: bolder">{{title}} —— 动态</span>
      <el-button @click="addOrUpdateHandle()" size="medium" type="primary">动态上报</el-button>
      <el-button @click="back" size="medium">返回</el-button>
    </div>
    <div>
      <el-form :model="dataForm" status-icon :rules="rules" ref="dataForm">
        <el-row :gutter="10" v-for="(item,index) in dataList" :key="index">
          <el-col :span="1">
            <img src="~@/assets/img/touxiang.png" style="height: 40px;border-radius:50%;">
          </el-col>
          <el-col :span="4" style="line-height: 18px">
            <el-col :span="22">{{item.parent.userName}}</el-col>
            <el-col :span="22">{{item.parent.dateTime}}</el-col>
          </el-col>
          <el-col :span="11">
            <el-tag :type="getRank(item.parent.rank)">{{getRank1(item.parent.rank)}}</el-tag>
          </el-col>
          <el-col :span="24" style="font-size: 17px;line-height: 22px;padding-top: 8px">
            {{item.parent.title}}
          </el-col>
          <el-col :span="1.5" @click.native="commentHandle (index)" style="padding-top: 15px;cursor:pointer;">
            <img src="~@/assets/img/回复.png">
            <span style="color:#bab7b7;font-size: 14px">反馈</span>
          </el-col>
          <el-col :span="24">
            <div
              style="border-left: #c7c4c4 solid 3px;margin-left: 6px;margin-top: 8px;padding-left: 15px;font-size:16px ">
              <div style="border-bottom: #c7c4c4 dashed  1px;padding: 10px 10px" v-for="(item1,index) in item.subclass">
                <span style="color: #3e9cfe">{{item1.userName}}</span>：<span>{{item1.title}}</span>
                <div style="padding-top: 10px;font-size: 13px;color:#bab7b7 ">{{item1.dateTime}}</div>
              </div>
              <div style="padding:10px 0px">
              <span style="color: #bab7b7;cursor:pointer;" @click="commentHandle (index)"><img
                src="~@/assets/img/评论.png"/> 添加新反馈</span>
              </div>
              <div style="padding:10px 0px" v-if="choice === index">
                <el-form-item prop="comment">
                  <el-input
                    v-model="dataForm.comment"
                    type="textarea"
                    style="width: 80%"
                    :rows="4"
                    maxlength="255"
                    show-word-limit
                    placeholder="请输入内容">
                  </el-input>
                </el-form-item>
                <div style="width: 80%;text-align: right;margin-top: 10px">
                  <el-button @click="commentBack">取消</el-button>
                  <el-button type="success" @click="comment (item.parent.id)">发送</el-button>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"
                   @refreshDataList="getDataList(pid,title,type)"></add-or-update>
  </el-card>
</template>

<script>
  import AddOrUpdate from './proevent-add-or-update'

  export default {
    data () {
      return {
        dataForm: {
          comment: ''
        },
        choice: -1,
        title: '',
        pid: 0,
        type: 0,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        rules: {
          comment: [{required: true, message: '评论不能为空', trigger: 'blur'},
            {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'}]
        }
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
    },
    methods: {
      // 获取数据列表
      getDataList (pid, name, type) {
        this.title = name
        this.pid = pid
        this.type = type
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/pro/proevent/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'pid': this.pid,
            'type': this.type
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList(this.pid, this.title, this.type)
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList(this.pid, this.title, this.type)
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id, this.pid, this.type)
        })
      },
      back () {
        this.$emit('back')
      },
      //判断等级
      getRank (rank) {
        if (rank === 1) {
          return 'info'
        } else if (rank === 2) {
          return 'warning'
        } else if (rank === 3) {
          return 'danger'
        }
      },
      //判断等级文字
      getRank1 (rank) {
        if (rank === 1) {
          return '一般'
        } else if (rank === 2) {
          return '较大'
        } else if (rank === 3) {
          return '重大'
        }
      },
      //评论框弹出
      commentHandle (index) {
        if (index !== this.choice) {
          this.$refs['dataForm'].resetFields()
          this.choice = index
        }
      },
      //评论框取消取消
      commentBack () {
        this.$refs['dataForm'].resetFields()
        this.choice = -1
      },
      //评论
      comment (id) {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/pro/proevent/save`),
              method: 'post',
              data: this.$http.adornData({
                'title': this.dataForm.comment,
                'pid': this.pid,
                'typeId': id,
                'type': this.type
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.choice = -1
                    this.getDataList(this.pid, this.title, this.type)
                    this.$refs['dataForm'].resetFields()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .el-divider {
    height: 0.1px;
  }

  .el-tab-pane /deep/ .el-card__body {
    background-color: #0b5b76 !important;
  }
</style>

动态上报 proevent-add-or-update.vue

<template>
  <el-dialog
    title="动态上报"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="30%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-form-item label="等级" prop="rank">
        <el-select v-model="dataForm.rank">
          <el-option label="一般" :value="1"></el-option>
          <el-option label="较大" :value="2"></el-option>
          <el-option label="重大" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" prop="title">
        <el-input v-model="dataForm.title" :rows="4" placeholder="请输入项目动态信息" style="width: 300px" type="textarea"
                  aotosize></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          typeId: '',
          title: '',
          dateTime: '',
          userId: '',
          rank: 1,
          pid: 0,
          type: 0
        },
        dataRule: {
          title: [
            {required: true, message: '动态信息不能为空', trigger: 'blur'}
          ],
          rank: [
            {required: true, message: '动态等级(1.一般2.较大3.重大)不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      init (id, pid, type) {
        this.dataForm.id = id || 0
        this.dataForm.pid = pid
        this.dataForm.type = type
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/pro/proevent/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.typeId = data.proevent.typeId
                this.dataForm.title = data.proevent.title
                this.dataForm.dateTime = data.proevent.dateTime
                this.dataForm.userId = data.proevent.userId
                this.dataForm.rank = data.proevent.rank
                this.dataForm.type = data.proevent.type
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/pro/proevent/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'title': this.dataForm.title,
                'rank': this.dataForm.rank,
                'pid': this.dataForm.pid,
                'type': this.dataForm.type
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

表结构
如果type_id为null 则该条数据为动态，不为null则是评论