gaoshp
2024-11-03 dcc4992bd51e9ee4a97099cd3a15085f7e247f23
src/views/master/person/main/personPerson.vue
@@ -1,8 +1,8 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-09 21:01:06
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-10-09 13:56:01
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/master/person/main/personPerson.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -19,7 +19,7 @@
         <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" />
               :props="{ label: 'name', children: 'children' }" class="treeActive" @node-click="titleListNode" v-if="leftActive"/>
            <!-- 岗位 -->
            <div v-for="(item, index) in titleList" :data-id="item.id" v-if="!leftActive"
               :class="{ treeActive: item.active }" @click="selectbtn(index)">{{ item.postName }}</div>
@@ -53,6 +53,26 @@
            <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef"
               @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" />
               <el-table-column prop="phone" label="员工照片" width="150">
                  <template #default="scope">
                     <el-upload
                        :headers="authorization"
                        class="avatar-uploader"
                        action="/api/blade-resource/oss/endpoint/put-file"
                        :show-file-list="false"
                        :on-success="(file)=>handleAvatarSuccess(file,scope.$index)"
                        :before-upload="(file)=>beforeAvatarUpload(file,scope.$index)">
                        <div v-if="scope.row.avatar" style="position: relative;">
                           <img :src="scope.row.avatar" class="avatar">
                           <div class="el-icon-editDom">
                              <span class="el-icon-edit">编辑</span>
                              <span class="el-icon-del" @click.stop="avatarDel(scope.$index)">删除</span>
                           </div>
                        </div>
                        <el-icon v-else class="el-icon-plus avatar-uploader-icon"><Picture /></el-icon>
                     </el-upload>
                  </template>
               </el-table-column>
               <el-table-column prop="name" label="姓名" width="150"></el-table-column>
               <el-table-column prop="jobNumber" label="工号" width="150"></el-table-column>
               <el-table-column label="关联账号" width="120">
@@ -135,14 +155,20 @@
      @closed="dialog.save = false"></save-dialog>
</template>
<script>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
let icons = []
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   icons.push(key)
}
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",
         authorization: {},
         uploadUrl: "/api/smis/employee/import-employee",
         exportUrl: "/api/smis/employee/export-template",
         titleList: [],
         delPersonModel: false,
         searchIcon: "el-icon-search",
@@ -187,11 +213,34 @@
      this.getOrganizationList();  //部门
   },
   components: {
      saveDialog, importTable
      saveDialog, importTable,...ElementPlusIconsVue
   },
   methods: {
      avatarDel(index) {
         var obj = this.tableData[index];
         obj.avatar = "";
         this.$HTTP.post(`/api/smis/employee/submit`,obj).then(res=> {
            this.searchPerson();
         })
      },
      handleAvatarSuccess(file,index) {
         var obj = this.tableData[index];
         obj.avatar = file.data.link;
         this.$HTTP.post(`/api/smis/employee/submit`,obj).then(res=> {
            this.searchPerson();
         })
      },
      beforeAvatarUpload(file,index) {
         var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
         if (!isJPG) {
            this.$message.error('请上传图片!');
         }
         var TOKEN = this.$TOOL.cookie.get("TOKEN")
         this.authorization = {Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0','Blade-Auth': TOKEN}
         return isJPG;
      },
      getExport() {
         this.$HTTP.get(`/api/blade-cps/employee/export-employee?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
         this.$HTTP.get(`/api/smis/employee/export-employee?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
            if (res.code == 200) {
               window.open(res.data.link);
            }
@@ -220,7 +269,7 @@
         this.searchPerson();
      },
      getOrganizationList() {  //部门
         this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res => {
         this.$HTTP.get(`/api/smis/organization/tree?groupType=group_organization&groupCategory=1`).then(res => {
            if (res.code == 200) {
               this.titleList = res.data;
               this.titleList[0].active = true;
@@ -244,7 +293,7 @@
         })
      },
      delData(type) {
         this.$HTTP.post(`/api/blade-cps/employee/remove?ids=${this.selectId}&type=${type}`).then(res => {
         this.$HTTP.post(`/api/smis/employee/remove?ids=${this.selectId}&type=${type}`).then(res => {
            if (res.code == 200) {
               this.$message.success("操作成功");
               this.delPersonModel = false;
@@ -262,7 +311,7 @@
         this.searchPerson();
      },
      searchPerson() {
         this.$HTTP.get(`/api/blade-cps/employee/list?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
         this.$HTTP.get(`/api/smis/employee/list?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
            if (res.code == 200) {
               res.data.records.forEach(item => {
                  if (item.dictValue == "在职") {
@@ -288,7 +337,7 @@
         })
         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 => {
               this.$HTTP.put(`/api/smis/employee/change-organization?organizationId=${this.departmentFrom.parentId}&employeeIds=${employeeIds.join(",")}`).then(res => {
                  if (res.code == 200) {
                     this.searchPerson();
                     this.departmentVisible = false;  //部门调整
@@ -437,7 +486,7 @@
}
.person-left-active {
   background-color: #3b8e8e;
   background-color: #409eff;
   color: #fff;
}
@@ -541,3 +590,53 @@
   margin-right: 8px;
}
</style>
<style>
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
   }
   .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #c0c4cc;
   }
   .el-icon-editDom {
      position: absolute;
      left: 4px;
      top: 56px;
      font-weight: 700;
      color: #409eff;
   }
   .el-icon-editDom span {
      margin: 0;
      padding: 0;
      font-size: 12px;
      line-height: 18px;
      border: 1px solid #409eff;
      background: #fff;
      padding-left: 2px;
       padding-right: 2px;
      cursor: pointer;
   }
   .el-icon-editDom .el-icon-edit {
      margin-right: 4px;
   }
   .el-icon-editDom .el-icon-del {
   }
   .avatar {
      width: 80px;
      height: 80px;
      display: block;
   }
  </style>