<template>
  <div class="app-container mes-admin-page">
    <el-card>
      <div style="margin-top: 7px; margin-bottom: 7px">
        <el-input v-model="staffName" :placeholder="$t('workshopPersonnelRoleMana.staffName')" size="small" clearable style="width:200px"/>
        <el-select v-model="roleName" :placeholder="$t('workshopPersonnelRoleMana.roleName')" clearable size="small" style="width:200px;margin-left:10px">
          <el-option
            v-for="item in roleNames"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 10px" plain @click="searchData">{{ $t('workshopPersonnelRoleMana.search') }}</el-button>
        <el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" @click="handelAdd">{{ $t('workshopPersonnelRoleMana.add') }}</el-button>
      </div>
      <el-table :data="tableData" highlight-current-row stripe size="mini" height="630" border style="width: 70%">
        <el-table-column :label="$t('workshopPersonnelRoleMana.sequence')" align="center" type="index" width="70"/>
        <el-table-column :label="$t('workshopPersonnelRoleMana.staffName')" align="center">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column disabled :label="$t('workshopPersonnelRoleMana.departmentName')" align="center">
          <template slot-scope="scope">
            {{ scope.row.部门名称 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('workshopPersonnelRoleMana.roleName')" align="center">
          <template slot-scope="scope">
            {{ scope.row.角色功能 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('workshopPersonnelRoleMana.attendanceNo')" align="center">
          <template slot-scope="scope">
            {{ scope.row.考勤编号 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('workshopPersonnelRoleMana.operation')" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              icon="el-icon-edit"
              @click="submitEdit(scope.$index, scope.row)"/>
            <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="$t('workshopPersonnelRoleMana.personnelInfo')" center width="750px">
      <div style="height: 500px">
        <div style="float: left;margin-top: 10px;margin-left: 20px;overflow-y: scroll;height: 400px">
          <el-tree
            :data="data2"
            node-key="id"
            style="width: 150px;float: left"
            height="400"
            accordion
            @node-click="handleNodeClick"
          />
        </div>
        <el-table :data="List1" highlight-current-row height="400" style="width: 400px;float: left;margin-left: 30px" @row-click="handleCurrentChange">
          <el-table-column :label="$t('workshopPersonnelRoleMana.attendanceNo')" align="center" >
            <template slot-scope="scope">
              {{ scope.row.考勤编号 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('workshopPersonnelRoleMana.name')" align="center" >
            <template slot-scope="scope">
              {{ scope.row.姓名 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('workshopPersonnelRoleMana.gender')" align="center">
            <template slot-scope="scope">
              {{ scope.row.性别 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button style="margin-left: 260px" @click="dialogFormVisible = false">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" style="margin-top: 20px" @click="getName">{{ $t('common.confirm') }}</el-button>
    </el-dialog>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" :title="$t('workshopPersonnelRoleMana.add')" center style="min-height: 270px" width="800px">
      <el-form ref="form1" :model="form1" :rules="rules" label-position="left" label-width="120px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('workshopPersonnelRoleMana.staffName')" prop="staffName">
              <el-input v-model="form1.staffName" :placeholder="$t('workshopPersonnelRoleMana.doubleClickSelect')" size="small" readonly clearable style="width:200px" @dblclick.native="dialogTableVisible()"/>
            </el-form-item>
            <el-form-item :label="$t('workshopPersonnelRoleMana.roleName')" prop="roleName">
              <el-select v-model="form1.roleName" :placeholder="$t('workshopPersonnelRoleMana.roleName')" size="small" clearable style="width:200px">
                <el-option
                  v-for="item in roleNames"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('workshopPersonnelRoleMana.attendanceNo')" >
              <el-input
                v-model="attendanceNumber"
                disabled
                size="small"
                style="width:200px"/>
            </el-form-item>
            <el-form-item :label="$t('workshopPersonnelRoleMana.departmentName')" >
              <el-input v-model="department" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOFF">{{ $t('common.cancel') }}</el-button>
        <el-button :disabled="handelAdd_disable" type="primary" @click="submitAdd1()">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible2" :title="$t('workshopPersonnelRoleMana.edit')" center style="min-height: 270px" width="800px">
      <el-form ref="form2" :model="form2" :rules="rules1" label-position="left" label-width="120px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('workshopPersonnelRoleMana.staffName')" >
              <el-input v-model="form2.staffName" disabled size="small" clearable style="width:200px"/>
            </el-form-item>
            <el-form-item :label="$t('workshopPersonnelRoleMana.roleName')" prop="roleName">
              <el-select v-model="form2.roleName" :placeholder="$t('workshopPersonnelRoleMana.roleName')" clearable size="small" style="width:200px">
                <el-option
                  v-for="item in roleNames"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('workshopPersonnelRoleMana.attendanceNo')" >
              <el-input
                v-model="attendanceNumber"
                disabled
                size="small"
                style="width:200px"/>
            </el-form-item>
            <el-form-item disabled="true" :label="$t('workshopPersonnelRoleMana.departmentName')" >
              <el-input v-model="department" disabled size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOFF">{{ $t('common.cancel') }}</el-button>
        <el-button :disabled="handelAdd_disable" type="primary" @click="submitAdd2()">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { fn } from '@/api/BasicData/WorkshopPersonnelRoleMana'
export default {
  name: 'WorkshopPersonnelRoleMana',
  data() {
    return {
      handelAdd_disable: false, // 禁止二次出发
      number: '', // 考勤编号
      form1: {
        staffName: '', // 员工姓名
        roleName: '' // 角色姓名
      },
      form2: {
        staffName: '', // 员工姓名
        roleName: '' // 角色姓名
      },
      rules: {},
      rules1: {},
      staffName: '', // 员工姓名
      attendanceNumber: '', // 考勤编号
      List1: [], // 人员列表
      department: '', // 部门
      data2: [], // 部门树
      dialogFormVisible1: false, // 控制增加对话框显示
      dialogFormVisible2: false, // 控制编辑对话框显示
      tableData: [], // 角色分配表
      check1: '', // 控制条件
      check2: '', // 控制条件
      name: '', // 中间变量
      check3: '', // 控制条件
      check4: '', // 控制条件
      personnelNumber: '', // 人员编号
      personnelStream: '', // 人员角色编号
      roleName: null, // 角色名称
      roleNames: [], // 角色名称数组
      dialogFormVisible: false // 控制人员对话框显示
    }
  },
  computed: {
    addRules() {
      return {
        staffName: [{ required: true, message: this.$t('workshopPersonnelRoleMana.selectStaffName'), trigger: 'change' }],
        roleName: [{ required: true, message: this.$t('workshopPersonnelRoleMana.selectStaffRole'), trigger: 'change' }]
      }
    },
    editRules() {
      return {
        roleName: [{ required: true, message: this.$t('workshopPersonnelRoleMana.selectStaffRole'), trigger: 'change' }]
      }
    }
  },
  watch: {
    addRules: {
      immediate: true,
      handler(val) {
        this.rules = val
      }
    },
    editRules: {
      immediate: true,
      handler(val) {
        this.rules1 = val
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handelAdd() {
      this.department = ''
      this.attendanceNumber = ''
      if (this.$refs['form1'] !== undefined) {
        this.$refs['form1'].resetFields()
      }
      this.handelAdd_disable = false
      this.dialogFormVisible1 = true
    },
    submitEdit(index, row) {
      if (this.$refs['form2'] !== undefined) {
        this.$refs['form2'].resetFields()
      }
      this.personnelStream = row.人员角色流水号
      this.form2.staffName = row.姓名
      this.department = row.部门名称
      this.personnelNumber = row.人员编号
      this.form2.roleName = parseInt(row.角色编号)
      this.attendanceNumber = row.考勤编号
      this.handelAdd_disable = false
      this.dialogFormVisible2 = true
    },
    callOFF() {
      this.dialogFormVisible1 = false
      this.dialogFormVisible2 = false
      this.department = ''
      this.attendanceNumber = ''
    },
    searchData() {
      if (this.staffName !== '' && this.staffName !== null) {
        this.check1 = 1
      } else {
        this.check1 = 0
      }
      if (this.roleName !== '' && this.roleName !== null) {
        this.check2 = 1
      } else {
        this.check2 = 0
      }
      var param = []
      param[0] = ['姓名_check', this.check1]
      param[1] = ['姓名', this.staffName]
      param[2] = ['角色编号_check', this.check2]
      param[3] = ['角色编号', this.roleName]
      var Data = this.CreateData('11', '菜单系统模块_项目角色员工综合_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data
      })
    },
    fetchData() {
      var param = []
      param[0] = ['子节点', 0]
      var Data = this.CreateData('11', '人事档案管理_部门关系_查询节点', param)
      this.ExecDatabase(Data).then(response => {
        const data = response.data
        this.data2 = fn(data, 0)
      })
      var param1 = []
      var Data1 = this.CreateData('11', '菜单系统模块_项目角色_查询数据_new', param1)
      this.ExecDatabase(Data1).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.roleNames.push({
            label: response.data[i].角色功能,
            value: response.data[i].角色编号
          })
        }
      })
      this.searchData()
    },
    submitAdd1() {
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          this.handelAdd_disable = true
          var param = []
          param[0] = ['人员编号', this.personnelNumber]
          param[1] = ['角色编号', this.form1.roleName]
          param[2] = ['项目编号', 10]
          console.log('param', param)
          var Data = this.CreateData('12', '菜单系统模块_项目角色员工综合_增加数据', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success(this.$t('workshopPersonnelRoleMana.addSuccess'))
              this.department = ''
              this.form1.staffName = ''
              this.form1.roleName = ''
              this.searchData()
              this.dialogFormVisible1 = false
            } else { this.$message.error(this.$t('workshopPersonnelRoleMana.addFailed')) }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitAdd2() {
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          this.handelAdd_disable = true
          var param = []
          param[0] = ['人员角色流水号', this.personnelStream]
          param[1] = ['人员编号', this.personnelNumber]
          param[2] = ['角色编号', this.form2.roleName]
          var Data = this.CreateData('12', '菜单系统模块_项目角色员工综合_修改数据', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success(this.$t('workshopPersonnelRoleMana.editSuccess'))
              this.department = ''
              this.searchData()
              this.dialogFormVisible2 = false
            } else { this.$message.error(this.$t('workshopPersonnelRoleMana.editFailed')) }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleNodeClick(data) { // 树节点点击
      this.department = data.label
      var param = []
      param[0] = ['考核部门编号', data.id]
      var Data = this.CreateData('11', '人事档案管理_人员_部门与人员_查询数据_根据部门编号', param)
      this.ExecDatabase(Data).then(response => {
        this.List1 = response.data
      })
    },
    handleDelete(row) { // 删除
      this.$confirm(this.$t('workshopPersonnelRoleMana.confirmDelete'), this.$t('workshopPersonnelRoleMana.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['人员角色流水号', row.人员角色流水号]
        var Data = this.CreateData('12', '菜单系统模块_项目角色员工综合_删除数据', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success(this.$t('workshopPersonnelRoleMana.deleteSuccess'))
          } else { this.$message.error(this.$t('workshopPersonnelRoleMana.deleteFailed')) }
          this.searchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('workshopPersonnelRoleMana.deleteCanceled')
        })
      })
    },
    dialogTableVisible() {
      this.dialogFormVisible = true
    },
    handleCurrentChange(row) { // 获取当前行人员信息
      this.department = row.节点名称
      this.number = row.考勤编号
      this.name = row.姓名
      this.personnelNumber = row.人员编号
    },
    getName() { // 提交人员
      this.attendanceNumber = this.number
      this.dialogFormVisible = false
      this.form1.staffName = this.name
      this.form2.staffName = this.name
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin: 5px;
  }
</style>
