juipvue/src/components/user/index.vue

<template>
  <div v-loading="loading">
    <div class="heior_box">
      <el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加会员</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="showUpdateMoney">资金转移</el-button>
      <div class="search-box">
        <el-select size="small" v-model="searchModel.schemeId" placeholder="请选择">
          <el-option
            v-for="item in productDiscounts"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id">
          </el-option>
        </el-select>
        <el-input v-model="searchModel.keyWord" placeholder="请输入会员号/名称" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="retData.Data" size="medium" :height="$getHeight(100)" row-key="Id" border>
      <!-- <el-table-column prop="LoginCode" label="会员号" width="120px"></el-table-column> -->
      <!-- <el-table-column prop="Name" label="名称"></el-table-column> -->
      <el-table-column prop="LoginCode" label="会员号" width="120px">
        <template slot-scope="scope"> 
          <phoneHide :text="scope.row.LoginCode"></phoneHide>
        </template>
      </el-table-column>
      <el-table-column prop="CreateTime" label="注册时间" width="160px"></el-table-column>
      <el-table-column prop="CreateType" label="注册方式" :formatter="formatterCreateType" width="109px"></el-table-column>
      <!-- <el-table-column prop="ProductAccountCount" label="账号总数"></el-table-column>
      <el-table-column prop="ExpiredProductAccountCount" label="过期数"></el-table-column>
      <el-table-column prop="ExpiredProductAccountCount" label="未过期数"></el-table-column>-->
      <!-- <el-table-column prop="ConsumeAmount" label="消费总额"></el-table-column> -->
      <el-table-column prop="RestAmount" label="余额"></el-table-column>
      <el-table-column prop="ju_money" label="H币"></el-table-column>
      <el-table-column prop="discount" label="折扣"></el-table-column>
      <el-table-column prop="RestAmount" label="测试限额/领用数">
        <template slot-scope="scope">        
          {{scope.row.TestCountLimit==0?'3':scope.row.TestCountLimit}}/{{scope.row.UseTestCount==0?'--':scope.row.UseTestCount}}
        </template>
      </el-table-column>
      <el-table-column prop="ManagerName" label="客户经理"></el-table-column>
      <el-table-column prop="Name" label="姓名"></el-table-column>
      <el-table-column prop="id_code" label="身份证号"></el-table-column>
      <el-table-column prop="is_verify" label="实名状态"></el-table-column>
      <el-table-column label="是否代理" >
        <template slot-scope="scope">
        <el-tooltip content="请先查看是否在代理商管理添加" placement="top">
          <el-switch
            v-model="scope.row.is_agent"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="isagent(scope.row)"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="400px">
        <template slot-scope="scope">
          <span class="handel cursor edit" @click="showUpdateTest(scope.row)">设置测试</span>
          <span class="handel cursor edit" @click="showAmount(scope.row,1)" v-if="IsRoot">充值</span>
          <span class="handel cursor edit" @click="showAmount(scope.row,2)">扣款</span>
          <router-link :to="{name:'account',query:{userId:scope.row.Id}}">
            <span class="handel cursor edit">账号</span>
          </router-link>
          <router-link :to="{name:'userprice',query:{id:scope.row.Id}}">
            <span class="handel cursor edit">专项价</span>
          </router-link>
           <span class="handel cursor edit" @click="showUserPrice(scope.row)">折扣</span>
          <span class="handel cursor edit" @click="edit(scope.row)">编辑</span>
          <span class="handel cursor edit" @click="showAmountDetail(scope.row)">明细</span>
          <el-popover @show="showHandle(scope.row)" placement="bottom" trigger="hover" width="180">
            <div class="popover_box">
              <span>QQ号：{{scope.row.QQ||'--'}}</span>
              <span>微信：{{scope.row.Wx||'--'}}</span>
              <span>淘宝：{{scope.row.TaoBao||'--'}}</span>
              <span>邮箱:{{scope.row.Email||'--'}}</span>
            </div>
            <span class="handel cursor more" slot="reference">更多</span>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>

    <el-dialog title="会员维护" :visible.sync="showDialog" width="400px">
      <el-form :model="userModel" :rules="rules" ref="inputUserForm" label-width="80px">
        <el-form-item prop="LoginCode" label="登录名称">
          <el-input v-model="userModel.LoginCode" :disabled="optype==2" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Password" label="密码">
          <el-input v-model="userModel.Password" show-password size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Phone" label="手机号">
          <el-input v-model="userModel.Phone" size="small"></el-input>
        </el-form-item>
                <el-form-item prop="QQ" label="QQ号">
          <el-input v-model="userModel.QQ" size="small"></el-input>
        </el-form-item>
                <el-form-item prop="Wx" label="微信">
          <el-input v-model="userModel.Wx" size="small"></el-input>
        </el-form-item>
                <el-form-item prop="TaoBao" label="淘宝">
          <el-input v-model="userModel.TaoBao" size="small"></el-input>
        </el-form-item>
                       <el-form-item prop="Email" label="邮箱">
          <el-input v-model="userModel.Email" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Remark" label="备注">
          <el-input v-model="userModel.Remark" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputUserForm')">取 消</el-button>
        <el-button type="primary" @click="save('inputUserForm')">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="amountModel.opAmountType==1?'充值':'扣费'"
      :visible.sync="amountModel.showAmountDialog"
      width="300px"
    >
      <el-form :model="amountModel" :rules="amountRules" ref="inputAmountForm" label-width="80px">
        <el-form-item prop="rest" label="当前余额">
          <el-input v-model="amountModel.rest" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item prop="amount" :label="amountModel.opAmountType==1?'充值金额':'扣费金额'">
          <el-input v-model="amountModel.amount" size="small" type="number"></el-input>
        </el-form-item>
        <el-form-item prop="attchInfo" label="备注">
          <el-input v-model="amountModel.attchInfo" size="small" ></el-input>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputAmountForm')">取 消</el-button>
        <el-button type="primary" @click="updateAmount('inputAmountForm')">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="测试限额设置" :visible.sync="showTestDialog" width="300px">
      <el-form :model="testLimitModel" ref="inputTestForm" label-width="80px">
        <el-form-item prop="limit" label="限制次数">
          <el-input v-model="testLimitModel.limit" size="small" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputTestForm')">取 消</el-button>
        <el-button type="primary" @click="updateTestLimit()">确定</el-button>
      </span>
    </el-dialog>

    <!-- 用户折扣价格 -->
    <el-dialog title="设置会员折扣" :visible.sync="showPriceDialog" width="300px">

      <el-row>
        <el-col :span="8">
          选择折扣：
        </el-col>
        <el-col :span="16">
          <el-select size="small" v-model="currentDiscount.schemeId" placeholder="请选择">
          <el-option
            v-for="item in productDiscounts"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id">
          </el-option>
        </el-select>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showPriceDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateDiscount()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="资金转移" :visible.sync="showMoneyDialog" width="369px">
      <el-form label-width="100px">
        <el-form-item prop="luser" label="被转移会员">
          <el-input v-model="moneyChaneg.luser" size="small" type="text"></el-input>
        </el-form-item>
        <el-form-item prop="ruser" label="转移对象">
          <el-input v-model="moneyChaneg.ruser" size="small" type="text"></el-input>
        </el-form-item>
        <el-form-item prop="money" label="转移金额">
          <el-input v-model="moneyChaneg.money" size="small" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMoneyDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateMoney()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="资金明细" :visible.sync="showDetailDialog" width="500px">
      <el-table
        :data="detailAmountData"
        size="medium"
        :height="$getHeight(300)"
        row-key="Id"
        border
      >
        <el-table-column prop="ScoreTypeName" label="资金项目"></el-table-column>
        <el-table-column prop="ScoreValue" label="金额"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "userIndex",
  components: {
    cutTip: () => import("@/components/common/cutTip"),
    phoneHide: () => import("@/components/common/phonehide")
  },
  data() {
    return {
      isRoot:false,
      loading: false,
      showDialog: false,
      showTestDialog: false,
      showPriceDialog: false,
      showDetailDialog: false,
      showMoneyDialog:false,
      currentDiscount:{
        schemeId:null,
        userId:null,
      },
      productDiscounts:[],
      optype: 1, //1:添加 2：编辑
      userModel: {
        LoginCode: "",
        Phone: "",
        Password: "",
        Remark: ""
      },
      userPrice: {
        user_id: null,
        user_discount: null
      },
      amountModel: {
        rest: 0,
        amount: 0,
        opAmountType: 1, ////1:充值 2：扣款
        showAmountDialog: false,
        attchInfo:''
      },
      testLimitModel: {
        userId: 0,
        limit: 3
      },
      retData: { TotalCount: 0, Data: [] },
      searchModel: {
        PageIndex: 1,
        schemeId:null,
        keyWord: ""
      },
      rules: {
        LoginCode: [this.$vaild.required("登录名称")],
        Phone: [this.$vaild.required("手机号")],
        // Password: [this.$vaild.required("密码")]
      },
      amountRules: {
        // amount: [{ type: 'number', message: '金额必须为数字值'}],
      },
      moneyChaneg: {
        luser:'',
        ruser:'',
        money:''
      },
      detailAmountData: [],
      formatterCreateType(row, column, cellValue, index) {
        switch (cellValue) {
          case '1':
            return "管理员添加";
          case '2':
            return "用户注册";
          case '3':
            return "淘宝注册";
          default:
            return cellValue
        }
        return "";
      }
    };
  },
  created () {
    this.$store.commit('setCurrentNav', '用户管理>>会员管理')
    var currentUser = this.$local.getUserByCache()
    this.IsRoot = currentUser.Manager.IsRootUser
    this.get()

    // eslint-disable-next-line camelcase
    let user_info = this.$local.getUserByCache().Manager.RealName
    this.$api.post(this.$api.phpURL + 'logs/index/clickVipInfo', {
      user: user_info,
      operation: '点击客户管理',
      record: '查询客户信息列表'
    }).then(res => {})
  },
  methods: {
    search(){
      this.searchModel.PageIndex=1;
      this.get();
    },
    get() {
      this.$api.get(this.$api.phpURL + "user/user/getList", this.searchModel).then(res => {
        this.retData = res;
      });
      //获取折扣
       this.$api
        .get("course/v1/scheme/page")
        .then(res => {
          res.Data.unshift({
            'Id':-1,
            'Name':'专项优惠'
          });
          this.productDiscounts= res.Data;     
        });
    },
    del(item) {
      var that = this;
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this.$api.post("baseinfo/v1/user/Delete?id=" + item.Id).then(res => {
          that.get();
        });
      });
    },
    add() {
      this.showDialog = true;
      this.optype = 1;
    },
    edit(item) {
      this.showDialog = true;
      this.optype = 2;
      this.userModel = clone(item);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.showDialog = false;
      this.amountModel.showAmountDialog = false;
      this.showTestDialog = false;
    },
    save(formName) {
      this.userModel.LoginCode = this.userModel.LoginCode.trim()
      this.$refs[formName].validate(valid => {
        if (!valid) return;
        if (this.optype == 1) {
          this.$api.post(this.$api.phpURL + "user/user/addUser", this.userModel).then(res => {
            this.resetForm("inputUserForm");
            this.get();
          });
        } else {
          this.$api.post("baseinfo/v1/user/put", this.userModel).then(res => {
            this.resetForm("inputUserForm");
            this.get();
          });
        }
      });
    },
    showAmount(item, type) {
      this.amountModel.rest = item.RestAmount;
      this.amountModel.opAmountType = type;
      this.amountModel.showAmountDialog = true;
      this.amountModel.UserId = item.Id;
    },
    updateAmount(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return;
        this.$api
          .post("baseinfo/v1/user/UpdateAmount", this.amountModel)
          .then(res => {
            this.resetForm("inputAmountForm");
            this.get();
          });
      });
    },
    showUpdateTest(item) {
      this.showTestDialog = true;
      this.testLimitModel.UserId = item.Id;
      this.testLimitModel.limit = item.TestCountLimit;
    },
    showUpdateMoney(){
      this.showMoneyDialog = true;
    },
    updateMoney(){
      this.$api
        .post(this.$api.phpURL + "user/user/moneyChange", this.moneyChaneg)
        .then(res => {
          this.showMoneyDialog = false;
        });
    },
    updateTestLimit() {
      this.$api
        .post(this.$api.phpURL + "user/user/testCount", this.testLimitModel)
        .then(res => {
          this.resetForm("inputTestForm");
          this.get();
        });
    },
    showAmountDetail(item) {
      this.showDetailDialog = true;
      this.$api
        .get("baseinfo/v1/user/AmountDetail?userId=" + item.Id)
        .then(res => {
          this.detailAmountData = res.Data
        });
    },
    showHandle (r) {
      // eslint-disable-next-line camelcase
      let user_info = this.$local.getUserByCache().Manager.RealName
      this.$api.post(this.$api.phpURL + 'logs/index/hoveInfo', {
        user: user_info,
        operation: '点击客户信息会员价',
        record: '查看会员的产品价格',
        info: r.LoginCode
      }).then(res => {})
    },
    isagent(r){
      this.$api.post(this.$api.phpURL + "user/user/isagent", r).then(res => {
            
      });
    },
    showUserPrice(r){
      this.showPriceDialog = true
      this.currentDiscount.userId = r.Id
      
    },
    updateDiscount(){
      let user_info = this.$local.getUserByCache().Manager.RealName
      this.$api.post(this.$api.phpURL + 'logs/index/clickInfo', {
        user: user_info,
        operation: '更改折扣',
        record: '更改为'+this.currentDiscount.schemeId,
        userid: this.currentDiscount.userId
      }).then(res => {})
      this.showPriceDialog = false
      this.$api.post(this.$api.phpURL + "user/user/setUserDiscount", this.currentDiscount).then(res => {
        this.currentDiscount.schemeId = ''
        this.currentDiscount.userId = ''
        this.get();
      });
      
      
    },
    dataExport () {
      this.$api.getDownloadFile('/baseinfo/v1/user/Export')
      // eslint-disable-next-line camelcase
      let user_info = this.$local.getUserByCache().Manager.RealName
      this.$api.post(this.$api.phpURL + 'logs/index/export', {
        user: user_info,
        operation: '点击导出所有客户信息',
        record: '导出所有客户信息列表',
        info: '本次点击时间之前所有客户数据'
      }).then(res => {})
    }
  }
}
</script>
<style scoped>
</style>