1

lzhe

2024-09-23 0d8f88948f14eb32809668fde55e594ab42e2bc0

1

 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-09-23 15:32:56
 * @LastEditTime: 2024-09-23 16:27:33
 * @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
-->
@@ -53,6 +53,20 @@
                <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)">
                                <img v-if="scope.row.avatar" :src="scope.row.avatar" class="avatar">
                                <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,12 +149,18 @@
        @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 {
            authorization: {},
            uploadUrl: "/api/blade-cps/employee/import-employee",
            exportUrl: "/api/blade-cps/employee/export-template",
            titleList: [],
@@ -187,9 +207,25 @@
        this.getOrganizationList();  //部门
    },
    components: {
        saveDialog, importTable
        saveDialog, importTable,...ElementPlusIconsVue
    },
    methods: {
        handleAvatarSuccess(file,index) {
            var obj = this.tableData[index];
            obj.avatar = file.data.link;
            this.$HTTP.post(`/api/blade-cps/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 => {
                if (res.code == 200) {
@@ -541,3 +577,29 @@
    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;
    }
    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
  </style>