CODESTANDARD.md

## 命名规范
+ 目录/文件命名:
  文件名为 aaa-bbb 格式
  如：

  ```
  components-control
  |- my-component.vue
  ```

+ 方法命名：
方法名、参数名、成员变量、局部变量都统一遵从驼峰形式。
如： localValue / getHttpMessage() / inputUserId

+ 注释：
  ├── 1.方法注释：
  关键方法建议写上参数说明，和方法功能说明
  如：

  ```
    /**
    * 以下是单元是否可编辑
    * @param {*} col 列数组
    * @param {*} rowIndex 行索引
    * 不分页的情况下最好是虚拟滚动，如果数量过大，公式有与后端交互这样会很卡
    */
     getColFormulasEditable(col,rowIndex){
        ...
     }
  ```

  ├── 2.组件注释
  注明组件的使用方式，尤其是父子组件传递的props、emit、watch等关键数据流处理的地方

  
  
+ 编写vue文件说明
   ├── 每新建一个vue文件，最外层的div都绑定一个与此vue文件名字相关的class名字，页面相关的样式都包裹到这个    class里面，防止出现样式冲突
  ├── 公共样式抽取到common.css里面，本vue文件单独的样式控制，写本界面即可
  ├── 标签节点上，尽量减少大量的逻辑处理，可以使用有返回值的函数
  ├── 必须为v-for 设置键值 key
  ├── 尽量不要手动操作dom，尽量使用语义化标签，增强可读性
  ├──script 标签内部结构顺序 components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods
  
```
  组织机构树组件
  <template>
  	<div class="orgTree">
  		<el-tree  ref="orgTree" class="filter-tree" 
  		 :expand-on-click-node="true"          
  		 :data="orgData" 
  		 :show-checkbox="ifShowBox"
  		 :props="defaultProps" 
  		 :efault-expand-all = "true"
  		 :filter-node-method = "filterNode" 
  		 :default-expanded-keys="defaultExpandedKey" 
  		 @node-click = "getNode" >
  		</el-tree>
  	</div>
  </template>
  
  <script>
  	export default {
  	    name: "orgTree",//组件名称
          components: {}, //引入的组件
  		props: {
  		    //是否需要进行过滤
  			ifFilter: {
  				type: Boolean,
  				default: function() {
  					return true;
  				}
  			},
  			//是否多选
  			ifShowBox: {
  				type: Boolean,
  				default: function() {
  					return true;
  				}
  			},
  			//默认展开哪一节点的数据，目前设置展示id为1的树节点
  			defaultExpandedKey: {
  				type: Array,
  				default: function() {
  					return [1];
  				}
  			}
  		},
  		data() {
  			return {
  			    orgData:[],
  				selecteTreeRow: "",
  				filterText: '',
  				defaultProps: {
  					children: 'children',
  					label: 'label'
  				},
  			};
  		},
  		computed(){},//计算属性
  		watch: {
  			selecteTreeRow: {// 检测点击的node节点发送给父组件
  				handler() {
  					this.$emit("getVal", this.selecteTreeRow); //发送节点
  				},
  				deep: true
  			}
  		},
  		filter(){},//过滤器
  		mounted() {},//勾子函数
  		methods: {}
  	};
  </script>
  <style lang="scss" scoped>
   .orgTree {
       .filter-tree{
       
       }
   }
  </style>
  ```
  


## 目录结构以及说明

├──  @gms 政府公共服务（有关单据、首页等公共插件部分写到此产品线下面）

1.单据插件工程

工程名： gms-plugin-billexpand

介绍：此工程记录了单据的相关动作、组件、公式、查询动作等功能。

app.config.json配置文件中"type": "gms-plugin"

~~~
├── public                    # 静态资源
│   ├── favicon.ico           # favicon图标
│   └── index.html            # html 模板
├── src                       # 源代码
│   ├── styles                # 管理样式
│   ├── assets                # 记录图片、svg矢量图、video等系统引用的静态资源
│   ├── actions               # 单据动作
│   │    └──xx.js             # 具体动作js
│   ├── components-control    # 扩展的动作里面使用的组件
│   │    └── util             # 工具类js
│   ├── formula               # 公式：此文件夹里面存储所有的扩展公式
│   │    └── util             # 公式相关工具类js
│   │    └── xxx.js             # 公式相关工具类js
│   ├── query-actions         # 查询动作：此文件夹里面存储所有查询相关的动作
│   ├── control               # 扩展设计期组件
│   │    └── util             # 扩展组件的工具类js
│   ├── query-actions
│   ├── emcon.js              # 配置动作、公式、控件的配置信息
│   ├── mcon.js               # 引入动作、公式、控件的信息
│   ├── app.config.json       # 女娲收集的配置文件

~~~
2.工作流插件工程

工程名：gms-plugin-workflow

介绍：此工程主要扩展工作流所使用的插件

app.config.json配置文件中"type": "gms-plugin"

结构同上

2.扩展首页组件

工程名：gms-plugin-mainpage-业务名称

介绍：此工程主要扩展首页的拖拽组件 

app.config.json配置文件中"type": "widget"

```
├── public                    # 静态资源
│   ├── favicon.ico           # favicon图标
│   └── index.html            # html 模板
├── src                       # 源代码
│   ├── assets                # 记录图片、svg矢量图、video等系统引用的静态资源
│   ├── components            # 组件使用
│   ├── views                 # 
│   │    └── gms-app.vue      # 组件内容
│   │    └── property.vue     # 组件属性
│   ├── main.build.js         # 入口js文件，记录模块使用的引用
│   ├── app.config.json       # 模块的配置文件
│   ├── vue.config.js         # vue 的配置文件，会被 @vue/cli-service 自动加载
│   ├── app.config.json       # 女娲收集的配置文件
```

├──  @rbc 云报销     （有关云报销项目的业务功能app模块,写到此产品线下面）

app.config.json配置文件中"type": "false"

1.control-strategy  控制策略

2.file-management 文件管理

3.voucher-center 凭证中心

```
├── public                    # 静态资源
│   ├── favicon.ico           # favicon图标
│   └── index.html            # html 模板
├── src                       # 源代码
│   ├── assets                # 记录图片、svg矢量图、video等系统引用的静态资源
│   ├── components            # 组件使用
│   ├── views                 # 
│   │    └── xxx.vue          # vue文件内容
│   ├── main.build.js         # 入口js文件，记录模块使用的引用
│   ├── app.config.json       # 模块的配置文件
│   ├── vue.config.js         # vue 的配置文件，会被 @vue/cli-service 自动加载
│   ├── app.config.json       # 女娲收集的配置文件
```