|
|
@@ -10,32 +10,39 @@
|
|
|
>
|
|
|
<div v-loading="loading" class="ps_area">
|
|
|
<div class="pa_a_head">
|
|
|
- <span
|
|
|
- :class="{ pa_a_h_active: tagType == 'basics' }"
|
|
|
- @click="changeTagType('basics')"
|
|
|
- >基本信息</span
|
|
|
- >
|
|
|
- <span
|
|
|
- :class="{ pa_a_h_active: tagType == 'desktop' }"
|
|
|
- @click="changeTagType('desktop')"
|
|
|
- >桌面工具</span
|
|
|
- >
|
|
|
+ <div class="pa_a_h_tag">
|
|
|
+ <span
|
|
|
+ :class="{ pa_a_h_active: tagType == 'basics' }"
|
|
|
+ @click="changeTagType('basics')"
|
|
|
+ >基本信息</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="{ pa_a_h_active: tagType == 'desktop' }"
|
|
|
+ @click="changeTagType('desktop')"
|
|
|
+ >桌面</span
|
|
|
+ >
|
|
|
|
|
|
- <span
|
|
|
- :class="{ pa_a_h_active: tagType == 'admin-index' }"
|
|
|
- @click="changeTagType('admin-index')"
|
|
|
- >管理平台侧首页</span
|
|
|
- >
|
|
|
- <span
|
|
|
- :class="{ pa_a_h_active: tagType == 'admin-cocoFlow' }"
|
|
|
- @click="changeTagType('admin-cocoFlow')"
|
|
|
- >管理平台首页CocoFlow</span
|
|
|
- >
|
|
|
- <span
|
|
|
- :class="{ pa_a_h_active: tagType == 'admin-sidebar' }"
|
|
|
- @click="changeTagType('admin-sidebar')"
|
|
|
- >管理平台侧边栏</span
|
|
|
- >
|
|
|
+ <span
|
|
|
+ :class="{ pa_a_h_active: tagType == 'admin-banner' }"
|
|
|
+ @click="changeTagType('admin-banner')"
|
|
|
+ >平台Banner</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="{ pa_a_h_active: tagType == 'admin-index' }"
|
|
|
+ @click="changeTagType('admin-index')"
|
|
|
+ >平台首页</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="{ pa_a_h_active: tagType == 'admin-cocoFlow' }"
|
|
|
+ @click="changeTagType('admin-cocoFlow')"
|
|
|
+ >平台首页CocoFlow</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="{ pa_a_h_active: tagType == 'admin-sidebar' }"
|
|
|
+ @click="changeTagType('admin-sidebar')"
|
|
|
+ >平台侧边栏</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
<div class="ea_add">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
@@ -44,6 +51,13 @@
|
|
|
@click="addMenu()"
|
|
|
>添加菜单</el-button
|
|
|
>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ v-if="['admin-banner'].includes(tagType)"
|
|
|
+ type="primary"
|
|
|
+ @click="addBanner()"
|
|
|
+ >添加Banner</el-button
|
|
|
+ >
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
v-if="['admin-cocoFlow'].includes(tagType)"
|
|
|
@@ -89,12 +103,16 @@
|
|
|
placement="top"
|
|
|
>
|
|
|
<el-image
|
|
|
- style="width: 60px; height: 60px;margin-left: 20px;"
|
|
|
+ style="width: 60px; height: 60px; margin-left: 20px"
|
|
|
:src="form.basics.logo"
|
|
|
fit="cover"
|
|
|
@click="addBasicsIcon('logo')"
|
|
|
>
|
|
|
- <div slot="error" class="image-slot" @click="addBasicsIcon('logo')">
|
|
|
+ <div
|
|
|
+ slot="error"
|
|
|
+ class="image-slot"
|
|
|
+ @click="addBasicsIcon('logo')"
|
|
|
+ >
|
|
|
<i class="el-icon-picture-outline"></i>
|
|
|
</div>
|
|
|
</el-image>
|
|
|
@@ -110,12 +128,16 @@
|
|
|
placement="top"
|
|
|
>
|
|
|
<el-image
|
|
|
- style="width: 60px; height: 60px;margin-left: 20px;"
|
|
|
+ style="width: 60px; height: 60px; margin-left: 20px"
|
|
|
:src="form.basics.loginLogo"
|
|
|
fit="cover"
|
|
|
@click="addBasicsIcon('loginLogo')"
|
|
|
>
|
|
|
- <div slot="error" class="image-slot" @click="addBasicsIcon('loginLogo')">
|
|
|
+ <div
|
|
|
+ slot="error"
|
|
|
+ class="image-slot"
|
|
|
+ @click="addBasicsIcon('loginLogo')"
|
|
|
+ >
|
|
|
<i class="el-icon-picture-outline"></i>
|
|
|
</div>
|
|
|
</el-image>
|
|
|
@@ -131,12 +153,16 @@
|
|
|
placement="top"
|
|
|
>
|
|
|
<el-image
|
|
|
- style="width: 60px; height: 60px;margin-left: 20px;"
|
|
|
+ style="width: 60px; height: 60px; margin-left: 20px"
|
|
|
:src="form.basics.loginBanner"
|
|
|
fit="cover"
|
|
|
@click="addBasicsIcon('loginBanner')"
|
|
|
>
|
|
|
- <div slot="error" class="image-slot" @click="addBasicsIcon('loginBanner')">
|
|
|
+ <div
|
|
|
+ slot="error"
|
|
|
+ class="image-slot"
|
|
|
+ @click="addBasicsIcon('loginBanner')"
|
|
|
+ >
|
|
|
<i class="el-icon-picture-outline"></i>
|
|
|
</div>
|
|
|
</el-image>
|
|
|
@@ -347,7 +373,7 @@
|
|
|
<template v-if="form.admin.cocoFlow">
|
|
|
<div
|
|
|
class="appItem"
|
|
|
- v-for="(item,index) in form.admin.cocoFlow"
|
|
|
+ v-for="(item, index) in form.admin.cocoFlow"
|
|
|
:key="item.id"
|
|
|
>
|
|
|
<div class="ai_left">
|
|
|
@@ -360,8 +386,41 @@
|
|
|
<div class="ai_right">
|
|
|
<div>{{ item.name }}</div>
|
|
|
<div class="ai_r_btn">
|
|
|
- <svg @click="moveApp(item.id,0)" v-if="index!=0" t="1744598539024" class="icon" viewBox="0 0 1470 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="200" height="200"><path d="M664.965051 36.390373L20.010522 880.212016c-44.471546 58.191134-2.978155 142.114864 70.271066 142.114863h1289.8254c73.232489 0 114.725879-83.923729 70.271065-142.114863L805.473719 36.390373a88.441155 88.441155 0 0 0-140.508668 0z" p-id="2614"></path></svg>
|
|
|
- <svg @click="moveApp(item.id,1)" v-if="index!=(form.admin.cocoFlow.length-1)" style="transform: rotate(180deg);" t="1744598539024" class="icon" viewBox="0 0 1470 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="200" height="200"><path d="M664.965051 36.390373L20.010522 880.212016c-44.471546 58.191134-2.978155 142.114864 70.271066 142.114863h1289.8254c73.232489 0 114.725879-83.923729 70.271065-142.114863L805.473719 36.390373a88.441155 88.441155 0 0 0-140.508668 0z" p-id="2614"></path></svg>
|
|
|
+ <svg
|
|
|
+ @click="moveApp(item.id, 0)"
|
|
|
+ v-if="index != 0"
|
|
|
+ t="1744598539024"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1470 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="2613"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M664.965051 36.390373L20.010522 880.212016c-44.471546 58.191134-2.978155 142.114864 70.271066 142.114863h1289.8254c73.232489 0 114.725879-83.923729 70.271065-142.114863L805.473719 36.390373a88.441155 88.441155 0 0 0-140.508668 0z"
|
|
|
+ p-id="2614"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <svg
|
|
|
+ @click="moveApp(item.id, 1)"
|
|
|
+ v-if="index != form.admin.cocoFlow.length - 1"
|
|
|
+ style="transform: rotate(180deg)"
|
|
|
+ t="1744598539024"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1470 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="2613"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M664.965051 36.390373L20.010522 880.212016c-44.471546 58.191134-2.978155 142.114864 70.271066 142.114863h1289.8254c73.232489 0 114.725879-83.923729 70.271065-142.114863L805.473719 36.390373a88.441155 88.441155 0 0 0-140.508668 0z"
|
|
|
+ p-id="2614"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
</div>
|
|
|
<span>{{ item.detail }}</span>
|
|
|
</div>
|
|
|
@@ -572,6 +631,120 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ class="editArea pa_a_eb_admin-index"
|
|
|
+ v-show="tagType == 'admin-banner'"
|
|
|
+ >
|
|
|
+ <div class="ea_table">
|
|
|
+ <el-table
|
|
|
+ :data="form.admin.banner"
|
|
|
+ stripe
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="标题"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.title ? scope.row.title : "-"
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="图片" width="450">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ :src="scope.row.src"
|
|
|
+ v-if="scope.row.src"
|
|
|
+ style="width: 400px; height: 200px"
|
|
|
+ ></el-image>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="跳转链接"
|
|
|
+ width="80"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="dark"
|
|
|
+ :content="scope.row.url"
|
|
|
+ placement="top"
|
|
|
+ v-if="scope.row.url"
|
|
|
+ >
|
|
|
+ <a :href="scope.row.url" target="_blank">点击跳转</a>
|
|
|
+ </el-tooltip>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ width="250px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <button
|
|
|
+ @click="editBanner(scope.row)"
|
|
|
+ style="
|
|
|
+ color: #308fff;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 25px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 修改
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ @click="moveUp(scope.row)"
|
|
|
+ v-if="scope.$index > 0"
|
|
|
+ style="
|
|
|
+ color: #308fff;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 25px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 上移
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ @click="moveDown(scope.row)"
|
|
|
+ v-if="form.admin.banner.length - 1 > scope.$index"
|
|
|
+ style="
|
|
|
+ color: #308fff;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 25px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 下移
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button
|
|
|
+ @click="del(scope.row)"
|
|
|
+ style="
|
|
|
+ color: #ff2570;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 25px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div
|
|
|
class="editArea pa_a_eb_admin-sidebar"
|
|
|
v-show="tagType == 'admin-sidebar'"
|
|
|
@@ -858,6 +1031,7 @@
|
|
|
<selectToolDialog ref="selectToolDialogRef" @success="selectToolSuccess" />
|
|
|
<addMenuDialog ref="addMenuDialogRef" @success="addMenuSuccess" />
|
|
|
<selectAppDialog ref="selectAppDialogRef" @success="selectAppSuccess" />
|
|
|
+ <addBannerDialog ref="addBannerDialogRef" @success="addBannerSuccess" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -869,11 +1043,14 @@ import addMenuDialog from "./addMenuDialog.vue";
|
|
|
import { addOp } from "@/api/user";
|
|
|
import { mapGetters } from "vuex";
|
|
|
import selectAppDialog from "./selectAppDialog.vue";
|
|
|
+
|
|
|
+import addBannerDialog from "./addBannerDialog";
|
|
|
export default {
|
|
|
components: {
|
|
|
selectToolDialog,
|
|
|
addMenuDialog,
|
|
|
selectAppDialog,
|
|
|
+ addBannerDialog,
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(["userid"]),
|
|
|
@@ -940,8 +1117,8 @@ export default {
|
|
|
title: "",
|
|
|
brief: "",
|
|
|
logo: "",
|
|
|
- loginLogo:"",
|
|
|
- loginBanner:"",
|
|
|
+ loginLogo: "",
|
|
|
+ loginBanner: "",
|
|
|
},
|
|
|
//桌面 管理平台首页 管理平台侧边栏
|
|
|
desktop: {
|
|
|
@@ -966,12 +1143,12 @@ export default {
|
|
|
console.log(this.form);
|
|
|
this.setJson();
|
|
|
},
|
|
|
- async addBasicsIcon(type='logo') {
|
|
|
+ async addBasicsIcon(type = "logo") {
|
|
|
let _url = await this.uploadFile("image/*");
|
|
|
if (_url) {
|
|
|
this.form.basics[type] = _url;
|
|
|
- this.$forceUpdate()
|
|
|
- console.log(this.form)
|
|
|
+ this.$forceUpdate();
|
|
|
+ console.log(this.form);
|
|
|
await addOp({
|
|
|
uid: this.userid,
|
|
|
cid: this.data.id,
|
|
|
@@ -1100,6 +1277,33 @@ export default {
|
|
|
}
|
|
|
this.$forceUpdate();
|
|
|
},
|
|
|
+ addBanner() {
|
|
|
+ this.$refs.addBannerDialogRef.open("", "add");
|
|
|
+ },
|
|
|
+ addBannerSuccess({ item, type }) {
|
|
|
+ if (type == "add") {
|
|
|
+ item.id = new Date().getTime();
|
|
|
+ if (this.form.admin.banner) {
|
|
|
+ item.id = new Date().getTime();
|
|
|
+ this.form.admin.banner.push(item);
|
|
|
+ } else {
|
|
|
+ this.form.admin.banner = [item];
|
|
|
+ }
|
|
|
+ this.$refs.addBannerDialogRef.close();
|
|
|
+ } else if (type == "edit") {
|
|
|
+ let index = this.form.admin.banner.findIndex(
|
|
|
+ (banner) => banner.id === item.id
|
|
|
+ );
|
|
|
+ if (index !== -1) {
|
|
|
+ this.form.admin.banner.splice(index, 1, item);
|
|
|
+ }
|
|
|
+ this.$refs.addBannerDialogRef.close();
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ editBanner(row) {
|
|
|
+ this.$refs.addBannerDialogRef.open(row, "edit");
|
|
|
+ },
|
|
|
// 表头的背景色
|
|
|
headerCellStyle() {
|
|
|
return { backgroundColor: "#f1f1f1" };
|
|
|
@@ -1153,6 +1357,12 @@ export default {
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
+ } else if (this.tagType == "admin-banner") {
|
|
|
+ let _index = this.form.admin.banner.findIndex((i) => i.id == row.id);
|
|
|
+ if (_index > 0) {
|
|
|
+ const itemToMove = this.form.admin.banner.splice(_index, 1)[0];
|
|
|
+ this.form.admin.banner.splice(_index - 1, 0, itemToMove);
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
moveDown(row, typeId) {
|
|
|
@@ -1205,6 +1415,12 @@ export default {
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
+ } else if (this.tagType == "admin-banner") {
|
|
|
+ let _index = this.form.admin.banner.findIndex((i) => i.id == row.id);
|
|
|
+ if (_index < this.form.admin.banner.length - 1) {
|
|
|
+ const itemToMove = this.form.admin.banner.splice(_index, 1)[0];
|
|
|
+ this.form.admin.banner.splice(_index + 1, 0, itemToMove);
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
del(row, typeId) {
|
|
|
@@ -1237,6 +1453,13 @@ export default {
|
|
|
this.form.admin.sidebar.list[_index].children.splice(_index2, 1);
|
|
|
}
|
|
|
// this.form.admin.sidebar.list.splice(_index, 1);
|
|
|
+ }else if(this.tagType == "admin-banner"){
|
|
|
+ const index = this.form.admin.banner.findIndex(
|
|
|
+ (i) => i.id === row.id
|
|
|
+ );
|
|
|
+ if (index > -1) {
|
|
|
+ this.form.admin.banner.splice(index, 1);
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
getToolData() {
|
|
|
@@ -1472,18 +1695,19 @@ export default {
|
|
|
select: this.form.admin.cocoFlow ? this.form.admin.cocoFlow : [],
|
|
|
});
|
|
|
},
|
|
|
- moveApp(id,type){
|
|
|
- let _index = this.form.admin.cocoFlow.findIndex(i=>i.id==id);
|
|
|
- if(type == 0 && _index!=0){//上移
|
|
|
- let temp = this.form.admin.cocoFlow[_index - 1];
|
|
|
- this.form.admin.cocoFlow[_index - 1] = this.form.admin.cocoFlow[_index];
|
|
|
- this.form.admin.cocoFlow[_index] = temp;
|
|
|
- }else if(type == 1 && _index!=this.form.admin.cocoFlow.length-1){
|
|
|
- let temp = this.form.admin.cocoFlow[_index + 1];
|
|
|
- this.form.admin.cocoFlow[_index + 1] = this.form.admin.cocoFlow[_index];
|
|
|
- this.form.admin.cocoFlow[_index] = temp;
|
|
|
+ moveApp(id, type) {
|
|
|
+ let _index = this.form.admin.cocoFlow.findIndex((i) => i.id == id);
|
|
|
+ if (type == 0 && _index != 0) {
|
|
|
+ //上移
|
|
|
+ let temp = this.form.admin.cocoFlow[_index - 1];
|
|
|
+ this.form.admin.cocoFlow[_index - 1] = this.form.admin.cocoFlow[_index];
|
|
|
+ this.form.admin.cocoFlow[_index] = temp;
|
|
|
+ } else if (type == 1 && _index != this.form.admin.cocoFlow.length - 1) {
|
|
|
+ let temp = this.form.admin.cocoFlow[_index + 1];
|
|
|
+ this.form.admin.cocoFlow[_index + 1] = this.form.admin.cocoFlow[_index];
|
|
|
+ this.form.admin.cocoFlow[_index] = temp;
|
|
|
}
|
|
|
- this.$forceUpdate()
|
|
|
+ this.$forceUpdate();
|
|
|
},
|
|
|
selectAppSuccess(data) {
|
|
|
this.form.admin.cocoFlow = JSON.parse(JSON.stringify(data));
|
|
|
@@ -1523,7 +1747,16 @@ export default {
|
|
|
border-bottom: 1px solid #e4e7ed;
|
|
|
}
|
|
|
|
|
|
-.pa_a_head > span {
|
|
|
+.pa_a_h_tag {
|
|
|
+ width: calc(100%);
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.pa_a_h_tag > span {
|
|
|
font-size: 16px;
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
@@ -1607,7 +1840,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.ea_add {
|
|
|
- width: 100%;
|
|
|
+ width: 200px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
@@ -1657,7 +1890,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
box-sizing: border-box;
|
|
|
- padding-top:20px ;
|
|
|
+ padding-top: 20px;
|
|
|
}
|
|
|
|
|
|
.appItem {
|
|
|
@@ -1700,7 +1933,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.ai_right > div {
|
|
|
- max-width: calc( 100% - 50px);
|
|
|
+ max-width: calc(100% - 50px);
|
|
|
font-weight: bold;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
@@ -1710,7 +1943,7 @@ export default {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
-.ai_r_btn{
|
|
|
+.ai_r_btn {
|
|
|
width: auto;
|
|
|
display: flex;
|
|
|
position: absolute;
|
|
|
@@ -1718,7 +1951,7 @@ export default {
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
-.ai_r_btn>svg{
|
|
|
+.ai_r_btn > svg {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
margin-left: 15px;
|
