循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理

GetGrantedFunctionsByUser(id) { // 获取用户权限列表
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

<el-form ref="searchForm" :model="searchForm" label-width="80" :inline="true">
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="searchForm.creationTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item label="用户名" prop="UserName">
        <el-input v-model="searchForm.UserName" />
      </el-form-item>
      <el-form-item label="手机" prop="PhoneNumber">
        <el-input v-model="searchForm.PhoneNumber" />
      </el-form-item>
    </el-form>

pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

searchForm: { // 查询表单
        UserName: '',
        PhoneNumber: '',
        creationTime: ''
      },

created() { // 页面加载后，加载列表数据
    this.getlist()
  },

getlist() { // 列表数据获取
      var CreationTimeStart = ''
      if (this.searchForm.creationTime && this.searchForm.creationTime.length > 0) {
        CreationTimeStart = this.parseTime(this.searchForm.creationTime[0], '{y}-{m}-{d}')
      }
      var CreationTimeEnd = ''
      if (this.searchForm.creationTime && this.searchForm.creationTime.length > 1) {
        CreationTimeEnd = this.parseTime(this.searchForm.creationTime[1], '{y}-{m}-{d}')
      }
      var param = { // 构造常规的分页查询条件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,
        // 过滤条件
        UserName: this.searchForm.UserName,
        PhoneNumber: this.searchForm.PhoneNumber,
        CreationTimeStart: CreationTimeStart,
        CreationTimeEnd: CreationTimeEnd
      };
      // 获取列表，绑定到模型上，并修改分页数量
      this.listLoading = true
      user.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })
    },
    search() { // 查询列表处理
      this.pageinfo.pageindex = 1;// 重置为第一页=
      this.getlist()
    },

// 获取列表，绑定到模型上，并修改分页数量
      this.listLoading = true
      user.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })

<el-table-column align="center" label="账号激活" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isActive === true" type="success" effect="dark">已激活</el-tag>
          <el-tag v-else type="danger" effect="dark">未激活</el-tag>
        </template>
      </el-table-column>

<el-table-column align="center" label="创建时间" width="120" prop="creationTime" :formatter="dateFormat" />

dateFormat(row, column, cellValue) {
      // this.parseTime是在main.js中的全局挂载函数
      return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d}') : '' // 完整格式：{y}-{m}-{d} {h}-{i}-{s}
    },
    timeFormat(row, column, cellValue) {
      // this.parseTime是在main.js中的全局挂载函数
      return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d} {h}:{i}:{s}') : '' // 完整格式：{y}-{m}-{d} {h}-{i}-{s}
    }

<el-table-column align="center" label="操作" width="190">
        <template scope="scope">
          <el-row>
            <el-tooltip effect="light" content="查看" placement="top-start">
              <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="编辑" placement="top-start">
              <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="删除" placement="top-start">
              <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="重置密码" placement="top-start">
              <el-button icon="el-icon-setting" type="warning" circle size="mini" @click="showSetPass(scope.row.id)" />
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>

<div class="block" style="height:70px;">
      <el-pagination
        :current-page="pageinfo.pageindex"
        :page-size="pageinfo.pagesize"
        :total="pageinfo.total"
        :page-sizes="[10,20,30,40]"
        layout="total, sizes, prev, pager, next"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>

viewForm: { // 查看表单
        id: '',
        userName: '',
        surname: '',
        name: '',
        emailAddress: '',
        phoneNumber: '',
        ouNames: ''
      },

showView(id) { // 显示查看对话框处理
      var param = { id: id }
      user.Get(param).then(data => {
        // console.log(data.result)
        Object.assign(this.viewForm, data.result);
        this.getOuName(id).then(result => {
          this.viewForm.ouNames = result
        })
      })
      this.getFunctionsByUser(id)
      this.isView = true
    },

saveEdit() { // 保存数据处理
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          // 保存数据
          const form = this.editForm
          user.Update(form).then(data => {
            // console.log(data)
            if (data.success) {
              // 提示信息
              this.msgSuccess('更新成功!')
              // 刷新数据
              this.getlist()
            } else {
              this.msgError('更新失败：' + data.error)
            }
            this.$refs['editForm'].resetFields()
            // 重置窗口状态
            this.closeDialog()
          })
        }
      })
    },