resource-admin/src/views/system-manage/param-settings/component/common-setting.tsx

import {NAlert, NButton, NForm, NFormItemGi, NGrid, NInput, NInputGroup, useMessage} from 'naive-ui'
import {defineComponent, onMounted, reactive, ref} from 'vue'
import {sysParamConfigQueryByParamNameList, sysParamConfigUpdate} from '@views/system-manage/param-settings/api'

export default defineComponent({
  name: 'project-param-setting',
  setup() {
    const forms = reactive({}) as any
    const formsRef = ref()
    const btnLoading = ref(false)
    const message = useMessage()


    onMounted(async () => {
      const {data} = await sysParamConfigQueryByParamNameList("" +
      "not_played_note_percent" +
      ",played_note_high_low_percent" +
      ",played_note_fast_slow_percent" +
      ",played_note_duration_less_percent" +
      ",evaluation_level_score_less" +
      ",evaluation_level_score_less_beginner" +
      ",not_proficient_section_score" as any)
      if (data) {
        data.forEach((row: any) => {
          forms[row.paramName] = row.paramValue
        })
      } else {
        message.error('加载配置参数失败')
      }
    })

    const onSubmit = async () => {
      const configs = [] as any
      Object.keys(forms).forEach((item) => {
        configs.push({
          "paramName": item,
          "paramValue": forms[item],
        })
      })
      const param = {
        group: 'OTHER',
        configs: configs
      }
      btnLoading.value = true
      try {
        const res = (await sysParamConfigUpdate(param)) as any
        if (res && res.code == '200') {
          message.success('保存成功')
        }
      } catch (err) {
      }
      btnLoading.value = false
    }

    return () => (
        <>
          <NForm labelPlacement="left" model={forms} requireMarkPlacement="left" ref={formsRef}>
            <NAlert
                title="云教练配置"
                showIcon={false}
                bordered={false}
                style="margin-bottom: 12px;"
            />
            <h3>1、异常情况提示配置</h3>
            <NGrid cols={1} style={"padding-left: 13px"}>
              <NFormItemGi
                  style={"margin-top:10px"}
                  label="设备问题：未演奏音符达到"
                  path="not_played_note_percent"
                  rule={[
                    {
                      required: true,
                      pattern: /^\d+$/,
                      message: '请输入',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInputGroup style={"width: 140px !important;margin-right: 14px"}>
                  <NInput v-model:value={forms['not_played_note_percent']}>
                    {{suffix: () => '%'}}
                  </NInput>
                </NInputGroup>
              </NFormItemGi>
              <NFormItemGi
                  label="音准问题：满足音符偏高/偏低达到"
                  path="played_note_high_low_percent"
                  rule={[
                    {
                      required: true,
                      pattern: /^\d+$/,
                      message: '请输入',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInputGroup style={"width: 140px !important;margin-right: 14px"}>
                  <NInput v-model:value={forms['played_note_high_low_percent']}>
                    {{suffix: () => '%'}}
                  </NInput>
                </NInputGroup>
                时提示
              </NFormItemGi>
              <NFormItemGi
                  label="节奏问题：演奏音符偏快/偏慢达到"
                  path="played_note_fast_slow_percent"
                  rule={[
                    {
                      required: true,
                      pattern: /^\d+$/,
                      message: '请输入',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInputGroup style={"width: 140px !important;margin-right: 14px"}>
                  <NInput v-model:value={forms['played_note_fast_slow_percent']}>
                    {{suffix: () => '%'}}
                  </NInput>
                </NInputGroup>
                时提示
              </NFormItemGi>
              <NFormItemGi
                  label="完整性问题：演奏音符时值不足达到"
                  path="played_note_duration_less_percent"
                  rule={[
                    {
                      required: true,
                      pattern: /^\d+$/,
                      message: '请输入',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInputGroup style={"width: 140px !important;margin-right: 14px"}>
                  <NInput v-model:value={forms['played_note_duration_less_percent']}>
                    {{suffix: () => '%'}}
                  </NInput>
                </NInputGroup>
                时提示
              </NFormItemGi>
              <NFormItemGi
                  label="评测难度：评测级别为进阶、大师时，评测维度分数都低于"
                  path="evaluation_level_score_less"
                  rule={[
                    {
                      required: true,
                      pattern: /^\d+$/,
                      message: '请输入',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInputGroup style={"width: 140px !important;margin-right: 14px"}>
                  <NInput v-model:value={forms['evaluation_level_score_less']}>
                    {{suffix: () => '分'}}
                  </NInput>
                </NInputGroup>
                时提示
              </NFormItemGi>
              <NFormItemGi
                  label="评测难度：评测级别为入门时，评测维度分数都低于"
                  path="evaluation_level_score_less_beginner"
                  rule={[
                    {
                      required: true,
                      pattern: /^\d+$/,
                      message: '请输入',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInputGroup style={"width: 140px !important;margin-right: 14px"}>
                  <NInput v-model:value={forms['evaluation_level_score_less_beginner']}>
                    {{suffix: () => '分'}}
                  </NInput>
                </NInputGroup>
                时提示
              </NFormItemGi>
              <NFormItemGi
                  label="不熟练小节：评测分值不低于"
                  path="not_proficient_section_score"
                  rule={[
                    {
                      required: true,
                      pattern: /^\d+$/,
                      message: '请输入',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInputGroup style={"width: 140px !important;margin-right: 14px"}>
                  <NInput v-model:value={forms['not_proficient_section_score']}>
                    {{suffix: () => '分'}}
                  </NInput>
                </NInputGroup>
              </NFormItemGi>
            </NGrid>
          </NForm>

          <NButton
              type="primary"
              onClick={onSubmit}
              loading={btnLoading.value}
              // v-auth="sysParamConfig/update1750838255892299777"
          >
            保存设置
          </NButton>
        </>
    )
  }
})