开发批量添加用户

project/src/components/marketingGuest/batchAddFriend/addFriend/importCustomer.vue

+<template>
+
+</template>
+
+<script>
+export default {
+  name: "importCustomer"
+}
+</script>
+
+<style scoped>
+
+</style>

project/src/components/marketingGuest/batchAddFriend/addFriend/importRecord.vue

+<template>
+
+</template>
+
+<script>
+export default {
+  name: "importRecord"
+}
+</script>
+
+<style scoped>
+
+</style>

project/src/components/marketingGuest/batchAddFriend/addFriend/index.vue

+<template>
+  <div>
+    <div class="operatArea">
+      <el-radio-group v-model="status">
+        <el-radio v-for="s in statusArrs" :label="s.label" :key="s.label">{{s.name}}</el-radio>
+      </el-radio-group>
+      <div class="btnArea">
+        <self-input :hasLabel="false" label_name="电话/备注名" @inputChange='(val)=>{input_keyword = val;init(1)}'></self-input>
+        <el-button class="lMar10" type="primary" plain size="small" @click="importCustomer()">导入客户</el-button>
+        <el-button type="primary" plain size="small" @click="importRecord()">导入记录</el-button>
+        <el-button type="primary" plain size="small" @click="setting()">设置</el-button>
+
+        <el-button v-if="status!==0" type="primary" plain size="small" @click="batchDele()">批量删除</el-button>
+        <el-button v-if="status==2 || status==3" type="primary" plain size="small" @click="batchRemind()">批量提醒</el-button>
+        <el-button v-if="status==1" type="primary" plain size="small" @click="batchAllot()">批量分配</el-button>
+      </div>
+    </div>
+
+    <!-- table -->
+    <el-table ref="multipleTable"
+              :height='height'
+              :data="tableData"
+              tooltip-effect="dark"
+              style="width: 100%"
+              @selection-change="handleSelectionChange"
+              v-loading="loading">
+      <el-table-column width="30px" type="selection" v-if="status!==0"></el-table-column>
+      <el-table-column prop="send_type" label="电话号码" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column label="备注" align="center">
+        <template slot-scope="scope">
+          <div>{{scope.row.send_type == 1 ? '立即发送':scope.row.send_type == 2?'定时发送':''}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="send_time" min-width="120" label="导入时间" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column label="客户标签" align="center">
+        <div class="customerServiceTagBox biaoqian">
+          -
+<!--          <div class="customerServiceTag" v-for="(item,index) in scope.row.tag_list" :key="index+'biaoqian'">{{item}}</div>-->
+        </div>
+      </el-table-column>
+      <el-table-column show-overflow-tooltip align="center">
+        <template #header>
+          添加状态
+          <el-tooltip class="disinblock" placement="top" effect="light">
+            <div slot="content" class="f12">
+              <div>待分配：未分配跟进成员的客户</div>
+              <div>待添加：成员未添加的客户</div>
+              <div>待通过：已发送申请，等待通过的客户</div>
+              <div>已添加：成功添加的客户</div>
+            </div>
+            <i class="el-icon-question"></i>
+          </el-tooltip>
+        </template>
+        <template slot-scope="scope">
+          <span v-if="scope.row.enable==-2" class="c-F03F5C">已删除</span>
+          <span v-if="scope.row.enable==-1" class="c-666">发送失败</span>
+          <span v-if="scope.row.enable==0" class="c-F03F5C">禁用</span>
+          <span v-if="scope.row.enable==1" class="c-FFB055">待发送</span>
+          <span v-if="scope.row.enable==2" class="c-448AFF">正在发送中</span>
+          <span v-if="scope.row.enable==3" class="c-58BCA6">发送完成</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="send_time" min-width="120" label="添加时间" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column prop="send_fail" label="操作人" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column label="分配客服" show-overflow-tooltip align="center">
+        <template slot-scope="scope">
+          <div class="customerServiceTagBox">
+            <div class="customerServiceTag"><i class="el-icon-user-solid"></i> {{ scope.row.creator }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="estimated_user" label="分配次数" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <div>
+
+            <div class="c-00B38A pointer" @click="goDetail(scope.row.rule_id)">详情</div>
+            <div class="c-00B38A pointer" @click="allotCustomer(scope.row.rule_id)">分配</div>
+            <div class="c-00B38A pointer" @click="remindCustomer(scope.row.rule_id,scope.row.enable)">提醒</div>
+            <div class="c-00B38A pointer" @click="deleCustomer(scope.row.rule_id)">删除</div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+
+    <!--el-dialog-->
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="30%">
+      <div class="f14 line21">{{dialogMsg}}</div>
+      <div v-if="dialogTitle == '分配'">
+        <self-customerservice title='选择员工' width="300px" :afferent_users='user_id_list' @customerDefine="(val)=>{user_id_list=val;}"></self-customerservice>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+import importCustomer from "./importCustomer";
+import importRecord from "./importRecord";
+import setting from "./setting";
+export default {
+  name: "addFriend",
+  components:{selfInput,selfCustomerservice,importCustomer,importRecord,setting},
+  data(){
+    return {
+      loading:false,
+      dialogVisible:false,
+      status:0,
+      statusArrs:[
+        {
+          name:'全部',
+          label:0
+        },
+        {
+          name:'待分配',
+          label:1
+        },
+        {
+          name:'待添加',
+          label:2
+        },
+        {
+          name:'待通过',
+          label:3
+        },
+        {
+          name:'已添加',
+          label:4
+        }
+      ],
+      input_keyword:'',
+      tableData:[],
+      height:'',
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      dialogTitle:'',
+      dialogMsg:'',
+      user_id_list:[],
+      multipleChoosePhones: []
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 250 > 400 ? document.documentElement.clientHeight - 250 : 400
+    this.init(1)
+  },
+  methods:{
+    noChooseCustomeTips(){//没有选择客户提示
+      if( this.multipleChoosePhones&& this.multipleChoosePhones.length==0){
+        this.$message({
+          type: 'error',
+          message: '请选择客户!'
+        });
+        return
+      }
+    },
+    handleSelectionChange(val){
+      this.multipleChoosePhones = val
+      console.log(this.multipleChoosePhones);
+    },
+    batchDele(){
+      this.noChooseCustomeTips()
+      this.$alert('确定删除选择的客户?', '提示', {
+        cancelButtonText: '取消',
+        confirmButtonText: '确定',
+      }).then(()=>{
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      })
+    },
+    batchRemind(){
+      this.noChooseCustomeTips()
+      this.$alert('确认后将会给选择的成员发送提醒通知，是否发送？', '提示', {
+        cancelButtonText: '取消',
+        confirmButtonText: '确定',
+      }).then(()=>{
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      })
+    },
+    batchAllot(){
+      this.noChooseCustomeTips()
+      this.dialogTitle = '分配'
+      this.dialogMsg = ''
+      this.dialogVisible = true
+    },
+    goDetail(){
+
+    },
+    allotCustomer(){
+      this.dialogTitle = '分配'
+      this.dialogMsg = ''
+      this.user_id_list = []
+      this.dialogVisible = true
+    },
+    remindCustomer(id,status){
+      this.dialogTitle = '提醒'
+      this.dialogMsg = `如果员工长时间未${status == 1 ? '添加客户' : '通过好友申请可再次添加'}，可通过企微助手再次提醒员工${status == 1 ? '添加' : '跟进'}客户，是否确认发送？`
+      this.dialogVisible = true
+
+    },
+    deleCustomer(){
+      this.$alert('是否确定删除此客户', '提示', {
+        cancelButtonText: '取消',
+        confirmButtonText: '确定',
+      }).then(()=>{
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      })
+    },
+    importCustomer(){
+
+    },
+    importRecord(){
+
+    },
+    setting(){
+
+    },
+    init (page, type) {
+      this.page = page ? page : this.page;
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.massMsg_lists, {
+        params: {
+          creator_id: this.user_id_list,
+          send_time_start: this.add_date_start ? this.add_date_start + ' 00:00:00' : '',
+          send_time_end: this.add_date_end ? this.$day_format(this.$date_compatible(this.add_date_end + ' 24:00:00')) : '',
+          page: this.page,
+          page_size: this.page_size
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          this.tableData = res.rst.data;
+          this.total = res.rst.pageInfo.total;
+          this.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.operatArea{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  .btnArea{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+</style>

project/src/components/marketingGuest/batchAddFriend/addFriend/setting.vue

+<template>
+    <div>
+      <el-dialog
+        title="设置"
+        :visible.sync="dialogVisible"
+        width="40%">
+
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+          <el-tab-pane label="自动提醒" name="first">
+            <div class="flex-align-center">
+              <div class="f14 fWeight600 rMar22">未分配提醒</div>
+              <el-switch
+              v-model="noAllotVal"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+            </el-switch>
+            </div>
+            <div v-if="noAllotVal"></div>
+
+            <div class="splitLine"></div>
+          </el-tab-pane>
+          <el-tab-pane label="自动回收" name="second">
+
+          </el-tab-pane>
+        </el-tabs>
+
+
+
+        <span slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+          <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "setting",
+  data(){
+    return{
+      dialogVisible:true,
+      activeName:'first',
+      noAllotVal:false
+    }
+  },
+  methods:{
+    handleClick(){
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.splitLine{
+  width: 100%;
+  border: 1px solid #ddd;
+}
+</style>

project/src/components/marketingGuest/batchAddFriend/dataPreview/index.vue

+<template>
+
+</template>
+
+<script>
+export default {
+  name: "dataPreview"
+}
+</script>
+
+<style scoped>
+
+</style>

project/src/components/marketingGuest/batchAddFriend/index.vue

 <template>
-
+  <div>
+    <div class="topTagBox flex">
+      <div class="left flex-align-center">
+        <div :class="['tagItem',tagType==1?'tagItem_active':'']" @click="changeType(1);">添加客户</div>
+        <div :class="['tagItem',tagType==2?'tagItem_active':'']" @click="changeType(2);">数据总览</div>
+      </div>
+    </div>
+    <addFriend v-if="tagType==1"></addFriend>
+    <dataPreview v-if="tagType==2"></dataPreview>
+  </div>
 </template>
 
 <script>
+import addFriend from './addFriend/index.vue'
+import dataPreview from './dataPreview/index.vue'
 export default {
-  name: "index"
+  name: "index",
+  components:{addFriend,dataPreview},
+  data(){
+    return {
+      tagType:1
+    }
+  },
+  methods:{
+    changeType(type){
+      this.tagType = type
+    }
+  }
 }
 </script>