孙向锦 / SunvoteEducation

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

    <div class="app-container">
      <div class="btm-group">
        <el-button type="primary" @click="accountdialog=true">新增账号</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="角色：">
            <el-select v-model="form.role" style="width:100px" size="small" placeholder="请选择角色">
              <el-option label="全部" value="" />
              <el-option label="教师" value="teacher" />
              <el-option label="班主任" value="bzr" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号：">
            <el-input v-model="form.account" size="small" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input v-model="form.name" size="small" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="form.state" style="width:100px;" size="small" placeholder="请选择状态">
              <el-option label="全部" value="" />
              <el-option label="正常" value="normal" />
              <el-option label="禁用" value="disable" />
            </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
          prop="role"
          label="角色"
        />
        <el-table-column
          prop="account"
          label="账号"
        />
        <el-table-column
          prop="name"
          label="姓名"
        />
        <el-table-column
          prop="sex"
          label="性别"
        />
        <el-table-column
          prop="code"
          label="授权码"
        />
        <el-table-column
          prop="state"
          label="状态"
        />
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="success" size="small" icon="el-ump-bofang" circle @click="enable(scope)" />
            <el-button type="primary" size="small" icon="el-ump-yuechi" circle @click="enable(scope)" />
            <el-button type="primary" size="small" icon="el-icon-edit-outline" circle @click="enable(scope)" />
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="enable(scope)" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--添加账号-->
    <el-dialog
      title="账号信息"
      :visible.sync="accountdialog"
      width="30%"
    >
      <el-form ref="account" :model="account" label-width="100px" style="margin-top:30px;">
        <el-form-item label="用户角色">
          <el-select v-model="account.role" style="width:300px;" placeholder="请选择">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dec }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="account.account" style="width:300px;" placeholder="请输入账号" />
          <p class="password">初始密码统一为123456</p>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="account.name" style="width:300px;" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="性别">
          <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="科目">
          <el-select v-model="account.object" style="width:300px;" placeholder="请选择">
            <el-option value="0" label="语文" />
            <el-option value="1" label="数学" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="account.remark" style="width:300px;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="accountdialog = false">取 消</el-button>
        <el-button type="primary" @click="accountdialog = false">保 存</el-button>
      </span>
    </el-dialog>
    <!--批量导入-->
    <el-dialog
      title="批量导入用户"
      :visible.sync="importdialog"
      width="30%"
    >
      <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 { getList } from '@/api/table'
import Dec from '@/components/Dec'

export default {
  components: {
    Dec
  },
  data() {
    return {
      list: null,
      listLoading: false,
      accountdialog: false,
      importdialog: false,
      content: '新增与管理班主任或任课老师账号',
      roles: [
        { id: 0, label: '任课老师', dec: '无班级管理权限' },
        { id: 1, label: '班主任', dec: '有班级管理权限' }
      ],
      form: {
        role: '',
        account: '',
        name: '',
        state: ''
      },
      tableData: [
        { role: '教师', account: 'zhangsan', name: '赵旭岚', sex: '女', code: '2322', state: '正常' }
      ],
      multipleSelection: [],
      account: { role: '', account: '' }

    }
  },
  created() {
    // this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    search() {},
    clear() {},
    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: 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>