airconditioner/sources/client/vrv-platform/src/views/user/list.vue

<template>
  <div id="user">
    <el-main>
      <div style="margin-bottom: 10px">
        <el-button size="medium" icon="el-icon-back" type="text">返回</el-button>
        <span style="margin-left: 20px; font-size: 18px">用户列表</span>
      </div>

      <el-button size="medium" icon="el-icon-search" style="margin-bottom: 15px" @click="search(searchFormData)">
        查询
      </el-button>
      <el-button size="medium" icon="el-icon-plus" @click="showAdd" style="margin-left: 0">新增</el-button>


      <div style="padding: 10px;background-color: white">
      <el-form :inline="true" :model="searchFormData" style="background-color: white;">
        <el-form-item label="姓名">
          <el-input placeholder="姓名" size="mini" v-model="searchFormData.realname"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input placeholder="账号" size="mini" v-model="searchFormData.account"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input placeholder="手机号" size="mini" v-model="searchFormData.phone"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input placeholder="角色" size="mini" v-model="searchFormData.roleFlag"></el-input>
        </el-form-item>
        <el-form-item label="运营商编号">
          <el-input placeholder="运营商编号" size="mini" v-model="searchFormData.operatorNumber"></el-input>
        </el-form-item>


        <el-dialog title="用户" :visible.sync="dialogFormVisible">
          <el-form label-position="left" :model="formData">
            <el-form-item label="姓名">
              <el-input v-model="formData.realname"></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="formData.account"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formData.password"></el-input>
            </el-form-item>
            <el-form-item label="绑定角色">
              <el-input v-model="formData.roleFlag"></el-input>
            </el-form-item>
            <el-form-item label="绑定运营商">
              <el-input v-model="formData.operatorNumber"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="addOrEditMehtond()">确 定</el-button>
          </div>
        </el-dialog>

      </el-form>


      <el-table :data="tableData">
        <el-table-column  type="selection"></el-table-column>
        <el-table-column prop="realname" label="姓名"></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="roleFlag" label="角色"></el-table-column>
        <el-table-column prop="operatorNumber" label="运营商编号"></el-table-column>


        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="showEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</el-button>
          </template>
        </el-table-column>

      </el-table>


      <el-pagination
          style="margin-top: 15px;text-align: center"
        background
        layout="prev, pager, next"
        :page-size="pager.pageSize"
        :current-page="pager.pageIndex"
        :total="pager.itemCount"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      </div>

    </el-main>
  </div>

</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      api: {
        list: this.$api.user.list,
        delete: this.$api.user.delete,
        add: this.$api.user.add,
        update: this.$api.user.update,
      },

      addOrEdit: 1,

      dialogFormVisible: false,

      pager: {
        pageSize: 2,
        pageIndex: 1,
        itemCount: 0,
      },

      tableData:
        [{
          realname: '',
          account: '',
          phone: '',
          password: '',

          roleFlag: '',
          operatorNumber: '',

        }],
      formData: {
        realname: '',
        account: '',
        phone: '',
        password: '',

        roleFlag: '',
        operatorNumber: '',
      },
      searchFormData:
        {
          realname: '',
          account: '',
          phone: '',

          roleFlag: '',
          operatorNumber: '',
        }
    }
  },

  created: function () {
    this.loadData();
  },

  methods: {
    //切换页码
    handleCurrentChange(index) {
      this.loadData(index)
    },

    loadData(index) {
      const vm = this;
      vm.$http.get(vm.api.list,  {
        params: {
          pageSize: 3,
          pageIndex: index ? index : 1,

          realname: this.searchFormData.realname,
          account: this.searchFormData.account,
          phone: this.searchFormData.phone,
          roleFlag: this.searchFormData.roleFlag,
          operatorNumber: this.searchFormData.operatorNumber,
        }
      })
        .then((response) => {
          // vm.paper = response.data.data.paper;
          //console.log(response.data.data);

          vm.pager = response.data.data.pager

          vm.tableData = response.data.data.users;
        })
    },
    search() {
      //console.log(this.searchFormData)
      this.loadData();
    },
    showAdd() {
      this.dialogFormVisible = true;

      this.formData.realname = '';
      this.formData.account = '';
      this.formData.roleFlag = '';
      this.formData.operatorNumber = '';
      this.formData.phone = '';
      this.formData.password = '';

      this.addOrEdit = 1
    },

    showEdit(row) {

      console.log(row)

      this.dialogFormVisible = true;

      this.formData = row

      this.addOrEdit = 2
    },


    addOrEditMehtond() {
      const vm = this;
      if (this.addOrEdit == 2) {
        vm.$http.get(vm.api.update,  {
          params: {
            code: this.formData.code,
            realname: this.formData.realname,
            account: this.formData.account,
            roleFlag: this.formData.roleFlag,
            operatorNumber: this.formData.operatorNumber,
            phone: this.formData.phone,
            password: this.formData.password,
          }
        })
          .then((response) => {
            console.log(response)

            if (response.data.status == 200) {

              this.$message({
                type: 'success',
                showClose: true,
                message: response.data.desc
              })
            }

            this.dialogFormVisible = false;

            this.loadData();

          })
          .catch(() => {
          });
      }

      if (this.addOrEdit == 1) {
        vm.$http.get(vm.api.add,  {
          params: {
            realname: this.formData.realname,
            account: this.formData.account,
            roleFlag: this.formData.roleFlag,
            operatorNumber: this.formData.operatorNumber,
            phone: this.formData.phone,
            password: this.formData.password,
          }
        })
          .then((response) => {
            if (response.data.status == 200) {

              this.dialogFormVisible = false;

              this.$message({
                type: 'success',
                showClose: true,
                message: response.data.desc
              })

              this.loadData();
            }
          })
      }
    },

    del(row) {
      const vm = this;
      this.$confirm('确认删除', '提示', {
        type: 'warning'
      }).then(() => {
        vm.$http.get(vm.api.delete,  {
          params: {
            code: row.code,
          }
        })
          .then((response) => {
            console.log(response)
            if (response.data.status == 200) {
              this.$message({
                type: 'success',
                showClose: true,
                message: response.data.desc
              })

            }
            this.loadData();
          })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            showClose: true,
            message: '取消删除'
          })
        });
    },
    cancel() {
      this.$message({
        message: '操作取消',
        showClose: true,
        type: 'info'
      });

      this.dialogFormVisible = false;

    },

  }
}
</script>


<style scoped>
.el-form-item {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
}
</style>