灵境关务.货物申报系统从 v1.x 升级 v2.x

# 一. 框架 V2.X 升级源码

框架 V2.X 升级源码下载

升级说明资料 xmind 下载

# 二. 升级步骤

以业务项目为基础，将天宫前端框架 v2.x 代码升级到业务代码中。

# 前端

# 1. 删除业务项目中的框架源码文件夹

删除业务项目中如下框架源码文件夹

文件夹：public/tiangong_public

文件夹：src/tiangong_core

# 2. 拷贝框架部分源码文件夹到业务项目

从框架源码拷贝如下代码到业务项目中

文件夹：deps

文件夹： public/tiangongPublic

文件夹：public/web/lang

文件：public/web/website.js

文件：public/web/businessIndex.js

文件夹：src/tiangongCore

文件夹：src/web/app

文件夹：src/web/appDemo

文件夹：src/web/appTiangong

文件夹：src/web/extension

文件夹：src/web/home 此文件夹内的 homeIndex.vue 为工作台的文件，原路径为 src/tiangong_exn/components/worktable/index.vue。

# 3. 修改/更新内容

# (1) 文件 public/website.js

window.website = {
	// 如下字段 window.website.appName 的优先级高于 .env 中 VITE_TG_SYS_NAME
	// 如不需要在 window.website.appName 中设置，则将此字段注释
    appName: "修改为业务系统名称",
    appAlias: "修改为业务系统名称",
    
    apiServer: {
    	// 请求基础地址，如下字段  window.website.apiServer.base 的优先级高于 .env.xx 中的 VITE_BASE_URL
    	//  如不需要在 window.website.apiServer.base 中设置，则将此字段注释
    	base:"请求基础地址"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

# (2) 文件夹 src/extension

注：src/tiangong_exn 不在作为框架管理的文件夹

文件夹 src/tiangong_exn/svg 移动到文件夹 src/extension 中
文件 src/extension/assets/less/theme.less 为框架提供的引入全局样式的入口；
文件 src/extension/index.js 为框架提供的扩展方法

# src/extension/index.js 文件说明

src/tiangong_exn 中的扩展方法入口优化为 src/extension/index.js ，参考如下

// 系统菜单功能
// import * as menu from './Menu'

// 框架扩展 main.js 功能
// import * as appMain from '业务路径';

// 框架扩展 路由功能
// import * as router from '业务路径';

// 框架扩展 store 功能
// import * as store from '业务路径';

// 框架扩展 登录页面后的全局设置方法等
// import * as useApp from '业务路径';

// 框架扩展 清除缓存的方法
// import * as clearCache from "业务路径";

// 框架扩展 标签页 收藏功能等
// import * as menuTag from "业务路径";

// 框架扩展 主题设置方法
// import * as theme from "业务路径";

export default {
    // menu,
    // appMain,
    // router,
    // store,
    // useApp,
    // clearCache,
    // menuTag,
    // theme
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

扩展方法写法可以参考文件夹 web/app/extension，如下为部分示例

menu.js

export {
    menuItemShow,
    menuItemNum,
    beforeMenuClick
}

1
2
3
4
5

appMain.js

export default function(app) {}

appRouter.js

const routes = [];
function setRoutes() {
    return routes;
}

export default {
    setRoutes
};

1
2
3
4
5
6
7
8

appStore.js

function setStore() {
    return {
        state,
        getters,
        mutations
    };
}

function setSysParametersStore() {
    return sysParameters;
}

function setLayoutStore() {
    return layout;
}

export default {
     setStore,
    
    // 框架扩展给灵境项目使用的方法，后期会删除
    setSysParametersStore,
    // 框架扩展给灵境项目使用的方法，后期会删除
    setLayoutStore
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

clearCache.js

function clearAllCache() {}

export default {
    clearAllCache
};

1
2
3
4
5

# (3) 替换文件夹 main.js

若 main.js 中存在引入业务功能，优化到 src/extension/index.js 中引入 appMain.js

# (4) 更新文件 App.vue

修改script

// import useAppCore from '@core/hooks/component/useAppCore';
// 修改为 
import useAppCore from '@core/hooks/app/useAppCore';


// SettingCore.loadUseAppType + '' === '1' ? useAppCore() : useApp();
// 修改为
SettingCore.VITE_TG_LOAD_USE_APP_TYPE + '' === '1' ? useAppCore() : useApp();

// import useAppCoreCommon from '@core/hooks/component/useAppCoreCommon';
// 修改为
import useAppCoreCommon from '@core/hooks/app/useAppCoreCommon';

// import useApp from './tiangong_exn/hooks/app/useApp';
// 修改为 
import {useApp} from "@/web/app/extension/useApp";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

修改 style

<!-- 去除如下样式 -->
<style lang="less">
@import url('@core/assets/less/APP.less');
</style>

1
2
3
4

# (5) 修改文件 index.html

<!-- 增加如下代码 -->
<script type="text/javascript" src="/web/website.js"></script>
<script type="text/javascript" src="/web/businessIndex.js">
    
<!--  引入文件名优化，文件路径  tiangong_public  优化为 tiangongPublic -->    
<script type="text/javascript" src="/tiangongPublic/config.js"></script>
<link href="/tiangongPublic/font/iconfont.css" rel="stylesheet" />

1
2
3
4
5
6
7

# (6) 修改文件 .gitignore

增加如下代码

!/deps/*.tar.gz

# (7) 修改文件 package.json

{
    "dependencies":{
        "@vueuse/core": "^10.7.0",
        // element-plus 优化为 "element-plus": "file:deps/element-plus.tar.gz",
        "element-plus": "file:deps/element-plus.tar.gz",
        "events": "^3.3.0",
        "lodash-es": "^4.17.21", 
        "pouchdb": "^8.0.1",
        "pouchdb-browser": "^8.0.1",
        "pouchdb-find": "^8.0.1",
        "qs": "6.11.1",
        "spark-md5": "^3.0.2",
        "vue-simple-uploader": "^1.0.2",
    	"vue-ueditor-wrap": "^3.0.8",
	},
    "devDependencies":{
        "@types/pouchdb": "^6.4.2",
        "@types/pouchdb-find": "^7.3.3"        
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# (8) 修改文件 vite.config.js

优化 plugins.createSvgIconsPlugin.iconDirs 和 resolve.alias 内容

export default defineConfig({
    plugins:[
        createSvgIconsPlugin({
            // 如下引入路径优化
            iconDirs: [path.resolve(process.cwd(), 'src/tiangong_exn/svg')],
        })
    ],
    resolve:{
        alias:{
           // 如下框架内容更新
            '@': path.resolve(__dirname, './src'),
            // 框架代码文件夹
            '@core': path.resolve(__dirname, './src/tiangongCore'),
            // 框架开发功能
            '@webApp': path.resolve(__dirname, './src/web/app'),
            // 框架页面
            '@appTiangong': path.resolve(__dirname, './src/web/appTiangong'),
            // 公共方法
            '@coreTools': path.resolve(__dirname, './src/tiangongCore/utils/TgMethods'),
            // 请求方法
            '@coreRequest': path.resolve(__dirname, './src/tiangongCore/utils/TgRequest'),
            // 请求方法
            '@coreHttp': path.resolve(__dirname, './src/tiangongCore/utils/TgRequest/TgHttp'),
            // 全局方法
            '@coreTg': path.resolve(__dirname, './src/tiangongCore/utils/TgPublic'),
            // 全局方法 Plus
            '@coreTgPlus': path.resolve(__dirname, './src/tiangongCore/utils/common/tg'),
            // QueryPage模型
            '@coreQueryPage': path.resolve(__dirname, './src/tiangongCore/models/QueryPage/QueryPage'),
            // EditPage模型
            '@coreEditPage': path.resolve(__dirname, './src/tiangongCore/models/EditPage/EditPage'),
            // EditTab模型
            '@coreEditTab': path.resolve(__dirname, './src/tiangongCore/models/EditTab/EditTab'),
            // CommonPage模型
            '@coreCommonPage': path.resolve(__dirname, './src/tiangongCore/models/CommonPage'),
            // componentSetting
            '@componentSetting': path.resolve(__dirname, './src/web/app/setting/componentSetting.js'),
            // 框架组件
            '@coreComponents': path.resolve(__dirname, './src/tiangongCore/components/business'),
            "@i18nHelper": path.resolve(__dirname, './src/tiangongCore/locale/i18nHelper'),
            'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',            
        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# (9) 修改文件 .env

src/tiangong_exn/components 里面的插槽优化为如下配置文件

# layout 布局header 用户信息的插槽
VITE_TG_COMPONENT_HEARDER_DROP_DOWN_DOWN = '业务文件路径，比如 extension/slot/HeaderDropdown/DropDownUp'
VITE_TG_COMPONENT_HEARDER_DROP_DOWN_UP = '业务文件路径'

# layout 布局 header 插槽
VITE_TG_COMPONENT_HEARDER_NOTICE = '业务文件路径'

# layout 布局上的插槽
VITE_TG_COMPONENT_HOME_PAGE_EXTEND = '业务文件路径'

# 快捷工作区插槽
VITE_TG_COMPONENT_QUICK_WORK = '业务文件路径'

1
2
3
4
5
6
7
8
9
10
11
12

其他

# 国际化配置使用业务：灵境  1 框架   2 业务
VITE_TG_LANGUAGE_DEFAULT = '2'

# 路由前置路径
VITE_TG_ROUTER_BASIC_PATH = '路径，例如 /appLj/views'

# 国际化
VITE_TG_LANG_SYS_CODE = 'LJGW'
VITE_TG_LANG_MODE = 'offline'
VITE_TG_LANG_SERVER = 'http://192.168.106.178:9004/eaapi'
# 切换语言功能  开：'true'
VITE_TG_LANG_SWITCHINNAVBAR = 'false'
VITE_TG_LANG_SWITCHINSETTING = 'false'
VITE_TG_LANG_REFRESHWHENSWITCH = 'false'
VITE_TG_LANG_LIST = ''
VITE_TG_LANG_PATH = ''

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4. 国际化升级

# （1）web/extension/index.js

import * as appMain from "./appMain";

export default {
    appMain
}

1
2
3
4
5

# （2）appMain.js 文件

对应的业务路径/language/i18n：为业务自定义的内容

import i18n from "对应的业务路径/language/i18n";

export default function (app) {
    i18n(app); // 国际化
}

1
2
3
4
5

# 5. 业务代码移出框架

如下组件，方法移动到业务代码中，请在业务代码中配置对应的使用方法

# (1) 文件夹 tiangong_core/api

language/index.js 文件移除

loginByPwd
logout
getPhoneCode
loginByPwdSso
get7WarnStatus
remember7Warn
loginByTokenAndSys
loginByPhoneCode
sendMessageLogin

1
2
3
4
5
6
7
8
9

user/index.js 文件移除如下方法

getSysCache
getUserProxy
save
deleteById
uploadPolicy
insertLookPlate
userRelexpSelectList
updateBusinessSetting
pendingWindowInsert
getSqlCommandData
getSqlCommandData
myCollectionDelete
myCollectionSelectList

1
2
3
4
5
6
7
8
9
10
11
12
13

# (2) 文件夹 tiangong_core/assets/less

文件 less/base/global-custom.less 去除业务代码

移除文件夹 less/form

文件 less/elementPlus/index.less：移出 el-select-v2 样式

文件 less/elementPlus/poper.less：移除业务代码

文件 less/layout/header.less：移除业务代码

# (3) 文件夹 tiangong_core/component

文件 components/base/TgTable.vue

文件 components/base/TgSelectV2.vue

文件 components/base/TgUpload.vue

文件 components/base/TgRadio.vue

文件 components/business/TgExport.vue

# (4) 文件夹 tiangong_core/directive

文件 directive/index.js

# (5) 文件夹 tiangong_core/hooks

文件夹 hooks/form

文件 hooks/web/useMyAttention

文件 hooks/web/useUpdateIndexedDB.js

文件 hooks/components/useBaseQuery.js

文件 hooks/components/useButtonRules.js

文件 hooks/components/useCustomParamData.js

文件 hooks/components/useOpenDetail.js

文件 hooks/components/useSelectFilter.js

文件 hooks/components/useSetDefaultTrade.js

# (6) 文件夹 tiangong_core/language

# (7) 文件夹 tiangong_core/layout

文件 layout/header/headNav.js

logout = SettingCore.loadUseAppType +''=== '1' ? logoutCore : logoutWeb

文件 layout/header/theme/userConfig.vue：去除业务接口代码

文件 layout/home/index.vue：去除 websocket 等业务代码

# (8) 文件夹 tiangong_core/store

文件 store/modules/layout.js：

forcedPushData
updateForcedPushData
updateAuickWordAera

1
2
3

文件：store/modules/sysParameters.js

statOperListTqstep
itemBtnList
webSocketType
formdrag
productGrantData
epSettingData
initIndexedDBdata
cacheSaveVuex
userProxyInfo
userBussinessSetting
userBussinessFormSetting
epSettingData
formdragData
globalAllDataSimple
globalAllData
deskSqlCommandData
noticeRegList
getNoticeSelectPageList
getMyCollectionData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# (9) 文件夹 tiangong_core/utils

文件 utils/TgImportComGlobal

文件 utils/TgIndexedDB

文件 utils/TgSecret

文件 utils/TgTools

文件 utils/TgRequest/axios/index.js

文件 utils/TgWebsocket

文件 utils/TgPrintPage

文件 utils/TgMmethodPlugin

文件 utils/downloadXlsx

# (10) 文件夹 tiangong_core/setting.js

字段：SECOND_LEVEL_CACHE

字段：FIRST_LEVEL_CACHE

字段：isUseWebsocket

字段：isOpenAliyunUpload

字段：isOpenExpiration

字段：ExportTaskTotal

字段：DATA_BASE_NAME

# 后端

# pom依赖

<dependency>
    <groupId>com.eci</groupId>
    <artifactId>tiangong-component</artifactId>
    <version>2.2.0_release</version>
</dependency>
<dependency>
    <groupId>com.eci</groupId>
    <artifactId>tiangong-core</artifactId>
    <version>2.2.0_release</version>
</dependency>

<dependency>
    <groupId>com.eci</groupId>
    <artifactId>tiangong-sso</artifactId>
    <version>2.2.0_release</version>
</dependency>

<dependency>
    <groupId>com.eci</groupId>
    <artifactId>tiangong-system</artifactId>
    <version>2.2.0_release</version>
</dependency>

<dependency>
    <groupId>com.eci</groupId>
    <artifactId>tiangong-third</artifactId>
    <version>2.2.0_release</version>
</dependency>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# RedisUtil弃用

原来的使用方式 -> TgCacheHelper

原先
@Autowired
private RedisUtil redisUtil;

现在
直接删掉
    
原来
redisUtil.set(
redisUtil.get(
    
现在
TgCacheHelper.set(
TgCacheHelper.get(

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上次更新: 2024/3/21 08:50:37

← 后端调用国际化天宫框架从 v1.x 升级 v2.x→

灵境关务.货物申报系统从 v1.x 升级 v2.x

# 一. 框架 V2.X 升级源码

# 二. 升级步骤

# 前端

# 1. 删除业务项目中的框架源码文件夹

# 2. 拷贝框架部分源码文件夹 到 业务项目

# 3. 修改/更新 内容

# (1) 文件 public/website.js

# (2) 文件夹 src/extension

# src/extension/index.js 文件说明

# (3) 替换文件夹 main.js

# (4) 更新文件 App.vue

# (5) 修改文件 index.html

# (6) 修改文件 .gitignore

# (7) 修改文件 package.json

# (8) 修改文件 vite.config.js

# (9) 修改文件 .env

# 4. 国际化升级

# （1）web/extension/index.js

# （2）appMain.js 文件

# 5. 业务代码移出框架

# (1) 文件夹 tiangong_core/api

# (2) 文件夹 tiangong_core/assets/less

# (3) 文件夹 tiangong_core/component

# (4) 文件夹 tiangong_core/directive

# (5) 文件夹 tiangong_core/hooks

# (6) 文件夹 tiangong_core/language

# (7) 文件夹 tiangong_core/layout

# (8) 文件夹 tiangong_core/store

# (9) 文件夹 tiangong_core/utils

# (10) 文件夹 tiangong_core/setting.js

# 后端

# pom依赖

# RedisUtil弃用

# 2. 拷贝框架部分源码文件夹到业务项目

# 3. 修改/更新内容