# zp-crud-page

**Repository Path**: web-zhangpei/zp-crud-page

## Basic Information

- **Project Name**: zp-crud-page
- **Description**: 用一套三方组件 element-ui 开发一套业务组件。最快生成页面，一小时做了三天的工作。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-01
- **Last Updated**: 2021-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

TODO 那个文件有async? baseForm
TODO 打包结果是否降级？ 看压缩文件看不出来 (轻量级buble,不能处理async/await)
TODO 组件库是否能在IE中使用？ 新项目，引入zp-form,测试iE能否使用。排除基础项目结构对IE的影响。就是三方库的影响了。
TODO 不是babel，问题在哪？ 定位到问题，三方库baseForm 编译问题（babel编译再发一版试试）
TODO 还不行，看怎么配babel

### 项目介绍

用一套三方组件 element-ui 开发一套业务组件

### 用户体验
 
1. 有一些搬砖、重复的逻辑，在接口的处理中；
2. pageModel很多地方字段设计复杂，不好记忆。

### crud-page 所需组件

- breadcrumb
- table (简单)
- pager (简单)
- baseform
  - control
  - formItem
  - form

### 提交日志

- 【1】纯净版: 删除所有无用依赖,仅仅保留组件库基础依赖(看包中有没有残留 1odash)
- 【2】结合使用 element-ui
- 【3】保存之前的成果。之后全删除组件，重构。
- 【4】发布内容：（到此为止吧，开发组件能力有限，需要多学习，多见识）v0.1.0
  1. control 响应通信使用 v-model;
  2. form-lael 单行省略，悬浮提示
  3. search 表单行内样式；
  4. editor 表单块居中样式；
  5. storybook 可以使用完整 vue 功能
  6. 表单按钮功能、图标
  7. story 配置 element 、全局组件、sass(未解决)
  8. 解决 elemenet 公共样式冲突问题（加"zp-"父选择器）
- 【5】发布内容(v0.1.7)
  1. element-ui 等所有依赖为开发依赖，只需要保留业务代码
  2. 使用 mock/axios 开发组件 crud
  3. zp-table --- autoWidth
  4. cru 表单
- 【6】发布内容：
  1. 多栏布局，自适应宽度
  2. zp-page
     - 回调方法
       - cbCrate
       - cbDelete
       - cbUdate
       - cbRead / cbSearch / cbQuery
     - 公共状态
       - loading 表格加载
       - pageModel
         - tools: {}
- 【7】发布内容：(zp-table 组件)
  1. 默认智能宽度，居中布局；可以设置 align/width 来配置单列；
  2. 通过传入 tableTree 配置表格树。
- 【8】发布内容:zp-map
  1. 点击地图选单
  2. 搜索选点
  3. 题图添加点标记
  4. zp-page支持表格树
- 【9】发版内容
    9.01. modelHandl9.0r.js（可加 生命周期函数）
    9.02. 菜单管理表单创建
    9.03. page :top和相邻padding塌陷问题
    9.04. if判断用template
    9.05. zp-menu组件
    9.06. control的bug: 没有注入formType
    9.07. mdoel和data问题（选model）
    9.08. 修复测试不充分问题
    9.09. 打开获取接口，然后传值
    9.10. zp-page用eventBus代替$children
    9.11. table props 扩展属性
    9.12. 表单默认值
    9.12. model:{name:['张培',false(disabled),show(false)]} 大改？？？
 - 【10】发版内容
  - 1o.01 开启ts全新时代 0.3.x版本
  - 10.02 babel编译
- 【11】发版内容
  - 11.01 
    1. 不使用babel,不需要再进行打包，因为是面向开发的三方库。
    发版流程：开完完成 --- 测试完成 --- git push --- git lerna发布（简化了发版流程）
    2. plop新任务生成直接供开发环境使用的组件库zpComponents
    3. 配置了支持es6 + typescript。也可以不选使用js开发。渐进式转换。


### 工作收获
注意事项：
- 开发时一定删除打包文件！！！默认导入的是开发文件！！！
#### 一、element 按需导入

1. 安装依赖：

- yarn add babel-plugin-component@^1.1.1 vue-cli-plugin-element@~1.0.1 node-sass@^4.0.0 sass-loader@7.x -D -W
- yarn add element-ui@^2.4.5 -W
- yarn workspace zp-button add babel-plugin-component@^1.1.1 vue-cli-plugin-element@~1.0.1 node-sass@^4.0.0 sass-loader@7.x -D
- yarn workspace zp-button add element-ui@^2.4.5

2. 设置 babel:

```js
"babel": {
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }
```

#### 二、control 使用 v-model

- 使用 model{prop:event}
- @change="$emit('change',$event)"

### 未来的工作：

#### 一、样式相关：

#### 二、业务相关：

表单校验规则
TODO: 表单相关事件

#### 三、业余优化相关

表单重命名规范字段
使用 mock,调用接口
扩展特殊组件
TODO:element 组件按需加载问题
TODO:basePage 整体导入，不用一个个声明
TODO:slots 搞定头部、尾部内容
TODO:根据官方文档，二次开发出更多有意思内容。
TODO: 1.校验表单，提交前确认弹框(zp-page 中处理所有逻辑、副作用)
TODO：校验成功将表单数据弄出去
TODO：table 组件、模拟数据
TODO: 刷新列表 1.刷新表格：editor 提交成功、search 搜索
TODO: 1.处理 updateForm 逻辑

```js
refresh(type) {
      if (type) {
        // 从第一页刷新
        this.pageNum = 1
        // 关闭弹窗
        this[type + 'Flag'] = false
        // editor重置表单
        this.$refs[type] && this.$refs[type].resetFields()
      }
    }
```

### 已完成的工作，记录在版本日志中。

### 组件中不成为的规定：

一、 关于 form 组件及其子组件：
1）label 靠右好看，label 字多省略号，然后加悬浮。
1）search 表单中：第一个按钮有间距好看，后面没有间距；4 栏布局
2）editor 表单中：按钮居中显示好看；2 栏布局
3）所有表单中：label 靠右好看;label 字多省略号，然后加悬 fu 浮;控件加悬浮。