CRM项目前端使用封装的doDelete请求将Id以PathVarible提交实现删除活动备注(修改deleted状态为1)------CRM项目

2024-03-02 03:20:08 分类：前端 热度：94 评论： 0 

<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="su***ess" @click="edit(scope.row.id,scope.$index)">编辑</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>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>
        <el-form ref="activityRemarkRefForm" :model="activityRemarkEdit" :rules="activityRemarkRules">
            <el-form-item label="活动备注:" prop="noteContent">
              <el-input
                v-model="activityRemarkEdit.noteContent"
                :rows="8"
                type="textarea"
                placeholder="请输入活动备注"
              />
            </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editSubmit()">
            确定
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script>
import { doGet, doPost, doPut,doDelete } from '../http/httpRequest';
import { goBack, messageTip, messageConfirm } from '../util/util.js';
export default {
    name : "activityDetail",
    mounted(){
        this.loadActivityDetail();
        this.getData(1);
    },
    inject : ["reload"],
    data(){
        return {
            activityRules : {},
            activityDetail : {
                ownerDO : {},
                createByDO : {},
                editByDO : {}
            },
            dialogVisible : false,
            activityRemarkList : [
              {
                createByDO : {},
                editByDO : {}
              }
            ],
            Title : "修改活动备注",
            pageSize : 0,
            total : 0,
            activityRemarkQuery : {
              noteContent : ""
            },
            activityRemarkEdit : {
              noteContent : "",
              id : 0
            },
            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;
                  this.pageSize = resp.data.data.pageSize;
                  this.total = resp.data.data.total;
              }
              else{
                messageTip("网络错误","error");
              }
          });
        },
        editSubmit(){
          this.$refs.activityRemarkRefForm.validate((isValid) => {
            if(isValid){
              doPut("/api/activity/remark/edit",{
                id : this.activityRemarkEdit.id,
                noteContent : this.activityRemarkEdit.noteContent
              }).then(resp => {
                if(resp.data.code === 200){
                  messageTip("修改成功","su***ess");
                  this.reload();
                }
                else{
                  messageTip("修改失败","error");
                }
              })
            }
          });
        },
        submit(){
          this.$refs.activityRefForm.validate((isValid) => {
            if(isValid){
              doPost("/api/activity/remark/add",{
                activityId : this.activityDetail.id,
                noteContent : this.activityRemarkQuery.noteContent
              }).then(resp => {
                if(resp.data.code === 200){
                  messageTip("提交成功","su***ess");
                  this.reload();
                }
                else{
                  messageTip("网络错误","error");
                }
              })
            }
          });
        },
        goBack,
        edit(id,index){
          this.dialogVisible = true;
          this.activityRemarkEdit.id = id;
          this.activityRemarkEdit.noteContent = this.activityRemarkList[index].noteContent;
          // doGet("/api/activty/remark/detail/"+id,{}).then(resp => {
          //   if(resp.data.code === 200){
          //     this.activityRemarkEdit = resp.data.data;
          //   }
          //   else{
          //     messageTip("网络错误","error");
          //   }
          // });
        },
        del(id){
          messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                doDelete("/api/activity/remark/delete/"+id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("删除成功","su***ess");
                        this.reload();
                    }
                    else{
                        messageTip("删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消删除","warning");
            });
        }
    }
}
</script>

<style scoped>
</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="su***ess" @click="edit(scope.row.id,scope.$index)">编辑</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>

    <!-- 编辑弹窗 -->

    <el-dialog v-model="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>

        <el-form ref="activityRemarkRefForm" :model="activityRemarkEdit" :rules="activityRemarkRules">

            <el-form-item label="活动备注:" prop="noteContent">

              <el-input

                v-model="activityRemarkEdit.noteContent"

                :rows="8"

                type="textarea"

                placeholder="请输入活动备注"

              />

            </el-form-item>

        </el-form>

        <template #footer>

        <div class="dialog-footer">

            <el-button @click="dialogVisible = false">取消</el-button>

            <el-button type="primary" @click="editSubmit()">

            确定

            </el-button>

        </div>

        </template>

    </el-dialog>

</template>

<script>

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

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

export default {

    name : "activityDetail",

    mounted(){

        this.loadActivityDetail();

        this.getData(1);

    },

    inject : ["reload"],

    data(){

        return {

            activityRules : {},

            activityDetail : {

                ownerDO : {},

                createByDO : {},

                editByDO : {}

            },

            dialogVisible : false,

            activityRemarkList : [

              {

                createByDO : {},

                editByDO : {}

              }

            ],

            Title : "修改活动备注",

            pageSize : 0,

            total : 0,

            activityRemarkQuery : {

              noteContent : ""

            },

            activityRemarkEdit : {

              noteContent : "",

              id : 0

            },

            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;

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

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

              }

              else{

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

              }

          });

        },

        editSubmit(){

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

            if(isValid){

              doPut("/api/activity/remark/edit",{

                id : this.activityRemarkEdit.id,

                noteContent : this.activityRemarkEdit.noteContent

              }).then(resp => {

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

                  messageTip("修改成功","su***ess");

                  this.reload();

                }

                else{

                  messageTip("修改失败","error");

                }

              })

            }

          });

        },

        submit(){

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

            if(isValid){

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

                activityId : this.activityDetail.id,

                noteContent : this.activityRemarkQuery.noteContent

              }).then(resp => {

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

                  messageTip("提交成功","su***ess");

                  this.reload();

                }

                else{

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

                }

              })

            }

          });

        },

        goBack,

        edit(id,index){

          this.dialogVisible = true;

          this.activityRemarkEdit.id = id;

          this.activityRemarkEdit.noteContent = this.activityRemarkList[index].noteContent;

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

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

          //     this.activityRemarkEdit = resp.data.data;

          //   }

          //   else{

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

          //   }

          // });

        },

        del(id){

          messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

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

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

                        messageTip("删除成功","su***ess");

                        this.reload();

                    }

                    else{

                        messageTip("删除失败:"+resp.data.msg,"error");

                    }

                });

            }).catch(() => {

              messageTip("已取消删除","warning");

            });

        }

    }

}

</script>

<style scoped>

</style>

转载请说明出处内容投诉
CSS教程_站长资源网 » CRM项目前端使用封装的doDelete请求将Id以PathVarible提交实现删除活动备注(修改deleted状态为1)------CRM项目
图小库

图小库

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买