分组表单

<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 ssxt_dic = [
  {
    label: "类型1",
    value: 1,
  },
  {
    label: "类型2",
    value: 2,
  },
  {
    label: "类型3",
    value: 3,
  },
  {
    label: "类型4",
    value: 4,
  },
];

export default {
  name: 'GroupedForm',
  data() {
    return {
      tableData: [
        {
          sbbh: "111",
          sbmc: "222",
          ssxt: "333",
          sblx: "444",
          sbzyx: "555",
          qyrq: "2023-03-01 14:30:00",
          bfyy: "-------------",
          zxr: "666",
          bfrq: "2023-03-01 14:30:00",
        },
        {
          sbbh: "111",
          sbmc: "222",
          ssxt: "333",
          sblx: "444",
          sbzyx: "555",
          qyrq: "2023-03-01 14:30:00",
          bfyy: "-------------",
          zxr: "666",
          bfrq: "2023-03-01 14:30:00",
        },
        {
          sbbh: "111",
          sbmc: "222",
          ssxt: "333",
          sblx: "444",
          sbzyx: "555",
          qyrq: "2023-03-01 14:30:00",
          bfyy: "-------------",
          zxr: "666",
          bfrq: "2023-03-01 14:30:00",
        },
      ],
      tableColumn: [
        {
          label: "字段1",
          prop: "sbbh",
        },
        {
          label: "字段2",
          prop: "sbmc",
        },
        {
          label: "字段3",
          prop: "ssxt",
          type: "select",
          dicData: ssxt_dic,
          search: true,
        },
        {
          label: "字段4",
          prop: "sblx",
          search: true,
        },
        {
          label: "字段5",
          prop: "sbzyx",
          search: true,
        },
        {
          label: "字段6",
          prop: "qyrq",
          type: "date",
          search: true,
        },
        {
          label: "字段7",
          prop: "bfyy",
        },
        {
          label: "字段8",
          prop: "zxr",
          type: "select",
          search: true,
        },
        {
          label: "字段9",
          prop: "bfrq",
          type: "date",
          search: true,
        },
      ],
      tableOption: {
        delBtn: false,
        exportBtn: false,
        searchMenuSpan: 8,
        formDialog: {
          show: true,
          width: 700,
          labelWidth: 100,
        },
        tableOption: {
          seq: false,
        },
      },
      tableGroup: [
        {
          label: "基本信息",
          prop: "jbxx",
          column: [
            {
              label: "表单1",
              prop: "sbbh",
            },
            {
              label: "表单2",
              prop: "sbmc",
            },
            {
              label: "表单3",
              prop: "ssxt",
              type: "select",
              dicData: ssxt_dic,
            },
            {
              label: "表单4",
              prop: "sblx",
              type: "select",
            },
            {
              label: "表单5",
              prop: "sbzyx",
              type: "select",
            },
            {
              label: "表单6",
              prop: "pp",
            },
            {
              label: "表单7",
              prop: "ggxh",
            },
            {
              label: "表单8",
              prop: "wz",
              disabled: true,
            },
            {
              label: "表单9",
              prop: "sbfzr",
            },
            {
              label: "表单10",
              prop: "qyrq",
              type: "date",
            },
            {
              label: "表单11",
              prop: "cssm",
              type: "textarea",
            },
            {
              label: "表单12",
              prop: "bz",
              type: "textarea",
            },
          ],
        },
        {
          label: "更多信息",
          prop: "bfxx",
          column: [
            {
              label: "表单13",
              prop: "zxr",
              span: 12,
            },
            {
              label: "表单14",
              prop: "bfrq",
              span: 12,
              type: "date",
              disabled: true,
            },
            {
              label: "表单15",
              prop: "bfyy",
              type: "textarea",
            },
          ],
        },
      ],
    };
  },
  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