|
|
@@ -0,0 +1,818 @@
|
|
|
+<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>
|
SanHQin