编辑时间轴组件

gaoshp

2024-04-23 f28363d03c3539b0219c5b58ea8b7db37d50be6f

 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-03-29 18:27:53
 * @LastEditTime: 2024-04-03 14:46:31
 * @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
-->
@@ -11,21 +11,21 @@
      <el-tabs tab-position="left" style="height: 800px" class="demo-tabs">
         <el-tab-pane label="文件存储">
            <div class="tabTitle">文件存储</div>
            <el-form :model="ossForm" ref="ossForm" label-width="120px">
            <el-form :model="ossForm" label-width="120px">
               <el-row>
                  <el-col :span="24">
                     <el-form-item label="endpoint" prop="endpoint">
                     <el-form-item label="endpoint">
                        <el-input v-model="ossForm.endpoint" clearable></el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="acceskey" prop="acceskey">
                        <el-input v-model="ossForm.acceskey" clearable></el-input>
                     <el-form-item label="acceskey">
                        <el-input v-model="ossForm.accessKey" clearable></el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="secretkey" prop="secretkey">
                        <el-input v-model="ossForm.secretkey" clearable></el-input>
                     <el-form-item label="secretkey">
                        <el-input v-model="ossForm.secretKey" clearable></el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :span="24">
@@ -39,8 +39,8 @@
         <el-tab-pane label="应用设置">
            <div class="tabTitle">应用设置</div>
            <ul class="show-list">
               <li class="active">
                  <div class="edit">编辑</div>
               <li :class="{active: active.isA}" @click="changeLi('isA')">
                  <div class="edit" @click="editBtn('isA')">编辑</div>
                  <div class="logo">
                     <img src="http://116.63.155.153:83/api/static/images/cps.png">
                  </div>
@@ -49,12 +49,67 @@
                     <div class="domain">http://192.168.1.199</div>
                  </div>
               </li>
               <li>2</li>
               <li>3</li>
               <li :class="{active: active.isB}" @click="changeLi('isB')">
                  <div class="edit" @click="editBtn('isB')">编辑</div>
                  <div class="logo">
                     <img src="http://116.63.155.153:83/api/static/images/vision.png">
                  </div>
                  <div class="content">
                     <div class="name">大屏</div>
                     <div class="domain">http://192.168.1.199:31005</div>
                  </div>
               </li>
               <li :class="{active: active.isC}" @click="changeLi('isC')">
                  <div class="edit" @click="editBtn('isC')">编辑</div>
                  <div class="logo">
                     <img src="http://116.63.155.153:83/api/static/images/hmi.png">
                  </div>
                  <div class="content">
                     <div class="name">HMI</div>
                     <div class="domain"></div>
                  </div>
               </li>
            </ul>
            <el-form label-width="80px">
					
            </el-form>
            <el-card class="system-content">
                <template #header>
                  <div class="card-header">
                    <span v-if="!isEdit">应用详情</span>
                  <span v-if="isEdit">编辑应用</span>
                  <div v-if="isEdit">
                     <el-button @click="cencelBtn" >取 消</el-button>
                     <el-button type="primary" :loading="isSaveing" @click="sysSubmit">保 存</el-button>
                  </div>
                  </div>
                </template>
                <el-form :model="searchData" abel-width="120px">
                  <el-form-item label="系统展示" v-if="!isEdit">
                     <el-switch v-model="searchData.isShow" disabled/>
                  </el-form-item>
                  <el-form-item label="系统展示" v-if="isEdit">
                     <el-switch v-model="searchData.isShow"/>
                  </el-form-item>
                  <el-form-item label="应用名称" v-if="!isEdit">
                     <div>{{searchData.name}}</div>
                  </el-form-item>
                  <el-form-item label="应用名称" v-if="isEdit">
                     <el-input v-model="searchData.name" placeholder="应用名称" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="应用标识">
                     <div>{{searchData.code}}</div>
                  </el-form-item>
                  <el-form-item label="网页地址" v-if="!isEdit">
                     <div>{{searchData.domain}}</div>
                  </el-form-item>
                  <el-form-item label="网页地址" v-if="isEdit">
                     <el-input v-model="searchData.domain" placeholder="网页地址" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="上传图标">
                     <div>
                        <img :src="searchData.logo" style="width:66px;height:66px;">
                     </div>
                  </el-form-item>
               </el-form>
             </el-card>
         </el-tab-pane>
      </el-tabs>
   </div>
@@ -65,11 +120,27 @@
      name: "oss-main",
      data(){
         return {
            isSaveing: false,
            isEdit: false,
            active: {
               isA: true,
               isB: false,
               isC: false
            },
            searchData: {
               isShow: true,
               name: "",
               code: "",
               domain: "",
               logo: "",
               backgroundUrl: ""
            },
            ossForm: {
               endpoint: "",
               acceskey: "",
               secretkey: ""
            }
               accessKey: "",
               secretKey: ""
            },
            temData: []
         }
      },
      components: {},
@@ -77,12 +148,87 @@
         
      },
      mounted(){
			
         this.getOssUpdata();  //文件存储
         this.setting();  //应用设置
      },
      methods: {
         ossUpdata(){
				
         }
         cencelBtn() {
            this.isEdit=false;
            this.isSaveing = false;
         },
         sysSubmit() {
            this.isSaveing = true;
            var obj = {...this.searchData};
            if(obj.isShow == true) {
               obj.isShow = "1";
            }else {
               obj.isShow = "0";
            }
            this.$HTTP.put("/api/blade-system/application/update",obj).then(res=> {
               if(res.code == 200) {
                  this.$message({
                     message: "操作成功",
                     type: "success"
                  })
                  this.cencelBtn();
               }
            })
         },
         editBtn(name) {
            this.isEdit = true;
         },
         setting() {
            this.$HTTP.get("/api/blade-system/application/list").then(res=> {
               if(res.code == 200) {
                  res.data.forEach(item=> {
                     if(item.isShow == "1") {
                        item.isShow = true;
                     }else {
                        item.isShow = false;
                     }
                  })
                  this.temData = res.data;
                  this.searchData = this.temData[0];
               }
            })
         },
         changeLi(name) {
            for(var key in this.active) {
               if(key === name) {
                  this.active[name] = true;
               }else {
                  this.active[key] = false;
               }
               switch(name) {
                  case "isA":
                     this.searchData = this.temData[0];
                     break;
                  case "isB":
                     this.searchData = this.temData[1];
                     break;
                  case "isC":
                     this.searchData = this.temData[2];
                     break;
               }
            }
         },
         ossUpdata() {
            this.$HTTP.post("/api/blade-resource/oss/update",this.ossForm).then(res=> {
               if(res.code == 200) {
                  this.$message({
                     message: "更新成功",
                     type: "success"
                  })
               }
            })
         },
         getOssUpdata(){
            this.$HTTP.get("/api/blade-resource/oss/detail").then(res=> {
               if(res.code == 200) {
                  this.ossForm = res.data;
               }
            })
         }	
      }
   }
</script>
@@ -158,4 +304,21 @@
    word-wrap: break-word;
    word-break: break-all;
}
.system-content /deep/ .el-card__header{
   padding: 0px;
}
.system-content .card-header{
   border-bottom: 1px solid #ebeef5;
   padding: 12px 18px!important;
   position: relative;
}
.system-content .card-header span{
   font-size:13px;
   font-weight: 400px;
}
.system-content .card-header > div {
   position: absolute;
   top: 6px;
   right: 22px;
}
</style>