1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/master/person/main/personDepartment.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-28 18:25:55
 * @LastEditTime: 2024-04-10 17:05:04
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -12,165 +12,149 @@
         <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="input3" placeholder="状态" class="searchStatus">
                  <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     size="small"
                  />
               <el-select v-model="searchData.status" placeholder="状态" class="searchStatus">
                  <el-option key="1" label="启用" value="1" size="small"/>
                  <el-option key="0" label="停用" value="0" size="small"/>
               </el-select>
               <el-input
                  v-model="input3"
                  style="width: 200px"
                  size="small"
                  placeholder="请输入关键字进行过滤"
                  class="input-with-select"
                  >
               <el-input v-model="searchData.keywords" style="width: 200px" size="small" placeholder="请输入关键字进行过滤">
                  <template #append>
                     <el-button :icon="Search" />
                     <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">
            <el-table
               ref="multipleTableRef"
               :data="tableData"
               border
               style="width: 100%"
               class="multipleTableRef"
               @selection-change="handleSelectionChange"
            >
            <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="date"
               label="岗位名称">
               </el-table-column>
               <el-table-column
               prop="name"
               label="部门人数">
               </el-table-column>
               <el-table-column
               prop="name"
               label="上级部门">
               </el-table-column>
               <el-table-column
               fixed="right"
               label="操作">
               <template #default="scope">
                  <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                  <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
               </template>
               <el-table-column prop="name" label="岗位名称"></el-table-column>
               <el-table-column prop="peopleNum" label="部门人数"></el-table-column>
               <el-table-column prop="parentName" label="上级部门"></el-table-column>
               <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                     <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                  </template>
               </el-table-column>
            </el-table>
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage4"
               :page-sizes="[100, 200, 300, 400]"
               :page-size="100"
               :page-sizes="[15, 50, 100]"
               :page-size="15"
               layout="total, sizes, prev, pager, next, jumper"
               :total="400">
               :total="total">
            </el-pagination>
         </div>
      </div>
   </div>

   <el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
      <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
         <el-row>
            <el-col :span="24">
               <el-form-item label="部门" prop="department">
                  <el-select v-model="departmentFrom.department" style="width: 100%">
                     <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
   <!-- 删除 -->
   <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>
         <el-button @click="departmentVisible=false" >取 消</el-button>
         <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 存</el-button>
         <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="handleSuccess" @closed="dialog.save=false"></save-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: {
               groupType: 'group_organization',
               groupCategory: '1',
               status: "1",
               name: ""
            },
            statusList: [],
            isSaveing: false,
            groups: [],
            departmentFrom: {
               department: ""
            },
            departmentVisibleRules: {
               department:[
                  {required: true, message: '请选择部门'}
               ]
            },
            departmentVisible: false,
            dialog: {
               save: false
            },
            leftActive: true,
            input: '',
            options: [{
               value: '选项1',
               label: '黄金糕'
            }],
            input3: '',
            tableData: [{
               date: '2016-05-02',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1518 弄',
               zip: 200333
               }, {
               date: '2016-05-04',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1517 弄',
               zip: 200333
               }, {
               date: '2016-05-01',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1519 弄',
               zip: 200333
               }, {
               date: '2016-05-03',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1516 弄',
               zip: 200333
            }]
            departmentList: [],
            delPersonModel: false
         }
      },
      created(){
         
      },
      mounted(){
			
         this.getStatus();
         this.getOrganizationList();
      },
      components: {
         saveDialog
         saveDialog,importTable
      },
      methods: {
         departmentSubmit() {
            this.departmentVisible=false;  //部门调整
         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的新对象  
               const newItem = { ...item };  
               delete newItem.hasChildren; // 删除hasChildren字段  
               // 如果children字段存在且是数组，则递归处理children  
               if (Array.isArray(newItem.children)) {  
               newItem.children = this.removeHasChildren(newItem.children);  
               }  
				
               return newItem;  
            });  
         },
         getOrganizationList() {
            this.$HTTP.get(`/api/blade-cps/organization/tree?` + this.$TOOL.qsStringify(this.searchData)).then(res=> {
               if(res.code == 200) {
                  this.departmentList = this.removeHasChildren(res.data);
               }
            })
         },
         getStatus() {  //获取全部账号
            this.$HTTP.get(`/api/blade-system/dict/dictionary?code=employee_status`).then(res=> {
               if(res.code == 200) {
                  this.statusList = res.data;
               }
            })
         },
         //添加
         addPerson(){
@@ -185,24 +169,23 @@
               this.$refs.saveDialog.open('edit').setData(row)
            })
         },
         //查看
         table_show(row){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('show').setData(row)
            })
         handleSelectionChange (selection) {
            this.selection = selection;
         },
         handleSelectionChange() {},
         delPerson() {},
         changeDepartment() {
            this.departmentVisible = true;
         },
         changeTab(name) {
            if(name == 1) {
               this.leftActive = true;
            }else {
               this.leftActive = false;
         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} 条`);
@@ -265,7 +248,7 @@
      border-left: 0px;
   }
   .person-left-active {
      background-color: #3b8e8e;
      background-color: #409eff;
      color: #fff;
   }
   .person-left-search {
@@ -310,4 +293,43 @@
   .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>