CRM项目前端复用封装好的代码实现删除线索和批量删除线索------CRM项目

<template>
    <el-button type="primary" class="btn">导入线索</el-button>
    <el-button type="su***ess" class="btn" @click="importExcel()">导入线索(Excel)</el-button>
    <el-button type="danger" class="btn" @click="batchDel()">批量删除</el-button>
    <el-table
      :data="clueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="33%"/>
    <el-table-column type="index" label="序号" width="60%"/>
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.typeValue" label="称呼"/>
    <el-table-column property="phone" label="手机" width="120"/>
    <el-table-column property="weixin" label="微信" width="120"/>
    <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
    <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
    <el-table-column property="stateDO.typeValue" label="线索状态"/>
    <el-table-column property="sourceDO.typeValue" label="线索来源"/>
    <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="su***ess" @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>

  <!--导入线索Excel的弹窗（对话框）-->
  <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable>
    <el-upload
    ref="uploadRef"
    method="post"
    :http-request="uploadFile"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">选择Excel文件</el-button>
    </template>
    仅支持后缀名为.xls或.xlxs的文件

    <template #tip>
      <div class="fileTip">
        <div>重要提示：</div>
      <ul>
        <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
        <li>给定Excel文件的第一行将视为字段名；</li>
        <li>请确认您的文件大小不超过50MB；</li>
        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
      </ul>
      </div>
    </template>
  </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
        <el-button class="ml-3" type="su***ess" @click="submitUpload">上 传</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { doGet, doPost, doDelete } from '../http/httpRequest.js';
import { messageTip, messageConfirm } from '../util/util.js';
export default {
    name : "clubView",
    inject : ["reload"],
    data(){
        return {
            // 分页大小
            pageSize : 0,
            // 总分页
            total : 0,
            // 线索列表
            clueList : [{
                ownerDO : {},
                activityDO : {},
                appellationDO : {},
                needLoanDO : {},
                intentionStateDO : {},
                intentionProductDO : {},
                stateDO : {},
                sourceDO : {}
            }],
            selectedIds : {},
            // Excel弹出框控制
            importExcelDialogVisible : false
        }
    },
    mounted(){
        this.getData(1);
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(selectionItems){
            this.selectedIds = [];
            // 将已经勾选的数据传给我们
            selectionItems.forEach(data => {
                this.selectedIds.push(data.id);
            });
        },
        batchDel(){
          if(!this.selectedIds.length){
                messageTip("请选择要删除的数据","warning");
                return;
            }
            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                let ids = this.selectedIds.join(",");
                doDelete("/api/club/batchDel",{ids : ids}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("批量删除成功","su***ess");
                        this.reload();
                    }
                    else{
                        messageTip("批量删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消批量删除","warning");
            });
        },
        del(id){
          messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                doDelete("/api/club/delete/"+id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("删除成功","su***ess");
                        this.reload();
                    }
                    else{
                        messageTip("删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消删除","warning");
            });
        },
        // 真正的http上传文件
        uploadFile(file){
          let fileObj = file.file;
          let formData = new FormData();
          formData.append('file',fileObj);
          doPost("/api/club/importExcel",formData).then(resp => {
            console.log(resp)
            if(resp.data.code === 200){
              messageTip("录入成功","su***ess");
              this.$refs.uploadRef.clearFiles();
              this.reload();
            }
            else{
              messageTip("录入失败","error");
            }
          });
        },
        // 发起表单提交
        submitUpload(){
          this.$refs.uploadRef.submit();
        },
        // 点击提交Excel按钮触发
        importExcel(){
          this.importExcelDialogVisible = true;
        },
        // 自动传参
        toPage(current){
            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
            this.getData(current);
        },
        // 获取分页信息
        getData(current){
            //获取数据,查询用户列表数据
            doGet("api/clues",{
                // 当前查询第几页
                current : current
            }).then(resp => {
                if(resp.data.code === 200){
                    this.clueList = resp.data.data.list;
                    this.total = resp.data.data.total;
                    this.pageSize = resp.data.data.pageSize;
                }
                else{
                  messageTip("网络错误","error");
                }
            });
        },
    }
}
</script>

<style scoped>
.fileTip{
  padding-top: 3%;
}
</style>

<template>

    <el-button type="primary" class="btn">导入线索</el-button>

    <el-button type="su***ess" class="btn" @click="importExcel()">导入线索(Excel)</el-button>

    <el-button type="danger" class="btn" @click="batchDel()">批量删除</el-button>

    <el-table

      :data="clueList"

      style="width: 100%"

      @selection-change="handleSelectionChange">

    <el-table-column type="selection" width="33%"/>

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

    <el-table-column property="ownerDO.name" label="负责人" width="120" />

    <el-table-column property="activityDO.name" label="所属活动"/>

    <el-table-column label="姓名">

      <template #default="scope">

        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>

      </template>

    </el-table-column>

    <el-table-column property="appellationDO.typeValue" label="称呼"/>

    <el-table-column property="phone" label="手机" width="120"/>

    <el-table-column property="weixin" label="微信" width="120"/>

    <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>

    <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>

    <el-table-column property="intentionProductDO.name" label="意向产品"/>

    <el-table-column property="stateDO.typeValue" label="线索状态"/>

    <el-table-column property="sourceDO.typeValue" label="线索来源"/>

    <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>

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

      <template #default="scope">

        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>

        <el-button type="su***ess" @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>

  <!--导入线索Excel的弹窗（对话框）-->

  <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable>

    <el-upload

    ref="uploadRef"

    method="post"

    :http-request="uploadFile"

    :auto-upload="false"

  >

    <template #trigger>

      <el-button type="primary">选择Excel文件</el-button>

    </template>

    仅支持后缀名为.xls或.xlxs的文件

    <template #tip>

      <div class="fileTip">

        <div>重要提示：</div>

      <ul>

        <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>

        <li>给定Excel文件的第一行将视为字段名；</li>

        <li>请确认您的文件大小不超过50MB；</li>

        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>

        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>

      </ul>

      </div>

    </template>

  </el-upload>

    <template #footer>

      <span class="dialog-footer">

        <el-button @click="importExcelDialogVisible = false">关 闭</el-button>

        <el-button class="ml-3" type="su***ess" @click="submitUpload">上 传</el-button>

      </span>

    </template>

  </el-dialog>

</template>

<script>

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

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

export default {

    name : "clubView",

    inject : ["reload"],

    data(){

        return {

            // 分页大小

            pageSize : 0,

            // 总分页

            total : 0,

            // 线索列表

            clueList : [{

                ownerDO : {},

                activityDO : {},

                appellationDO : {},

                needLoanDO : {},

                intentionStateDO : {},

                intentionProductDO : {},

                stateDO : {},

                sourceDO : {}

            }],

            selectedIds : {},

            // Excel弹出框控制

            importExcelDialogVisible : false

        }

    },

    mounted(){

        this.getData(1);

    },

    methods : {

        // 勾选或者取消勾选触发

        handleSelectionChange(selectionItems){

            this.selectedIds = [];

            // 将已经勾选的数据传给我们

            selectionItems.forEach(data => {

                this.selectedIds.push(data.id);

            });

        },

        batchDel(){

          if(!this.selectedIds.length){

                messageTip("请选择要删除的数据","warning");

                return;

            }

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

                let ids = this.selectedIds.join(",");

                doDelete("/api/club/batchDel",{ids : ids}).then(resp => {

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

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

                        this.reload();

                    }

                    else{

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

                    }

                });

            }).catch(() => {

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

            });

        },

        del(id){

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

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

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

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

                        this.reload();

                    }

                    else{

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

                    }

                });

            }).catch(() => {

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

            });

        },

        // 真正的http上传文件

        uploadFile(file){

          let fileObj = file.file;

          let formData = new FormData();

          formData.append('file',fileObj);

          doPost("/api/club/importExcel",formData).then(resp => {

            console.log(resp)

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

              messageTip("录入成功","su***ess");

              this.$refs.uploadRef.clearFiles();

              this.reload();

            }

            else{

              messageTip("录入失败","error");

            }

          });

        },

        // 发起表单提交

        submitUpload(){

          this.$refs.uploadRef.submit();

        },

        // 点击提交Excel按钮触发

        importExcel(){

          this.importExcelDialogVisible = true;

        },

        // 自动传参

        toPage(current){

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

            this.getData(current);

        },

        // 获取分页信息

        getData(current){

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

            doGet("api/clues",{

                // 当前查询第几页

                current : current

            }).then(resp => {

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

                    this.clueList = resp.data.data.list;

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

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

                }

                else{

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

                }

            });

        },

    }

}

</script>

<style scoped>

.fileTip{

  padding-top: 3%;

}

</style>