feat: 编辑大题档次抽查比例

src/assets/styles/element/custom.scss

@@ -138,6 +138,10 @@ button.el-button {
 }
 
 .el-input-number {
+  width: 100%;
+  .el-input__inner {
+    text-align: left;
+  }
   .el-input-number__increase,
   .el-input-number__decrease {
     top: 3px;

src/components/element/BaseForm.vue

@@ -30,7 +30,7 @@
                           <component
                             :is="FormItemComponentMap[col.slotType]"
                             v-if="col.slotType"
-                            v-bind="col.slot"
+                            v-bind="Object.assign({}, FormItemComponentDefault[col.slotType], col.slot)"
                             v-model="getFieldValue(props.model, col.prop).value"
                           >
                             <template
@@ -154,6 +154,12 @@ const FormItemComponentSlots = markRaw<Record<keyof FormSupportComponentMap, str
   dateTime: ['range-separator', 'default'],
 })
 
+const FormItemComponentDefault = markRaw<Partial<Record<keyof FormSupportComponentMap, EpFormItem['slot']>>>({
+  inputNumber: {
+    controls: false,
+  },
+})
+
 const props = defineProps<BaseEpForm>()
 
 const ElFormProps = computed(() => {

src/modules/admin-subject/edit-main-question/index.vue

@@ -12,7 +12,10 @@
         :disabled="adding || editing"
       >
         <template #form-item-setLevelRange>
-          <el-button class="m-l-base" type="primary" @click="setLevelRangeVisible = true">设置</el-button>
+          <div class="flex items-center">
+            <el-input :model-value="levelRangeView" :disabled="true"></el-input>
+            <el-button class="m-l-base" type="primary" @click="setLevelRangeVisible = true">设置</el-button>
+          </div>
         </template>
         <template #form-item-expand>
           <el-button type="primary" link @click="expand = !expand">高级设置</el-button>
@@ -23,13 +26,13 @@
       </base-form>
     </el-card>
   </div>
-  <base-dialog v-model="setLevelRangeVisible" title="档次设置">
+  <base-dialog v-model="setLevelRangeVisible" title="档次设置" destroy-on-close>
     <div class="level-list">
       <div v-for="([start, end], index) in levelRanges" :key="index" class="flex items-center level-row">
         <div class="m-r-base level-label">档次一({{ start }}~{{ end }})</div>
         <div class="flex items-center level-input">
           <el-input-number
-            v-model="levelRangeValues[index]"
+            v-model="levelRangValues[index]"
             class="m-r-mini"
             size="small"
             :controls="false"
@@ -50,7 +53,7 @@
 /** 添加大题 */
 import { computed, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElCard, ElButton, ElMessage, ElInputNumber } from 'element-plus'
+import { ElCard, ElButton, ElMessage, ElInput, ElInputNumber } from 'element-plus'
 import { omit } from 'lodash-es'
 import ConfirmButton from '@/components/common/ConfirmButton.vue'
 import BaseDialog from '@/components/element/BaseDialog.vue'
@@ -76,11 +79,11 @@ const levelRanges = [
   [12, 14],
 ]
 
-const levelRangeValues = ref<number[]>(Array.from({ length: 5 }))
-
 const setLevelRangeVisible = ref<boolean>(false)
 
-const { fetch: getMainQuestionInfo, result: MainQuestionInfo } = useFetch('getMainQuestionInfo')
+const levelRangValues = ref<number[]>(Array.from<number>({ length: 5 }).fill(0))
+
+const { fetch: getMainQuestionInfo } = useFetch('getMainQuestionInfo')
 
 const { fetch: addMainQuestion, loading: adding } = useFetch('addMainQuestion')
 const { fetch: editMainQuestion, loading: editing } = useFetch('editMainQuestion')
@@ -97,13 +100,17 @@ const model = reactive<ExtractApiParams<'addMainQuestion'>>({
   questionScore: void 0,
   remarkNumber: void 0,
   remarkType: 'QUANTITY',
-  levelRange: [],
+  levelRange: Array.from<number>({ length: 5 }).fill(0),
   standardRate: void 0,
   selfRate: void 0,
   systemRate: void 0,
   startNumber: 1,
 })
 
+const levelRangeView = computed(() => {
+  return model.levelRange.map((n) => `${n || 0}%`).join(',')
+})
+
 const { formRef, elFormRef, defineColumn, _ } = useForm()
 
 const rules = computed<EpFormRules>(() => {
@@ -148,7 +155,7 @@ const items = computed<EpFormItem[]>(() => [
   Span6(
     {
       label: '大题号',
-      slotType: 'input',
+      slotType: 'inputNumber',
       prop: 'mainNumber',
       slot: {
         placeholder: '大题号',
@@ -177,26 +184,32 @@ const items = computed<EpFormItem[]>(() => [
   Span6(
     {
       label: '小题起始号',
-      slotType: 'input',
+      slotType: 'inputNumber',
       prop: 'startNumber',
       slot: { placeholder: '小题起始号', disabled: isEdit },
     },
     'row-3'
   ),
-  Span6({ label: '小题数量', slotType: 'input', prop: 'questionCount', slot: { placeholder: '小题数量' } }, 'row-4'),
-  Span6({ label: '小题满分', slotType: 'input', prop: 'questionScore', slot: { placeholder: '小题满分' } }, 'row-5'),
-  Span6({ label: '间隔分', slotType: 'input', prop: 'intervalScore', slot: { placeholder: '间隔分' } }, 'row-6'),
+  Span6(
+    { label: '小题数量', slotType: 'inputNumber', prop: 'questionCount', slot: { placeholder: '小题数量' } },
+    'row-4'
+  ),
+  Span6(
+    { label: '小题满分', slotType: 'inputNumber', prop: 'questionScore', slot: { placeholder: '小题满分' } },
+    'row-5'
+  ),
+  Span6({ label: '间隔分', slotType: 'inputNumber', prop: 'intervalScore', slot: { placeholder: '间隔分' } }, 'row-6'),
   Span6(
     {
       label: '最小阅卷时长(秒)',
-      slotType: 'input',
+      slotType: 'inputNumber',
       prop: 'minMarkTime',
       slot: { placeholder: '最小阅卷时长(秒)' },
     },
     'row-7'
   ),
   Span6(
-    { label: '评卷小组数量', slotType: 'input', prop: 'groupNumber', slot: { placeholder: '评卷小组数量' } },
+    { label: '评卷小组数量', slotType: 'inputNumber', prop: 'groupNumber', slot: { placeholder: '评卷小组数量' } },
     'row-8'
   ),
   Span6(
@@ -215,31 +228,28 @@ const items = computed<EpFormItem[]>(() => [
     'row-9'
   ),
   Span6(
-    { label: model.remarkType === 'QUANTITY' ? '数量' : '时间:(近N秒)', prop: 'remarkNumber', slotType: 'input' },
+    { label: model.remarkType === 'QUANTITY' ? '数量' : '时间:(近N秒)', prop: 'remarkNumber', slotType: 'inputNumber' },
     'row-10'
   ),
   Span6(
-    { label: '标准卷分发频度', slotType: 'input', prop: 'standardRate', slot: { placeholder: '标准卷分发频度' } },
+    { label: '标准卷分发频度', slotType: 'inputNumber', prop: 'standardRate', slot: { placeholder: '标准卷分发频度' } },
     'row-11'
   ),
   Span6(
-    { label: '自查卷分发频度', slotType: 'input', prop: 'selfRate', slot: { placeholder: '自查卷分发频度' } },
+    { label: '自查卷分发频度', slotType: 'inputNumber', prop: 'selfRate', slot: { placeholder: '自查卷分发频度' } },
     'row-11'
   ),
   Span6(
-    { label: '系统抽查卷比例', slotType: 'input', prop: 'systemRate', slot: { placeholder: '系统抽查卷比例' } },
+    { label: '系统抽查卷比例', slotType: 'inputNumber', prop: 'systemRate', slot: { placeholder: '系统抽查卷比例' } },
     'row-12'
   ),
   Span6(
     {
       label: '档次抽查比例',
-      slotType: 'input',
-      prop: 'levelRange',
-      slot: { placeholder: '档次抽查比例', disabled: true },
+      slotName: 'setLevelRange',
     },
     'row-12'
   ),
-  Span6({ slotName: 'setLevelRange', labelWidth: '0px' }, 'row-12'),
   Span6({ slotName: 'expand' }, 'expand'),
   Span6({ slotName: 'operation' }, 'operation'),
 ])
@@ -247,11 +257,13 @@ const items = computed<EpFormItem[]>(() => [
 if (isEdit) {
   getMainQuestionInfo({ subjectCode: props.subjectCode, mainNumber: +props.mainNumber }).then((result) => {
     Object.assign(model, omit(result, 'examId'))
+    levelRangValues.value = result.levelRange.slice(0)
   })
 }
 
 const onSetLevelRangeSubmit = () => {
-  console.log('onSetLevelRangeSubmit')
+  model.levelRange = levelRangValues.value
+  setLevelRangeVisible.value = false
 }
 
 const onSubmit = async () => {