tjshop/shop/static/manager/src.b/components/page/AddManageUser.vue

<template>
  <div class="page">
    <div class="title">
      <el-tag type="danger" class="alert">
        <strong>注意:</strong>&nbsp;&nbsp;&nbsp;&nbsp;您添加的用户必须是已注册的用户，如果还还没有注册请先
        <a
          href="http://testuc.pacsonline.cn/#/reg"
          target="_black"
        >注册</a>
      </el-tag>
    </div>

    <div class="dataform" v-bind:class="{hidden:step!=1}">
      <el-tag class="alert">第一步:输入手机号/用户名查询用户</el-tag>
      <el-input v-model="search" placeholder="请输入手机号/用户名" size="small"></el-input>
      <div class="next">
        <el-button type="primary" @click="goBack" size="mini">取消</el-button>
        <el-button type="primary" @click="searchUser" size="mini">下一步</el-button>
      </div>
    </div>
    <div class="dataform" v-bind:class="{hidden:step!=2}">
      <el-tag class="alert">第二步:选择用户</el-tag>
      <el-table :data="items">
        <el-table-column label="选择">
          <template slot-scope="scope">
            <el-radio v-model="userid" :label="scope.row.userid">&nbsp</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="用户名称" prop="name"></el-table-column>
        <el-table-column label="用户手机号" prop="phone"></el-table-column>
        <el-table-column label="身份证" prop="idcard"></el-table-column>
      </el-table>
      <div class="next">
        <el-button type="primary" @click="up" size="mini">上一步</el-button>
        <el-button type="primary" @click="save" size="mini">完成</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      step: 1,
      search: "",
      items: [],
      userid: false
    };
  },
  methods: {
    searchUser: function() {
      if (this.search.length == 0) {
        return;
      }
      this.$http.sarchUsers({ search: this.search }, this).then(res => {
        if (res.code === 0) {
          this.items = res.obj;
          this.step = this.step + 1;
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    up: function() {
      this.step = this.step - 1;
    },
    save: function() {
      let that = this;
      if (this.userid) {
        this.items.forEach(it => {
          if (it.userid === this.userid) {
            var params = {
              uid: it.userid,
              uname: it.name,
              uphone: it.phone
            };
            this.$http.addMUser(params, this).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1000,
                  onClose: function() {
                    that.goBack();
                  }
                });
              }
            });
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.title {
  margin-bottom: 20px;
}
.alert {
  /* width: 500px; */
}
.hidden {
  display: none;
}
.next {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.page {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.dataform {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.dataform .alert {
  margin-bottom: 20px;
  width: 205px;
}
.dataform .el-input {
  width: 205px;
}
.dataform .next {
  width: 140px;
}
</style>