admin-sjzx/README.md

#### 介绍

```
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
```

#### 安装依赖&运行项目

> node version:^18.17.0 || >=20.5.0"

```shell
#项目使用pnpm包管理器
npm i pnpm -g

#安装依赖
pnpm i

#运行项目
npm run dev

#因海南和冀北技术监督不同 通过修改文件的方式来区分
#海南打包   需要吧pqs目录下supervise_hn 文件夹改成supervise 原文件改成supervise_jb
#冀北打包   需要吧pqs目录下supervise_jb 文件夹改成supervise  原文件改成supervise_hn
```

#### 页面编写-示例

```
基础页面写法请查看`src/template`下的readme.md
```

#### 开发规范

> 初衷：养成合理的习惯，精力留在技术调研、业务开发中。
>
> 常见点如下描述，更多的规范待前端开发人员有时间后，慢慢丰富。

-   命名风格：所有的包（文件夹）、文件名以小驼峰的风格命名，比如 xxxAaa，禁止 XxxAaa 或者 xxx-aaa。
-   命名语义：禁止中文命名或拼音，英文命名借用下工具，稍微准确一点，不要与实际业务相差太远。
-   功能组件创建风格：以**功能名称**命名文件夹，每个功能下以**index.vue**作为该功能的组件入口。正确示例参考：/src/views/auth/menu/index.vue。

![组件层级图](./src/assets/readme/moduleLevel.png)

-   todo...：待后续补充。

#### 开发助手

##### 1、表格系列

-   页面表格以及表格页面按钮的弹出等功能参考：/views/pqs/voltageSags/sagGovern/index.vue
-   表格中需要替换数据：

```js
// 通过formatter函数返回实际需要返回的值
    {
        title: '数据来源', field: 'dataSource', minWidth: '130',
        formatter: (row: any) => {
            return row.dataSource == 0 ? '离线导入' : '监测点同步'
        }
    }****
```

##### 2、样式系列

-   获取当前主体的高度：import { mainHeight } from '@/utils/layout'
-   弹框内输入框长度设置 1 行 1 个 class="form-one" 1 行 2 个 class="form-two"

#### 依赖变更记录

-   2024-04-25 新增 vform3，by 洪圣文，用于页面表单设计保存为 json，命令：pnpm i vform3-builds