avue从vue文件中拆分option

迷南。 2022-10-07 04:55 461阅读 0赞

拆分方式一：

（源vue文件）index.vue

<avue-crud :data="data" :option="option"></avue-crud>
    <br>
    
    export default {
     data() {
          return {
            data: [
              {
                name:'张三',
                sex:'男',
                date:'1994-02-23 00:00:00'
              }, {
                name:'李四',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'王五',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'赵六',
                sex:'男',
                date:'1994-02-23 00:00:00'
              }
            ],
            option:{
              title:'表格的标题',
              titleSize:'h3',
              titleStyle:{
                color:'red'
              },
              page:false,
              align:'center',
              menuAlign:'center',
              column:[
                 {
                  label:'姓名',
                  prop:'name'
                },
                {
                  label:'性别',
                  prop:'sex'
                },{
                  label: "日期",
                  prop: "date",
                  type: "date",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                }
              ]
            }
          }
        }
      }

拆分成一个vue文件一个是js文件

index1.vue

<avue-crud :data="data" :option="option"></avue-crud>
    <br>
    
    import option from '@/option/water/common/busifeecfg'
    export default {
     data() {
          return {
            data: [
              {
                name:'张三',
                sex:'男',
                date:'1994-02-23 00:00:00'
              }, {
                name:'李四',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'王五',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'赵六',
                sex:'男',
                date:'1994-02-23 00:00:00'
              }
            ],
            option
          }
        }
      }

index1.js

export default {
      title:'表格的标题',
      titleSize:'h3',
      titleStyle:{
        color:'red'
      },
      page:false,
      align:'center',
      menuAlign:'center',
      column:[
          {
          label:'姓名',
          prop:'name'
        },
        {
          label:'性别',
          prop:'sex'
        },{
          label: "日期",
          prop: "date",
          type: "date",
          format: "yyyy-MM-dd hh:mm:ss",
          valueFormat: "yyyy-MM-dd hh:mm:ss",
        }
      ]
    }

拆分方式二：

option中有带事件的源vue文件

index.vue

<avue-crud :data="data" :option="option"></avue-crud>
    <br>
    
    export default {
     data() {
          return {
            option:{
              title:'表格的标题',
              titleSize:'h3',
              titleStyle:{
                color:'red'
              },
              page:false,
              align:'center',
              menuAlign:'center',
              column:[
                 {
                  label:'姓名',
                  prop:'name',
                  change: ({value,column}) => {
                  this.$message.success('查看控制台')
                  console.log('值改变',value,column)
                }
    
                },
                {
                  label:'性别',
                  prop:'sex'
                },{
                  label: "日期",
                  prop: "date",
                  type: "date",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                }
              ]
            }
          }
        }
      }

拆分文件：

index2.vue

<avue-crud :data="data" :option="option"></avue-crud>
    <avue-crud :data="data" :option="option1"></avue-crud>
    <br>
    
    export default {
     data() {
          return {
            option: boxOption(this.show, this.startboxChange, this.newboxChange, this.deptIdChange),
            option1: inLibraryOption,
    
          }
        }
      }

index2.js

import website from '@/config/website'
    export function boxOption(show, startboxChange, newboxChange, deptIdChange) {
      return {
        height: show ? "auto" : "450",
        calcHeight: 30,
        menu: show,
        addBtn: show,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        addBtnText: "新箱建档",
        addTitle: "新箱建档",
        border: true,
        index: true,
        viewBtn: true,
        selection: show,
        dialogClickModal: false,
        labelWidth: 110,
        column: [
          {
          label: "所属租户",
          prop: "tenantId",
          type: "tree",
          dicUrl: "/api/blade-system/tenant/select",
          // addDisplay: false,
          // editDisplay: false,
          viewDisplay: website.tenantMode,
          span: 12,
          props: {
            label: "tenantName",
            value: "tenantId"
          },
          hide: !website.tenantMode,
          search: website.tenantMode,
          rules: [{
            required: true,
            message: "请输入所属租户",
            trigger: "click"
          }]
        },  
          {
            label: "管理单位",
            prop: "deptId",
            dicUrl: "/api/blade-system/dept/getTree?deptCategory=1",
            type: "tree",
            search: show,
            overHidden: true,
            span: 8,
            props: {
              label: "title",
              value: "id"
            },
            rules: [
              {
                required: true,
                message: "请选择所属单位",
                trigger: ["blur", "change"]
              }
            ],
            change: deptIdChange
          },
          {
            label: "库房名称",
            prop: "whName",
            overHidden: true,
            span: 16,
            addDisplay: false,
            editDisplay: false
          },
          {
            label: "库房名称",
            prop: "whId",
            search: show,
            hide: true,
            viewDisplay: false,
            span: 16,
            searchSpan: 12,
            searchslot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请选择库房",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "表箱编号",
            prop: "boxNo",
            type: "number",
            controls: false,
            addDisplay: false,
            search: true,
            span: 8,
            rules: [
              {
                required: true,
                message: "请输入表箱编号",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "起始表箱编号",
            prop: "boxNoStart",
            type: "number",
            span: 8,
            editDisplay: false,
            viewDisplay: false,
            controls: false,
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入起始表箱编号",
                trigger: ["blur", "change"]
              }
            ],
            change: ({ value }) => startboxChange(value)
          },
          {
            label: "新增表箱数",
            prop: "boxNum",
            type: "number",
            value: 1,
            minRows: 1,
            precision: 0,
            span: 8,
            hide: true,
            editDisplay: false,
            viewDisplay: false,
            rules: [
              {
                required: true,
                message: "请输入新增表箱数",
                trigger: ["blur", "change"]
              }
            ],
            change: ({ value }) => newboxChange(value)
          },
          {
            label: "截至表箱编号",
            prop: "boxNoEnd",
            type: "number",
            controls: false,
            disabled: true,
            span: 8,
            hide: true,
            editDisplay: false,
            viewDisplay: false,
            rules: [
              {
                required: true,
                message: "请输入截至表箱编号",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "水表户型",
            prop: "meterLayout",
            search: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=meter_layout",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
            rules: [
              {
                required: true,
                message: "请选择水表户型",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "水表方向",
            prop: "meterDirect",
            search: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=meter_direct",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
            rules: [
              {
                required: true,
                message: "请选择水表方向",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "生产厂家",
            prop: "manufacturer",
            search: true,
            overHidden: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_manufacturer",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
            rules: [
              {
                required: true,
                message: "请选择生产厂家",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "型号",
            prop: "boxModel",
            type: "select",
            search: true,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_model",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
            rules: [
              {
                required: true,
                message: "请选择型号",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "材质",
            prop: "material",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_material",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
            rules: [
              {
                required: true,
                message: "请选择材质",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "出厂日期",
            prop: "leavefactDate",
            width: 100,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            span: 8,
            rules: [
              {
                required: true,
                message: "请选择出厂日期",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "状态",
            prop: "boxStatus",
            search: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_status",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
            rules: [
              {
                required: true,
                message: "请选择状态",
                trigger: ["blur", "change"]
              }
            ]
          },
          {
            label: "出厂日期",
            prop: "searchDate",
            type: "date",
            searchRange: true,
            search: true,
            slot: true,
            display: false,
            hide: true,
            searchSpan: 8,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          {
            label: "备注",
            prop: "remarks",
            hide: true,
            type: "textarea",
            span: 16,
            minRows: 3
          }
        ]
      };
    }
    
    export const inLibraryOption = {
      emptyBtn: false,
      submitBtn: true,
      menuPosition: "right",
      column: [
        {
          label: "出入库类别",
          prop: "dioType",
          value: "01",
          display: false,
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=dio_type",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        },
        {
          label: "入库类型",
          prop: "dinType",
          span: 24,
          type: "radio",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=din_type",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          rules: [
            {
              required: true,
              message: "请选择入库类型",
              trigger: ["blur", "change"]
            }
          ]
        },
        {
          label: "库房名称",
          prop: "whId",
          formslot: true,
          rules: [
            {
              required: true,
              message: "请选择库房",
              trigger: ["blur", "change"]
            }
          ]
        },
        {
          label: "入库说明",
          prop: "remarks",
          type: "textarea",
          span: 24,
          rules: [
            {
              required: true,
              message: "请输入入库说明",
              trigger: ["blur", "change"]
            }
          ]
        }
      ]
    };