web-test/src/views/adminCenter/vipInfo/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="leftTop"> <span>|</span> <span>VIP用户</span> </el-col>
        <el-col :span="24" class="info">
          <el-col :span="24" class="add">
            <el-button type="primary" size="mini" @click="add()">添加用户</el-button>
          </el-col>
          <el-col :span="24">
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="vipname" label="姓名" align="center"> </el-table-column>
              <el-table-column prop="vipphone" label="联系电话" align="center"> </el-table-column>
              <el-table-column prop="company" label="单位名称" align="center"> </el-table-column>
              <el-table-column prop="email" label="email" align="center"> </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="editViP(scope.row)">
                    修改
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-col :span="24" class="page">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="pageSize"
              >
              </el-pagination>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-col :span="24">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off" maxlength="11" placeholder="请输入手机号" :disabled="disabled"></el-input>
          </el-form-item>
          <!-- <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.passwd" autocomplete="off" placeholder="请输入密码" show-password :disabled="disabled"></el-input>
          </el-form-item> -->
          <el-form-item label="单位名称" :label-width="formLabelWidth">
            <el-input v-model="form.company" autocomplete="off" placeholder="请输入单位名称"></el-input>
          </el-form-item>
          <el-form-item label="email" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off" placeholder="请输入email"></el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <el-input v-model="form.content" type="textarea" autocomplete="off" placeholder="请输入简介"></el-input>
          </el-form-item>
          <el-col :span="24" style="text-align:center">
            <el-button @click="closeBtn">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
          </el-col>
        </el-form>
      </el-col>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: apply } = createNamespacedHelpers('apply');
const { mapActions: authUser } = createNamespacedHelpers('authUser');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      vipuserList: [], //查询数据
      currentPage: 1, //默认数据1
      pageSize: 10, //每页显示数据数量
      origin: [], //分割数据
      list: [], //显示数据列表
      total: 0,
      dock_id: '', //对接会id
      room_id: '', //房间id
      dialogVisible: false,
      form: {},
      disabled: false,
      formLabelWidth: '120px',
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...dock({ dockquery: 'query', dockFetch: 'fetch', dockUpdate: 'update', dockupdateVip: 'updateVip', createvipuser: 'createvipuser' }),
    ...apply({ applyUpdate: 'update' }),
    ...authUser({ authUserQuery: 'query', authUserCreate: 'create', authUserUpdate: 'update' }),
    async search() {
      let res = await this.dockFetch(this.user.uid);
      if (this.$checkRes(res)) {
        this.$set(this, `vipuserList`, res.data.vipuser);
        this.$set(this, `dock_id`, res.data.id);
        this.$set(this, `room_id`, res.data.room_id);
        this.$set(this, `total`, res.data.vipuser.length);
      }
    },
    searchvip(page = 1) {
      this.$set(this, `list`, this.origin[page - 1]);
    },
    handleCurrentChange(currentPage) {
      this.searchPage(currentPage);
    },
    // 添加用户
    add() {
      this.dialogVisible = true;
      this.disabled = false;
    },
    // 取消
    closeBtn() {
      this.form = {};
      this.dialogVisible = false;
    },
    // 确定
    async onSubmit() {
      if (this.form.id) {
        const res = await this.authUserUpdate(this.form);
        if (this.$checkRes(res)) {
          let data = {
            vipname: this.form.name,
            vipphone: this.form.phone,
            company: this.form.company,
            email: this.form.email,
            content: this.form.content,
            role: '8',
            status: '1',
            id: this.dock_id,
            vipid: this.form.vipid,
          };
          const arr = await this.dockupdateVip(data);
          if (this.$checkRes(arr)) {
            this.$message({
              message: '信息修改成功',
              type: 'success',
            });
            this.dialogVisible = false;
            this.back();
          }
        }
      } else {
        const authUserList = await this.authUserQuery();
        let r = authUserList.data.some(f => f.phone == this.form.phone);
        if (r) {
          this.$message({
            message: '手机号已经被注册，请重新输入',
            type: 'warning',
          });
        } else {
          this.form.role = '8';
          this.form.passwd = this.room_id;
          const res = await this.authUserCreate(this.form);
          if (this.$checkRes(res)) {
            let data = {
              vipname: this.form.name,
              vipphone: this.form.phone,
              passwd: this.room_id,
              company: this.form.company,
              email: this.form.email,
              content: this.form.content,
              role: this.form.role,
              uid: res.data.id,
              id: this.dock_id,
            };
            const arr = await this.createvipuser(data);
            if (this.$checkRes(arr)) {
              this.dialogVisible = false;
              this.search();
            }
          }
        }
      }
    },
    // 修改
    editViP(data) {
      this.dialogVisible = true;
      let newDate = {};
      newDate.name = data.vipname;
      newDate.phone = data.vipphone;
      newDate.company = data.company;
      newDate.email = data.email;
      newDate.content = data.content;
      newDate.id = data.uid;
      newDate.vipid = data._id;
      this.disabled = true;
      this.$set(this, `form`, newDate);
    },
    // 取消
    handleClose(done) {
      done();
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    vipuserList: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
        this.searchvip();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
.info {
  padding: 0 40px 0 10px;
  .add {
    text-align: right;
    padding: 10px 0;
  }
}
.page {
  text-align: right;
  padding: 10px 0;
}
/deep/.el-dialog__body {
  min-height: 400px;
}
</style>