From b141aae864419a0d6f64e44591a2af04f2aa9586 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= Date: Fri, 2 Feb 2024 19:41:05 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5mdp-ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mdp-ui/mdp-select-table/README.md | 90 ++++++++++++++++++- src/components/mdp-ui/mixin/MdpFormMixin.js | 58 +++++++----- 2 files changed, 125 insertions(+), 23 deletions(-) diff --git a/src/components/mdp-ui/mdp-select-table/README.md b/src/components/mdp-ui/mdp-select-table/README.md index 7dcb9b5d..7c405fd0 100644 --- a/src/components/mdp-ui/mdp-select-table/README.md +++ b/src/components/mdp-ui/mdp-select-table/README.md @@ -2,10 +2,32 @@ - 该组件与mdp-select效果一致，同样支持origin/tag/x三种风格，不同之处在于具有分页功能，适合超大表格数据的选择，如下图1所示，默认只会展示用过的数据，如果需要更多数据，需要点击【更多数据】按钮，将会弹出图2所示,当用户选中数据后，数据将填充到图1的下拉列表中，并且能够模拟select的选中事件 ![mdp-select-table-select](/docs/images/ui-components/mdp-select-table-select.png) -![mdp-select-table](/docs/images/ui-components/mdp-select-table.png) +![mdp-select-table](/docs/images/ui-components/big-table-select.jpg) ### 用法 +#### 最简单的用法，通过props定义编号及名称 +```html + + +``` +```js + +``` + #### 通过属性columnCfgs传入表格字段列表，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等 ```html @@ -56,6 +78,68 @@ ``` + ### Attributes -相关配置与mdp-table一摸一样，具体查看 -[mdp-table](/src/components/mdp-ui/mdp-table) \ No newline at end of file +|参数|说明|类型|可选值|默认值| +|--------|------|--------|-----------------|----------------| +|loadFun|查询数据的接口函数|Promise|-| - +|multiple|是否多选|boolean|—|false +|show-hi-query|是否显示高级查询|boolean|—|true +|show-common-query|是否显示常规查询|boolean|—|true +|column-cfgs|表头列配置项列表|Array|-|- +|props|简化版的column-cfgs，如果配置了column-cfgs则该属性不起作用，只有两列编号及名称|Object|-|{id:'id',name:'name'} + + + +### Events +|事件名称|说明|回调参数| +|--------|------|--------| +change2|选中值发生变化时触发，在需要获取值以外更多信息时使用|目前的选中的整个对象,如果multiple=false,返回一个对象，否则返回对象数组 +change|选中值发生变化时触发|目前的选中值，如果multiple=false,返回一个值，否则返回值数组，如果split有则，则返回以split分割的字符串，如1,2,3,4,5 +visible-change|下拉框出现/隐藏时触发|出现则为 true，隐藏则为 false +remove-tag|多选模式下移除tag时触发|移除的tag值 +clear|可清空的单选模式下用户点击清空按钮时触发|— +blur|当 input 失去焦点时触发|(event: Event) +focus|当 input 获得焦点时触发|(event: Event) + +### slot +|name|说明| +|--------|------| +—|Option 组件列表 +info|鼠标未进入时展示的内容，showStyle=tag\x时有效 +oper|鼠标进入后展示的内容，showStyle=tag\x时有效 +~~prefix|Select 组件头部内容~~ +empty|无选项时的列表 + +### column-cfgs 表头字段配置 +|参数|说明|类型|可选值|默认值| +|--------|------|--------|-----------------|----------------| +label|列名|string|—|— +property|属性名，驼峰命名，用于反解析出表字段|string|—|— +sortNo|前端显示排序，排序从0-999，越小越靠前,在表头、常规查询、高级查询的显示顺序|Number|—|— +isCommon|是否常用，用于常规查询是否显示|Boolean|true/false|false +colType|数据库字段类型| string/int/date/datatime/|string/int/date/datatime/|string +showHq|是否在高级查询中显示|boolean|true、false|true +showCol|列名|boolean|—|— +sqlOper|数据库操作符|string|gt/lt/ge/le/eq/ne/left_like/right_like/like/in/nin/bwtween/sql|eq +sqlVal|默认值|string|—|多选的话逗号分隔 +beginVal|区间取值时的开始值|string|—|如果sqlOper=between,值存于beginVal及envVal中 +endVal|区间取值时的结束值|string|—|如果sqlOper=between,值存于beginVal及envVal中 +pk|是否为主键|boolean|true、false|false +itemCode|字典表中itemCode字段，填写了该值将从字典表加载下拉列表|string|—|— +colPrefix|属性需要添加前缀时使用，比如res.id=xxxxx,此次填写res.|string|—|— +disabledHq|是否允许编辑查询条件|boolean|—|— + +### props 简易列配置 + +|参数|说明|类型|可选值|默认值| +|--------|------|--------|-----------------|----------------| +id|编号列|string|id|id +name|名称列|string|name|name + +### Methods + +|方法名|说明|参数| +|--------|------|--------| +focus|使 input 获取焦点|- +blur|使 input 失去焦点，并隐藏下拉框|- \ No newline at end of file diff --git a/src/components/mdp-ui/mixin/MdpFormMixin.js b/src/components/mdp-ui/mixin/MdpFormMixin.js index adc13835..0c91e168 100644 --- a/src/components/mdp-ui/mixin/MdpFormMixin.js +++ b/src/components/mdp-ui/mixin/MdpFormMixin.js @@ -311,6 +311,14 @@ export const MdpFormMixin = { } return isMatch; }, + editSomeFieldQxCheck(){ + if(this.currOpType=='add' || this.currOpType=='subAdd' || this.currOpType=='detail'){ + return false; + }else{ + + return true; + } + }, /** * 对修改的字段进行判断，返回false ,将取消更新数据库,由组件扩展 * @param {*} row 当前选中的行 @@ -320,16 +328,12 @@ export const MdpFormMixin = { * @returns true/false 返回false ,将取消更新数据库 */ editSomeFieldsCheck(row,fieldName,$event,params){ - if(this.currOpType=='add'){ - return false; - } params[fieldName]=$event return true; }, editSomeFields(row,fieldName,$event){ - if(this.currOpType=='add' || this.currOpType=='detail'){ - return; - } + + var params={}; var that=this; var sels=[row] @@ -342,6 +346,9 @@ export const MdpFormMixin = { } return; } + if(!this.editSomeFieldQxCheck()){ + return; + } this.setPks(sels,params); var apiName="apis.editSomeFields" if(!this.apiCheck(this.apis.editSomeFields,apiName)){ @@ -349,22 +356,33 @@ export const MdpFormMixin = { } this.load.editSomeFields=true; var func = this.apis.editSomeFields; - func(params).then(res=>{ - var tips = res.data.tips; - if(tips.isOk){ - Object.assign(row,params) - that.afterEditSomeFields(res,tips.isOk,params,row) - that.dataBak=Object.assign({},this.editForm) - }else{ - if(this.dataBak && this.justPkIsMatch(row,this.dataBak)){ - Object.assign(row,this.dataBak) - } - that.$notify({position:'bottom-left',showClose:true,message:tips.msg,type:tips.isOk?'success':'error'}) + var form=this.$refs['editFormRef']; + if(!form){ + form=this.$refs['editForm']; + } + form.validateField(fieldName,(valid) => { + if (!valid) { + func(params).then(res=>{ + var tips = res.data.tips; + if(tips.isOk){ + Object.assign(row,params) + that.afterEditSomeFields(res,tips.isOk,params,row) + that.dataBak=Object.assign({},this.editForm) + }else{ + if(this.dataBak && this.justPkIsMatch(row,this.dataBak)){ + Object.assign(row,this.dataBak) + } + that.$notify({position:'bottom-left',showClose:true,message:tips.msg,type:tips.isOk?'success':'error'}) + } + + }).catch(err=>{ + this.load.editSomeFields=false; + }); + }else{ + this.$notify({ showClose:true, message: "表单验证不通过，请修改表单数据再提交.", type: 'error' }); } - - }).catch(err=>{ - this.load.editSomeFields=false; }); + }, afterSubmit(res,isOk,currOpType){ if(isOk && currOpType=='add'){