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

<template>
  <div class="appManagement">
    <div class="ac_left">
			<!-- <recentUseCard/>
			<collectCard/> -->
			<saveCard title="最近使用" :data="recentUse"/>
			<saveCard title="收藏" :data="collect"/>
		</div>
    <div class="ac_right">
      <div class="ac_header">
        <div class="ac_h_top">
          <span>应用管理</span>
          <!-- <span>知识库</span> -->
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            style="position: absolute;right: 15px;"
            @click="addApp"
            >添加应用</el-button
          >
        </div>
        <div class="ac_h_bottom">
          <div class="ac_h_b_selectList">
            <el-input
              v-model="searchText"
              style="width: 200px;"
              placeholder="请输入应用名称"
              @keyup.enter.native="getData"
            />
            <el-select
              v-model="selectJuri"
              placeholder="请选择"
              @change="changeSelectType"
            >
              <el-option
                v-for="item in selectList"
                :key="item.index"
                :label="item.label"
                :value="item.index"
              ></el-option>
            </el-select>
            <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 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>
      </div>

      <div class="ac_content">
        <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="updateApp(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>
            <!-- <span @click="openApp(item.url)">{{ item.url }}</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 addAppDialog from "../dialog/addAppDialog.vue";
import saveCard from "../dialog/saveCard.vue";
// import collectCard from "./dialog/collectCard.vue";
// import recentUseCard from "./dialog/recentUseCard.vue";
export default {
  components: {
    addAppDialog,
		saveCard
		// collectCard,
		// recentUseCard
  },
  directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  data() {
    return {
      showType: "",
      searchText: "",
      selectJuri: 3,
      typeList: [],
      selectList: [
        { index: 1, label: "我的" },
        { index: 2, label: "组织" },
        { index: 3, label: "所有人" }
      ],
      userId: this.$route.query["userid"],
      org: this.$route.query["org"],
      oid: this.$route.query["oid"],
      getDataLoading: false,
      dataList: [],
      recentUse: [],
      collect: [],
      editAppCard: 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;
      };
    }
  },
  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: "", //应用的标签搜索
        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 });
    },
    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)
		},
		// 取消收藏
		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("修改失败");
          });
      }
    },
    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) {
      window.open(item.url, "_blank");
			if (!(this.recentUse.length > 0 && item.id === this.recentUse[0].id)) {
				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){
			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===0){
						this.$message.success("收藏成功")
						this.getCollect();
					}else if(type===1){
						this.getRecentUse();
					}
				}
			}).catch(err=>{
				console.log(err)
				if(type===0)this.$message.error("收藏失败")
			})

		}
  },
  mounted() {
    this.getTypeList();
    this.getData();
		this.getCollect();
		this.getRecentUse();
  }
};
</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;
  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;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

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

.ac_h_top > span {
  font-size: 26px;
}

.ac_h_bottom {
  width: 100%;
  height: auto;
  padding: 10px 0 20px 0;
}

.ac_h_b_typeList {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0 15px;
}

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

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

.ac_c_item {
  width: calc(100% / 5 - (15px * 4) / 5);
  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;
  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_empty {
  width: 100%;
  height: 40%;
  display: flex;
  box-sizing: border-box;
  padding-top: 2%;
  justify-content: center;
  /* align-items: center; */
}

.ac_c_i_top {
  width: 100%;
  height: 50px;
  display: flex;
  position: relative;
  /* flex-direction: column; */
  /* justify-content: space-evenly; */
  /* background-color: red */
}

.ac_c_i_t_popover {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
}

.ac_c_i_t_popover svg {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.ac_c_i_t_p_box {
  position: absolute;
  height: auto;
  top: 100%;
  right: 0;
  padding: 8px;
  border-radius: 8px 0 8px 8px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  width: auto;
}

.ac_c_i_t_p_box > div {
  width: 80px;
  height: 30px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: bold;
  font-size: .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: 22px;
  font-weight: bold;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac_c_i_t_right > span {
  font-size: 1.1em;
  font-weight: bold;
  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>