thoth-frontend-test/src/components/actionDynamic/index.vue

<template>
  <div class="actionDynamic">
    <el-tabs v-model="activeName" @tab-click="changeTabs">
      <el-tab-pane label="评论" name="Comments">
        <div class="Comments">
          <div
            v-for="(item, index) in comments"
            :key="index"
          >
            <div style="font-size: 14px; color: #333b4a; display: inline-block">
              {{ item.commentInfo.name }}
            </div>
            <div
              style="
                margin-left: 20px;
                display: inline-block;
                color: #9b9b9b;
                font-size: 12px;
              "
            >
              {{ item.commentInfo.gmtCreater }}
            </div>
            <p
              style="
                font-size: 14px;
                color: #333b4a;
                margin: 0 0 25px 0;
                white-space: pre-line;
              "
            >
              {{ item.commentInfo.content }}
            </p>
          </div>
          <el-input
            v-model="commentContent"
            type="textarea"
            placeholder="请输入评论内容"
            maxlength="1000"
            show-word-limit
            :autosize="{ minRows: 3, maxRows: 5 }"
            style="margin-bottom: 2%"
          />
          <el-button
            type="primary"
            size="small"
            style="float: right"
            @click="$emit('addComment', commentContent, callback)"
          >
            发表评论
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="变更记录" name="Logs">
        <div v-for="(item,index) in changeRecord" :key="index" class="Layout_space_between sign-record">
          <span>
            <span class="operatorName">{{ item.operator }} : </span>
            <span class="remark">{{ item.remark }}</span>
          </span>
          <span class="createTime">{{ item.createTime }}</span>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import '@/styles/PublicStyle/index.scss'
export default {
  props: {
    comments: {
      type: Array,
      required: false,
      default: () => []
    },
    changeRecord: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    return {
      activeName: 'Comments',
      commentContent: ''
      // comments: [
      //   {
      //     child: [],
      //     commentInfo: {"id":11529,"joinId":4721,"bizId":null,"type":3,"fatherId":0,"name":"文博","email":"wenbobowen","content":"test111","gmtCreater":"2020-12-31 15:03:37","gmtModify":"2020-12-31 15:03:37"}
      //   },
      //   {
      //     child: [],
      //     commentInfo: {"id":11529,"joinId":4721,"bizId":null,"type":3,"fatherId":0,"name":"文博","email":"wenbobowen","content":"test222","gmtCreater":"2020-12-31 15:03:37","gmtModify":"2020-12-31 15:03:37"}
      //   }
      // ],
      // changeRecord: [
      //   {
      //     createTime: "2020-12-29 13:48:55",
      //     operator: "廖子君",
      //     remark: "更新了任务状态，从【已准出】到【已上线】"
      //   },
      //   {
      //     createTime: "2020-12-29 13:48:55",
      //     operator: "廖子君",
      //     remark: "更新了任务状态，从【已准出】到【已上线】"
      //   },
      //   {
      //     createTime: "2020-12-29 13:48:55",
      //     operator: "廖子君",
      //     remark: "更新了任务状态，从【已准出】到【已上线】"
      //   }
      // ]
    }
  },
  methods: {
    changeTabs(e) {
      console.log(e)
    },
    callback() {
      console.log('chengg')
      this.commentContent = ''
    }
  }
}
</script>
<style scoped lang="scss">
.actionDynamic {
  padding: 0px 30px 20px 30px;
  .Comments {
    padding: 0 34px 20px 34px;
  }
}
.sign-record {
  margin: 20px 0;
  font-size:14px;
  line-height:20px;
  opacity:1;
  font-family:PingFangSC-Regular;
}
.createTime {
  min-width:150px;
  color:rgba(68,68,68,1);
}

.remark {
  min-width:500px;
  text-align: left;
  color:#444444;
}
.operatorName {
  min-width: 60px;
  color:rgba(51,59,74,1);
  margin-right: 10px;
}
</style>