From 1988d77f4df3c01a9137303e0c959b3442c14377 Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期一, 30 九月 2024 22:10:30 +0800 Subject: [PATCH] 1 --- src/views/master/person/main/personPerson.vue | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 104 insertions(+), 5 deletions(-) diff --git a/src/views/master/person/main/personPerson.vue b/src/views/master/person/main/personPerson.vue index 205b056..24db503 100644 --- a/src/views/master/person/main/personPerson.vue +++ b/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-09-24 15:47:04 * @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,12 +155,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 +213,32 @@ this.getOrganizationList(); //閮ㄩ棬 }, components: { - saveDialog, importTable + saveDialog, importTable,...ElementPlusIconsVue }, methods: { + avatarDel(index) { + var obj = this.tableData[index]; + obj.avatar = ""; + this.$HTTP.post(`/api/blade-cps/employee/submit`,obj).then(res=> { + this.searchPerson(); + }) + }, + 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) { @@ -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> -- Gitblit v1.9.3