detect-embeded/src/views/data/task/modal.vue

<template>
  <BasicModal v-bind="$attrs" @register="register" :closable="false" showFooter :title="getTitle" width="400px" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from "@/components/Modal";
import { computed, defineEmits, ref, unref } from "vue";
import { BasicForm, FormSchema, useForm } from "@/components/Form";

const entity = ref();
const isUpdate = ref(true);
const emit = defineEmits(['success', 'register']);
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  await resetFields();
  setModalProps({ confirmLoading: false });
  isUpdate.value = !!data?.isUpdate;
  entity.value = data?.record;
  await setFieldsValue({
    ...data.record,
  });
});

const paramSchema: FormSchema[] = [
  {
    colProps: { span: 24 },
    field: "code",
    label: "预埋件编号",
    componentProps: {
      allowClear: false,
      placeholder: '预埋件编号',
    },
    component: "Input",
    defaultValue: undefined,
    rules: [{ required: true, message: '请输入预埋件编号！' }],
  },
  {
    colProps: { span: 24 },
    field: "type",
    label: "类型",
    componentProps: {
      allowClear: false,
      placeholder: '类型',
    },
    component: "Input",
    defaultValue: undefined,
    rules: [{ required: true, message: '请输入类型！' }],
  },
  {
    colProps: { span: 24 },
    field: "x",
    label: "X(mm)",
    componentProps: {
      allowClear: false,
      placeholder: 'X(mm)',
    },
    component: "Input",
    defaultValue: undefined,
    rules: [{ required: true, message: '请输入X(mm)！' }],
  },
  {
    colProps: { span: 24 },
    field: "y",
    label: "Y(mm)",
    componentProps: {
      allowClear: false,
      placeholder: 'Y(mm)',
    },
    component: "Input",
    defaultValue: undefined,
    rules: [{ required: true, message: '请输入Y(mm)！' }],
  },
  {
    colProps: { span: 24 },
    field: "w",
    label: "W(mm)",
    componentProps: {
      allowClear: false,
      placeholder: 'W(mm)',
    },
    component: "Input",
    defaultValue: undefined,
    rules: [{ required: true, message: '请输入W(mm)！' }],
  },
  {
    colProps: { span: 24 },
    field: "h",
    label: "H(mm)",
    componentProps: {
      allowClear: false,
      placeholder: 'H(mm)',
    },
    component: "Input",
    defaultValue: undefined,
    rules: [{ required: true, message: '请输入H(mm)！' }],
  },
];

const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  labelWidth: 90,
  schemas: paramSchema,
  showActionButtonGroup: false,
});

async function handleSubmit() {
  try {
    const values = await validate();
    setModalProps({ confirmLoading: true });
    const {
      ...rest
    } = values;
    closeModal();
    const data = Object.assign({},
      {
        ...unref(entity),
        ...rest,
      });
    emit('success', data);
  } catch {} finally {
    setModalProps({ confirmLoading: false });
  }
}

</script>
<style lang="scss" scoped>
@use '@/assets/custom.scss';
</style>
<style>
.custom-modal .ant-modal-content {
  background-color: #13265a;
}
.ant-modal-header {
  background-color: #13265a !important;
}
.vben-basic-title {
  font-family: "Noto Sans SC", serif;
  font-size: 16px;
  color: #ffffff !important;
}

.ant-btn-primary {
  font-family: "Noto Sans SC", serif;
  font-size: 14px;
  color: #FFFFFF;
  background-color: #3793d4;
  box-shadow: inset 0 0 20px 2px #006CC6;
  height: 36px;
  border-radius: 6px;
  border: none;
}

.ant-btn-primary:hover {
  font-family: "Noto Sans SC", serif;
  font-size: 14px;
  color: #FFFFFF;
  background-color: rgba(69,175,223,0.8);
  box-shadow: inset 0 0 20px 2px #006CC6;
  height: 36px;
  border-radius: 6px;
  border: none;
}

.ant-btn-default {
  font-family: "Noto Sans SC", serif;
  font-size: 14px;
  color: #FFFFFF;
  background-color: rgba(58,98,203,0.8);
  box-shadow: inset 0 0 20px 2px #3A62CB;
  height: 36px;
  border-radius: 6px;
  border: none;
}

.ant-btn-default:hover {
  font-family: "Noto Sans SC", serif;
  font-size: 14px;
  color: #FFFFFF;
  background-color: rgba(58,98,203,0.8);
  box-shadow: inset 0 0 20px 2px #006CC6;
  height: 36px;
  border-radius: 6px;
  border: none;
}

.ant-btn-default:disabled,
.ant-btn-default:disabled:hover,
.ant-btn-default:disabled svg {
  color: #AAAAAA;
}
</style>