ant-vue-admin/src/views/conventional/system/index.vue

<template>
  <CollapseContainer
    class="sys-container"
    title="系统配置"
    :canExpan="false"
    helpMessage="可以在此增改系统的变量和分组,也可以自定义分组和变量"
  >
    <a-button type="default" class="mr-2" @click="onBasicConfig"> 基础配置 </a-button>
    <a-button type="default" class="mr-2" @click="onBasicConfig"> 邮件配置 </a-button>
    <a-button type="default" class="mr-2" @click="onBasicConfig"> 字典配置 </a-button>
    <a-button type="default" class="mr-2" @click="onBasicConfig"> 会员配置 </a-button>
    <a-button
      preIcon="bx:bx-plus-medical"
      @mouseenter="showTip"
      @mouseleave="hideTip"
      @click="addConfig"
      class="mr-2"
    />
    <span v-if="tipShow" class="tip">点击添加新的配置</span>
    <BasicTable ref="tableRef" :canResize="true" v-if="tableShow" @register="registerTable" />
    <BasicForm
      class="config-form"
      v-if="formShow"
      @register="registerForm"
      @submit="handleSubmit"
    />
    <div v-if="tableShow" class="actions">
      <a-button class="mr-2" type="default" @click="onBasicConfig">
        {{ t('common.resetText') }}
      </a-button>
      <a-button class="mr-2" type="primary" @click="onSubmit">
        {{ t('common.submitText') }}
      </a-button>
    </div>
  </CollapseContainer>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, toRefs, unref } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { schemas } from './data';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { adapt } from '/@/utils/adapt';
  import { validateType } from './validTools';
  import {
    BasicTable,
    useTable,
    // TableAction,
    // BasicColumn,
    // ActionItem,
    // EditRecordRow,
    TableActionType,
  } from '/@/components/Table';
  import { columns } from './data';

  export default defineComponent({
    components: { CollapseContainer, BasicTable, BasicForm },
    setup() {
      const { t } = useI18n();
      const tableHeight = adapt().tableHeight;
      const state = reactive({
        tipShow: false,
        tableShow: true,
        formShow: false,
      });
      const tableRef = ref<Nullable<TableActionType>>(null);
      const [registerTable] = useTable({
        columns: columns,
        maxHeight: tableHeight,
        dataSource: [
          {
            title: 'helloWorld',
            name: 'helloworld',
            value: 'helloWorld',
            type: 'Input',
            tip: '我是helloworld字段的提示',
            rules: [],
          },
          {
            title: 'test',
            name: 'test',
            value: 'test',
            type: 'Input',
            tip: '我是test字段的提示',
            rules: ['require', 'url'],
          },
          {
            title: 'hello1',
            name: 'hello1',
            value: 'hello1',
            type: 'Select',
            tip: 'hello select',
            option: [{ value: 'hello1' }, { value: 'world' }, { value: 'java' }],
          },
          {
            title: 'hello1',
            name: 'hello1',
            value: ['hello1'],
            type: 'MultipleSelect',
            tip: 'MultipleSelect',
            option: [{ value: 'hello1' }, { value: 'world' }, { value: 'java' }],
          },
          {
            title: 'hello1',
            name: 'hello1',
            value: 'Orange',
            type: 'Radio',
            option: [
              { label: 'Apple', value: 'Apple' },
              { label: 'Pear', value: 'Pear' },
              { label: 'Orange', value: 'Orange' },
            ],
          },
          {
            title: 'hello1',
            name: 'hello1',
            value: ['Apple', 'Orange'],
            type: 'Checkbox',
            option: [
              { label: 'Apple', value: 'Apple' },
              { label: 'Pear', value: 'Pear' },
              { label: 'Orange', value: 'Orange' },
            ],
          },
          {
            title: 'hello2',
            name: 'hello2',
            value: '2021-10-25',
            type: 'DatePicker',
            tip: '日期选择',
          },
          {
            title: 'time',
            name: 'timename',
            value: '11:12:25',
            type: 'TimePicker',
            tip: '时间选择',
          },
          {
            title: 'hello3',
            name: 'hello3',
            value: 10,
            type: 'InputNumber',
            tip: '我是test字段的提示',
            rules: ['require', 'qq'],
          },
          {
            title: 'hello4',
            name: 'hello4',
            value: 'InputTextAreasdafasdf',
            type: 'InputTextArea',
            tip: '我是InputTextArea字段的提示123456789112',
            rules: ['require', 'email'],
          },
          {
            title: 'hello4',
            name: 'hello4',
            value: true,
            type: 'Switch',
          },
          {
            title: 'hello4',
            name: 'hello4',
            value: true,
            type: 'ArrayCom',
          },
        ],
        showIndexColumn: false,
        pagination: false,
      });

      const [
        registerForm,
        // { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue },
      ] = useForm({
        labelWidth: 120,
        schemas,
        actionColOptions: {
          span: 24,
        },
        showActionButtonGroup: true,
      });

      function getTableAction() {
        // 获取组件
        const tableAction = unref(tableRef);
        if (!tableAction) {
          throw new Error('tableAction is null');
        }
        return tableAction;
      }

      function showTip() {
        state.tipShow = true;
      }

      function hideTip() {
        state.tipShow = false;
      }

      function onBasicConfig() {
        state.tableShow = true;
        state.formShow = false;
      }

      function addConfig() {
        state.tableShow = false;
        state.formShow = true;
      }

      function onSubmit() {
        console.log('==========onSubmit=========');
        const data = getTableAction().getDataSource();
        let flag = true;
        data.map((item) => {
          if (item.rules && item.rules.length) {
            console.log(`item`, item.rules);
            const res = validateType(item.rules, item.value);
            item.errMsg = res.errMsg;
            flag = res.isValid;
          }
        });
        if (flag) {
          console.log('=======全部校验通过========');
        }
      }

      function handleSubmit(e) {
        console.log('=======values =======');
        console.log(`e`, e);
      }
      return {
        t,
        tableRef,
        registerTable,
        registerForm,
        showTip,
        hideTip,
        onBasicConfig,
        addConfig,
        onSubmit,
        handleSubmit,
        ...toRefs(state),
      };
    },
  });
</script>
<style>
  .sys-container {
    position: relative;
  }

  .vben-collapse-container__body > .mr-2 {
    margin-top: 5px;
    font-weight: 550 !important;
  }

  .tip {
    position: absolute;
    top: 30px;
    padding: 3px 6px;
    color: #fff;
    background-color: black;
    border-radius: 3px;
  }

  .config-form {
    margin-top: 10px;
  }

  .ant-form-item-children {
    display: flex;
    justify-content: center;
  }

  .actions {
    display: flex;
    justify-content: center;
  }
</style>