| | |
| | | style="height: 115vh; margin-top: -14vh; overflow-y: hidden"> |
| | | <div style="width: 100%; overflow-y: auto; height: 70vh"> |
| | | <el-row> |
| | | <avue-form ref="form" :option="formOption" v-model="form" class="referTypeForm"> |
| | | <avue-form :ref="formRefs[0]" :option="formOption" v-model="form" class="referTypeForm"> |
| | | <template #referTypeName="{disabled,size}"> |
| | | <el-input :disabled="disabled" |
| | | :size="size" |
| | |
| | | </template> |
| | | </avue-form> |
| | | </el-row> |
| | | <el-row v-show="form.type=='default' || form.type=='grid'"> |
| | | <avue-crud |
| | | ref="crudAttr" |
| | | class="crud-attr" |
| | | :option="attrOption" |
| | | @cell-click="clickAttrEdit" |
| | | :data="attrData"> |
| | | <!-- 表格内操作按钮 --> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <el-button type="text" |
| | | size="small" |
| | | icon="el-icon-search" |
| | | plain |
| | | @click="scope.row.isquery=!scope.row.isquery"> |
| | | {{scope.row.isquery ? "取消快速查询":"快速查询"}} |
| | | </el-button> |
| | | <el-button type="text" |
| | | size="small" |
| | | icon="el-icon-minus" |
| | | plain |
| | | @click="removeCurrentRow(scope.row,'removeAttr')">移除 |
| | | </el-button> |
| | | </template> |
| | | <!-- 表格左上方按钮区域 --> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <el-button type="primary" |
| | | size="small" |
| | | icon="el-icon-plus" |
| | | @click="openSelectionTable('selectAttr')">选择属性 |
| | | </el-button> |
| | | <div class="tag-group" style="display: inline"> |
| | | <el-tag |
| | | v-for="item in attrData" |
| | | v-show="item.isquery && item.title!=''" |
| | | style="margin-left: 3px" |
| | | :key="item.title" |
| | | type="info" |
| | | size="small" |
| | | effect="dark"> |
| | | {{ item.title }} |
| | | </el-tag> |
| | | </div> |
| | | </template> |
| | | </avue-crud> |
| | | </el-row> |
| | | <el-row style="margin-top: 10px"> |
| | | <avue-crud |
| | | ref="crudAddCondition" |
| | | :option="addSearchCondtionOption" |
| | | @cell-click="clickAddSearchCondtionEdit" |
| | | :data="addSearchCondtionData"> |
| | | <!-- 表格内操作按钮 --> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <el-button type="text" |
| | | size="small" |
| | | icon="el-icon-minus" |
| | | plain |
| | | @click="removeCurrentRow(scope.row,'removeaddSearchCondtion')">移除 |
| | | </el-button> |
| | | </template> |
| | | <!-- 表格左上方按钮区域 --> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <el-button type="primary" |
| | | size="small" |
| | | icon="el-icon-plus" |
| | | @click="openSelectionTable('addSearchCondition')"> |
| | | 添加查询条件 |
| | | </el-button> |
| | | </template> |
| | | </avue-crud> |
| | | <el-row> |
| | | <el-tabs type="border-card" v-model="activeName"> |
| | | <el-tab-pane name="first" :disabled="isDisabledTabs"> |
| | | <span slot="label"><i class="el-icon-monitor"></i>显示的属性与其他配置</span> |
| | | <el-row> |
| | | <avue-form :ref="formRefs[1]" :option="formOtherOption" v-model="form" class="referTypeForm"> |
| | | <template #sortField="{disabled,size}"> |
| | | <el-input :disabled="disabled" |
| | | :size="size" |
| | | v-model="form.sortField" |
| | | ref="sortField" |
| | | placeholder="请选择 排序字段" |
| | | prefix-icon="el-icon-search" |
| | | readonly="true" |
| | | @focus="openSelectionTable('sortField')"> |
| | | <i slot="suffix" class="el-icon-circle-close" @click="clearSelectionTable('sortField')" style="margin-right: 5px;cursor: pointer;"></i> |
| | | </el-input> |
| | | </template> |
| | | </avue-form> |
| | | </el-row> |
| | | <el-row v-show="form.type=='default' || form.type=='grid'"> |
| | | <el-divider content-position="left" style="margin-bottom: -40px;">配置显示的属性</el-divider> |
| | | <avue-crud |
| | | ref="crudAttr" |
| | | class="crud-attr" |
| | | :option="attrOption" |
| | | @cell-click="clickAttrEdit" |
| | | :data="attrData"> |
| | | <!-- 表格内操作按钮 --> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <el-button type="text" |
| | | size="small" |
| | | icon="el-icon-search" |
| | | plain |
| | | @click="scope.row.isquery=!scope.row.isquery"> |
| | | {{scope.row.isquery ? "取消快速查询":"快速查询"}} |
| | | </el-button> |
| | | <el-button type="text" |
| | | size="small" |
| | | icon="el-icon-minus" |
| | | plain |
| | | @click="removeCurrentRow(scope.row,'removeAttr')">移除 |
| | | </el-button> |
| | | </template> |
| | | <!-- 表格左上方按钮区域 --> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <el-button type="primary" |
| | | size="small" |
| | | icon="el-icon-plus" |
| | | @click="openSelectionTable('selectAttr')">选择属性 |
| | | </el-button> |
| | | <div class="tag-group" style="display: inline"> |
| | | <el-tag |
| | | v-for="item in attrData" |
| | | v-show="item.isquery && item.title!=''" |
| | | style="margin-left: 3px" |
| | | :key="item.title" |
| | | type="info" |
| | | size="small" |
| | | effect="dark"> |
| | | {{ item.title }} |
| | | </el-tag> |
| | | </div> |
| | | </template> |
| | | </avue-crud> |
| | | </el-row> |
| | | </el-tab-pane> |
| | | <el-tab-pane name="second"> |
| | | <span slot="label"><i class="el-icon-search"></i>查询条件添加</span> |
| | | <avue-crud |
| | | ref="crudAddCondition" |
| | | :option="addSearchCondtionOption" |
| | | @cell-click="clickAddSearchCondtionEdit" |
| | | :data="addSearchCondtionData"> |
| | | <!-- 表格内操作按钮 --> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <el-button type="text" |
| | | size="small" |
| | | icon="el-icon-minus" |
| | | plain |
| | | @click="removeCurrentRow(scope.row,'removeaddSearchCondtion')">移除 |
| | | </el-button> |
| | | </template> |
| | | <!-- 表格左上方按钮区域 --> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <el-button type="primary" |
| | | size="small" |
| | | icon="el-icon-plus" |
| | | @click="openSelectionTable('addSearchCondition')"> |
| | | 添加查询条件 |
| | | </el-button> |
| | | </template> |
| | | </avue-crud> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-row> |
| | | </div> |
| | | |
| | |
| | | let element = ''; |
| | | return { |
| | | |
| | | activeName: 'first', //当前活动的tabs |
| | | labelWidth: '150', // 标题宽度 |
| | | isShowReferConfigForm: false, // 第一层对话框显示隐藏控制 |
| | | referTypeIsReadOnly: false, |
| | |
| | | columnBtn: false, |
| | | dialogClickModal: false, |
| | | highlightCurrentRow: true, |
| | | indexFixed: false, |
| | | menuFixed: false, |
| | | column: [ |
| | | { |
| | | label: "列字段(*)", |
| | |
| | | } |
| | | ] |
| | | }, |
| | | formRefs: ['form','otherForm'], |
| | | |
| | | // tabs控制 |
| | | isDisabledTabs: false, |
| | | activeName: 'first', //当前活动的tabs |
| | | |
| | | |
| | | //为【参照的业务类型】选取值对话框 |
| | | selectionReferBtmTypeOption: { |
| | |
| | | submitBtn: false, |
| | | emptyBtn: false, |
| | | labelWidth: '145', //默认标签宽度 |
| | | // 基础表单信息展示区域 |
| | | column: [ |
| | | { |
| | | label: '参照的业务类型', |
| | | prop: 'referTypeName', |
| | | span: 7, |
| | | disabled: this.referTypeIsReadOnly, |
| | | clearable: !this.referTypeIsReadOnly, |
| | | tip: '参照数据查询的业务类型。', |
| | | tipPlacement: 'right', |
| | | rules: [{ |
| | | required: true, |
| | | message: "(参照的业务类型)必填项不能为空", |
| | | trigger: ["blur","change"], |
| | | }], |
| | | },{ |
| | | label: '显示的属性', |
| | | prop: 'textField', |
| | | tip: '选择数据后,显示到字段上的信息所属的属性,一般都是name,如果是多个属性使用逗号分割,如id,name。', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | value: 'name', |
| | | rules: [{ |
| | | required: true, |
| | | message: "(显示的属性)必填项不能为空", |
| | | trigger: "blur", |
| | | }], |
| | | },{ |
| | | label: '存储值的属性', |
| | | prop: 'valueField', |
| | | tip: '选择数据后,保存到数据库里的属性,一般都是oid或者id,如果是多个属性使用逗号分割,如oid ,id', |
| | | value: 'oid', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | rules: [{ |
| | | required: true, |
| | | message: "(存储值的属性)必填项不能为空", |
| | | trigger: "blur", |
| | | }], |
| | | },{ |
| | | label: '参照窗口类型', |
| | | prop: 'type', |
| | | tip: 'default:默认的参照窗口样式; stand:UI上下文配置的方式; classify:分类+档案的显示; 自定义的参照直接写js的组件路径;tree:树形展示;grid:列表展示', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | value: 'default', |
| | | type: 'select', |
| | | dicData: [{ |
| | | label: '默认样式', |
| | | value: 'default' |
| | | }, { |
| | | label: '平台配置', |
| | | value: 'stand' |
| | | }, { |
| | | label: '树形', |
| | | value: 'tree' |
| | | }, { |
| | | label: '列表', |
| | | value: 'grid' |
| | | }, { |
| | | label: '部门树', |
| | | value: 'refer/OrgDepartmentRefer' |
| | | }, { |
| | | label: '部门列表', |
| | | value: 'refer/OrgDepartmentGridRefers' |
| | | }, { |
| | | label: '用户', |
| | | value: 'refer/SmUserRefer' |
| | | }, { |
| | | label: '用户列表', |
| | | value: 'refer/SmUserGridRefer' |
| | | }, { |
| | | label: '角色列表', |
| | | value: 'refer/SmRoleRefer' |
| | | }, { |
| | | label: '职务', |
| | | value: 'refer/OrgDutyRefer' |
| | | }, { |
| | | label: '工种', |
| | | value: 'refer/SmWorkTypeRefer' |
| | | }, { |
| | | label: '流程模板', |
| | | value: 'refer/WfProcessTemplateRefer' |
| | | }], |
| | | rules: [{ |
| | | required: true, |
| | | message: "(参照窗口类型)必填项不能为空", |
| | | trigger: "blur", |
| | | }], |
| | | change: ({ value, column }) => { |
| | | // 复原表单,因为其他分组中如果存在值,在切换时,会保留输入的字段值所以需要还原 |
| | | let oldForm = this.form; |
| | | this.form = {}; // 表单对象赋空 |
| | | this.form.referType = oldForm.referType |
| | | this.form.textField = oldForm.textField |
| | | this.form.valueField = oldForm.valueField |
| | | this.form.type = oldForm.type //参照窗口类型 |
| | | this.form.url = oldForm.url |
| | | this.form.backPath = oldForm.backPath |
| | | this.form.method = oldForm.method |
| | | this.form.height = oldForm.height |
| | | this.form.useFormKey = oldForm.useFormKey |
| | | this.form.paramForFormKey = oldForm.paramForFormKey |
| | | this.form.isMuti = oldForm.isMuti |
| | | this.form.mapFields = oldForm.mapFields |
| | | let addFrom = {}; //根据类型需要添加的不同属性 |
| | | if(value == 'stand'){ |
| | | addFrom = { |
| | | referContent: '', |
| | | displayTable: '', |
| | | } |
| | | } else if(value == 'default' || value == 'grid'){ |
| | | addFrom = { |
| | | limit: '15', |
| | | sortField: '', |
| | | sortType: 'asc', |
| | | } |
| | | } else if(value == 'tree'){ |
| | | addFrom = { |
| | | parentFieldName: '', |
| | | parentUsedField: 'oid', |
| | | parentValue: '', |
| | | loadType: 'all', |
| | | onlyLeaf: false, |
| | | sortField: '', |
| | | sortType: 'asc', |
| | | } |
| | | group: [ |
| | | { |
| | | // 基础表单信息展示区域 |
| | | //display: this.form.type=='default'||this.form.type=='grid', |
| | | icon: 'el-icon-info', |
| | | label: '必填的参照配置', |
| | | collapse: true, |
| | | labelWidth: '110', |
| | | prop: 'groupDdefaultOrGrid', |
| | | column: [ |
| | | { |
| | | label: '参照的业务类型', |
| | | prop: 'referTypeName', |
| | | span: 6, |
| | | labelWidth: '130', |
| | | disabled: this.referTypeIsReadOnly, |
| | | clearable: !this.referTypeIsReadOnly, |
| | | tip: '参照数据查询的业务类型。', |
| | | tipPlacement: 'bottom', |
| | | rules: [{ |
| | | required: true, |
| | | message: "(参照的业务类型)必填项不能为空", |
| | | trigger: ["blur","change"], |
| | | }], |
| | | },{ |
| | | label: '显示的属性', |
| | | prop: 'textField', |
| | | tip: '选择数据后,显示到字段上的信息所属的属性,一般都是name,如果是多个属性使用逗号分割,如id,name。', |
| | | tipPlacement: 'bottom', |
| | | span: 6, |
| | | value: 'name', |
| | | rules: [{ |
| | | required: true, |
| | | message: "(显示的属性)必填项不能为空", |
| | | trigger: "blur", |
| | | }], |
| | | },{ |
| | | label: '存储值的属性', |
| | | prop: 'valueField', |
| | | tip: '选择数据后,保存到数据库里的属性,一般都是oid或者id,如果是多个属性使用逗号分割,如oid ,id', |
| | | value: 'oid', |
| | | tipPlacement: 'bottom', |
| | | span: 6, |
| | | rules: [{ |
| | | required: true, |
| | | message: "(存储值的属性)必填项不能为空", |
| | | trigger: "blur", |
| | | }], |
| | | },{ |
| | | label: '参照窗口类型', |
| | | prop: 'type', |
| | | tip: 'default:默认的参照窗口样式; stand:UI上下文配置的方式; classify:分类+档案的显示; 自定义的参照直接写js的组件路径;tree:树形展示;grid:列表展示', |
| | | tipPlacement: 'bottom', |
| | | span: 6, |
| | | value: 'default', |
| | | type: 'select', |
| | | dicData: [{ |
| | | label: '默认样式', |
| | | value: 'default' |
| | | }, { |
| | | label: '平台配置', |
| | | value: 'stand' |
| | | }, { |
| | | label: '树形', |
| | | value: 'tree' |
| | | }, { |
| | | label: '列表', |
| | | value: 'grid' |
| | | }, { |
| | | label: '部门树', |
| | | value: 'refer/OrgDepartmentRefer' |
| | | }, { |
| | | label: '部门列表', |
| | | value: 'refer/OrgDepartmentGridRefers' |
| | | }, { |
| | | label: '用户', |
| | | value: 'refer/SmUserRefer' |
| | | }, { |
| | | label: '用户列表', |
| | | value: 'refer/SmUserGridRefer' |
| | | }, { |
| | | label: '角色列表', |
| | | value: 'refer/SmRoleRefer' |
| | | }, { |
| | | label: '职务', |
| | | value: 'refer/OrgDutyRefer' |
| | | }, { |
| | | label: '工种', |
| | | value: 'refer/SmWorkTypeRefer' |
| | | }, { |
| | | label: '流程模板', |
| | | value: 'refer/WfProcessTemplateRefer' |
| | | }], |
| | | rules: [{ |
| | | required: true, |
| | | message: "(参照窗口类型)必填项不能为空", |
| | | trigger: "blur", |
| | | }], |
| | | change: ({ value, column }) => { |
| | | // 复原表单,因为其他分组中如果存在值,在切换时,会保留输入的字段值所以需要还原 |
| | | let oldForm = this.form; |
| | | this.form = {}; // 表单对象赋空 |
| | | this.form.referType = oldForm.referType |
| | | this.form.textField = oldForm.textField |
| | | this.form.valueField = oldForm.valueField |
| | | this.form.type = oldForm.type //参照窗口类型 |
| | | this.form.url = oldForm.url |
| | | this.form.backPath = oldForm.backPath |
| | | this.form.method = oldForm.method |
| | | this.form.height = oldForm.height |
| | | this.form.useFormKey = oldForm.useFormKey |
| | | this.form.paramForFormKey = oldForm.paramForFormKey |
| | | this.form.isMuti = oldForm.isMuti |
| | | this.form.mapFields = oldForm.mapFields |
| | | let addFrom = {}; //根据类型需要添加的不同属性 |
| | | this.activeName = 'first'; |
| | | if(value == 'stand'){ |
| | | addFrom = { |
| | | referContent: '', |
| | | displayTable: '', |
| | | }; |
| | | this.isDisabledTabs = false; |
| | | } else if(value == 'default' || value == 'grid'){ |
| | | addFrom = { |
| | | limit: '15', |
| | | sortField: '', |
| | | sortType: 'asc', |
| | | }; |
| | | this.isDisabledTabs = false; |
| | | } else if(value == 'tree'){ |
| | | addFrom = { |
| | | parentFieldName: '', |
| | | parentUsedField: 'oid', |
| | | parentValue: '', |
| | | loadType: 'all', |
| | | onlyLeaf: false, |
| | | sortField: '', |
| | | sortType: 'asc', |
| | | }; |
| | | console.log('tree'); |
| | | this.isDisabledTabs = false; |
| | | }else { |
| | | this.isDisabledTabs = true; |
| | | this.activeName = 'second'; |
| | | } |
| | | // 合并两个表单 |
| | | this.form = Object.assign(addFrom,this.form); |
| | | //console.log(this.form); |
| | | }, |
| | | } |
| | | // 合并两个表单 |
| | | this.form = Object.assign(addFrom,this.form); |
| | | //console.log(this.form); |
| | | }, |
| | | },{ |
| | | label: '自定义的后台路径', |
| | | prop: 'url', |
| | | tip: '通常为空;如果是列表,后台必须返回DataGrid,如果是树,后台必须返回List<Tree>', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '服务的地址', |
| | | prop: 'backPath', |
| | | tip: '通常为空,在支持微服务或者分布式部署的时候才配置', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '请求后台的协议方式', |
| | | prop: 'method', |
| | | tip: 'HTTP的协议方式,支持POST,PUT,GET,一般都是GET', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | value: 'GET', |
| | | type: 'select', |
| | | dicData: [{ |
| | | label:'GET',value: "GET" |
| | | ] |
| | | }, |
| | | { |
| | | //display: this.form.type=='default'||this.form.type=='grid', |
| | | icon: 'el-icon-info', |
| | | label: '页面参数配置', |
| | | collapse: false, |
| | | prop: 'webConfig', |
| | | column: [{ |
| | | label: '窗口显示的高度', |
| | | prop: 'height', |
| | | tip: '默认空着,设置后表示强制显示这样的高度', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | rules:[{ |
| | | validator: validateNumber, |
| | | message: "窗口显示的高度必须为数值类型", |
| | | trigger: "blur", |
| | | }] |
| | | },{ |
| | | label:'PUT',value: "PUT" |
| | | }, |
| | | { |
| | | label:'POST',value: "POST" |
| | | }], |
| | | },{ |
| | | label: '窗口显示的高度', |
| | | prop: 'height', |
| | | tip: '默认空着,设置后表示强制显示这样的高度', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | rules:[{ |
| | | validator: validateNumber, |
| | | message: "窗口显示的高度必须为数值类型", |
| | | trigger: "blur", |
| | | label: '过滤(级联)属性', |
| | | prop: 'useFormKey', |
| | | tip: '获取表单上的其他属性的属性的值来过滤,或者使用某个属性来级联选择', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '过滤属性请求参数', |
| | | prop: 'paramForFormKey', |
| | | tip: '使用过滤属性时,发送给后台的请求参数', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '映射其他属性', |
| | | prop: 'mapFields', |
| | | tip: '选择数据后,将选择的数据拷贝到表单里的其他属性,书写格式为{当前表单上的属性:选择数据里的属性,XXXXx:yyyy}', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '是否开启全局', |
| | | prop: 'isOpenGlobal', |
| | | tip: '开启全局之后对全部参照配置数据进行查询,默认根据租户进行查询。', |
| | | tipPlacement: 'right', |
| | | type: 'switch', |
| | | span: 7, |
| | | },{ |
| | | label: '是否多选', |
| | | type: 'switch', |
| | | prop: 'isMuti', |
| | | value: false, |
| | | span: 7, |
| | | row: true, |
| | | }] |
| | | },{ |
| | | label: '过滤(级联)属性', |
| | | prop: 'useFormKey', |
| | | tip: '获取表单上的其他属性的属性的值来过滤,或者使用某个属性来级联选择', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '过滤属性请求参数', |
| | | prop: 'paramForFormKey', |
| | | tip: '使用过滤属性时,发送给后台的请求参数', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '是否多选', |
| | | type: 'switch', |
| | | prop: 'isMuti', |
| | | value: false, |
| | | span: 7, |
| | | row: true, |
| | | },{ |
| | | label: '映射其他属性', |
| | | prop: 'mapFields', |
| | | tip: '选择数据后,将选择的数据拷贝到表单里的其他属性,书写格式为{当前表单上的属性:选择数据里的属性,XXXXx:yyyy}', |
| | | tipPlacement: 'right', |
| | | span: 18, |
| | | } |
| | | ], |
| | | }, |
| | | { |
| | | //display: this.form.type=='default'||this.form.type=='grid', |
| | | icon: 'el-icon-info', |
| | | label: '后台参数配置', |
| | | collapse: false, |
| | | prop: 'backstageConfig', |
| | | column: [ |
| | | { |
| | | label: '自定义的后台路径', |
| | | prop: 'url', |
| | | tip: '通常为空;如果是列表,后台必须返回DataGrid,如果是树,后台必须返回List<Tree>', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '服务的地址', |
| | | prop: 'backPath', |
| | | tip: '通常为空,在支持微服务或者分布式部署的时候才配置', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | },{ |
| | | label: '请求后台的协议方式', |
| | | prop: 'method', |
| | | tip: 'HTTP的协议方式,支持POST,PUT,GET,一般都是GET', |
| | | tipPlacement: 'right', |
| | | span: 7, |
| | | value: 'GET', |
| | | type: 'select', |
| | | dicData: [{ |
| | | label:'GET',value: "GET" |
| | | },{ |
| | | label:'PUT',value: "PUT" |
| | | }, |
| | | { |
| | | label:'POST',value: "POST" |
| | | }], |
| | | }, |
| | | ] |
| | | }, |
| | | ] |
| | | } |
| | | }, |
| | | formOtherOption(){ |
| | | return { |
| | | // 变动的表单区域 |
| | | submitBtn: false, |
| | | emptyBtn: false, |
| | | labelWidth: '145', //默认标签宽度 |
| | | group: [ |
| | | { |
| | | display: this.form.type=='default'||this.form.type=='grid', |
| | |
| | | }], |
| | | type: 'select', |
| | | },{ |
| | | label: '是否只能选择叶子节点', |
| | | prop: 'onlyLeaf', |
| | | span: 7, |
| | | value: false, |
| | | type: 'switch', |
| | | },{ |
| | | label: '排序字段', |
| | | prop: 'sortField', |
| | | span: 7, |
| | |
| | | }, { |
| | | label: '降序', value: 'desc' |
| | | }], |
| | | }, |
| | | },{ |
| | | label: '是否只能选择叶子节点', |
| | | prop: 'onlyLeaf', |
| | | span: 7, |
| | | value: false, |
| | | type: 'switch', |
| | | } |
| | | ] |
| | | }, |
| | | ] |
| | | ], |
| | | } |
| | | }, |
| | | }, |
| | |
| | | }, |
| | | //上一个页面已经选中参照应用的业务类型的情况,和上一次已经配置过参照配置的情况下进行页面初始化渲染 |
| | | initPageData(val){ |
| | | //console.log(val); |
| | | console.log(val); |
| | | if(func.notEmpty(val.referConfig)){ |
| | | this.form = JSON.parse(val.referConfig); |
| | | //console.log(val); |
| | |
| | | //console.log(localStorage.getItem("userId")); |
| | | }, |
| | | // 选择完参照配置之后点击保存按钮触发 |
| | | selectedListReferConfig(){ |
| | | //表单验证 |
| | | this.$refs.form.validate((valid, done, msg) => { |
| | | if (valid) { |
| | | // 根据类型对form表单中的参数进行过滤,只保留非空且需要的属性 |
| | | let submitForm = this.filterForm(); |
| | | //console.log(submitForm); |
| | | this.$emit('echoReferConfig', submitForm) // 触发update:data将子组件值传递给父组件 |
| | | this.isShowReferConfigForm = false; |
| | | done() |
| | | } else { |
| | | for(let attr in msg) { |
| | | //console.log(msg[attr][0].message); |
| | | this.$message.warning(msg[attr][0].message); |
| | | break; |
| | | } |
| | | return false; |
| | | } |
| | | async selectedListReferConfig(){ |
| | | // 标记所有表单是否通过校验的变量 |
| | | let isValid = true; |
| | | |
| | | // 遍历表单数组,依次对每个表单进行校验 |
| | | await this.formRefs.forEach(ref => { |
| | | this.$refs[ref].validate((valid, done, msg) => { |
| | | if (!valid) { |
| | | for(let attr in msg) { |
| | | this.$message.warning(msg[attr][0].message); |
| | | break; |
| | | } |
| | | isValid = false; |
| | | //console.log(valid); |
| | | } |
| | | done(); |
| | | }) |
| | | }) |
| | | |
| | | // 如果所有表单都校验通过,执行提交操作 |
| | | if (isValid) { |
| | | // 根据类型对form表单中的参数进行过滤,只保留非空且需要的属性 |
| | | let submitForm = this.filterForm(); |
| | | //console.log(submitForm); |
| | | this.$emit('echoReferConfig', submitForm) // 触发update:data将子组件值传递给父组件 |
| | | this.isShowReferConfigForm = false; |
| | | } |
| | | }, |
| | | /** 其实选取属性表格的默认数据不需要加载, |
| | | 但是弹窗打开会有表格错行问题所以需要在这调用doLayout方法*/ |