QuartzModal1.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
  3. <BasicForm @register="registerForm" />
  4. </BasicModal>
  5. </template>
  6. <script lang="ts" setup>
  7. import { ref, computed, unref } from 'vue';
  8. import { BasicModal, useModalInner } from '/@/components/Modal';
  9. import { BasicForm, useForm } from '/@/components/Form/index';
  10. import { formSchema } from './quartz.data';
  11. import { dataCenterSaveQuartz, dataCenterUpdateQuartz } from './quartz.api';
  12. import { isJsonObjectString } from '/@/utils/is';
  13. // Emits声明
  14. const emit = defineEmits(['register', 'success']);
  15. const isUpdate = ref(true);
  16. const sysType = ref('');
  17. //表单配置
  18. const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  19. // labelWidth: 150,
  20. schemas: formSchema,
  21. showActionButtonGroup: false,
  22. // update-begin--author:liaozhiyang---date:20231017---for:【issues/790】弹窗内文本框不居中问题
  23. labelWidth: 100,
  24. labelCol: null,
  25. wrapperCol: null,
  26. // update-end--author:liaozhiyang---date:20231017---for:【issues/790】弹窗内文本框不居中问题
  27. });
  28. //表单赋值
  29. const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  30. //重置表单
  31. await resetFields();
  32. setModalProps({ confirmLoading: false });
  33. isUpdate.value = !!data?.isUpdate;
  34. if (unref(isUpdate)) {
  35. //获取详情
  36. //data.record = await getQuartzById({id: data.record.id});
  37. try {
  38. data.record.paramterType = isJsonObjectString(data?.record?.parameter) ? 'json' : 'string';
  39. sysType.value = data.record.sysType;
  40. console.log(sysType.value, '123123');
  41. } catch (e) {
  42. console.log(e);
  43. }
  44. //表单赋值
  45. await setFieldsValue({
  46. ...data.record,
  47. });
  48. }
  49. });
  50. //设置标题
  51. const title = computed(() => (!unref(isUpdate) ? '新增任务' : '编辑任务'));
  52. //表单提交事件
  53. async function handleSubmit(v) {
  54. try {
  55. let values = await validate();
  56. setModalProps({ confirmLoading: true });
  57. //提交表单
  58. if (isUpdate.value) {
  59. await dataCenterUpdateQuartz(values, sysType.value, 'edit');
  60. } else {
  61. await dataCenterSaveQuartz(values, sysType.value, 'save');
  62. }
  63. //关闭弹窗
  64. closeModal();
  65. //刷新列表
  66. emit('success');
  67. } finally {
  68. setModalProps({ confirmLoading: false });
  69. }
  70. }
  71. </script>