11

.env.dev.demo

@@ -9,9 +9,9 @@ VUE_APP_ROUTE_MODE=history
 VUE_APP_TEST_BASE_URL=https://www.machplat.com/roms-server-cnc
 #VUE_APP_TEST_BASE_URL=http://192.168.0.105:10100/roms-server-cnc
 
-VUE_APP_HTML_TITLE=LKT-ROMS
+VUE_APP_HTML_TITLE=LKT-Project
 VUE_APP_LOGIN_TITLE1=设备运维管理云平台
-VUE_APP_LOGIN_TITLE2=LKT-ROMS
+VUE_APP_LOGIN_TITLE2=LKT-Project
 VUE_APP_TITLE_LG=https://roms-cnc.oss-cn-hangzhou.aliyuncs.com/logos/logow1.png
 VUE_APP_LOGIN_LG=https://roms-cnc.oss-cn-hangzhou.aliyuncs.com/logos/lkt_logo2.png
 VUE_APP_LOGIN_SCHEMA=cnc

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "element-ui": "^2.13.2",
+    "vant": "^2.11.1",
     "web-toolkit": "git+https://github.com/mizuki1412/web-toolkit.git"
   },
   "devDependencies": {

src/config.ts

 
+// 主菜单
+export const mainMenuTitles = [
+  // 如果没有子导航，直接在这指定CName一样的值
+  'Demo1', 'icon-monitor',
+  'Demo2', 'icon-dashboard',
+  'Demo3', 'icon-manage2',
+];
+export const loginTitle1 = process.env.VUE_APP_LOGIN_TITLE1;
+export const loginTitle2 = process.env.VUE_APP_LOGIN_TITLE2;
+export const loginLogo = process.env.VUE_APP_LOGIN_LG;
+export const titleLogo = process.env.VUE_APP_TITLE_LG;
+export const schema = process.env.VUE_APP_LOGIN_SCHEMA;
\ No newline at end of file

src/main.ts

@@ -4,22 +4,11 @@ import App from './App.vue';
 // 加载所用组件，含core
 import './plugin';
 import { axiosIntercept, routeIntercept, buildMenu} from 'web-toolkit/src/case-main';
-// 主菜单
-export const mainMenuTitles = [
-  // 如果没有子导航，直接在这指定CName一样的值
-  'Demo1', 'icon-monitor',
-  'Demo2', 'icon-dashboard',
-  'Demo3', 'icon-dashboard',
-];
-export const loginTitle1 = process.env.VUE_APP_LOGIN_TITLE1;
-export const loginTitle2 = process.env.VUE_APP_LOGIN_TITLE2;
-export const loginLogo = process.env.VUE_APP_LOGIN_LG;
-export const titleLogo = process.env.VUE_APP_TITLE_LG;
-export const schema = process.env.VUE_APP_LOGIN_SCHEMA;
-
+import { mainMenuTitles } from './config';
 import './scss/common.scss';
 import { routes } from './router/routes';
 import { genRouter } from 'web-toolkit/src/case-main/router';
+
 export const router = genRouter(routes);
 buildMenu(routes, mainMenuTitles);
 routeIntercept(router);

src/plugin/element.ts

+import Vue from 'vue';
+import { debounce } from 'web-toolkit/src/utils';
+function adapt() {
+  const screenWidth = window.innerWidth;
+  let size = '';
+  if (screenWidth < 940) {
+    size = 'mini';
+  } else if (screenWidth < 1000) {
+    size = 'small';
+  } else {
+    size = 'medium';
+  }
+  Vue.prototype.$ELEMENT = { size };
+}
+window.addEventListener('resize', debounce(adapt));
+adapt();

src/plugin/index.ts

 // 注意放第一个
 import './web-toolkit';
 import './echarts';
+import './element';
+import './vant';

src/plugin/vant.ts

+
+import Vue from 'vue';
+import 'vant/lib/index.css';
+import {
+  Button,
+  Field, Form,
+  Cell, CellGroup,
+  Search,
+  Uploader,
+  Step, Steps,
+  Tab, Tabs,
+  Calendar,
+  Picker,
+  Popup, Tag,
+  Radio, RadioGroup,
+  Empty,
+  Collapse, CollapseItem,
+  Stepper,
+  Divider,
+  ImagePreview, DatetimePicker,
+  Toast, Dialog,List
+} from 'vant';
+
+Vue.use(List);
+Vue.use(Button);
+Vue.use(Field);
+Vue.use(Form);
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Search);
+Vue.use(Uploader);
+Vue.use(Step);
+Vue.use(Steps);
+Vue.use(Tab);
+Vue.use(Tabs);
+Vue.use(Calendar);
+Vue.use(Picker);
+Vue.use(Popup);
+Vue.use(Tag);
+Vue.use(RadioGroup);
+Vue.use(Radio);
+Vue.use(Empty);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Stepper);
+Vue.use(Divider);
+Vue.use(ImagePreview);
+Vue.use(DatetimePicker);
+Vue.use(Toast);
+Vue.use(Dialog);

src/plugin/web-toolkit.ts

-import Vue from 'vue';
+import {ComponentName, registerComponent} from 'web-toolkit/src/components/use';
 
 // scss
 import 'web-toolkit/src/scss/common.scss';
 import 'web-toolkit/src/scss/vivify.scss';
-
 // 注意加载顺序
 import 'web-toolkit/src/plugins';
 import 'web-toolkit/src/case-main';
 import 'web-toolkit/src/filter/date-time';
+// 重载
+import {AxiosInterceptConfig, RouteInterceptConfig} from 'web-toolkit/src/case-main';
+import Qs from 'qs';
+import {storeUserInfo, submitErrChanel} from 'web-toolkit/src/case-main/store/index';
+// import {DepartmentAdmin} from "@/model/department";
+// @ts-ignore
+import NProgress from 'nprogress';
+import {Route} from "vue-router";
+
+registerComponent(ComponentName.Table);
+registerComponent(ComponentName.DatePicker);
+registerComponent(ComponentName.DialogSimple);
+registerComponent(ComponentName.Tip);
+registerComponent(ComponentName.ErrChannel);
+registerComponent(ComponentName.Empty);
+// registerComponent(ComponentName.DialogPassword);
 
-// components
-import lktTable from 'web-toolkit/src/components/kit-table.vue';
-Vue.component('lkt-table', lktTable);
-import LktDatePicker from 'web-toolkit/src/components/kit-date-picker.vue';
-Vue.component('lkt-date-picker', LktDatePicker);
-import KitDialogSimple from 'web-toolkit/src/components/kit-dialog-simple.vue';
-Vue.component('kit-dialog-simple', KitDialogSimple);
-import KitErrChannel from 'web-toolkit/src/components/kit-err-channel.vue';
-Vue.component('kit-err-channel', KitErrChannel);
+AxiosInterceptConfig.requestPartFunc = function(config) {
+  if (!(config.data instanceof FormData)) {
+    const data = Qs.parse(config.data);
+    data.token = storeUserInfo.token;
+    data._schema = process.env.VUE_APP_LOGIN_SCHEMA;
+    config.data = Qs.stringify(data);
+  } else {
+    config.data.append('token', storeUserInfo.token as any);
+    config.data.append('_schema', process.env.VUE_APP_LOGIN_SCHEMA);
+  }
+};
+// RouteInterceptConfig.beforePartFunc = function (to: Route, from: Route, next: any){
+//   if (to.name !== from.name && process.env.VUE_APP_REQUEST_MODE !== 'display') {
+//     NProgress.start();
+//   }
+//   if (!storeUserInfo.token) {
+//     storeUserInfo.token="local"
+//     storeUserInfo.user = {
+//       id: 0,
+//       username: '管理员',
+//       name: '管理员',
+//       role:{
+//         department:{
+//           id: DepartmentAdmin
+//         }
+//       }
+//     } as any
+//     // initStoreUserInfo();
+//   }
+//   // 初始化err-msg-channel
+//   submitErrChanel('');
+//   // 指定默认第一个路由
+//   // if (to.name === storePageMenuOption.indexName) {
+//   //   const menu = getMainRoute();
+//   //   if (menu) { next(menu); }
+//   // }
+//   next();
+// }

src/router/routes.ts

@@ -20,11 +20,60 @@ const demo2 = {
     parentCName: 'Demo2',
   },
 };
+const demo3 = {
+  path: '/demo3',
+  name: 'demo3',
+  component: () => import('../views/demo3/demo3.vue'),
+  meta: {
+    CName: 'Demo3-subtitle',
+    parentCName: 'Demo3',
+  },
+};
+const mobiledemo1 = {
+  path: '/mobile/mobiledemo1',
+  name: 'mobiledemo1',
+  component: () => import('../views-mobile/demo1.vue'),
+  meta: {
+    title: 'demo1',
+    authDisabled:true,
+  },
+};
+
+//手机端
+const mobiledemo2 = {
+  path: '/mobile/mobiledemo2',
+  name: 'mobiledemo2',
+  component: () => import('../views-mobile/demo2.vue'),
+  meta: {
+    title: 'demo2',
+    authDisabled:true,
+  },
+};
+const mobiledemo3 = {
+  path: '/mobile/mobiledemo3',
+  name: 'mobiledemo3',
+  component: () => import('../views-mobile/demo3.vue'),
+  meta: {
+    title: 'demo3',
+    authDisabled:true,
+  },
+};
+const mobiledemo4 = {
+  path: '/mobile/mobiledemo4',
+  name: 'mobiledemo4',
+  component: () => import('../views-mobile/demo4.vue'),
+  meta: {
+    title: 'demo4',
+    authDisabled:true,
+  },
+};
+
 
 // 按顺序 用于菜单的排列
 const indexChildren = [
   demo1,
   demo2,
+  demo3
 ];
 
 export const routes = [
@@ -35,6 +84,16 @@ export const routes = [
     meta: { authDisabled: true },
   },
   {
+    path: '/mobile',
+    name: 'mobile-index', 
+    // redirect: {name:"mobile-login"},
+    component: () => import('../views-mobile/index.vue'),
+    children: [
+      mobiledemo1,mobiledemo2,mobiledemo3,mobiledemo4
+    ],
+    meta: { authDisabled: false },
+  },
+  {
     path: '/',
     name: 'index',
     redirect: 'index-page',
@@ -55,4 +114,5 @@ export const routes = [
     component: () => import('../component/page404.vue'),
     meta: { authDisabled: true },
   },
+ 
 ];

src/views-mobile/demo1.vue

+<template>
+  <div v-loading="loading">
+    demo1
+ 
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, set, watch}  from '@vue/composition-api';
+import {router} from '@/main';
+import {Toast} from 'vant';
+
+
+export default {
+  setup() {
+    const loading = ref<boolean>(false);
+ 
+    onMounted(function() {
+    });
+    return{
+      loading, 
+      
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views-mobile/demo2.vue

+<template>
+  <div v-loading="loading">
+    demo2
+ 
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, set, watch}  from '@vue/composition-api';
+import {router} from '@/main';
+import {Toast} from 'vant';
+
+
+export default {
+  setup() {
+    const loading = ref<boolean>(false);
+ 
+    onMounted(function() {
+    });
+    return{
+      loading, 
+      
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views-mobile/demo3.vue

+<template>
+  <div v-loading="loading">
+    demo3
+ 
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, set, watch}  from '@vue/composition-api';
+import {router} from '@/main';
+import {Toast} from 'vant';
+
+
+export default {
+  setup() {
+    const loading = ref<boolean>(false);
+ 
+    onMounted(function() {
+    });
+    return{
+      loading, 
+      
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views-mobile/demo4.vue

+<template>
+  <div v-loading="loading">
+    demo4
+ 
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, set, watch}  from '@vue/composition-api';
+import {router} from '@/main';
+import {Toast} from 'vant';
+
+
+export default {
+  setup() {
+    const loading = ref<boolean>(false);
+ 
+    onMounted(function() {
+    });
+    return{
+      loading, 
+      
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views-mobile/index.vue

+<template>
+  <div v-loading="loading" style="height: 100vh;">
+    <div class="header flex center" >
+      XXXXXX系统 
+    </div>
+    <router-view class="body" />
+    <div class="bottom flex between" > 
+      <div :class="(router.currentRoute.name==='mobiledemo1'?'active':'')+' flex column center'"  @click="routeTo('mobiledemo1')">
+        <i class="iconfont icon-shijian"></i>
+        <div>demo1</div>
+      </div>  
+      <div :class="(router.currentRoute.name==='mobiledemo2'?'active':'')+' flex column center'" @click="routeTo('mobiledemo2')">
+        <i class="iconfont icon-shijian"></i>
+        <div>demo2</div>
+      </div>
+      <div :class="(router.currentRoute.name==='mobiledemo3'?'active':'')+' flex column center'" @click="routeTo('mobiledemo3')">
+        <i class="iconfont icon-shijian"></i>
+        <div>demo3</div>
+      </div>
+      <div :class="(router.currentRoute.name==='mobiledemo4'?'active':'')+' flex column center'" @click="routeTo('mobiledemo4')">
+        <i class="iconfont icon-shijian"></i>
+        <div>demo4</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, set, watch}  from '@vue/composition-api';
+import {router} from '@/main';
+import {storeUserInfo} from 'web-toolkit/src/case-main';
+import {Toast} from 'vant';
+
+export default {
+  setup() {
+    const loading = ref<boolean>(false);
+    function routeTo(name: string) {
+        router.push({name});
+    }
+    function back() {
+      router.back();
+    }
+    onMounted(function() {
+      console.log(router.currentRoute)
+    });
+    return{
+      loading,
+      routeTo, storeUserInfo,back,router
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "src/scss/common";
+.header{
+  background-color: rgba(0, 21, 41, 1);;
+  height: 45px;
+  box-shadow: 0 0 3px $grey-6;
+  font-size: 1.3rem;
+  color: white;
+  position: relative;
+}
+.body{
+  height: calc(100vh - 45px - 50px);
+  overflow: scroll;
+}
+.bottom{
+  height:50px;
+  background-color: #fff;
+  .flex{
+    width: 18vw;
+    font-size: 17px;
+  }
+  i{
+    font-size: 1.8rem;
+  }
+}
+.active{
+  color: dodgerblue;
+  border: solid 1px dodgerblue;
+  background-color: rgba(30,144,255,0.2);
+} 
+</style>

src/views/demo1/demo1.vue

 <template>
   <div v-loading="loading">
-    <div>行列flex的用法</div>dddd
-    <div class="flex center align-center">
-      <div class="flex column">
-        <div class="demo">1</div>
-        <div class="demo">2</div>
-      </div>
-      <div class="demo">3</div>
-    </div>
-    <div class="flex around">
-      <div class="flex column">
-        <div class="demo">1</div>
-        <div class="demo">2</div>
-      </div>
-      <div class="demo">3</div>
-    </div>
-    <div class="flex between">
-      <div class="flex column">
-        <div class="demo">1</div>
-        <div class="demo">2</div>
-      </div>
-      <div class="demo">3</div>
-    </div>
+    demo1
   </div>
 </template>
 <script lang="ts">
@@ -37,9 +16,5 @@ export default {
 };
 </script>
 <style lang="scss">
-  .demo{
-    width: 100px;
-    height: 100px;
-    border: 1px black solid;
-  }
+
 </style>

src/views/demo2/demo2.vue

 <template>
   <div v-loading="loading">
-
+    demo2
   </div>
 </template>
 <script lang="ts">
@@ -15,3 +15,6 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+
+</style>

src/views/demo3/demo3.vue

+<template>
+  <div v-loading="loading">
+    demo3
+  </div>
+</template>
+<script lang="ts">
+import { ref, onMounted } from '@vue/composition-api';
+
+export default {
+  setup() {
+    const loading = ref<boolean>(false);
+    return{
+      loading,
+    };
+  },
+};
+</script>
+<style lang="scss">
+
+</style>

src/views/login.vue

@@ -38,7 +38,7 @@ import { ref, Ref, onMounted } from '@vue/composition-api';
 import { ElForm } from 'element-ui/types/form';
 import { useLoading } from 'web-toolkit/src/service';
 import { postService, storeUserInfo, updateStoreUserInfo, submitErrChanel, pushMsgErr } from 'web-toolkit/src/case-main';
-import {loginTitle1, loginTitle2, loginLogo, schema} from '@/main';
+import {loginTitle1, loginTitle2, loginLogo, schema} from '@/config';
 import {router} from '@/main';
 import { Route } from 'vue-router';
 import {assert} from 'web-toolkit/src/utils/index';

src/views/main/Navbar.vue

@@ -7,13 +7,13 @@
     </div>
     <div class="header-menu-wrapper flex center">
     </div>
-    <lkt-header-side class="header-side"/>
+    <!-- <lkt-header-side class="header-side"/> -->
   </div>
 </template>
 <script lang="ts">
 import LktHeaderSide from './header-side.vue';
 import LktMenu from './Menu.vue';
-import {loginTitle1, loginTitle2, loginLogo, titleLogo} from '@/main';
+import {loginTitle1, loginTitle2, loginLogo, titleLogo} from '@/config';
 export default {
     components: {
       LktHeaderSide, LktMenu,