Browse Source

客户资料

liuhj 2 years ago
parent
commit
cbdb16c671
1 changed files with 365 additions and 67 deletions
  1. 365 67
      src/components/materials/Customerdata.vue

+ 365 - 67
src/components/materials/Customerdata.vue

@@ -1,30 +1,71 @@
 <template>
     <div v-loading="fullscreenLoading">
-        <div class="group-list">
-            <div class="group-title">
-                <div>团组列表</div>
-                <div class="group-box">
-                    <el-select v-model="value" clearable placeholder="请选择" @change="filterStatus(value)">
-                        <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                        </el-option>
-                    </el-select>
-                    <el-input
-                    style="width:200px;"
-                    @input="Inquireclick()"
-                    placeholder="请输入查询内容"
-                    v-model="input"
-                    clearable>
-                    </el-input>
-                    <el-button @click="addgroup()" type="primary">新增团组</el-button>
+        <div class="customer-list">
+            <div class="title">客户资料</div>
+            <div class="customer-title">
+                <div class="logotype-box">
+                    <div class="logotype-li">
+                        <div><label>预计出团:</label> <span>10</span></div>
+                        <div><label>预计出团总量:</label> <span>100</span></div>
+                    </div>
+                    <div class="logotype-li">
+                        <div><label>已出团:</label> <span>40</span></div>
+                        <div><label>已出团总量:</label> <span>456</span></div>
+                    </div>
+                </div>
+                <div class="customer-box">
+                    <el-form ref="form" :model="form" label-width="80px">
+                        <div>
+                            <el-form-item label="负责人">
+                                <el-select v-model="form.region" placeholder="请选择活动区域">
+                                    <el-option label="区域一" value="shanghai"></el-option>
+                                    <el-option label="区域二" value="beijing"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="省 域">
+                                <el-select v-model="form.region" placeholder="请选择活动区域">
+                                    <el-option label="区域一" value="shanghai"></el-option>
+                                    <el-option label="区域二" value="beijing"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="客户级别">
+                                <el-select v-model="form.region" placeholder="请选择活动区域">
+                                    <el-option label="区域一" value="shanghai"></el-option>
+                                    <el-option label="区域二" value="beijing"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </div>
+                        <div style="margin-top: 10px;">
+                            <el-form-item label="客户类别">
+                                <el-select v-model="form.region" placeholder="请选择活动区域">
+                                    <el-option label="区域一" value="shanghai"></el-option>
+                                    <el-option label="区域二" value="beijing"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="业务分类">
+                                <el-select v-model="form.region" placeholder="请选择活动区域">
+                                    <el-option label="区域一" value="shanghai"></el-option>
+                                    <el-option label="区域二" value="beijing"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <div style="display: flex;">
+                                <el-form-item label="查 询">
+                                    <el-input
+                                    @input="Inquireclick()"
+                                    placeholder="请输入查询内容"
+                                    v-model="input"
+                                    clearable>
+                                    </el-input>
+                                </el-form-item>
+                                <el-button style="margin-left: 10px;" @click="addgroup()" type="primary">新 建</el-button>
+                            </div>
+                        </div>
+                    </el-form>
                 </div>
             </div>
             <template>
                 <el-table
-                :data="groupDatas.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                :data="customerArr.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                 border
                 style="width: 100%">
                     <el-table-column
@@ -36,61 +77,61 @@
                         </template>
                     </el-table-column>
                     <el-table-column
-                        prop="tourCode"
-                        width="100"
-                        label="团 号">
+                        prop="flats"
+                        width="150"
+                        label="单位">
+                    </el-table-column>
+                    <el-table-column
+                        prop="contact"
+                        label="联系人"
+                        width="100">
+                    </el-table-column>
+                    <el-table-column
+                        prop="post"
+                        label="职位"
+                        width="100">
                     </el-table-column>
-                    <!-- <el-table-column
-                        width="100" 
-                        prop="salesQuoteNo"
-                        label="销售报价号">
-                    </el-table-column> -->
                     <el-table-column
-                        prop="teamType"
-                        label="团组类型"
+                        prop="cellphone"
+                        label="手机"
                         width="150">
                     </el-table-column>
-                    <!-- <el-table-column
-                        prop="teamLev"
-                        label="级 别"
-                        width="80">
-                    </el-table-column> -->
                     <el-table-column
-                        prop="teamName"
-                        label="团队名称"
-                        >
+                        prop="landline"
+                        label="座机"
+                        width="120">
                     </el-table-column>
                     <el-table-column
-                        prop="clientName"
-                        label="客户名称"
+                        prop="urban"
+                        label="所在城市"
                         width="100">
                     </el-table-column>
                     <el-table-column
-                        prop="clientUnit"
-                        label="客户单位">
+                        prop="weight"
+                        label="权重"
+                        width="50">
                     </el-table-column>
                     <el-table-column
-                        prop="visitDate"
-                        :formatter="filteryear"
-                        label="出访时间"
-                        width="100">
+                        prop="attribution"
+                        label="业务归属"
+                        width="200">
                     </el-table-column>
                     <el-table-column
-                        prop="visitDays"
-                        label="出访天数"
-                        width="80">
+                        prop="charge"
+                        label="负责人">
                     </el-table-column>
                     <el-table-column
-                        prop="visitPNumber"
-                        label="出访人数"
+                        prop="expected"
+                        label="预计出团"
                         width="80">
                     </el-table-column>
                     <el-table-column
-                        prop="jietuanOperator"
-                        label="接团操作人"
-                        width="110">
+                        prop="Toured"
+                        label="已出团"
+                        width="80">
                     </el-table-column>
-                    <el-table-column label="操作">
+                    <el-table-column label="操作"
+                    width="150">
                         <template slot-scope="scope">
                           <el-button
                             size="mini"
@@ -111,17 +152,246 @@
                     :page-sizes="[10,12,15,20]" 
                     :page-size="pageSize" 
                     layout="total, sizes, prev, pager, next" 
-                    :total="groupDatas.length">
+                    :total="customerArr.length">
                 </el-pagination>
             </div>
         </div>
     </div>
 </template>
 <script>
-import { co, el } from '@fullcalendar/core/internal-common';
 export default {
     data() {
         return {
+            form: {
+                region: '',
+            },
+            customerArr:[
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                },
+                {
+                    flats:'四川大学',
+                    contact:'张嗣杰',
+                    post:'国合与交流处 处长',
+                    cellphone:'181-0819-8891',
+                    landline:'028-85403072',
+                    urban:'成都 武侯区',
+                    birthday:'',
+                    weight:'A',
+                    attribution:'',
+                    charge:'',
+                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
+                    expected:'4',
+                    Toured:''
+                }
+            ],
             options: [
                 {
                     value: '0',
@@ -141,7 +411,7 @@ export default {
             ],
             groupDatass:[],
             currentPage: 1, // 当前页码
-            pageSize: 12 ,// 每页的数据条数
+            pageSize: 10 ,// 每页的数据条数
             input:'',
             token:'',
             fullscreenLoading:false,
@@ -372,33 +642,61 @@ export default {
 }
 </script>
 <style>
-    .group-list{
+    .customer-list{
         background-color: #fff;
         padding: 10px;
         box-shadow: 0 0 5px #0005;
         border-radius: 10px;
     }
-    .group-title{
-        display: flex;
+    .customer-list .title{
         font-size: 17px;
         font-weight:600 ;
         color: #555;
-        margin-top: 8px;
-        margin-bottom: 2px;
+    }
+    .customer-title{
+        display: flex;
+        margin-bottom: 10px;
         justify-content: space-between;
         align-items: center;
     }
-    .group-box{
+    .customer-box{
         display: flex;
+        width: 61.7%;
     }
-    .group-box>button{
+    .customer-box .el-form-item{
+        margin-bottom:0px;
+    }
+    .customer-box>button{
         margin-left: 10px;
         padding: 8px 20px;
     }
     .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
         text-align: center;
     }
-    .group-box>.el-input{
+    .customer-box>.el-input{
         margin-left: 10px;
     }
+    .customer-box .el-form>div{
+        display: flex;
+    }
+    .logotype-li{
+        display: flex;
+        line-height: 42px;
+    }
+    .logotype-li>div{
+        width: 50%;
+    }
+    .logotype-box{
+        width: 37%;
+    }
+    .logotype-li label{
+        display: inline-block;
+        width: 120px;
+        text-align:right ;
+    }
+    .logotype-li span{
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+    }
 </style>