pbl-teacher-table/src/components/pages/appStore/views/appManagement.vue

<template>
  <div class="appManagement">
    <div class="ac_left">
      <saveCard
        title="最近使用"
        :data="recentUse"
        :type="1"
        @saveClick="openApp"
      />
      <saveCard title="收藏" :data="collect" :type="0" @saveClick="openApp" />
    </div>
    <div class="ac_right">
      <div class="ac_header">
        <!-- <div class="ac_h_top">
          <span class="ac_h_t_active">
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M14.0625 2.1875C11.9914 2.1875 10.3125 3.86643 10.3125 5.9375C10.3125 8.00857 11.9914 9.6875 14.0625 9.6875C16.1336 9.6875 17.8125 8.00857 17.8125 5.9375C17.8125 3.86643 16.1336 2.1875 14.0625 2.1875ZM11.5625 5.9375C11.5625 4.55679 12.6818 3.4375 14.0625 3.4375C15.4432 3.4375 16.5625 4.55679 16.5625 5.9375C16.5625 7.31821 15.4432 8.4375 14.0625 8.4375C12.6818 8.4375 11.5625 7.31821 11.5625 5.9375Z"
              />
              <path
                d="M2.5 3.75C2.5 3.05964 3.05964 2.5 3.75 2.5H8.125C8.81536 2.5 9.375 3.05964 9.375 3.75V8.125C9.375 8.81536 8.81536 9.375 8.125 9.375H3.75C3.05964 9.375 2.5 8.81536 2.5 8.125V3.75ZM3.75 3.75V8.125H8.125V3.75H3.75Z"
              />
              <path
                d="M2.5 11.875C2.5 11.1846 3.05964 10.625 3.75 10.625H8.125C8.81536 10.625 9.375 11.1846 9.375 11.875V16.25C9.375 16.9404 8.81536 17.5 8.125 17.5H3.75C3.05964 17.5 2.5 16.9404 2.5 16.25V11.875ZM3.75 11.875V16.25H8.125V11.875H3.75Z"
              />
              <path
                d="M10.625 11.875C10.625 11.1846 11.1846 10.625 11.875 10.625H16.25C16.9404 10.625 17.5 11.1846 17.5 11.875V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H11.875C11.1846 17.5 10.625 16.9404 10.625 16.25V11.875ZM11.875 16.25H16.25V11.875H11.875V16.25Z"
              />
            </svg>
            应用管理</span
          >
          <span @click="changeShowPage(1)">
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="20" height="20" fill="white" />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.70072 1.32632C9.88727 1.22456 10.1127 1.22456 10.2993 1.32632L17.1743 5.07632C17.3751 5.18584 17.5 5.39628 17.5 5.625V14.375C17.5 14.6037 17.3751 14.8142 17.1743 14.9237L10.2993 18.6737C10.1127 18.7754 9.88727 18.7754 9.70072 18.6737L2.82572 14.9237C2.62493 14.8142 2.5 14.6037 2.5 14.375V5.625C2.5 5.39628 2.62493 5.18584 2.82572 5.07632L9.70072 1.32632ZM3.75 6.79282V14.004L9.375 17.0722V14.1039L6.55344 12.4109C6.36519 12.298 6.25 12.0945 6.25 11.875V8.45949L3.75 6.79282ZM7.5 8.47887V10.7711L9.375 9.64613V7.35387L7.5 8.47887ZM10.625 7.35387V9.64613L12.5 10.7711V8.47887L10.625 7.35387ZM13.75 8.45949V11.875C13.75 12.0945 13.6348 12.298 13.4466 12.4109L10.625 14.1039V17.0722L16.25 14.004V6.79282L13.75 8.45949ZM15.668 5.67854L10 2.58693L4.33205 5.67854L6.8926 7.38557L9.67844 5.71407C9.87637 5.59531 10.1236 5.59531 10.3216 5.71407L13.1074 7.38557L15.668 5.67854ZM10 13.0211L11.9102 11.875L10 10.7289L8.08978 11.875L10 13.0211Z"
              />
            </svg>
            工作空间</span
          >

        </div> -->
        <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            v-show="false"
            style="position: absolute;right: 15px;"
            @click="addApp"
            >添加应用</el-button
          >
        <div class="ac_h_banner" v-if="bannerObj">
          <img :src="bannerObj.poster" alt="banner图" />
        </div>
        <div class="ac_h_bottom">
          <div class="ac_h_b_typeList">
            <span
              :class="{ ac_h_b_typeList_active: showType === '' }"
              @click="changeType('')"
              >全部</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 class="ac_h_b_selectList">
            <el-select
              v-model="selectJuri"
              placeholder="请选择显示范围"
              @change="changeSelectType"
              style="width: 150px;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="请选择类型"
              @change="changeSelectType"
              style="width: 120px;margin-right: 10px;"
            >
              <el-option
                v-for="item in labelSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              v-model="searchText"
              style="width: 200px;"
              placeholder="请输入应用名称"
              @keyup.enter.native="getData"
              clearable
            />
            <el-button
              type="primary"
              style="margin-left: 10px;"
              icon="el-icon-search"
              @click="getData"
            ></el-button>
            <el-button type="primary" @click="selectApp()">发布应用</el-button>
          </div>
        </div>
      </div>

      <div class="ac_content">
        <div class="ac_c_item" v-for="(item, index) in dataList" :key="item.id">
          <div class="ac_c_i_top" @click="openApp(item)">
            <div class="ac_c_i_t_left">
              <img v-if="item.json.icon" :src="item.json.icon" />
              <svg
                v-else
                t="1732605901531"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4275"
                width="200"
                height="200"
              >
                <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_i_t_right">
              <div class="ac_c_i_t_r_top">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="item.name"
                  placement="top"
                >
                  <span>{{ item.name }}</span>
                </el-tooltip>

                <div class="ac_c_i_t_popover" v-if="showMenu(item)">
                  <div
                    class="ac_c_i_t_p_box"
                    v-if="editAppCard === item.id"
                    v-click-outside="handleBlur"
                  >
                    <div
                      @click.stop="copyApp(item)"
                      v-if="item.json && item.json.copy === '1'"
                    >
                      复制
                    </div>
                    <div
                      @click.stop="updateApp(item)"
                      v-if="item.userid === userId"
                    >
                      修改
                    </div>
                    <div
                      @click.stop="delApp(item)"
                      v-if="item.userid === userId"
                    >
                      删除
                    </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_t_r_center">
                <span>@{{ item.username }}</span>
                <div v-if="item.label === 'workflow'">
                  <img
                    src="../../../../assets/icon/appStore/workflow.svg"
                    alt=""
                  />
                  工作流
                </div>
                <div v-if="item.label === 'agent'">
                  <img
                    src="../../../../assets/icon/appStore/agent.svg"
                    alt=""
                  />
                  智能体
                </div>
              </div>
              <div class="ac_c_i_t_r_bottom">
                {{ item.detail }}
              </div>
            </div>
          </div>
          <div class="ac_c_i_bottom">
            <div class="ac_c_i_b_left">
              <el-tooltip
                class="item"
                effect="light"
                content="被复制数"
                placement="top"
              >
                <div>
                  <img src="../../../../assets/icon/appStore/user_copy.svg" />
                  <span>{{ item.copyCount }}</span>
                </div>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                :content="item.likeId ? '取消点赞' : '点赞'"
                placement="top"
              >
                <div>
                  <img
                    :src="
                      require('../../../../assets/icon/appStore/praise_default.svg')
                    "
                    v-if="!item.likeId"
                    style="cursor: pointer;"
                    @click="praiseFn(item, 0)"
                  />
                  <img
                    :src="
                      require('../../../../assets/icon/appStore/praise_active.svg')
                    "
                    v-else
                    style="cursor: pointer;"
                    @click="praiseFn(item, 1)"
                  />
                  <span>{{ item.likeCount }}</span>
                </div>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                :content="item.collectId ? '取消收藏' : '收藏'"
                placement="top"
              >
                <div>
                  <img
                    src="../../../../assets/icon/appStore/collect_default.svg"
                    v-if="!item.collectId"
                    style="cursor: pointer;"
                    @click="collectFn(item, 0)"
                  />
                  <img
                    src="../../../../assets/icon/appStore/collect_active.svg"
                    v-else
                    style="cursor: pointer;"
                    @click="collectFn(item, 1)"
                  />
                  <span>{{ item.collectCount }}</span>
                </div>
              </el-tooltip>
            </div>
            <div class="ac_c_i_b_right" v-if="item.json.status">
              <span class="ac_c_i_b_r_type2" v-if="item.json.status === '1'"
                >测试</span
              >
              <span class="ac_c_i_b_r_type1" v-if="item.json.status === '2'"
                >稳定</span
              >
            </div>
          </div>
        </div>
        <!-- <div
          class="ac_c_item"
          v-for="(item, index) in dataList"
          :key="item.id"
          @click="openApp(item)"
        >
          <div class="ac_c_i_top">
            <div class="ac_c_i_t_left">
              <svg
                v-if="
                  isImageOrSvg(
                    typeof item.json == 'object' ? item.json.icon : ''
                  ) === 0
                "
                t="1732605901531"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4275"
                width="200"
                height="200"
              >
                <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>
              <span
                v-if="
                  isImageOrSvg(
                    typeof item.json == 'object' ? item.json.icon : ''
                  ) === 1
                "
                v-html="item.json.icon"
              ></span>
              <el-image
                v-if="
                  isImageOrSvg(
                    typeof item.json == 'object' ? item.json.icon : ''
                  ) === 2
                "
                style="width: 100%; height: 100%"
                :src="item.json.icon"
                fit="cover"
              ></el-image>
            </div>
            <div class="ac_c_i_t_right">
              <div>{{ item.name }}</div>
              <span>{{ item.label}}</span>
            </div>
            <div class="ac_c_i_t_popover">
              <div
                class="ac_c_i_t_p_box"
                v-if="editAppCard === item.id"
                v-click-outside="handleBlur"
              >
                <div
                  @click.stop="cancelCollectApp(item)"
                  v-if="collect.map(i => i.id).includes(item.id)"
                >
                  取消收藏
                </div>
                <div @click.stop="collectApp(item)" v-else>收藏</div>
                <div
                  @click.stop="copyApp(item)"
                  v-if="item.json && item.json.copy === '1'"
                >
                  复制
                </div>
                <div
                  @click.stop="updateApp(item)"
                  v-if="item.userid === userId"
                >
                  修改
                </div>
                <div @click.stop="delApp(item)" v-if="item.userid === userId">
                  删除
                </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>
          </div>
        </div> -->
        <div class="ac_c_empty" v-if="dataList.length === 0">
          <span>暂无数据...</span>
        </div>
      </div>
    </div>
    <addAppDialog
      ref="addAppDialogRef"
      :typeList="typeList"
      @success="addAppSuccess"
    />
    <selectAppDialog ref="selectAppDialogRef" @success="selectAppSuccess" />
    <releaseAppDialog
      ref="releaseAppDialogRef"
      :typeList="typeList"
      @success="releaseAppSuccess"
    />
  </div>
</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";
import saveCard from "../components/saveCard.vue";
import selectAppDialog from "../dialog/selectAppDialog.vue";
import releaseAppDialog from "../dialog/releaseAppDialog.vue";
// import collectCard from "./dialog/collectCard.vue";
// import recentUseCard from "./dialog/recentUseCard.vue";
export default {
  components: {
    addAppDialog,
    saveCard,
    selectAppDialog,
    releaseAppDialog
    // collectCard,
    // recentUseCard
  },
  directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  data() {
    return {
      showType: "",
      searchText: "",
      selectJuri: 3,
      selectLabel: "",
      typeList: [],
      selectList: [
        { index: 3, label: "所有组织" },
        { index: 2, label: "组织内" },
        { index: 1, label: "我的" },
        // { index: 98,label:"已发布"},
        // { index: 99,label:"未发布"},
      ],
      labelSelect: [
        { value: "", label: "全部类型" },
        { value: "agent", label: "智能体" },
        { value: "workflow", label: "工作流" }
      ],
      userId: this.$route.query["userid"],
      org: this.$route.query["org"],
      oid: this.$route.query["oid"],
      getDataLoading: false,
      dataList: [],
      recentUse: [],
      collect: [],
      editAppCard: null,
      bannerObj: null
    };
  },
  computed: {
    isImageOrSvg() {
      return value => {
        let _result = 0; //啥也不是
        if (value) {
          const svgPattern = /<svg.*<\/svg>/;
          const imagePattern = /\.(jpeg|jpg|gif|png|svg|bmp|webp)$/i; // 图片链接的正则表达式
          const urlPattern = /^(http|https):\/\/[^ "]+$/; // 网络地址的正则表达式

          if (svgPattern.test(value)) {
            _result = 1;
          } else if (urlPattern.test(value) && imagePattern.test(value)) {
            _result = 2;
          }
        }
        return _result;
      };
    },
    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: {
    changeType(newIndex) {
      let flag = this.showType === newIndex;
      this.showType = newIndex;
      if (!flag) {
        this.getData();
      }
    },
    changeSelectType() {
      this.getData();
    },
    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: "cn" //cn站还是hk站
      };

      this.ajax
        .get(this.$store.state.api + "select_appStore", 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("获取应用失败");
        });
    },
    addApp() {
      this.$refs.addAppDialogRef.open({ type: 1 });
    },
    selectApp() {
      this.$refs.selectAppDialogRef.open();
    },
    selectAppSuccess(data) {
      if (data) {
        this.$refs.selectAppDialogRef.close();
        this.$refs.releaseAppDialogRef.open({
          form: {
            id: data.id,
            name: data.name,
            label: data.label,
            detail: data.detail,
            url: data.url,
            type: data.type,
            juri: data.juri,
            stand: data.stand,
            json: data.json
          }
        });
      }
    },
    updateApp(data) {
      this.$refs.addAppDialogRef.open({
        type: 2,
        form: {
          id: data.id,
          name: data.name,
          label: data.label,
          detail: data.detail,
          url: data.url,
          type: data.type,
          juri: data.juri,
          stand: data.stand,
          json: data.json
        }
      });
    },
    // 收藏APP
    // collectApp(item) {
    //   this.editAppCard = null;
    //   this.insertSave(item, 0);
    // },
    //复制app
    copyApp(item) {
      this.$confirm(`确定复制《${item.name}》这个应用至我的列表吗？`, "复制", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = [
            {
              name: `${item.name}_copy`, //app名称
              userid: this.userId, //创建的用户ID
              label: item.label, //app标签
              detail: item.detail, //app简介
              url: item.url, //app链接
              type: item.type, //app类型
              juri: "1", //app权限 1:我的 2:组织 3:所有人
              stand: "cn", //语言
              json: JSON.stringify(item.json) //其他信息
            }
          ];
          this.ajax
            .post(this.$store.state.api + "insert_appStore", params)
            .then(res => {
              if (res.data == 1) {
                this.$message.success("复制成功,已添加至我的列表。");
                this.getData();
                this.insertSave(item, 3);
              } else {
                this.$message.error("复制失败");
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error("复制失败");
            });
        })
        .catch(_ => {
          console.log("取消复制");
        });
    },
    // 取消收藏
    cancelCollectApp(item) {
      this.editAppCard = null;
      let _data = this.collect.find(i => i.id === item.id);
      if (_data) {
        let params = [
          {
            sid: _data.sid
          }
        ];
        this.ajax
          .post(this.$store.state.api + "delete_appStoreSave", params)
          .then(res => {
            if (res.data) {
              this.$message.success("取消收藏成功");
            }
            this.getCollect();
          })
          .catch(e => {
            console.log(e);
            this.$message.error("取消收藏失败");
            this.getCollect();
          });
      } else {
        this.$message.error("取消收藏失败");
        this.getCollect();
      }
    },
    updateCard(id) {
      if (this.editAppCard === id) return (this.editAppCard = null);
      this.editAppCard = id;
    },
    handleBlur() {
      this.updateCard(null);
    },
    addAppSuccess(data, type) {
      if (type === 1) {
        //添加
        let params = [
          {
            name: data.name, //app名称
            userid: this.userId, //创建的用户ID
            label: data.label, //app标签
            detail: data.detail, //app简介
            url: data.url, //app链接
            type: data.type, //app类型
            juri: data.juri, //app权限 1:我的 2:组织 3:所有人
            stand: "cn", //语言
            json: JSON.stringify(data.json) //其他信息
          }
        ];
        this.ajax
          .post(this.$store.state.api + "insert_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("添加失败");
          });
      } else if (type === 2) {
        let params = [
          {
            aid: data.id,
            name: data.name, //app名称
            userid: this.userId, //创建的用户ID
            label: data.label, //app标签
            detail: data.detail, //app简介
            url: data.url, //app链接
            type: data.type, //app类型
            juri: data.juri, //app权限 1:我的 2:组织 3:所有人
            stand: "cn", //语言
            json: JSON.stringify(data.json) //其他信息
          }
        ];
        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("修改失败");
          });
      }
    },
    releaseAppSuccess(data) {
      this.$refs.releaseAppDialogRef.loading = true;
      let params = [
        {
          aid: data.id,
          name: data.name, //app名称
          userid: this.userId, //创建的用户ID
          label: data.label, //app标签
          detail: data.detail, //app简介
          url: data.url, //app链接
          type: data.type, //app类型
          juri: data.juri, //app权限 1:我的 2:组织 3:所有人
          stand: "cn", //语言
          json: JSON.stringify(data.json) //其他信息
        }
      ];
      this.ajax
        .post(this.$store.state.api + "update_appStore", params)
        .then(res => {
          if (res.data == 1) {
            this.$message.success("发布成功");
            this.$refs.releaseAppDialogRef.close(true);
            this.getData();
          } else {
            this.$message.error("发布失败");
            this.$refs.releaseAppDialogRef.loading = false;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("修改失败");
        });
    },
    getTypeList() {
      let params = {
        suserid: this.userId, //用户ID
        sorg: this.org,
        soid: this.oid,
        sstand: "cn"
      };

      this.ajax
        .get(this.$store.state.api + "select_appStoreType", params)
        .then(res => {
          let data = res.data[0];
          if (data.length > 0) {
            this.typeList = data;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取应用类型失败");
        });
    },
    openApp(item, type = 0) {
      window.open(item.url, "_blank");
      if (
        !(this.recentUse.length > 0 && item.id === this.recentUse[0].id) &&
        type === 0
      ) {
        this.insertSave(item, 1);
      }
    },

    resetData() {
      this.searchText = "";
      this.selectJuri = 3;
      this.showType = "";
      this.getData();
    },
    getRecentUse() {
      let params = {
        uid: this.userId,
        type: 1,
        limit: 10
      };

      this.ajax
        .get(this.$store.state.api + "select_appStoreSave", params)
        .then(res => {
          let data = res.data[0];
          if (data.length > 0) {
            data.forEach(i => {
              if (i.json) {
                i.json = JSON.parse(i.json);
              }
            });
            this.recentUse = data;
          } else {
            this.recentUse = [];
          }
        })
        .catch(err => {
          console.log(err);
          console.log("获取最近使用失败");
          // this.$message.error("获取收藏应用失败")
        });
    },
    getCollect() {
      let params = {
        uid: this.userId,
        type: 0,
        limit: 0
      };
      this.ajax
        .get(this.$store.state.api + "select_appStoreSave", params)
        .then(res => {
          let data = res.data[0];
          if (data.length > 0) {
            data.forEach(i => {
              if (i.json) {
                i.json = JSON.parse(i.json);
              }
            });
            this.collect = data;
          } else {
            this.collect = [];
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取收藏应用失败");
        });
    },
    insertSave(item, type) {
      return new Promise(resolve => {
        let params = [
          {
            uid: this.userId,
            type: type,
            aid: item.id,
            json: ""
          }
        ];

        this.ajax
          .post(this.$store.state.api + "insert_appStoreSave", params)
          .then(res => {
            if (res.data) {
              if (type === 1) {
                resolve(1);
              }
            }
          })
          .catch(err => {
            resolve(0);
            console.log(err);
          });
      });
    },
    delApp(item) {
      this.$confirm(`确定要删除《${item.name}》这个应用吗！`, `确定删除应用`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = [
            {
              uid: this.userId,
              aid: item.id
            }
          ];
          this.ajax
            .post(this.$store.state.api + "delete_appStore", params)
            .then(res => {
              if (res.data) {
                this.$message.success("删除成功");
                this.getData();
              } else {
                this.$message.error("删除失败");
              }
              if(this.collect.findIndex(i=>i.id == item.id)!=-1){
                this.getCollect()
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    changeShowPage(newPage) {
      this.$emit("changeShowCard", newPage);
    },
    getBanner() {
      let params = {
        uid: this.userId,
        oid: this.oid,
        org: this.org,
        type: 4
      };

      this.ajax
        .get(this.$store.state.api + "select_bannerByoidORorg", params)
        .then(res => {
          let _data = res.data[0];
          if (_data[0]) {
            this.bannerObj = _data[0];
          } else {
            this.bannerObj = null;
          }
        })
        .catch(e => {
          console.log("获取banner图失败");
          console.log(e);
        });
    },
    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("点赞成功");
            }
          })
          .catch(e => {
            this.$message.error("点赞失败");
          });
      } 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("取消点赞成功");
            }
          })
          .catch(e => {
            console.log(e);
            this.$message.error("取消点赞失败");
          });
      }
    },
    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.getCollect();
          })
          .catch(e => {
            console.log(e);
            this.getCollect();
            this.$message.error("收藏失败");
          });
      } 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.getCollect();
          })
          .catch(e => {
            console.log(e);
            this.$message.error("取消收藏失败");
            this.getCollect();
          });
      }
    }
  },
  mounted() {
    this.getTypeList();
    this.getData();
    this.getCollect();
    this.getRecentUse();
    this.getBanner();
  }
};
</script>

<style scoped>
.appManagement {
  width: 100vw;
  height: 100vh;
  background-color: #f2f4f7;
  margin: 0;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.ac_left {
  /* width: 280px;
  min-width: 280px; */
  width: clamp(150px, 12vw, 280px);
  min-width: 150px;
  margin-right: 20px;
  height: 100%;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
}

.ac_right {
  flex: 1;
  min-width: 800px;
  height: 100%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.ac_header {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.ac_h_top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  border-bottom: 1px solid #eeeeee;

  position: relative;
  justify-content: center;
}

.ac_h_top > span {
  font-size: 22px;
  position: relative;
  margin-right: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.ac_h_top > span > svg {
  width: 22px;
  height: 22px;
  fill: #1a1a1a;
  margin-right: 10px;
}

.ac_h_t_active {
  color: #0354d7;
}

.ac_h_t_active > svg {
  fill: #0354d7 !important;
}

/* .ac_h_t_active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background-color: #409eff;
  left: 0;
  bottom: -5px;
} */

.ac_h_banner {
  width: 100%;
  height: clamp(100px, 20vh, 300px);
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
}

.ac_h_banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.ac_h_bottom {
  width: 100%;
  height: auto;
  padding: 10px 15px 10px 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ac_h_b_typeList {
  width: calc(100% - 400px);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.ac_h_b_typeList > span {
  font-size: 18px;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

.ac_h_b_typeList_active {
  color: #007aff;
}

.ac_h_b_selectList {
  margin-left: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.ac_content {
  width: 100%;
  flex: 1;
  height: auto;
  margin-top: 10px;
  overflow: auto;
  min-height: 200px;
}

.ac_c_item {
  width: calc(100% / 4 - (15px * 4) / 4);
  height: 250px;
  background-color: #fff;
  border-radius: 10px;
  /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */
  box-sizing: border-box;
  padding: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  float: left;
  border: solid 1px #e7e7e7;
  transition: .2s;

  /* cursor: pointer; */
}

.ac_c_item:hover {
  box-shadow: 0px 8px 10px -5px #00000014;

  box-shadow: 0px 16px 24px 2px #0000000a;

  box-shadow: 0px 6px 30px 5px #0000000d;
}

@media screen and (min-width: 1400px) {
  .ac_c_item {
    width: calc(100% / 4 - (15px * 3) / 4) !important;
  }
  .ac_c_item:nth-child(4n) {
    margin-right: 0px !important;
    /* background-color: red; */
  }
}

@media screen and (max-width: 1380px) {
  .ac_c_item {
    width: calc(100% / 4 - (15px * 3) / 4) !important;
  }

  .ac_c_item:nth-child(4n) {
    margin-right: 0px !important;
  }

  /* .ac_c_item:nth-child(5n) {
    margin-right: 0 !important;
  } */
}

@media screen and (max-width: 1080px) {
  .ac_c_item {
    width: calc(100% / 3 - (15px * 2) / 3) !important;
  }

  .ac_c_item:nth-child(5n) {
    margin-right: 15px !important;
  }

  .ac_c_item:nth-of-type(4n) {
    margin-right: 15px !important;
  }

  .ac_c_item:nth-child(3n) {
    margin-right: 0 !important;
  }
}

.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%;
  display: flex;
  height: calc(100% - 40px);
  cursor: pointer;
}

.ac_c_i_t_left {
  width: 100px;
  min-width: 100px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 10px;
}

.ac_c_i_t_left > svg {
  width: 100%;
  height: auto;
}

.ac_c_i_t_left > img {
  width: 100%;
  object-fit: cover;
  height: 80px;
}

.ac_c_i_t_right {
  flex: 1;
  width: calc(100% - 100px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ac_c_i_t_right > div {
  width: 100%;
}

.ac_c_i_t_r_top {
  height: 40px;
  display: flex;
  align-items: flex-end;
  position: relative;
  font-size: 1.3em;
  font-weight: bold;
  box-sizing: border-box;
  padding-bottom: 2px;
}

.ac_c_i_t_r_top > span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac_c_i_t_popover {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.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: 0.3s;
  font-size: 0.7em;
  border-radius: 5px;
  font-weight: 100;
  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_r_center {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ac_c_i_t_r_center > span {
  display: block;
  max-width: calc(100% - 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac_c_i_t_r_center > div {
  width: 75px;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  background-color: #f3f3f3;
  color: #00000066;
  border-radius: 3px;
}

.ac_c_i_t_r_center > div > img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.ac_c_i_t_r_bottom {
  max-width: 100%;
  max-height: calc(100% - 30px - 40px - 20px);
  margin-top: 10px;
  margin-bottom: 10px;
  color: #00000099;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac_c_i_bottom {
  width: 100%;
  height: 40px;
  padding-top: 10px;
  box-sizing: border-box;
  border-top: solid 2px #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ac_c_i_b_left {
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: auto;
  height: 100%;
}

.ac_c_i_b_left > div {
  /* margin-right: 20px; */
  display: flex;
  align-items: center;
}

.ac_c_i_b_left > div > img {
  width: 22px;
  height: 22px;
}

.ac_c_i_b_left > div > span {
  margin-left: 5px;
  color: #00000099;
  cursor: default;
}

.ac_c_i_b_right {
  display: flex;
  align-items: center;
  width: 70px;
  height: 100%;
  justify-content: flex-end;
}

.ac_c_i_b_right > span {
  width: 60px;
  height: 100%;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ac_c_i_b_r_type1 {
  background-color: #17c469;
  color: #fff;
}

.ac_c_i_b_r_type2 {
  background-color: #ffcf33;
  color: #000;
}

/* .ac_c_i_top {
  width: 100%;
  height: 50px;
  display: flex;
  position: relative;
}

.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: 0.3s;
  font-weight: bold;
  font-size: 0.9em;
  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;
  border-radius: 8px;
  margin-right: 10px;
  box-sizing: border-box;
  padding: 5px;
}

.ac_c_i_t_left > svg {
  width: 100%;
  height: 100%;
}

.ac_c_i_t_left > span {
  width: 100%;
  height: 100%;
  display: block;
}

.ac_c_i_t_left > span >>> svg {
  width: 100%;
  height: 100%;
}

.ac_c_i_t_right {
  width: calc(100% - 60px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.ac_c_i_t_right > div {
  font-size: 1.4em;
  font-weight: bold;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac_c_i_t_right > span {
  font-size: 1.1em;
  color: #8991a1;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac_c_i_bottom {
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 15px;
}

.ac_c_i_bottom > div {
  font-size: 1em;
  color: #8991a1;
  width: 100%;
  height: calc(100%);
  display: -webkit-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}

.ac_c_i_bottom > span {
  margin-top: 5px;
  font-size: 1em;
  color: #409eff;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
} */
</style>