feat(应用中心): 新增应用选择对话框组件并优化多选功能

添加应用选择对话框组件(appDialog.vue)，支持多选应用功能
为已选应用数量添加橙色高亮样式
更新多语言文件添加应用选择相关文本
重构应用选择逻辑，支持不同类型的选择模式

src/App.vue

@@ -545,4 +545,9 @@ html::-webkit-scrollbar-thumb {
   background: none;
   z-index: 99999;
 }
+
+.orange_number {
+  color: #FF9400;
+  font-weight: bold;
+}
 </style>

src/components/pages/pptEasy/addCourse3.vue

@@ -466,7 +466,7 @@
     <!-- Bilibili视频检索弹窗 -->
     <BilibiliSearchDialog :visible.sync="dialogVisibleBilibiliSearch" :courseName="courseName"
       :grade="selectedGradeName" @addVideo="handleBilibiliVideoAdd" />
-    <appDialog ref="appDialog" @success="selectAppSuccess"></appDialog>
+    <appDialog ref="appDialog" @success="selectAppSuccess"  @success2="selectAppSuccess2"></appDialog>
     <el-dialog :title="lang.ssCreateChoice" :visible.sync="dialogVisibleChoice" :append-to-body="true" width="800px"
       :before-close="done => {
         closePan(45);
@@ -914,7 +914,7 @@
 import "../../../common/aws-sdk-2.235.1.min.js";
 import { tools as toolsData } from "../../../common/tools.js";
 import $ from "jquery";
-import appDialog from "../components/appDialog.vue";
+import appDialog from "./dialog/appDialog.vue";
 import { myMixin } from "@/mixins/mixin.js";
 import { uploadFileMixin } from "../../tools/uploadFileMixin.js";
 import BilibiliSearchDialog from "./dialog/BilibiliSearchDialog2.vue";
@@ -2482,11 +2482,11 @@ export default {
         // this.dialogVisible8 = true;
       } else if (tool == 72) {
         this.$refs.appDialog.openG(
-          { url: "" },
+          [],
           "",
           "",
           "",
-          2
+          1
         );
       } else if (tool == 73) {
         this.line = "";
@@ -2625,6 +2625,21 @@ export default {
       this.editId = null;
       this.setPPtToolList();
     },
+    selectAppSuccess2({ data, type }) {
+      for (let i = 0; i < data.length; i++) {
+        let _data = { id: new Date().getTime(), tool: 72, title: data[i].name, brief: data[i].detail, json: data[i], icon: data[i].json.icon, url: data[i].url }
+        if (this.editId) {
+          let oldData = this.pptCourseJson.toolsList.find(i => i.id === this.editId);
+          _data.id = oldData.id;
+          this.pptCourseJson.toolsList.splice(this.pptCourseJson.toolsList.findIndex(i => i.id === this.editId), 1, _data);
+        } else {
+          this.pptCourseJson.toolsList.push(_data);
+          this.addContent(_data)
+        }
+      }
+      this.editId = null;
+      this.setPPtToolList();
+    },
     // 打开应用中心
     openApplicationCenter() {
       // 创建Cocorobo链接工具项

src/components/pages/pptEasy/commpont/aidia.vue

@@ -40,7 +40,7 @@
                     </div>
             </div>
             <div class="course_item_footer">
-                <div>{{ lang.ssSelectedCourse.replace(/\*/g, selectedCourseList.length) }}</div>
+                <div v-html="lang.ssSelectedCourse.replace(/\*/g, '<span class=&quot;orange_number&quot;>' + selectedCourseList.length + '</span>')"></div>
                 <div class="confirm_btn" @click="confirmAddCourse">
                     <img src="../../../../assets/stuImg/ai6dui.svg" alt="">
                     {{ lang.ssConfirm }}

src/components/pages/pptEasy/dialog/appDialog.vue

@@ -0,0 +1,886 @@
+<template>
+  <div class="app_dialog">
+    <el-dialog :visible.sync="dialogVisible" width="900px" :show-close="false" class="el-dialogClass dialog_diy"
+      :before-close="handleClose">
+      <template #title>
+        <div class="title_container">
+          <div>{{ lang.ssAppCenter }}</div>
+          <div class="close_btn" @click="handleClose">×</div>
+        </div>
+      </template>
+      <div class="ac_right" v-loading.lock="getDataLoading" :style="{overflow: getDataLoading ? 'hidden' : 'auto'}">
+        <div class="ac_header">
+          <div class="ac_h_bottom">
+            <div class="ac_h_b_selectList">
+              <div>
+                <el-select v-model="selectJuri" :placeholder="lang.ssSelectScope" @change="changeSelectType"
+                  style="width: 120px;margin-right: 10px;">
+                  <el-option v-for="item in selectList" :key="item.index" :label="item.label"
+                    :value="item.index"></el-option>
+                </el-select>
+                <el-select v-model="selectLabel" :placeholder="lang.ssSelectType" @change="changeSelectType"
+                  style="width: 110px;margin-right: 10px;">
+                  <el-option v-for="item in labelSelect" :key="item.value" :label="item.label"
+                    :value="item.value"></el-option>
+                </el-select>
+
+                <el-select v-model="statusType" :placeholder="lang.ssSelectStatus" @change="changeSelectType"
+                  style="width: 110px;margin-right: 10px;">
+                  <el-option v-for="item in statusList" :key="item.value" :label="item.label"
+                    :value="item.value"></el-option>
+                </el-select>
+              </div>
+
+              <div>
+                <el-input v-model="searchText" style="width: 250px;margin-right: 10px;"
+                  :placeholder="lang.ssEnterAppName" @keyup.enter.native="getData">
+                  <i slot="suffix" class="searchInputIcon el-icon-search" @click="getData"></i>
+                </el-input>
+              </div>
+            </div>
+
+            <div class="ac_h_b_typeList">
+              <span :class="{ ac_h_b_typeList_active: showType === '' }" @click="changeType('')">{{ lang.ssAll }}</span>
+              <span v-for="item in typeList" :key="item.id" :class="{ ac_h_b_typeList_active: showType === item.id }"
+                @click="changeType(item.id)">{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div :class="{'ac_content': showType !== ''}">
+
+
+          <template v-for="(item) in dataList">
+            <div class="ac_c_item" v-if="showType !== '' && !getDataLoading" :key="item.id"
+              :class="{ 'selected': appJson.id == item.id || selectAppObj.id == item.id || selectAppList.map(i => i.id).includes(item.id) }"
+              @click="checkApp(item)">
+              <img class="course_item_selected" src="../../../../assets/stuImg/ai6dui.svg"
+                v-if="appJson.id == item.id || selectAppObj.id == item.id || selectAppList.map(i => i.id).includes(item.id)"
+                alt="">
+              <div class="ac_c_item_img_container">
+                <img v-if="item.json.icon" :src="item.json.icon" class="ac_c_item_img" />
+                <svg v-else t="1732605901531" class="icon ac_c_item_img" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="4275">
+                  <path
+                    d="M179.2 153.6a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V204.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V204.8a153.6 153.6 0 0 1 153.6-153.6z m0 614.4a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V716.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V716.8a153.6 153.6 0 0 1 153.6-153.6z m611.84-403.4048a51.2 51.2 0 0 0-72.3968 0L646.144 232.2432a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968L791.04 159.744z m72.3968-72.3968l72.3968 72.3968a153.6 153.6 0 0 1 0 217.2416l-72.3968 72.3968a153.6 153.6 0 0 1-217.2416 0l-72.3968-72.3968a153.6 153.6 0 0 1 0-217.2416l72.3968-72.3968a153.6 153.6 0 0 1 217.2416 0zM699.7504 896a51.2 51.2 0 0 1 0 102.4A162.1504 162.1504 0 0 1 537.6 836.2496v-110.8992A162.1504 162.1504 0 0 1 699.7504 563.2h110.8992a162.1504 162.1504 0 0 1 162.1504 162.1504v8.448a51.2 51.2 0 0 1-102.4 0v-8.448c0-33.024-26.7264-59.7504-59.7504-59.7504h-110.8992c-33.024 0-59.7504 26.7264-59.7504 59.7504v110.8992c0 33.024 26.7264 59.7504 59.7504 59.7504z"
+                    fill="#2C6DD2" p-id="4276"></path>
+                  <path
+                    d="M791.4496 160a51.2 51.2 0 0 0-72.3968 0l-72.448 72.3968a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968l-72.3968-72.3968z"
+                    fill="#20C997" p-id="4277"></path>
+                </svg>
+              </div>
+              <div class="ac_c_item_name">
+                {{ item.name }}
+              </div>
+              <div class="ac_c_item_desc">
+                {{ item.detail }}
+              </div>
+              <div class="ac_c_item_tags">
+                <div class="ac_c_item_tag" v-if="item.label === 'workflow'">
+                  {{ lang.ssWorkflow }}
+                </div>
+                <div class="ac_c_item_tag" v-if="item.label === 'agent'">
+                  {{ lang.ssAgent }}
+                </div>
+                <div class="ac_c_item_tag" v-if="item.json.status === '1'">
+                  {{ lang.ssTest }}
+                </div>
+                <div class="ac_c_item_tag" v-if="item.json.status === '2'">
+                  {{ lang.ssStable }}
+                </div>
+              </div>
+            </div>
+          </template>
+
+
+          <div class="ac_c_typeCard" v-if="showType == ''">
+            <div class="ac_c_tc_item" v-for="(item2, index2) in typeList" :key="index2">
+              <div class="ac_c_tc_i_top">
+                <div>{{ item2.name }}</div>
+
+                <span @click="changeType(item2.id)">{{ lang.ssViewMore }}
+                  <img src="../../../../assets/icon/appStore/arrow.svg" />
+                </span>
+              </div>
+              <div :class="{'ac_content': !getDataLoading}">
+                <template v-for="(item, index) in dataList.filter(
+                  i => i.type == item2.id
+                )">
+                  <div class="ac_c_item" v-if="index < 8" :key="item.id" @click="checkApp(item)"
+                    :class="{ selected: appJson.id == item.id || selectAppObj.id == item.id || selectAppList.map(i => i.id).includes(item.id) }">
+                    <img class="course_item_selected" src="../../../../assets/stuImg/ai6dui.svg"
+                      v-if="appJson.id == item.id || selectAppObj.id == item.id || selectAppList.map(i => i.id).includes(item.id)"
+                      alt="">
+                    <div class="ac_c_item_img_container">
+                      <img v-if="item.json.icon" :src="item.json.icon" class="ac_c_item_img" />
+                      <svg v-else t="1732605901531" class="icon ac_c_item_img" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="4275">
+                        <path
+                          d="M179.2 153.6a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V204.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V204.8a153.6 153.6 0 0 1 153.6-153.6z m0 614.4a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V716.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V716.8a153.6 153.6 0 0 1 153.6-153.6z m611.84-403.4048a51.2 51.2 0 0 0-72.3968 0L646.144 232.2432a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968L791.04 159.744z m72.3968-72.3968l72.3968 72.3968a153.6 153.6 0 0 1 0 217.2416l-72.3968 72.3968a153.6 153.6 0 0 1-217.2416 0l-72.3968-72.3968a153.6 153.6 0 0 1 0-217.2416l72.3968-72.3968a153.6 153.6 0 0 1 217.2416 0zM699.7504 896a51.2 51.2 0 0 1 0 102.4A162.1504 162.1504 0 0 1 537.6 836.2496v-110.8992A162.1504 162.1504 0 0 1 699.7504 563.2h110.8992a162.1504 162.1504 0 0 1 162.1504 162.1504v8.448a51.2 51.2 0 0 1-102.4 0v-8.448c0-33.024-26.7264-59.7504-59.7504-59.7504h-110.8992c-33.024 0-59.7504 26.7264-59.7504 59.7504v110.8992c0 33.024 26.7264 59.7504 59.7504 59.7504z"
+                          fill="#2C6DD2" p-id="4276"></path>
+                        <path
+                          d="M791.4496 160a51.2 51.2 0 0 0-72.3968 0l-72.448 72.3968a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968l-72.3968-72.3968z"
+                          fill="#20C997" p-id="4277"></path>
+                      </svg>
+                    </div>
+                    <div class="ac_c_item_name">
+                      {{ item.name }}
+                    </div>
+                    <div class="ac_c_item_desc">
+                      {{ item.detail }}
+                    </div>
+                    <div class="ac_c_item_tags">
+                      <div class="ac_c_item_tag" v-if="item.label === 'workflow'">
+                        {{ lang.ssWorkflow }}
+                      </div>
+                      <div class="ac_c_item_tag" v-if="item.label === 'agent'">
+                        {{ lang.ssAgent }}
+                      </div>
+                      <div class="ac_c_item_tag" v-if="item.json.status === '1'">
+                        {{ lang.ssTest }}
+                      </div>
+                      <div class="ac_c_item_tag" v-if="item.json.status === '2'">
+                        {{ lang.ssStable }}
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
+
+                <div class="ac_c_empty" v-if="dataList.filter(i => i.type == item2.id).length === 0">
+                  <span>{{ lang.ssNoData }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="ac_c_empty" v-if="dataList.length === 0 && showType !== ''">
+            <span>{{ lang.ssNoData }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="course_item_footer">
+        <div v-html="lang.ssSelectedApp.replace(/\*/g, '<span class=&quot;orange_number&quot;>' + selectAppList.length + '</span>')"></div>
+        <div class="confirm_btn" @click="checkAppJson">
+          <img src="../../../../assets/stuImg/ai6dui.svg" alt="">
+          {{ lang.ssConfirm }}
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { over } from 'lodash';
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      appJson: {},
+      itemTaskIndex: 0,
+      toolIndex: 0,
+      unitIndex: 0,
+      showType: "",
+      searchText: "",
+      selectJuri: 5,
+      selectLabel: "",
+      typeList: [],
+      selectList: [],
+      statusList: [],
+      statusType: "",
+      labelSelect: [],
+      AreaType: '',
+      AreaSelect: [
+        { value: "cn", label: "cn" },
+        { value: "hk", label: "hk" },
+        { value: "com", label: "com" }
+      ],
+      userId: this.$route.query["userid"],
+      org: this.$route.query["org"],
+      oid: this.$route.query["oid"],
+      getDataLoading: false,
+      dataList: [],
+      recentUse: [],
+      collect: [],
+      editAppCard: null,
+      bannerObj: null,
+      userName: null,
+      controlsObj: null,
+      region: "cn",
+      type: 0,//0 工具  1学习内容添加
+      selectAppList: [],
+      selectAppObj: {},
+    };
+  },
+  watch: {
+    searchText: {
+      immediate: false,
+      handler() {
+        if (this.searchText === "") {
+          this.getData();
+        }
+      }
+    }
+  },
+  computed: {
+    showMenu() {
+      return data => {
+        let _result = false;
+        if (data && this.userId) {
+          if (
+            data.userid === this.userId ||
+            (data.json && data.json.copy === "1")
+          ) {
+            _result = true;
+          }
+        }
+        return _result;
+      };
+    }
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    async openG(appJson, unitIndex, itemTaskIndex, toolIndex, type = 0) {
+      this.selectAppList = [];
+      this.appJson = {};
+      this.selectAppObj = {};
+      if (type == 0) {
+        this.appJson = appJson;
+        this.itemTaskIndex = itemTaskIndex;
+        this.toolIndex = toolIndex;
+        this.unitIndex = unitIndex;
+      } else if (type == 2) {
+        this.selectAppObj = appJson;
+      }
+      console.log(type)
+      this.type = type;
+      const { data } = await this.ajax.get(this.$store.state.api + 'select_oidArea', { oid: this.oid });
+      this.region = data[0][0].area;
+      this.AreaType = data[0][0].area;
+      this.getAppStoreControl().then(_ => {
+        this.getData();
+        this.getTypeList();
+      });
+      this.dialogVisible = true;
+    },
+    checkAppJson() {
+      if (this.type == 0) {
+        if (!Object.keys(this.appJson).length) {
+          this.$message({ type: 'warning', message: this.lang.ssSelectAppFirst });
+          return
+        }
+        this.$parent.unitJson[this.unitIndex].chapterInfo[0].taskJson[this.itemTaskIndex].toolChoose[this.toolIndex].appJson = this.appJson
+        if (
+          this.$parent.unitJson[this.unitIndex].chapterInfo[0].taskJson[this.itemTaskIndex].toolChoose[this.toolIndex].tool != 72
+        ) {
+          this.$parent.addTools(72, this.itemTaskIndex, this.toolIndex);
+        }
+        this.dialogVisible = false
+        this.$message.success(this.lang.ssAddSuccess)
+      } else if (this.type == 1) {
+        this.$emit("success2", { data: JSON.parse(JSON.stringify(this.selectAppList)), type: this.type })
+        this.dialogVisible = false
+        this.selectAppList = [];
+      } else if (this.type == 2) {
+        this.$emit("success", { data: JSON.parse(JSON.stringify(this.selectAppObj)), type: this.type })
+        this.dialogVisible = false
+        this.selectAppObj = {};
+      }
+    },
+    changeType(newIndex) {
+      let flag = this.showType === newIndex;
+      this.showType = newIndex;
+      if (!flag) {
+        this.getData();
+      }
+    },
+    changeSelectType() {
+      this.getData();
+    },
+    resetData() {
+      this.searchText = "";
+      this.selectJuri = 3;
+      this.showType = "";
+      this.getData();
+    },
+    async openApp(item) {
+      window.open(item.url, "_blank");
+    },
+    checkApp(item) {
+      if (this.type == 0) {
+        if (this.appJson.id == item.id) {
+          this.appJson = {}
+        } else {
+          this.appJson = item
+        }
+      } else if (this.type == 1) {
+        if (this.selectAppList.map(i => i.id).includes(item.id)) {
+          this.selectAppList = this.selectAppList.filter(i => i.id != item.id)
+        } else {
+          this.selectAppList.push(item)
+        }
+      } else if (this.type == 2) {
+        if (this.selectAppObj.id == item.id) {
+          this.selectAppObj = {}
+        } else {
+          this.selectAppObj = item
+        }
+      }
+
+    },
+    getTypeList() {
+      let params = {
+        suserid: this.userId, //用户ID
+        sorg: this.org,
+        soid: this.oid,
+        sstand: this.lang.lang,
+        exportType:
+          this.controlsObj &&
+            this.controlsObj.exportTypeList &&
+            this.controlsObj.exportTypeList.length > 0
+            ? this.controlsObj.exportTypeList.join(",")
+            : ""
+      };
+
+      this.ajax
+        .get(this.$store.state.api + "select_appStoreType_exceptType", params)
+        .then(res => {
+          let data = res.data[0];
+          if (data.length > 0) {
+            // data.forEach(i => {
+            //   if (i.open == undefined) {
+            //     i.open = true;
+            //   }
+            // });
+            this.typeList = data;
+          }
+        })
+        .catch(err => {
+          console.log(err);
+          this.$message.error(this.lang.ssGetAppTypeFail);
+        });
+    },
+    getData() {
+      this.getDataLoading = true;
+      let params = {
+        uid: this.userId, //用户ID
+        name: this.searchText, //应用名称搜索
+        label: this.selectLabel, //应用的标签搜索
+        type: this.showType, //应用的类型
+        juri: this.selectJuri, //应用权限 1:我的  2：组织内  3：所有人
+        stand: this.lang.lang, //cn站还是hk站
+        status: this.statusType,
+        exportType:
+          this.controlsObj &&
+            this.controlsObj.exportTypeList &&
+            this.controlsObj.exportTypeList.length > 0
+            ? this.controlsObj.exportTypeList.join(",")
+            : ""
+      };
+
+      this.ajax
+        .get(this.$store.state.api + "select_appStore_exportType", params)
+        .then(res => {
+          this.getDataLoading = false;
+          let _data = res.data[0];
+          if (_data.length > 0) {
+            _data.forEach(i => {
+              if (i.json) {
+                i.json = JSON.parse(i.json);
+              }
+            });
+            this.dataList = _data;
+          } else {
+            this.dataList = [];
+          }
+        })
+        .catch(err => {
+          this.getDataLoading = false;
+          console.log(err);
+          this.$message.error(this.lang.ssGetAppFail);
+        });
+    },
+    async getAppStoreControl() {
+      return new Promise(resolve => {
+        let params = {
+          uid: this.userId,
+          org: this.org,
+          oid: this.oid
+        };
+
+        let controlsObj = {
+          logoUrl: "",
+          bannerUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2FFrame+30141733970358224.svg",
+          exportTypeList: []
+        };
+        this.ajax
+          .get(this.$store.state.api + "select_appStore_controls", params)
+          .then(res => {
+            let _data = res.data[0];
+            if (_data[0]) {
+              console.log(_data[0]);
+              controlsObj = JSON.parse(_data[0].json);
+            }
+            this.controlsObj = controlsObj;
+            resolve();
+          })
+          .catch(err => {
+            console.log(err);
+            this.controlsObj = controlsObj;
+            resolve();
+          });
+      });
+    },
+    praiseFn(item, type = 0) {
+      //点赞
+      if (type === 0) {
+        //点赞
+        let params = [
+          {
+            uid: this.userId,
+            type: 2,
+            aid: item.id,
+            json: ""
+          }
+        ];
+        this.ajax
+          .post(this.$store.state.api + "insert_appStoreSave", params)
+          .then(res => {
+            if (res.data) {
+              let _likeId = res.data[0][0].id;
+              this.dataList.find(i => i.id === item.id).likeCount += 1;
+              this.dataList.find(i => i.id === item.id).likeId = _likeId;
+              this.$message.success(this.lang.ssLikeSuccess);
+            }
+          })
+          .catch(e => {
+            this.$message.error(this.lang.ssLikeFail);
+          });
+      } else if (type === 1) {
+        //取消点赞
+        console.log("取消点赞👉：", item);
+        let params = [
+          {
+            sid: item.likeId
+          }
+        ];
+        this.ajax
+          .post(this.$store.state.api + "delete_appStoreSave", params)
+          .then(res => {
+            if (res.data) {
+              this.dataList.find(i => i.id === item.id).likeCount -= 1;
+              this.dataList.find(i => i.id === item.id).likeId = "";
+              this.$message.success(this.lang.ssCancelLikeOk);
+            }
+          })
+          .catch(e => {
+            console.log(e);
+            this.$message.error(this.lang.ssCancelLikeFail);
+          });
+      }
+    },
+    collectFn(item, type = 0) {
+      //收藏
+      if (type === 0) {
+        //收藏
+        console.log("收藏👉：", item);
+        let params = [
+          {
+            uid: this.userId,
+            type: 0,
+            aid: item.id,
+            json: ""
+          }
+        ];
+        this.ajax
+          .post(this.$store.state.api + "insert_appStoreSave", params)
+          .then(res => {
+            if (res.data) {
+              let _colletId = res.data[0][0].id;
+              this.dataList.find(i => i.id === item.id).collectCount += 1;
+              this.dataList.find(i => i.id === item.id).collectId = _colletId;
+              this.$message.success(this.lang.ssCollectSuccess);
+            }
+            this.getData();
+          })
+          .catch(e => {
+            console.log(e);
+            this.getData();
+            this.$message.error(this.lang.ssCollectFail);
+          });
+      } else if (type === 1) {
+        //取消收藏
+        console.log("取消收藏👉：", item);
+        let params = [
+          {
+            sid: item.collectId
+          }
+        ];
+        this.ajax
+          .post(this.$store.state.api + "delete_appStoreSave", params)
+          .then(res => {
+            if (res.data) {
+              this.dataList.find(i => i.id === item.id).collectCount -= 1;
+              this.dataList.find(i => i.id === item.id).collectId = "";
+              this.$message.success(this.lang.ssCancelCollectOk);
+            }
+            this.getData();
+          })
+          .catch(e => {
+            console.log(e);
+            this.$message.error(this.lang.ssCancelCollectFail);
+            this.getData();
+          });
+      }
+    }
+  },
+  mounted() {
+    this.selectList = [
+      { index: 5, label: this.lang.ssAllApps },
+      { index: 3, label: this.lang.ssOfficial },
+      { index: 2, label: this.lang.ssOrgInternal },
+      { index: 1, label: this.lang.ssMine }
+    ];
+    this.statusList = [
+      { value: "", label: this.lang.ssAllStatus },
+      { value: 1, label: this.lang.ssTest },
+      { value: 2, label: this.lang.ssStable }
+    ];
+    this.labelSelect = [
+      { value: "", label: this.lang.ssAllTypes },
+      { value: "agent", label: this.lang.ssAgent },
+      { value: "workflow", label: this.lang.ssWorkflow }
+    ];
+  }
+};
+</script>
+
+<style scoped>
+.app_dialog>>>.el-dialog {
+  border-radius: 15px;
+  overflow: hidden;
+}
+
+.title_container {
+  display: flex;
+  font-size: 16px;
+  font-weight: bold;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.close_btn {
+  cursor: pointer;
+  background-color: #F5F6F6;
+  padding: 3px 7px;
+  border-radius: 5px;
+}
+
+.app_dialog>>>.el-dialog__body {
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 660px;
+  overflow-y: auto;
+}
+
+.el-dialogClass>>>.el-dialog {
+  margin: 40px auto 0 !important;
+}
+
+.el-dialogClass>>>.el-dialog__body {
+  /* height: auto; */
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.dialog_diy>>>.el-dialog__header {
+  background: #fff !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__title {
+  color: #000;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+  color: #000;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #000;
+}
+
+.ac_right {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.ac_header {
+  width: 100%;
+  height: auto;
+  border-bottom: 1px solid #E5E5E5;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+
+
+
+.ac_h_bottom {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ac_h_b_selectList {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.ac_h_b_selectList .el-select {
+  border-radius: 10px;
+  background-color: #F5F6F6;
+}
+
+.ac_h_b_selectList .el-select .el-input__inner {
+  background-color: #FAFCFE;
+  border-radius: 10px;
+}
+
+.ac_h_b_typeList {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.ac_h_b_typeList>span {
+  font-size: 14px;
+  margin-right: 20px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+
+.ac_h_b_typeList_active {
+  color: #FF9400;
+  position: relative;
+}
+
+.ac_content {
+  width: 100%;
+  height: auto;
+}
+
+.ac_c_typeCard {
+  width: 100%;
+  height: auto;
+}
+
+.ac_c_item {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  /* height: 230px; */
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  position: relative;
+  border: 1px solid #E5E5E5;
+  cursor: pointer;
+}
+
+.ac_c_item.selected {
+  border: 2px solid #FF9400;
+}
+
+.ac_c_item_img {
+  width: 100%;
+  border-radius: 5px;
+  object-fit: contain;
+}
+
+.ac_c_item_name {
+  font-size: 14px;
+  font-weight: bold;
+  text-align: left;
+}
+
+.ac_c_item_desc {
+  font-size: 12px;
+  color: #666;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.ac_c_item_tags {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin-top: auto;
+}
+
+.ac_c_item_tag {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color: #F5F6F6;
+  color: #666;
+}
+
+.course_item_selected {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: #FF9400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  z-index: 1;
+}
+
+.ac_c_item_img_container {
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #E5E7EB;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.ac_c_item_img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.ac_content {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  /* min-height: 350px; */
+  overflow-y: auto;
+}
+
+.ac_c_empty {
+  width: 100%;
+  height: 40%;
+  display: flex;
+  box-sizing: border-box;
+  /* padding-top: 2%; */
+  justify-content: center;
+  color: #a1a1a1;
+  /* align-items: center; */
+}
+
+.course_item_footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  box-sizing: border-box;
+  border-top: 1px solid #E5E5E5;
+  margin-top: 20px;
+}
+
+.confirm_btn {
+  background-color: #FF9400;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 10px;
+  display: flex;
+  padding: 7px 10px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+}
+
+.confirm_btn img {
+  width: 22px;
+  height: 22px;
+  margin-right: 5px;
+}
+
+.searchInputIcon {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: 10px;
+  right: 5px;
+  font-size: 19px;
+  cursor: pointer;
+}
+
+.ac_c_tc_item {
+  width: 100%;
+  height: auto;
+}
+
+.ac_c_tc_i_top {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  /* padding: 0 20px; */
+}
+
+.ac_c_tc_i_top>div {
+  font-size: 26px;
+}
+
+.ac_c_tc_i_top>span {
+  display: flex;
+  align-items: center;
+  color: #a2a2a2;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.ac_c_tc_i_top>span>img {
+  width: 18px;
+  height: 18px;
+  margin-left: 5px;
+  transition: 0.3s;
+}
+
+.checkActive {
+  border: 2px solid #FF9400
+}
+</style>

src/lang/cn.json

@@ -2028,6 +2028,7 @@
   "ssCourseCenter":"课程中心",
   "ssCourseType":"课程类型",
   "ssSelectCourseType":"请选择课程类型",
-  "ssSelectedCourse":"已选择 * 个课程"
+  "ssSelectedCourse":"已选择 * 个课程",
+  "ssSelectedApp":"已选择 * 个应用"
 
 }

src/lang/en.json

@@ -2041,5 +2041,7 @@
   "ssCourseCenter":"Course Center",
   "ssCourseType":"Course Type",
   "ssSelectCourseType":"Please select course type",
-  "ssSelectedCourse":"Selected * courses"
+  "ssSelectedCourse":"Selected * courses",
+  "ssSelectedApp":"Selected * apps"
+
 }

src/lang/hk.json

@@ -2041,7 +2041,7 @@
   "ssCourseCenter":"課程中心",
   "ssCourseType":"課程類型",
   "ssSelectCourseType":"請選擇課程類型",
-  "ssSelectedCourse":"已選擇 * 個課程"
-
+  "ssSelectedCourse":"已選擇 * 個課程",
+  "ssSelectedApp":"已選擇 * 個應用"
 
 }