QuartzModal1.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. } catch (e) {
  41. console.log(e);
  42. }
  43. //表单赋值
  44. await setFieldsValue({
  45. ...data.record,
  46. });
  47. }
  48. });
  49. //设置标题
  50. const title = computed(() => (!unref(isUpdate) ? '新增任务' : '编辑任务'));
  51. //表单提交事件
  52. async function handleSubmit(v) {
  53. try {
  54. let values = await validate();
  55. setModalProps({ confirmLoading: true });
  56. //提交表单
  57. if (isUpdate.value) {
  58. await dataCenterUpdateQuartz(values, sysType.value, 'edit');
  59. } else {
  60. await dataCenterSaveQuartz(values, values.sysType, 'add');
  61. }
  62. //关闭弹窗
  63. closeModal();
  64. //刷新列表
  65. emit('success');
  66. } finally {
  67. setModalProps({ confirmLoading: false });
  68. }
  69. }
  70. </script>