Commit d52316ee7be66f7621529f0cbbf3d258ec3c9c80
1 parent
7bcc1a9c
Exists in
master
and in
1 other branch
调整重置表单逻辑
Showing
3 changed files
with
62 additions
and
112 deletions
Show diff stats
examples/main.js
| ... | ... | @@ -13,100 +13,38 @@ import '@/styles/theme/index.css'; |
| 13 | 13 | import '@/styles/nprogress.scss'; |
| 14 | 14 | import "highlight.js/styles/color-brewer.css"; |
| 15 | 15 | |
| 16 | -import { Notification } from 'element-ui'; | |
| 17 | - | |
| 18 | 16 | const request = axios.create({ |
| 19 | 17 | baseURL: 'http://47.110.137.80:7104/cbin/', |
| 20 | 18 | timeout: 1000 * 60, |
| 21 | 19 | withCredentials: true, |
| 22 | 20 | headers: { |
| 23 | - token: 'd2ec639eb3a4e6e2fc3ab2adc6e652fc', | |
| 21 | + token: '04c8fe07d7ded87936343ef8f0a6767a', | |
| 24 | 22 | 'Accept-Language': 'zh-CN' |
| 25 | 23 | } |
| 26 | 24 | }); |
| 27 | 25 | |
| 28 | -const codeMessage = { | |
| 29 | - 200: '服务器成功返回请求的数据', | |
| 30 | - 201: '新建或修改数据成功。', | |
| 31 | - 202: '一个请求已经进入后台排队（异步任务）', | |
| 32 | - 204: '删除数据成功。', | |
| 33 | - 400: '发出的请求有错误，服务器没有进行新建或修改数据,的操作。', | |
| 34 | - 401: '用户没有权限（令牌、用户名、密码错误）。', | |
| 35 | - 403: '用户得到授权，但是访问是被禁止的。', | |
| 36 | - 404: '发出的请求针对的是不存在的记录，服务器没有进行操作', | |
| 37 | - 406: '请求的格式不可得。', | |
| 38 | - 410: '请求的资源被永久删除，且不会再得到的。', | |
| 39 | - 422: '当创建一个对象时，发生一个验证错误。', | |
| 40 | - 500: '服务器发生错误，请检查服务器', | |
| 41 | - 502: '网关错误', | |
| 42 | - 503: '服务不可用，服务器暂时过载或维护', | |
| 43 | - 504: '网关超时' | |
| 44 | -}; | |
| 45 | - | |
| 46 | -const checkStatus = (response) => { | |
| 47 | - if (response.status >= 200 && response.status < 300) { | |
| 48 | - return response; | |
| 49 | - } | |
| 50 | - const errortext = codeMessage[response.status] || response.statusText; | |
| 51 | - const messageContent = ` | |
| 52 | - ${response.request.responseURL} | |
| 53 | - ${errortext} | |
| 54 | - `; | |
| 55 | - Notification.error({ | |
| 56 | - title: `请求错误 ${response.status}:`, | |
| 57 | - message: messageContent, | |
| 58 | - duration: 3000, | |
| 59 | - }); | |
| 60 | - const error = new Error(errortext); | |
| 61 | - error.name = response.status; | |
| 62 | - error.response = response; | |
| 63 | - return error; | |
| 64 | -} | |
| 65 | - | |
| 66 | 26 | // respone 拦截器 |
| 67 | 27 | request.interceptors.response.use( |
| 68 | 28 | response => { |
| 69 | 29 | const { data = {}, config } = response; |
| 70 | - const { code, msg } = data; | |
| 30 | + const { code } = data; | |
| 71 | 31 | if (config && config.interceptors === false) { // 请求配置不做返回拦截的情况 |
| 72 | 32 | return response; |
| 73 | 33 | } else { |
| 74 | - if (`${code}` === '401') { // 授权失效 | |
| 75 | - removeToken(); | |
| 76 | - router.push({ name: 'login' }, () => { | |
| 77 | - location.reload(); | |
| 78 | - }); | |
| 79 | - } else if (`${code}` === '1000') { // 业务逻辑错误提示 | |
| 80 | - Notification.error({ | |
| 81 | - title: '提示', | |
| 82 | - message: msg, | |
| 83 | - duration: 3000, | |
| 84 | - }); | |
| 85 | - return false; | |
| 86 | - } else if (`${code}` === '0') { // 请求成功 | |
| 34 | + if (`${code}` === '0') { | |
| 87 | 35 | return data; |
| 88 | - } else { // 其它错误，开发环境提示 | |
| 89 | - if (process.env.NODE_ENV === 'development') { | |
| 90 | - Notification.error({ | |
| 91 | - title: '提示', | |
| 92 | - message: msg, | |
| 93 | - duration: 3000, | |
| 94 | - }); | |
| 95 | - } | |
| 36 | + } else { | |
| 96 | 37 | return false; |
| 97 | 38 | } |
| 98 | 39 | } |
| 99 | 40 | }, |
| 100 | 41 | error => { |
| 101 | - const e = checkStatus(error.response); | |
| 102 | - console.error(e); | |
| 42 | + console.error(error); | |
| 103 | 43 | return { success: false }; |
| 104 | 44 | }); |
| 105 | 45 | |
| 106 | 46 | Vue.prototype.$axios = request; |
| 107 | 47 | |
| 108 | - | |
| 109 | - | |
| 110 | 48 | // 进度条配置 |
| 111 | 49 | NProgress.configure({ showSpinner: false }); |
| 112 | 50 | ... | ... |
examples/views/page/test.vue
| 1 | 1 | <template> |
| 2 | - <eagle-scheme | |
| 3 | - :option="{ $http: $axios, url: '/overseas/store' }" | |
| 4 | - :list="schemeList" | |
| 5 | - > | |
| 2 | + <eagle-scheme class="p-3" :list="schemeList" :option="{ $http: $axios, url: '/overseas/price/sale' }"> | |
| 3 | + <template #search-enableFlag="{ model }"> | |
| 4 | + <eagle-select v-model="model.enableFlag" :dataSource="[{ label: '正常', value: true }, { label: '禁用', value: false }]"></eagle-select> | |
| 5 | + </template> | |
| 6 | 6 | <el-table-column type="selection" width="50"></el-table-column> |
| 7 | + <template #table-productCode> | |
| 8 | + <el-table-column prop="productName" label="产品" min-width="100"> | |
| 9 | + <span slot-scope="{ row: { productName, productCode } }">{{ productName || productCode }}</span> | |
| 10 | + </el-table-column> | |
| 11 | + </template> | |
| 12 | + <template #table-append> | |
| 13 | + <el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column> | |
| 14 | + <el-table-column prop="createUser" label="创建人" min-width="160" show-overflow-tooltip></el-table-column> | |
| 15 | + <el-table-column prop="modifyTime" label="修改时间" min-width="180"></el-table-column> | |
| 16 | + <el-table-column prop="modifyUser" label="修改人" min-width="160" show-overflow-tooltip></el-table-column> | |
| 17 | + </template> | |
| 7 | 18 | </eagle-scheme> |
| 8 | 19 | </template> |
| 9 | 20 | |
| ... | ... | @@ -13,40 +24,41 @@ export default { |
| 13 | 24 | data() { |
| 14 | 25 | return { |
| 15 | 26 | schemeList: [ |
| 16 | - { type: 'el-input', label: 'ID', key: 'id', include: 'form', visible: (model, { formMode } = {}) => { return formMode == 'edit' }, | |
| 27 | + { type: 'el-input', label: 'ID', key: 'id', include: 'form', visible: (model, { formMode } = {}) => { return formMode == 'edit' }, show: false, | |
| 17 | 28 | props: { disabled: true }, |
| 18 | 29 | }, |
| 19 | - { type: 'el-input', label: '门店编码', key: 'code', exclude: 'search', | |
| 20 | - rules: [{ required: true, message: '门店编码不能为空', trigger: 'blur' }], | |
| 21 | - props: { placeholder: '门店编码' }, | |
| 30 | + { type: 'el-input', label: '编码', key: 'code', default: '1231231321231', | |
| 31 | + rules: [{ required: true, message: '编码不能为空', trigger: 'blur' }], | |
| 32 | + props: { placeholder: '编码', disabled: (model, { formMode } = {}) => { return formMode == 'edit' } }, | |
| 22 | 33 | }, |
| 23 | - { type: 'el-input', label: '门店名称', key: 'name', | |
| 24 | - rules: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }], | |
| 25 | - props: { placeholder: '门店名称' }, | |
| 34 | + { type: 'el-input', label: '产品', key: 'productCode', | |
| 35 | + rules: [{ required: true, message: '产品不能为空', trigger: 'blur' }], | |
| 36 | + props: { url: '/overseas/product/select' }, | |
| 26 | 37 | }, |
| 27 | - { type: 'el-input', label: '合作伙伴', key: 'dwCustomerCode', exclude: 'search', | |
| 28 | - rules: [{ required: true, message: '合作伙伴不能为空', trigger: 'change' }], | |
| 29 | - props: { placeholder: '合作伙伴' }, | |
| 38 | + { type: 'el-input-number', label: '价格', key: 'price', exclude: 'search', | |
| 39 | + rules: [{ required: true, message: '价格不能为空', trigger: 'blur' }], | |
| 40 | + props: { placeholder: '价格' }, | |
| 30 | 41 | }, |
| 31 | - { type: 'el-input', label: '联系人', key: 'contact', exclude: 'search', | |
| 32 | - rules: [{ required: true, message: '联系人不能为空', trigger: 'change' }], | |
| 33 | - props: { placeholder: '联系人' }, | |
| 42 | + { type: 'el-input', label: '价格说明', key: 'note', exclude: 'search', | |
| 43 | + props: { placeholder: '价格说明' }, | |
| 34 | 44 | }, |
| 35 | - { type: 'el-input', label: '联系方式', key: 'phone', exclude: 'search', | |
| 36 | - rules: [{ required: true, message: '联系方式不能为空', trigger: 'change' }], | |
| 37 | - props: { placeholder: '联系方式' }, | |
| 45 | + { type: 'el-input', label: '出发城市', key: 'fromCity', exclude: 'search', | |
| 46 | + rules: [{ required: true, message: '出发城市不能为空', trigger: 'change' }], | |
| 47 | + props: { dictionaryCode: 'FROM_CITY_LIST' }, | |
| 38 | 48 | }, |
| 39 | - { type: 'el-input', label: '联系地址', key: 'address', exclude: 'search', | |
| 40 | - rules: [{ required: true, message: '联系地址不能为空', trigger: 'change' }], | |
| 41 | - props: { placeholder: '联系地址' }, | |
| 49 | + { type: 'el-input', label: '目的地', key: 'toCountry', exclude: 'search', | |
| 50 | + rules: [{ required: true, message: '目的地不能为空', trigger: 'change' }], | |
| 51 | + props: { dictionaryCode: 'TO_COUNTRY' }, | |
| 42 | 52 | }, |
| 43 | - { type: 'el-input', label: '管理员密码', key: 'password', exclude: 'search', | |
| 44 | - rules: [{ required: true, message: '管理员密码不能为空', trigger: 'change' }], | |
| 45 | - props: { placeholder: '管理员密码' }, | |
| 53 | + { type: 'el-input', label: '状态', key: 'enableFlag', span: 24, searchScheme: { span: 6 }, | |
| 46 | 54 | }, |
| 47 | - { type: 'el-input', label: '门店类型', key: 'type', | |
| 48 | - rules: [{ required: true, message: '管理员密码不能为空', trigger: 'change' }], | |
| 49 | - props: { placeholder: '管理员密码' }, | |
| 55 | + { type: 'el-date-picker', label: '生效时间', key: 'enabledTime', exclude: 'search', minWidth: '180', | |
| 56 | + rules: [{ required: true, message: '生效时间不能为空', trigger: 'change' }], | |
| 57 | + props: { type: 'datetime', placeholder: '生效时间', 'value-format': 'yyyy-MM-dd HH:mm:ss' }, | |
| 58 | + }, | |
| 59 | + { type: 'el-date-picker', label: '禁用时间', key: 'disabledTime', exclude: 'search', minWidth: '180', | |
| 60 | + rules: [{ required: true, message: '禁用时间不能为空', trigger: 'change' }], | |
| 61 | + props: { type: 'datetime', placeholder: '禁用时间', 'value-format': 'yyyy-MM-dd HH:mm:ss' }, | |
| 50 | 62 | }, |
| 51 | 63 | ], |
| 52 | 64 | } | ... | ... |
packages/scheme/index.vue
| ... | ... | @@ -115,7 +115,7 @@ |
| 115 | 115 | </div> |
| 116 | 116 | </div> |
| 117 | 117 | <el-dialog v-loading="dialogLoading" element-loading-background="rgba(255, 255, 255, 0.3)" :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }"> |
| 118 | - <eagle-form v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel"> | |
| 118 | + <eagle-form v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel"> | |
| 119 | 119 | <!-- 表单分组具名插槽 --> |
| 120 | 120 | <template v-for="key in formGroupSlotsKeys"> |
| 121 | 121 | <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot> |
| ... | ... | @@ -298,7 +298,6 @@ export default { |
| 298 | 298 | async doSearch(param) { |
| 299 | 299 | const { totalCountAlias = 'totalCount' } = this.option || {}; |
| 300 | 300 | if (this.option.searchAPI) { // 配置了自定义查询API的情况 |
| 301 | - console.log('searchAPI'); | |
| 302 | 301 | this.tableLoading = true; |
| 303 | 302 | try { |
| 304 | 303 | const response = await this.option.searchAPI(param) || {}; |
| ... | ... | @@ -311,7 +310,6 @@ export default { |
| 311 | 310 | this.tableLoading = false; |
| 312 | 311 | } |
| 313 | 312 | } else if (_$http && this.option.url) { // 给定了http的情况 |
| 314 | - console.log('_$http search'); | |
| 315 | 313 | this.tableLoading = true; |
| 316 | 314 | _$http.get(`${this.option.url.trim('/')}/${this.option.searchMethod || 'page'}?${stringify(param)}`) |
| 317 | 315 | .then((response) => { |
| ... | ... | @@ -333,7 +331,7 @@ export default { |
| 333 | 331 | this.dialogTitle = this.i18n('eagle.scheme.detail') || '详情'; |
| 334 | 332 | this.dialogType = 'dialog-view'; |
| 335 | 333 | this.tableCurrentRow = row; |
| 336 | - this.formModel = {}; | |
| 334 | + this.resetFormModel(); | |
| 337 | 335 | this.formMode = "view"; |
| 338 | 336 | this.$emit('dialog-change', this.dialogType); |
| 339 | 337 | this.showDialog(); |
| ... | ... | @@ -343,7 +341,6 @@ export default { |
| 343 | 341 | async doDetail(param) { |
| 344 | 342 | const { primaryKey = 'id', detailPrimaryKey, detailRow = false } = this.option || {}; |
| 345 | 343 | if (this.option.detailAPI && !detailRow) { // 配置了自定义查询API的情况 |
| 346 | - console.log('detailAPI'); | |
| 347 | 344 | this.dialogLoading = true; |
| 348 | 345 | try { |
| 349 | 346 | const result = await this.option.detailAPI(param); |
| ... | ... | @@ -354,7 +351,6 @@ export default { |
| 354 | 351 | this.dialogLoading = false; |
| 355 | 352 | } |
| 356 | 353 | } else if (_$http && this.option.url && !detailRow) { // 给定了http的情况 |
| 357 | - console.log('_$http detail'); | |
| 358 | 354 | this.dialogLoading = true; |
| 359 | 355 | const defaultDetailMethod = `info/${detailPrimaryKey || primaryKey}/${param[detailPrimaryKey] || param[primaryKey]}`; |
| 360 | 356 | const detailMethodFormat = this.option.detailMethod ? `${this.option.detailMethod.trim('/')}/${param[detailPrimaryKey || primaryKey]}` : undefined; |
| ... | ... | @@ -375,7 +371,7 @@ export default { |
| 375 | 371 | this.dialogTitle = this.i18n('eagle.scheme.new') || '新增'; |
| 376 | 372 | this.dialogType = 'dialog-form'; |
| 377 | 373 | this.tableCurrentRow = row; |
| 378 | - this.formModel = {}; | |
| 374 | + this.resetFormModel(); | |
| 379 | 375 | this.formMode = "new"; |
| 380 | 376 | this.$emit('dialog-change', this.dialogType); |
| 381 | 377 | this.showDialog(); |
| ... | ... | @@ -385,7 +381,7 @@ export default { |
| 385 | 381 | this.dialogTitle = this.i18n('eagle.scheme.edit') || '编辑'; |
| 386 | 382 | this.dialogType = 'dialog-form'; |
| 387 | 383 | this.tableCurrentRow = row; |
| 388 | - this.formModel = {}; | |
| 384 | + this.resetFormModel(); | |
| 389 | 385 | this.formMode = "edit"; |
| 390 | 386 | this.$emit('dialog-change', this.dialogType); |
| 391 | 387 | this.showDialog(); |
| ... | ... | @@ -395,7 +391,6 @@ export default { |
| 395 | 391 | async doGet(param) { |
| 396 | 392 | const { primaryKey = 'id', getPrimaryKey, getRow = false } = this.option || {}; |
| 397 | 393 | if (this.option.getAPI) { // 配置了自定义查询API的情况 |
| 398 | - console.log('getAPI'); | |
| 399 | 394 | this.dialogLoading = true; |
| 400 | 395 | try { |
| 401 | 396 | const result = await this.option.getAPI(param); |
| ... | ... | @@ -406,7 +401,6 @@ export default { |
| 406 | 401 | this.dialogLoading = false; |
| 407 | 402 | } |
| 408 | 403 | } else if (_$http && this.option.url && !getRow) { // 给定了http的情况 |
| 409 | - console.log('_$http get'); | |
| 410 | 404 | this.dialogLoading = true; |
| 411 | 405 | const defaultGetMethod = `get/${getPrimaryKey || primaryKey}/${param[getPrimaryKey] || param[primaryKey]}`; |
| 412 | 406 | const getMethodFormat = this.option.getMethod ? `${this.option.getMethod.trim('/')}/${param[getPrimaryKey || primaryKey]}` : undefined; |
| ... | ... | @@ -445,7 +439,6 @@ export default { |
| 445 | 439 | const { primaryKey = 'id', deletePrimaryKey } = this.option || {}; |
| 446 | 440 | const param = selection.map(item => item[deletePrimaryKey || primaryKey]); |
| 447 | 441 | if (this.option.deleteAPI) { // 配置了自定义删除API的情况 |
| 448 | - console.log('deleteAPI'); | |
| 449 | 442 | this.dialogLoading = true; |
| 450 | 443 | try { |
| 451 | 444 | const success = await this.option.deleteAPI(param, selection); |
| ... | ... | @@ -460,7 +453,6 @@ export default { |
| 460 | 453 | this.dialogLoading = false; |
| 461 | 454 | } |
| 462 | 455 | } else if (_$http && this.option.url) { // 给定了http的情况 |
| 463 | - console.log('_$http delete'); | |
| 464 | 456 | this.dialogLoading = true; |
| 465 | 457 | const postData = param; |
| 466 | 458 | _$http.post(`${this.option.url.trim('/')}/${this.option.deleteMethod || 'delete'}`, postData) |
| ... | ... | @@ -477,6 +469,18 @@ export default { |
| 477 | 469 | }); |
| 478 | 470 | } |
| 479 | 471 | }, |
| 472 | + // 重置表单值 | |
| 473 | + resetFormModel() { | |
| 474 | + this.$nextTick(() => { | |
| 475 | + if (this.$refs['eagle-form']) { | |
| 476 | + this.$refs['eagle-form'].reset(); | |
| 477 | + } else { | |
| 478 | + Object.keys(this.formModel).forEach(key => { | |
| 479 | + this.formModel[key] = undefined; | |
| 480 | + }); | |
| 481 | + } | |
| 482 | + }); | |
| 483 | + }, | |
| 480 | 484 | // 设置表单值 |
| 481 | 485 | setFormModel(value) { |
| 482 | 486 | if (value && value instanceof Object) { |
| ... | ... | @@ -511,7 +515,6 @@ export default { |
| 511 | 515 | async doNewSubmit(param) { |
| 512 | 516 | const { primaryKey = 'id', formPrimaryKey } = this.option || {}; |
| 513 | 517 | if (this.option.newAPI) { // 配置了自定义查询API的情况 |
| 514 | - console.log('newAPI'); | |
| 515 | 518 | this.dialogLoading = true; |
| 516 | 519 | try { |
| 517 | 520 | const success = await this.option.newAPI(param); |
| ... | ... | @@ -526,7 +529,6 @@ export default { |
| 526 | 529 | this.dialogLoading = false; |
| 527 | 530 | } |
| 528 | 531 | } else if (_$http && this.option.url) { // 给定了http的情况 |
| 529 | - console.log('_$http new'); | |
| 530 | 532 | this.dialogLoading = true; |
| 531 | 533 | const postData = { ...param }; |
| 532 | 534 | delete postData[formPrimaryKey || primaryKey]; |
| ... | ... | @@ -547,7 +549,6 @@ export default { |
| 547 | 549 | // 编辑提交逻辑 |
| 548 | 550 | async doEditSubmit(param) { |
| 549 | 551 | if (this.option.editAPI) { // 配置了自定义查询API的情况 |
| 550 | - console.log('editAPI'); | |
| 551 | 552 | this.dialogLoading = true; |
| 552 | 553 | try { |
| 553 | 554 | const success = await this.option.editAPI(param); |
| ... | ... | @@ -562,7 +563,6 @@ export default { |
| 562 | 563 | this.dialogLoading = false; |
| 563 | 564 | } |
| 564 | 565 | } else if (_$http && this.option.url) { // 给定了http的情况 |
| 565 | - console.log('_$http edit'); | |
| 566 | 566 | this.dialogLoading = true; |
| 567 | 567 | _$http.post(`${this.option.url.trim('/')}/${this.option.editMethod || 'update'}`, param) |
| 568 | 568 | .then(response => { | ... | ... |