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-select v-model="query.source" placeholder="请选择">
          <el-option value="0" label="晋掌柜"></el-option>
          <el-option value="1" label="本地生活"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="query.status" placeholder="请选择">
          <el-option value="0" label="正式用户"></el-option>
          <el-option value="1" label="临时用户"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企微触达状态">
        <el-select v-model="query.deliveredStatus" placeholder="请选择">
          <el-option value="0" label="未触达"></el-option>
          <el-option value="1" label="已触达"></el-option>
        </el-select>
      </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  ">

      <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: "",

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

      },
      Result: {
        rows: [],
        total: 100,
        pageNum: 1,
        pageSize: 10,
      },
      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, },
        { prop: 'ownerUserId', label: '归属员工', minWidth: 160 }
      ],
      userList: [],
      userId: ''
    }
  },
  // 生命周期函数
  created() {
  },
  // 方法函数
  methods: {
    resetForm(){
      this.query= {
        name: "",//姓名
        phone: "",//手机号
        source: "",//来源
        status: "",//状态
        userCode: "",//用户id
        deliveredStatus: "",
      }
      this.findPage();
    },
    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, 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().then(res => {
        if (res.code == 200) {
          this.userList = res.data
        }
      })
    },
    //列表查询
    findPage() {
      let that = this
      api.userFindWeUserList({
          ...this.query,
          pageNum: this.Result.pageNum,
          pageSize: this.Result.pageSize
      }).then((res) => {
        if (res.code == 200) {
          that.Result = {
            rows: res.rows,
            total: res.total,
              pageSize: res.pageSize,
              pageNum: res.pageNum
          }
        }
      })
    },
    // 同步用户
    syncUser() {

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