Commit 394faf94ee9d9f156f39606f1dcecb99443675b1
1 parent
52a3208c
Exists in
master
and in
2 other branches
docs: 更新开发文档
Showing
10 changed files
with
316 additions
and
179 deletions
Show diff stats
examples/main.js
| @@ -13,8 +13,10 @@ import '@/styles/highlight.scss'; | @@ -13,8 +13,10 @@ import '@/styles/highlight.scss'; | ||
| 13 | import '@/assets/iconfont/iconfont.css'; | 13 | import '@/assets/iconfont/iconfont.css'; |
| 14 | import '@/mixins/page.scss'; | 14 | import '@/mixins/page.scss'; |
| 15 | import MIX_PAGE from '@/mixins/page.js'; | 15 | import MIX_PAGE from '@/mixins/page.js'; |
| 16 | +import MIX_ORIGIN from '@/mixins/origin'; | ||
| 16 | 17 | ||
| 17 | window.MIX_PAGE = MIX_PAGE; | 18 | window.MIX_PAGE = MIX_PAGE; |
| 19 | +window.MIX_ORIGIN = MIX_ORIGIN; | ||
| 18 | 20 | ||
| 19 | // 进度条配置 | 21 | // 进度条配置 |
| 20 | NProgress.configure({ showSpinner: false }); | 22 | NProgress.configure({ showSpinner: false }); |
examples/mixins/page.js
| @@ -4,7 +4,7 @@ export default { | @@ -4,7 +4,7 @@ export default { | ||
| 4 | mixins: [MIX_ORIGIN], | 4 | mixins: [MIX_ORIGIN], |
| 5 | data() { | 5 | data() { |
| 6 | return { | 6 | return { |
| 7 | - auto: true, // 页面加载时自动查询 | 7 | + auto: false, // 页面加载时自动查询 |
| 8 | tableData: [], // 表格数据 | 8 | tableData: [], // 表格数据 |
| 9 | loading: false, // 加载状态 | 9 | loading: false, // 加载状态 |
| 10 | total: 0, // 数据总量 | 10 | total: 0, // 数据总量 |
examples/router/routes.js
| @@ -122,6 +122,23 @@ const _develops = [ | @@ -122,6 +122,23 @@ const _develops = [ | ||
| 122 | meta: { title: 'Mixin Page 标准页' }, | 122 | meta: { title: 'Mixin Page 标准页' }, |
| 123 | component: () => import('@/views/docs/develop/mixin/page.md'), | 123 | component: () => import('@/views/docs/develop/mixin/page.md'), |
| 124 | }, | 124 | }, |
| 125 | + { | ||
| 126 | + path: 'orgin', | ||
| 127 | + name: 'orgin', | ||
| 128 | + meta: { title: 'Mixin Orgin 初始值' }, | ||
| 129 | + component: () => import('@/views/docs/develop/mixin/origin.md'), | ||
| 130 | + }, | ||
| 131 | + ], | ||
| 132 | + }, | ||
| 133 | + { | ||
| 134 | + group: '方案开发', | ||
| 135 | + children: [ | ||
| 136 | + { | ||
| 137 | + path: 'scheme', | ||
| 138 | + name: 'developScheme', | ||
| 139 | + meta: { title: 'Scheme 方案' }, | ||
| 140 | + component: () => import('@/views/docs/develop/scheme/scheme.md'), | ||
| 141 | + }, | ||
| 125 | ], | 142 | ], |
| 126 | }, | 143 | }, |
| 127 | ]; | 144 | ]; |
examples/views/docs/component/select.md
| @@ -455,6 +455,111 @@ export default { | @@ -455,6 +455,111 @@ export default { | ||
| 455 | 455 | ||
| 456 | ::: | 456 | ::: |
| 457 | 457 | ||
| 458 | +## 可创建新条目 | ||
| 459 | + | ||
| 460 | +设置`allow-create`和`filterable`允许创建新的选项，输入内容后可以直接选择已输入的内容 | ||
| 461 | + | ||
| 462 | +<div class="code-snippet-box"> | ||
| 463 | + | ||
| 464 | +::: snippet 单选示例 | ||
| 465 | + | ||
| 466 | +```html | ||
| 467 | +<template> | ||
| 468 | + <div> | ||
| 469 | + <z-select v-model="model" allow-create filterable> | ||
| 470 | + <el-option label="单车" value="VAN">单车</el-option> | ||
| 471 | + <el-option label="牵引车" value="TRACTOR">牵引车</el-option> | ||
| 472 | + </z-select> | ||
| 473 | + <span>{{ model }}</span> | ||
| 474 | + </div> | ||
| 475 | +</template> | ||
| 476 | + | ||
| 477 | +<script> | ||
| 478 | +export default { | ||
| 479 | + data() { | ||
| 480 | + return { | ||
| 481 | + model: '', | ||
| 482 | + } | ||
| 483 | + } | ||
| 484 | +} | ||
| 485 | +</script> | ||
| 486 | +``` | ||
| 487 | + | ||
| 488 | +::: | ||
| 489 | + | ||
| 490 | +::: snippet 多选示例 | ||
| 491 | + | ||
| 492 | +```html | ||
| 493 | +<template> | ||
| 494 | + <div> | ||
| 495 | + <z-select v-model="model" multiple allow-create filterable> | ||
| 496 | + <el-option label="单车" value="VAN">单车</el-option> | ||
| 497 | + <el-option label="牵引车" value="TRACTOR">牵引车</el-option> | ||
| 498 | + </z-select> | ||
| 499 | + <span>{{ model }}</span> | ||
| 500 | + </div> | ||
| 501 | +</template> | ||
| 502 | + | ||
| 503 | +<script> | ||
| 504 | +export default { | ||
| 505 | + data() { | ||
| 506 | + return { | ||
| 507 | + model: '', | ||
| 508 | + } | ||
| 509 | + } | ||
| 510 | +} | ||
| 511 | +</script> | ||
| 512 | +``` | ||
| 513 | + | ||
| 514 | +::: | ||
| 515 | + | ||
| 516 | +</div> | ||
| 517 | + | ||
| 518 | +<div class="code-snippet-box"> | ||
| 519 | + | ||
| 520 | +::: snippet 远程示例，输入创建的新项为临时项，选中后再次下拉时不会包括在选项结果中 | ||
| 521 | + | ||
| 522 | +```html | ||
| 523 | +<template> | ||
| 524 | + <div> | ||
| 525 | + <z-select v-model="model" :options="options" :queryApi="queryAPI" allow-create filterable></z-select> | ||
| 526 | + <span>{{ model }}</span> | ||
| 527 | + </div> | ||
| 528 | +</template> | ||
| 529 | + | ||
| 530 | +<script> | ||
| 531 | +export default { | ||
| 532 | + data() { | ||
| 533 | + return { | ||
| 534 | + model: '', | ||
| 535 | + options: [ | ||
| 536 | + { label: '王七', value: 'wq' }, | ||
| 537 | + { label: '陈拾', value: 'cs' }, | ||
| 538 | + ] | ||
| 539 | + } | ||
| 540 | + }, | ||
| 541 | + methods: { | ||
| 542 | + queryAPI(val) { | ||
| 543 | + return new Promise(resolve => { | ||
| 544 | + setTimeout(() => { | ||
| 545 | + resolve({ | ||
| 546 | + result: [ | ||
| 547 | + { label: '王五', value: 'ww' }, | ||
| 548 | + { label: '赵六', value: 'zl' }, | ||
| 549 | + ] | ||
| 550 | + }); | ||
| 551 | + }, 1000); | ||
| 552 | + }); | ||
| 553 | + }, | ||
| 554 | + } | ||
| 555 | +} | ||
| 556 | +</script> | ||
| 557 | +``` | ||
| 558 | + | ||
| 559 | +::: | ||
| 560 | + | ||
| 561 | +</div> | ||
| 562 | + | ||
| 458 | ## API | 563 | ## API |
| 459 | 564 | ||
| 460 | ## Attribute 属性 | 565 | ## Attribute 属性 |
| @@ -0,0 +1,43 @@ | @@ -0,0 +1,43 @@ | ||
| 1 | +# Mixin Origin 初始值 | ||
| 2 | + | ||
| 3 | +常用Vue页面初始值的混入配置 | ||
| 4 | + | ||
| 5 | +## 基础用法 | ||
| 6 | + | ||
| 7 | +`MIX_ORIGIN`混入配置项，会默认记录当前页面初始值。 | ||
| 8 | + | ||
| 9 | +::: snippet `originData`表示当前页面的初始data值，`getOriginData`方法可获得一个新的初始值对象 | ||
| 10 | + | ||
| 11 | +```html | ||
| 12 | +<template> | ||
| 13 | + <div> | ||
| 14 | + <div>model初始值：{{ originData.model }}</div> | ||
| 15 | + <el-input v-model="model.name" size="mini" style="width: 200px; margin: 10px 0"></el-input> | ||
| 16 | + <el-button type="primary" size="mini" @click="handleReset">重置</el-button> | ||
| 17 | + <div>model当前值：{{ model }}</div> | ||
| 18 | + </div> | ||
| 19 | +</template> | ||
| 20 | + | ||
| 21 | +<script> | ||
| 22 | +// import MIX_ORIGIN from '@/mixins/origin'; 注：使用时解除此注释 | ||
| 23 | + | ||
| 24 | +export default { | ||
| 25 | + mixins: [MIX_ORIGIN], | ||
| 26 | + data() { | ||
| 27 | + return { | ||
| 28 | + model: { | ||
| 29 | + name: '张三', | ||
| 30 | + }, | ||
| 31 | + }; | ||
| 32 | + }, | ||
| 33 | + methods: { | ||
| 34 | + handleReset() { | ||
| 35 | + // 注意：切记不可写成 this.model = this.originData.model; 否则会导致originData被改变！ | ||
| 36 | + this.model = this.getOriginData().model; | ||
| 37 | + } | ||
| 38 | + }, | ||
| 39 | +}; | ||
| 40 | +</script> | ||
| 41 | +``` | ||
| 42 | + | ||
| 43 | +::: |
examples/views/docs/develop/mixin/page.md
| 1 | # Mixin Page 标准页 | 1 | # Mixin Page 标准页 |
| 2 | 2 | ||
| 3 | -根据JSON Scheme配置自动生成一个筛选条件表单 | 3 | +常规分页逻辑的混入配置 |
| 4 | 4 | ||
| 5 | ## 基础用法 | 5 | ## 基础用法 |
| 6 | 6 | ||
| @@ -51,31 +51,12 @@ export default { | @@ -51,31 +51,12 @@ export default { | ||
| 51 | searchModel: { | 51 | searchModel: { |
| 52 | name: '', | 52 | name: '', |
| 53 | }, | 53 | }, |
| 54 | + tableData: [ | ||
| 55 | + { id: '0', name: '李饼', age: 32 }, | ||
| 56 | + { id: '1', name: '陈拾', age: 20 }, | ||
| 57 | + ], | ||
| 54 | }; | 58 | }; |
| 55 | }, | 59 | }, |
| 56 | - methods: { | ||
| 57 | - searchAPI(params) { | ||
| 58 | - return new Promise(resolve => { | ||
| 59 | - setTimeout(() => { | ||
| 60 | - const source = [ | ||
| 61 | - { id: '0', name: '李饼', age: 32 }, | ||
| 62 | - { id: '1', name: '陈拾', age: 20 }, | ||
| 63 | - { id: '3', name: '王七', age: 26 }, | ||
| 64 | - { id: '4', name: '崔倍', age: 27 }, | ||
| 65 | - { id: '5', name: '孙豹', age: 38 }, | ||
| 66 | - { id: '6', name: '庞柏', age: 42 }, | ||
| 67 | - { id: '7', name: '蔡疏', age: 60 }, | ||
| 68 | - { id: '8', name: '卢纳', age: 55 }, | ||
| 69 | - ]; | ||
| 70 | - const list = source.filter(item => `${item.name}`.includes(params.name)); | ||
| 71 | - resolve({ | ||
| 72 | - result: list, | ||
| 73 | - totalCount: list.length | ||
| 74 | - }); | ||
| 75 | - }, 1500); | ||
| 76 | - }); | ||
| 77 | - }, | ||
| 78 | - }, | ||
| 79 | }; | 60 | }; |
| 80 | </script> | 61 | </script> |
| 81 | 62 | ||
| @@ -123,6 +104,7 @@ export default { | @@ -123,6 +104,7 @@ export default { | ||
| 123 | mixins: [MIX_PAGE], | 104 | mixins: [MIX_PAGE], |
| 124 | data() { | 105 | data() { |
| 125 | return { | 106 | return { |
| 107 | + auto: true, | ||
| 126 | searchModel: { | 108 | searchModel: { |
| 127 | name: '', | 109 | name: '', |
| 128 | }, | 110 | }, |
| @@ -147,7 +129,7 @@ export default { | @@ -147,7 +129,7 @@ export default { | ||
| 147 | result: list, | 129 | result: list, |
| 148 | totalCount: list.length | 130 | totalCount: list.length |
| 149 | }); | 131 | }); |
| 150 | - }, 1500); | 132 | + }, 500); |
| 151 | }); | 133 | }); |
| 152 | }, | 134 | }, |
| 153 | }, | 135 | }, |
| @@ -158,174 +140,151 @@ export default { | @@ -158,174 +140,151 @@ export default { | ||
| 158 | 140 | ||
| 159 | ::: | 141 | ::: |
| 160 | 142 | ||
| 161 | -## 内置方法 | 143 | +## 弹出框表单 |
| 162 | 144 | ||
| 163 | -本混入配置中，内置了`originData`对象和`getOriginData`方法。 | 145 | +常用的弹出框表单提交示例 |
| 164 | 146 | ||
| 165 | -::: snippet `originData`表示当前页面的初始data值，`getOriginData`方法可获得一个新的初始值对象 | 147 | +::: snippet 新增修改共用表单示例 |
| 166 | 148 | ||
| 167 | ```html | 149 | ```html |
| 168 | <template> | 150 | <template> |
| 169 | <div> | 151 | <div> |
| 170 | - <div>model初始值：{{ originData.model }}</div> | ||
| 171 | - <el-input v-model="model.name" size="mini" style="width: 200px; margin: 10px 0"></el-input> | ||
| 172 | - <el-button type="primary" size="mini" @click="handleReset">重置</el-button> | ||
| 173 | - <div>model当前值：{{ model }}</div> | 152 | + <div class="page-search"> |
| 153 | + <z-form :model="searchModel" label-width="80px" size="small" span="6"> | ||
| 154 | + <z-form-item label="姓名" prop="name"> | ||
| 155 | + <el-input v-model="searchModel.name"></el-input> | ||
| 156 | + </z-form-item> | ||
| 157 | + <z-form-item span="18" style="text-align: right"> | ||
| 158 | + <el-button-group> | ||
| 159 | + <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button> | ||
| 160 | + <el-button @click="onReset">重置</el-button> | ||
| 161 | + </el-button-group> | ||
| 162 | + </z-form-item> | ||
| 163 | + </z-form> | ||
| 164 | + </div> | ||
| 165 | + <div class="page-action"> | ||
| 166 | + <el-button type="primary" size="small" @click="openNew">新增</el-button> | ||
| 167 | + </div> | ||
| 168 | + <z-table class="page-table" v-loading="loading" v-bind="tableProps"> | ||
| 169 | + <el-table-column prop="name" label="姓名"></el-table-column> | ||
| 170 | + <el-table-column prop="age" label="年龄"></el-table-column> | ||
| 171 | + <el-table-column label="操作" width="80"> | ||
| 172 | + <template #default="{ row, $index }"> | ||
| 173 | + <el-button size="mini" type="text" title="编辑" @click="openEdit({ row, index: $index })">编辑</el-button> | ||
| 174 | + </template> | ||
| 175 | + </el-table-column> | ||
| 176 | + </z-table> | ||
| 177 | + <el-pagination class="page-pagination" v-bind="paginationProps" v-on="paginationEvent"></el-pagination> | ||
| 178 | + <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px" @closed="resetForm"> | ||
| 179 | + <z-form ref="form" :model="form" :rules="formRules" label-width="60px" size="small"> | ||
| 180 | + <z-form-item label="姓名" prop="name"> | ||
| 181 | + <el-input v-model="form.name"></el-input> | ||
| 182 | + </z-form-item> | ||
| 183 | + <z-form-item label="年龄" prop="age"> | ||
| 184 | + <el-input v-model="form.age"></el-input> | ||
| 185 | + </z-form-item> | ||
| 186 | + <z-form-item> | ||
| 187 | + <el-button type="primary" :loading="submitting" @click="onSubmit">确定</el-button> | ||
| 188 | + <el-button @click="onCancel">取消</el-button> | ||
| 189 | + </z-form-item> | ||
| 190 | + </z-form> | ||
| 191 | + </el-dialog> | ||
| 174 | </div> | 192 | </div> |
| 175 | </template> | 193 | </template> |
| 176 | 194 | ||
| 177 | <script> | 195 | <script> |
| 196 | +// import MIX_PAGE from '@/mixins/page'; 注：使用时解除此注释 | ||
| 197 | + | ||
| 178 | export default { | 198 | export default { |
| 179 | mixins: [MIX_PAGE], | 199 | mixins: [MIX_PAGE], |
| 180 | data() { | 200 | data() { |
| 181 | return { | 201 | return { |
| 182 | - model: { | ||
| 183 | - name: '张三', | 202 | + auto: true, |
| 203 | + searchModel: { | ||
| 204 | + name: '', | ||
| 184 | }, | 205 | }, |
| 185 | - }; | ||
| 186 | - }, | ||
| 187 | - methods: { | ||
| 188 | - handleReset() { | ||
| 189 | - // 注意：切记不可写成 this.model = this.originData.model; 否则会导致originData被改变！ | ||
| 190 | - this.model = this.getOriginData().model; | ||
| 191 | - } | ||
| 192 | - }, | ||
| 193 | -}; | ||
| 194 | -</script> | ||
| 195 | -``` | ||
| 196 | - | ||
| 197 | -::: | ||
| 198 | - | ||
| 199 | -## 源文件 | ||
| 200 | - | ||
| 201 | -```js | ||
| 202 | -import MIX_ORIGIN from '@/mixins/origin'; // 初始值逻辑混入 | ||
| 203 | - | ||
| 204 | -export default { | ||
| 205 | - mixins: [MIX_ORIGIN], | ||
| 206 | - data() { | ||
| 207 | - return { | ||
| 208 | - auto: true, // 页面加载时自动查询 | ||
| 209 | - tableData: [], // 表格数据 | ||
| 210 | - loading: false, // 加载状态 | ||
| 211 | - total: 0, // 数据总量 | ||
| 212 | - currentPage: 1, // 当前页码 | ||
| 213 | - pageSize: 10, // 分页大小 | ||
| 214 | - pageSizes: [10, 20, 50, 100], // 分页大小选项 | ||
| 215 | - layout: 'total, sizes, prev, pager, next, jumper', // 分页器默认设置 | ||
| 216 | - searchModel: {}, // 搜索表单绑定值 | ||
| 217 | - form: {}, // 常规表单绑定值 | ||
| 218 | - submitting: false, // 提交状态 | ||
| 219 | - selection: [], // 表格选中项 | ||
| 220 | - collapsed: false, // 展开状态 | 206 | + form: { |
| 207 | + id: '', | ||
| 208 | + name: '', | ||
| 209 | + age: '', | ||
| 210 | + }, | ||
| 211 | + formRules: { | ||
| 212 | + name: [{ required: true, message: '请输入姓名' }] | ||
| 213 | + }, | ||
| 214 | + dialogVisible: false, | ||
| 215 | + dialogMode: 'new', | ||
| 221 | }; | 216 | }; |
| 222 | }, | 217 | }, |
| 223 | computed: { | 218 | computed: { |
| 224 | - // 搜索栏折叠按钮文本 | ||
| 225 | - toggleText() { | ||
| 226 | - return this.collapsed ? '收起' : '展开'; | ||
| 227 | - }, | ||
| 228 | - // 表格属性 | ||
| 229 | - tableProps() { | ||
| 230 | - return { | ||
| 231 | - size: 'mini', | ||
| 232 | - rowKey: 'id', | ||
| 233 | - border: true, | ||
| 234 | - highlightCurrentRow: true, | ||
| 235 | - data: this.tableData, | ||
| 236 | - }; | ||
| 237 | - }, | ||
| 238 | - // 表格事件 | ||
| 239 | - tableEvent() { | ||
| 240 | - return { | ||
| 241 | - 'selection-change': this.onSelectionChange, | ||
| 242 | - }; | ||
| 243 | - }, | ||
| 244 | - // 分页参数 | ||
| 245 | - pageParams() { | ||
| 246 | - return { | ||
| 247 | - currentPage: this.currentPage, | ||
| 248 | - pageSize: this.pageSize, | ||
| 249 | - }; | ||
| 250 | - }, | ||
| 251 | - // 分页器属性 | ||
| 252 | - paginationProps() { | ||
| 253 | - return { | ||
| 254 | - 'current-page': this.currentPage, | ||
| 255 | - 'page-sizes': this.pageSizes, | ||
| 256 | - 'page-size': this.pageSize, | ||
| 257 | - layout: this.layout, | ||
| 258 | - total: this.total, | ||
| 259 | - }; | ||
| 260 | - }, | ||
| 261 | - // 分页器事件 | ||
| 262 | - paginationEvent() { | ||
| 263 | - return { | ||
| 264 | - 'size-change': this.onPageSizeChange, | ||
| 265 | - 'current-change': this.onCurrentPageChange, | ||
| 266 | - }; | ||
| 267 | - }, | ||
| 268 | - }, | ||
| 269 | - created() { | ||
| 270 | - if (this.auto) { | ||
| 271 | - this.search(); | 219 | + dialogTitle() { |
| 220 | + return this.dialogMode === 'edit' ? '编辑' : '新增'; | ||
| 272 | } | 221 | } |
| 273 | }, | 222 | }, |
| 274 | methods: { | 223 | methods: { |
| 275 | - // 空Promise | ||
| 276 | - emptyPromise() { | ||
| 277 | - return new Promise(resolve => resolve()); | ||
| 278 | - }, | ||
| 279 | - // 重置查询 | ||
| 280 | - onSearch() { | ||
| 281 | - this.currentPage = 1; | ||
| 282 | - this.loadData(); | ||
| 283 | - }, | ||
| 284 | - // 切换展开状态 | ||
| 285 | - toggle() { | ||
| 286 | - this.collapsed = !this.collapsed; | ||
| 287 | - }, | ||
| 288 | - // 查询数据 | ||
| 289 | - search() { | ||
| 290 | - this.loadData(); | ||
| 291 | - }, | ||
| 292 | - // 加载数据 | ||
| 293 | - async loadData() { | ||
| 294 | - this.loading = true; | ||
| 295 | - const params = { | ||
| 296 | - ...this.searchModel, | ||
| 297 | - ...this.pageParams, | ||
| 298 | - }; | ||
| 299 | - const searchAPI = this.searchAPI || this.emptyPromise; | ||
| 300 | - await searchAPI(params) | ||
| 301 | - .then(response => { | ||
| 302 | - const { result = [], totalCount = 0 } = response || {}; | ||
| 303 | - this.tableData = result || []; | ||
| 304 | - this.total = totalCount || 0; | ||
| 305 | - }) | ||
| 306 | - .finally(() => { | ||
| 307 | - this.loading = false; | ||
| 308 | - }); | 224 | + searchAPI(params) { |
| 225 | + return new Promise(resolve => { | ||
| 226 | + setTimeout(() => { | ||
| 227 | + const source = [ | ||
| 228 | + { id: '0', name: '李饼', age: 32 }, | ||
| 229 | + { id: '1', name: '陈拾', age: 20 }, | ||
| 230 | + { id: '3', name: '王七', age: 26 }, | ||
| 231 | + { id: '4', name: '崔倍', age: 27 }, | ||
| 232 | + { id: '5', name: '孙豹', age: 38 }, | ||
| 233 | + { id: '6', name: '庞柏', age: 42 }, | ||
| 234 | + { id: '7', name: '蔡疏', age: 60 }, | ||
| 235 | + { id: '8', name: '卢纳', age: 55 }, | ||
| 236 | + ]; | ||
| 237 | + const list = source.filter(item => `${item.name}`.includes(params.name)); | ||
| 238 | + resolve({ | ||
| 239 | + result: list, | ||
| 240 | + totalCount: list.length | ||
| 241 | + }); | ||
| 242 | + }, 300); | ||
| 243 | + }); | ||
| 309 | }, | 244 | }, |
| 310 | - // 重置搜索表单 | ||
| 311 | - onReset() { | ||
| 312 | - this.searchModel = this.cloneDeep(this.originData).searchModel; | 245 | + openNew() { |
| 246 | + this.dialogMode = 'new'; | ||
| 247 | + this.dialogVisible = true; | ||
| 313 | }, | 248 | }, |
| 314 | - // 多选 | ||
| 315 | - onSelectionChange(selection) { | ||
| 316 | - this.selection = selection; | 249 | + openEdit({ row }) { |
| 250 | + this.dialogMode = 'edit'; | ||
| 251 | + this.form = this.cloneDeep(row); | ||
| 252 | + this.dialogVisible = true; | ||
| 317 | }, | 253 | }, |
| 318 | - // 切换当前页码 | ||
| 319 | - onCurrentPageChange(value) { | ||
| 320 | - this.currentPage = value; | ||
| 321 | - this.$nextTick(this.loadData); | 254 | + onSubmit() { |
| 255 | + this.$refs.form.validate(valid => { | ||
| 256 | + if (valid) { | ||
| 257 | + let data = this.cloneDeep(this.form); | ||
| 258 | + if (this.dialogMode === 'new') { | ||
| 259 | + delete data.id; | ||
| 260 | + console.log('新增提交：', data); | ||
| 261 | + } else if (this.dialogMode === 'edit') { | ||
| 262 | + console.log('修改提交：', data); | ||
| 263 | + } | ||
| 264 | + this.submitting = true; | ||
| 265 | + setTimeout(() => { | ||
| 266 | + this.submitting = false; | ||
| 267 | + this.dialogVisible = false; | ||
| 268 | + this.search(); | ||
| 269 | + }, 1500); | ||
| 270 | + } | ||
| 271 | + }); | ||
| 322 | }, | 272 | }, |
| 323 | - // 切换最大页码 | ||
| 324 | - onPageSizeChange(value) { | ||
| 325 | - this.currentPage = 1; | ||
| 326 | - this.pageSize = value; | ||
| 327 | - this.$nextTick(this.loadData); | 273 | + onCancel() { |
| 274 | + this.dialogVisible = false; | ||
| 328 | }, | 275 | }, |
| 276 | + resetForm() { | ||
| 277 | + this.form = this.getOriginData().form; | ||
| 278 | + this.$refs.form.resetFields(); | ||
| 279 | + } | ||
| 329 | }, | 280 | }, |
| 330 | }; | 281 | }; |
| 331 | -``` | ||
| 332 | \ No newline at end of file | 282 | \ No newline at end of file |
| 283 | +</script> | ||
| 284 | + | ||
| 285 | +``` | ||
| 286 | + | ||
| 287 | +::: | ||
| 288 | + | ||
| 289 | +## 内置方法 | ||
| 290 | + | ||
| 291 | +本配置中，已经混入了`MIX_ORIGIN`，内置了`originData`对象和`getOriginData`方法。 |
packages/select/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <el-select | 2 | <el-select |
| 3 | + ref="select" | ||
| 3 | :size="selectSize" | 4 | :size="selectSize" |
| 4 | :disabled="selectDisabled" | 5 | :disabled="selectDisabled" |
| 5 | :value-key="valueKey" | 6 | :value-key="valueKey" |
| @@ -77,16 +78,6 @@ export default { | @@ -77,16 +78,6 @@ export default { | ||
| 77 | type: String, | 78 | type: String, |
| 78 | default: ',', | 79 | default: ',', |
| 79 | }, | 80 | }, |
| 80 | - // 请求参数 | ||
| 81 | - params: { | ||
| 82 | - type: Object, | ||
| 83 | - default: () => ({}), | ||
| 84 | - }, | ||
| 85 | - // 请求配置 | ||
| 86 | - config: { | ||
| 87 | - type: Object, | ||
| 88 | - default: () => ({}), | ||
| 89 | - }, | ||
| 90 | // 自定义接口 | 81 | // 自定义接口 |
| 91 | queryApi: Function, | 82 | queryApi: Function, |
| 92 | lazy: Boolean, | 83 | lazy: Boolean, |
| @@ -146,6 +137,9 @@ export default { | @@ -146,6 +137,9 @@ export default { | ||
| 146 | selectClearable() { | 137 | selectClearable() { |
| 147 | return this.clearable || this.remote; | 138 | return this.clearable || this.remote; |
| 148 | }, | 139 | }, |
| 140 | + elSelect() { | ||
| 141 | + return this.$refs.select; | ||
| 142 | + }, | ||
| 149 | remote() { | 143 | remote() { |
| 150 | return !!this.queryApi; | 144 | return !!this.queryApi; |
| 151 | }, | 145 | }, |
| @@ -279,6 +273,12 @@ export default { | @@ -279,6 +273,12 @@ export default { | ||
| 279 | this.loaded = true; | 273 | this.loaded = true; |
| 280 | } | 274 | } |
| 281 | }, | 275 | }, |
| 276 | + focus() { | ||
| 277 | + this.elSelect.focus(); | ||
| 278 | + }, | ||
| 279 | + blur() { | ||
| 280 | + this.elSelect.blur(); | ||
| 281 | + }, | ||
| 282 | }, | 282 | }, |
| 283 | }; | 283 | }; |
| 284 | </script> | 284 | </script> |
packages/table/editable.vue
| @@ -131,6 +131,9 @@ export default { | @@ -131,6 +131,9 @@ export default { | ||
| 131 | value(val) { | 131 | value(val) { |
| 132 | this.tableData = val || []; | 132 | this.tableData = val || []; |
| 133 | }, | 133 | }, |
| 134 | + data(val) { | ||
| 135 | + this.tableData = val || []; | ||
| 136 | + }, | ||
| 134 | }, | 137 | }, |
| 135 | data() { | 138 | data() { |
| 136 | return { | 139 | return { |
packages/table/normal.vue
| @@ -51,6 +51,9 @@ export default { | @@ -51,6 +51,9 @@ export default { | ||
| 51 | value(val) { | 51 | value(val) { |
| 52 | this.tableData = val || []; | 52 | this.tableData = val || []; |
| 53 | }, | 53 | }, |
| 54 | + data(val) { | ||
| 55 | + this.tableData = val || []; | ||
| 56 | + }, | ||
| 54 | }, | 57 | }, |
| 55 | computed: { | 58 | computed: { |
| 56 | _elFormItemSize() { | 59 | _elFormItemSize() { |