0
0

CRM项目活动详情页提交活动备注相关前端代码实现------CRM项目

  1. <template>
  2.     <el-form ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules">
  3.         <el-form-item label="ID">
  4.           <div class="detail">{{activityDetail.id}}&nbsp;</div>
  5.         </el-form-item>
  7.         <el-form-item label="负责人">
  8.           <div class="detail"> {{activityDetail.ownerDO.name}}&nbsp;</div>
  9.         </el-form-item>
  11.         <el-form-item label="活动名称">
  12.           <div class="detail">{{activityDetail.name}}&nbsp;</div>
  13.         </el-form-item>
  15.         <el-form-item label="开始时间">
  16.           <div class="detail">{{activityDetail.startDate}}&nbsp;</div>
  17.         </el-form-item>
  19.         <el-form-item label="结束时间">
  20.           <div class="detail">{{activityDetail.endDate}}&nbsp;</div>
  21.         </el-form-item>
  23.         <el-form-item label="活动预算">
  24.         <div class="detail">{{activityDetail.cost}}&nbsp;</div>
  25.         </el-form-item>
  27.         <el-form-item label="活动描述">
  28.           <div class="detail">{{activityDetail.description}}&nbsp;</div>
  29.         </el-form-item>
  31.         <el-form-item label="创建时间">
  32.           <div class="detail">{{activityDetail.createTime}}&nbsp;</div>
  33.         </el-form-item>
  35.         <el-form-item label="创建人">
  36.           <div class="detail">{{activityDetail.createByDO.name}}&nbsp;</div>
  37.         </el-form-item>
  39.         <el-form-item label="编辑时间">
  40.           <div class="detail">{{activityDetail.editTime}}&nbsp;</div>
  41.         </el-form-item>
  43.         <el-form-item label="编辑人">
  44.           <div class="detail">{{activityDetail.editByDO.name}}&nbsp;</div>
  45.         </el-form-item>
  47.         <el-form-item label="填写备注:" prop="noteContent">
  48.             <el-input
  49.                 v-model="activityRemarkQuery.noteContent"
  50.                 :rows="8"
  51.                 type="textarea"
  52.                 placeholder="请输入活动备注"
  53.             />
  54.         </el-form-item>
  56.         <el-form-item>
  57.           <el-button type="primary" @click="submit()">提交</el-button>
  58.           <el-button @click="goBack()">返回</el-button>
  59.         </el-form-item>
  60.         
  61.     </el-form>
  62. </template>
  64. <script>
  65. import { doGet, doPost } from '../http/httpRequest';
  66. import { goBack,messageTip } from '../util/util.js';
  67. export default {
  68.     name : "activityDetail",
  69.     mounted(){
  70.         this.loadActivityDetail();
  71.     },
  72.     inject : ["reload"],
  73.     data(){
  74.         return {
  75.             activityRules : {},
  76.             activityDetail : {
  77.                 ownerDO : {},
  78.                 createByDO : {},
  79.                 editByDO : {}
  80.             },
  81.             activityRemarkQuery : {},
  82.             activityRemarkRules : {
  83.               noteContent : [
  84.                 { required: true, message: '请输入活动备注', trigger: 'blur' },
  85.                 { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }
  86.               ]
  87.             }
  88.         }
  89.     },
  90.     methods : {
  91.         loadActivityDetail(){
  92.             let id = this.$route.params.id;
  93.             doGet("/api/activity/"+id,{}).then(resp => {
  94.                 if(resp.data.code === 200){
  95.                   this.activityDetail = resp.data.data;
  96.                   if(!this.activityDetail.ownerDO){
  97.                     this.activityDetail.ownerDO = {};
  98.                   }
  99.                   if(!this.activityDetail.createByDO){
  100.                     this.activityDetail.createByDO = {};
  101.                   }
  102.                   if(!this.activityDetail.editByDO){
  103.                     this.activityDetail.editByDO = {};
  104.                   }
  105.                   this.activityDetail.id = id;
  106.                 }
  107.                 else{
  108.                   messageTip("网络错误","error");
  109.                 }
  110.             });    
  111.         },
  112.         submit(){
  113.           this.$refs.activityRefForm.validate((isValid) => {
  114.             if(isValid){
  115.               doPost("/api/activity/remark",{
  116.                 activityId : this.activityDetail.id,
  117.                 noteContent : this.activityRemarkQuery.noteContent
  118.               }).then(resp => {
  119.                 if(resp.data.code === 200){
  120.                   messageTip("提交成功","success");
  121.                   this.reload();
  122.                 }
  123.                 else{
  124.                   messageTip("网络错误","error");
  125.                 }
  126.               })
  127.             }
  128.           });
  129.         },
  130.         goBack,
  131.     }
  132. }
  133. </script>
  135. <style>
  136. </style>
<template> 
  1. <el-form ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules">
  3.     <el-form-item label="ID">
  5.       <div class="detail">{{activityDetail.id}}&nbsp;</div>
  7.     </el-form-item>
  9.     <el-form-item label="负责人">
  11.       <div class="detail"> {{activityDetail.ownerDO.name}}&nbsp;</div>
  13.     </el-form-item>
  15.     <el-form-item label="活动名称">
  17.       <div class="detail">{{activityDetail.name}}&nbsp;</div>
  19.     </el-form-item>
  21.     <el-form-item label="开始时间">
  23.       <div class="detail">{{activityDetail.startDate}}&nbsp;</div>
  25.     </el-form-item>
  27.     <el-form-item label="结束时间">
  29.       <div class="detail">{{activityDetail.endDate}}&nbsp;</div>
  31.     </el-form-item>
  33.     <el-form-item label="活动预算">
  35.     <div class="detail">{{activityDetail.cost}}&nbsp;</div>
  37.     </el-form-item>
  39.     <el-form-item label="活动描述">
  41.       <div class="detail">{{activityDetail.description}}&nbsp;</div>
  43.     </el-form-item>
  45.     <el-form-item label="创建时间">
  47.       <div class="detail">{{activityDetail.createTime}}&nbsp;</div>
  49.     </el-form-item>
  51.     <el-form-item label="创建人">
  53.       <div class="detail">{{activityDetail.createByDO.name}}&nbsp;</div>
  55.     </el-form-item>
  57.     <el-form-item label="编辑时间">
  59.       <div class="detail">{{activityDetail.editTime}}&nbsp;</div>
  61.     </el-form-item>
  63.     <el-form-item label="编辑人">
  65.       <div class="detail">{{activityDetail.editByDO.name}}&nbsp;</div>
  67.     </el-form-item>
  69.     <el-form-item label="填写备注:" prop="noteContent">
  71.         <el-input
  73.             v-model="activityRemarkQuery.noteContent"
  75.             :rows="8"
  77.             type="textarea"
  79.             placeholder="请输入活动备注"
  81.         />
  83.     </el-form-item>
  85.     <el-form-item>
  87.       <el-button type="primary" @click="submit()">提交</el-button>
  89.       <el-button @click="goBack()">返回</el-button>
  91.     </el-form-item>
  93.    
  95. </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同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。