孙向锦 / 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>