添加系统配置页面

.env.production

@@ -13,7 +13,7 @@ VITE_DROP_CONSOLE = true
 VITE_BUILD_COMPRESS = 'none'
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=/api
+VITE_GLOB_API_URL=http://localhost:8888/admin
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly

src/locales/lang/en/routes/conventional.ts

@@ -0,0 +1,5 @@
+export default {
+  conventional: 'Conventional',
+  system: 'System',
+  person: 'person',
+};

src/locales/lang/zh_CN/routes/conventional.ts

@@ -0,0 +1,5 @@
+export default {
+  conventional: '常规管理',
+  system: '系统配置',
+  person: '个人资料',
+};

src/router/menus/modules/conventional.ts

@@ -0,0 +1,21 @@
+import type { MenuModule } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+
+const menu: MenuModule = {
+  orderNo: 1,
+  menu: {
+    path: '/conventional',
+    name: t('routes.conventional.conventional'),
+    children: [
+      {
+        path: 'person',
+        name: t('routes.conventional.person'),
+      },
+      {
+        path: 'system',
+        name: t('routes.conventional.system'),
+      },
+    ],
+  },
+};
+export default menu;

src/router/routes/modules/conventional.ts

@@ -0,0 +1,37 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const conventional: AppRouteModule = {
+  path: '/conventional',
+  name: 'Conventional',
+  component: LAYOUT,
+  redirect: '/conventional/system',
+  meta: {
+    icon: 'eva:settings-outline',
+    title: t('routes.conventional.conventional'),
+  },
+  children: [
+    // {
+    //   path: 'person',
+    //   name: 'Person',
+    //   component: () => import('/@/views/conventional/person/index.vue'),
+    //   meta: {
+    //     title: t('routes.conventional.person'),
+    //     icon: 'ri:user-settings-line',
+    //   },
+    // },
+    {
+      path: 'system',
+      name: 'System',
+      component: () => import('/@/views/conventional/system/index.vue'),
+      meta: {
+        title: t('routes.conventional.system'),
+        icon: 'ri:list-settings-line',
+      },
+    },
+  ],
+};
+
+export default conventional;

src/views/conventional/system/Input.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="wrap">
+    <Input :value="value" @focus="onFocus" @change="onChange" @blur="onBlur" />
+    <span>{{ reactData.tip }}</span>
+  </div>
+</template>
+<script lang="ts">
+  import { Input } from 'ant-design-vue';
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  const props = {
+    value: { type: String, default: '' },
+    tip: { type: String, default: '' },
+  };
+
+  export default defineComponent({
+    components: { Input },
+    props,
+    emits: ['change'],
+    setup(props, { emit }) {
+      const reactData = reactive({
+        tip: '',
+      });
+      function onFocus() {
+        reactData.tip = props.tip;
+      }
+      function onBlur() {
+        reactData.tip = '';
+      }
+
+      function onChange(e) {
+        emit('change', e);
+      }
+      return {
+        onFocus,
+        onBlur,
+        onChange,
+        reactData,
+        ...toRefs(props),
+      };
+    },
+  });
+</script>
+<style scoped>
+  .wrap {
+    display: flex;
+  }
+
+  input {
+    width: 65%;
+    margin-right: 10px;
+  }
+
+  span {
+    font-size: 13px;
+    line-height: 230%;
+    color: gray;
+  }
+</style>

src/views/conventional/system/InputNumber.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="wrap">
+    <InputNumber
+      class="input-number"
+      placeholder="0"
+      type="number"
+      :value="value"
+      @focus="onFocus"
+      @change="onChange"
+      @blur="onBlur"
+    />
+    <span>{{ reactData.tip }}</span>
+  </div>
+</template>
+<script lang="ts">
+  import { InputNumber } from 'ant-design-vue';
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  const props = {
+    value: { type: Number, default: 0 },
+    tip: { type: String, default: '' },
+  };
+
+  export default defineComponent({
+    components: { InputNumber },
+    props,
+    emits: ['change'],
+    setup(props, { emit }) {
+      const reactData = reactive({
+        tip: '',
+      });
+      function onFocus() {
+        reactData.tip = props.tip;
+      }
+      function onBlur() {
+        reactData.tip = '';
+      }
+
+      function onChange(val) {
+        emit('change', val);
+      }
+      return {
+        onFocus,
+        onBlur,
+        onChange,
+        reactData,
+        ...toRefs(props),
+      };
+    },
+  });
+</script>
+<style scoped>
+  .wrap {
+    display: flex;
+  }
+
+  .input-number {
+    width: 65%;
+    margin-right: 10px;
+  }
+
+  span {
+    font-size: 13px;
+    line-height: 230%;
+    color: gray;
+  }
+</style>

src/views/conventional/system/data.ts

@@ -0,0 +1,69 @@
+import { BasicColumn } from '/@/components/Table';
+import { h } from 'vue';
+import { Select, DatePicker } from 'ant-design-vue';
+import Input from './Input.vue';
+import InputNumber from './InputNumber.vue';
+import moment from 'moment';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '变量标题',
+    align: 'left',
+    dataIndex: 'title',
+    width: 130,
+  },
+  {
+    title: '变量值',
+    align: 'left',
+    dataIndex: 'value',
+    width: 250,
+    customRender: ({ record }) => {
+      switch (record.type) {
+        case 'Input':
+          const onchange = (evt) => {
+            console.log(evt);
+            console.log(evt.target.value);
+            record.value = evt.target.value;
+          };
+          return h(Input, {
+            value: record.value,
+            tip: record.tip,
+            style: { width: '100%' },
+            onChange: onchange,
+          });
+        case 'InputNumber':
+          const onNumberChange = (val) => {
+            console.log(val);
+            record.value = val;
+          };
+          return h(InputNumber, {
+            value: record.value,
+            tip: record.tip,
+            style: { width: '100%' },
+            onChange: onNumberChange,
+          });
+        case 'Select':
+          return h(Select, { value: record.value, style: { width: '65%' } });
+        case 'DatePicker':
+          const onDataPickerChange = (v) => {
+            // console.log('=========ok==========');
+            // console.log(`v`, moment(v._d, 'YYYY-MM-DD'));
+            // console.log(`v`, v);
+            record.value = v;
+          };
+          return h(DatePicker, {
+            value: moment(record.value, 'YYYY-MM-DD'),
+            style: { width: '65%' },
+            // onChange: onDataPickerChange,
+            onChange: onDataPickerChange,
+          });
+      }
+    },
+  },
+  {
+    title: '变量名',
+    align: 'left',
+    dataIndex: 'name',
+    width: 150,
+  },
+];

src/views/conventional/system/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <CollapseContainer
+    title="系统配置"
+    :canExpan="false"
+    helpMessage="可以在此增改系统的变量和分组,也可以自定义分组和变量"
+  >
+    <a-button @click="changeLabel3" class="mr-2"> 基础配置 </a-button>
+    <a-button @click="changeLabel34" class="mr-2"> 邮件配置 </a-button>
+    <a-button @click="appendField" class="mr-2"> 字典配置 </a-button>
+    <a-button @click="deleteField" class="mr-2"> 会员配置 </a-button>
+    <a-button @click="deleteField" class="mr-2">
+      <Icon icon="ic:outline-add" />
+    </a-button>
+    <BasicTable @register="registerTable" />
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { Icon } from '/@/components/Icon';
+  import {
+    BasicTable,
+    useTable,
+    // TableAction,
+    // BasicColumn,
+    // ActionItem,
+    // EditRecordRow,
+    // TableActionType,
+  } from '/@/components/Table';
+  import { columns } from './data';
+
+  export default defineComponent({
+    components: { CollapseContainer, Icon, BasicTable },
+    setup() {
+      const [registerTable] = useTable({
+        columns: columns,
+        dataSource: [
+          {
+            title: 'helloWorld',
+            name: 'helloworld',
+            value: 'helloWorld',
+            type: 'Input',
+            tip: '我是helloworld字段的提示',
+          },
+          { title: 'test', name: 'test', value: 'test', type: 'Input', tip: '我是test字段的提示' },
+          { title: 'hello1', name: 'hello1', value: 'hello1', type: 'Select' },
+          {
+            title: 'hello2',
+            name: 'hello2',
+            value: '2021-10-25',
+            type: 'DatePicker',
+          },
+          {
+            title: 'hello3',
+            name: 'hello3',
+            value: 10,
+            type: 'InputNumber',
+            tip: '我是test字段的提示',
+          },
+        ],
+        showIndexColumn: false,
+        pagination: false,
+      });
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .mr-2 {
+    font-weight: 550 !important;
+  }
+</style>

src/views/permission/admin/index.vue

@@ -187,8 +187,6 @@
             record = item;
           }
         });
-        console.log('================record=======');
-        console.log(record);
         openPopup(true, record);
       }
 

src/views/sys/login/SessionTimeoutLogin.vue

@@ -29,13 +29,13 @@
       };
 
       onMounted(() => {
-        // 记录当前的UserId
-        userId.value = userStore.getUserInfo?.userId;
+        // 记录当前的id
+        userId.value = userStore.getUserInfo?.id;
         console.log('Mounted', userStore.getUserInfo);
       });
 
       onBeforeUnmount(() => {
-        if (userId.value && userId.value !== userStore.getUserInfo.userId) {
+        if (userId.value && userId.value !== userStore.getUserInfo.id) {
           // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
           document.location.reload();
         } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {