-前端提交：参数管理

kicc-ui/src/api/system/config.ts

@@ -0,0 +1,25 @@
+import { ConfigParams, Config, ConfigResult } from './model/configModel'
+import { defHttp } from '/@/utils/http/axios';
+import {isDef} from "/@/utils/is";
+
+enum Api {
+    Page = '/system_proxy/system/config/list',
+    Save = '/system_proxy/system/config/save',
+    Update = '/system_proxy/system/config/update',
+    Remove = '/system_proxy/system/config/remove',
+}
+
+export const list = (params: ConfigParams) =>
+    defHttp.get({ url: Api.Page, params });
+
+
+export const set = (params: Config) => {
+    if (isDef(params.id)) {
+        return defHttp.put({ url: Api.Update, params });
+    }else {
+        return defHttp.post({ url: Api.Save, params });
+    }
+}
+
+export const remove = (params: {ids: string}) =>
+    defHttp.get<ConfigResult>({ url: Api.Page + `/${params.ids}` });

kicc-ui/src/api/system/model/configModel.ts

@@ -0,0 +1,57 @@
+// 引入基础包
+import { Page, R, CommonEntity } from '/@/api/model';
+
+export type ConfigParams = {
+    /**
+     * 参数主键
+     */
+    id: string;
+
+    /**
+     * 参数名称
+     */
+    name: string;
+
+    /**
+     * 参数键名
+     */
+    key: string;
+
+    /**
+     * 系统内置 0:是，1否
+     */
+    isSys:string;
+
+} & Page;
+
+
+export interface Config extends CommonEntity {
+    /**
+     * 参数主键
+     */
+    id: string;
+
+    /**
+     * 参数名称
+     */
+    name: string;
+
+    /**
+     * 参数键名
+     */
+    key: string;
+
+    /**
+     * 参数键值
+     */
+    value:string;
+
+    /**
+     * 系统内置 0:是，1否
+     */
+    isSys:string;
+
+}
+
+
+export type ConfigResult = R<Config>;

kicc-ui/src/views/system/config/ConfigModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <BasicModal
+      v-bind="$attrs"
+      @register="registerModal"
+      @ok="handleSubmit"
+      width="720px">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+import { defineComponent, ref, unref } from 'vue';
+import {BasicModal, ModalProps, useModalInner} from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from './config.data';
+import { set } from '/@/api/system/config';
+
+export default defineComponent({
+  name: 'ConfigModal',
+  components: { BasicModal, BasicForm },
+  emits: ['success', 'register'],
+  setup(_, { emit }) {
+    const isUpdate = ref(true);
+
+    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+      labelWidth: 100,
+      schemas: formSchema,
+      showActionButtonGroup: false,
+      baseColProps: { span: 24 }
+    });
+
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      await resetFields();
+      const props: Partial<ModalProps> = { confirmLoading: false };
+
+      isUpdate.value = !!data?.isUpdate;
+
+      if (unref(isUpdate)) {
+        await setFieldsValue({
+          ...data.record,
+        });
+        props.title = "编辑参数";
+      }else {
+        props.title = "新增参数";
+      }
+
+      setModalProps(props);
+    });
+
+    async function handleSubmit() {
+      try {
+        const values = await validate();
+        setModalProps({ confirmLoading: true });
+        await set(values);
+        closeModal();
+        emit('success');
+      } finally {
+        setModalProps({ confirmLoading: false });
+      }
+    }
+
+    return { registerModal, registerForm, handleSubmit };
+  },
+});
+</script>

kicc-ui/src/views/system/config/config.data.ts

@@ -0,0 +1,143 @@
+/**
+ * @program: kicc-ui
+ * @description: 角色模块动态渲染配置
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/4/21
+ */
+
+import {BasicColumn} from '/@/components/Table';
+import {FormSchema} from '/@/components/Table';
+import {h} from 'vue';
+import {Tag} from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+    {
+        title: '参数名称',
+        dataIndex: 'name',
+        width: 200
+    },
+    {
+        title: '参数键名',
+        dataIndex: 'key',
+        width: 200
+    },
+    {
+        title: '参数键值',
+        dataIndex: 'value',
+        width: 200
+    },
+    {
+        title: '系统内置',
+        dataIndex: 'isSys',
+        width: 120,
+        customRender: ({record}) => {
+            let text = '';
+            if (record.isSys === '0'){
+                text = '是';
+            }else {
+                text = '否';
+            }
+            return h(Tag, ()=> text);
+        }
+    },
+    {
+        title: '备注',
+        dataIndex: 'remarks',
+        customRender: ({record}) => {
+            return record.remarks || h(Tag, {color: 'red'}, () => '暂无数据');
+        }
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime'
+    }
+];
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'name',
+        label: '参数名称',
+        component: 'Input',
+        componentProps: {
+            placeholder: '请输入角色名称',
+        },
+        colProps: {span: 8}
+    },
+    {
+        field: 'key',
+        label: '参数键名',
+        component: 'Input',
+        componentProps: {
+            placeholder: '请输入参数键名',
+        },
+        colProps: {span: 8}
+    },
+    {
+        field: 'isSys',
+        label: '系统内置',
+        component: 'Select',
+        componentProps: {
+            options: [
+                {label: '是', value: '0'},
+                {label: '否', value: '1'}
+            ]
+        },
+        colProps: {span: 7}
+    }
+];
+
+export const formSchema: FormSchema[] = [
+    {
+        field: 'id',
+        label: 'ID',
+        component: 'Input',
+        show: false
+    },
+    {
+        field: 'name',
+        label: '参数名称',
+        required: true,
+        component: 'Input',
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'key',
+        label: '参数键名',
+        component: 'Input',
+        required: true,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'value',
+        label: '参数键值',
+        component: 'Input',
+        required: true,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'isSys',
+        label: '系统内置',
+        component: 'RadioButtonGroup',
+        defaultValue: '0',
+        componentProps: {
+            options: [
+                {label: '是', value: '0'},
+                {label: '否', value: '1'}
+            ],
+        },
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        label: '备注',
+        field: 'remarks',
+        component: 'InputTextArea',
+    }
+];

kicc-ui/src/views/system/config/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable"
+                @fetch-success="handleSelectionChange"
+                @selection-change="handleSelectionChange"
+    >
+      <template #toolbar>
+        <a-button v-auth="['config_add']"
+                  type="primary"
+                  @click="handleAdd()"
+        >新增参数</a-button>
+        <a-button v-auth="['config_edit']"
+                  type="primary"
+                  :disabled="state.single"
+                  @click="handleEdit()"
+        >修改参数</a-button>
+        <a-button v-auth="['config_del']"
+                  type="primary"
+                  :disabled="state.multiple"
+                  @click="handleDel()"
+        >删除参数</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[
+          {
+            label: '编辑',
+            icon: 'fa6-regular:pen-to-square',
+            auth: ['role_edit'],
+            onClick: handleEdit.bind(null, record)
+          },
+          {
+            label: '删除',
+            icon: 'ant-design:delete-outlined',
+            auth: ['role_del'],
+            color: 'error',
+            onClick: handleDel.bind(null, record)
+          }]"
+        />
+      </template>
+    </BasicTable>
+    <ConfigModal @register="registerModal" @success="handleSuccess"/>
+  </div>
+</template>
+<script lang="ts" setup>
+  /**
+   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+   * author entfrm开发团队-王翔
+   */
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { list, remove } from '/@/api/system/config';
+  import ConfigModal from './ConfigModal.vue';
+  import { columns, searchFormSchema } from './config.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { reactive, toRaw } from 'vue';
+  import {useModal} from "/@/components/Modal";
+
+  const { createConfirm } = useMessage();
+  const { createMessage } = useMessage();
+
+  const state = reactive({
+    // 选中数组
+    ids: [],
+    // 非单个禁用
+    single: true,
+    // 非多个禁用
+    multiple: true
+  });
+
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload }] = useTable({
+    title: '角色列表',
+    api: list,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowSelection: { type: 'checkbox' },
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    actionColumn: {
+      width: 220,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: false
+    }
+  });
+
+  /** 处理多选框选中数据 */
+  function handleSelectionChange(selection?: Recordable) {
+    const rawRows = toRaw(selection?.rows) || [];
+    state.ids = rawRows.map(item => item.id);
+    state.single = rawRows.length != 1;
+    state.multiple = !rawRows.length;
+  }
+
+  /** 新增按钮操作,行内新增与工具栏局域新增通用 */
+  function handleAdd() {
+    openModal(true,{isUpdate: false });
+  }
+
+  /** 编辑按钮操作,行内编辑 */
+  function handleEdit(record?: Recordable) {
+    record = record || { id: toRaw(state.ids) };
+    openModal(true, { isUpdate: true, record });
+  }
+
+  /** 删除按钮操作,行内删除 */
+  async function handleDel(record?: Recordable) {
+    const ids = record?.id || toRaw(state.ids);
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: `是否确认删除参数编号为${ids}参数吗?`,
+      onOk: async () => {
+        await remove(ids);
+        createMessage.success('删除成功!');
+        handleSuccess();
+      }
+    });
+  }
+
+  /** 处理表单提交成功 */
+  function handleSuccess() {
+    reload();
+  }
+
+</script>