| | |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-03-26 10:28:33 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-04-03 14:46:31 |
| | | * @LastEditTime: 2024-05-06 16:26:56 |
| | | * @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 |
| | | --> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="企业LOGO"> |
| | | <div class="tabTitle">企业LOGO</div> |
| | | <span class="logotitle">上传logo</span> |
| | | <div class="logo1"> |
| | | <el-upload |
| | | class="avatar-uploader" |
| | | :headers="authorization" |
| | | action="/api/blade-resource/oss/endpoint/put-file" |
| | | :show-file-list="false" |
| | | :on-success="handleAvatarSuccess1" |
| | | :before-upload="beforeAvatarUpload" |
| | | type="0" |
| | | > |
| | | <img v-if="imageUrl1" :src="imageUrl1" class="avatar" /> |
| | | <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
| | | </el-upload> |
| | | <span>建议无底色、大小180*40px</span> |
| | | </div> |
| | | <div class="logo2"> |
| | | <el-upload |
| | | class="avatar-uploader" |
| | | :headers="authorization" |
| | | action="/api/blade-resource/oss/endpoint/put-file" |
| | | :show-file-list="false" |
| | | :on-success="handleAvatarSuccess2" |
| | | :before-upload="beforeAvatarUpload" |
| | | type="1" |
| | | > |
| | | <img v-if="imageUrl2" :src="imageUrl2" class="avatar" /> |
| | | <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
| | | </el-upload> |
| | | <span>建议无底色、大小180*40px</span> |
| | | </div> |
| | | |
| | | </el-tab-pane> |
| | | <el-tab-pane label="应用设置"> |
| | | <div class="tabTitle">应用设置</div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
| | | let icons = [] |
| | | for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
| | | icons.push(key) |
| | | } |
| | | export default { |
| | | name: "oss-main", |
| | | data(){ |
| | | return { |
| | | uploadData: {}, |
| | | logoType: "0", |
| | | authorization: {Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0"}, |
| | | imageUrl1: "", |
| | | imageUrl2: "", |
| | | isSaveing: false, |
| | | isEdit: false, |
| | | active: { |
| | |
| | | temData: [] |
| | | } |
| | | }, |
| | | components: {}, |
| | | components: {...ElementPlusIconsVue}, |
| | | created(){ |
| | | |
| | | }, |
| | | mounted(){ |
| | | this.getOssUpdata(); //文件存储 |
| | | this.setting(); //应用设置 |
| | | this.getFile(); //企业logo |
| | | }, |
| | | methods: { |
| | | getFile() { |
| | | this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> { |
| | | if(res.code == 200) { |
| | | this.uploadData = res.data; |
| | | this.imageUrl1 = res.data.list[0].link; |
| | | this.imageUrl2 = res.data.list[1].link; |
| | | } |
| | | }) |
| | | }, |
| | | handleAvatarSuccess1(resp, file) { |
| | | this.getFile(); |
| | | this.logoType = "0"; |
| | | if(this.imageUrl1) { |
| | | resp.uploadMethod = "edit"; |
| | | }else { |
| | | resp.uploadMethod = "add"; |
| | | } |
| | | this.handleAvatarSuccess(resp); |
| | | }, |
| | | handleAvatarSuccess2(resp, file) { |
| | | this.getFile(); |
| | | this.logoType = "1"; |
| | | if(this.imageUrl2) { |
| | | resp.uploadMethod = "edit"; |
| | | }else { |
| | | resp.uploadMethod = "add"; |
| | | } |
| | | this.handleAvatarSuccess(resp); |
| | | }, |
| | | handleAvatarSuccess(resp) { |
| | | var that = this; |
| | | this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> { |
| | | if(res.code == 200) { |
| | | // 先赋值 |
| | | that.uploadData = res.data; |
| | | that.imageUrl1 = res.data.list[0].link; |
| | | that.imageUrl2 = res.data.list[1].link; |
| | | //添加接口 |
| | | var url = "/api/blade-cps/enterprise/add"; |
| | | if(that.logoType == "0") { |
| | | Object.assign({},res.data.list[0]); |
| | | obj.type = "0"; |
| | | } |
| | | if(that.logoType == "1") { |
| | | obj.type = "1"; |
| | | } |
| | | if(resp.uploadMethod == "edit") { |
| | | url = "/api/blade-cps/enterprise/edit"; |
| | | } |
| | | that.$HTTP.post(url,resp.data).then(resJ=> { |
| | | if(resJ.code == 200) { |
| | | that.$message.success("操作成功"); |
| | | }else { |
| | | that.$alert(resJ.message, "提示", {type: 'error'}); |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | beforeAvatarUpload(file) { |
| | | var isJPG = file.type === 'image/jpeg'; |
| | | if (!isJPG) { |
| | | this.$message.error('格式错误,请重新上传!'); |
| | | } |
| | | return isJPG; |
| | | }, |
| | | cencelBtn() { |
| | | this.isEdit=false; |
| | | this.isSaveing = false; |
| | |
| | | top: 6px; |
| | | right: 22px; |
| | | } |
| | | .logotitle { |
| | | font-weight: 400; |
| | | font-size: 16px; |
| | | width: 140px; |
| | | text-align: center; |
| | | display: inline-block; |
| | | vertical-align: top; |
| | | } |
| | | .logo1,.logo2 { |
| | | display: inline-block; |
| | | margin-right: 20px; |
| | | } |
| | | .avatar-uploader /deep/ .el-upload { |
| | | border: 1px dashed #d9d9d9; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | .avatar-uploader /deep/ .el-upload:hover { |
| | | border-color: #409EFF; |
| | | } |
| | | .avatar-uploader-icon { |
| | | font-size: 28px; |
| | | color: #8c939d; |
| | | text-align: center; |
| | | } |
| | | .logo1 /deep/ .avatar-uploader-icon { |
| | | width: 178px; |
| | | height: 178px; |
| | | line-height: 178px; |
| | | } |
| | | .logo2 /deep/ .avatar-uploader-icon { |
| | | width: 92px; |
| | | height: 92px; |
| | | line-height: 92px; |
| | | } |
| | | .logo1 .avatar { |
| | | width: 178px; |
| | | height: 178px; |
| | | display: block; |
| | | } |
| | | .logo2 .avatar { |
| | | width: 92px; |
| | | height: 92px; |
| | | display: block; |
| | | } |
| | | </style> |