link-wechat-web-pc/src/views/customerManage/userSync/list.vue

<!-- 模板区域 -->
<template>
  <div>
    <!-- 模板内容 -->
    <el-form ref="queryForm" :inline="true" :model="query" label-width="100px" class="top-search">
      <el-form-item label="用户ID" >
        <el-input v-model="query.userCode" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名" >
        <el-input v-model="query.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号" >
        <el-input v-model="query.phone" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="用户来源" >
        <el-input v-model="query.source" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="用户状态" >
        <el-input v-model="query.status" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="企微触达状态" >
        <el-input v-model="query.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
        <!-- <el-button
          v-hasPermi="['customerManage:customer:export']"
          type="info"
          @click="exportCustomer"
          >导出列表</el-button
        > -->
      </el-form-item>
    </el-form>
    <div class="g-card  ">
      <div class="mid-action">
        <div style="margin-left: auto;">
          <span class="desc">最近同步：321313131231</span>
          <el-button class="ml10" type="primary" @click="syncUser">
            同步用户
          </el-button>
        </div>
      </div>
      <templateTable ref="commonTable" :operationWidth="200" :showOperation="true" :showBatchDelete="false"
        :data="Result" :columns="Columns" @findPage="findPage">
        <template slot="buttonSlot" slot-scope="{ row }">
          <el-button type="text" @click="viewDetails(row)">查看</el-button>
          <el-button type="text" v-if="row.ownerUserId" @click="transferUser(row)">转出</el-button>
          <el-button type="text" v-else @click="transferUser(row)">分配</el-button>
        </template>
      </templateTable>
    </div>
    <el-dialog title="选择员工" :visible.sync="transferUserShow" width="40%">
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="120px">
          <el-form-item label="选择员工" prop="labelName">
            <el-select v-model="form.labelName" placeholder="请选择，支持关键词搜索" clearable filterable>
              <el-option v-for="(item, index) in userList" :label="item.userName" :value="item.userId"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="transferUserShow = false">取 消</el-button>
        <el-button type="primary" @click="userOperation">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<!-- 行为区域 -->
<script>
import templateTable from "@/components/templateTable.vue";
import * as api from '@/api/customerManage/userSync'
import {transferOwner, userTransferOwner} from "@/api/customerManage/userSync";
export default {
  components: {
    templateTable
  },
  // 数据存放区域
  data() {
    return {
      transferUserShow: false,//转出弹窗
      //页面检索对象
      query: {
        name:"",//姓名
        phone:"",//手机号
        source:"",//来源
        status:"",//状态
        userCode:"",//用户id
        deliveredStatus:"",
        pageNum:1,
        pageSize:10,

      },
      form: {},//提交表单
      rules: {
        labelName: [
          {
            required: true,
            message: '请选择员工',
            trigger: 'chnage',
          },
        ],

      },
      Result: {
        rows: [],
        total: 100,
      },
      Columns: [
        { prop: "userCode", label: "用户ID", minWidth: 180, },
        { prop: "name", label: "用户姓名", minWidth: 160 },
        { prop: "sex", label: "性别", minWidth: 120,formatter: this.sexFormatter},
        { prop: "birthday", label: "生日", minWidth: 160 },
        { prop: "phone", label: "手机号", minWidth: 160,  },
        { prop: "source", label: "用户来源", minWidth: 160, formatter: this.sourceFormatter },
        { prop: "status", label: "用户状态", minWidth: 160, formatter: this.statusFormatter},
        { prop: "type", label: "用户类型", minWidth: 160, formatter: this.typeFormatter},
        { prop: "registerTime", label: "注册时间", minWidth: 160, },
        { prop: "deliveredStatus", label: "企微触达状态", minWidth: 160,formatter: this.deliveredStatusFormatter },
        // { prop: "registerTime", label: "添加时间", minWidth: 160, },
        { prop: "updateTime", label: "最近互动时间", minWidth: 160, },

      ],
      userList: [],
      userId: ''
    }
  },
  // 生命周期函数
  created() {
  },
  // 方法函数
  methods: {
    sexFormatter(row,column){
      return row.sex==0?'女':'男'
    },
    sourceFormatter(row,column){
      return row.source==0?'晋掌柜':'掌柜生活'
    },
    statusFormatter(row,column){
      return row.status==0?'正式用户':'临时用户'
    },
    typeFormatter(row,column){
      return row.type==0?'普通用户':''
    },
    deliveredStatusFormatter(row,column){
      return row.deliveredStatus==0?'未触达':'已触达'
    },
    // 查看详情
    viewDetails(row) {
      this.$router.push({
        path: 'userSyncDetail',
        query: { id: row.id },
      })
    },
    // 操作用户
    userOperation() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
            api.userTransferOwner(this.userId, Number(this.form.labelName)).then(res => {
                if(res.code == 200) {
                    this.$message.success(res.msg)
                }
                this.transferUserShow = false;
            })
        }
      })
    },
    // 用户转出弹窗
    transferUser(row) {
      this.transferUserShow = true;
      this.userId = row.id
      this.initUserList()
    },
    initUserList() {
        api.userList(localStorage.getItem('username')).then(res => {
            if(res.code == 200) {
                this.userList = res.data
            }
        })
    },
    //列表查询
    findPage() {
        let that = this
      api.userFindWeUserList(this.query).then((res)=>{
          if(res.code == 200) {
              that.Result = {
                  rows: res.rows,
                  total: res.total
              }
          }
      })
    },
    // 同步用户
    syncUser() {

    },
  },
  // 计算属性
  computed: {
  }
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped></style>