feat: 新增系统参数配置功能；

src/api/alarm/index.ts

@@ -65,7 +65,7 @@ export const getAlarmPlanTemplateList = (params: {
 /**
  * 告警计划模板删除
  */
-export const deleteAlarmPlanTemplate = (params: { id: number }): Promise<ResponseData<null>> => {
+export const deleteAlarmPlanTemplate = (params: { id: number }): Promise<ResponseData<object>> => {
   return request.post('/alarm/plan/delTpl', params)
 }
 

src/api/system/index.ts

@@ -13,3 +13,45 @@ export const queryRoleList = (): Promise<
 > => {
   return request.get('/system/roleList')
 }
+
+/**
+ * 全局系统参数保存
+ */
+
+export const saveSystemConfig = (params: {
+  paramId?: number | null
+  paramCode: string
+  paramName: string
+  paramValue: string
+  paramDesc?: string
+  remark?: string
+}): Promise<ResponseData<object>> => {
+  return request.post('/system/parameter/upsert', params)
+}
+
+/**
+ * 全局系统参数查询
+ */
+export const querySystemConfig = (params: {
+  paramCode?: string
+}): Promise<
+  ResponseData<
+    {
+      paramId: number
+      paramCode: string
+      paramName: string
+      paramValue: string
+      paramDesc: string
+      remark: string
+    }[]
+  >
+> => {
+  return request.post('/system/parameter/query', params)
+}
+
+/**
+ * 全局系统参数删除
+ */
+export const deleteSystemConfig = (params: { paramId: string }): Promise<ResponseData<object>> => {
+  return request.post('/system/parameter/delete', params)
+}

src/views/system/config/index.vue

@@ -1,12 +1,265 @@
 vabse
 <template>
-  <div> 参数配置 </div>
+  <div>
+    <info-card class="alarmPeriod">
+      <info-item-group title="系统参数">
+        <template #extra>
+          <a-space>
+            <a-button type="primary" size="small" @click="addConfigHandler"> 新增 </a-button>
+          </a-space>
+        </template>
+        <ScrollContainer style="max-height: 300px">
+          <a-descriptions title="" bordered :column="1" size="small">
+            <a-descriptions-item
+              v-for="(item, index) in systemConfigList"
+              :key="index"
+              :label="item.paramName"
+            >
+              <div class="alarmPeriod-configValue">
+                <a-space class="alarmPeriod-configValue-content">
+                  <div>{{ item.paramValue }}</div>
+                  <div style="color: #888">{{ item.paramDesc }}</div>
+                </a-space>
+                <a-space class="alarmPeriod-configValue-action">
+                  <EditOutlined @click="editParamHandler(index)" />
+                  <a-popconfirm
+                    title="确认删除参数吗？"
+                    ok-text="确认"
+                    cancel-text="取消"
+                    @confirm="deleteParamHandler(item?.parameterId as string)"
+                  >
+                    <DeleteOutlined />
+                  </a-popconfirm>
+                </a-space>
+              </div>
+            </a-descriptions-item>
+          </a-descriptions>
+        </ScrollContainer>
+      </info-item-group>
+    </info-card>
+
+    <baseModal v-model:open="isOpenConfig" title="新增参数">
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :label-col="{ style: { width: '80px' } }"
+        hideRequiredMark
+      >
+        <a-form-item
+          label="参数编码"
+          name="paramCode"
+          :rules="[{ required: true, message: '请输入参数编码' }]"
+        >
+          <a-input
+            v-model:value.trim="formState.paramCode"
+            placeholder="请输入参数编码"
+            :maxlength="30"
+            show-count
+            allow-clear
+          />
+        </a-form-item>
+
+        <a-form-item
+          label="参数名称"
+          name="paramName"
+          :rules="[{ required: true, message: '请输入参数名称' }]"
+        >
+          <a-input
+            v-model:value.trim="formState.paramName"
+            placeholder="请输入参数名称"
+            :maxlength="30"
+            show-count
+            allow-clear
+          />
+        </a-form-item>
+
+        <a-form-item
+          label="参数值"
+          name="paramValue"
+          :rules="[{ required: true, message: '请输入参数值' }]"
+        >
+          <a-input
+            v-model:value.trim="formState.paramValue"
+            placeholder="请输入参数值，如: 30"
+            :maxlength="30"
+            show-count
+            allow-clear
+          />
+        </a-form-item>
+
+        <a-form-item label="参数描述" name="paramDesc">
+          <a-input
+            v-model:value.trim="formState.paramDesc"
+            placeholder="请输入参数描述，如: 天"
+            :maxlength="30"
+            show-count
+            allow-clear
+          />
+        </a-form-item>
+
+        <a-form-item label="备注" name="remark">
+          <a-input
+            v-model:value.trim="formState.remark"
+            placeholder="请输入备注"
+            :maxlength="50"
+            show-count
+            allow-clear
+          />
+        </a-form-item>
+      </a-form>
+
+      <div class="footer">
+        <a-space>
+          <a-button @click="cancel">取消</a-button>
+          <a-button type="primary" :loading="confirmLoading" @click="confirm">保存</a-button>
+        </a-space>
+      </div>
+    </baseModal>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive } from 'vue'
+import infoCard from '@/views/device/detail/components/infoCard/index.vue'
+import infoItemGroup from '@/views/device/detail/components/infoItemGroup/index.vue'
+import { message, type FormInstance } from 'ant-design-vue'
+import * as systemApi from '@/api/system'
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+
 defineOptions({
   name: 'SystemConfigIndex',
 })
+
+const formRef = ref<FormInstance>()
+const isOpenConfig = ref<boolean>(false)
+
+type FormState = {
+  parameterId?: string | null // 系统参数表主键id 新增时不传
+  paramCode: string // 参数编码
+  paramName: string // 参数名称
+  paramValue: string // 参数值
+  paramDesc: string // 参数描述
+  remark: string // 备注
+}
+
+const formState = reactive<FormState>({
+  parameterId: undefined,
+  paramCode: '',
+  paramName: '',
+  paramValue: '',
+  paramDesc: '',
+  remark: '',
+})
+// 新增参数
+const addConfigHandler = () => {
+  isOpenConfig.value = true
+}
+
+const cancel = () => {
+  isOpenConfig.value = false
+  formRef.value?.resetFields()
+  formState.parameterId = undefined
+  formState.paramCode = ''
+  formState.paramName = ''
+  formState.paramValue = ''
+  formState.paramDesc = ''
+  formState.remark = ''
+}
+
+const confirmLoading = ref<boolean>(false)
+const confirm = async () => {
+  try {
+    confirmLoading.value = true
+    await formRef.value?.validate()
+    await systemApi.saveSystemConfig({
+      paramId: undefined,
+      paramCode: formState.paramCode,
+      paramName: formState.paramName,
+      paramValue: formState.paramValue,
+      paramDesc: formState.paramDesc,
+      remark: formState.remark,
+    })
+    message.success('保存成功')
+    isOpenConfig.value = false
+    fetchSystemConfig()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    confirmLoading.value = false
+  }
+}
+
+const systemConfigList = ref<FormState[]>([])
+// 查询系统参数列表
+const fetchSystemConfig = async () => {
+  try {
+    const res = await systemApi.querySystemConfig({})
+    systemConfigList.value = res.data || []
+  } catch (error) {
+    console.error(error)
+  }
+}
+fetchSystemConfig()
+
+// 编辑参数
+const editParamHandler = (index: number) => {
+  isOpenConfig.value = true
+  try {
+    formState.parameterId = systemConfigList.value[index]?.parameterId
+    formState.paramCode = systemConfigList.value[index]?.paramCode
+    formState.paramName = systemConfigList.value[index]?.paramName
+    formState.paramValue = systemConfigList.value[index]?.paramValue
+    formState.paramDesc = systemConfigList.value[index]?.paramDesc
+    formState.remark = systemConfigList.value[index]?.remark
+    isOpenConfig.value = true
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 删除参数
+const deleteParamHandler = async (parameterId: string) => {
+  try {
+    await systemApi.deleteSystemConfig({ paramId: parameterId })
+    message.success('删除成功')
+    fetchSystemConfig()
+  } catch (error) {
+    console.error(error)
+  }
+}
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.alarmPeriod {
+  max-width: 450px;
+  max-height: 450px;
+  overflow: hidden;
+
+  &-configValue {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      font-size: 14px;
+      &:last-child {
+        color: #888;
+      }
+    }
+
+    &-action {
+      padding-left: 10px;
+      font-size: 12px;
+      color: #888;
+    }
+  }
+}
+
+:deep(.ant-descriptions-item-label) {
+  width: 150px;
+}
+</style>