Skip to content

S
so-manage-ui
Commit b552c48f authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

update：部分配置管理与菜单模块优化

parent 78bbc542
Show whitespace changes
Inline Side-by-side
Showing with 1335 additions and 9 deletions
src/bg-ui/bg-filter-group.vue
View file @ b552c48f
......@@ -5,7 +5,7 @@
<slot name="left_action"></slot>
</div>
<div class="right-filter">
<el-input :placeholder="placeholder" @keydown.enter="search" @clear="search" clearable v-model.trim="value">
<el-input v-if="showSearch" :placeholder="placeholder" @keydown.enter="search" @clear="search" clearable v-model.trim="value">
<template #append>
<div class="append-btn" @click="search">
<bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
......@@ -43,6 +43,10 @@ const props = defineProps({
placeholder: {
type: String,
default: "请输入关键词"
},
showSearch: {
type: Boolean,
default: true
}
})
......
src/components/bg-breadcrumb.vue 0 → 100644
View file @ b552c48f
<template>
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-if="state.breadcrumbData.length>=2" v-for="(item,index) in state.dataArr" :to="{ path: item.path }"> {{item.name}} </el-breadcrumb-item>
<el-breadcrumb-item> {{state.breadcrumbData[state.breadcrumbData.length-1].name}} </el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import store from "@/store";
import { ElMessage } from 'element-plus'
const router = useRouter()
const route = useRoute()
const state = reactive({
dataArr:[],
breadcrumbData:[]
})
const props = defineProps({
isMenu:{
type:Boolean,
default:false
}
})
const getBreadcrumbData = (menuObj,menu,path)=>{
//获取整体需要路径
let parentPath = menuObj[path].rowPath.slice(1,menuObj[path].rowPath.length).split('.')
getFirstPath(parentPath,menu)
//有2层以上的面包屑显示,则继续向下处理
if(parentPath.length>=2){
getOtherPath(parentPath,menu)
}
}
const getFirstPath = (parentPath,menu)=>{
let tempMenu = menu[parentPath[0]]
if (!props.isMenu) {
tempMenu = tempMenu.children[parentPath[1]]
}
//目录则跳转第一个子类，菜单子菜单则跳转自身
if(tempMenu.menuType==0){
if(tempMenu.children&&tempMenu.children.length){
for (let index = 0; index < tempMenu.children.length; index++) {
const e = tempMenu.children[index];
if(e.menuType!==0){
state.breadcrumbData.push(
{
path:e.path,
name:tempMenu.menuName
}
)
break
}
}
}
}else{
state.breadcrumbData.push(
{
path:tempMenu.path,
name:tempMenu.menuName
}
)
}
}
const getOtherPath = (parentPath,menu)=>{
let tempMenu = menu[parentPath[0]]
let index
if (!props.isMenu) {
index = 2
tempMenu = tempMenu.children[parentPath[1]].children||[]
}else {
tempMenu = tempMenu.children || []
index = 1
}
if(tempMenu.length&&parentPath[index]){
getPath(tempMenu,parentPath,index)
}
}
const getPath = (tempMenu,parentPath,index)=>{
if(!tempMenu[parentPath[index]]){
return
}
tempMenu = tempMenu[parentPath[index]]
index = index+1
state.breadcrumbData.push(
{
path:tempMenu.path,
name:tempMenu.menuName
}
)
if(tempMenu.children&&tempMenu.children.length&&parentPath[index]){
getPath(tempMenu.children,parentPath,index)
}
}
onBeforeMount(()=>{
getBreadcrumbData(store.state.menuObj,store.state.menu,route.path)
state.breadcrumbData.forEach((e,idx) => {
if(idx!==state.breadcrumbData.length-1){
state.dataArr.push(e)
}
});
})
</script>
<style scoped>
</style>
src/components/bg-menu.vue
View file @ b552c48f
......@@ -8,9 +8,9 @@
>
<!-- LOGO -->
<router-link to="/" class="bg-logo">
<div @click="gotoPage" class="bg-logo">
<img style="width:140px;height:22px;" src="../assets/imgs/img_logo.png"/>
</router-link>
</div>
<!-- 菜单 -->
<div class="main-menu" v-if="userInfo&& userInfo.system_id">
......@@ -207,6 +207,9 @@ export default {
navAction(path) {
this.$router.push(path);
},
gotoPage(){
window.open('/apaas/portal/ui/#/','_blank')
},
changezz(item){
this.$trace.setOptionValue('appID',item.value)
},
......
src/components/login-by-account.vue
View file @ b552c48f
......@@ -142,7 +142,7 @@ export default {
return this.$axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
},
getUser() {
Promise.all([this.getUserInfo(), this.getMenu('apaas')]).then((res) => {
Promise.all([this.getUserInfo(), this.getMenu('6cf51374-f85d-4b6b-b3ed-6c0849135972')]).then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) {
let data = res[1].data.data&&res[1].data.data[0].children || [];
this.$store.commit("setUserInfo", res[0].data.data);
......
src/main.js
View file @ b552c48f
......@@ -78,7 +78,7 @@ function getMenuObj(menu,parentRowPath,menuObj){
}
Promise.all([getUser(),getMenu('apaas')]).then(res => {
Promise.all([getUser(),getMenu('6cf51374-f85d-4b6b-b3ed-6c0849135972')]).then(res => {
console.log(res);
if (res[0].data.code == 200&&res[1].data.code == 200) {
//已登录则记录菜单和用户信息
......
src/page/main/develop/menu/index.vue
View file @ b552c48f
......@@ -307,7 +307,8 @@ const fileAction = (val,data,parent,disabled=false) => {
menu_logo: "", // 图标
source: "",
level: data.level, // 当前的level
p_menu_type: parent ? parent.menu_type : 0 // 父级的类型，用于判断菜单下不能建目录
p_menu_type: parent ? parent.menu_type : 0, // 父级的类型，用于判断菜单下不能建目录
system_type: "", // 系统类型
}
state.menuTree.insertAfter(newChild,parent? parent.Child[parent.Child.length-1] : state.data[state.data.length -1])
state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
......@@ -328,7 +329,8 @@ const fileAction = (val,data,parent,disabled=false) => {
menu_logo: "",
source: "",
p_menu_type: data.menu_type,
level: data.level + 1
level: data.level + 1,
system_type: "", // 系统类型
}
state.menuTree.append(newChild,data)
state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
......@@ -446,6 +448,7 @@ const saveMenu = (el,type) => {
menu_url: el.menuForm.menu_url,
menu_logo: el.menuForm.menu_logo,
source: el.menuForm.menu_type == 0 ? "" : el.menuForm.source,
system_type: el.menuForm.system_type,
}
if (state.selectData.id) { // 编辑
axios
......
src/page/main/develop/menu/menu-form.vue
View file @ b552c48f
......@@ -28,6 +28,16 @@
/>
</el-select>
</el-form-item>
<el-form-item label="系统类型" prop="system_type" v-if="topLevel">
<el-select v-model="menuForm.system_type" placeholder="请选择系统类型">
<el-option
v-for="item in systemGroupList"
:key="item.dict_id"
:label="item.dict_name"
:value="item.dict_id"
/>
</el-select>
</el-form-item>
<el-form-item label="是否启用" prop="state">
<el-switch
class="bg-switch-ele"
......@@ -120,6 +130,7 @@ const state = reactive({
menu_url: "",
menu_logo: "",
source: "",
system_type: "",
},
formRules: {
menu_name: [
......@@ -131,11 +142,15 @@ const state = reactive({
dict_group_id: [
{ required: true, message: '请选择菜单分组', trigger: 'change' },
],
system_type: [
{ required: true, message: '请选择系统类型', trigger: 'change' },
],
menu_url: [
{ required: true, message: '请输入菜单路径', trigger: 'blur' },
]
},
groupList: [],
groupList: [], // 菜单分组
systemGroupList: [], // 系统类型--顶级菜单使用
iconFlag: false, // 图标盒子
icon_search: "", // 图标筛选
iconArr: [], // 所有的图标
......@@ -160,6 +175,20 @@ const getGroupList = () => {
console.log(err)
})
} // 获取分组数据
const getSystemGroup = () => {
axios
.get(`/apaas/system/v5/menu/system/dict`)
.then((res) => {
if (res.data.code == 200) {
state.systemGroupList = res.data.data || []
}else {
ElMessage.error(res.data.data)
}
}).catch((err) => {
console.log(err)
})
} // 获取系统类型数据
const openIconbox = () => {
state.iconFlag = !state.iconFlag
state.icon_search = ""
......@@ -224,6 +253,7 @@ onMounted(() => {
})
state.showIconArr = state.iconArr
getGroupList()
getSystemGroup()
})
const {
menuForm,
......@@ -236,6 +266,7 @@ const {
topLevel,
typeDisFlag,
groupFlag,
systemGroupList,
} = toRefs(state)
defineExpose({ setForm , menuForm, menuRef })
......
src/page/main/home-config/banner/edit/banner_form.vue 0 → 100644
View file @ b552c48f
<template>
<el-form
:model="formData"
:rules="formRules"
ref="form"
style="max-width: 1048px"
class="form"
>
<el-form-item label="banner名称" prop="banner_name">
<el-input v-model="formData.banner_name" />
</el-form-item>
<el-form-item label="链接地址（选填）" prop="link_address">
<el-input v-model="formData.link_address" />
</el-form-item>
<el-form-item label="上传banner图片" prop="banner_image">
<bg-upload-image v-model="formData.banner_image" :fileSize="1" :showTips="true" customTips="请选择图片上传：大小1920 * 560像素支持jpg、png等格式，图片需小于1MB" :limit="1" listType="picture-card" :accept="['.jpg','.jpeg','.png']"></bg-upload-image>
</el-form-item>
<el-form-item label="是否启用" prop="state" class="state_form_item">
<bg-switch :labels="['否','是']" :values="[0,1]" v-model="formData.state"></bg-switch>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const form = ref(null)
const state = reactive({
formData: {
banner_name: "",
link_address: "",
banner_image: [],
state: 1
},
formRules: {
banner_name: [
{ required: true, message: '请输入banner名称', trigger: 'blur' },
],
banner_image: [
{ required: true, message: '请上传banner图', trigger: 'change' },
],
state: [
{ required: true, message: '请选择启用状态', trigger: 'change' },
],
}
})
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!form) return
await form.value.validate((valid, fields) => {
if (valid) {
emit('action', state.formData)
} else {
emit('action',null)
}
})
}
const clearForm = () => {
if (!form) return
form.value.resetFields()
}
const setForm = (data) => {
Object.assign(state.formData, data);
}
onBeforeMount(() => {
})
const {
formData,
formRules,
} = toRefs(state)
defineExpose({ submitForm, clearForm, setForm })
</script>
<style lang="scss" scoped>
.form {
.el-form-item {
display: block;
}
.state_form_item {
display: flex;
}
:deep().bg-upload {
.el-upload--picture-card {
width: 800px;
height: 234px;
background-color: #fff;
border: 1px solid #dadee7;
}
.el-upload-list--picture-card .el-upload-list__item {
width: 800px;
}
}
}
</style>
\ No newline at end of file
src/page/main/home-config/banner/edit/index.vue 0 → 100644
View file @ b552c48f
<!-- banner管理 -->
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="content_top">
<banner-form ref="bannerFormRef" @action="submitFormData"></banner-form>
</div>
<div class="content_bottom">
<div>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submit">保存</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import bannerForm from "./banner_form.vue"
const router = useRouter()
const route = useRoute()
const bannerFormRef = ref(null);
const state = reactive({
formData: {
banner_name: "",
link_address: "",
banner_image: [],
state: 1
}
})
const getDetail = (id) => {
axios
.get(`/apaas/system/v5/banner/${id}`)
.then(res => {
if (res.data.code == 200) {
const data = res.data.data
bannerFormRef.value.setForm({
banner_name: data.banner_name,
link_address: data.link_address,
banner_image: data.banner_image ? [{url: data.banner_image}] : [],
state: data.state
})
}else {
ElMessage.error(res.data.data)
}
})
.catch(err => {
console.log(err)
})
}
const submit = () => {
bannerFormRef.value.submitForm()
}
const submitFormData = (data) => {
if (data) {
Object.assign(state.formData,data);
console.log(state.formData)
if (route.query.id) {
// 编辑
let params = {
...state.formData,
id: +route.query.id
}
params.banner_image = params.banner_image && params.banner_image.length > 0 ? params.banner_image[0].url : ''
axios
.put(`/apaas/system/v5/banner`,params)
.then(res => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg)
router.go(-1)
}else {
ElMessage.error(res.data.data)
}
})
}else {
let params = {
...state.formData,
}
params.banner_image = params.banner_image && params.banner_image.length > 0 ? params.banner_image[0].url : ''
axios
.post(`/apaas/system/v5/banner`,params)
.then(res => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg)
router.go(-1)
}else {
ElMessage.error(res.data.data)
}
})
}
}
}
const cancel = () => {
router.go(-1)
}
onBeforeMount(() => {
if (route.query.id) {
getDetail(route.query.id)
}
})
const {
} = toRefs(state)
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.main_container {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
border-radius: 6px;
margin: 0 0 16px;
position: relative;
height: calc(100% - 62px);
// padding: 24px;
.content_top {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
padding: 24px;
}
.content_bottom {
height: 68px;
line-height: 68px;
text-align: right;
padding: 0 20px;
border-top: 1px solid #e6e9ef;
.el-button {
width: 92px;
}
}
}
}
</style>
\ No newline at end of file
src/page/main/home-config/banner/index.vue 0 → 100644
View file @ b552c48f
<!-- banner管理 -->
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group
:showSearch="false"
>
<template v-slot:left_action>
<div class="apaas_button">
<el-button class="register_btn" type="primary" @click="addBanner">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
新增
</el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<div class="table bg-scroll">
<bg-table
ref="Bgtable"
:headers="headers"
:rows="tableRows"
:isIndex="true"
:stripe="true"
>
<template v-slot:updated_time="{ row }">
{{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template>
<template v-slot:state="{ row }">
<bg-switch @click="changeUseRow(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btns :operations="getOperations(row)" />
</template>
</bg-table>
</div>
</div>
</div>
<!-- 删除弹窗 -->
<el-dialog
custom-class="dialog_box"
title="提示"
v-model="dialogDelete"
width="400px"
:before-close="
() => {
dialogDelete = false;
}
"
>
<div>确定要删除吗？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const router = useRouter()
const Bgtable = ref(null)
const state = reactive({
headers: [
{
label: "banner名称",
prop: "banner_name",
},
{
label: "链接地址",
prop: "link_address",
},
{
label: "创建人",
prop: "created_by",
},
{
label: "更新时间",
prop: "updated_time",
},
{
label: "是否启用",
prop: "state",
},
{
label: "操作",
prop: "action",
width: 176,
fixed: "right",
},
],
tableRows: [],
dialogDelete: false,
actionRow: null,
})
const getRoleRows = () => {
axios
.get(`/apaas/system/v5/banner/list`)
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || []
if (state.tableRows.length > 0) {
state.tableRows.forEach(e => {
e.canMoveUp = true
e.canMoveDown = true
})
state.tableRows[0].canMoveUp = false
state.tableRows[state.tableRows.length - 1].canMoveDown = false
}
}else {
ElMessage.error(res.data.data)
}
})
} // 获取列表
const getOperations = (row) => {
return [
{
name: "编辑",
callback: () => edit_row(row),
disabled: row.state == 1,
},
{
name: "删除",
callback: () => delete_row(row),
disabled: row.state == 1,
},
{
name: "上移",
callback: () => moveRow(row,1),
disabled: !row.canMoveUp,
},
{
name: "下移",
callback: () => moveRow(row,2),
disabled: !row.canMoveDown,
},
];
} // 表格操作按钮
const addBanner = () => {
router.push("/home-config/banner/add")
}
const edit_row = (row) => {
router.push({
path: "/home-config/banner/edit",
query: {
id: row.id
}
})
}
const delete_row = (row) => {
state.actionRow = row
state.dialogDelete = true
}
const deleteData = () => {
axios
.delete(`/apaas/system/v5/banner/${state.actionRow.id}`)
.then(res => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg)
state.dialogDelete = false
getRoleRows()
}else {
ElMessage.error(res.data.data)
}
})
}
const moveRow = (row,type) => {
let index
state.tableRows.forEach((e,i) => {
if (e.id == row.id) {
index = i
}
})
let nextRow
if (type == 1) { // 上移
nextRow = state.tableRows[index - 1]
}else { // 下移
nextRow = state.tableRows[index + 1]
}
let params = [
{
id: row.id,
sort: nextRow.sort
},
{
id: nextRow.id,
sort: row.sort
}
]
console.log(params)
axios
.post(`/apaas/system/v5/banner/sort`,[...params])
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg)
getRoleRows()
}else {
ElMessage.error(res.data.data)
}
})
.catch((err) => {
console.log(err)
})
}
const changeUseRow = (row) => {
let params = {
id: row.id,
state: row.state
}
axios
.post(`/apaas/system/v5/banner/status`,params)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg)
getRoleRows()
}else {
ElMessage.error(res.data.data)
row.state = row.state == 0 ? 1 : 0
}
})
}
onBeforeMount(() => {
getRoleRows()
})
const {
filter,
headers,
tableRows,
tableTotal,
dialogDelete,
} = toRefs(state)
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.main_container {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
border-radius: 6px;
margin: 0 0 16px;
position: relative;
height: calc(100% - 62px);
.table_container {
height: calc(100% - 70px);
padding: 0 16px;
.table {
max-height: calc(100% - 64px);
}
}
}
}
</style>
\ No newline at end of file
src/page/main/home-config/foot-info/index.vue 0 → 100644
View file @ b552c48f
<!-- banner管理 -->
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="content_top">
<el-form
:model="formData"
:rules="formRules"
ref="formRef"
style="max-width: 1048px"
class="form"
>
<el-form-item label="公司名称" prop="company_name">
<el-input v-model="formData.company_name" placeholder="请输入公司名称" show-word-limit maxlength="50"/>
</el-form-item>
<el-form-item label="公司地址" prop="company_address">
<el-input v-model="formData.company_address" placeholder="请输入公司地址" show-word-limit maxlength="100"/>
</el-form-item>
<el-form-item label="公司logo" prop="company_logo">
<bg-upload-image v-model="formData.company_logo" :limit="1" listType="picture-card" :accept="['.jpg','.jpeg','.png']"></bg-upload-image>
</el-form-item>
<el-form-item label="公司电话" prop="company_phone">
<el-input v-model="formData.company_phone" placeholder="请输入公司电话" show-word-limit maxlength="20" />
</el-form-item>
</el-form>
</div>
<div class="content_bottom">
<div>
<el-button type="primary" @click="submit">保存</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const router = useRouter()
const route = useRoute()
const formRef = ref(null);
const state = reactive({
formData: {
company_name: "",
company_address: "",
company_logo: [],
company_phone: ""
},
formRules: {
company_name: [
{ required: true, message: "请输入公司名称", trigger: "blur"},
{ max: 50, message: "长度最大为50个字符", trigger: "blur"}
],
company_address: [
],
company_logo: [
],
company_phone: [
],
}
})
const getFootInfo = () => {
// axios
// .get(`/apaas/system/v5/banner/${id}`)
// .then(res => {
// if (res.data.code == 200) {
// const data = res.data.data
// bannerFormRef.value.setForm({
// company_name: data.company_name,
// company_address: data.company_address,
// company_logo: data.company_logo ? [{url: data.company_logo}] : [],
// company_phone: data.company_phone
// })
// }else {
// ElMessage.error(res.data.data)
// }
// })
// .catch(err => {
// console.log(err)
// })
}
const submit = () => {
formRef.value.validate((valid, fields) => {
if (valid) {
}
})
}
onBeforeMount(() => {
getFootInfo()
})
const {
formData,
formRules,
} = toRefs(state)
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.main_container {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
border-radius: 6px;
margin: 0 0 16px;
position: relative;
height: calc(100% - 62px);
// padding: 24px;
.content_top {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
padding: 24px;
.form {
.el-form-item {
display: block;
}
}
}
.content_bottom {
height: 68px;
line-height: 68px;
text-align: right;
padding: 0 20px;
border-top: 1px solid #e6e9ef;
.el-button {
width: 92px;
}
}
}
}
</style>
\ No newline at end of file
src/page/main/home-config/recommend/edit/index.vue 0 → 100644
View file @ b552c48f
<!-- banner管理 -->
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="content_top">
<!-- <banner-form ref="bannerFormRef" @action="submitFormData"></banner-form> -->
</div>
<div class="content_bottom">
<div>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submit">保存</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
// import bannerForm from "./banner_form.vue"
const router = useRouter()
const route = useRoute()
const bannerFormRef = ref(null);
const state = reactive({
formData: {
banner_name: "",
link_address: "",
banner_image: [],
state: 1
}
})
const getDetail = (id) => {
axios
.get(`/apaas/system/v5/banner/${id}`)
.then(res => {
if (res.data.code == 200) {
const data = res.data.data
bannerFormRef.value.setForm({
banner_name: data.banner_name,
link_address: data.link_address,
banner_image: data.banner_image ? [{url: data.banner_image}] : [],
state: data.state
})
}else {
ElMessage.error(res.data.data)
}
})
.catch(err => {
console.log(err)
})
}
const submit = () => {
bannerFormRef.value.submitForm()
}
const submitFormData = (data) => {
if (data) {
Object.assign(state.formData,data);
console.log(state.formData)
if (route.query.id) {
// 编辑
let params = {
...state.formData,
id: +route.query.id
}
params.banner_image = params.banner_image && params.banner_image.length > 0 ? params.banner_image[0].url : ''
axios
.put(`/apaas/system/v5/banner`,params)
.then(res => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg)
router.go(-1)
}else {
ElMessage.error(res.data.data)
}
})
}else {
let params = {
...state.formData,
}
params.banner_image = params.banner_image && params.banner_image.length > 0 ? params.banner_image[0].url : ''
axios
.post(`/apaas/system/v5/banner`,params)
.then(res => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg)
router.go(-1)
}else {
ElMessage.error(res.data.data)
}
})
}
}
}
const cancel = () => {
router.go(-1)
}
onBeforeMount(() => {
if (route.query.id) {
getDetail(route.query.id)
}
})
const {
} = toRefs(state)
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.main_container {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
border-radius: 6px;
margin: 0 0 16px;
position: relative;
height: calc(100% - 62px);
// padding: 24px;
.content_top {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
padding: 24px;
}
.content_bottom {
height: 68px;
line-height: 68px;
text-align: right;
padding: 0 20px;
border-top: 1px solid #e6e9ef;
.el-button {
width: 92px;
}
}
}
}
</style>
\ No newline at end of file
src/page/main/home-config/recommend/index.vue 0 → 100644
View file @ b552c48f
<!-- banner管理 -->
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group
:showSearch="false"
>
<template v-slot:left_action>
<div class="apaas_button">
<el-button class="register_btn" type="primary" @click="addBanner">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
新增
</el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<div class="table bg-scroll">
<bg-table
ref="Bgtable"
:headers="headers"
:rows="tableRows"
:isIndex="true"
:stripe="true"
>
<template v-slot:state="{ row }">
<bg-switch @click="changeUseRow(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btns :operations="getOperations(row)" />
</template>
</bg-table>
</div>
</div>
</div>
<!-- 删除弹窗 -->
<el-dialog
custom-class="dialog_box"
title="提示"
v-model="dialogDelete"
width="400px"
:before-close="
() => {
dialogDelete = false;
}
"
>
<div>确定要删除吗？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const router = useRouter()
const Bgtable = ref(null)
const state = reactive({
headers: [
{
label: "能力类型",
prop: "ability_type",
},
{
label: "创建人",
prop: "created_user",
},
{
label: "更新时间",
prop: "update_time",
},
{
label: "是否启用",
prop: "state",
},
{
label: "操作",
prop: "action",
width: 176,
fixed: "right",
},
],
tableRows: [],
dialogDelete: false,
actionRow: null,
})
const getRoleRows = () => {
state.tableRows = [
{
id: 1,
ability_type: "数据服务",
created_user: "admin",
update_time: "2022-11-29 14:30:34",
state: 1,
sort: 1,
},
{
id: 2,
ability_type: "视频服务",
created_user: "admin",
update_time: "2022-11-29 14:30:34",
state: 0,
sort: 2,
},
{
id: 3,
ability_type: "综合服务",
created_user: "admin",
update_time: "2022-11-29 14:30:34",
state: 1,
sort: 3,
},
{
id: 4,
ability_type: "融合服务",
created_user: "admin",
update_time: "2022-11-29 14:30:34",
state: 0,
sort: 4,
},
{
id: 5,
ability_type: "时空服务",
created_user: "admin",
update_time: "2022-11-29 14:30:34",
state: 1,
sort: 5,
},
]
if (state.tableRows.length > 0) {
state.tableRows.forEach(e => {
e.canMoveUp = true
e.canMoveDown = true
})
state.tableRows[0].canMoveUp = false
state.tableRows[state.tableRows.length - 1].canMoveDown = false
}
// axios
// .get(`/apaas/service/v5/ability/query/list`,)
// .then((res) => {
// if (res.data.code == 200) {
// state.tableRows = res.data.data || []
// if (state.tableRows.length > 0) {
// state.tableRows.forEach(e => {
// e.canMoveUp = true
// e.canMoveDown = true
// })
// state.tableRows[0].canMoveUp = false
// state.tableRows[state.tableRows.length - 1].canMoveDown = false
// }
// }else {
// ElMessage.error(res.data.data)
// }
// })
} // 获取列表
const getOperations = (row) => {
return [
{
name: "编辑",
callback: () => edit_row(row),
disabled: row.state == 1,
},
{
name: "删除",
callback: () => delete_row(row),
disabled: row.state == 1,
},
{
name: "上移",
callback: () => moveRow(row,1),
disabled: !row.canMoveUp,
},
{
name: "下移",
callback: () => moveRow(row,2),
disabled: !row.canMoveDown,
},
];
} // 表格操作按钮
const addBanner = () => {
console.log("新增banner")
}
const edit_row = (row) => {
console.log("去编辑")
}
const delete_row = (row) => {
state.actionRow = row
state.dialogDelete = true
console.log("删除")
}
const deleteData = () => {
console.log("确定删除",state.actionRow)
state.dialogDelete = false
}
const moveRow = (row,type) => {
let index
state.tableRows.forEach((e,i) => {
if (e.id == row.id) {
index = i
}
})
let nextRow
if (type == 1) { // 上移
nextRow = state.tableRows[index - 1]
}else { // 下移
nextRow = state.tableRows[index + 1]
}
let params = [
{
id: row.id,
sort: nextRow.sort
},
{
id: nextRow.id,
sort: row.sort
}
]
console.log(params)
// axios
// .put(``,[...params])
// .then((res) => {
// if (res.data.code == 200) {
// ElMessage.success(res.data.msg)
// getRoleRows()
// }else {
// ElMessage.error(res.data.data)
// }
// })
// .catch((err) => {
// console.log(err)
// })
}
const changeUseRow = (row) => {
console.log(row)
}
onBeforeMount(() => {
getRoleRows()
})
const {
headers,
tableRows,
dialogDelete,
} = toRefs(state)
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.main_container {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
border-radius: 6px;
margin: 0 0 16px;
position: relative;
height: calc(100% - 62px);
.table_container {
height: calc(100% - 70px);
padding: 0 16px;
.table {
max-height: calc(100% - 64px);
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment