系统配置，菜单动态切换

src/api/sys/general.ts

@@ -1,5 +1,11 @@
 import { defHttp } from '/@/utils/http/axios';
-import { CommonRowModel, GroupModel, AddConfigInfoParams } from './model/generalModel';
+import {
+  CommonRowModel,
+  GroupModel,
+  AddConfigInfoParams,
+  // EditConfigInfoParams,
+  DeleteConfigInfoParams,
+} from './model/generalModel';
 
 enum Api {
   GroupUrl = 'general/group/', // 系统配置分组
@@ -36,3 +42,23 @@ export function addConfigInfo(params: AddConfigInfoParams) {
     params,
   });
 }
+/**
+ * @description: 获取系统配置表
+ */
+export function editConfigInfo(params) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.ConfigUrl,
+    method: 'PUT',
+    params,
+  });
+}
+/**
+ * @description: 删除系统配置 id
+ */
+export function deleteConfigInfo(params: DeleteConfigInfoParams) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.ConfigUrl + params.id,
+    method: 'DELETE',
+    params,
+  });
+}

src/api/sys/model/generalModel.ts

@@ -25,3 +25,16 @@ export interface AddConfigInfoParams {
   rule?: string;
   expend?: string;
 }
+
+// /**
+//  * @description: 修改系统配置参数
+//  */
+// export interface EditConfigInfoParams {
+//   id: number;
+// }
+/**
+ * @description: 删除系统配置参数
+ */
+export interface DeleteConfigInfoParams {
+  id: number;
+}

src/utils/validTools.ts

@@ -31,7 +31,7 @@ const regexEnum = {
   tel: '^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$', // 电话号码的函数(包括验证国内区号,国际区号,分机号)
   username: '^\\w+$', // 用来用户注册。匹配由数字、26个英文字母或者下划线组成的字符串
   password: '^(?=.*\\d)(?=.*[a-zA-Z])[\\da-zA-Z~!@#$%^&*]{6,18}$', // 密码(长度6-18位  字符串类型：数字 英文 特殊符号且必须包含数字及英文)
-  letter: '^[A-Za-z]+$', // 字母
+  letters: '^[A-Za-z]+$', // 字母
   letter_u: '^[A-Z]+$', // 大写字母
   letter_l: '^[a-z]+$', // 小写字母
   letter_num: '^\\w+$', // 匹配由数字、26个英文字母或者下划线组成的字符串

src/views/admin/group/popup.vue

@@ -76,7 +76,6 @@
       });
       const [register, { closeModal }] = useModalInner((data) => {
         console.log(data);
-        console.log('data=========================');
         resetFields();
         // if (unref(isUpdate)) {
         //   setFieldsValue(data);

src/views/admin/rule/data.ts

@@ -127,6 +127,12 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    show: ({ values }) => {
+      if (values.pid || !values.ismenu) {
+        return false;
+      }
+      return true;
+    },
     required: true,
   },
   {

src/views/admin/rule/popup.vue

@@ -61,7 +61,9 @@
         setFieldsValue(data);
         updateSchema({
           field: 'pid',
-          componentProps: { treeData: popupData.treeData },
+          componentProps: {
+            treeData: popupData.treeData,
+          },
         });
       });
 

src/views/general/config/customComponents/ArrayCom.vue

@@ -8,10 +8,10 @@
     <div class="array-item">
       <div class="content-item" v-for="(item, index) in list" :key="index">
         <div class="name-content">
-          <Input v-model:value="item.name" />
+          <Input v-model:value="item.name" @change="onChange" />
         </div>
         <div class="value-content">
-          <Input v-model:value="item.value" />
+          <Input v-model:value="item.value" @change="onChange" />
         </div>
         <a-button class="mr-2" preIcon="mdi:close-thick" color="error" @click="remove(index)" />
         <a-button class="mr-2 drag-btn" preIcon="ri:drag-move-2-fill" type="primary" />
@@ -25,18 +25,30 @@
   import { Input } from 'ant-design-vue';
   import Sortable from 'sortablejs';
 
+  interface Data {
+    name: string;
+    value: string;
+  }
+  const props = {
+    value: { type: Object, default: {} },
+    tip: { type: String, default: '' },
+  };
+
   export default defineComponent({
     components: { Input },
-    setup() {
+    props,
+    emits: ['change'],
+    setup(props, { emit }) {
       const state = reactive({
-        list: [
-          { name: '12df', value: 'hello' },
-          { name: 'sdfa33', value: 'dfds33' },
-        ] as object[],
+        list: [] as Data[],
       });
 
       // 初始化 sortable 实现拖动
       function initSortable() {
+        for (let k in props.value) {
+          state.list.push({ name: k, value: props.value[k] });
+        }
+        // state.list = props.value as object[];
         const el = document.querySelector('.array-item') as any;
         Sortable.create(el, {
           handle: '.drag-btn',
@@ -78,16 +90,29 @@
         initSortable(); // 开启拖拽功能
       });
 
+      function formateList() {
+        const data = {};
+        state.list.map((item) => {
+          data[item.name] = item.value;
+        });
+        return data;
+      }
+
+      function onChange() {
+        const data = formateList();
+        emit('change', data);
+      }
       function create() {
-        console.log(`state.list`, state.list);
         state.list.push({ name: '', value: '' });
       }
       function remove(i) {
-        console.log(`i`, i);
         state.list.splice(i, 1);
+        const data = formateList();
+        emit('change', data);
       }
 
       return {
+        onChange,
         create,
         remove,
         ...toRefs(state),

src/views/general/config/data.ts

@@ -36,7 +36,7 @@ export const columns: BasicColumn[] = [
             value: record.value,
             tip: record.tip,
             errMsg: record.errMsg || '',
-            rules: record.rule.split(';') || [],
+            rules: record.rule.split(',') || [],
             style: { width: '100%' },
             onChange: onchange,
           });
@@ -48,7 +48,7 @@ export const columns: BasicColumn[] = [
             value: record.value,
             tip: record.tip,
             errMsg: record.errMsg || '',
-            rules: record.rule.split(';') || [],
+            rules: record.rule.split(',') || [],
             style: { width: '100%' },
             onChange: onNumberChange,
           });
@@ -145,14 +145,14 @@ export const columns: BasicColumn[] = [
             onChange: onRadioChange,
           });
         case 'array':
-          // const onRadioChange = (evt) => {
-          //   record.value = evt.target.value;
-          // };
+          const onArrayChange = (val) => {
+            record.value = val;
+          };
           return h(ArrayCom, {
-            // value: record.value,
+            value: record.value,
             // options: record.option,
             // style: { width: '65%' },
-            // onChange: onRadioChange,
+            onChange: onArrayChange,
           });
       }
     },
@@ -173,18 +173,76 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: 20,
     },
-    defaultValue: '1',
+    defaultValue: 'string',
     componentProps: {
       options: [
         {
           label: '字符',
-          value: '1',
-          key: '1',
+          value: 'string',
+        },
+        {
+          label: '文本',
+          value: 'text',
+        },
+        {
+          label: '编辑器',
+          value: 'editor',
         },
         {
           label: '数字',
-          value: '2',
-          key: '2',
+          value: 'number',
+        },
+        {
+          label: '日期',
+          value: 'time',
+        },
+        {
+          label: '日期时间',
+          value: 'Datetime',
+        },
+        {
+          label: '列表',
+          value: 'list',
+        },
+        {
+          label: '列表多选',
+          value: 'mutipleList',
+        },
+        {
+          label: '图片',
+          value: 'pic',
+        },
+        {
+          label: '图片(多)',
+          value: 'mutiplePic',
+        },
+        {
+          label: '文件',
+          value: 'file',
+        },
+        {
+          label: '文件(多)',
+          value: 'MutipleFile',
+        },
+        {
+          label: '开关',
+          value: 'switch',
+        },
+        {
+          label: '复选',
+          value: 'multipleSelect',
+        },
+        {
+          label: '单选',
+          value: 'select',
+        },
+        {
+          label: '数组',
+          value: 'array',
+        },
+        {
+          label: '数组',
+          value: 'custom',
         },
       ],
     },
@@ -196,18 +254,28 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: 20,
     },
-    defaultValue: '1',
+    defaultValue: 'basic',
     componentProps: {
       options: [
         {
           label: '基础配置',
-          value: '1',
-          key: '1',
+          value: 'basic',
         },
         {
           label: '邮件配置',
-          value: '2',
-          key: '2',
+          value: 'email',
+        },
+        {
+          label: '字典配置',
+          value: 'dictionary',
+        },
+        {
+          label: '会员配置',
+          value: 'user',
+        },
+        {
+          label: '示例配置',
+          value: 'example',
         },
       ],
     },
@@ -219,7 +287,25 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: 20,
     },
-    rules: [{ required: true, trigger: 'blur' }],
+    rules: [
+      {
+        required: true,
+        validator: async (rule: any, value: any) => {
+          console.log(`rule`, rule);
+          console.log(`value`, value);
+          if (!value) {
+            return Promise.reject('请输入变量名');
+          }
+          if (value.length < 3 || value.lenght > 30) {
+            return Promise.reject('请填写3到30个字符');
+          }
+          if (value == 111) {
+            return Promise.reject('变量名已经存在');
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
   },
   {
     field: 'title',
@@ -332,9 +418,10 @@ export const schemas: FormSchema[] = [
     },
   },
   {
-    field: 'extra',
+    field: 'extend',
     component: 'InputTextArea',
     label: '扩展属性',
+    defaultValue: '',
     colProps: {
       span: 20,
     },

src/views/general/config/index.vue

@@ -12,12 +12,8 @@
       class="mr-2"
       @click="handleGroupBtn(group)"
     >
-      <!-- 基础配置 -->
       {{ group }}
     </a-button>
-    <!-- <a-button type="default" class="mr-2" @click="onEmailConfig"> 邮件配置 </a-button>
-    <a-button type="default" class="mr-2" @click="handleGroupBtn"> 字典配置 </a-button>
-    <a-button type="default" class="mr-2" @click="handleGroupBtn"> 会员配置 </a-button> -->
     <a-button
       preIcon="bx:bx-plus-medical"
       @mouseenter="showTip"
@@ -26,7 +22,11 @@
       class="mr-2"
     />
     <span v-if="tipShow" class="tip">点击添加新的配置</span>
-    <BasicTable ref="tableRef" :canResize="true" v-if="tableShow" @register="registerTable" />
+    <BasicTable ref="tableRef" :canResize="true" v-if="tableShow" @register="registerTable">
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" stopButtonPropagation />
+      </template>
+    </BasicTable>
     <BasicForm
       class="config-form"
       v-if="formShow"
@@ -34,7 +34,7 @@
       @submit="handleFormSubmit"
     />
     <div v-if="tableShow" class="actions">
-      <a-button class="mr-2" type="default" @click="handleGroupBtn">
+      <a-button class="mr-2" type="default" @click="handleTableReset">
         {{ t('common.resetText') }}
       </a-button>
       <a-button class="mr-2" type="primary" @click="handleTableSubmit">
@@ -44,6 +44,7 @@
   </CollapseContainer>
 </template>
 <script lang="ts">
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { defineComponent, nextTick, reactive, ref, toRefs, unref } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
@@ -54,19 +55,27 @@
   import {
     BasicTable,
     useTable,
-    // TableAction,
+    TableAction,
     // BasicColumn,
-    // ActionItem,
-    // EditRecordRow,
+    ActionItem,
+    EditRecordRow,
     TableActionType,
   } from '/@/components/Table';
-  import { getConfigGroup, getConfigInfo, addConfigInfo } from '/@/api/sys/general';
+  import {
+    getConfigGroup,
+    getConfigInfo,
+    addConfigInfo,
+    editConfigInfo,
+    deleteConfigInfo,
+  } from '/@/api/sys/general';
   import { columns } from './data';
 
   export default defineComponent({
-    components: { CollapseContainer, BasicTable, BasicForm },
+    components: { CollapseContainer, BasicTable, BasicForm, TableAction },
     setup() {
       const { t } = useI18n();
+      const { createMessage } = useMessage();
+      const { success /*, error */ } = createMessage;
       const tableHeight = adapt().tableHeight;
       const state = reactive({
         tipShow: false,
@@ -81,6 +90,13 @@
         maxHeight: tableHeight,
         api: getConfigInfo,
         afterFetch: afterFetch,
+        actionColumn: {
+          width: 160,
+          // title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
         showIndexColumn: false,
         pagination: false,
       });
@@ -108,21 +124,13 @@
 
       // 处理请求数据
       function afterFetch(result) {
-        console.log(`result`, result);
-        // let obj = result.dictionary.list[0].value;
-        // console.log(`result.dictionary.list[0].value`, obj)
-        // var keys = Object.keys(obj);
-        // console.log(`keys`, keys);
         result = result[state.group].list;
-        console.log(`result----after`, result);
         return result;
       }
       getGroupList();
       async function getGroupList() {
         const res = await getConfigGroup();
-        console.log(`res.group`, res.group);
         state.groupList = Object.values(res.group);
-        console.log(`state.groupList`, state.groupList);
       }
 
       function showTip() {
@@ -139,7 +147,6 @@
         await nextTick();
         getTableAction().reload();
         state.group = group.toLowerCase();
-        console.log(`state.group`, state.group);
       }
 
       function addConfig() {
@@ -147,37 +154,76 @@
         state.formShow = true;
       }
 
-      function handleTableSubmit() {
+      function handleTableReset() {
+        getTableAction().reload();
+      }
+
+      async function handleTableSubmit() {
         console.log('==========handleTableSubmit=========');
         const data = getTableAction().getDataSource();
         let flag = true;
-        console.log(`data`, data);
         data.map((item) => {
-          if (item.rule) {
+          if (item.rule && item.type !== 'array') {
             const rule = item.rule.split(',');
             const res = validateType(rule, item.value);
             item.errMsg = res.errMsg;
             if (!res.isValid) {
-              console.log(`item`, item);
               flag = res.isValid;
             }
           }
         });
         if (flag) {
-          console.log('=======全部校验通过========');
-          return;
+          const params = {};
+          data.map((item) => {
+            if (item.type == 'array') {
+              params[item.name] = JSON.stringify(item.value);
+            } else {
+              params[item.name] = item.value;
+            }
+          });
+          await editConfigInfo(params).then(() => {
+            getTableAction().reload();
+            success('修改成功!');
+          });
+        } else {
+          console.log('======未通过校验====');
         }
-        console.log('======未通过校验====');
       }
 
       async function handleFormSubmit(e) {
-        return;
-        await addConfigInfo(e);
-        console.log('=======values =======');
-        console.log(`e`, e);
+        if (!e.rule) {
+          e.rule = '';
+        } else {
+          e.rule = e.rule.toString();
+        }
+        await addConfigInfo(e).then(() => {
+          success('创建成功!');
+          handleGroupBtn('Basic'); // 跳转显示到table基础配置
+        });
+      }
+      async function handleDelete(record: Recordable) {
+        await deleteConfigInfo({ id: record.id }).then(() => {
+          getTableAction().reload();
+          success('删除成功!');
+        });
+      }
+
+      function createActions(record: EditRecordRow): ActionItem[] {
+        return [
+          {
+            label: '删除',
+            color: 'error',
+            icon: 'ic:outline-delete-outline',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDelete.bind(null, record),
+            },
+          },
+        ];
       }
       return {
         t,
+        createActions,
         tableRef,
         registerTable,
         registerForm,
@@ -185,6 +231,7 @@
         hideTip,
         handleGroupBtn,
         addConfig,
+        handleTableReset,
         handleTableSubmit,
         handleFormSubmit,
         ...toRefs(state),