0
0

CRM项目前端部分的线索管理页的基本布局和效果实现------CRM项目

  1. <template>
  2.     <el-button type="primary" class="btn">导入线索</el-button>
  3.     <el-button type="success" class="btn">导入线索(Excel)</el-button>
  4.     <el-button type="danger" class="btn">批量删除</el-button>
  5.     <el-table
  6.       :data="clueList"
  7.       style="width: 100%"
  8.       @selection-change="handleSelectionChange">
  9.     <el-table-column type="selection" width="50"/>
  10.     <el-table-column type="index" label="序号" width="65"/>
  11.     <el-table-column property="ownerPO.name" label="负责人" width="120" />
  12.     <el-table-column property="activityPO.name" label="所属活动"/>
  13.     <el-table-column label="姓名">
  14.       <template #default="scope">
  15.         <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
  16.       </template>
  17.     </el-table-column>
  18.     <el-table-column property="appellationPO.typeValue" label="称呼"/>
  19.     <el-table-column property="phone" label="手机" width="120"/>
  20.     <el-table-column property="weixin" label="微信" width="120"/>
  21.     <el-table-column property="needLoanPO.typeValue" label="是否贷款"/>
  22.     <el-table-column property="intentionStatePO.typeValue" label="意向状态"/>
  23.     <el-table-column property="intentionProductPO.name" label="意向产品"/>
  24.     <el-table-column property="statePO.typeValue" label="线索状态"/>
  25.     <el-table-column property="sourcePO.typeValue" label="线索来源"/>
  26.     <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
  27.     <el-table-column label="操作" width="230">
  28.       <template #default="scope">
  29.         <el-button type="primary" @click="view(scope.row.id)" v-hasPermission="'clue:view'">详情</el-button>
  30.         <el-button type="success" @click="edit(scope.row.id)" v-hasPermission="'clue:edit'">编辑</el-button>
  31.         <el-button type="danger" @click="del(scope.row.id)" v-hasPermission="'clue:delete'">删除</el-button>
  32.       </template>
  33.     </el-table-column>
  34.   </el-table>
  35.   <div class="parent">
  36.         <el-pagination
  37.             background
  38.             layout="prev, pager, next"
  39.             :page-size="pageSize"
  40.             :total="total"
  41.             @prev-click="toPage"
  42.             @next-click="toPage"
  43.             @current-change="toPage"
  44.         />
  45.     </div>
  47.   <!--导入线索Excel的弹窗（对话框）-->
  48.   <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center>
  49.     <el-upload
  50.         ref="uploadRef"
  51.         method="post"
  52.         :http-request="uploadFile"
  53.         :auto-upload="false">
  54.       <template #trigger>
  55.         <el-button type="primary">选择Excel文件</el-button>
  56.         &nbsp;仅支持后缀名为.xls或.xlsx的文件
  57.       </template>
  58.       <br/>
  59.       <br/>
  60.       <div>重要提示：</div>
  61.       <ul>
  62.         <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
  63.         <li>给定Excel文件的第一行将视为字段名；</li>
  64.         <li>请确认您的文件大小不超过50MB；</li>
  65.         <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
  66.         <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
  67.       </ul>
  68.     </el-upload>
  70.     <template #footer>
  71.       <span class="dialog-footer">
  72.         <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
  73.         <el-button class="ml-3" type="success" @click="submitUpload">上 传</el-button>
  74.       </span>
  75.     </template>
  76.   </el-dialog>
  77. </template>
  79. <script>
  80. export default {
  81.     name : "clubView",
  82.     data(){
  83.         return {
  84.             pageSize : 0,
  85.             total : 0,
  86.             clueList : [{
  87.                 ownerPO : {},
  88.                 activityPO : {},
  89.                 appellationPO : {},
  90.                 needLoanPO : {},
  91.                 intentionStatePO : {},
  92.                 intentionProductPO : {},
  93.                 statePO : {},
  94.                 sourcePO : {}
  95.             }],
  96.             importExcelDialogVisible : true,
  97.         }
  98.     },
  99.     methods : {
  100.         handleSelectionChange(){
  102.         },
  103.         toPage(current){
  105.         }
  106.     }
  107. }
  108. </script>
  110. <style>
  112. </style>
<template> 
  1. <el-button type="primary" class="btn">导入线索</el-button>
  3. <el-button type="success" class="btn">导入线索(Excel)</el-button>
  5. <el-button type="danger" class="btn">批量删除</el-button>
  7. <el-table
  9.   :data="clueList"
  11.   style="width: 100%"
  13.   @selection-change="handleSelectionChange">
  15. <el-table-column type="selection" width="50"/>
  17. <el-table-column type="index" label="序号" width="65"/>
  19. <el-table-column property="ownerPO.name" label="负责人" width="120" />
  21. <el-table-column property="activityPO.name" label="所属活动"/>
  23. <el-table-column label="姓名">
  25.   <template #default="scope">
  27.     <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
  29.   </template>
  31. </el-table-column>
  33. <el-table-column property="appellationPO.typeValue" label="称呼"/>
  35. <el-table-column property="phone" label="手机" width="120"/>
  37. <el-table-column property="weixin" label="微信" width="120"/>
  39. <el-table-column property="needLoanPO.typeValue" label="是否贷款"/>
  41. <el-table-column property="intentionStatePO.typeValue" label="意向状态"/>
  43. <el-table-column property="intentionProductPO.name" label="意向产品"/>
  45. <el-table-column property="statePO.typeValue" label="线索状态"/>
  47. <el-table-column property="sourcePO.typeValue" label="线索来源"/>
  49. <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
  51. <el-table-column label="操作" width="230">
  53.   <template #default="scope">
  55.     <el-button type="primary" @click="view(scope.row.id)" v-hasPermission="'clue:view'">详情</el-button>
  57.     <el-button type="success" @click="edit(scope.row.id)" v-hasPermission="'clue:edit'">编辑</el-button>
  59.     <el-button type="danger" @click="del(scope.row.id)" v-hasPermission="'clue:delete'">删除</el-button>
  61.   </template>
  63. </el-table-column>
</el-table> 
  1.     <el-pagination
  3.         background
  5.         layout="prev, pager, next"
  7.         :page-size="pageSize"
  9.         :total="total"
  11.         @prev-click="toPage"
  13.         @next-click="toPage"
  15.         @current-change="toPage"
  17.     />
  19. </div>
<el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center> 
  1. <el-upload
  3.     ref="uploadRef"
  5.     method="post"
  7.     :http-request="uploadFile"
  9.     :auto-upload="false">
  11.   <template #trigger>
  13.     <el-button type="primary">选择Excel文件</el-button>
  15.     &nbsp;仅支持后缀名为.xls或.xlsx的文件
  17.   </template>
  19.   <br/>
  21.   <br/>
  23.   <div>重要提示：</div>
  25.   <ul>
  27.     <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
  29.     <li>给定Excel文件的第一行将视为字段名；</li>
  31.     <li>请确认您的文件大小不超过50MB；</li>
  33.     <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
  35.     <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
  37.   </ul>
  39. </el-upload>
  41. <template #footer>
  43.   <span class="dialog-footer">
  45.     <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
  47.     <el-button class="ml-3" type="success" @click="submitUpload">上 传</el-button>
  49.   </span>
  51. </template>
</el-dialog> </template> <script> export default { name : "clubView", data(){ return { pageSize : 0, total : 0, clueList : [{ ownerPO : {}, activityPO : {}, appellationPO : {}, needLoanPO : {}, intentionStatePO : {}, intentionProductPO : {}, statePO : {}, sourcePO : {} }], importExcelDialogVisible : true, } }, methods : { handleSelectionChange(){ }, toPage(current){ } } } </script> <style> </style>
标签： vue.js elementui javascript
本文转载自: https://blog.csdn.net/2201_75960169/article/details/136195006
版权归原作者 旧约Alatus 所有， 如有侵权，请联系我们删除。
登录后发布评论

“CRM项目前端部分的线索管理页的基本布局和效果实现------CRM项目”的评论:

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

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

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

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

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

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

Kafka学习笔记

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

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