ruleForm.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <div class="part-box" :style="{ minHeight: '300px' }">
  3. <a-form ref="formRef" :model="formData" :rules="rules" auto-label-width>
  4. <a-form-item field="name" label="预约任务名称">
  5. <a-input
  6. v-model.trim="formData.name"
  7. placeholder="请输入"
  8. allow-clear
  9. ></a-input>
  10. </a-form-item>
  11. <a-form-item field="allowApplyDays" label="开放预约限制">
  12. <span>考前</span>
  13. <a-input-number
  14. v-model="formData.allowApplyDays"
  15. :style="{ width: '120px', margin: '0 10px' }"
  16. placeholder="请输入"
  17. mode="button"
  18. :min="1"
  19. :max="999"
  20. :step="1"
  21. />
  22. <span>天,禁止考生自主预约</span>
  23. </a-form-item>
  24. <a-form-item field="allowApplyCancelDays" label="取消预约限制">
  25. <span>考前</span>
  26. <a-input-number
  27. v-model="formData.allowApplyCancelDays"
  28. :style="{ width: '120px', margin: '0 10px' }"
  29. placeholder="请输入"
  30. mode="button"
  31. :min="1"
  32. :max="999"
  33. :step="1"
  34. />
  35. <span>天,禁止考生自主预约</span>
  36. </a-form-item>
  37. <a-form-item field="selfApplyStartTime" label="第一阶段开启时间">
  38. <select-range-datetime
  39. v-model="formData"
  40. :keys="{
  41. startTime: 'selfApplyStartTime',
  42. endTime: 'selfApplyEndTime',
  43. }"
  44. >
  45. </select-range-datetime>
  46. <template #extra>
  47. <div>本阶段考生只能预约所属教学点下的考点</div>
  48. </template>
  49. </a-form-item>
  50. <a-form-item field="openApplyStartTime" label="第三阶段开启时间">
  51. <select-range-datetime
  52. v-model="formData"
  53. :keys="{
  54. startTime: 'openApplyStartTime',
  55. endTime: 'openApplyEndTime',
  56. }"
  57. >
  58. </select-range-datetime>
  59. <template #extra>
  60. <div>本阶段考生可以预约其他教学点下的考点</div>
  61. </template>
  62. </a-form-item>
  63. </a-form>
  64. </div>
  65. <div class="align-right">
  66. <a-button @click="close">取消</a-button>
  67. <a-button type="primary" :disabled="loading" @click="confirm"
  68. >确认</a-button
  69. >
  70. </div>
  71. </template>
  72. <script setup lang="ts">
  73. import { onMounted, reactive, ref } from 'vue';
  74. import { Message } from '@arco-design/web-vue';
  75. import { updateTaskRule } from '@/api/order';
  76. import useLoading from '@/hooks/loading';
  77. import type { FormInstance, FieldRule } from '@arco-design/web-vue/es/form';
  78. import { objAssign, objModifyAssign } from '@/utils/utils';
  79. import { TaskItem } from '@/api/types/order';
  80. defineOptions({
  81. name: 'RuleForm',
  82. });
  83. const props = defineProps<{
  84. rowData: TaskItem;
  85. }>();
  86. const emit = defineEmits(['cancel', 'modified']);
  87. const defaultFormData = {
  88. id: '',
  89. name: '',
  90. allowApplyDays: 1,
  91. allowApplyCancelDays: 1,
  92. selfApplyStartTime: null,
  93. selfApplyEndTime: null,
  94. openApplyStartTime: null,
  95. openApplyEndTime: null,
  96. };
  97. type FormDataType = typeof defaultFormData;
  98. const formRef = ref<FormInstance>();
  99. const formData = reactive<FormDataType>({ ...defaultFormData });
  100. const rules: Partial<Record<keyof FormDataType, FieldRule[]>> = {
  101. name: [
  102. {
  103. required: true,
  104. message: '请输入名称',
  105. },
  106. {
  107. max: 50,
  108. message: '名称不能超过50字符',
  109. },
  110. ],
  111. allowApplyDays: [
  112. {
  113. required: true,
  114. message: '请输入开放预约限制时间',
  115. },
  116. ],
  117. allowApplyCancelDays: [
  118. {
  119. required: true,
  120. message: '请输入取消预约限制时间',
  121. },
  122. ],
  123. selfApplyStartTime: [
  124. {
  125. required: true,
  126. message: '请选择自主预约时间',
  127. },
  128. ],
  129. openApplyStartTime: [
  130. {
  131. required: true,
  132. message: '请选择开放预约时间',
  133. },
  134. {
  135. validator: (value, callback) => {
  136. if (
  137. formData.openApplyStartTime &&
  138. formData.selfApplyEndTime &&
  139. formData.openApplyStartTime < formData.selfApplyEndTime
  140. ) {
  141. return callback('第三阶段开启时间不得早于第一阶段开启时间');
  142. }
  143. return callback();
  144. },
  145. },
  146. ],
  147. };
  148. function close() {
  149. emit('cancel');
  150. }
  151. /* confirm */
  152. const { loading, setLoading } = useLoading();
  153. async function confirm() {
  154. const err = await formRef.value?.validate();
  155. if (err) return;
  156. setLoading(true);
  157. const datas = objAssign(formData, {});
  158. let res = true;
  159. await updateTaskRule(datas).catch(() => {
  160. res = false;
  161. });
  162. setLoading(false);
  163. if (!res) return;
  164. Message.success('修改成功!');
  165. objModifyAssign(props.rowData, formData);
  166. emit('modified');
  167. }
  168. /* init modal */
  169. function initData() {
  170. if (props.rowData.id) {
  171. objModifyAssign(formData, props.rowData);
  172. } else {
  173. objModifyAssign(formData, defaultFormData);
  174. }
  175. }
  176. onMounted(() => {
  177. initData();
  178. });
  179. </script>