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

2024-03-04 14:40:16 分类：前端 热度：55 评论： 0

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

<template>
    <el-button type="primary" class="btn">导入线索</el-button>
    <el-button type="su***ess" class="btn">导入线索(Excel)</el-button>
    <el-button type="danger" class="btn">批量删除</el-button>
    <el-table
      :data="clueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column property="ownerPO.name" label="负责人" width="120" />
    <el-table-column property="activityPO.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="appellationPO.typeValue" label="称呼"/>
    <el-table-column property="phone" label="手机" width="120"/>
    <el-table-column property="weixin" label="微信" width="120"/>
    <el-table-column property="needLoanPO.typeValue" label="是否贷款"/>
    <el-table-column property="intentionStatePO.typeValue" label="意向状态"/>
    <el-table-column property="intentionProductPO.name" label="意向产品"/>
    <el-table-column property="statePO.typeValue" label="线索状态"/>
    <el-table-column property="sourcePO.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)" v-hasPermission="'clue:view'">详情</el-button>
        <el-button type="su***ess" @click="edit(scope.row.id)" v-hasPermission="'clue:edit'">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)" v-hasPermission="'clue:delete'">删除</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>
    <el-upload
        ref="uploadRef"
        method="post"
        :http-request="uploadFile"
        :auto-upload="false">
      <template #trigger>
        <el-button type="primary">选择Excel文件</el-button>
        &nbsp;仅支持后缀名为.xls或.xlsx的文件
      </template>
      <br/>
      <br/>
      <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>
    </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>
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>

<template>

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

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

    <el-button type="danger" class="btn">批量删除</el-button>

    <el-table

      :data="clueList"

      style="width: 100%"

      @selection-change="handleSelectionChange">

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

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

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

    <el-table-column property="activityPO.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="appellationPO.typeValue" label="称呼"/>

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

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

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

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

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

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

    <el-table-column property="sourcePO.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)" v-hasPermission="'clue:view'">详情</el-button>

        <el-button type="su***ess" @click="edit(scope.row.id)" v-hasPermission="'clue:edit'">编辑</el-button>

        <el-button type="danger" @click="del(scope.row.id)" v-hasPermission="'clue:delete'">删除</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>

    <el-upload

        ref="uploadRef"

        method="post"

        :http-request="uploadFile"

        :auto-upload="false">

      <template #trigger>

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

        &nbsp;仅支持后缀名为.xls或.xlsx的文件

      </template>

      <br/>

      <br/>

      <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>

    </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>

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>

转载请说明出处内容投诉
CSS教程_站长资源网 » CRM项目前端部分的线索管理页的基本布局和效果实现------CRM项目
胡明阳

胡明阳

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买