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

<template>
  <div class="workSpace">
    <div class="ac_left">
      <saveCard
        title="最近使用"
        :data="recentUse"
        :type="0"
        @saveClick="openApp"
      />
      <saveCard title="收藏" :data="collect" :type="1" @saveClick="openApp" />
    </div>
    <div class="ac_right">
      <div class="ac_header">
        <div class="ac_h_top">
          <span @click="changeShowPage(0)">
            <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 class="ac_h_t_active">
            <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>
				<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="changeShowType('')"
            >
              全部
            </span>
            <span
              :class="{ ac_h_b_typeList_active: showType === '1' }"
              @click="changeShowType('1')"
            >
              智能体
            </span>
            <span
              :class="{ ac_h_b_typeList_active: showType === '2' }"
              @click="changeShowType('2')"
            >
              工作流
            </span>
          </div>
          <div class="ac_h_b_selectList">
            <el-select
              v-model="statusSelect"
              placeholder="请选择"
              @change="changeSelectType"
              style="width: 150px;margin-right: 10px;"
            >
              <el-option
                v-for="item in statusSelectList"
                :key="item.index"
                :label="item.label"
                :value="item.index"
              ></el-option>
            </el-select>

            <el-select
              v-model="tagSelect"
              placeholder="请选择"
              @change="changeSelectType"
              style="width: 150px;margin-right: 10px;"
            >
              <el-option
                v-for="item in tagSelectList"
                :key="item.index"
                :label="item.label"
                :value="item.index"
              ></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="resetData">重置</el-button>
          </div>
        </div>
      </div>

      <div class="ac_content">
        <div class="ac_c_item" v-for="item in 10">
          <div class="ac_c_i_top">
            <img
              src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E6%B5%8B%E8%AF%951733981587859.jpg"
              alt="封面"
            />
            <div>
              <div>名称名称名称名称名称名称名称名称</div>
              <span class="ac_c_i_t_brief">简介简介简介简介简介</span>
              <span class="ac_c_i_t_time">2024-12-12 10:22:04 编辑</span>
            </div>
          </div>
          <div class="ac_c_i_t_popover">
            <div
              class="ac_c_i_t_p_box"
              v-if="editAppCard"
              v-click-outside="handleBlur"
            >
              <div>编辑</div>
              <div>收藏</div>
              <div>复制</div>
              <div>删除</div>
            </div>

            <svg
              t="1732786015570"
              @click.stop="updateCard(!editAppCard)"
              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 class="ac_c_i_bottom">
            <div>标签</div>
            <span>工作流</span>
          </div>
        </div>
        <div class="ac_c_empty" v-if="dataList.length === 0">
          <span>暂无数据...</span>
        </div>
      </div>
    </div>
    <!-- <addAppDialog
      ref="addAppDialogRef"
      :typeList="typeList"
      @success="addAppSuccess"
    />-->
  </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 saveCard from "../dialog/saveCard.vue";
export default {
  components: {
    saveCard
  },
  directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  data() {
    return {
      showType: "",
      searchText: "",
      statusSelect: "",
      statusSelectList: [
        { index: "", label: "全部状态" },
        { index: 1, label: "未发布" },
        { index: 2, label: "已发布" }
      ],
      tagSelect: "",
      tagSelectList: [
        { index: "", label: "全部标签" },
        { index: 1, label: "标签1" },
        { index: 2, label: "标签2" },
        { index: 3, label: "标签3" },
        { index: 4, label: "标签4" },
        { index: 5, label: "标签5" }
      ],
      userId: this.$route.query["userid"],
      org: this.$route.query["org"],
      oid: this.$route.query["oid"],
      getDataLoading: false,
      dataList: [1],
      recentUse: [],
      collect: [],
      editAppCard: null,
      bannerObj:null
    };
  },
  computed: {},
  methods: {
    changeType(newIndex) {
      let flag = this.showType === newIndex;
      this.showType = newIndex;
      if (!flag) {
        this.getData();
      }
    },
    changeShowType(newType) {
      if (this.showType === newType) return;
      this.showType = newType;
      this.getData();
    },
    changeSelectType() {
      this.getData();
    },
    getData() {
      this.$message.info("获取数据暂未开发...");
    },
    updateCard(newValue) {
      // if (this.editAppCard === id) return (this.editAppCard = null);
      this.editAppCard = newValue;
    },
    handleBlur() {
      this.updateCard(null);
    },
    openApp(item, type = 0) {
      console.log("👉", item);
    },
    resetData() {
      this.searchText = "";
      this.statusSelect = "";
      this.tagSelectList = "";
      this.showType = "";
      this.getData();
    },
    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)
      })
    }
  },
  mounted() {
    this.getBanner()
  }
};
</script>

<style scoped>
.workSpace {
  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;
  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 {
  width: calc(100% - 280px);
  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_banner {
  width: 100%;
  height: 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% - 666px);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: center;
}

.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% / 5 - (15px * 4) / 5);
  height: auto;
  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;
  position: relative;
  /* cursor: pointer; */
}

@media screen and (min-width: 1400px) {
  .ac_c_item {
    width: calc(100% / 5 - (15px * 4) / 5) !important;
  }
  .ac_c_item:nth-child(5n) {
    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_i_top {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.ac_c_i_top > img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  margin: 10px 15px 10px 10px;
}

.ac_c_i_top > div {
  box-sizing: border-box;
  padding: 20px 0px 10px 0px;
  flex: 1;
  height: 100%;
  width: calc(100% - 130px - 10px - 15px);
}

.ac_c_i_top > div > div {
  font-size: 18px;
  width: calc(100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac_c_i_t_brief {
  margin: 5px 0;
  font-size: 1em;
  color: #8991a1;
  width: calc(100%);
  height: 74px;
  /* 第四行溢出显示... */
  display: -webkit-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.ac_c_i_t_time {
  margin: 5px 0;
  font-size: .9em !important;
  color: #8991a1;
  width: 100%;
  height: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.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_t_popover {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.ac_c_i_t_popover svg {
  width: 30px;
  height: 25px;
  cursor: pointer;
  background-color: #f2f2f2;
  border-radius: 4px;
}

.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;
}
</style>