From b552c48f9b1f577995ebb634fc62e9d6fe804f33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BC=9F=E5=BA=9A?= <zhaoweigeng@wodcloud.com>
Date: Tue, 6 Dec 2022 16:11:39 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E9=83=A8=E5=88=86=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=AE=A1=E7=90=86=E4=B8=8E=E8=8F=9C=E5=8D=95=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bg-ui/bg-filter-group.vue                 |   6 +-
 src/components/bg-breadcrumb.vue              | 117 +++++++
 src/components/bg-menu.vue                    |   7 +-
 src/components/login-by-account.vue           |   2 +-
 src/main.js                                   |   2 +-
 src/page/main/develop/menu/index.vue          |   9 +-
 src/page/main/develop/menu/menu-form.vue      |  33 +-
 .../home-config/banner/edit/banner_form.vue   | 107 +++++++
 .../main/home-config/banner/edit/index.vue    | 161 ++++++++++
 src/page/main/home-config/banner/index.vue    | 284 +++++++++++++++++
 src/page/main/home-config/foot-info/index.vue | 157 +++++++++
 .../main/home-config/recommend/edit/index.vue | 161 ++++++++++
 .../home-config/recommend/edit/type-form.vue  |   0
 src/page/main/home-config/recommend/index.vue | 298 ++++++++++++++++++
 14 files changed, 1335 insertions(+), 9 deletions(-)
 create mode 100644 src/components/bg-breadcrumb.vue
 create mode 100644 src/page/main/home-config/banner/edit/banner_form.vue
 create mode 100644 src/page/main/home-config/banner/edit/index.vue
 create mode 100644 src/page/main/home-config/banner/index.vue
 create mode 100644 src/page/main/home-config/foot-info/index.vue
 create mode 100644 src/page/main/home-config/recommend/edit/index.vue
 create mode 100644 src/page/main/home-config/recommend/edit/type-form.vue
 create mode 100644 src/page/main/home-config/recommend/index.vue

diff --git a/src/bg-ui/bg-filter-group.vue b/src/bg-ui/bg-filter-group.vue
index eaf80eb..ec08281 100644
--- a/src/bg-ui/bg-filter-group.vue
+++ b/src/bg-ui/bg-filter-group.vue
@@ -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
   }
 })
 
diff --git a/src/components/bg-breadcrumb.vue b/src/components/bg-breadcrumb.vue
new file mode 100644
index 0000000..5a7dd39
--- /dev/null
+++ b/src/components/bg-breadcrumb.vue
@@ -0,0 +1,117 @@
+<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>
diff --git a/src/components/bg-menu.vue b/src/components/bg-menu.vue
index 0b7df10..e6b0e47 100644
--- a/src/components/bg-menu.vue
+++ b/src/components/bg-menu.vue
@@ -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)
     },
diff --git a/src/components/login-by-account.vue b/src/components/login-by-account.vue
index 964650f..920961e 100644
--- a/src/components/login-by-account.vue
+++ b/src/components/login-by-account.vue
@@ -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);
diff --git a/src/main.js b/src/main.js
index 3ba5fdd..075e9d2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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) {
       //已登录则记录菜单和用户信息
diff --git a/src/page/main/develop/menu/index.vue b/src/page/main/develop/menu/index.vue
index db9db51..8872665 100644
--- a/src/page/main/develop/menu/index.vue
+++ b/src/page/main/develop/menu/index.vue
@@ -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);
@@ -445,7 +447,8 @@ const saveMenu = (el,type) => {
         state: el.menuForm.state,
         menu_url: el.menuForm.menu_url,
         menu_logo: el.menuForm.menu_logo,
-        source: el.menuForm.menu_type == 0 ? "" : el.menuForm.source,
+        source: el.menuForm.menu_type == 0 ? "" : el.menuForm.source, 
+        system_type: el.menuForm.system_type,
       }
       if (state.selectData.id) { // 编辑
         axios
diff --git a/src/page/main/develop/menu/menu-form.vue b/src/page/main/develop/menu/menu-form.vue
index 2f0f717..73310ad 100644
--- a/src/page/main/develop/menu/menu-form.vue
+++ b/src/page/main/develop/menu/menu-form.vue
@@ -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 })
diff --git a/src/page/main/home-config/banner/edit/banner_form.vue b/src/page/main/home-config/banner/edit/banner_form.vue
new file mode 100644
index 0000000..1af48e4
--- /dev/null
+++ b/src/page/main/home-config/banner/edit/banner_form.vue
@@ -0,0 +1,107 @@
+<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
diff --git a/src/page/main/home-config/banner/edit/index.vue b/src/page/main/home-config/banner/edit/index.vue
new file mode 100644
index 0000000..b2a478d
--- /dev/null
+++ b/src/page/main/home-config/banner/edit/index.vue
@@ -0,0 +1,161 @@
+<!-- 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
diff --git a/src/page/main/home-config/banner/index.vue b/src/page/main/home-config/banner/index.vue
new file mode 100644
index 0000000..5270049
--- /dev/null
+++ b/src/page/main/home-config/banner/index.vue
@@ -0,0 +1,284 @@
+<!-- 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
diff --git a/src/page/main/home-config/foot-info/index.vue b/src/page/main/home-config/foot-info/index.vue
new file mode 100644
index 0000000..acc8134
--- /dev/null
+++ b/src/page/main/home-config/foot-info/index.vue
@@ -0,0 +1,157 @@
+<!-- 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
diff --git a/src/page/main/home-config/recommend/edit/index.vue b/src/page/main/home-config/recommend/edit/index.vue
new file mode 100644
index 0000000..d1d994a
--- /dev/null
+++ b/src/page/main/home-config/recommend/edit/index.vue
@@ -0,0 +1,161 @@
+<!-- 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
diff --git a/src/page/main/home-config/recommend/edit/type-form.vue b/src/page/main/home-config/recommend/edit/type-form.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/page/main/home-config/recommend/index.vue b/src/page/main/home-config/recommend/index.vue
new file mode 100644
index 0000000..252e1f3
--- /dev/null
+++ b/src/page/main/home-config/recommend/index.vue
@@ -0,0 +1,298 @@
+<!-- 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
-- 
2.26.0