<template>
  <div>
    <el-card>
      <div style="padding: 10px;background-color:#F5F5F5">
        <el-input
          v-model="searchInput"
          class="input11"
          suffix-icon="el-icon-search"
          style="width: 200px;height: 50px"
          placeholder="用户ID/姓名"
          clearable
          @input="pageCurrent = 1;searchTable()"/>
        <el-select v-model="ClassName" style="width:180px" clearable class="select12" placeholder="请选择班组" @change="pageCurrent = 1;searchTable()">
          <el-option
            v-for="item in ClassNames"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="Role" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择角色" @change="pageCurrent = 1;searchTable()">
          <el-option
            v-for="item in Roles"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button class="button11" icon="el-icon-circle-plus-outline" style="margin-left: 20px" size="small" @click="addItem()">新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="tableHeader"
        :cell-style="tableCell"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        tooltip-effect="dark"
        style="width: 100%"
        height="580px"
        @sort-change="sortChange">
        <el-table-column align="left" label="用户ID" prop="用户ID" min-width="90" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <template>
              <span>{{ scope.row.用户ID }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column align="left" label="姓名" prop="姓名" min-width="90" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.姓名 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="用户密码" prop="密码" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.用户密码 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="角色名称" prop="角色" min-width="90" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.角色名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="班组" prop="班组" min-width="90" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.班组名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="岗位" prop="技能" min-width="90" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.技能" color="rgb(0,142,207)" size="mini" style="margin-top: 2px" >{{ scope.row.技能 }}</el-tag>
            <div v-else style="width: 100%;height: 25px"/>
          </template>
        </el-table-column>
        <el-table-column align="left" label="技能等级" prop="技能等级名称" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.技能等级名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="电话" prop="电话" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.电话 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="编辑" min-width="150">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="editItem(scope.row)"/>
            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 20px;">
        <el-pagination
          v-if="!loading"
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-dialog :visible.sync="editDialogFormVisible" :title="editTitle" width="700px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-position="top" label-width="120px" style="width: 100%;margin: 0;">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="UserID" label="用户ID">
              <el-input v-model="editForm.UserID" class="input2" size="small" style="width: 60%" clearable placeholder="编辑用户ID"/>
            </el-form-item>
            <el-form-item prop="UserPW" label="用户密码">
              <el-input v-model="editForm.UserPW" class="input2" size="small" style="width: 60%" clearable placeholder="编辑用户密码"/>
            </el-form-item>
            <el-form-item prop="ClassName" label="班组名称">
              <el-select v-model="editForm.ClassName" class="input2" size="small" style="width: 60%" clearable placeholder="请选择班组名称">
                <el-option
                  v-for="item in ClassNames"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item prop="Tel" label="电话">
              <el-input v-model.number="editForm.Tel" class="input2" size="small" style="width: 60%" clearable placeholder="请输入电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="Name" label="姓名">
              <el-input v-model="editForm.Name" class="input2" size="small" style="width: 60%" clearable placeholder="编辑姓名"/>
            </el-form-item>
            <el-form-item prop="" label="角色">
              <el-select v-model="editForm.Role" class="input2" size="small" style="width: 60%" clearable placeholder="请选择角色">
                <el-option
                  v-for="item in Roles"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item prop="Technology" label="技能">
              <el-select v-model="editForm.Technology" class="input2" size="small" style="width: 60%" clearable placeholder="请选择技能" @change="changeTec">
                <el-option
                  v-for="item in Technologys"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item prop="technologyLevel" label="技能等级">
              <el-select v-model="editForm.technologyLevel" :disabled="levelAbled" class="input2" size="small" style="width: 60%" clearable placeholder="请选择技能等级">
                <el-option
                  v-for="item in technologyLevels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div style="margin-left: 400px">
            <el-form-item >
              <el-button class="button11" @click="editSubmit('editForm')" >保存</el-button>
              <el-button class="button12" @click="editCallOff('editForm')">取消</el-button>
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="addDialogFormVisible" :title="addTitle" width="700px">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-position="top" label-width="120px" style="width: 100%;margin: 0">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户ID" prop="UserID">
              <el-input v-model="addForm.UserID" class="input2" size="small" style="width: 60%" clearable placeholder="编辑用户ID"/>
            </el-form-item>
            <el-form-item label="用户密码" prop="UserPW">
              <el-input v-model="addForm.UserPW" class="input2" size="small" style="width: 60%" clearable placeholder="编辑用户密码"/>
            </el-form-item>
            <el-form-item label="班组名称" prop="ClassName">
              <el-select v-model="addForm.ClassName" class="input2" size="small" style="width:60% " clearable placeholder="请选择班组名称">
                <el-option
                  v-for="item in addClassNames"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="电话" prop="Tel">
              <el-input v-model.number="addForm.Tel" class="input2" size="small" style="width: 60%" clearable placeholder="请输入电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="Name">
              <el-input v-model="addForm.Name" class="input2" size="small" style="width: 60%" clearable placeholder="编辑姓名"/>
            </el-form-item>
            <el-form-item label="角色" prop="Role">
              <el-select v-model="addForm.Role" class="input2" size="small" style="width:60% " clearable placeholder="请选择角色">
                <el-option
                  v-for="item in addRoles"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="技能" prop="Technology">
              <el-select v-model="addForm.Technology" class="input2" size="small" style="width:60% " clearable placeholder="请选择技能">
                <el-option
                  v-for="item in addTechnologys"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="技能等级名称" prop="technologyLevel">
              <el-select v-model="addForm.technologyLevel" class="input2" size="small" style="width:60% " clearable placeholder="请选择技能等级">
                <el-option
                  v-for="item in addTechnologyLevels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <div style="margin-left: 400px">
            <el-form-item >
              <el-button class="button12" @click="addSubmit('addForm')">保存</el-button>
              <el-button class="button11" @click="addCallOff('addForm')">取消</el-button>
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="DeleteDialogFormVisible" width="300px">
      <div style="margin-top:-90px;margin-left: 75px;margin-bottom: 40px;">
        <img :src="img" style="height: 75px;width: 100px;">
      </div>
      <span style="font-size: 30px;font-weight: 400;margin-left: 20px;">确实要删除吗？</span>
      <el-button class="button11" style="margin-top: 80px;margin-left:100px;" @click="deletesubmit()">是</el-button>
      <el-button class="button12" @click="deletecalloff">否</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { ExecDatabase } from '@/main'
import img from '@/assets/404_images/20.png'
export default {
  data() {
    return {
      img,
      searchInput: '',
      searchInput_check: '',
      tableData: [],
      loading: false,
      order: '', // 排序顺序
      addDialogFormVisible: false, // 修改弹框
      addTitle: '',
      addForm: {
        PeopleNum: '',
        UserID: '',
        UserPW: '',
        Role: '',
        Name: '',
        Tel: '',
        ClassName: '',
        Technology: '',
        technologyLevel: ''
      },
      addTechnologyLevels: [],
      addRules: {
        UserID: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
        UserPW: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
        Name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
      },
      addRoles: [],
      addTechnologys: [], // 技能组
      addClassNames: [], // 班组
      editDialogFormVisible: false, // 增加弹框
      editTitle: '',
      editForm: {
        PeopleNum: '',
        UserID: '',
        UserPW: '',
        Role: '',
        Name: '',
        Tel: '',
        ClassName: '',
        Technology: '',
        technologyLevel: ''
      },
      editRules: {
        UserID: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
        UserPW: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
        Name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
      },
      levelAbled: true,
      Roles: [],
      Role: '',
      Role_check: 0,
      Technologys: [], // 技能组
      technologyLevels: [], // 技能等级组
      ClassNames: [], // 班组
      ClassName: '', // 班组
      ClassName_check: 0,
      DeleteDialogFormVisible: false, // 删除弹框
      a: '', // 删除弹出框接人员代码的临时变量
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      pageCurrent: 1 // 后台获取页
    }
  },
  created() {
    this.searchTable()
    this.getClassNames()
    this.getRoles()
  },
  methods: {
    // 查询
    searchTable() {
      this.loading = true
      this.tableData = []
      this.searchInput ? this.searchInput_check = 1 : this.searchInput_check = 0
      this.ClassName ? this.ClassName_check = 1 : this.ClassName_check = 0
      this.Role ? this.Role_check = 1 : this.Role_check = 0
      const param = []
      param[0] = ['关键词', this.searchInput]
      param[1] = ['关键词_check', this.searchInput_check]
      param[2] = ['排序方式', this.order]
      param[3] = ['PageSize', this.pageSize]
      param[4] = ['PageCurrent', this.pageCurrent]
      param[5] = ['PageCount', '1111', 'int', '1']
      param[6] = ['ItemCount', '1111', 'int', '1']
      param[7] = ['班组', this.ClassName]
      param[8] = ['班组_check', this.ClassName_check]
      param[9] = ['角色', this.Role]
      param[10] = ['角色_check', this.Role_check]
      var Data = this.CreateData('11', '基础数据_人员管理_查询', param)
      ExecDatabase(Data).then(response => {
        this.tableData = []
        response.data.result.map(v => {
          this.tableData.push({
            人员代码: v.人员代码,
            用户ID: v.用户ID,
            姓名: v.姓名,
            班组名称: v.班组名称,
            班组代码: v.班组代码,
            用户密码: v.用户密码,
            角色编号: v.角色编号,
            角色名称: v.角色名称,
            技能: v.技能,
            技能代码: v.技能代码,
            电话: v.电话,
            技能等级代码: v.技能等级代码,
            技能等级名称: v.技能等级名称
          })
        })
        this.loading = false
        this.total = parseInt(response.data.output[0].ItemCount)
      })
    },
    // 修改table的样式
    tableHeader() {
      return 'background-color: rgb(250, 250, 250);' +
        'border-bottom: 3px rgb(170, 170, 170) solid;' +
        'color: rgb(35, 35, 35);' +
        'font-weight: 5000;' +
        'padding: 10px 5px'
    },
    tableCell() {
      return 'border-color: #E8E8E8;padding: 0px'
    },
    // 表格正序倒序
    sortChange(column) {
      if (column.order === 'ascending') {
        this.order = column.prop + ' asc'
      } else if (column.order === 'descending') { this.order = column.prop + ' desc' } else {
        this.order = ''
      }
      this.searchTable()
    },
    // 增加表单
    addItem() {
      if (this.$refs['addForm'] !== undefined) {
        this.$refs['addForm'].resetFields()
      }
      this.addTitle = '增加维修员'
      this.addDialogFormVisible = true
      this.addForm.PeopleNum = ''
      this.addForm.UserID = ''
      this.addForm.Name = ''
      this.addForm.Tel = ''
      this.addForm.technologyLevel = ''
      this.addForm.ClassName = ''
      this.addForm.UserPW = ''
      this.addForm.Role = ''
      this.getAddTechnologys()
      this.getAddTechnologyLevels()
      this.getAddClassNames()
      this.getAddRoles()
    },
    getAddTechnologys() {
      this.addTechnologys = []
      var Data = this.CreateData('11', '基础数据_技能_查询')
      ExecDatabase(Data).then(response => {
        this.addTechnologys = []
        response.data.map(v => {
          this.addTechnologys.push({
            label: v.技能,
            value: v.技能代码
          })
        })
      })
    },
    getAddTechnologyLevels() {
      this.addTechnologyLevels = []
      var Data = this.CreateData('11', '基础数据_技能等级_查询')
      ExecDatabase(Data).then(response => {
        this.addTechnologyLevels = []
        response.data.map(v => {
          this.addTechnologyLevels.push({
            label: v.技能等级名称,
            value: v.技能等级代码
          })
        })
      })
    },
    getAddClassNames() {
      this.addClassNames = []
      var Data = this.CreateData('11', '基础数据_班组_查询')
      ExecDatabase(Data).then(response => {
        this.addClassNames = []
        response.data.map(v => {
          this.addClassNames.push({
            label: v.班组名称,
            value: v.班组代码
          })
        })
      })
    },
    getAddRoles() {
      this.addRoles = []
      var Data = this.CreateData('11', '基础数据_角色_查询')
      ExecDatabase(Data).then(response => {
        this.addRoles = []
        response.data.map(v => {
          this.addRoles.push({
            label: v.角色名称,
            value: v.角色编号
          })
        })
      })
    },
    // 增加确定
    addSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['用户ID', this.addForm.UserID]
          param[1] = ['姓名', this.addForm.Name]
          param[2] = ['电话', this.addForm.Tel]
          param[3] = ['班组代码', this.addForm.ClassName]
          param[4] = ['技能代码', this.addForm.Technology]
          param[5] = ['用户密码', this.addForm.UserPW]
          param[6] = ['角色编号', this.addForm.Role]
          param[7] = ['技能等级代码', this.addForm.technologyLevel]
          var Data = this.CreateData('12', '基础数据_人员管理_增加', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息增加成功',
                type: 'success'
              })
              this.pageCurrent = 1
              this.searchTable()
            } else {
              this.$message.error('信息增加失败')
            }
          })
          this.addDialogFormVisible = false
        } else {
          return false
        }
      })
    },
    // 增加取消
    addCallOff(formName) {
      this.addDialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 修改表单
    editItem(row) {
      if (this.$refs['editForm'] !== undefined) {
        this.$refs['editForm'].resetFields()
      }
      this.levelAbled = true
      this.editTitle = '维修员详情'
      this.editDialogFormVisible = true
      this.editForm.PeopleNum = row.人员代码
      this.editForm.UserID = row.用户ID
      this.editForm.UserPW = row.用户密码
      this.editForm.Role = row.角色编号
      this.editForm.Name = row.姓名
      this.editForm.Tel = row.电话
      this.editForm.ClassName = row.班组代码
      this.editForm.technologyLevel = row.技能等级代码
      this.editForm.Technology = row.技能代码
      if (this.editForm.Technology) {
        this.levelAbled = false
      }
      this.getTechnologys()
      this.getTechnologyLevels()
      this.getClassNames()
      this.getRoles()
    },
    changeTec() {
      if (this.editForm.Technology) {
        this.levelAbled = false
      }
    },
    getTechnologys() {
      this.Technologys = []
      var Data = this.CreateData('11', '基础数据_技能_查询')
      ExecDatabase(Data).then(response => {
        this.Technologys = []
        response.data.map(v => {
          this.Technologys.push({
            label: v.技能,
            value: v.技能代码
          })
        })
      })
    },
    getTechnologyLevels() {
      this.technologyLevels = []
      var Data = this.CreateData('11', '基础数据_技能等级_查询')
      ExecDatabase(Data).then(response => {
        this.technologyLevels = []
        response.data.map(v => {
          this.technologyLevels.push({
            label: v.技能等级名称,
            value: v.技能等级代码
          })
        })
      })
    },
    getClassNames() {
      this.ClassNames = []
      var Data = this.CreateData('11', '基础数据_班组_查询')
      ExecDatabase(Data).then(response => {
        this.ClassNames = []
        response.data.map(v => {
          this.ClassNames.push({
            label: v.班组名称,
            value: v.班组代码
          })
        })
      })
    },
    getRoles() {
      this.Roles = []
      var Data = this.CreateData('11', '基础数据_角色_查询')
      ExecDatabase(Data).then(response => {
        this.Roles = []
        response.data.map(v => {
          this.Roles.push({
            label: v.角色名称,
            value: v.角色编号
          })
        })
      })
    },
    // 修改确定
    editSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['用户ID', this.editForm.UserID]
          param[1] = ['姓名', this.editForm.Name]
          param[2] = ['电话', this.editForm.Tel]
          param[3] = ['班组代码', this.editForm.ClassName]
          param[4] = ['人员代码', this.editForm.PeopleNum]
          param[5] = ['技能代码', this.editForm.Technology]
          param[6] = ['角色编号', this.editForm.Role]
          param[7] = ['用户密码', this.editForm.UserPW]
          param[8] = ['技能等级代码', this.editForm.technologyLevel]
          var Data = this.CreateData('12', '基础数据_人员管理_修改', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息修改成功',
                type: 'success'
              })
              this.searchTable()
            } else {
              this.$message.error('信息修改失败')
            }
          })
          this.editDialogFormVisible = false
        } else {
          return false
        }
      })
    },
    // 修改取消
    editCallOff(formName) {
      this.editDialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    handleDelete(row) {
      this.DeleteDialogFormVisible = true
      this.a = row.人员代码
    },
    // 删除
    deletesubmit() {
      var param = []
      param[0] = ['人员代码', this.a]
      var Data = this.CreateData('12', '基础数据_人员管理_删除', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('删除成功')
          this.searchTable()
        } else {
          this.$message.error('删除失败')
        }
      })
      this.DeleteDialogFormVisible = false
    },
    deletecalloff() {
      this.DeleteDialogFormVisible = false
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    },
    // 分页暂时没用
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>
<style scoped>
  .el-tag {
    font-size: 14px;
    font-weight: bold;
    color: white;
    height: auto;
    line-height: 20px;
    padding: 0px 6px;
  }
  /*搜索框*/
  .input1 >>> .el-input__inner{
    height: 50px;
    border-radius: 0px;
  }
  /*只有下边框*/
  .input2 >>> .el-input__inner{
    height: 40px;
    border-radius: 0px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background: #ffffff;
  }
  .el-form-item {
    margin-bottom: 18px;
  }
</style>
<style>

</style>

