| <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> |