孙向锦 / SunvoteEducation

<template>
  <div>
    <Dec :content="content" />

    <div class="app-container">
      <div class="btm-group">
        <el-button type="primary" @click="add">新增账号</el-button>
        <el-button type="primary" @click="importdialog=true">批量导入</el-button>
        <el-button type="primary">批量导出</el-button>
        <el-button type="danger">批量删除</el-button>
      </div>
      <div class="select-group">
        <el-form ref="form" :inline="true" :model="form" label-width="60px">
          <el-form-item label="角色：" prop="role">
            <el-select v-model="form.role" style="width:100px" size="small" placeholder="请选择角色">
              <el-option label="全部" value="" />
              <el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号：" prop="account">
            <el-input v-model="form.account" size="small" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="form.name" size="small" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="状态：" prop="state">
            <el-select v-model="form.state" style="width:100px;" size="small" placeholder="请选择状态">
              <el-option label="全部" value="" />
              <el-option label="正常" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="clear">清除筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
        >
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
        />
        <el-table-column
          prop="username"
          label="账号"
        />
        <el-table-column
          prop="name"
          label="姓名"
        />
        <el-table-column
          prop="sex"
          label="性别"
        />
        <el-table-column
          prop="roleName"
          label="角色"
        />
        <el-table-column
          prop="enable"
          label="状态"
        >
          <template slot-scope="scope">
            {{ scope.row.enable==1?'正常':'禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button :type="scope.row.enable==1?'success':'warning'" size="small" :icon="scope.row.enable==1?'el-ump-bofang':'el-ump-zanting'" circle @click="enable(scope.row)" />
            <el-button type="primary" size="small" icon="el-ump-yuechi" circle @click="reset(scope.row)" />
            <el-button type="primary" size="small" icon="el-icon-edit-outline" circle @click="edit(scope.row)" />
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deluser(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--添加账号-->
    <el-dialog
      title="账号信息"
      :visible.sync="accountdialog"
    >
      <el-form ref="account" :model="account" label-width="100px" style="margin-top:30px;">
        <el-form-item label="用户角色" prop="role">
          <el-select v-model="account.role" style="width:300px;" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dec }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="account.username" style="width:300px;" placeholder="请输入账号" />
          <p class="password">初始密码统一为123456</p>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="account.name" style="width:300px;" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="account.sex" style="width:300px;" placeholder="请选择性别">
            <el-option value="0" label="男" />
            <el-option value="1" label="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="科目" prop="subjectId">
          <el-select v-model="account.subjectId" style="width:300px;" placeholder="请选择">
            <el-option v-for="(item,index) in subjectList" :key="index" :value="item.id" :label="item.cname" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="account.remark" style="width:300px;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
    <!--批量导入-->
    <el-dialog
      title="批量导入用户"
      :visible.sync="importdialog"
    >
      <p>第一步：下载模板并编辑完成用户的信息 <el-link type="primary"><i class="el-ump-xiazai" />下载导入模板</el-link></p>
      <p>第二步：上传编辑完成的模板文件，完成导入</p>
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
      >
        <el-button size="small" type="primary">选择文件并上传</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importdialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Dec from '@/components/Dec'
import { getUserList, searchUser, resetpass, enableUser } from '@/api/user'
import { getRoleList } from '@/api/role'
import { getSubjectList } from '@/api/subject'
import { add, deluser } from '@/api/teacher'
import { getuserinfo } from '@/utils/auth'

export default {
  components: {
    Dec
  },
  data() {
    return {
      list: null,
      dept: '',
      listLoading: false,
      accountdialog: false,
      importdialog: false,
      content: '新增与管理班主任或任课老师账号',
      roles: [
        { id: 0, label: '任课老师', dec: '无班级管理权限' },
        { id: 1, label: '班主任', dec: '有班级管理权限' }
      ],
      roleList: [],
      subjectList: [],
      form: {
        role: '',
        account: '',
        name: '',
        state: ''
      },
      tableData: [],

      multipleSelection: [],
      account: {
        role: '',
        username: '',
        name: '',
        sex: '',
        subjectId: '',
        marker: ''
      }

    }
  },
  created() {
    const userInfo =
    JSON.stringify(this.$store.state.user.userInfo === '{}')
      ? JSON.parse(getuserinfo())
      : JSON.parse(this.$store.state.user.userInfo)
    this.dept = userInfo.dept
    this.fetchData(userInfo.dept)
    this.getRoleList()
    this.getSubjectList()
  },
  methods: {
    fetchData(id) {
      this.listLoading = true
      getUserList(id).then(res => {
        console.log(res)
        this.tableData = res.data.data
      })
    },
    add() {
      this.accountdialog = true
    },
    save() {
      const param = {
        ...this.account,
        password: '123456',
        schoolId: this.dept
      }

      add(param).then(res => {
        if (res.code === 0) {
          this.fetchData(this.dept)
          this.accountdialog = false
        }
      })
    },
    close() {
      this.$refs.account.resetFields()
      this.accountdialog = false
    },
    deluser(row) {
      this.$confirm(`确认删除用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        deluser(row.id).then(res => {
          this.$message.success('删除成功')
          this.fetchData(this.dept)
        })
      })
    },
    search() {
      const param = {
        roleid: this.form.role,
        username: this.form.account,
        name: this.form.name,
        enable: this.form.state
      }
      searchUser(param).then(res => {
        this.tableData = res.data.data
      })
    },
    getRoleList() {
      getRoleList({ dept: this.dept }).then(res => {
        console.log(res)
        this.roleList = res.data
      })
    },
    getSubjectList() {
      getSubjectList().then(res => {
        console.log(res)
        this.subjectList = res.data
      })
    },
    clear() {
      this.$refs.form.resetFields()
    },
    reset(row) {
      this.$confirm(`<h3>密码重置后：</h3>
                      <p>·初始密码为：123456</p>
                      <p>·重置后首次登录，用户需主动修改密码</p>
`, '确认重置密码？', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        cancelButtonText: '取消'
      }).then(() => {
        const param = {
          id: row.id,
          password: '123456'
        }
        resetpass(param).then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '重置成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    },
    enable(row) {
      enableUser(row.id, 1 ^ row.enable).then(res => {
        console.log(res)
        this.fetchData(this.dept)
      })
    },
    edit(row) {
      this.accountdialog = true
      // this.$refs.account.resetFields()
      // this.$refs['account'].resetFields()
      this.account = {
        role: row.roleName,
        username: row.username,
        name: row.username,
        sex: row.sex,
        subject: row.subject,
        marker: row.marker
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }

  }
}
</script>
<style scoped>
  .app-container{
    max-width: 1700px;
    min-width: 1100px;
    background: #fff;
    margin:0 auto;
    margin-top:15px;
  }
  .btm-group{
    padding:5px;
    border-bottom: 1px solid #ccc;
  }
  .select-group{
    padding-top:20px;
  }
  .password{
    margin:0;
    font-size:12px;
    color:#888;
  }
</style>