CRM项目活动详情页活动备注列表前端展示和样式效果调整------CRM项目

<template>    <el-form ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules">        <el-form-item label="ID">          <div class="detail">{{activityDetail.id}}&nbsp;</div>        </el-form-item>        <el-form-item label="负责人">          <div class="detail"> {{activityDetail.ownerDO.name}}&nbsp;</div>        </el-form-item>        <el-form-item label="活动名称">          <div class="detail">{{activityDetail.name}}&nbsp;</div>        </el-form-item>        <el-form-item label="开始时间">          <div class="detail">{{activityDetail.startDate}}&nbsp;</div>        </el-form-item>        <el-form-item label="结束时间">          <div class="detail">{{activityDetail.endDate}}&nbsp;</div>        </el-form-item>        <el-form-item label="活动预算">        <div class="detail">{{activityDetail.cost}}&nbsp;</div>        </el-form-item>        <el-form-item label="活动描述">          <div class="detail">{{activityDetail.description}}&nbsp;</div>        </el-form-item>        <el-form-item label="创建时间">          <div class="detail">{{activityDetail.createTime}}&nbsp;</div>        </el-form-item>        <el-form-item label="创建人">          <div class="detail">{{activityDetail.createByDO.name}}&nbsp;</div>        </el-form-item>        <el-form-item label="编辑时间">          <div class="detail">{{activityDetail.editTime}}&nbsp;</div>        </el-form-item>        <el-form-item label="编辑人">          <div class="detail">{{activityDetail.editByDO.name}}&nbsp;</div>        </el-form-item>        <el-form-item label="填写备注:" prop="noteContent">            <el-input                v-model="activityRemarkQuery.noteContent"                :rows="8"                type="textarea"                placeholder="请输入活动备注"            />        </el-form-item>        <el-form-item>          <el-button type="primary" @click="submit()">提交</el-button>          <el-button @click="goBack()">返回</el-button>        </el-form-item>            </el-form>    <hr>    <el-table        :data="activityRemarkList"        style="width: 100%"    >        <el-table-column type="index" label="序号" width="52%" />        <el-table-column property="createByDO.name" label="备注人" width="75%" show-overflow-tooltip />        <el-table-column property="createTime" label="备注时间" show-overflow-tooltip />        <el-table-column property="editByDO.name" label="编辑人" width="75%" show-overflow-tooltip />        <el-table-column property="editTime" label="编辑时间" show-overflow-tooltip />        <el-table-column prop="noteContent" label="备注内容" show-overflow-tooltip />        <el-table-column label="操作" show-overflow-tooltip>            <template #default="scope">                <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>                <el-button type="danger" @click="del(scope.row.id)">删除</el-button>             </template>        </el-table-column>    </el-table>    <!-- 分页条 -->    <div class="parent">        <el-pagination            background            layout="prev, pager, next"            :page-size="pageSize"            :total="total"            @prev-click="toPage"            @next-click="toPage"            @current-change="toPage"        />    </div></template><script>import { doGet, doPost } from '../http/httpRequest';import { goBack,messageTip } from '../util/util.js';export default {    name : "activityDetail",    mounted(){        this.loadActivityDetail();        this.getData(1);    },    inject : ["reload"],    data(){        return {            activityRules : {},            activityDetail : {                ownerDO : {},                createByDO : {},                editByDO : {}            },            activityRemarkList : [              {                createByDO : {},                editByDO : {}              }            ],            pageSize : 0,            total : 0,            activityRemarkQuery : {              noteContent : ""            },            activityRemarkRules : {              noteContent : [                { required: true, message: '请输入活动备注', trigger: 'blur' },                { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }              ]            }        }    },    methods : {        loadActivityDetail(){            let id = this.$route.params.id;            doGet("/api/activity/"+id,{}).then(resp => {                if(resp.data.code === 200){                  this.activityDetail = resp.data.data;                  if(!this.activityDetail.ownerDO){                    this.activityDetail.ownerDO = {};                  }                  if(!this.activityDetail.createByDO){                    this.activityDetail.createByDO = {};                  }                  if(!this.activityDetail.editByDO){                    this.activityDetail.editByDO = {};                  }                  this.activityDetail.id = id;                }                else{                  messageTip("网络错误","error");                }            });            },        toPage(current){            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了            this.getData(current);        },        getData(current){          //获取数据,查询用户列表数据          doGet("/api/acitivity/remark",{              // 当前查询第几页              current : current,              activityId : this.$route.params.id          }).then(resp => {              if(resp.data.code === 200){                  this.activityRemarkList = resp.data.data.list;                  console.log(resp.data.data.list)                  this.pageSize = resp.data.data.pageSize;                  this.total = resp.data.data.total;              }              else{                messageTip("网络错误","error");              }          });        },        submit(){          this.$refs.activityRefForm.validate((isValid) => {            if(isValid){              doPost("/api/activity/remark",{                activityId : this.activityDetail.id,                noteContent : this.activityRemarkQuery.noteContent              }).then(resp => {                if(resp.data.code === 200){                  messageTip("提交成功","success");                  this.reload();                }                else{                  messageTip("网络错误","error");                }              })            }          });        },        goBack,    }}</script><style></style>

<template>

    <el-form ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules">

        <el-form-item label="ID">

          <div class="detail">{{activityDetail.id}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="负责人">

          <div class="detail"> {{activityDetail.ownerDO.name}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="活动名称">

          <div class="detail">{{activityDetail.name}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="开始时间">

          <div class="detail">{{activityDetail.startDate}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="结束时间">

          <div class="detail">{{activityDetail.endDate}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="活动预算">

        <div class="detail">{{activityDetail.cost}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="活动描述">

          <div class="detail">{{activityDetail.description}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="创建时间">

          <div class="detail">{{activityDetail.createTime}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="创建人">

          <div class="detail">{{activityDetail.createByDO.name}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="编辑时间">

          <div class="detail">{{activityDetail.editTime}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="编辑人">

          <div class="detail">{{activityDetail.editByDO.name}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="填写备注:" prop="noteContent">

            <el-input

                v-model="activityRemarkQuery.noteContent"

                :rows="8"

                type="textarea"

                placeholder="请输入活动备注"

            />

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="submit()">提交</el-button>

          <el-button @click="goBack()">返回</el-button>

        </el-form-item>

       

    </el-form>

    <hr>

    <el-table

        :data="activityRemarkList"

        style="width: 100%"

    >

        <el-table-column type="index" label="序号" width="52%" />

        <el-table-column property="createByDO.name" label="备注人" width="75%" show-overflow-tooltip />

        <el-table-column property="createTime" label="备注时间" show-overflow-tooltip />

        <el-table-column property="editByDO.name" label="编辑人" width="75%" show-overflow-tooltip />

        <el-table-column property="editTime" label="编辑时间" show-overflow-tooltip />

        <el-table-column prop="noteContent" label="备注内容" show-overflow-tooltip />

        <el-table-column label="操作" show-overflow-tooltip>

            <template #default="scope">

                <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>

                <el-button type="danger" @click="del(scope.row.id)">删除</el-button>

            </template>

        </el-table-column>

    </el-table>

    <!-- 分页条 -->

    <div class="parent">

        <el-pagination

            background

            layout="prev, pager, next"

            :page-size="pageSize"

            :total="total"

            @prev-click="toPage"

            @next-click="toPage"

            @current-change="toPage"

        />

    </div>

</template>

<script>

import { doGet, doPost } from '../http/httpRequest';

import { goBack,messageTip } from '../util/util.js';

export default {

    name : "activityDetail",

    mounted(){

        this.loadActivityDetail();

        this.getData(1);

    },

    inject : ["reload"],

    data(){

        return {

            activityRules : {},

            activityDetail : {

                ownerDO : {},

                createByDO : {},

                editByDO : {}

            },

            activityRemarkList : [

              {

                createByDO : {},

                editByDO : {}

              }

            ],

            pageSize : 0,

            total : 0,

            activityRemarkQuery : {

              noteContent : ""

            },

            activityRemarkRules : {

              noteContent : [

                { required: true, message: '请输入活动备注', trigger: 'blur' },

                { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }

              ]

            }

        }

    },

    methods : {

        loadActivityDetail(){

            let id = this.$route.params.id;

            doGet("/api/activity/"+id,{}).then(resp => {

                if(resp.data.code === 200){

                  this.activityDetail = resp.data.data;

                  if(!this.activityDetail.ownerDO){

                    this.activityDetail.ownerDO = {};

                  }

                  if(!this.activityDetail.createByDO){

                    this.activityDetail.createByDO = {};

                  }

                  if(!this.activityDetail.editByDO){

                    this.activityDetail.editByDO = {};

                  }

                  this.activityDetail.id = id;

                }

                else{

                  messageTip("网络错误","error");

                }

            });    

        },

        toPage(current){

            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了

            this.getData(current);

        },

        getData(current){

          //获取数据,查询用户列表数据

          doGet("/api/acitivity/remark",{

              // 当前查询第几页

              current : current,

              activityId : this.$route.params.id

          }).then(resp => {

              if(resp.data.code === 200){

                  this.activityRemarkList = resp.data.data.list;

                  console.log(resp.data.data.list)

                  this.pageSize = resp.data.data.pageSize;

                  this.total = resp.data.data.total;

              }

              else{

                messageTip("网络错误","error");

              }

          });

        },

        submit(){

          this.$refs.activityRefForm.validate((isValid) => {

            if(isValid){

              doPost("/api/activity/remark",{

                activityId : this.activityDetail.id,

                noteContent : this.activityRemarkQuery.noteContent

              }).then(resp => {

                if(resp.data.code === 200){

                  messageTip("提交成功","success");

                  this.reload();

                }

                else{

                  messageTip("网络错误","error");

                }

              })

            }

          });

        },

        goBack,

    }

}

</script>

<style>

</style>