<template> 
 | 
  <TableLayout v-permissions="['ext:companyuserext:query']"> 
 | 
    <!-- 搜索表单 --> 
 | 
    <SearchFormCollapse slot="search-form"> 
 | 
      <el-form ref="searchForm" :model="searchForm" label-width="100px" inline> 
 | 
        <el-form-item label="姓名" prop="name"> 
 | 
          <el-input v-model="searchForm.name" placeholder="请输入姓名" @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="手机号" prop="phone"> 
 | 
          <el-input v-model="searchForm.phone" placeholder="请输入手机号码" @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="工号" prop="umodelEmpNo"> 
 | 
          <el-input v-model="searchForm.umodelEmpNo" placeholder="请输入工号" @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="状态" prop="status"> 
 | 
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable filterable @keypress.enter.native="search"> 
 | 
            <el-option 
 | 
              v-for="item in statusList" 
 | 
              :key="item.value" 
 | 
              :label="item.name" 
 | 
              :value="item.value"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="岗位" prop="positionId"> 
 | 
          <el-select v-model="searchForm.positionId" placeholder="请选择岗位" clearable filterable @keypress.enter.native="search"> 
 | 
            <el-option 
 | 
              v-for="item in postList" 
 | 
              :key="item.id" 
 | 
              :label="item.name" 
 | 
              :value="item.id"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="角色" prop="roleId"> 
 | 
          <el-select v-model="searchForm.roleId" placeholder="请选择角色" clearable filterable @keypress.enter.native="search"> 
 | 
            <el-option 
 | 
              v-for="item in roleList" 
 | 
              :key="item.id" 
 | 
              :label="item.name" 
 | 
              :value="item.id"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <section> 
 | 
          <el-button type="primary" @click="search">搜索</el-button> 
 | 
          <el-button @click="reset">重置</el-button> 
 | 
        </section> 
 | 
      </el-form> 
 | 
    </SearchFormCollapse> 
 | 
    <!-- 表格和分页 --> 
 | 
    <template v-slot:table-wrap> 
 | 
      <div style="display: flex;"> 
 | 
        <div style="width: 15%; border-right: 1px solid #ececec;"> 
 | 
          <Tree 
 | 
            :list="data" 
 | 
            :defaultProps="defaultProps" 
 | 
            @callback="callback" 
 | 
          ></Tree> 
 | 
        </div> 
 | 
        <div style="width: 84%; margin-left: 1%;"> 
 | 
          <div class="zdy_box"> 
 | 
            <div style="display: flex; align-items: center;"> 
 | 
              <span>{{name ? name : '全部'}} ({{tableData.pagination.total}})</span> 
 | 
            </div> 
 | 
            <ul class="toolbar" v-permissions="['ext:companyuserext:create', 'ext:companyuserext:delete']"> 
 | 
              <li><el-button type="primary" @click="binding" v-permissions="['ext:companyuserext:create']">绑定工序</el-button></li> 
 | 
              <li v-permissions="['ext:companyuserext:create']"> 
 | 
                <ImportButton 
 | 
                  text="导入" 
 | 
                  template-name="user_import_template.xlsx" 
 | 
                  template-path="/template/user_import_template.xlsx" 
 | 
                  action="/system/user/importBatch" 
 | 
                  @success="search" 
 | 
                /> 
 | 
              </li> 
 | 
              <li><el-button type="primary" @click="$refs.operaCompanyUserExtWindow.open('添加员工')" v-permissions="['ext:companyuserext:create']">添加员工</el-button></li> 
 | 
              <li><el-button type="primary" @click="changeZZ" v-permissions="['ext:companyuserext:create']">更换组织</el-button></li> 
 | 
              <li><el-button type="danger" plain @click="deleteByIdInBatchs" v-permissions="['ext:companyuserext:delete']">删除员工</el-button></li> 
 | 
            </ul> 
 | 
          </div> 
 | 
          <el-table 
 | 
            v-loading="isWorking.search" 
 | 
            :data="tableData.list" 
 | 
            stripe 
 | 
            border 
 | 
            @selection-change="handleSelectionChange" 
 | 
          > 
 | 
            <el-table-column type="selection" fixed="left" width="55"></el-table-column> 
 | 
            <el-table-column prop="name" fixed="left" label="姓名" min-width="100px"></el-table-column> 
 | 
            <el-table-column prop="phone" label="手机号" min-width="120px"></el-table-column> 
 | 
            <el-table-column prop="code" label="工号" min-width="100px"></el-table-column> 
 | 
            <el-table-column prop="dmodel.name" label="部门" min-width="100px"></el-table-column> 
 | 
            <el-table-column prop="positionName" label="岗位" min-width="100px"> 
 | 
              <template slot-scope="{row}"> 
 | 
                {{ row.positionName || '-' }} 
 | 
              </template> 
 | 
            </el-table-column> 
 | 
            <el-table-column label="角色" show-overflow-tooltip min-width="100px"> 
 | 
                <template slot-scope="{row}"> 
 | 
                  <span class="long-title-style">{{ row.roles.length ? row.roles.map((e)=>{return e.name}).join(' / ') : '-' }}</span> 
 | 
                </template> 
 | 
            </el-table-column> 
 | 
            <el-table-column prop="procedureNames" label="绑定工序" show-overflow-tooltip min-width="100px"> 
 | 
              <template slot-scope="{row}"> 
 | 
                <span class="long-title-style">{{ newProcedureNames(row.procedureNames) }}</span> 
 | 
                </template> 
 | 
            </el-table-column> 
 | 
            <el-table-column prop="createTime" label="创建时间" min-width="100px"></el-table-column> 
 | 
            <el-table-column label="状态" min-width="100px"> 
 | 
              <template slot-scope="{row}"> 
 | 
                <el-switch 
 | 
                  :disabled="!containPermissions(['ext:companyuserext:update'])" 
 | 
                  @change="changeStatus(row)" 
 | 
                  v-model="row.status" 
 | 
                  :active-value="0" 
 | 
                  :inactive-value="1"> 
 | 
                </el-switch> 
 | 
              </template> 
 | 
            </el-table-column> 
 | 
            <el-table-column 
 | 
              v-if="containPermissions(['ext:companyuserext:update', 'ext:companyuserext:delete'])" 
 | 
              label="操作" 
 | 
              min-width="200" 
 | 
              fixed="right" 
 | 
            > 
 | 
              <template slot-scope="{row}"> 
 | 
                <el-button type="text" @click="edit(row)" v-permissions="['ext:companyuserext:update']">编辑</el-button> 
 | 
                <el-button type="text" @click="$refs.operaCompanyUserRollWindow.open(row)" v-permissions="['ext:companyuserext:delete']">配置角色</el-button> 
 | 
                <el-button type="text" @click="resets(row.userId)" v-permissions="['ext:companyuserext:delete']">重置密码</el-button> 
 | 
                <span style="margin-left:8px"> 
 | 
                  <el-button type="text" @click="deleteByIds(row)" v-permissions="['ext:companyuserext:delete']" v-if="row.roles.type !== 0">删除</el-button> 
 | 
                </span> 
 | 
              </template> 
 | 
            </el-table-column> 
 | 
          </el-table> 
 | 
          <pagination 
 | 
            @size-change="handleSizeChange" 
 | 
            @current-change="handlePageChange" 
 | 
            :pagination="tableData.pagination" 
 | 
          ></pagination> 
 | 
        </div> 
 | 
      </div> 
 | 
    </template> 
 | 
    <!-- 新建/修改 --> 
 | 
    <OperaCompanyUserExtWindow ref="operaCompanyUserExtWindow" @success="handlePageChange" /> 
 | 
  
 | 
    <!-- 绑定工序 --> 
 | 
    <OperaCompanyUserBindingWindow :id="id" ref="operaCompanyUserBindingWindow" @success="handlePageChange" /> 
 | 
  
 | 
    <!-- 更换组织 --> 
 | 
    <OperaCompanyUserChangeWindow :id="id" ref="operaCompanyUserChangeWindow" @success="handlePageChange" /> 
 | 
  
 | 
    <!-- 配置角色 --> 
 | 
    <OperaCompanyUserRollWindow ref="operaCompanyUserRollWindow" @success="handlePageChange" /> 
 | 
  </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import { allList, getRoleAll, treeComList, resetPwd, deleteById, updateById, deleteByIdInBatch } from '@/api/ext/companyUserExt' 
 | 
import BaseTable from '@/components/base/BaseTable' 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import SearchFormCollapse from '@/components/common/SearchFormCollapse' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import OperaCompanyUserExtWindow from '@/components/ext/OperaCompanyUserExtWindow' 
 | 
import OperaCompanyUserBindingWindow from '@/components/ext/OperaCompanyUserBindingWindow' 
 | 
import OperaCompanyUserChangeWindow from '@/components/ext/OperaCompanyUserChangeWindow' 
 | 
import OperaCompanyUserRollWindow from '@/components/ext/OperaCompanyUserRollWindow' 
 | 
import Tree from '@/components/common/Tree' 
 | 
import ImportButton from '@/components/common/ImportButton' 
 | 
  
 | 
export default { 
 | 
  name: 'CompanyUserExt', 
 | 
  extends: BaseTable, 
 | 
  components: { 
 | 
    Tree, 
 | 
    SearchFormCollapse, 
 | 
    TableLayout, 
 | 
    Pagination, 
 | 
    OperaCompanyUserExtWindow, 
 | 
    OperaCompanyUserBindingWindow, 
 | 
    OperaCompanyUserChangeWindow, 
 | 
    OperaCompanyUserRollWindow, 
 | 
    ImportButton 
 | 
  }, 
 | 
  data () { 
 | 
    return { 
 | 
      name: '', 
 | 
      ids: [], 
 | 
      id: '', 
 | 
      roleList: [], 
 | 
      postList: [], 
 | 
      data: [], 
 | 
      defaultProps: { 
 | 
        children: 'children', 
 | 
        name: 'name', 
 | 
        status: 'validTime', 
 | 
        id: 'id' 
 | 
      }, 
 | 
      // 搜索 
 | 
      searchForm: { 
 | 
        name: '', 
 | 
        phone: '', 
 | 
        umodelEmpNo: '', 
 | 
        status: '', 
 | 
        positionId: '', 
 | 
        roleId: '', 
 | 
        departmentId: '' 
 | 
      }, 
 | 
      statusList: [ 
 | 
        { name: '启用', value: 0 }, 
 | 
        { name: '禁用', value: 1 } 
 | 
      ] 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      module: '组织人员关联信息', 
 | 
      api: '/ext/companyUserExt', 
 | 
      'field.id': 'id', 
 | 
      'field.main': 'name', 
 | 
      sorts: [{ direction: 'DESC', property: 'CREATE_TIME' }] 
 | 
    }) 
 | 
    this.search() 
 | 
    this.allList() 
 | 
    this.getRoleAll() 
 | 
    this.treeComList() 
 | 
  }, 
 | 
  methods: { 
 | 
    // 批量删除 
 | 
    deleteByIdInBatchs () { 
 | 
      if (this.tableData.selectedRows.length === 0) { 
 | 
        return this.$tip.warning('至少选择一条数据') 
 | 
      } 
 | 
      this.$confirm(`此操作将永久删除选中的${this.tableData.selectedRows.length}位员工, 是否继续?`, '提示', { 
 | 
        confirmButtonText: '确定', 
 | 
        cancelButtonText: '取消', 
 | 
        type: 'warning' 
 | 
      }).then((a) => { 
 | 
        // console.log(a); 
 | 
        const ids = [] 
 | 
        this.tableData.selectedRows.forEach(item => { 
 | 
          ids.push(item.umodel.id) 
 | 
        }) 
 | 
        const data = ids.join(',') 
 | 
        deleteByIdInBatch(data) 
 | 
          .then(res => { 
 | 
            this.search() 
 | 
          }) 
 | 
          .catch(err => { 
 | 
            this.$message.error(err) 
 | 
          }) 
 | 
      }).catch((e) => { 
 | 
        console.log(e); 
 | 
      }) 
 | 
  
 | 
       
 | 
    }, 
 | 
    // 修改状态 
 | 
    changeStatus (item) { 
 | 
      updateById({ 
 | 
        id: item.umodel.id, 
 | 
        status: item.status 
 | 
      }).then(res => { 
 | 
        this.search() 
 | 
      }) 
 | 
    }, 
 | 
    // 删除员工 
 | 
    deleteByIds (item) { 
 | 
      this.$confirm(`此操作将永久删除${item.name}, 是否继续?`, '提示', { 
 | 
        confirmButtonText: '确定', 
 | 
        cancelButtonText: '取消', 
 | 
        type: 'warning' 
 | 
      }).then(() => { 
 | 
        deleteById(item.umodel.id) 
 | 
          .then(res => { 
 | 
            // console.log(res) 
 | 
            this.search() 
 | 
          }) 
 | 
          .catch(err => { 
 | 
            this.$message.error(err) 
 | 
          }) 
 | 
      }).catch(() => { 
 | 
  
 | 
      }) 
 | 
    }, 
 | 
    // 编辑用户 
 | 
    edit (row) { 
 | 
      const data = { 
 | 
        id: row.userId, 
 | 
        realname: row.name, 
 | 
        mobile: row.phone, 
 | 
        empNo: row.code, 
 | 
        departmentId: row.departmentId, 
 | 
        positionIds: row.positionId 
 | 
      } 
 | 
      this.$refs.operaCompanyUserExtWindow.open('编辑员工', data) 
 | 
    }, 
 | 
    callback (data) { 
 | 
      this.name = data.name 
 | 
      this.searchForm.departmentId = data.id 
 | 
      this.search() 
 | 
    }, 
 | 
    // 重置密码 
 | 
    resets (id) { 
 | 
      this.$confirm('是否确认重置密码?', '提示', { 
 | 
        confirmButtonText: '确定', 
 | 
        cancelButtonText: '取消', 
 | 
        type: 'warning' 
 | 
      }).then(() => { 
 | 
        resetPwd({ 
 | 
          id, 
 | 
          password: '123456' 
 | 
        }).then(res => { 
 | 
          this.$tip.success('重置成功') 
 | 
          this.search() 
 | 
        }) 
 | 
      }).catch(() => { 
 | 
  
 | 
      }) 
 | 
    }, 
 | 
    // 部门树状结构数据 
 | 
    treeComList () { 
 | 
      treeComList({}) 
 | 
        .then(res => { 
 | 
          res.validTime = true 
 | 
          this.data = [res] 
 | 
        }) 
 | 
    }, 
 | 
    changeZZ () { 
 | 
      if (this.tableData.selectedRows.length === 0) { 
 | 
        return this.$tip.warning('至少选择一条数据') 
 | 
      } 
 | 
      if (this.tableData.selectedRows.length >= 2) { 
 | 
        return this.$tip.warning('一次只能选择一项进行修改') 
 | 
      } 
 | 
      this.id = this.tableData.selectedRows[0].umodel.id.toString() 
 | 
      // console.log(this.tableData.selectedRows[0]) 
 | 
      this.$refs.operaCompanyUserChangeWindow.open('更换组织', { departmentId: this.tableData.selectedRows[0].departmentId }) 
 | 
    }, 
 | 
    // 获取所有角色 
 | 
    getRoleAll () { 
 | 
      getRoleAll({}) 
 | 
        .then(res => { 
 | 
          this.roleList = res 
 | 
        }) 
 | 
    }, 
 | 
    // 获取全部岗位 
 | 
    allList () { 
 | 
      allList({}) 
 | 
        .then(res => { 
 | 
          this.postList = res 
 | 
        }) 
 | 
    }, 
 | 
    // 点击树状结构 
 | 
    // handleNodeClick (data) { 
 | 
    //   this.name = data.name 
 | 
    //   this.searchForm.departmentId = data.id 
 | 
    //   this.search() 
 | 
    // }, 
 | 
    success () { 
 | 
      this.search() 
 | 
    }, 
 | 
    binding () { 
 | 
      if (this.tableData.selectedRows.length === 0) { 
 | 
        return this.$tip.warning('至少选择一条数据') 
 | 
      } 
 | 
      if (this.tableData.selectedRows.length >= 2) { 
 | 
        return this.$tip.warning('一次只能选择一项进行绑定') 
 | 
      } 
 | 
      // console.log(this.tableData.selectedRows[0]) 
 | 
      // this.id = this.tableData.selectedRows[0].umodel.id.toString() 
 | 
      this.$refs.operaCompanyUserBindingWindow.open('绑定工序', this.tableData.selectedRows[0]) 
 | 
    }, 
 | 
    newProcedureNames (procedureNames) { 
 | 
      if (procedureNames) { 
 | 
        // console.log(procedureNames.split(',')) 
 | 
        return procedureNames.split(',').join(' / ') 
 | 
      } 
 | 
      return '-' 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style scoped> 
 | 
    .box { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
    } 
 | 
    .box_menu { 
 | 
        width: 15%; 
 | 
        overflow-y: auto; 
 | 
        padding-left: 16px; 
 | 
    } 
 | 
    .box_menu_x { 
 | 
        height: 37px; 
 | 
    } 
 | 
    .box_menu_content { 
 | 
        width: 100%; 
 | 
        height: calc(100% - 37px); 
 | 
        background: white; 
 | 
    } 
 | 
    .box_content { 
 | 
        width: 85%; 
 | 
    } 
 | 
    .zdy_box { 
 | 
        display: flex; 
 | 
        justify-content: space-between; 
 | 
    } 
 | 
</style> 
 |