| | |
| | | <div class="right-top"> |
| | | <div class="right-bottom"> |
| | | <el-button type="primary" @click="addPerson">+ 添加部门</el-button> |
| | | <!-- 导入 --> |
| | | <import-table class="exportBtn" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table> |
| | | <!-- 导出 --> |
| | | <el-button type="primary" @click="getExport">导出</el-button> |
| | | <el-button type="danger" plain @click="delPerson">删除</el-button> |
| | | </div> |
| | | <div> |
| | | <el-select v-model="searchData.status" placeholder="状态" class="searchStatus"> |
| | | <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" size="small"/> |
| | | <el-option key="1" label="启用" value="1" size="small"/> |
| | | <el-option key="0" label="停用" value="0" size="small"/> |
| | | </el-select> |
| | | <el-input v-model="searchData.name" style="width: 200px" size="small" placeholder="请输入关键字进行过滤"> |
| | | <el-input v-model="searchData.keywords" style="width: 200px" size="small" placeholder="请输入关键字进行过滤"> |
| | | <template #append> |
| | | <el-button :icon="searchIcon" @click="getOrganizationList" /> |
| | | <el-button @click="getOrganizationList"> |
| | | <i class="el-icon"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg></i> |
| | | </el-button> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | | </div> |
| | | <div class="right-table"> |
| | | <!-- lazy :load="tableLoad" --> |
| | | <el-table :data="departmentList" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all ref="treeRef" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column prop="name" label="岗位名称"></el-table-column> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog> |
| | | <!-- 删除 --> |
| | | <el-dialog title="" v-model="delPersonModel" :width="300" destroy-on-close> |
| | | <div> |
| | | <div style="margin-bottom: 6px;"><span class="delIcon">!</span>请你谨慎选择!</div> |
| | | <div style="text-indent: 24px;">删除数据会影响已关联的业务 ,若您想在已关联的业务中依然显示这些数据, 您可以选择 停用 操作。停用后此数据将不能再被新业务使用。</div> |
| | | </div> |
| | | <template #footer> |
| | | <div class="footerDiv"> |
| | | <div class="delBtn" @click="delData(0)">删除</div> |
| | | <div class="delBtn" @click="delData(1)">停用</div> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <save-dialog v-if="dialog.save" ref="saveDialog" @success="addHandleSuccess" @closed="dialog.save=false"></save-dialog> |
| | | </template> |
| | | <script> |
| | | import importTable from '@/layout/components/importTable.vue' |
| | | import saveDialog from './department' |
| | | export default { |
| | | name: "bakalaka", |
| | | data(){ |
| | | return { |
| | | uploadUrl: "/api/blade-cps/group/import?groupType=group_organization&groupCategory=1", |
| | | exportUrl: "/api/blade-cps/organization/export-template", |
| | | selectId: "", |
| | | selection: [], |
| | | total: 0, |
| | | searchData: { |
| | |
| | | dialog: { |
| | | save: false |
| | | }, |
| | | departmentList: [] |
| | | departmentList: [], |
| | | delPersonModel: false |
| | | } |
| | | }, |
| | | created(){ |
| | |
| | | this.getOrganizationList(); |
| | | }, |
| | | components: { |
| | | saveDialog |
| | | saveDialog,importTable |
| | | }, |
| | | methods: { |
| | | getExport() { |
| | | this.$HTTP.get(`/api/blade-cps/organization/export-organization?`+this.$TOOL.qsStringify(this.searchData)).then(res=> { |
| | | if(res.code == 200) { |
| | | window.open(res.data.link); |
| | | } |
| | | }) |
| | | }, |
| | | addHandleSuccess() { |
| | | this.getOrganizationList(); |
| | | }, |
| | | delData(type) { |
| | | this.$HTTP.delete(`/api/blade-cps/organization?ids=${this.selectId}&type=${type}`).then(res=> { |
| | | if(res.code == 200) { |
| | | this.$message.success("操作成功"); |
| | | this.delPersonModel = false; |
| | | this.selectId = ""; |
| | | this.getOrganizationList(); |
| | | } |
| | | }) |
| | | }, |
| | | removeHasChildren(arr) { |
| | | return arr.map(item => { |
| | | // 创建一个不包含hasChildren的新对象 |
| | |
| | | handleSelectionChange (selection) { |
| | | this.selection = selection; |
| | | }, |
| | | delPerson() {}, |
| | | delPerson() { |
| | | if(this.selection.length == 0) { |
| | | this.$message({ |
| | | message: '请选择至少一条数据', |
| | | type: 'warning' |
| | | }); |
| | | return; |
| | | } |
| | | var selStr = ""; |
| | | this.selection.map(item=> { |
| | | selStr += item.id + "," |
| | | }) |
| | | this.selectId = selStr.replace(/,$/, ''); |
| | | this.delPersonModel = true; |
| | | }, |
| | | handleSizeChange(val) { |
| | | console.log(`每页 ${val} 条`); |
| | | }, |
| | |
| | | border-left: 0px; |
| | | } |
| | | .person-left-active { |
| | | background-color: #3b8e8e; |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | .person-left-search { |
| | |
| | | .multipleTableRef { |
| | | margin-bottom: 8px; |
| | | } |
| | | .footerDiv { |
| | | text-align: center; |
| | | } |
| | | .delBtn { |
| | | color: #fff; |
| | | width: 112px; |
| | | height: 32px; |
| | | display: inline-block; |
| | | color: #fa554c; |
| | | background-color: #fff; |
| | | border: 1px solid #fdbbb7; |
| | | text-align: center; |
| | | line-height: 32px; |
| | | cursor: pointer; |
| | | } |
| | | .delBtn:nth-child(1) { |
| | | margin-right:4px; |
| | | } |
| | | .delBtn:hover { |
| | | background-color: #f34d5b; |
| | | border-color: #f34d5b; |
| | | color: #fff; |
| | | } |
| | | .delIcon { |
| | | color: #fff; |
| | | background: red; |
| | | border-radius: 50%; |
| | | display: inline-block; |
| | | width: 20px; |
| | | height: 20px; |
| | | font-size: 14px; |
| | | text-align: center; |
| | | line-height: 20px; |
| | | margin-right: 6px; |
| | | } |
| | | .exportBtn { |
| | | margin-left:8px; |
| | | margin-right:8px; |
| | | } |
| | | </style> |