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

import {NButton, NForm, NFormItemGi, NGrid, NIcon, NInput, NTooltip, useMessage} from 'naive-ui'
import {defineComponent, onMounted, reactive, ref} from 'vue'
import {sysParamConfigQueryByParamName, sysParamConfigUpdate} from "@views/system-manage/param-settings/api";
import {HelpCircleOutline} from "@vicons/ionicons5";

export default defineComponent({
  name: 'project-param-setting',
  props: {
    appKey: {
      type: String,
      default: 'KT'
    }
  },
  setup(props) {
    const forms = reactive({
      id: null as any,
      paramValue: null as any,
      group: null as any,
    }) as any
    const formsRef = ref()
    const btnLoading = ref(false)
    const message = useMessage()

    const paramName = (() => {
      return props.appKey.toLowerCase() + '_frequency' as any
    })

    onMounted(async () => {
      const {data} = await sysParamConfigQueryByParamName(paramName());
      if (data) {
        forms.id = data.id
        forms.paramValue = data.paramValue
        forms.group = data.group
      } else {
        message.error("加载配置参数失败");
      }
    })


    const onSubmit = async () => {
      const param = {
        group: forms.group,
        configs: [
          {
            ...forms
          }
        ]
      }
      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}>
            <NGrid cols={1}>
              <NFormItemGi
                  label="评测频率"
                  path="scope_of_attendance"
                  rule={[
                    {
                      required: false,
                      message: '请输入评测频率',
                      trigger: ['blur', 'input']
                    }
                  ]}
              >
                <NInput
                    v-model:value={forms.paramValue}
                    placeholder="请输入评测频率"
                    clearable
                    style="width:200px"
                />
                <NTooltip style={"padding-left: 10px"}>
                  {{
                    default: () => '评测频率支持输入多个，输入多个时需要逗号隔开',
                    trigger: () => (
                        <span style="overflow: hidden;display: inline-block;max-width: 200px;white-space: nowrap;text-overflow: ellipsis;">
                      <NIcon size="20">
                          <HelpCircleOutline/>
                      </NIcon>
                    </span>
                    )
                  }}
                </NTooltip>
              </NFormItemGi>
            </NGrid>
          </NForm>

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