1

lzhe

2024-05-07 df4c5ac38a1f287b7d0f48a558630cae70f6a690

 src/views/console/soam/oss-system.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-05-06 16:26:56
 * @LastEditTime: 2024-05-07 21:09:02
 * @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
-->
@@ -40,36 +40,19 @@
            <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"
               >
               <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">
                  <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"
               >
               <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">
                  <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>
@@ -146,11 +129,64 @@
               </el-form>
             </el-card>
         </el-tab-pane>
         <el-tab-pane label="授权">
            <div class="tabTitle">授权</div>
            <div class="license-detail">
               <div><span class="left">授予： </span>{{licenseDetail.account}}</div>
               <div><span class="left">授权方式：</span>永久授权</div>
               <div><span class="left">授权日期：</span>{{licenseDetail.applyDate}}~{{licenseDetail.expireDate}}</div>
               <div><span class="left">已授权模块：</span>{{licenseDetail.moduleNames.VISION}}|{{licenseDetail.moduleNames.CPS}}</div>
               <div><span class="left">设备标识：</span><span class="licenseCopy" @click="licenseCopy">复制</span></div>
            </div>
         </el-tab-pane>
         <el-tab-pane label="服务集成">
            <div class="tabTitle">服务集成</div>
            <div class="card">
               <div class="top">
                  <div class="title">
                     <img src="./logo.png" />
                     <span>企业微信</span>
                     <span class="taginfo" v-if="appType==1">已关联</span>
                     <div class="desc">CPS与企业微信关联，协作与沟通更加高效。绑定后将同步企业微信的人员名单和组织架构，并允许成员使用企业微信账号登录</div>
                  </div>
                  <el-button class="btn" @click="addOss(1)" v-if="appType!=1" :disabled="appType != 1">关联</el-button>
                  <el-button class="btn" @click="addOss(2)" v-if="appType==1" :disabled="appType != 1" type="danger" plain>解绑</el-button>
               </div>
            </div>
              <div class="card">
                 <div class="top">
                    <div class="title">
                       <img src="./logo.png"/>
                       <span >钉钉</span>
                     <span class="taginfo" v-if="appType==2">已关联</span>
                       <div class="desc">CPS与钉钉关联，协作与沟通更加高效。绑定后将同步钉钉的人员名单和组织架构，并允许成员使用钉钉账号登录</div>
                    </div>
                    <el-button class="btn" @click="addOss(2)" v-if="appType!=2" :disabled="appType != 2">关联</el-button>
                  <el-button class="btn" @click="addOss(2)" v-if="appType==2" :disabled="appType != 2" type="danger" plain>解绑</el-button>
                 </div>
               <div class="bottom">
                  <div class="info">
                     <div class="img">
                        <el-icon><Monitor /></el-icon>
                     </div>
                     <div class="info-right">
                        <div class="tag">
                           <div> 组织架构同步</div>
                           <span>立即同步</span>
                        </div>
                        <div class="time">上次同步时间：-</div>
                     </div>
                  </div>
               </div>
              </div>
         </el-tab-pane>
      </el-tabs>
      <save-dialog v-if="dialog.save" ref="saveDialog" @success="addOssSuccess" @closed="dialog.save=false"></save-dialog>
   </div>
</template>

<script>
   import saveDialog from './addOss'
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   let icons = []
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -160,6 +196,20 @@
      name: "oss-main",
      data(){
         return {
            appType: "",
            dialog: {
               save: false
            },
            copyStr: "",
            licenseDetail: {
               account: "",
               applyDate: "",
               expireDate: "",
               moduleNames: {
                  VISION: "",
                  CPS: ""
               }
            },
            uploadData: {},
            logoType: "0",
            authorization: {Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0"},
@@ -188,7 +238,7 @@
            temData: []
         }
      },
      components: {...ElementPlusIconsVue},
      components: {...ElementPlusIconsVue,saveDialog},
      created(){
         
      },
@@ -196,8 +246,48 @@
         this.getOssUpdata();  //文件存储
         this.setting();  //应用设置
         this.getFile();  //企业logo
         this.license(); //授权
         this.outer();  //服务集成
      },
      methods: {
         outer() {
            this.$HTTP.get("/api/blade-sync/outer-app-config/list").then(res=> {
               if(res.code == 200) {
                  this.appType = res.data[0].appType;
               }
            })
         },
         addOss(type) {
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open(type);
            })
         },
         addOssSuccess() {

         },
         licenseCopy() { 
            // 复制到剪贴板  
            navigator.clipboard.writeText(this.copyStr).then(() => {  
               console.log('拷贝完成');  
            }).catch(err => {  
               console.error('Failed to copy text: ', err);  
            });
         },
         license() {
            this.$HTTP.get("/api/blade-cps/init/license-detail").then(res=> {
               if(res.code == 200) {
                  res.data.moduleNames.VISION = JSON.stringify(res.data.moduleNames.VISION);
                  res.data.moduleNames.CPS = JSON.stringify(res.data.moduleNames.CPS);
                  this.licenseDetail = res.data;
               }
            })
            this.$HTTP.get("/api/blade-cps/init/license-device").then(res=> {  //设备标识
               if(res.code == 200) {
                  this.copyStr = res.data;
               }
            })
         },
         getFile() {
            this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> {
               if(res.code == 200) {
@@ -208,7 +298,6 @@
            })
         },
         handleAvatarSuccess1(resp, file) {
            this.getFile();
            this.logoType = "0";
            if(this.imageUrl1) {
               resp.uploadMethod = "edit";
@@ -218,7 +307,6 @@
            this.handleAvatarSuccess(resp);
         },
         handleAvatarSuccess2(resp, file) {
            this.getFile();
            this.logoType = "1";
            if(this.imageUrl2) {
               resp.uploadMethod = "edit";
@@ -232,22 +320,24 @@
            this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> {
               if(res.code == 200) {
                  // 先赋值
                  if(res.data.list.length == 0) res.data.list = [{},{}];
                  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]);
                     var upData = Object.assign({},res.data.list[0]);
                     obj.type = "0";
                  }
                  if(that.logoType == "1") {
                     obj.type = "1";
                     var upData = Object.assign({},res.data.list[1]);
                  }
                  if(resp.uploadMethod == "edit") {
                     url = "/api/blade-cps/enterprise/edit";
                  }
                  that.$HTTP.post(url,resp.data).then(resJ=> {
                  that.$HTTP.post(url,upData).then(resJ=> {
                     if(resJ.code == 200) {
                        that.$message.success("操作成功");
                     }else {
@@ -258,9 +348,9 @@
            })
         },
         beforeAvatarUpload(file) {
            var isJPG = file.type === 'image/jpeg';
            var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
            if (!isJPG) {
            this.$message.error('格式错误，请重新上传！');
               this.$message.error('格式错误，请重新上传！');
            }
            return isJPG;
         },
@@ -480,4 +570,103 @@
   height: 92px;
   display: block;
}
.license-detail {
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-size: 14px;
    padding-left: 70px;
}
.license-detail .left {
    width: 100px;
    display: inline-block;
    text-align: right;
    font-weight: 700;
}
.licenseCopy {
   color: #62a5a5;
   cursor: pointer;
}
.card {
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    margin-left: 12px;
    margin-right: 12px;
}
.card .top {
    margin-bottom: 20px;
    position: relative;
}
.card .top .title img {
    width: 42px;
    height: 42px;
    vertical-align: middle;
}
.card .top .title .desc {
    color: #bbb;
    font-size: 14px;
    margin: 20px 0;
}
.card .top .btn {
    position: absolute;
    right: 30px;
    top: 20px;
}
.card .top .title .taginfo {
    color: #3b8e8e;
    border: 1px solid #3b8e8e;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 10px;
    padding: 2px 8px;
}
.card .bottom {
    padding-top: 20px;
    border-top: 1px solid #ebebeb;
}
.card .bottom .info {
    border: 1px solid #ebebeb;
    width: 378px;
    display: flex;
    padding: 20px;
}
.card .bottom .info .img {
    background-color: #3b8e8e;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card .bottom .info .img, .card .bottom .info img {
    width: 46px;
    height: 46px;
}
.card .bottom .info .img i {
    font-size: 28px;
    color: #fff;
}
.card .bottom .info .info-right {
    flex: 1;
    display: inline-block;
    margin-left: 20px;
}
.card .bottom .info .info-right .tag {
    display: flex;
}
.card .bottom .info .info-right .tag div {
    flex: 1;
    font-size: 14px;
}
.card .bottom .info .info-right .tag span{
    color: #3b8e8e;
    cursor: pointer;
    padding: 0 !important;
    min-height: 14px !important;
}
.card .bottom .info .info-right .time {
    margin-top: 10px;
    color: #bbb;
    font-size: 14px;
}
</style>