CODESTANDARD.md 6.98 KB
Newer Older
wangcong committed
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
## 命名规范
+ 目录/文件命名:
  文件名为 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       # 女娲收集的配置文件
```