index.vue

<template>
  <div>
    <el-row class="mt30">
      <el-col :span="4" class="ml50">
        <el-select v-model="groupname" placeholder="请选择" class="el-sel br0">
          <el-option v-for="item in groupData" :key="item.ugrp_unid" :label="item.name" :value="item.ugrp_unid">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="">
        <el-input type="text" class="bl0 br0" v-model="username" placeholder="姓名"/>
      </el-col>
      <el-col :span="4" class="">
        <el-input type="text" class="bra" v-model="mphone" placeholder="电话"/>
      </el-col>
      <el-col :span="4" class="">
        <el-button type="primary" class="them-big-btn set-btn" icon="el-icon-search" @click="userGroupSearch">查询</el-button>
        <el-button type="primary" class="them-big-btn set-btn ml10" @click="adduserGroup" icon="el-icon-plus">添加</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="grustableData" style="width:98%;margin:20px auto;" class="mt20">
        <el-table-column type="index" width=""></el-table-column>
        <el-table-column prop="name" label="姓名" width=""></el-table-column>
        <el-table-column prop="sex" :formatter="setSex" label="性别" width=""></el-table-column>
        <el-table-column prop="mphone" label="联系电话" width=""></el-table-column>
        <el-table-column label="操作" align="center" width="">
          <template slot-scope="scope" align="center">
            <div class="tab-btn-box">
              <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑成员</span>
              <span class="table-btn dengers" size="" @click="handleDelete(scope.$index, scope.row)">删除成员</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <!-- 添加 -->
      <el-dialog :title="userdialogmsg" :visible.sync="adduserDialog" width="30%">
        <div>
          <el-form ref="userGroupform" :model="form" label-width="80px">
            <el-form-item label="部门：">
              <el-select v-model="form.group_name" placeholder="请选择活动区域" disabled="disabled" class="el-sel">
                <el-option v-for="(item,index) in groupData" :label="item.name" :key="index" :value="item.ugrp_unid"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="电话：" prop="mphone">
              <el-input v-model="form.mphone"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
              <el-radio-group v-model="form.sex">
                <el-radio label="1" >男</el-radio>
                <el-radio label="2" >女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="adduserDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveGroupUser">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
    <el-row>
      <!-- 删除 -->
      <el-dialog title="删除" :visible.sync="deleteuserDialog" size="tiny">
        <div>
          确定要删除该条记录
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteuserDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveGroupUser">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
    <el-row>
      <div class="block">
        <el-pagination class="pages flr mr20" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        groupname: '',
        username: '',
        mphone: '',
        groupData: [],
        grustableData: [],
        adduserDialog: false,
        deleteuserDialog: false,
        userdialogmsg: '添加成员',
        form: {
          norm_type: "employee",
          user_type: "user",
          group_name: '',
          name: '',
          sex: '',
          mphone: '',
          fax: '',
          email: "",
          is_active: true
        },
        page: {
          offset: 0,
          limit: 20,
          total: 0,
          currentPage: 0
        },
      }
    },
    methods: {
      //查询
      userGroupSearch() {
        this.getUser();
      },
      adduserGroup() {
        this.form = {
            norm_type: "employee",
            user_type: "user",
            group_name: '',
            name: '',
            sex: '',
            mphone: '',
            fax: '',
            email: "",
            is_active: true
          },
          this.form.group_name = this.groupname;
        this.adduserDialog = true;
      },
      handleEdit(index, row) { //编辑
        this.userdialogmsg = '编辑成员信息'
        this.form = row;
        this.form.group_name = this.groupname;
        this.adduserDialog = true;
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.delete(this.API.auth.delUserToGroup(this.groupname,row.user_unid), {}).then((
            response) => {
            this.adduserDialog = false;
            this.delUser(row)
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      delUser(row){
         this.axios.post(this.API.auth.edituser(row.user_unid), {
              is_active: false
            }).then((response) =>{
              this.getUser();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            });
      },
      saveGroupUser() {
        this.adduserDialog = false;
        var url = '';
        if (this.form.user_unid) {
          //编辑
          url = this.API.auth.edituser(this.form.user_unid)
          this.axios.post(url, this.form).then((response)=> {
            this.adduserDialog = false;
            this.$message({
              type: 'info',
              message: '修改成功!'
            });
            this.getUser()
          });
        } else {
          //添加
          url = this.API.auth.user
          this.axios.post(url, this.form).then((response)=> {
            this.adduserDialog = false;
            this.addUserToGroups(response.data.user_unid);
          });
        }
      },
      addUserToGroups(userid) { // 将一个用户添加进一个组
        this.axios.post(this.API.auth.userTogroup(this.groupname), {
          "user_unid": userid,
        }).then( (response) => {
          this.$message({
            type: 'success',
            message: '创建成功!'
          });
          this.adduserDialog = false;
          this.getUser();
        });
      },
      setSex(row, column, cellValue) {
        var sex = '';
        if (cellValue == '1')
          sex = '男'
        if (cellValue == '2')
          sex = '女'
        return sex
      },
      getGroup(callback) {
        this.axios.get(this.API.auth.ugrps, {
          params: {
            offset: this.page.offset,
            limit: 1000,
            is_active: true,
          }
        }).then((response) => {
          this.groupData = response.data.list_data;
          this.groupname = response.data.list_data[0].ugrp_unid
          this.getUser();
        });
      },
      getUser() {
        this.axios.get(this.API.auth.userTogroup(this.groupname), {
          params: {
            offset: this.page.offset,
            limit: this.page.limit,
            name__like: this.username,
            mphone__like: this.mphone,
            is_active: true,
          }
        }).then((response) => {
          this.grustableData = response.data.list_data;
          this.page.total = response.data.total_num;
        });
      },
      handleSizeChange(val) {},
      handleCurrentChange(val) {
        this.page.offset = (val - 1) * this.page.limit;
        this.currentPage = val;
        this.getUser()
      }
    },
    created() {
      this.getGroup();
    }
  }

</script>
<style lang="stylus" scoped>
  .white-color
   color #fff

</style>