<style>
  .Sysuser_Date .el-range-editor .el-range-input {
    background-color: transparent;
  }

  .Sysuser_Date .el-range-editor.el-input__inner {
    background-color: transparent;
  }

  .syster_qDropdown .q-btn__wrapper {
    padding: 0 3px;
    min-height: 0 !important;
  }

</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.EmployeeName"
            label="员工姓名/账号" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select filled stack-label @input="getDepartList(msg.School_Id),resetSearch()" option-value="SId"
            option-label="SName" v-model="msg.School_Id" ref="School_Id" :options="schoolList" label="所属校区"
            :dense="false" emit-value map-options />
        </div>
        <div class="col-3">
          <selectTree :treeData='DeptList' :defaultArray="returnString" nodeKey="DeptId" :multiple="false"
            labelKey="DeptName" childrenKey="ChildList" tipText="选择部门" @getChild="getChild"></selectTree>
        </div>
        <div class="col-3">
          <q-select filled stack-label @input="resetSearch" option-value="PostId" option-label="PostName"
            v-model="msg.Post_Id" ref="Post_Id" :options="PostList" label="岗位" :dense="false" emit-value map-options />
        </div>
        <div class="col-3">
          <q-select filled @input="resetSearch" stack-label option-value="Id" option-label="Name"
            v-model="msg.LeaveStatus" ref="LeaveStatus" :options="LeaveStatusList" label="在职状态" :dense="false"
            emit-value map-options />
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateListOne" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                 range-separator="至"  start-placeholder="入职开始日期"  end-placeholder="入职结束日期">
                 </el-date-picker>       
            </template>
          </q-field>
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
              <template v-slot:control>           
              <el-date-picker v-model="dateListThree" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                  range-separator="至"  start-placeholder="离职开始日期"  end-placeholder="离职结束日期">
              </el-date-picker>
               </template>
             </q-field>
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled class="col-6">
              <template v-slot:control>
              <el-date-picker v-model="dateListTwo" @change="resetSearch()" format="MM-dd"  value-format="yyyy-MM-dd"
                 type="daterange"  style="border:none;"   range-separator="至"  start-placeholder="生日开始时间"
                 end-placeholder="生日结束时间">
              </el-date-picker>  
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat selection="multiple"
        :selected.sync="selected" class="sticky-right-column-table sticky-column-table" separator="none"
        :data="data" :columns="columns" row-key="Id">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">员工管理</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增员工" @click="EditManager(null)" />
            <q-btn-dropdown outline size="sm" color="dark" label="更多">
              <q-list>
                <q-item clickable v-close-popup @click="getType(1)">
                  <q-item-section>
                    <q-item-label>离职</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="resetPassWord()">
                  <q-item-section>
                    <q-item-label>重置密码</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
        </template>
        <template v-slot:body-cell-EmployeeName="props">
          <q-td :props="props">
            <q-avatar rounded size="sm" v-if="props.row.UserIcon">
              <img :src="props.row.UserIcon" />
            </q-avatar>
            <q-avatar rounded size="sm" color="teal-10" text-color="white" v-if="!props.row.UserIcon">
              {{GetFirst(props.value[0])}}</q-avatar>
            <span class="q-ml-md text-blue cursor-pointer" style="color:#2961FE;margin-left:10px;cursor:pointer;"
              @click="getEmpInfoInfo(props.row)" title="点击查看详情">{{props.value}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-StuSex="props">
          <q-td :props="props">
            <q-badge :color="props.value==1?'negative':'primary'" :label="props.value==1?'女':'男'" />
          </q-td>
        </template>
        <template v-slot:body-cell-LeaveStatus="props">
          <q-td :props="props">
            <span v-if="props.row.LeaveStatus=='在职'" style="color:#000">{{props.value}}</span>
            <span v-if="props.row.LeaveStatus=='兼职'" style="color:blue">{{props.value}}</span>
            <span v-if="props.row.LeaveStatus=='临时工'" style="color:orange">{{props.value}}</span>
            <span v-if="props.row.LeaveStatus=='离职'" style="color:red">{{props.value}}
            </span>
          </q-td>
        </template>
        <template v-slot:body-cell-BirthDate="props">
          <q-td :props="props">
            <span v-if="props.row.IsBirth==1" style="color:red">{{props.value}}</span>
            <span v-else>{{props.value}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-Status="props">
          <q-td :props="props">
            <q-toggle size="md" color="primary" :false-value="1" :true-value="0" v-model="props.row.Status"
              title="注意：关闭后，管理员将无法正常使用." @input="DeleteManager(props.row)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div class="syster_qDropdown">
              <q-btn v-if="props.row.ManagerAccount==''" flat size="xs" icon="iconfont icon-ziyuan" color="warning"
                style="font-weight:400" class="q-mr-xs" label="创建账号" @click="createAccount(props.row.MId)" />
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                @click="EditManager(props.row)" />
              <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
                <q-list>
                  <q-item clickable v-close-popup @click="transFerJob(props.row,3)">
                    <q-item-section>
                      <q-item-label>调岗</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="transFerJob(props.row,4)">
                    <q-item-section>
                      <q-item-label>调部门</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </div>
          </q-td>
        </template>
      </q-table>
      <manager-form v-if="isShowManagerForm" :save-obj="managerOption" @close="closeStuForm" @success="refreshPage">
      </manager-form>
      <employee-set v-if="isShowEmployeeSet" :seting-obj="setObj" @close="closeSetForm" @success="refreshSetPage">
      </employee-set>
      <employee-info v-if="isShowEmpInfo" :save-obj="managerOption" @close="closeEmpInfoForm" @success="refreshPage">
      </employee-info>
    </div>
  </div>
</template>
<script>
  import {
    queryManagerPage,
    getSchoolDropdown,
    deleteManagerInfo,
    createManagerAccount,
    GetLeaveStatus
  } from '../../api/school/index'
  import {
    BatchResetUserPassword
  } from '../../api/users/user.js'
  //岗位
  import {
    getPostList
  } from '../../api/system/post'
  import {
    getChildDepartment,
    getDeptTree
  } from '../../api/system/dept.js'
  import managerForm from '../../components/school/manager/manager-form'
  import employeeSet from '../../components/school/manager/employee-set'
  import employeeInfo from '../../components/school/manager/employee-info'
  import selectTree from '../../components/common/select-tree'
  export default {
    meta: {
      title: "后台用户管理"
    },
    components: {
      managerForm,
      selectTree,
      employeeSet,
      employeeInfo
    },
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: 'desc',
            required: true,
            label: '',
            align: 'left',
          },
          {
            name: 'EmployeeName',
            required: true,
            label: '姓名',
            align: 'left',
            field: row => row.EmployeeName
          },
          {
            name: 'SchoolName',
            label: '公司',
            field: 'SchoolName',
            align: 'left',
          },
          {
            name: 'DeptName',
            label: '部门',
            field: 'DeptName',
            align: 'left',
          },
          {
            name: 'PostName',
            label: '职位',
            field: 'PostName',
            align: 'left',
          },
          {
            name: 'Sex',
            label: '性别',
            field: 'Sex',
            align: 'left'
          },
          {
            name: 'Account',
            label: '账号',
            align: 'left',
            field: 'Account'
          },
          {
            name: 'EmployeePhone',
            label: '联系电话',
            field: 'EmployeePhone',
            align: 'left'
          },
          {
            name: 'BirthDate',
            label: '生日',
            field: 'BirthDate',
            align: 'left'
          },
          {
            name: 'Education',
            label: '学历',
            field: 'Education',
            align: 'left'
          },
          {
            name: 'LeaveStatus',
            label: '状态',
            field: 'LeaveStatus',
            align: 'left',
          },
          {
            name: 'Remarks',
            label: '行政备注',
            field: 'Remarks',
            align: 'left',
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'MId'
          }
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          School_Id: 0, //校区
          Dept_Id: 0, //部门
          Post_Id: 0, //岗位编号
          LeaveStatus: 0, //在职状态
          StartEntryTime: "", //入职开始时间
          EndEntryTime: "", //入职结束时间
          StartLeaveTime: "", //开始离职时间
          EndLeaveTime: "", //结束离职时间
          StartBirthDate: "", //开始生日
          EndBirthDate: "", //结束生日
          EmployeeName: "", //员工姓名电话
        },
        schoolTemp: "",
        pageCount: 0,
        managerOption: null,
        schoolList: [], //校区数组
        DeptList: [], // 部门下拉
        isShowManagerForm: false,
        resetLoading: false,
        returnString: [], //默认岗位
        PostList: [], //岗位
        LeaveStatusList: [], //在职状态
        dateListOne: [], //入职-离职日期
        dateListTwo: [], //生日开始-结束日期
        dateListThree: [], //开始-结束离职日期
        selected: [],
        isShowEmployeeSet: false, //是否显示设置
        setObj: {
          type: 0,
          selected: []
        },
        isShowEmpInfo: false, //是否显示员工信息
      }
    },
    mounted() {
      this.currentUrl = this.$route.path
      this.getSchool()
      this.getManager();
      this.getDepartList(0);
      this.queryPostList(0);
      this.getLeaveState();
    },
    methods: {
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getManager()
      },
      //创建账号
      createAccount(id) {
        let that = this
        createManagerAccount({
          MId: id,
        }).then(res => {
          that.$q.dialog({
            title: "创建账号",
            message: res.Message,
            persistent: true,
            ok: {
              label: "确认",
              flat: true,
              focus: true
            }
          }).onOk(() => {
            that.getManager();
          }).onCancel(() => {
            that.getManager();
          })
        })
      },
      //重置密码
      resetPassWord() {
        if (this.selected.length == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择修改人员`
          })
          return;
        }
        let that = this
        this.$q.dialog({
          title: "重置密码",
          message: "你正在进行重置密码行为，是否确认执行",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认重置",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          that.resetLoading = true;
          let Msg = [];
          this.selected.forEach(x => {
            let obj = {
              AccountType: x.AccountType,
              AccountId: x.AccountId
            }
            Msg.push(obj);
          })
          BatchResetUserPassword(Msg).then(res => {
            that.resetLoading = false
            that.$q.dialog({
              title: "密码重置成功",
              message: res.Message,
              persistent: true,
              ok: {
                label: "确认",
                flat: true,
                focus: true
              }
            })
            this.selected = [];
          }).catch(() => {
            that.resetLoading = false
          });
        })
      },
      DeleteManager(obj) {
        let that = this;
        var str = (obj.Status == 1 ? "【禁用】" : "【启用】");
        this.$q.dialog({
          title: str + "管理者",
          message: "你正在进行" + str + "管理者行为，一旦执行无法找回，是否确认执行？",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          that.resetLoading = true
          deleteManagerInfo({
            MId: obj.MId,
            Status: obj.Status
          }).then(res => {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '操作成功!',
              position: 'top'
            })
            this.getManager()
          })
        }).onCancel(() => {
          obj.Status = obj.Status == 1 ? 0 : 1;
        });
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getManager();
      },
      getSchool() {
        getSchoolDropdown({}).then(res => {
          this.schoolList = res.Data;
          var obj = {
            SName: '全部',
            SId: 0
          }
          this.schoolList.unshift(obj);
        })
      },
      getManager() {
        this.loading = true;
        if (this.dateListOne && this.dateListOne.length > 0) {
          this.msg.StartEntryTime = this.dateListOne[0];
          this.msg.EndEntryTime = this.dateListOne[1];
        } else {
          this.msg.StartEntryTime = '';
          this.msg.EndEntryTime = '';
        }
        if (this.dateListTwo && this.dateListTwo.length > 0) {
          this.msg.StartBirthDate = this.dateListTwo[0];
          this.msg.EndBirthDate = this.dateListTwo[1];
        } else {
          this.msg.StartBirthDate = '';
          this.msg.EndBirthDate = '';
        }
        if (this.dateListThree && this.dateListThree.length > 0) {
          this.msg.StartLeaveTime = this.dateListThree[0];
          this.msg.EndLeaveTime = this.dateListThree[1];
        } else {
          this.msg.StartLeaveTime = '';
          this.msg.EndLeaveTime = '';
        }
        queryManagerPage(this.msg).then(res => {
          this.loading = false;
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      refreshPage() {
        if (!this.managerOption) {
          this.msg.pageIndex = 1;
          this.msg.EmployeeName = "";
          this.msg.MTel = "";
          this.msg.Status = "-1";
          this.msg.School_Id = 0;
        }
        this.getManager()
      },
      EditManager(obj) {
        if (obj) {
          this.managerOption = obj;
        } else {
          this.managerOption = null;
        }
        this.isShowManagerForm = true;
      },
      closeStuForm() {
        this.isShowManagerForm = false;
      },
      //关闭右侧抽屉
      closeSetForm() {
        this.isShowEmployeeSet = false;
      },
      //关抽屉刷新数据
      refreshSetPage() {
        this.getManager();
        this.selected = [];
      },
      getChild(deptArray) {
        var tempStr = "";
        if (deptArray && deptArray != '') {
          tempStr = deptArray;
        }
        if (tempStr) {
          this.msg.Dept_Id = tempStr;
        } else {
          this.msg.Dept_Id = 0;
        }
        this.resetSearch();
        this.queryPostList(this.msg.Dept_Id);
      },
      //获取部门下拉数据
      getDepartList(id) {
        let msg = {
          School_Id: id
        }
        getDeptTree(msg).then(res => {
          if (res.Code == 1) {
            this.DeptList = res.Data;
          }
        })
      },
      //获取岗位
      queryPostList(deptId) {
        this.PostList = [];
        var postMsg = {
          RB_Dept_Id: deptId,
        };
        getPostList(postMsg).then(res => {
          if (res.Code == 1) {
            this.PostList = res.Data;
            var obj = {
              PostName: '全部',
              PostId: 0
            }
            this.PostList.unshift(obj);
          }
        })
      },
      //获取在职状态
      getLeaveState() {
        GetLeaveStatus({}).then(res => {
          if (res.Code == 1) {
            this.LeaveStatusList = res.Data;
          }
        })
      },
      getType(num) {
        this.setObj.type = num;
        if (this.selected.length == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择员工`
          })
          return;
        } else {
          this.setObj.selected = this.selected
        }
        this.isShowEmployeeSet = true;
      },
      //单个调岗和调部门
      transFerJob(obj, type) {
        this.setObj.type = type;
        this.setObj.selected = [];
        this.setObj.selected.push(obj);
        this.isShowEmployeeSet = true;
      },
      GetFirst(val) {
        if (val) {
          return val.substr(0, 1);
        }
      },
      //显示员工信息弹窗
      getEmpInfoInfo(obj) {
        if (obj) {
          this.managerOption = obj;
        } else {
          this.managerOption = null;
        }
        this.isShowEmpInfo = true;
      },
      //关闭员工信息弹窗
      closeEmpInfoForm() {
        this.isShowEmpInfo = false;
      },
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass');

</style>
