CRM项目前端实现删除修改线索备注的逻辑和对应效果------CRM项目

2024-03-08 22:50:05 分类：前端 热度：91 评论： 0 

<template>
  <el-form
      ref="clueRemarkForm"
      :model="clueRemark"
      label-width="110px"
      :rules="clueRemarkRules"
      style="max-width: 95%;">

    <el-form-item label="负责人">
      <div class="detail">{{clueDetail.ownerDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="所属活动">
      <div class="detail">{{clueDetail.activityDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="姓名">
      <div class="detail">{{clueDetail.fullName}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="称呼">
      <div class="detail">{{clueDetail.appellationDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="手机">
      <div class="detail">{{clueDetail.phone}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="微信">
      <div class="detail">{{clueDetail.weixin}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="QQ">
      <div class="detail">{{clueDetail.qq}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="邮箱">
      <div class="detail">{{clueDetail.email}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年龄">
      <div class="detail">{{clueDetail.age}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="职业">
      <div class="detail">{{clueDetail.job}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年收入">
      <div class="detail">{{clueDetail.yearIn***e}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="住址">
      <div class="detail">{{clueDetail.address}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="贷款">
      <div class="detail">{{clueDetail.needLoanDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向状态">
      <div class="detail">{{clueDetail.intentionStateDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向产品">
      <div class="detail">{{clueDetail.intentionProductDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索状态">
      <div class="detail">{{clueDetail.stateDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索来源">
      <div class="detail">{{clueDetail.sourceDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索描述">
      <div class="detail">{{clueDetail.description}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="下次联系时间">
      <div class="detail">{{clueDetail.nextContactTime}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="填写跟踪记录" prop="noteContent">
      <el-input
          v-model="clueRemark.noteContent"
          :rows="8"
          type="textarea"/>
    </el-form-item>
    <el-form-item label="跟踪方式" prop="noteWay">
      <el-select
          v-model="clueRemark.noteWay"
          placeholder="请选择跟踪方式"
          style="width: 100%"
          @click="loadDicValue('noteWay')"
          clearable>
        <el-option
            v-for="item in noteWayOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>
      <el-button type="su***ess" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>
      <el-button type="su***ess" plain @click="goBack">返 回</el-button>
    </el-form-item>
  </el-form>
  <el-table
      :data="clueRemarkList"
      style="width: 100%">
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column prop="noteWayDO.typeValue" label="跟踪方式"/>
    <el-table-column prop="noteContent" label="跟踪内容"/>
    <el-table-column property="createTime" label="跟踪时间"/>
    <el-table-column property="createByDO.name" label="跟踪人"/>
    <el-table-column property="editTime" label="编辑时间"/>
    <el-table-column property="editByDO.name" label="编辑人"/>
    <el-table-column label="操作">
      <template #default="scope">
        <a href="javascript:" @click="edit(scope.row.id,scope.$index)">编辑</a>
        &nbsp;
        <a href="javascript:" @click="del(scope.row.id)">删除</a>
      </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="clueRemarkRefForm" :model="clueRemarkEdit" :rules="clueRemarkRules">
        <el-form-item label="线索备注:" prop="noteContent">
          <el-input
            v-model="clueRemarkEdit.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, doDelete, doPut } from '../http/httpRequest';
import { messageTip, goBack, messageConfirm } from '../util/util';
export default {
    name : "clueDetail",
    inject : ["reload"],
    mounted(){
        this.loadClueDetail();
        this.getData(1);
    },
    methods : {
      goBack,
      loadClueDetail(){
          let id = this.$route.params.id;
          doGet("/api/clue/"+id,{}).then(resp => {
              if(resp.data.code === 200){
                  this.clueDetail = resp.data.data;
              }
              else{
                  messageTip("网络异常","error");
              }
          });
      },
      // 提交线索跟踪记录
      clueRemarkSubmit(){
          this.$refs.clueRemarkForm.validate((isValid) => {
            if(this.clueRemark.noteContent&&this.clueRemark.noteWay){
              doPost("/api/clue/remark/add", 
                  {
                      clueId : this.clueDetail.id,
                      noteContent : this.clueRemark.noteContent,
                      noteWay : this.clueRemark.noteWay
                  }
              ).then(resp => {
                  if(resp.data.code === 200){
                      messageTip("提交成功","su***ess");
                      this.reload();
                  }
                  else{
                      messageTip("提交失败","error");
                  }
              });
            }
            else{
                messageTip("请输入完整的信息","warning");
            }
          });
      },
      //加载字典数据
      loadDicValue(typeCode) {
        doGet("/api/dicValue/" + typeCode, {}).then( resp => {
          if (resp.data.code === 200) {
            this.noteWayOptions = resp.data.data;
          }
          else{
            messageTip("网络错误","error");
          }
        });
      },
      // 删除线索备注
      del(id){
        messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                doDelete("/api/clue/remark/delete/"+id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("删除成功","su***ess");
                        this.reload();
                    }
                    else{
                        messageTip("删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消删除","warning");
            });
      },
      // 自动传参
      toPage(current){
        // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
        this.getData(current);
      },
        // 获取分页信息
      getData(current){
          //获取数据,查询用户列表数据
          doGet("/api/clue/remark/page",{
              // 当前查询第几页
              current : current,
              id : this.$route.params.id
          }).then(resp => {
              if(resp.data.code === 200){
                  this.clueRemarkList = resp.data.data.list;
                  console.log(this.clueRemarkList);
                  this.total = resp.data.data.total;
                  this.pageSize = resp.data.data.pageSize;
              }
              else{
                messageTip("网络错误","error");
              }
          });
      },
      edit(id,index){
        this.dialogVisible = true;
        this.clueRemarkEdit.noteContent = this.clueRemarkList[index].noteContent;
        this.clueRemarkEdit.id = id;
      },
      editSubmit(){
        this.$refs.clueRemarkRefForm.validate((isValid) => {
            if(isValid){
              doPut("/api/clue/remark/edit",{
                clueId : this.$route.params.id,
                id : this.clueRemarkEdit.id,
                noteContent : this.clueRemarkEdit.noteContent
              }).then(resp => {
                console.log(resp);
                if(resp.data.code === 200){
                  messageTip("修改成功","su***ess");
                  this.reload();
                }
                else{
                  messageTip("修改失败","error");
                }
              })
            }
          });
      }
    },
    data(){
        return {
            clueRemark : {},
            clueRemarkRules : {},
            clueDetail : {
                ownerDO : {},
                activityDO : {},
                appellationDO : {},
                needLoanDO : {},
                intentionStateDO : {},
                intentionProductDO : {},
                stateDO : {},
                sourceDO  : {}
            },
            noteWayOptions : [{}],
            //线索跟踪记录列表，初始值是空
            clueRemarkList : [{
              noteWayDO : {},
              createByDO : {},
              editByDO : {}
            }],
            total : 0,
            pageSize : 0,
            clueRemarkRules : {
              noteContent : [
                { required: true, message: '请输入线索备注', trigger: 'blur' },
                { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }
              ]
            },
            clueRemarkEdit : {},
            dialogVisible : false
        }
    }
}
</script>

<style scoped>
</style>

<template>

  <el-form

      ref="clueRemarkForm"

      :model="clueRemark"

      label-width="110px"

      :rules="clueRemarkRules"

      style="max-width: 95%;">

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

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

    </el-form-item>

    <el-form-item label="所属活动">

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

    </el-form-item>

    <el-form-item label="姓名">

      <div class="detail">{{clueDetail.fullName}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="称呼">

      <div class="detail">{{clueDetail.appellationDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="手机">

      <div class="detail">{{clueDetail.phone}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="微信">

      <div class="detail">{{clueDetail.weixin}}&nbsp;</div>

    </el-form-item>

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

      <div class="detail">{{clueDetail.qq}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="邮箱">

      <div class="detail">{{clueDetail.email}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="年龄">

      <div class="detail">{{clueDetail.age}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="职业">

      <div class="detail">{{clueDetail.job}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="年收入">

      <div class="detail">{{clueDetail.yearIn***e}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="住址">

      <div class="detail">{{clueDetail.address}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="贷款">

      <div class="detail">{{clueDetail.needLoanDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="意向状态">

      <div class="detail">{{clueDetail.intentionStateDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="意向产品">

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

    </el-form-item>

    <el-form-item label="线索状态">

      <div class="detail">{{clueDetail.stateDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="线索来源">

      <div class="detail">{{clueDetail.sourceDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="线索描述">

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

    </el-form-item>

    <el-form-item label="下次联系时间">

      <div class="detail">{{clueDetail.nextContactTime}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="填写跟踪记录" prop="noteContent">

      <el-input

          v-model="clueRemark.noteContent"

          :rows="8"

          type="textarea"/>

    </el-form-item>

    <el-form-item label="跟踪方式" prop="noteWay">

      <el-select

          v-model="clueRemark.noteWay"

          placeholder="请选择跟踪方式"

          style="width: 100%"

          @click="loadDicValue('noteWay')"

          clearable>

        <el-option

            v-for="item in noteWayOptions"

            :key="item.id"

            :label="item.typeValue"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item>

      <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>

      <el-button type="su***ess" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>

      <el-button type="su***ess" plain @click="goBack">返 回</el-button>

    </el-form-item>

  </el-form>

  <el-table

      :data="clueRemarkList"

      style="width: 100%">

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

    <el-table-column prop="noteWayDO.typeValue" label="跟踪方式"/>

    <el-table-column prop="noteContent" label="跟踪内容"/>

    <el-table-column property="createTime" label="跟踪时间"/>

    <el-table-column property="createByDO.name" label="跟踪人"/>

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

    <el-table-column property="editByDO.name" label="编辑人"/>

    <el-table-column label="操作">

      <template #default="scope">

        <a href="javascript:" @click="edit(scope.row.id,scope.$index)">编辑</a>

        &nbsp;

        <a href="javascript:" @click="del(scope.row.id)">删除</a>

      </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="clueRemarkRefForm" :model="clueRemarkEdit" :rules="clueRemarkRules">

        <el-form-item label="线索备注:" prop="noteContent">

          <el-input

            v-model="clueRemarkEdit.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, doDelete, doPut } from '../http/httpRequest';

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

export default {

    name : "clueDetail",

    inject : ["reload"],

    mounted(){

        this.loadClueDetail();

        this.getData(1);

    },

    methods : {

      goBack,

      loadClueDetail(){

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

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

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

                  this.clueDetail = resp.data.data;

              }

              else{

                  messageTip("网络异常","error");

              }

          });

      },

      // 提交线索跟踪记录

      clueRemarkSubmit(){

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

            if(this.clueRemark.noteContent&&this.clueRemark.noteWay){

              doPost("/api/clue/remark/add",

                  {

                      clueId : this.clueDetail.id,

                      noteContent : this.clueRemark.noteContent,

                      noteWay : this.clueRemark.noteWay

                  }

              ).then(resp => {

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

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

                      this.reload();

                  }

                  else{

                      messageTip("提交失败","error");

                  }

              });

            }

            else{

                messageTip("请输入完整的信息","warning");

            }

          });

      },

      //加载字典数据

      loadDicValue(typeCode) {

        doGet("/api/dicValue/" + typeCode, {}).then( resp => {

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

            this.noteWayOptions = resp.data.data;

          }

          else{

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

          }

        });

      },

      // 删除线索备注

      del(id){

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

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

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

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

                        this.reload();

                    }

                    else{

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

                    }

                });

            }).catch(() => {

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

            });

      },

      // 自动传参

      toPage(current){

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

        this.getData(current);

      },

        // 获取分页信息

      getData(current){

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

          doGet("/api/clue/remark/page",{

              // 当前查询第几页

              current : current,

              id : this.$route.params.id

          }).then(resp => {

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

                  this.clueRemarkList = resp.data.data.list;

                  console.log(this.clueRemarkList);

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

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

              }

              else{

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

              }

          });

      },

      edit(id,index){

        this.dialogVisible = true;

        this.clueRemarkEdit.noteContent = this.clueRemarkList[index].noteContent;

        this.clueRemarkEdit.id = id;

      },

      editSubmit(){

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

            if(isValid){

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

                clueId : this.$route.params.id,

                id : this.clueRemarkEdit.id,

                noteContent : this.clueRemarkEdit.noteContent

              }).then(resp => {

                console.log(resp);

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

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

                  this.reload();

                }

                else{

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

                }

              })

            }

          });

      }

    },

    data(){

        return {

            clueRemark : {},

            clueRemarkRules : {},

            clueDetail : {

                ownerDO : {},

                activityDO : {},

                appellationDO : {},

                needLoanDO : {},

                intentionStateDO : {},

                intentionProductDO : {},

                stateDO : {},

                sourceDO  : {}

            },

            noteWayOptions : [{}],

            //线索跟踪记录列表，初始值是空

            clueRemarkList : [{

              noteWayDO : {},

              createByDO : {},

              editByDO : {}

            }],

            total : 0,

            pageSize : 0,

            clueRemarkRules : {

              noteContent : [

                { required: true, message: '请输入线索备注', trigger: 'blur' },

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

              ]

            },

            clueRemarkEdit : {},

            dialogVisible : false

        }

    }

}

</script>

<style scoped>

</style>

转载请说明出处内容投诉
CSS教程_站长资源网 » CRM项目前端实现删除修改线索备注的逻辑和对应效果------CRM项目
行道

行道

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买