pbl-teacher-table/src/components/pages/appStore/index.vue

<template>
  <div class="appCenter">
    <div class="ac_header">
      <div class="ac_h_top">
        <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">
        <div class="ac_c_i_top">
          <div class="ac_c_i_t_left">
            <svg
              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>{{ item.name }}</div>
            <span>{{ item.label }}</span>
          </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>
    <addAppDialog
      ref="addAppDialogRef"
      :typeList="typeList"
      @success="addAppSuccess"
    />
  </div>
</template>

<script>
import addAppDialog from "./dialog/addAppDialog.vue";
export default {
  components: {
    addAppDialog
  },
  data() {
    return {
      showType: "",
      searchText: "",
      selectJuri: 1,
      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: []
    };
  },
  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,
        name: this.searchText,
        label: "",
        type: this.showType,
        juri: this.selectJuri,
        stand: "cn"
      };

      this.ajax
        .get(this.$store.state.api + "select_appStore", params)
        .then(res => {
          this.getDataLoading = false;
          let _data = res.data[0];
          if (_data.length > 0) {
            this.dataList = _data;
          } else {
            this.dataList = [];
          }
        })
        .catch(err => {
          this.getDataLoading = false;
          console.log(err);
          this.$message.error("获取应用失败");
        });
    },
    addApp() {
      this.$refs.addAppDialogRef.open({ type: 1 });
    },
    addAppSuccess(data, type) {
      if (type === 1) {
        //添加
        let params = [
          {
            nname: data.nname, //app名称
            nuserid: this.userId, //创建的用户ID
            nlabel: data.nlabel, //app标签
            ndetail: data.ndetail, //app简介
            nurl: data.nurl, //app链接
            ntype: data.ntype, //app类型
            njuri: data.njuri, //app权限 1:我的 2:组织 3:所有人
            nstand: "cn", //语言
            njson: "" //其他信息
          }
        ];
        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) {
        //编辑
        console.log("编辑");
        console.log(data);
      }
    },
    getTypeList() {
      let params = {
        suserid: this.userId,
        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(url){
			window.open(url, '_blank');
		},
    resetData() {
      this.searchText = "";
      this.selectJuri = 1;
      this.showType = "";
      this.getData();
    }
  },
  mounted() {
    this.getTypeList();
    this.getData();
  }
};
</script>

<style scoped>
.appCenter {
  width: 100vw;
  height: 100vh;
  background-color: #f2f4f7;
  margin: 0;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.ac_header {
  width: 100%;
  height: auto;
  border-radius: 5px;
  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;
}

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

@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;
  /* flex-direction: column; */
  /* justify-content: space-evenly; */
  /* background-color: red */
}

.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_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: 16px;
  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: 20px;
  color: #8991a1;
  width: 100%;
  height: calc(100% - 30px);
  /* 第四行溢出显示... */
  display: -webkit-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

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