基础表单

<template>
  <section>
    <oce-crud
      ref="crud"
      :data="tableData"
      :column="tableColumn"
      :group="tableGroup"
      :option="tableOption"
      @update-column-index="updateColumnIndex"
      @form-dialog-submit="formDialogSubmit"
    >
    </oce-crud>
  </section>
</template>

<script>
let hclx_dic = [
  {
    label: '选项1',
    value: 1
  },
  {
    label: '选项2',
    value: 2
  },
  {
    label: '选项3',
    value: 3
  },
  {
    label: '选项4',
    value: 4
  }
]

export default {
  name: 'GroupedForm',
  data() {
    return {
      tableData: [
        {
          bzbh: '001',
          bzmc: '222',
          hclx: '333',
          hcfx: '444',
          hcbz: '- -',
          hcnr: '- -',
          dzr: '555',
          cjrq: '2023-03-01',
        },
        {
          bzbh: '001',
          bzmc: '222',
          hclx: '333',
          hcfx: '444',
          hcbz: '- -',
          hcnr: '- -',
          dzr: '555',
          cjrq: '2023-03-01',
        },
        {
          bzbh: '001',
          bzmc: '222',
          hclx: '333',
          hcfx: '444',
          hcbz: '- -',
          hcnr: '- -',
          dzr: '555',
          cjrq: '2023-03-01',
        },
      ],
      tableColumn: [
        {
          label: '字段1',
          prop: 'bzbh',
          span: 24
        },
        {
          label: '字段2',
          prop: 'bzmc',
          span: 24
        },
        {
          label: '字段3',
          prop: 'hclx',
          search: true,
          type: 'select',
          dicData: hclx_dic,
          span: 24
        },
        {
          label: '字段4',
          prop: 'hcfx',
          search: true,
          type: 'select',
          span: 24
        },
        {
          label: '字段5',
          prop: 'hcbz',
          span: 24,
          type: 'textarea'
        },
        {
          label: '字段6',
          prop: 'hcnr',
          span: 24,
          type: 'textarea'
        },
        {
          label: '字段7',
          prop: 'dzr',
          span: 24,
          disabled: true
        },
        {
          label: '字段8',
          prop: 'cjrq',
          span: 24,
          disabled: true
        }
      ],
      tableOption: {
        delBtn: false,
        exportBtn: false,
        searchMenuSpan: 8,
        formDialog: {
          show: true,
          width: 500,
        },
      }
    };
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {
    // 修改列顺序
    updateColumnIndex({ newIndex, oldIndex }) {
      const currRow = this.tableColumn.splice(oldIndex, 1)[0];
      this.tableColumn.splice(newIndex, 0, currRow);
      this.tableColumn.forEach((el, index) => {
        el.index = index;
      });
      this.$refs.crud.refreshTable();
    },
    // 表单提交
    formDialogSubmit({ form, done, loading, type }) {
      done()
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss">

</style>

Expand Copy Copy