编辑时间轴组件

gaoshp

2024-04-23 88dc89d715828ae485cd00772c0c690b58a7b650

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

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-08 11:03:11
 * @LastEditTime: 2024-04-10 15:37:41
 * @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
-->
@@ -17,12 +17,15 @@
            <el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
         </div>
         <div class="person-tree">
            千文科技
            <!-- 部门 -->
            <el-tree style="max-width: 600px" :data="titleList" :expand-on-click-node="false" default-expand-all :props="{label: 'name', children: 'children'}" class="treeActive" @node-click="titleListNode" />
            <!-- 岗位 -->
            <div v-for="(item,index) in titleList" :data-id="item.id" v-if="!leftActive" :class="{treeActive: item.active}" @click="selectbtn(index)">{{item.postName}}</div>
         </div>
      </div>
      <div class="person-person-right">
         <div class="right-top">
            <div class="right-title">部门：千文科技</div>
            <div class="right-title"><span v-if="leftActive">部门：千文科技</span></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"/>
@@ -37,6 +40,10 @@
         <div class="right-bottom"> 
            <el-button type="primary" @click="addPerson">+ 添加员工</el-button>
            <el-button type="primary" @click="changeDepartment">部门调整</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 class="right-table">
@@ -73,7 +80,7 @@
               <el-table-column fixed="right" label="操作" width="140">
                  <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>
                     <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                  </template>
               </el-table-column>
            </el-table>
@@ -81,10 +88,10 @@
               @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>
@@ -94,10 +101,8 @@
      <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 label="部门" prop="parentId">
                  <el-tree-select @change= "parentIdChange" v-model="departmentFrom.parentId" clearable placeholder="部门" default-expand-all check-on-click-nod :data="titleList" check-strictly :props="{ label: 'name' }" node-key="id" ref="parentTree" />
               </el-form-item>
            </el-col>
         </el-row>
@@ -107,34 +112,51 @@
         <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 存</el-button>
      </template>
   </el-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="handleSuccess" @closed="dialog.save=false"></save-dialog>
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
   import importTable from '@/layout/components/importTable.vue'
   import saveDialog from './save'
   export default {
      name: "personPerson",
      data(){
         return {
            uploadUrl: "/api/blade-cps/employee/import-employee",
            exportUrl: "/api/blade-cps/employee/export-template",
            titleList: [],
            delPersonModel: false,
            searchIcon: "el-icon-search",
            searchData: {
               current: 1,
               size: 15,
               total: 0,
               status: "1",
               total: "1",
               keywords: "",
               postId: "",
               organizationCode: "00001"
               postId: "",  //postId
               organizationCode: ""  //组织code
            },
            total: 0,
            isSaveing: false,
            groups: [],
            departmentFrom: {
               department: ""
            },
            departmentVisibleRules: {
               department:[
                  {required: true, message: '请选择部门'}
               ]
               parentId:[{required: true, message: '请选择部门'}]
            },
            departmentVisible: false,
            dialog: {
@@ -144,7 +166,11 @@
            input: '',
            statusList: [],
            input3: '',
            tableData: []
            tableData: [],
            selection: [],
            departmentFrom: {
               parentId: ""
            }
         }
      },
      created(){
@@ -152,12 +178,83 @@
      },
      mounted(){
         this.getStatus();
         this.searchPerson(); //员工列表
         this.getOrganizationList();  //部门
      },
      components: {
         saveDialog
         saveDialog,importTable
      },
      methods: {
         getExport() {
            this.$HTTP.get(`/api/blade-cps/employee/export-employee?`+this.$TOOL.qsStringify(this.searchData)).then(res=> {
               if(res.code == 200) {
                  window.open(res.data.link);
               }
            })
         },
         parentIdChange(val) {
            // var $parentId = this.$refs.parentTree.getCurrentNode().title;
            // this.depatmentForm.$parentId = $parentId;
         },
         titleListNode(data) {
            this.searchData.organizationCode = data.code;
            this.searchPerson();
         },
         selectbtn(index) {
            this.titleList.forEach(item=> {
               item.active = false;
            })
            this.titleList[index].active = true;
            if(this.leftActive) { //部门
               this.searchData.organizationCode = this.titleList[index].code;
               this.searchData.postId= "";
            }else {  //岗位
               this.searchData.organizationCode = "";
               this.searchData.postId= this.titleList[index].id;
            }
            this.searchPerson();
         },
         getOrganizationList() {  //部门
            this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res=> {
               if(res.code == 200) {
                  this.titleList = res.data;
                  this.titleList[0].active = true;
                  this.searchData.organizationCode = res.data[0].code;
                  this.searchPerson();
               }
            })
         },
         getPost() {  //岗位
            var obj = {
               current: 1,
               size: -1,
            }
            this.$HTTP.get(`/api/blade-system/post/page?`+this.$TOOL.qsStringify(obj)).then(res=> {
               if(res.code == 200) {
                  this.titleList = res.data.records;
                  this.titleList[0].active = true;
                  this.searchData.postId = res.data.records[0].id;
                  this.searchPerson();
               }
            })
         },
         delData(type) {
            this.$HTTP.post(`/api/blade-cps/employee/remove?ids=${this.selectId}&type=${type}`).then(res=> {
               if(res.code == 200) {
                  this.$message.success("操作成功");
                  this.delPersonModel = false;
                  this.selectId = "";
                  this.getOrganizationList();
               }
            })
         },
         personHandleSuccess() {
            if(this.leftActive) {
               this.changeTab(1);
            }else {
               this.changeTab(2);
            }
            this.searchPerson();
         },
         searchPerson() {
            this.$HTTP.get(`/api/blade-cps/employee/list?`+this.$TOOL.qsStringify(this.searchData)).then(res=> {
               if(res.code == 200) {
@@ -167,6 +264,7 @@
                     }
                  })
                  this.tableData = res.data.records;
                  this.total = res.data.total;
               }
            })
         },
@@ -178,7 +276,26 @@
            })
         },
         departmentSubmit() {
            this.departmentVisible=false;  //部门调整
            var employeeIds = [];
            this.selection.forEach(item=> {
               employeeIds.push(item.id);
            })
            this.$refs.dialogForm.validate(async (valid) => {
               if (valid) {
                  this.$HTTP.put(`/api/blade-cps/employee/change-organization?organizationId=${this.departmentFrom.parentId}&employeeIds=${employeeIds.join(",")}`).then(res=> {
                     if(res.code == 200) {
                        this.searchPerson();
                        this.departmentVisible=false;  //部门调整
                        this.departmentFrom.parentId = "";
                        this.$message.success("操作成功");
                     }else {
                        this.$alert(res.message, "提示", {type: 'error'});
                     }
                  })
               }else{
                  return false;
               }
            })
         },
         //添加
         addPerson(){
@@ -193,23 +310,57 @@
               this.$refs.saveDialog.open('edit').setData(row)
            })
         },
         //查看
         table_show(row){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('show').setData(row)
            })
         //删除
         table_del(row) {
            this.selectId = row.id;
            this.delPersonModel = true;
         },
         handleSelectionChange() {},
         delPerson() {},
         handleSelectionChange(selection) {
            this.selection = selection;
         },
         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;
         },
         changeDepartment() {
            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.departmentVisible = true;
         },
         changeTab(name) {
            this.searchData.current = 1;
            this.searchData.size = 15;
            this.searchData.organizationCode = "";
            this.searchData.postId= "";
            if(name == 1) {
               this.searchData.total = '0';
               this.leftActive = true;
            }else {
               this.getOrganizationList();
            }else {  //岗位
               this.searchData.total = '1';
               this.leftActive = false;
               this.getPost();
            }
         },
         handleSizeChange(val) {
@@ -281,10 +432,13 @@
      padding-bottom: 8px;
   }
   .person-tree {
      background-color: #d8e8e8;
      padding: 4px 18px;
      font-size: 14px;
      font-weight: 400;
   }
   .person-tree div {
      margin-bottom: 8px;
      padding: 4px 18px;
      cursor: pointer;
   }
   .right-top {
      display: flex;
@@ -299,6 +453,7 @@
      font-weight: bold;
      padding-bottom: 12px;
      margin-bottom: 8px;
      height: 37px;
   }
   .searchStatus {
      margin-right: 6px;
@@ -318,4 +473,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>