feat：更新文件

src/api/api.js

@@ -1,2 +1,3 @@
-import { get,post } from "@/util/http/request"
-export const loginapi = params => post('/sys/login', params)
+import { get, post } from '@/util/http/request'
+export const loginapi = (params) => post('/sys/login', params)
+export const menuList = (params) => get('/sys/menu/user')

src/api/sence/index.js

@@ -0,0 +1,2 @@
+import { get, post } from '@/util/http/request'
+export const senceList = (params) => post('/scene/list', params)

src/components/searchForm/index.vue

@@ -1,33 +1,44 @@
 <template>
   <div id="searchForm">
-    <div
-      class="searchBox"
-      v-if="searchFormData.searchList && searchFormData.searchList.length > 0"
-    >
-      <div v-for="(i, index) in searchFormData.searchList" :key="index">
-        <div v-if="i.type == 'input'" class="inputBox">
+    <div class="searchBox"
+         v-if="searchFormData.searchList && searchFormData.searchList.length > 0">
+      <div v-for="(i, index) in searchFormData.searchList"
+           :key="index">
+        <div v-if="i.type == 'input'"
+             class="inputBox">
           <!-- <el-input
             v-model.trim="searchData.data[index].value" -->
-          <el-input v-model="searchData[i.model]" placeholder="Please input" />
+          <el-input v-model="searchData[i.model]"
+                    placeholder="Please input" />
         </div>
-        <div class="selectBox" v-if="i.type == 'select'">
-          <el-select v-model="searchData[i.model]" placeholder="Select">
-            <el-option
-              v-for="item in i.options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
+        <div class="selectBox"
+             v-if="i.type == 'select'">
+          <el-select v-model="searchData[i.model]"
+                     placeholder="Select">
+            <el-option v-for="item in i.options"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
             </el-option>
           </el-select>
         </div>
       </div>
 
-      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button type="primary"
+                 @click="handleSearch">查询</el-button>
     </div>
-    <div class="buttonBox">
-      <slot name="button"></slot>
+    <div class="buttonBox"
+         v-if="searchFormData.action">
+      <!-- <slot name="button"></slot> -->
+
+      <el-button @click="o.clickFun"
+                 v-for="(o,key) in searchFormData.action"
+                 :key="key"
+                 :type="o.type ||'success'">
+        {{o.name}}
+      </el-button>
     </div>
+
   </div>
 </template>
 
@@ -39,8 +50,8 @@ import {
   toRefs,
   onMounted,
   getCurrentInstance,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
+} from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 export default defineComponent({
   props: {
     searchFormData: {
@@ -49,56 +60,56 @@ export default defineComponent({
     },
   },
   setup() {
-    const { ctx } = getCurrentInstance();
+    const { ctx } = getCurrentInstance()
     const data = reactive({
       searchData: {},
 
-      input: ref(""),
-      value: ref(""),
+      input: ref(''),
+      value: ref(''),
       options: [
         {
-          value: "Option1",
-          label: "Option1",
+          value: 'Option1',
+          label: 'Option1',
         },
         {
-          value: "Option2",
-          label: "Option2",
+          value: 'Option2',
+          label: 'Option2',
         },
         {
-          value: "Option3",
-          label: "Option3",
+          value: 'Option3',
+          label: 'Option3',
         },
         {
-          value: "Option4",
-          label: "Option4",
+          value: 'Option4',
+          label: 'Option4',
         },
         {
-          value: "Option5",
-          label: "Option5",
+          value: 'Option5',
+          label: 'Option5',
         },
       ],
-    });
+    })
     onMounted(() => {
-      initSearch(ctx.searchFormData.searchList);
-    });
+      initSearch(ctx.searchFormData.searchList)
+    })
     const handleSearch = () => {
-      ctx.$emit('handleSearch',data.searchData)
-    };
+      ctx.$emit('handleSearch', data.searchData)
+    }
     const initSearch = (list) => {
-      console.log(list.length);
+      console.log(list.length)
       if (list && list.length > 0) {
         list.forEach((item, index) => {
-          data.searchData[item.model] = item.text || "";
-        });
+          data.searchData[item.model] = item.text || ''
+        })
       }
-    };
+    }
     return {
-        handleSearch,
+      handleSearch,
       ...toRefs(data),
-    };
+    }
   },
   components: {},
-});
+})
 </script>
 
 <style scoped lang="scss">

src/components/tableForm/index.vue

@@ -1,73 +1,138 @@
 <template>
-  <div id="tableForm">
-    <div class="tableContent">
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column align="center" prop="date" label="Date" />
-        <el-table-column align="center" prop="name" label="Name" />
-        <el-table-column align="center" prop="address" label="Address" />
-      </el-table>
-    </div>
-    <div class="paginationBox">
-      <el-pagination
-        v-model:currentPage="currentPage2"
-        :page-sizes="sizes"
-        :page-size="sizes[0]"
-        layout="sizes, prev, pager, next"
-        :total="1000"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      >
-      </el-pagination>
+  <div id="dataBox">
+    <searchForm v-if="searchFormData"
+                :searchFormData="searchFormData"
+                @handleSearch="handleSearch">
+      <!-- <template #button>
+        <slot name="button">
+
+        </slot>
+
+      </template> -->
+    </searchForm>
+    <div id="tableForm">
+      <div class="tableContent">
+        <el-table :data="tableData"
+                  style="width: 100%">
+          <el-table-column v-for="(item, i) in tableHeader"
+                           :key="i"
+                           :prop="item.prop"
+                           :label="item.label"
+                           :width="item.width"
+                           :filters="item.filters"
+                           :column-key="item.columnKey"
+                           :filtered-value="item.filteredValue"
+                           :filter-multiple="item.filterMultiple"
+                           :align="item.center || 'center'">
+            <!-- <slot name="column">
+          </slot> -->
+            <template #default="scope">
+              <v-solt v-if="item.render"
+                      :render="item.render"
+                      :row="scope.row"
+                      :index="scope.$index"
+                      :column="item"></v-solt>
+              <div v-else-if="item.action">
+                <el-link href="javascripy:;"
+                         @click="o.clickFun(scope.$index,scope.row)"
+                         v-for="(o,key) in item.action"
+                         :key="key"
+                         :type="o.type ||'primary'">
+                  {{o.name}}
+                </el-link>
+              </div>
+              <span v-else>{{scope.row[item.prop] || '-'}}</span>
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="paginationBox">
+        <el-pagination v-model:currentPage="currentPage2"
+                       :page-sizes="sizes"
+                       :page-size="sizes[0]"
+                       layout="sizes, prev, pager, next"
+                       :total="1000"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
     </div>
+
   </div>
 </template>
 
 <script>
-import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { defineComponent, reactive, ref, toRefs, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import searchForm from '@/components/searchForm/index.vue'
+import vSolt from './vSolt.vue'
 export default defineComponent({
-  setup() {
+  // props: ['dataApi', 'tableHeader'],
+  props: {
+    dataApi: Function,
+    config: {
+      type: Object,
+      default: function () {
+        return null
+      },
+    },
+    tableHeader: Array,
+    tableData: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    searchFormData: {
+      type: Object,
+      default: function () {
+        return null
+      },
+    },
+  },
+  setup(props, context) {
     const data = reactive({
       sizes: [10, 30, 50, 100],
       currentPage2: ref(5),
-      tableData: [
-        {
-          date: "2016-05-03",
-          name: "Tom",
-          address: "No. 189, Grove St, Los Angeles",
-        },
-        {
-          date: "2016-05-02",
-          name: "Tom",
-          address: "No. 189, Grove St, Los Angeles",
-        },
-        {
-          date: "2016-05-04",
-          name: "Tom",
-          address: "No. 189, Grove St, Los Angeles",
-        },
-        {
-          date: "2016-05-01",
-          name: "Tom",
-          address: "No. 189, Grove St, Los Angeles",
-        },
-      ],
-    });
+      // tableData: [],
+      pageParam: {
+        limit: 10,
+        nd: 1635487948418,
+        order: 'asc',
+        page: 1,
+        sidx: '',
+        token: localStorage.getItem('token'),
+        _search: false,
+      },
+    })
+    onMounted(() => {
+      // handleTableData()
+    })
 
+    const handleTableData = () => {
+      props
+        .dataApi(data.pageParam)
+        .then((res) => {
+          console.log(res)
+          data.tableData = res.page.list
+        })
+        .catch((err) => {})
+    }
     const handleSizeChange = (val) => {
-      console.log(`${val} items per page`);
-    };
+      console.log(`${val} items per page`)
+    }
     const handleCurrentChange = (val) => {
-      console.log(`current page: ${val}`);
-    };
+      console.log(`current page: ${val}`)
+    }
     return {
       handleSizeChange,
       handleCurrentChange,
       ...toRefs(data),
-    };
+    }
   },
-  components: {},
-});
+  components: { searchForm, vSolt },
+})
 </script>
 
 <style lang="scss">
@@ -79,6 +144,16 @@ export default defineComponent({
   overflow: hidden;
   padding: 20px;
   box-sizing: border-box;
+  .el-table {
+    .cell {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .el-link {
+        margin-right: 5px;
+      }
+    }
+  }
 }
 .paginationBox {
   display: flex;

src/components/tableForm/vSolt.vue

@@ -0,0 +1,36 @@
+  <template>
+  <div :render="render"
+       :row="row"
+       :index="index"
+       :column="item">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vSolt',
+  props: {
+    row: Object,
+    render: Function,
+    index: Number,
+    column: {
+      type: Object,
+      default: null,
+    },
+  },
+  setup(props) {
+    return () => {
+      const params = {
+        row: props.row,
+        index: props.index,
+      }
+      if (props.column) params.column = props.column
+      return props.render(params)
+    }
+  },
+}
+</script>
+
+<style>
+</style>

src/layout/aside/index.vue

@@ -2,26 +2,30 @@
   <div id="aside">
     <h3 class="productName">四维指房宝</h3>
     <div class="menuList">
-      <el-menu
-        :default-active="activeName"
-        :unique-opened="true"
-        class="el-menu-vertical"
-        @open="handleOpen"
-        @close="handleClose"
-        @select="handleClick"
-        router
-      >
-        <div v-for="(item, index) in muenList" :key="index">
-          <el-menu-item v-if="!item.children" :index="item.path">
+      <el-menu text-color="#fff"
+               background-color="#2f4050"
+               :default-active="activeName"
+               :unique-opened="true"
+               class="el-menu-vertical"
+               @open="handleOpen"
+               @close="handleClose"
+               @select="handleClick"
+               router>
+        <div v-for="(item, index) in muenList"
+             :key="index">
+          <el-menu-item v-if="!item.children"
+                        :index="item.path">
             <i :class="item.icon"></i>
             <span>{{ item.name }}</span>
           </el-menu-item>
-          <el-sub-menu v-else :index="item.key">
+          <el-sub-menu v-else
+                       :index="item.key">
             <template #title>
               <i :class="item.icon"></i>
               <span>{{ item.name }}</span>
             </template>
-            <div v-for="(j, j_index) in item.children" :key="j_index">
+            <div v-for="(j, j_index) in item.children"
+                 :key="j_index">
               <el-menu-item :index="j.path">{{ j.name }}</el-menu-item>
             </div>
           </el-sub-menu>
@@ -31,93 +35,96 @@
   </div>
 </template>
 <script>
-import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useStore } from "vuex";
+import { defineComponent, reactive, ref, toRefs, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 export default defineComponent({
-  name: "Aside",
+  name: 'Aside',
   components: {},
   setup(props, ctx) {
-    const router = useRouter();
-    const route = useRoute();
-    const store = useStore();
+    const router = useRouter()
+    const route = useRoute()
+    const store = useStore()
     const data = reactive({
       muenList: [
         {
-          name: "首页",
-          path: "/home",
-          icon: "el-icon-location",
-          key: "home",
+          name: '首页',
+          path: '/home',
+          icon: 'el-icon-location',
+          key: 'home',
         },
         {
-          name: "VR场景",
+          name: 'VR场景',
           path: null,
-          icon: "el-icon-document",
-          key: "vrList",
+          icon: 'el-icon-document',
+          key: 'vrList',
           children: [
             {
-              name: "场景列表",
-              path: "/list",
-              icon: "",
-              key: "list",
+              name: '场景列表',
+              path: '/sence',
+              icon: '',
+              key: 'sence',
             },
             {
-              name: "直播间",
-              path: "/brand",
-              icon: "",
-              key: "brand",
+              name: '直播间',
+              path: '/live',
+              icon: '',
+              key: 'live',
             },
           ],
         },
         {
-          name: "商品管理",
+          name: '商品管理',
           path: null,
-          icon: "el-icon-setting",
-          key: "product",
+          icon: 'el-icon-setting',
+          key: 'product',
           children: [
             {
-              name: "商品属性",
-              path: "/productNature",
-              icon: "",
-              key: "productNature",
+              name: '商品属性',
+              path: '/productNature',
+              icon: '',
+              key: 'productNature',
             },
             {
-              name: "商品列表",
-              path: "/productList",
-              icon: "",
-              key: "productList",
+              name: '商品列表',
+              path: '/productList',
+              icon: '',
+              key: 'productList',
             },
           ],
         },
       ],
-      activeName: "",
-    });
+      activeName: '',
+    })
     onMounted(() => {
       //   data.activeName = route.meta.title;
-      data.activeName = route.path;
-      console.log(data.activeName);
+      let storeMenuList = JSON.parse(localStorage.getItem('menuList'))
+      console.log(storeMenuList)
+      // this.muenList = storeMenuList
+      data.activeName = route.path
+      console.log(data.activeName)
       //   console.log(route.meta.title);
-    });
+    })
     const handleOpen = (key, keyPath) => {
       //   console.log(key, keyPath);
-    };
+    }
     const handleClose = (key, keyPath) => {
       //   console.log(key, keyPath);
-    };
+    }
     const handleClick = (key, keyPath) => {
       //   console.log(key, keyPath);
       //   console.log(route);
-      store.commit("setNavTitle", route.name);
-      console.log(store.state.navTitle);
-    };
+      // store.commit("setNavTitle", route.name);
+      // console.log(store.state.navTitle);
+    }
     return {
       handleOpen,
       handleClose,
       handleClick,
       ...toRefs(data),
-    };
+    }
   },
-});
+})
 </script>
 
 <style scoped lang="scss">
@@ -133,6 +140,7 @@ export default defineComponent({
   }
   .menuList {
     .el-menu {
+      border-right: none;
     }
   }
 }

src/layout/content/components/topbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="topBar">
-    <div>{{ title }}</div>
+    <div class="navTitle">{{ title }}</div>
 
     <div class="accountMsg">
       <div class="name"><i class="fa fa-user"></i>项王装饰</div>
@@ -8,7 +8,10 @@
         <i class="fa fa-lock"></i>
         修改密码
       </div>
-      <div class="exit" @click="logout"><i class="fa fa fa-sign-out"></i>退出</div>
+      <div class="exit"
+           @click="logout">
+        <i class="fa fa fa-sign-out"></i>退出
+      </div>
     </div>
   </div>
 </template>
@@ -21,38 +24,47 @@ import {
   toRefs,
   onMounted,
   getCurrentInstance,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { ElMessage } from "element-plus";
-import confirm from "@/components/confirm";
+  computed,
+} from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import confirm from '@/components/confirm'
+import { useStore } from 'vuex'
 export default defineComponent({
   setup() {
-    const router = useRouter();
-    const route = useRoute();
+    const store = useStore()
+    const router = useRouter()
+    const route = useRoute()
     const data = reactive({
-      title: route.name,
-    });
+      // title: store.state.navTitle,
+    })
+    const title = computed(() => {
+      return store.state.navTitle
+    })
 
     const logout = async () => {
       let res = await confirm({
-        title: "注：您确定要安全退出本次登录吗？",
-      });
+        title: '注：您确定要安全退出本次登录吗？',
+      })
       if (res) {
-        router.push("/login");
+        store.commit('removeUserInfo')
+        store.commit('removeToken')
+        router.push('/login')
         ElMessage({
-          type: "success",
-          message: "退出成功",
-        });
+          type: 'success',
+          message: '退出成功',
+        })
       }
-    };
+    }
 
     return {
       logout,
+      title,
       ...toRefs(data),
-    };
+    }
   },
   components: {},
-});
+})
 </script>
 
 <style scoped lang="scss">
@@ -67,6 +79,12 @@ export default defineComponent({
   display: flex;
   align-items: center;
   justify-content: space-between;
+  z-index: 10;
+  position: relative;
+  .navTitle {
+    font-size: 18px;
+    color: #666;
+  }
   .accountMsg {
     display: flex;
     align-items: center;
@@ -74,6 +92,21 @@ export default defineComponent({
     > div {
       margin-left: 10px;
       cursor: pointer;
+      color: #999c9e;
+      font-size: 14px;
+      &:first-of-type {
+        cursor: default;
+        &:hover {
+          color: #999c9e;
+        }
+      }
+      &:hover {
+        color: #409eff;
+      }
+      // margin-right: 5px;
+      > i {
+        margin-right: 2px;
+      }
     }
   }
 }

src/layout/content/index.vue

@@ -5,16 +5,17 @@
       <router-view></router-view>
     </div>
   </div>
+
 </template>
 
 <script>
-import topBar from "./components/topbar.vue";
+import topBar from './components/topbar.vue'
 export default {
   data() {
-    return {};
+    return {}
   },
   components: { topBar },
-};
+}
 </script>
 
 <style scoped lang="scss">
@@ -22,9 +23,11 @@ export default {
   width: calc(100% - 200px);
   height: 100vh;
   background-color: #f2f2f2;
-  .views_content{
-      padding: 20px;
-      box-sizing: border-box;
+  .views_content {
+    height: calc(100% - 60px);
+    padding: 20px;
+    box-sizing: border-box;
+    overflow-x: auto;
   }
 }
 </style>

src/layout/login/login.vue

@@ -1,69 +1,86 @@
 <template>
   <div id="login">
-    <el-button type="primary" @click="login">登录</el-button>
-    <input v-model="captcha" type="" name="" />
-    <img src="https://plaza.4dkankan.com/captcha.jpg" alt="" />
-    <a v-if="show">文本</a>
+    <el-button type="primary"
+               @click="login">登录</el-button>
+    <input v-model="captcha"
+           type=""
+           name="" />
+    <img src="https://plaza.4dkankan.com/captcha.jpg"
+         alt="" />
     <router-view></router-view>
   </div>
 </template>
 
 <script>
-import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useStore } from "vuex";
-import { Base64 } from "js-base64";
-import { loginapi } from "@/api/api";
-import { encodeStr } from "@/util/common";
+import { defineComponent, reactive, ref, toRefs, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { Base64 } from 'js-base64'
+import { loginapi, menuList } from '@/api/api'
+import { encodeStr } from '@/util/common'
+import { setLocalStorage } from '@/util/browser'
 export default defineComponent({
-  name: "login",
+  name: 'login',
   components: {},
   setup(props, ctx) {
-    const store = useStore();
-    const wenben = ref(null);
-    console.log(props);
-    console.log(ctx);
-    const router = useRouter();
-    console.log(router);
+    const store = useStore()
+    const router = useRouter()
+    const route = useRoute()
+    // console.log(route)
+    // console.log(router)
     const data = reactive({
       show: false,
-      username: "18819272208",
-      password: "zfb123456",
+      username: '18819272208',
+      password: 'zfb123456',
       //   captcha: "",
-    });
-    console.log(data);
+    })
+    console.log(data)
     const login = () => {
-      data.show = true;
-      console.log(data.show);
-      let params = {
-        username: data.username,
-        password: encodeStr(Base64.encode(data.password)),
-        // password: data.password,
-        captcha: data.captcha,
-      };
-      store.dispatch("setUserInfo", params);
-      console.log(store.state.userInfo);
+      data.show = true
+      console.log(data.show)
+      // let params = {
+      //   username: data.username,
+      //   password: encodeStr(Base64.encode(data.password)),
+      //   // password: data.password,
+      //   captcha: data.captcha,
+      // };
+      let params = new FormData()
+      params.append('username', import.meta.env.VITE_USER_NAME)
+      params.append(
+        'password',
+        encodeStr(Base64.encode(import.meta.env.VITE_PASS_WORD))
+      )
+
       loginapi(params)
         .then((res) => {
-          console.log(res);
-          router.push("/home");
+          console.log(res)
+          store.commit('setUserInfo', res.user)
+          store.commit('setToken', res.token)
+          router.push('/home')
+          menuList()
+            .then((res) => {
+              console.log(res)
+              store.commit('setMenuList', res.menuList)
+              console.log(store.state.menuList)
+            })
+            .catch((err) => {})
         })
         .catch((err) => {
-          console.log(params);
-          console.log(err);
-        });
-    };
+          console.log(params)
+          console.log(err)
+        })
+    }
 
     onMounted(() => {
       //   wenben.value.style = "display:none;";
-    });
+    })
 
     return {
       login,
       ...toRefs(data),
-    };
+    }
   },
-});
+})
 </script>
 
 <style scoped lang="scss"></style>

src/main.js

@@ -1,21 +1,18 @@
-import {
-    createApp
-} from 'vue'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
-import router from "./router"
+import router from './router'
 import store from './store'
-
-const app = createApp(App);
-app.config.productionTip = false;
+console.log(import.meta.env.VITE_USER_NAME)
+const app = createApp(App)
+app.config.productionTip = false
 app.use(ElementPlus, {
-    locale
+  locale,
 })
 app.use(router)
 app.use(store)
-app.mount('#app');
-
+app.mount('#app')
 
-// createApp(App).mount('#app')
+// createApp(App).mount('#app')

src/router/index.js

@@ -1,58 +1,63 @@
-import list from './router.config';
-import {
-    createRouter,
-    createWebHashHistory
-} from "vue-router";
+import list from './router.config'
+import store from '@/store/index'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
-const routes = [{
-        path: '/',
-        component: list.layout,
-        children: [{
-                path: '/home',
-                name: '首页',
-                component: list.home,
-                meta: {
-                    title: 'home',
-                    role: [1, 2, 3]
-                },
-            },
-            {
-                path: '/brand',
-                name: '直播间',
-                component: list.brand,
-                meta: {
-                    title: 'brand',
-                    role: [1, 2, 3]
-                },
-            },
+const routes = [
+  {
+    path: '/',
+    component: list.layout,
+    children: [
+      {
+        path: '/home',
+        name: '首页',
+        component: list.home,
+        meta: {
+          title: 'home',
+        },
+      },
+      {
+        path: '/sence',
+        name: '场景列表',
+        component: list.sence,
+        meta: {
+          title: 'sence',
+        },
+      },
+      {
+        path: '/live',
+        name: '直播间',
+        component: list.live,
+        meta: {
+          title: 'live',
+        },
+      },
+    ],
+  },
 
-        ]
-    },
-
-    {
-        path: '/login',
-        component: list.login,
-        
-        // children: [{
-        //     path: 'list',
-        //     name: 'list',
-        //     component: list.list,
-        //     meta: {
-        //         title: 'list',
-        //         role: [1, 2, 3]
-        //     },
-        // }, ]
-    },
-    {
-        path: '/:pathMatch(.*)*',
-        redirect: '/home'
-    },
+  {
+    path: '/login',
+    component: list.login,
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/home',
+  },
 ]
 
-
+// const store = useStore();
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes
-});
+  history: createWebHashHistory(),
+  routes,
+})
+
+router.beforeEach(function (to, from, next) {
+  if (!localStorage.getItem('token')) {
+    if (to.path !== '/login') {
+      return next('/login')
+    }
+  }
+  store.commit('setNavTitle', to.name)
+  next()
+})
 
-export default router
+export default router

src/router/router.config.js

@@ -1,14 +1,13 @@
- 
- import login from "@/layout/login/login.vue"
- import layout from "@/layout/index.vue"
- import home from "@/views/home/home.vue"
- import brand from "@/views/brand/brand.vue"
- import list from "@/views/brand/list.vue"
+import login from '@/layout/login/login.vue'
+import layout from '@/layout/index.vue'
+import home from '@/views/home/home.vue'
+import live from '@/views/live/live.vue'
+import sence from '@/views/sence/sence.vue'
 
- export default {
-     layout,
-     login,
-     home,
-     brand,
-     list
- }
+export default {
+  layout,
+  login,
+  home,
+  live,
+  sence,
+}

src/store/mutations.js

@@ -1,9 +1,26 @@
 const mutations = {
     setUserInfo(state, v) {
         state.userInfo = v
+        window.localStorage.setItem('userInfo',JSON.stringify(v))
+    },
+    setToken(state,v){
+        state.token = v
+        window.localStorage.setItem('token',v)
+    },
+    removeUserInfo(state) {
+        state.userInfo = null
+        window.localStorage.removeItem('userInfo')
+    },
+    removeToken(state){
+        state.token = null
+        window.localStorage.removeItem('token')
     },
     setNavTitle(state,v){
         state.navTitle = v
+    },
+    setMenuList(state,v){
+        state.menuList = v
+        window.localStorage.setItem('menuList',JSON.stringify(v))
     }
  
 }

src/store/state.js

@@ -1,5 +1,7 @@
 const state ={
     userInfo:null,
     navTitle:'',
+    token:null,
+    menuList:[]
 }
 export default state

src/util/browser/index.js

@@ -0,0 +1,13 @@
+export const setSession = (k, v) => {
+    window.sessionStorage.setItem(k, v)
+
+}
+export const removeSession = (k) => {
+    window.sessionStorage.removeItem(k)
+}
+export const setLocalStorage  = (k, v) => {
+    window.localStorage.setItem(k, v)
+}
+export const removeLocalStorage = (k) => {
+    window.localStorage.removeItem(k)
+}

src/views/brand/brand.vue

@@ -1,100 +0,0 @@
-<template>
-  <div id="page">
-    <searchForm :searchFormData="searchFormData" @handleSearch="handleSearch">
-      <template #button>
-        <el-button type="success">新增</el-button>
-        <el-button type="danger">删除</el-button>
-      </template>
-    </searchForm>
-    <tableForm />
-  </div>
-</template>
-
-<script>
-import {
-  defineComponent,
-  reactive,
-  ref,
-  toRefs,
-  onMounted,
-  getCurrentInstance,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
-import searchForm from "@/components/searchForm/index.vue";
-import tableForm from "@/components/tableForm/index.vue";
-export default defineComponent({
-  components: { searchForm, tableForm },
-  setup(props) {
-    const { ctx } = getCurrentInstance();
-    const data = reactive({
-      searchFormData: {
-        btnList: [
-          {
-            type: "bind",
-            text: "绑定主播",
-            function: ctx.bindLive,
-          },
-          {
-            type: "add",
-            text: "新增",
-            function: null,
-          },
-          {
-            type: "edit",
-            text: "修改",
-            function: null,
-          },
-          {
-            type: "delete",
-            text: "删除",
-            function: null,
-          },
-        ],
-        searchList: [
-          {
-            type: "input",
-            model: "input_data",
-            inputType: "text",
-          },
-          {
-            type: "select",
-            model: "select_data",
-            options: [
-              {
-                value: "Option1",
-                label: "Option1",
-              },
-              {
-                value: "Option2",
-                label: "Option2",
-              },
-              {
-                value: "Option3",
-                label: "Option3",
-              },
-              {
-                value: "Option4",
-                label: "Option4",
-              },
-              {
-                value: "Option5",
-                label: "Option5",
-              },
-            ],
-          },
-        ],
-      },
-    });
-    onMounted(() => {});
-    const handleSearch = (res) => {
-      console.log("handleSearch", res);
-    };
-    return {
-      handleSearch,
-      ...toRefs(data),
-    };
-  },
-});
-</script>
-
-<style scoped lang="scss"></style>

src/views/home/home.vue

@@ -1,12 +1,13 @@
 <template>
   <div id="page">
-    <searchForm :searchFormData="searchFormData" @handleSearch="handleSearch">
+    <searchForm :searchFormData="searchFormData"
+                @handleSearch="handleSearch">
       <template #button>
         <el-button type="success">新增</el-button>
         <el-button type="danger">删除</el-button>
       </template>
     </searchForm>
-    <tableForm />
+    <!-- <tableForm /> -->
   </div>
 </template>
 
@@ -18,84 +19,84 @@ import {
   toRefs,
   onMounted,
   getCurrentInstance,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
-import searchForm from "@/components/searchForm/index.vue";
-import tableForm from "@/components/tableForm/index.vue";
+} from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import searchForm from '@/components/searchForm/index.vue'
+import tableForm from '@/components/tableForm/index.vue'
 export default defineComponent({
   components: { searchForm, tableForm },
   setup(props) {
-    const { ctx } = getCurrentInstance();
+    const { ctx } = getCurrentInstance()
     const data = reactive({
       searchFormData: {
         btnList: [
           {
-            type: "bind",
-            text: "绑定主播",
+            type: 'bind',
+            text: '绑定主播',
             function: ctx.bindLive,
           },
           {
-            type: "add",
-            text: "新增",
+            type: 'add',
+            text: '新增',
             function: null,
           },
           {
-            type: "edit",
-            text: "修改",
+            type: 'edit',
+            text: '修改',
             function: null,
           },
           {
-            type: "delete",
-            text: "删除",
+            type: 'delete',
+            text: '删除',
             function: null,
           },
         ],
         searchList: [
           {
-            type: "input",
-            model: "input_data",
-            inputType: "text",
+            type: 'input',
+            model: 'input_data',
+            inputType: 'text',
           },
           {
-            type: "select",
-            model: "select_data",
+            type: 'select',
+            model: 'select_data',
             options: [
               {
-                value: "Option1",
-                label: "Option1",
+                value: 'Option1',
+                label: 'Option1',
               },
               {
-                value: "Option2",
-                label: "Option2",
+                value: 'Option2',
+                label: 'Option2',
               },
               {
-                value: "Option3",
-                label: "Option3",
+                value: 'Option3',
+                label: 'Option3',
               },
               {
-                value: "Option4",
-                label: "Option4",
+                value: 'Option4',
+                label: 'Option4',
               },
               {
-                value: "Option5",
-                label: "Option5",
+                value: 'Option5',
+                label: 'Option5',
               },
             ],
           },
         ],
       },
-    });
-    onMounted(() => {});
+    })
+    onMounted(() => {})
     const handleSearch = (res) => {
-      console.log("handleSearch", res);
-    };
+      console.log('handleSearch', res)
+    }
 
     return {
       handleSearch,
       ...toRefs(data),
-    };
+    }
   },
-});
+})
 </script>
 
 <style scoped lang="scss"></style>

src/views/live/live.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="page">live</div>
+</template>
+
+<script>
+import { defineComponent, reactive, ref, toRefs, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+export default defineComponent({
+  setup() {
+    const data = reactive()
+    return {
+      ...toRefs(data),
+    }
+  },
+  components: {},
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/sence/sence.vue

@@ -0,0 +1,215 @@
+<template>
+  <div id="sence">
+
+    <tableForm :tableData="tableData"
+               :searchFormData="searchFormData"
+               :tableHeader="tableHeader">
+
+      <!-- <template #button>
+        <el-button type="success">新增</el-button>
+      </template> -->
+
+      <!-- <template #column>
+        <el-table-column label="操作"
+                         align="center">
+          <el-link type="primary">绑定主播</el-link>
+          <el-link type="success">编辑</el-link>
+          <el-link type="danger">删除</el-link>
+        </el-table-column>
+      </template> -->
+    </tableForm>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  reactive,
+  ref,
+  toRefs,
+  onMounted,
+  getCurrentInstance,
+  h,
+} from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import tableForm from '@/components/tableForm/index.vue'
+import { senceList } from '@/api/sence'
+export default defineComponent({
+  components: { tableForm },
+  setup(props) {
+    const { ctx } = getCurrentInstance()
+    const data = reactive({
+      pageParam: {
+        limit: 10,
+        nd: 1635487948418,
+        order: 'asc',
+        page: 1,
+        sidx: '',
+        token: localStorage.getItem('token'),
+        _search: false,
+      },
+    })
+    const searchFormData = ref({
+      searchList: [
+        {
+          type: 'input',
+          model: 'input_data',
+          inputType: 'text',
+        },
+        {
+          type: 'select',
+          model: 'select_data',
+          options: [
+            {
+              value: 'Option1',
+              label: 'Option1',
+            },
+            {
+              value: 'Option2',
+              label: 'Option2',
+            },
+            {
+              value: 'Option3',
+              label: 'Option3',
+            },
+            {
+              value: 'Option4',
+              label: 'Option4',
+            },
+            {
+              value: 'Option5',
+              label: 'Option5',
+            },
+          ],
+        },
+      ],
+      action: [
+        {
+          name: '新增',
+          clickFun: () => {
+            handleTableData()
+          },
+        },
+      ],
+    })
+    const tableHeader = ref([
+      { prop: 'sceneName', label: '场景名称' },
+      {
+        prop: 'thumb',
+        label: '封面',
+        render: (params) => {
+          console.log(params.row.thumb)
+          return h('img', {
+            style: {
+              width: '100px',
+              height: '100px',
+            },
+            src: params.row.thumb,
+          })
+        },
+      },
+      { prop: 'sceneUrl', label: '场景链接' },
+      {
+        prop: 'sceneType',
+        label: '是否显示',
+        render: (params) => {
+          if (params.row.sceneType == 0) {
+            return h(
+              'span',
+              {
+                style: {
+                  fontSize: '10px',
+                  fontWeight: 600,
+                  backgroundColor: ' #ed5565',
+                  color: '#FFFFFF',
+                  padding: '3px 8px',
+                },
+              },
+              '否'
+            )
+          } else {
+            return h(
+              'span',
+              {
+                style: {
+                  fontSize: '10px',
+                  fontWeight: 600,
+                  backgroundColor: ' #409EFF',
+                  color: '#FFFFFF',
+                  padding: '3px 8px',
+                },
+              },
+              '是'
+            )
+          }
+        },
+      },
+      {
+        // prop: 'action',
+        label: '操作',
+        action: [
+          {
+            name: '编辑',
+            clickFun: (index, row) => {
+              console.log(index, row)
+            },
+          },
+          {
+            name: '删除',
+            type: 'danger',
+            clickFun: (index, row) => {
+              console.log(index, row)
+              hanldeDelRow(index, row)
+            },
+          },
+        ],
+      },
+    ])
+    const tableData = ref([])
+
+    // const getSenceList = (params) => {
+    //   return senceList(params)
+    // }
+    onMounted(() => {
+      handleTableData()
+    })
+    const handleSearch = (res) => {
+      console.log('handleSearch', res)
+    }
+    const handleTableData = async () => {
+      let res = await senceList(data.pageParam)
+      // .then((res) => {
+      //   console.log(res)
+      //   data.tableData = res.page.list
+      // })
+      // .catch((err) => {})
+      tableData.value = res.page.list
+      console.log(tableData)
+    }
+    const hanldeDelRow = (index, row) => {
+      ElMessageBox.confirm('是否删除改数据?', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+      })
+        .then(() => {
+          tableData.value.splice(index, 1)
+        })
+        .catch(() => {
+          // catch error
+        })
+    }
+    return {
+      handleSearch,
+      handleTableData,
+
+      tableHeader,
+      tableData,
+      searchFormData,
+      ...toRefs(data),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss"></style>

vite.config.js

@@ -1,6 +1,4 @@
-import {
-  defineConfig
-} from 'vite'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 
@@ -15,7 +13,7 @@ export default defineConfig({
       //'@': process.cwd()+'/src'
       //'@':path.resolve('src')
       //'@':path.resolve(__dirname, 'src')
-      '@': path.resolve(__dirname, './src')
+      '@': path.resolve(__dirname, './src'),
     },
   },
   plugins: [vue()],
@@ -62,15 +60,14 @@ export default defineConfig({
     // 反向代理
     proxy: {
       '/sys': {
-        // target: 'https://plaza.4dkankan.com',
         target: 'http://192.168.0.47:8190',
         changeOrigin: true,
-        // rewrite: (path) => path.replace(/^\/sys/, '')
-        pathRewrite: {
-          '^/api': ''
-        }
       },
-    }
+      '/scene': {
+        target: 'http://192.168.0.47:8190',
+        changeOrigin: true,
+      },
+    },
 
     //proxy: {
     //   // string shorthand
@@ -93,5 +90,5 @@ export default defineConfig({
   //生产模式打包配置
   build: {
     outDir: 'dist', //Specify the output directory (relative to project root).
-  }
-})
+  },
+})