Browse Source

优化

master
陈裕财 2 years ago
parent
commit
8084649f03
  1. 217
      src/views/mdp/form/formField/Index.vue

217
src/views/mdp/form/formField/Index.vue

@ -43,9 +43,9 @@
<el-form :model="addForm" label-width="100px" v-adaptive style="width:100%;height:100px;overflow:auto" :rules="addFormRules" ref="inputAddForm"> <el-form :model="addForm" label-width="100px" v-adaptive style="width:100%;height:100px;overflow:auto" :rules="addFormRules" ref="inputAddForm">
<el-form-item label="字段来源" title="该组件能够快速初始化一系列已定义的列"> <el-form-item label="字段来源" title="该组件能够快速初始化一系列已定义的列">
<el-row type="flex"> <el-row type="flex">
<el-button type="primary" @click="$refs['tableDialog'].open()" title="自动读取表格的列作为该表单的字段" >数据库表</el-button>
<el-button type="success" @click="$refs['aiTableDialog'].open()" title="ai输出了表格列信息,黏贴到此组件即可以解析出列信息作为该表单字段">AI输出</el-button>
<el-button type="warning" @click="$refs['apiDialog'].open()" title="api输出的结果如果是json,可以根据第一条数据结果解析出字段编码,手动加上中文注释即可">API输出</el-button>
<el-button type="primary" @click="$refs['dbFormDialog'].open()" title="自动读取表格的列作为该表单的字段" >数据库表</el-button>
<el-button type="success" @click="$refs['aiFormDialog'].open()" title="ai输出了表格列信息,黏贴到此组件即可以解析出列信息作为该表单字段">AI输出</el-button>
<el-button type="warning" @click="$refs['apiFormDialog'].open()" title="api输出的结果如果是json,可以根据第一条数据结果解析出字段编码,手动加上中文注释即可">API输出</el-button>
<el-button type="primary" @click="$refs['itemDialog'].open()" title="自动读取数据字典中的下拉列表作为该表单的字段信息">数据字典</el-button> <el-button type="primary" @click="$refs['itemDialog'].open()" title="自动读取数据字典中的下拉列表作为该表单的字段信息">数据字典</el-button>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -62,45 +62,51 @@
</el-col> </el-col>
</el-row> </el-row>
<mdp-dialog ref="tableDialog">
<el-row>
请输入数据库表名:
<el-input v-model="tableName"></el-input>
</el-row>
<mdp-dialog ref="dbFormDialog">
<el-form :model="dbForm" ref="dbFormRef">
<el-form-item label="数据库" :rules="{required:true,message:'此项必输',trigger:'blur'}" prop="owner">
<el-input v-model="dbForm.owner"></el-input>
</el-form-item>
<el-form-item label="表名" :rules="{required:true,message:'此项必输',trigger:'blur'}" prop="tableName">
<el-input v-model="dbForm.tableName"></el-input>
</el-form-item>
</el-form>
<el-row slot="footer"> <el-row slot="footer">
<el-button @click="$refs['tableDialog'].close()">关闭</el-button>
<el-button @click="$refs['dbFormDialog'].close()">关闭</el-button>
<el-button type="primary" @click="initFormFieldsByTable">确定</el-button> <el-button type="primary" @click="initFormFieldsByTable">确定</el-button>
</el-row> </el-row>
</mdp-dialog> </mdp-dialog>
<mdp-dialog ref="aiTableDialog">
<el-row>
请从Ai输出的表格配置信息中复制黏贴到此:
<el-input rows="20" type="textarea" v-model="aiTableInfosStr"></el-input>
</el-row>
<mdp-dialog ref="aiFormDialog">
<el-form :model="aiForm" ref="aiFormRef">
<el-form-item label="列信息" :rules="{required:true,message:'此项必输',trigger:'blur'}" prop="columnListStr">
请从Ai输出的表格配置信息中复制黏贴到此
<el-input rows="20" type="textarea" v-model="aiForm.columnListStr"></el-input>
</el-form-item>
</el-form>
<el-row slot="footer"> <el-row slot="footer">
<el-button @click="$refs['aiTableDialog'].close()">关闭</el-button>
<el-button @click="$refs['aiFormDialog'].close()">关闭</el-button>
<el-button type="primary" @click="initFormFieldsByAiTable">确定</el-button> <el-button type="primary" @click="initFormFieldsByAiTable">确定</el-button>
</el-row> </el-row>
</mdp-dialog> </mdp-dialog>
<mdp-dialog ref="apiDialog">
<el-form :model="apiParams" >
<mdp-dialog ref="apiFormDialog">
<el-form :model="apiForm" ref="apiFormRef">
<el-form-item label="api地址" prop="url" :rules="{required:true,message:'此项必输',trigger:'blur'}"> <el-form-item label="api地址" prop="url" :rules="{required:true,message:'此项必输',trigger:'blur'}">
<el-input v-model="apiParams.url" placeholder="如 http://127.0.0.1:8015/sys/user/list?userid=xxxx"></el-input>
<el-input v-model="apiForm.url" placeholder="如 http://127.0.0.1:8015/sys/user/list?userid=xxxx"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="请求方式" prop="method" :rules="{required:true,message:'此项必输',trigger:'blur'}"> <el-form-item label="请求方式" prop="method" :rules="{required:true,message:'此项必输',trigger:'blur'}">
<mdp-select item-code="request_method" v-model="apiParams.method" placeholder="如 get/post/"></mdp-select>
<mdp-select item-code="request_method" v-model="apiForm.method" placeholder="如 get/post/"></mdp-select>
</el-form-item> </el-form-item>
<el-form-item label="请求参数" prop="params"> <el-form-item label="请求参数" prop="params">
<el-input type="textarea" :rows="10" v-model="apiParams.params" placeholder='如 { userid:"xxxx" }'></el-input>
<el-input type="textarea" :rows="10" v-model="apiForm.params" placeholder='如 { userid:"xxxx" }'></el-input>
</el-form-item> </el-form-item>
<el-form-item label="授权信息" prop="header"> <el-form-item label="授权信息" prop="header">
<el-checkbox v-model="apiParams.useMyLoginToken">使用本系统登陆的token</el-checkbox>
<el-input v-if="apiParams.useMyLoginToken==false" type="textarea" :rows="10" v-model="apiParams.header" placeholder='格式 如 {Authorization:"Bearer jwtTokenXXadkfdfdadfd"}'></el-input>
<el-checkbox v-model="apiForm.useMyLoginToken">使用本系统登陆的token</el-checkbox>
<el-input v-if="apiForm.useMyLoginToken==false" type="textarea" :rows="10" v-model="apiForm.header" placeholder='格式 如 {Authorization:"Bearer jwtTokenXXadkfdfdadfd"}'></el-input>
</el-form-item> </el-form-item>
<el-form-item label="取数函数JS" prop="parseDataFunc"> <el-form-item label="取数函数JS" prop="parseDataFunc">
<el-input type="textarea" :rows="10" v-model="apiParams.parseDataFunc" placeholder="请求结果,默认取res.data.data的数据,如果返回结构不一致,请在此用js写取值逻辑"></el-input>
<el-input type="textarea" :rows="10" v-model="apiForm.parseDataFunc" placeholder="请求结果,默认取res.data.data的数据,如果返回结构不一致,请在此用js写取值逻辑"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="例子"> <el-form-item label="例子">
@ -112,7 +118,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row slot="footer"> <el-row slot="footer">
<el-button @click="$refs['apiDialog'].close()">关闭</el-button>
<el-button @click="$refs['apiFormDialog'].close()">关闭</el-button>
<el-button type="primary" @click="initFormFieldsByApi">确定</el-button> <el-button type="primary" @click="initFormFieldsByApi">确定</el-button>
</el-row> </el-row>
</mdp-dialog> </mdp-dialog>
@ -189,9 +195,14 @@ export default {
yesOrNo: [{id:'0',name:'否'},{id:'1',name:'是'}], yesOrNo: [{id:'0',name:'否'},{id:'1',name:'是'}],
} }
return { return {
tableName:'',
aiTableInfosStr:'',
apiParams:{
dbForm:{
owner:'',//
tableName:'',
},
aiForm:{
columnListStr:'',//
},
apiForm:{
url:'', url:'',
method:'GET', method:'GET',
params:'', params:'',
@ -365,44 +376,65 @@ export default {
return true; return true;
}, },
initFormFieldsByTable(){ initFormFieldsByTable(){
listTableColumn({owner:'adm',tableName:this.tableName}).then(res=>{
var tips = res.data.tips
if(tips.isOk){
var columns=res.data.data
columns.forEach(c=>{
var field=this.transColumnToField(c)
if(field){
this.selectedFields.push(field)
this.$refs['dbFormRef'].validate(valid=>{
if(valid==false){
this.$notify.error('表单验证不通过')
return;
}else{
var params={owner:this.dbForm.owner,tableName:this.dbForm.tableName}
listTableColumn(params).then(res=>{
var tips = res.data.tips
if(tips.isOk){
var columns=res.data.data
columns.forEach(c=>{
var field=this.transColumnToField(c)
if(field){
this.selectedFields.push(field)
}
})
}else{
this.$notify.error(tips.msg)
} }
}) })
}else{
this.$notify.error(tips.msg)
} }
}) })
}, },
initFormFieldsByAiTable(){ initFormFieldsByAiTable(){
var aiTableInfosStr=this.aiTableInfosStr
var datas=aiTableInfosStr.split("\n")
var columns=datas[0].split("\t")
var columnIdIdx=columns.findIndex(k=>k.indexOf('列名')>=0)
var columnTypeIdx=columns.findIndex(k=>k.indexOf('数据类型')>=0)
var columnRemarkIdx=columns.findIndex(k=>k.indexOf('描述')>=0)
var columList=datas.slice(1);
debugger
columList.forEach(k=>{
var c=k.split("\t")
var field={formId:'formId',id:c[columnIdIdx],showStyle:'origin',fieldId:c[columnIdIdx],fieldIdCamel:c[columnIdIdx],fieldTitle:c[columnRemarkIdx],isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''}
var noSelectFieldId=this.fieldIds.find(i=>{
return !this.selectedFields.some(k=>k.id==i.id);
})
if(!noSelectFieldId){
return null;
this.$refs['aiFormRef'].validate(valid=>{
if(valid==false){
this.$notify.error('表单验证不通过')
return;
}else{
var columnListStr=this.aiForm.columnListStr
var datas=columnListStr.split("\n")
var columns=datas[0].split("\t")
var columnIdIdx=columns.findIndex(k=>k.indexOf('列名')>=0)
var columnTypeIdx=columns.findIndex(k=>k.indexOf('数据类型')>=0)
var columnRemarkIdx=columns.findIndex(k=>k.indexOf('描述')>=0)
var columList=datas.slice(1);
columList.forEach(k=>{
var c=k.split("\t")
var field={formId:'formId',id:c[columnIdIdx],showStyle:'origin',fieldId:c[columnIdIdx],fieldIdCamel:c[columnIdIdx],fieldTitle:c[columnRemarkIdx],isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''}
var noSelectFieldId=this.fieldIds.find(i=>{
return !this.selectedFields.some(k=>k.id==i.id);
})
if(!noSelectFieldId){
return null;
}
field.id=noSelectFieldId.id
this.selectedFields.push(field)
})
} }
field.id=noSelectFieldId.id
this.selectedFields.push(field)
}) })
}, },
initFormFieldsByItemCode(item){ initFormFieldsByItemCode(item){
if(!item || !item.itemCode){
this.$notify.error('请选择数据字典')
return;
}
this.$mdp.ajaxGetDictOptions(item.itemCode,{}).then(res=>{ this.$mdp.ajaxGetDictOptions(item.itemCode,{}).then(res=>{
var tips = res.tips var tips = res.tips
if(tips.isOk){ if(tips.isOk){
@ -419,40 +451,49 @@ export default {
}) })
}, },
initFormFieldsByApi(){ initFormFieldsByApi(){
var axiosParams=this.apiParamsToAxiosParams(this.apiParams);
var axiosFun=axios
if(this.apiParams.useMyLoginToken==false){
var axiosFun=axiosNoAuth;
}
axiosFun(axiosParams).then(res=>{
var datas=null;
if(this.apiParams.parseDataFunc){
var func=new Function('res',apiParams.parseDataFunc)
datas=func(res)
this.$refs['apiFormRef'].validate(valid=>{
if(valid==false){
this.$notify.error('表单验证不通过')
return;
}else{ }else{
datas=res.data.data;
}
if(datas && datas.length>0){
Object.keys(datas[0]).forEach(k=>{
var field={formId:'formId',id:k,showStyle:'origin',fieldId:k,fieldIdCamel:k,fieldTitle:k,isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入'+k,isRequired:'0',remark:'',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''}
var noSelectFieldId=this.fieldIds.find(i=>{
return !this.selectedFields.some(k=>k.id==i.id);
})
if(!noSelectFieldId){
return;
var axiosParams=this.apiFormToAxiosParams(this.apiForm);
var axiosFun=axios
if(this.apiForm.useMyLoginToken==false){
var axiosFun=axiosNoAuth;
}
axiosFun(axiosParams).then(res=>{
var datas=null;
if(this.apiForm.parseDataFunc){
var func=new Function('res',apiForm.parseDataFunc)
datas=func(res)
}else{
datas=res.data.data;
} }
field.id=noSelectFieldId.id
this.selectedFields.push(field)
})
this.$notify({position:'bottom-left',showClose:true,message:'成功',type: 'success'})
}else{
this.$notify({position:'bottom-left',showClose:true,message:'失败',type: 'error'})
if(datas && datas.length>0){
Object.keys(datas[0]).forEach(k=>{
var field={formId:'formId',id:k,showStyle:'origin',fieldId:k,fieldIdCamel:k,fieldTitle:k,isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入'+k,isRequired:'0',remark:'',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''}
var noSelectFieldId=this.fieldIds.find(i=>{
return !this.selectedFields.some(k=>k.id==i.id);
})
if(!noSelectFieldId){
return;
}
field.id=noSelectFieldId.id
this.selectedFields.push(field)
})
this.$notify({position:'bottom-left',showClose:true,message:'成功',type: 'success'})
}else{
this.$notify({position:'bottom-left',showClose:true,message:'失败',type: 'error'})
}
})
} }
}) })
}, },
transColumnToField(o){ transColumnToField(o){
var field={formId:'formId',id:o.columnName,showStyle:'origin',fieldId:o.columnName,fieldIdCamel:o.camelsColumnName,fieldTitle:o.chinaName,isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入'+o.name,isRequired:'0',remark:'',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''} var field={formId:'formId',id:o.columnName,showStyle:'origin',fieldId:o.columnName,fieldIdCamel:o.camelsColumnName,fieldTitle:o.chinaName,isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入'+o.name,isRequired:'0',remark:'',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''}
@ -478,19 +519,19 @@ export default {
return field; return field;
}, },
apiParamsToAxiosParams(apiParams,env){
var axiosObj={url:apiParams.url,method:apiParams.method,headers:{}}
apiFormToAxiosParams(apiForm,env){
var axiosObj={url:apiForm.url,method:apiForm.method,headers:{}}
// //
if(apiParams.params && apiParams.params.indexOf('{')>=0){
axiosObj.params=JSON.parse(apiParams.params)
if(apiForm.params && apiForm.params.indexOf('{')>=0){
axiosObj.params=JSON.parse(apiForm.params)
} }
//header //header
if(apiParams.useMyLoginToken==true){
if(apiForm.useMyLoginToken==true){
axiosObj.headers['Authorization'] = 'Bearer '+getToken() axiosObj.headers['Authorization'] = 'Bearer '+getToken()
}else if(apiParams.headers && apiParams.headers.indexOf("{")>=0){
axiosObj.headers=JSON.parse(apiParams.headers)
}else if(apiForm.headers && apiForm.headers.indexOf("{")>=0){
axiosObj.headers=JSON.parse(apiForm.headers)
}else { }else {
axiosObj.headers={} axiosObj.headers={}
} }

Loading…
Cancel
Save