图片上传，附件管理

src/components/Upload/src/BasicUpload.vue

@@ -9,7 +9,8 @@
         class="choose-btn"
         type="danger"
         @click="openChooseModal"
-        preIcon="carbon:cloud-upload"
+        preIcon="ic:sharp-view-list"
+        iconSize="16"
       >
         {{ t('component.upload.choose') }}
       </a-button>
@@ -27,6 +28,7 @@
           </template>
         </a-button> -->
       </Tooltip>
+      <span class="tip-span" v-if="tip">{{ tip }}</span>
     </a-button-group>
 
     <UploadModal
@@ -44,7 +46,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, unref, computed } from 'vue';
+  import { defineComponent, ref, watch, unref, computed, toRefs } from 'vue';
 
   import UploadModal from './UploadModal.vue';
   import UploadPreviewModal from './UploadPreviewModal.vue';
@@ -120,7 +122,7 @@
         showPreview,
         bindValue,
         t,
-        props,
+        ...toRefs(props),
       };
     },
   });
@@ -129,4 +131,11 @@
   .choose-btn {
     margin-left: 5px !important;
   }
+
+  .tip-span {
+    margin-left: 10px;
+    font-size: 13px;
+    line-height: 250%;
+    color: gray;
+  }
 </style>

src/components/Upload/src/props.ts

@@ -54,6 +54,10 @@ export const uploadContainerProps = {
     type: Boolean,
     default: false,
   },
+  tip: {
+    type: String,
+    default: '',
+  },
 };
 
 export const previewProps = {

src/store/modules/permission.ts

@@ -152,20 +152,7 @@ export const usePermissionStore = defineStore({
               },
             ],
           };
-          const test = {
-            path: '/test',
-            name: 'Test',
-            component: 'LAYOUT',
-            redirect: '/general/config',
-            meta: {
-              icon: 'ion:grid-outline',
-              title: '测试',
-            },
-          };
-          console.log(`routeList`, routeList);
           routeList.unshift(dashboard);
-          routeList.push(test);
-          console.log(`routeList==tree`, routeList);
         } catch (error) {
           console.error(error);
         }

src/views/admin/logs/index.vue

@@ -29,7 +29,6 @@
     BasicTable,
     useTable,
     TableAction,
-    BasicColumn,
     ActionItem,
     EditRecordRow,
     TableActionType,
@@ -155,10 +154,7 @@
         reloadMenu();
       }
 
-      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        if (false) {
-          console.log(column);
-        }
+      function createActions(record: EditRecordRow): ActionItem[] {
         return [
           {
             label: '详情',

src/views/general/attachment/customComponents/Image.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="wrap">
+    <a-image class="image" :src="src" :width="width" />
+  </div>
+</template>
+<script lang="ts">
+  import { Image } from 'ant-design-vue';
+  import { defineComponent, toRefs } from 'vue';
+
+  const props = {
+    src: { type: String, default: '' },
+    width: { type: String, default: '' },
+  };
+
+  export default defineComponent({
+    components: { aImage: Image },
+    props,
+    setup(props) {
+      return {
+        ...toRefs(props),
+      };
+    },
+  });
+</script>
+<style scoped>
+  .wrap {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    height: 100px;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+  }
+</style>

src/views/general/attachment/data.ts

@@ -0,0 +1,66 @@
+import { BasicColumn } from '/@/components/Table';
+import Image from './customComponents/Image.vue';
+import { h } from 'vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: 'ID',
+    align: 'center',
+    dataIndex: 'id',
+    width: 100,
+  },
+  {
+    title: '预览',
+    align: 'center',
+    dataIndex: 'imgUrl',
+    width: 140,
+    customRender: ({ record }) => {
+      return h(Image, {
+        src: record.imgUrl,
+        width: '80px',
+      });
+    },
+  },
+  {
+    title: '物理路径',
+    align: 'center',
+    dataIndex: 'url',
+    width: 250,
+  },
+  {
+    title: '宽度',
+    align: 'center',
+    dataIndex: 'imagewidth',
+    width: 100,
+  },
+  {
+    title: '高度',
+    align: 'center',
+    dataIndex: 'imageheight',
+    width: 100,
+  },
+  {
+    title: '图片类型',
+    align: 'center',
+    dataIndex: 'imagetype',
+    width: 100,
+  },
+  {
+    title: '储存引擎',
+    align: 'center',
+    dataIndex: 'storage',
+    width: 100,
+  },
+  {
+    title: 'Mime类型',
+    align: 'center',
+    dataIndex: 'mimetype',
+    width: 100,
+  },
+  {
+    title: '创建日期',
+    align: 'center',
+    dataIndex: 'createtime',
+    width: 160,
+  },
+];

src/views/general/attachment/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <CollapseContainer
+    class="attachment-container"
+    title="附件管理"
+    :canExpan="false"
+    helpMessage="主要用于管理上传到服务器或第三方存储的数据"
+  >
+    <a-button type="default" class="mr-2"> 全部 </a-button>
+    <a-button type="default" class="mr-2"> 图片 </a-button>
+    <a-button type="default" class="mr-2"> 音频 </a-button>
+    <a-button type="default" class="mr-2"> 视频 </a-button>
+    <a-button type="default" class="mr-2"> 文档 </a-button>
+    <a-button type="default" class="mr-2"> 应用 </a-button>
+    <a-button type="default" class="mr-2"> 压缩包 </a-button>
+    <BasicTable ref="tableRef" :canResize="true" @register="registerTable">
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" stopButtonPropagation />
+      </template>
+    </BasicTable>
+  </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 { useI18n } from '/@/hooks/web/useI18n';
+  import { adapt } from '/@/utils/adapt';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    ActionItem,
+    EditRecordRow,
+    TableActionType,
+  } from '/@/components/Table';
+  import { columns } from './data';
+
+  const fakeData = [
+    {
+      id: 1,
+      imgUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      url: 'http://localhost:3100/#/permission/admin',
+      imagewidth: 120,
+      imageheight: 120,
+    },
+    {
+      id: 2,
+      imgUrl: 'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
+      url: 'http://localhost:3100/#/permission/admin',
+      imagewidth: 120,
+      imageheight: 120,
+    },
+    {
+      id: 3,
+      imgUrl: 'http://jetbill.cn/uploads/20210712/51ae92cdb0bb22a88d6e73e62bcb1cad.jpg',
+      url: 'http://localhost:3100/#/permission/admin',
+      imagewidth: 120,
+      imageheight: 120,
+    },
+  ];
+
+  export default defineComponent({
+    name: 'Attchment',
+    components: { CollapseContainer, BasicTable, TableAction },
+    setup() {
+      const { t } = useI18n();
+      // const { createMessage } = useMessage();
+      // const { success /*, error */ } = createMessage;
+      const tableHeight = adapt().tableHeight;
+      const state = reactive({
+        groupList: [] as object[],
+        group: 'basic',
+      });
+      const tableRef = ref<Nullable<TableActionType>>(null);
+      const [registerTable] = useTable({
+        columns: columns,
+        maxHeight: tableHeight,
+        // api: ,
+        dataSource: fakeData,
+        afterFetch: afterFetch,
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+        showIndexColumn: false,
+        pagination: true,
+      });
+
+      function getTableAction() {
+        // 获取组件
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
+      }
+
+      // 处理请求数据
+      function afterFetch(result) {
+        result = result[state.group].list;
+        return result;
+      }
+
+      async function handleGroupBtn(group) {
+        await nextTick();
+        getTableAction().reload();
+        state.group = group.toLowerCase();
+      }
+
+      function handleTableReset() {
+        getTableAction().reload();
+      }
+
+      async function handleEdit(record: Recordable) {
+        console.log(`record`, record);
+        console.log('=====编辑');
+      }
+      async function handleDelete(record: Recordable) {
+        console.log(`record`, record);
+        console.log('删除=====');
+      }
+
+      function createActions(record: EditRecordRow): ActionItem[] {
+        return [
+          {
+            label: '编辑',
+            icon: 'ant-design:edit-outlined',
+            color: 'warning',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            color: 'error',
+            icon: 'ic:outline-delete-outline',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDelete.bind(null, record),
+            },
+          },
+        ];
+      }
+      return {
+        t,
+        createActions,
+        tableRef,
+        registerTable,
+        handleGroupBtn,
+        handleTableReset,
+        ...toRefs(state),
+      };
+    },
+  });
+</script>
+<style>
+  .attachment-container {
+    position: relative;
+  }
+
+  .vben-collapse-container__body > .mr-2 {
+    margin-top: 5px;
+    font-weight: 550 !important;
+  }
+</style>

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

@@ -36,7 +36,7 @@
     value: string;
   }
   const props = {
-    value: { type: Array, default: [] },
+    value: { type: Object, default: [] },
     tip: { type: String, default: '' },
   };
 
@@ -59,11 +59,13 @@
         //   state.list.push({ name: k, value: props.value[k] });
         // }
         state.list = [];
-        props.value.map((item: Object) => {
-          for (let k in item) {
-            state.list.push({ name: k, value: item[k] });
-          }
-        });
+        if (props.value instanceof Array) {
+          props.value.map((item: Object) => {
+            for (let k in item) {
+              state.list.push({ name: k, value: item[k] });
+            }
+          });
+        }
         // state.list = props.value as object[];
         const el = document.querySelector('.array-item') as any;
         sortCom = Sortable.create(el, {
@@ -140,7 +142,7 @@
 </script>
 <style scoped>
   .wrap {
-    width: 55%;
+    width: 65%;
   }
 
   .head {

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

@@ -57,7 +57,7 @@
   }
 
   .checkbox {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -8,8 +8,22 @@
     cancelText="关闭"
   >
     <a-button type="primary" preIcon="mdi:reload" iconSize="20" @click="reload" />
-    <a-button class="check-btn" type="success" @click="checked"> 选择 </a-button>
-    <BasicTable ref="tableRef" @register="registerTable" rowKey="id" @rowDbClick="handleDetail">
+    <a-button
+      v-if="type === 'images'"
+      class="check-btn"
+      :disabled="disable_btn"
+      type="success"
+      preIcon="fa-solid:check"
+      @click="checkedBatches"
+      >{{ t('component.upload.choose') }}</a-button
+    >
+    <BasicTable
+      ref="tableRef"
+      @register="registerTable"
+      @selectionChange="selectionChange"
+      @rowClick="selectionChange"
+      rowKey="id"
+    >
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" />
       </template>
@@ -17,7 +31,7 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, ref, toRefs, unref } from 'vue';
+  import { defineComponent, reactive, ref, toRefs, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { adapt } from '/@/utils/adapt';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -30,68 +44,57 @@
     TableActionType,
   } from '/@/components/Table';
   import { columns } from './chooseModalData';
-  interface PopupData {
-    title: string;
+  interface Btn {
+    disable_btn: boolean;
   }
-  const formData = [
+  const fakeData = [
     {
       id: 1,
-      username: 'test1',
-      title: '日志1',
-      url: 'http://localhost:3100/#/permission/admin',
-      ip: '0.0.0.0',
-      browser: 'Mozilla/5.0',
-      time: '2020-10-20',
+      imgUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      imagewidth: 120,
+      imageheight: 120,
+      createtime: '2020-10-20 21:22:22',
     },
     {
       id: 2,
-      username: 'test2',
-      title: '日志2',
-      url: 'http://localhost:3100/#/permission/admin',
-      ip: '0.0.0.0',
-      browser: 'Mozilla/5.0',
-      time: '2020-10-21',
+      imgUrl: 'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
+      imagewidth: 120,
+      imageheight: 120,
     },
     {
       id: 3,
-      username: 'test3',
-      title: '日志3',
-      url: 'http://localhost:3100/#/permission/admin',
-      ip: '0.0.0.0',
-      browser: 'Mozilla/5.0',
-      time: '2020-10-21',
+      imgUrl: 'http://jetbill.cn/uploads/20210712/51ae92cdb0bb22a88d6e73e62bcb1cad.jpg',
+      imagewidth: 120,
+      imageheight: 120,
     },
   ];
+  const props = {
+    value: { type: String, default: '' },
+    type: { type: String, default: '' },
+  };
 
   export default defineComponent({
     components: { BasicModal, BasicTable, TableAction },
-    props: {
-      popupData: {
-        type: Object as PropType<PopupData>,
-        default: () => {},
-      },
-    },
-    setup(props) {
+    props,
+    emits: ['checked', 'checkedBatches'],
+    setup(props, { emit }) {
       const { t } = useI18n();
-      const popupData = props.popupData as PopupData;
       const tableRef = ref<Nullable<TableActionType>>(null);
-      const currentEditKeyRef = ref('');
-      const modelRef = ref({});
       const adaptWidth = adapt();
-      const [register] = useModalInner((data) => {
-        // 方式2
-        modelRef.value = data;
+      const [register, { closeModal }] = useModalInner();
+      const btn = reactive<Btn>({
+        disable_btn: true,
       });
       const [registerTable] = useTable({
         // title: '管理员日志',
         // titleHelpMessage: '',
         rowSelection: { type: 'checkbox' },
         columns: columns,
-        clickToRowSelect: false, // 点击行不勾选
+        // clickToRowSelect: false, // 点击行不勾选
         // api: getUserList,
-        dataSource: formData,
+        dataSource: fakeData,
         actionColumn: {
-          width: 160,
+          width: 80,
           title: '操作',
           dataIndex: 'action',
           slots: { customRender: 'action' },
@@ -108,42 +111,33 @@
         }
         return tableAction;
       }
-
-      function getSelectRowList() {
-        // 获取选中行
-        console.log(getTableAction().getSelectRows());
-      }
-      function getSelectRowKeyList() {
-        // 获取选中行的key --- id
-        console.log(getTableAction().getSelectRowKeys());
+      function reload() {
+        console.log('========reload======');
       }
 
-      function handleChecked(record: EditRecordRow) {
-        currentEditKeyRef.value = record.id; // record.key
-
-        const data = getTableAction().getDataSource();
-        data.map((item) => {
-          if (item.id === record.id) {
-            record = item;
-          }
-        });
+      function selectionChange() {
+        const keys = getTableAction().getSelectRowKeys();
+        if (keys.length) {
+          btn.disable_btn = false;
+        } else {
+          btn.disable_btn = true;
+        }
       }
-      function checked(record: EditRecordRow) {
-        currentEditKeyRef.value = record.id; // record.key
 
-        const data = getTableAction().getDataSource();
-        data.map((item) => {
-          if (item.id === record.id) {
-            record = item;
-          }
-        });
+      function handleChecked(record) {
+        console.log(`record`, record);
+        emit('checked', record.id, closeModal);
+      }
+      async function checkedBatches() {
+        const keys = await getTableAction().getSelectRowKeys();
+        emit('checkedBatches', keys, closeModal);
       }
 
       function createActions(record: EditRecordRow): ActionItem[] {
         return [
           {
             label: '选择',
-            icon: 'akar-icons:eye-open',
+            icon: 'fa-solid:check',
             color: 'success',
             onClick: handleChecked.bind(null, record),
           },
@@ -152,16 +146,17 @@
 
       return {
         register,
+        tableRef,
         registerTable,
         adaptWidth,
-        checked,
+        checkedBatches,
+        selectionChange,
+        reload,
         createActions,
         getTableAction,
-        getSelectRowList,
-        getSelectRowKeyList,
-        model: modelRef,
         t,
-        ...toRefs(popupData),
+        ...toRefs(btn),
+        ...toRefs(props),
       };
     },
   });

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

@@ -55,7 +55,7 @@
   }
 
   .date-picker {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -63,7 +63,7 @@
   }
 
   input {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -71,7 +71,7 @@
   }
 
   .input-number {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -72,7 +72,7 @@
   }
 
   .input-text-area {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -56,7 +56,7 @@
   }
 
   .select {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -56,7 +56,7 @@
   }
 
   .radio {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -55,7 +55,7 @@
   }
 
   .select {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -56,7 +56,7 @@
   }
 
   .wrap-time .ant-time-picker {
-    width: 55%;
+    width: 65%;
     margin-right: 10px;
   }
 

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

@@ -1,6 +1,7 @@
 <template>
-  <div style="display: flex">
+  <div>
     <BasicUpload
+      :tip="tip"
       :showChooseBtn="true"
       :maxSize="20"
       :maxNumber="10"
@@ -9,35 +10,115 @@
       :api="uploadApi"
       class="my-5"
     />
-    <ChooseModal @register="chooseModalRegister" />
+    <div class="image-list" v-if="image_list">
+      <div class="image-item" v-for="(item, index) in image_list" :key="index">
+        <div class="image-wrap"> <a-image width="70px" :src="item" /></div>
+        <div class="dele-image" @click="deleteImage">
+          <Icon icon="ri:delete-bin-5-fill" />
+        </div>
+      </div>
+    </div>
+    <ChooseModal
+      :type="type"
+      @register="chooseModalRegister"
+      @checked="checked"
+      @checkedBatches="checkedBatches"
+    />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, toRefs } from 'vue';
   import { BasicUpload } from '/@/components/Upload';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { uploadApi } from '/@/api/sys/upload';
   import ChooseModal from './ChooseModal.vue';
   import { useModal } from '/@/components/Modal';
+  import { Image } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
 
+  const props = {
+    value: { type: String, default: '' },
+    tip: { type: String, default: '' },
+    type: { type: String, default: '' },
+    errMsg: { type: String, default: '' },
+    rules: { type: Array, default: [] },
+  };
   export default defineComponent({
-    components: { BasicUpload, ChooseModal },
-    setup() {
+    components: { BasicUpload, ChooseModal, aImage: Image, Icon },
+    props,
+    emits: ['change'],
+    setup(props, { emit }) {
       const { createMessage } = useMessage();
       const [chooseModalRegister, { openModal }] = useModal();
       function openChooseModal() {
-        console.log('=======openChooseModal=======');
         openModal(true);
       }
+
+      function deleteImage() {
+        console.log('========deleteImage========');
+      }
+      function checked(key, closeModal) {
+        console.log(`key`, key);
+        closeModal();
+        console.log('========checked========');
+        emit('change');
+      }
+      function checkedBatches(keys, closeModal) {
+        console.log(`keys`, keys);
+        closeModal();
+        console.log('========checkedBatches========');
+        emit('change');
+      }
+      const image_list = [
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      ];
       return {
+        image_list,
         handleChange: (list: string[]) => {
           createMessage.info(`已上传文件${JSON.stringify(list)}`);
         },
+        checkedBatches,
+        checked,
         openChooseModal,
+        deleteImage,
         uploadApi,
         chooseModalRegister,
         openModal,
+        ...toRefs(props),
       };
     },
   });
 </script>
+<style scoped>
+  .image-list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 65%;
+  }
+
+  .image-item {
+    width: 120px;
+    margin: 0 5px;
+    text-align: center;
+  }
+
+  .image-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 80px;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+  }
+
+  .dele-image {
+    height: 20px;
+    margin: 8px 0;
+    color: #fff;
+    background: #e74c3c;
+    border-radius: 2px;
+  }
+</style>

src/views/general/config/customComponents/chooseModalData.ts

@@ -1,46 +1,48 @@
 import { BasicColumn } from '/@/components/Table';
-import { FileItem } from '/@/components/Upload/src/types';
+import Image from '/@/views/general/attachment/customComponents/Image.vue';
 import { h } from 'vue';
-import ThumbUrl from '/@/components/customComponents/ThumbUrl.vue';
 
 export const columns: BasicColumn[] = [
   {
     title: 'ID',
+    align: 'center',
     dataIndex: 'id',
-    editComponentProps: {
-      prefix: '$',
-    },
-    width: 100,
+    width: 80,
   },
   {
-    dataIndex: 'thumbUrl',
     title: '预览',
-    width: 70,
+    align: 'center',
+    dataIndex: 'imgUrl',
+    width: 110,
     customRender: ({ record }) => {
-      const { thumbUrl } = (record as FileItem) || {};
-      return h(ThumbUrl, {
-        fileUrl: thumbUrl,
+      return h(Image, {
+        src: record.imgUrl,
+        width: '70px',
       });
     },
   },
   {
     title: '宽度',
-    dataIndex: 'width',
-    width: 150,
+    align: 'center',
+    dataIndex: 'imagewidth',
+    width: 80,
   },
   {
     title: '高度',
-    dataIndex: 'height',
-    width: 150,
+    align: 'center',
+    dataIndex: 'imageheight',
+    width: 80,
   },
   {
     title: 'Mime类型',
-    dataIndex: 'type',
-    width: 150,
+    align: 'center',
+    dataIndex: 'mimetype',
+    width: 100,
   },
   {
-    title: '创建时间',
-    dataIndex: 'time',
-    width: 150,
+    title: '创建日期',
+    align: 'center',
+    dataIndex: 'createtime',
+    width: 160,
   },
 ];

src/views/general/config/data.ts

@@ -27,7 +27,7 @@ export const columns: BasicColumn[] = [
     title: '变量值',
     align: 'left',
     dataIndex: 'value',
-    width: 300,
+    width: 550,
     customRender: ({ record }) => {
       switch (record.type) {
         case 'string':
@@ -152,6 +152,17 @@ export const columns: BasicColumn[] = [
         case 'image':
           return h(UploadImage, {
             value: record.value,
+            type: 'image',
+            tip: record.tip,
+            // options: record.content,
+            // style: { width: '65%' },
+            // onChange: onArrayChange,
+          });
+        case 'images':
+          return h(UploadImage, {
+            value: record.value,
+            type: 'images',
+            tip: record.tip,
             // options: record.content,
             // style: { width: '65%' },
             // onChange: onArrayChange,
@@ -163,7 +174,7 @@ export const columns: BasicColumn[] = [
     title: '变量名',
     align: 'left',
     dataIndex: 'name',
-    width: 150,
+    width: 120,
   },
 ];
 

src/views/general/config/index.vue

@@ -218,7 +218,7 @@
       function createActions(record: EditRecordRow): ActionItem[] {
         return [
           {
-            label: '删除',
+            label: '',
             color: 'error',
             icon: 'ic:outline-delete-outline',
             popConfirm: {