update

src/components/pages/appStore/dialog/addAppDialog.vue

@@ -9,7 +9,8 @@
     >
       <div class="a-d-top">
         <div class="a-d-topTit">
-          <div>创建新应用</div>
+          <div v-if="type === 1">创建新应用</div>
+          <div v-else>修改应用</div>
         </div>
         <div class="a-d-t-right">
           <span @click.stop="close()">×</span>
@@ -79,9 +80,7 @@
       </div>
       <div class="bfd_bottom">
         <el-button @click="close()">取消</el-button>
-        <el-button type="primary" @click="submitBtn('ruleForm')"
-          >保存</el-button
-        >
+        <el-button type="primary" @click="submitBtn('ruleForm')">保存</el-button>
       </div>
     </el-dialog>
   </div>

src/components/pages/appStore/index.vue

@@ -89,15 +89,23 @@
             <div>{{ item.name }}</div>
             <span>{{ item.label }}</span>
           </div>
+					<!-- <div class="ac_c_i_t_popover" v-if="item.userid == userId">
+						<div class="ac_c_i_t_p_box" v-if="editAppCard === item.id" v-click-outside="handleBlur">
+							<div @click="updateApp(item)">修改</div>
+						</div>
+						<svg t="1732786015570" @click.stop="updateCard(item.id)" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9199" width="200" height="200"><path d="M192 443.733333c-38.4 0-68.266667 29.866667-68.266667 68.266667 0 38.4 29.866667 68.266667 68.266667 68.266667s68.266667-29.866667 68.266667-68.266667c0-38.4-29.866667-68.266667-68.266667-68.266667zM512 443.733333c-38.4 0-68.266667 29.866667-68.266667 68.266667 0 38.4 29.866667 68.266667 68.266667 68.266667s68.266667-29.866667 68.266667-68.266667c0-38.4-29.866667-68.266667-68.266667-68.266667zM832 443.733333c-38.4 0-68.266667 29.866667-68.266667 68.266667 0 38.4 29.866667 68.266667 68.266667 68.266667s68.266667-29.866667 68.266667-68.266667c0-38.4-34.133333-68.266667-68.266667-68.266667z" fill="#111111" p-id="9200"></path></svg>
+					</div> -->
+
+					
         </div>
         <div class="ac_c_i_bottom">
           <div>{{ item.detail }}</div>
           <span @click="openApp(item.url)">{{ item.url }}</span>
         </div>
       </div>
-			<div class="ac_c_empty" v-if="dataList.length === 0">
-				<span>暂无数据...</span>
-			</div>
+      <div class="ac_c_empty" v-if="dataList.length === 0">
+        <span>暂无数据...</span>
+      </div>
     </div>
     <addAppDialog
       ref="addAppDialogRef"
@@ -108,10 +116,31 @@
 </template>
 
 <script>
+const clickOutside = {
+  bind(el, binding) {
+    // 在元素上绑定一个点击事件监听器
+    el.clickOutsideEvent = function(event) {
+      // 检查点击事件是否发生在元素的内部
+      if (!(el === event.target || el.contains(event.target))) {
+        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
+        binding.value(event);
+      }
+    };
+    // 在文档上添加点击事件监听器
+    document.addEventListener("click", el.clickOutsideEvent);
+  },
+  unbind(el) {
+    // 在元素上解除点击事件监听器
+    document.removeEventListener("click", el.clickOutsideEvent);
+  }
+};
 import addAppDialog from "./dialog/addAppDialog.vue";
 export default {
   components: {
     addAppDialog
+  },
+	directives: {
+    "click-outside": clickOutside // 注册自定义指令
   },
   data() {
     return {
@@ -128,7 +157,8 @@ export default {
       org: this.$route.query["org"],
       oid: this.$route.query["oid"],
       getDataLoading: false,
-      dataList: []
+      dataList: [],
+			editAppCard:null
     };
   },
   methods: {
@@ -173,6 +203,29 @@ export default {
     addApp() {
       this.$refs.addAppDialogRef.open({ type: 1 });
     },
+    updateApp(data) {
+      this.$refs.addAppDialogRef.open({
+        type: 2,
+        form: {
+          id: data.id,
+          nname: data.name,
+          nlabel: data.label,
+          ndetail: data.detail,
+          nurl: data.url,
+          ntype: data.type,
+          njuri: data.juri,
+          nstand: data.stand,
+          njson: data.json
+        }
+      });
+    },
+		updateCard(id){
+			if(this.editAppCard === id)return this.editAppCard = null;
+			this.editAppCard = id;
+		},
+		handleBlur(){
+			this.updateCard(null);
+		},
     addAppSuccess(data, type) {
       if (type === 1) {
         //添加
@@ -206,9 +259,36 @@ export default {
             this.$message.error("添加失败");
           });
       } else if (type === 2) {
-        //编辑
-        console.log("编辑");
-        console.log(data);
+				let params = [
+					{
+						aid: data.id,
+						nname: data.nname, //app名称
+            nuserid: this.userId, //创建的用户ID
+            nlabel: data.nlabel, //app标签
+            ndetail: data.ndetail, //app简介
+            nurl: data.nurl, //app链接
+            ntype: data.ntype, //app类型
+            njuri: data.njuri, //app权限 1:我的 2:组织 3:所有人
+            nstand: "cn", //语言
+            njson: data.njson //其他信息
+					}
+				]
+				this.ajax
+          .post(this.$store.state.api + "update_appStore", params)
+          .then(res => {
+            if (res.data == 1) {
+              this.$message.success("修改成功");
+              this.$refs.addAppDialogRef.close(true);
+              this.getData();
+            } else {
+              this.$message.error("修改失败");
+              this.$refs.addAppDialogRef.loading = false;
+            }
+          })
+          .catch(err => {
+            console.log(err);
+            this.$message.error("修改失败");
+          });
       }
     },
     getTypeList() {
@@ -232,9 +312,9 @@ export default {
           this.$message.error("获取应用类型失败");
         });
     },
-		openApp(url){
-			window.open(url, '_blank');
-		},
+    openApp(url) {
+      window.open(url, "_blank");
+    },
     resetData() {
       this.searchText = "";
       this.selectJuri = 1;
@@ -341,9 +421,9 @@ export default {
   .ac_c_item {
     width: calc(100% / 5 - (15px * 4) / 5) !important;
   }
-	.ac_c_item:nth-child(5n) {
+  .ac_c_item:nth-child(5n) {
     margin-right: 0px !important;
-		/* background-color: red; */
+    /* background-color: red; */
   }
 }
 
@@ -379,25 +459,71 @@ export default {
   }
 }
 
-.ac_c_empty{
-	width: 100%;
-	height: 40%;
-	display: flex;
-	box-sizing: border-box;
-	padding-top: 2%;
-	justify-content: center;
-	/* align-items: center; */
+.ac_c_empty {
+  width: 100%;
+  height: 40%;
+  display: flex;
+  box-sizing: border-box;
+  padding-top: 2%;
+  justify-content: center;
+  /* align-items: center; */
 }
 
 .ac_c_i_top {
   width: 100%;
   height: 50px;
   display: flex;
+	position: relative;
   /* flex-direction: column; */
   /* justify-content: space-evenly; */
   /* background-color: red */
 }
 
+.ac_c_i_t_popover{
+	width: 30px;
+	height: 30px;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.ac_c_i_t_popover svg{
+	width: 25px;
+	height: 25px;
+	cursor: pointer;
+}
+
+.ac_c_i_t_p_box{
+	position: absolute;
+	height: auto;
+	top: 100%;
+	right: 0;
+	padding: 8px;
+	border-radius: 8px 0 8px 8px;
+	background-color: #fff;
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+	width: auto;
+}
+
+.ac_c_i_t_p_box > div{
+	width: 80px;
+	height: 30px;
+	cursor: pointer;
+	transition: .3s;
+	font-weight: bold;
+	font-size: 14px;
+	border-radius: 5px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.ac_c_i_t_p_box > div:hover{
+	background-color: #f2f4f7;
+}
+
 .ac_c_i_t_left {
   width: 50px;
   height: 50px;
@@ -468,6 +594,8 @@ export default {
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
-	cursor: pointer;
+  cursor: pointer;
 }
+
+
 </style>