0
0

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>
</template>

<script>
import { doGet, doPost } from '../http/httpRequest';
import { goBack,messageTip } from '../util/util.js';
export default {
    name : "activityDetail",
    mounted(){
        this.loadActivityDetail();
    },
    inject : ["reload"],
    data(){
        return {
            activityRules : {},
            activityDetail : {
                ownerDO : {},
                createByDO : {},
                editByDO : {}
            },
            activityRemarkQuery : {},
            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");
                }
            });    
        },
        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>
</template> <script> import { doGet, doPost } from '../http/httpRequest'; import { goBack,messageTip } from '../util/util.js'; export default { name : "activityDetail", mounted(){ this.loadActivityDetail(); }, inject : ["reload"], data(){ return { activityRules : {}, activityDetail : { ownerDO : {}, createByDO : {}, editByDO : {} }, activityRemarkQuery : {}, 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"); } }); }, 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>
标签： vue.js elementui javascript
本文转载自: https://blog.csdn.net/2201_75960169/article/details/136148264
版权归原作者 旧约Alatus 所有， 如有侵权，请联系我们删除。
登录后发布评论

“CRM项目活动详情页提交活动备注相关前端代码实现------CRM项目”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

如何安装Rocky Linux8.5？详细过程及安装包如下

【VScode】VSCode中的智能编程利器，全面揭秘ChatMoss & ChatGPT中文版

【解决办法】无法使用右键“通过VSCode打开文件夹”

使用MFC与Excel交互实现报表打印功能

PHP与MySQL数据库交互：数据录入与输出实战

Axure PR 9 多级下拉选择器 设计&交互

结合人工智能，大数据，物联网等主流技术实现业务流程的闭环整合的智慧快消开源了。

文章导航