123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- <template>
- <div class="form" >
- <by-tool :propConfig="toolConfig" @onAdd="onAdd">
- <template v-slot:tool-right><div style="width: 120px;">右边</div></template>
- </by-tool>
- <by-form :propConfig="config" ref="form">
- <template v-slot:slotField='{ value }'>这是插槽:{{ value.name }}</template>
- </by-form>
- <el-button type="primary" @click="getFormData">获取数据</el-button>
- <el-button type="primary" @click="getFormVali">获取表单验证</el-button>
- <el-button type="primary" @click="setFormData">设置数据</el-button>
- <el-button type="primary" @click="changeType">转换表单形式</el-button>
- <el-button type="primary" @click="changeBorder">加边框</el-button>
- </div>
- </template>
- <script lang="ts">
- import { Component, Prop, Vue, Watch } from "vue-property-decorator";
- import zujian from './a.vue'
- @Component
- export default class DemoForm extends Vue {
- config={
- attr:{
- size:'small',
- height:500,
- // readonly:true,
- rules:{
- name:[{
- required: true, message: '请输入名称', trigger: 'blur'
- }]
- }
- },
- columns:[
- [{
- span:6,
- label:'名称',
- prop:'name',
- component:'by-input',
- compConfig:{
- attr:{
- placeholder:'请输入名称',
- clearable:true
- }
- }
- },{
- span:6,
- label:'名称2',
- prop:'name2',
- component:'by-input',
- compConfig:{
- attr:{
- placeholder:'请输入名称',
- clearable:true
- }
- }
- },{
- label:'测试',
- prop:'name3',
- // required:true,
- component:zujian
- }],
- [{
- span:6,
- label:'下拉框',
- prop:'select',
- rules:[
- { required: true, message: '请选择数据', trigger: 'change' }
- ],
- component:'by-select',
- compConfig:{
- attr:{
- placeholder:'请选择数据',
- clearable:true,
- data:[{
- value: '选项1',
- label: '黄金糕'
- }, {
- value: '选项2',
- label: '双皮奶'
- }, {
- value: '选项3',
- label: '蚵仔煎'
- }, {
- value: '选项4',
- label: '龙须面'
- }, {
- value: '选项5',
- label: '北京烤鸭'
- }]
- }
- }
- },{
- span:6,
- label:'时间',
- prop:'date',
- rules:[
- { required: true, message: '请选择时间', trigger: 'change' }
- ],
- component:'by-date-picker',
- compConfig:{
- format:'yyyy-MM-dd HH:mm:ss',
- type:'datetime'
- }
- },{
- span:6,
- label:'插槽',
- // labelWidth:'0px',
- slot:true,
- descSlot:true,
- prop:'slotField',
- }],
- [{
- span:6,
- label:'树形',
- prop:'tree',
- component:'select-tree',
- compConfig:{
- attr:{
- label:'name',
- clearable:true,
- retConfig:{
- treeName:'name',
- treeId:'id'
- }
- },
- request:{
- url:'/maindata/maindataMaterialOrganizationCategory/treeList'
- }
- }
- }]
- ]
- }
- toolConfig={
- tools:{
- add:true,
- edit:true,
- del:true,
- export:true,
- search:true,
- refresh:true
- },
- audit:{
- add:'audit:collaborationLog:add',
- edit:'audit:collaborationLog:edit',
- delete:'audit:collaborationLog:remove',
- export:'audit:collaborationLog:export'
- },
- customTools:[
- {
- name: '新增123', icon: 'el-icon-plus', audit:[''], event:{
- click:()=>{
- console.log('新增123')
- }
- }
- }
- ]
- }
-
- onAdd(){
- console.log('点击新增')
- }
- getFormData(){
- let data = (this as any).$refs.form.getValue();
- console.log('表单数据:',data);
- }
- setFormData(){
- let data={
- name:'111',
- name2:'2222',
- name3:'333',
- select:'选项一',
- date:'2023-02-25 12:23:22',
- tree:'222'
- };
- (this as any).$refs.form.setValue(data);
- }
- changeType(){
- let c = (this as any).$lodash.cloneDeep(this.config);
- c.attr.showType = 'desc';
- (this as any).$refs.form.setConfig(c);
- }
- changeBorder(){
- let c = (this as any).$lodash.cloneDeep(this.config);
- c.attr.showType = 'desc';
- c.attr.border = true;
- (this as any).$refs.form.setConfig(c);
- }
- getFormVali(){
- (this as any).$refs.form.validate().then(()=>{
- console.log('验证通过')
- }).catch(()=>{
- console.log('验证不通过')
- });
- }
- }
- </script>
- <style lang="scss" scoped>
- .form{
- width: 100%;
- }
- </style>
|