|
|
@@ -0,0 +1,385 @@
|
|
|
+<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" v-loading="getDataLoading">
|
|
|
+ <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>{{ item.url }}</span>
|
|
|
+ </div>
|
|
|
+ </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,
|
|
|
+ nuserid:this.userId,
|
|
|
+ nlabel:data.nlabel,
|
|
|
+ ndetail:data.ndetail,
|
|
|
+ nurl:data.nurl,
|
|
|
+ ntype:data.ntype,
|
|
|
+ njuri:data.njuri,
|
|
|
+ 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("获取应用类型失败");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+.ac_c_item:nth-child(5n) {
|
|
|
+ margin-right: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+@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: 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;
|
|
|
+}
|
|
|
+</style>
|
SanHQin