InstantRetailAdmin/src/views/config/order-splitting/index.vue

<script setup lang="tsx">
import { NInput } from 'naive-ui';
import { useTabStore } from '@/store/modules/tab';
import { useForm } from '@/components/zt/Form/hooks/useForm';
const tabStore = useTabStore();

const [registerForm, { getFieldsValue, validate }] = useForm({
  schemas: [
    {
      field: 'name',
      component: 'NInput',
      label: '配送距离',
      required: true,
      render({ model, field }) {
        return (
          <NInput
            placeholder={'请输入配送距离'}
            value={model[field]}
            onUpdate:value={val => (model[field] = val)}
            v-slots={{ prefix: () => '大于', suffix: () => 'km' }}
          ></NInput>
        );
      }
    }
  ],
  labelWidth: 120,
  layout: 'horizontal',
  gridProps: {
    cols: '1 xl:4 s:1 l:3',
    itemResponsive: true
  },
  collapsedRows: 1,
  showActionButtonGroup: false
});

function close() {
  tabStore.removeTab(tabStore.activeTabId);
}

async function save() {
  await validate();
  const form = getFieldsValue();
  console.log(form);
}
</script>

<template>
  <LayoutTable>
    <NCard
      title="分单配置（企业用户才有分单规则，C端用户只走配送，B端用户只走物流）"
      :bordered="false"
      size="small"
      segmented
      class="card-wrapper"
    >
      <BasicForm @register-form="registerForm"></BasicForm>
      <template #footer>
        <NSpace justify="end">
          <NButton size="small" @click="close">关闭</NButton>
          <NButton type="primary" size="small" @click="save">保存</NButton>
        </NSpace>
      </template>
    </NCard>
  </LayoutTable>
</template>

<style scoped></style>