| | |
| | | :key="item.oid" :icon="item.paramVOS.icon" |
| | | :type="item.paramVOS.buttonType || 'primary'" plain |
| | | size="small" |
| | | @click="buttonClick(item)"> |
| | | @click="buttonClick(item,scope)"> |
| | | {{ item.name }} |
| | | </el-button> |
| | | <dynamic-form :title="formName" :visible.sync="visible"></dynamic-form> |
| | | <!-- <dynamic-form :title="formName" :visible.sync="visible"></dynamic-form>--> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | LocationType: { |
| | | type: String, |
| | | }, |
| | | scope:{ |
| | | type:Object, |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | initvalue: "reviewtype=department", |
| | | location: 'top', |
| | | buttonType: 'primary', |
| | | buttonMethods: 'form' |
| | | buttonMethods: 'add' |
| | | }, |
| | | pkComponent: "D99AD59E-563F-AB7A-F307-794B929114CD", |
| | | pkParentOid: "", |
| | |
| | | location: 'menu', |
| | | buttonType: 'text', |
| | | icon: "el-icon-edit", |
| | | buttonMethods: 'form' |
| | | buttonMethods: 'edit' |
| | | }, |
| | | pkComponent: "D99AD59E-563F-AB7A-F307-794B929114CD", |
| | | pkParentOid: "", |
| | |
| | | }, |
| | | methods: { |
| | | buttonClick(item) { |
| | | this.$emit('buttonClick', item.id) |
| | | |
| | | this.formName = item.name; |
| | | if (item.paramVOS.buttonMethods === 'form') { |
| | | this.visible = true; |
| | | }else if(item.paramVOS.buttonMethods === 'delete'){ |
| | | this.$message.success('删除成功!') |
| | | } |
| | | this.$emit('buttonClick',this.scope,item) |
| | | } |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <basic-container> |
| | | <el-dialog v-if="dialogFormVisible" :title="title" :visible.sync="dialogFormVisible" append-to-body> |
| | | <el-dialog v-if="dialogFormVisible" :title="title" :visible.sync="dialogFormVisible" @close="closeHandler" append-to-body> |
| | | <avue-form v-model="form" :option="option" @submit="submitHandler" @reset-change="changeHandler"></avue-form> |
| | | </el-dialog> |
| | | </basic-container> |
| | |
| | | }, |
| | | title: { |
| | | type: String |
| | | } |
| | | }, |
| | | formList:{ |
| | | type:Array |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | form: {}, |
| | | formList: [ |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "3-15-test", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "name", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: true, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: '$', |
| | | text: "名称", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "code", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "编码", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: "EnumReviewType", |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "department", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "reviewtype", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "类型", |
| | | tooltips: null, |
| | | type: "combox", |
| | | unique: false, |
| | | verify: "", |
| | | dicData: [{ |
| | | label: '测试1', |
| | | value: 'department' |
| | | }, { |
| | | label: '测试2', |
| | | value: 'departments' |
| | | }] |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "creator", |
| | | hidden: true, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: true, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "创建人", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "yyyy-MM-dd HH:mm:ss", |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "createtime", |
| | | hidden: true, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "创建时间", |
| | | tooltips: null, |
| | | type: "datetime", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "content", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "备注", |
| | | tooltips: null, |
| | | type: "textarea", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | }, |
| | | option() { |
| | | return { |
| | | column: this.formColumn |
| | | column: this.formColumn(this.formList) |
| | | } |
| | | }, |
| | | formColumn() { |
| | | return this.formList.map(item => { |
| | | }, |
| | | methods:{ |
| | | //表单提交 |
| | | submitHandler(form,done){ |
| | | console.log(form) |
| | | done() |
| | | }, |
| | | changeHandler(){ |
| | | this.form = {}; |
| | | // this.clearValidate() 清空校验 |
| | | // this.resetFields() |
| | | }, |
| | | formColumn(formList) { |
| | | return formList.map(item => { |
| | | const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type; |
| | | |
| | | return { |
| | |
| | | disabled: item.disabled, |
| | | labelSuffix: item.suffix, |
| | | suffixIcon: item.prefix, |
| | | placeholder:item.placeholder, |
| | | clearable:item.clearable, |
| | | rules: [{ |
| | | required: item.required, |
| | | message: `请输入${item.text}!`, |
| | |
| | | }] |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | methods:{ |
| | | //表单提交 |
| | | submitHandler(form,done){ |
| | | console.log(form) |
| | | done() |
| | | }, |
| | | changeHandler(){ |
| | | closeHandler(){ |
| | | this.form = {}; |
| | | // this.clearValidate() 清空校验 |
| | | // this.resetFields() |
| | | }, |
| | | } |
| | | } |
| | |
| | | |
| | | <!--menu区域按钮--> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <dynamic-button LocationType="menu" type="table" @buttonClick="buttonClick"></dynamic-button> |
| | | <dynamic-button :scope="scope" LocationType="menu" type="table" @buttonClick="buttonClick"></dynamic-button> |
| | | </template> |
| | | </avue-crud> |
| | | <!-- 表格内按钮操作对话框表单 --> |
| | | <!-- <dynamic-form :visible.sync="visible" style="display: none"></dynamic-form>--> |
| | | <dynamic-form ref="dynamicForm" :formList="formList" :title="formName" :visible.sync="visible" |
| | | style="display: none"></dynamic-form> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "dynamic-table", |
| | | props:{ |
| | | componentVO:{ |
| | | type:Object, |
| | | props: { |
| | | componentVO: { |
| | | type: Object, |
| | | default: {} |
| | | }, |
| | | inDialog: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | areasName:{ |
| | | type:String, |
| | | default:''//westArea导航区 |
| | | areasName: { |
| | | type: String, |
| | | default: ''//westArea导航区 |
| | | }, |
| | | sourceData:{ |
| | | sourceData: { |
| | | //菜单源数据或者弹窗时按钮所属区域的上一区域选中数据 |
| | | type:Object, |
| | | type: Object, |
| | | default: {} |
| | | }, |
| | | paramVOS:{ |
| | | type:Object, |
| | | paramVOS: { |
| | | type: Object, |
| | | default: {} |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | form: {}, |
| | | formName: '', |
| | | loading: false, |
| | | visible:false, |
| | | visible: false, |
| | | page: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 5, |
| | | }, |
| | | //表格头 |
| | | tableHeadList: [ |
| | | { |
| | | align: "left", |
| | |
| | | width: 160 |
| | | } |
| | | ], |
| | | //表格数据 |
| | | tableList: [ |
| | | { |
| | | code: "20220102", |
| | |
| | | isfirstr: "1", |
| | | ts: "2022-02-18 14:35:53.177" |
| | | }, |
| | | ], |
| | | // 表单数据 |
| | | formList: [ |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "name", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: true, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: '$', |
| | | text: "名称", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "code", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "编码", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: "EnumReviewType", |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "department", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "reviewtype", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "类型", |
| | | tooltips: null, |
| | | type: "combox", |
| | | unique: false, |
| | | verify: "", |
| | | dicData: [{ |
| | | label: '测试1', |
| | | value: 'department' |
| | | }, { |
| | | label: '测试2', |
| | | value: 'departments' |
| | | }] |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "creator", |
| | | hidden: true, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: true, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "创建人", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "yyyy-MM-dd HH:mm:ss", |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "createtime", |
| | | hidden: true, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "创建时间", |
| | | tooltips: null, |
| | | type: "datetime", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "content", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "备注", |
| | | tooltips: null, |
| | | type: "textarea", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | ] |
| | | } |
| | | }, |
| | |
| | | editBtn: false, |
| | | delBtn: false, |
| | | height: 'auto', |
| | | // indexFixed:false, |
| | | // menuFixed:false, |
| | | indexFixed: false, |
| | | menuFixed: false, |
| | | column: this.updatedColumns, |
| | | }; |
| | | }, |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | buttonClick(id) { |
| | | console.log(id) |
| | | this.visible = true; |
| | | buttonClick(scope, item) { |
| | | this.formName = item.name; |
| | | |
| | | function handleAdd() { |
| | | this.visible = true; |
| | | } |
| | | |
| | | function handleEdit() { |
| | | this.visible = true; |
| | | this.$refs.dynamicForm.form = scope.row; |
| | | } |
| | | |
| | | function handleDelete() { |
| | | this.$message.success('删除成功!'); |
| | | } |
| | | |
| | | const methodHandlers = { |
| | | add: handleAdd.bind(this), |
| | | edit: handleEdit.bind(this), |
| | | delete: handleDelete.bind(this), |
| | | }; |
| | | |
| | | const method = item.paramVOS.buttonMethods; |
| | | const handler = methodHandlers[method]; |
| | | if (handler) { |
| | | handler(); |
| | | } else { |
| | | this.$message.error('请重新配置按钮!') |
| | | } |
| | | } |
| | | } |
| | | } |