IndexPage.vue

<template>
  <div class="page">
    <div class="actions">
      <q-toggle v-model="state.dense" label="Dense" />
      <q-toggle v-model="state.disable" label="Disable" />
      <q-toggle v-model="state.readonly" label="Readonly" />
      <q-btn label="提交" color="primary" @click="onSubmit" />
      <q-btn label="重置" color="primary" @click="onResetForm" />
      <q-btn label="改变" color="primary" @click="onChange" />
    </div>
    <div class="page2-form">
      <Com.MyForm
        ref="myForm"
        :dense="state.dense"
        :disable="state.disable"
        :readonly="state.readonly"
        :config="formState.config"
        v-model="formState.value"
      >
        <template #test>
          <div>测试</div>
        </template>
        <template #class>
          <div class="item-content">
            <div class="label-title text-required">班级</div>
            <div class="label-content">
              <q-option-group
                v-model="formState.value.class"
                :options="classOpt"
                color="primary"
                inline
                :disable="state.disable || state.readonly"
              />
            </div>
          </div>
        </template>
        <template #workingDay>
          <div class="item-content">
            <div class="label-title text-required">工作日</div>
            <div class="label-content">
              <q-option-group
                v-model="formState.value.workingDay"
                color="primary"
                type="checkbox"
                :options="workingDayOpt"
                inline
                :disable="state.disable || state.readonly"
              />
            </div>
          </div>
        </template>
      </Com.MyForm>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'PAGE2',
};
</script>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { useMessage } from 'src/common/hooks';
import { delEmptyObjkey, isEmpty } from 'src/common/utils';
import Com from 'src/components';
import { form } from './config';
import COLORLIST from './colorList';

const { success, warn } = useMessage();

const myForm = ref<any>(null);

const colorPalette = ref<any>([]);

const classOpt = reactive([
  {
    label: 'A班',
    value: 'a',
  },
  {
    label: 'B班',
    value: 'b',
  },
  {
    label: 'C班',
    value: 'c',
  },
]);

const workingDayOpt = reactive([
  {
    label: '周一',
    value: 'mon',
  },
  {
    label: '周二',
    value: 'tue',
  },
  {
    label: '周三',
    value: 'wed',
  },
  {
    label: '周四',
    value: 'thu',
  },
  {
    label: '周五',
    value: 'fri',
  },
]);

const formState = reactive({
  config: [] as any[],
  value: {
    name: '法外狂徒张三',
    date1: '2022-12-31 12:30:30',
    dateMultiple: ['2023/01/23', '2023/01/24'],
    dateRange: {
      from: '2023-01-16',
      to: '2023-01-19',
    },
    dateRangeMultiple: [
      {
        from: '2023/01/16',
        to: '2023/01/19',
      },
      {
        from: '2023/01/23',
        to: '2023/01/31',
      },
    ],
    class: 'a',
    workingDay: [] as any[],
  } as any,
});

const state = reactive({
  dense: false,
  disable: false,
  readonly: false,
});

onMounted(() => {
  getColorList();
  initFormConfig();
});

function initFormConfig() {
  formState.config = form.map((item: any) => {
    let obj: any = { ...item };
    if (obj.fild === 'colorPick2') {
      obj.bind.palette = colorPalette.value;
    }
    return obj;
  });
}

function getColorList() {
  let arr: any[] = [];
  const length = 7;
  for (let i = 0; i < length; i++) {
    for (const key in COLORLIST) {
      const item = (COLORLIST as any)[key];
      arr.push(item[i + 1]);
    }
  }
  colorPalette.value = arr;
}

function onChange() {
  let obj = {
    name: '王二小',
    age: 1000,
    sex: '男',
  };
  formState.value = obj;

  let newForm = form.map((item: any) => {
    if (item.fild === 'country') {
      item.bind.label = '爱好';
      item.bind.multiple = true;
      item.bind.options = [
        {
          label: '看电视',
          value: 'watch_tv',
        },
        {
          label: '睡懒觉',
          value: 'sleep_in',
        },
        {
          label: '跑步',
          value: 'run',
        },
        {
          label: '听音乐',
          value: 'listen_music',
        },
        {
          label: '微信',
          value: 'WeChat',
        },
        {
          label: '微博',
          value: 'Microblog',
        },
        {
          label: '测试1',
          value: '1',
        },
        {
          label: '测试2',
          value: '2',
        },
        {
          label: '测试3',
          value: '3',
        },
        {
          label: '测试4',
          value: '4',
        },
      ];
    }
    return item;
  });
  formState.config = newForm;
}

function onSubmit() {
  myForm.value.validate().then((suc: any) => {
    if (!suc) return;
    if (isEmpty(formState.value.workingDay)) {
      return warn('工作日必填');
    }
    success('校验通过');
    console.log('formValue', delEmptyObjkey(formState.value));
  });
}

function onResetForm() {
  myForm.value.reset();
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.actions {
  display: flex;
  column-gap: 10px;
  padding: 8px;
  margin-top: 20px;
  height: 56px;
}
.page2-form {
  margin-top: $padding-sm;
  margin-bottom: 20px;
  width: 800px;
  box-sizing: border-box;
  border: 1px solid $border-color;
}
.item-content {
  height: calc(100% - 20px);
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.label-title {
  height: 22px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.871);
  margin-bottom: 2px;
  display: inline-block;
}
.label-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  // padding: 0 12px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 0 0;
}
</style>