更换logo

src/api/sys/general.ts

@@ -14,6 +14,7 @@ enum Api {
   ConfigUrl = '/general/config/', // 系统配置表
   FileUrl = '/general/file/', // 上传文件
   ConfigNameExistUrl = '/general/exist', // 检测变量名是否已经存在
+  AttachmentUrl = '/general/attachment/', // 检测变量名是否已经存在
 }
 
 /**
@@ -75,3 +76,13 @@ export function configNameExist(params: ConfigNameParams) {
     params,
   });
 }
+
+/**
+ * @description: 获取附件列表
+ */
+export function getAttachmentList() {
+  return defHttp.request<CommonRowModel>({
+    url: Api.AttachmentUrl,
+    method: 'GET',
+  });
+}

src/api/sys/model/generalModel.ts

@@ -2,7 +2,7 @@
  * @description: Get common information return value
  */
 export interface CommonRowModel {
-  row: object[];
+  rows: object[];
 }
 
 /**

src/components/Table/src/hooks/useDataSource.ts

@@ -221,9 +221,9 @@ export function useDataSource(
 
       console.log('=======api - params ======');
       const res_data = await api(params);
-      const res = res_data.list || res_data.tree || res_data.row;
+      const res = res_data.list || res_data.tree || res_data.row || res_data.rows;
       console.log('=====表格 api ==========');
-      console.log(`res`, res);
+      console.log(`res22`, res);
       console.log(res_data);
       console.log(params);
 

src/components/Upload/src/BasicUpload.vue

@@ -1,27 +1,9 @@
 <template>
   <div>
-    <a-button-group style="width: 100%; height: 33px">
-      <Input
-        v-if="showChooseBtn"
-        class="upload-input"
-        :value="imageUrls"
-        @focus="onFocus"
-        @change="onInputChange"
-        @blur="onBlur"
-      />
+    <a-button-group>
       <a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
         {{ t('component.upload.upload') }}
       </a-button>
-      <a-button
-        v-if="showChooseBtn"
-        class="choose-btn"
-        type="danger"
-        @click="openChooseModal"
-        preIcon="ic:sharp-view-list"
-        :iconSize="16"
-      >
-        {{ t('component.upload.choose') }}
-      </a-button>
       <Tooltip placement="bottom" v-if="showPreview">
         <template #title>
           {{ t('component.upload.uploaded') }}
@@ -36,7 +18,6 @@
           </template>
         </a-button> -->
       </Tooltip>
-      <span class="tip-span" v-if="tipShow">{{ tip }}</span>
     </a-button-group>
 
     <UploadModal
@@ -54,11 +35,9 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, unref, computed, toRefs, reactive } from 'vue';
-  import { Input } from 'ant-design-vue';
+  import { defineComponent, ref, watch, unref, computed } from 'vue';
   import UploadModal from './UploadModal.vue';
   import UploadPreviewModal from './UploadPreviewModal.vue';
-  import Icon from '/@/components/Icon';
   import { Tooltip } from 'ant-design-vue';
 
   import { useModal } from '/@/components/Modal';
@@ -69,9 +48,9 @@
 
   export default defineComponent({
     name: 'BasicUpload',
-    components: { UploadModal, UploadPreviewModal, Icon, Tooltip, Input },
+    components: { UploadModal, UploadPreviewModal, Tooltip },
     props: uploadContainerProps,
-    emits: ['change', 'openChooseModal', 'onInputChange'],
+    emits: ['change'],
 
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
@@ -88,10 +67,6 @@
         if (!emptyHidePreview) return true;
         return emptyHidePreview ? fileListRef.value.length > 0 : true;
       });
-      const state = reactive({
-        imageUrls: props.urls,
-        tipShow: false,
-      });
 
       const bindValue = computed(() => {
         const value = { ...attrs, ...props };
@@ -105,12 +80,6 @@
         },
         { immediate: true }
       );
-      watch(
-        () => props.urls,
-        (urls) => {
-          state.imageUrls = urls;
-        }
-      );
 
       // 上传modal保存操作
       function handleChange(urls: string[]) {
@@ -124,58 +93,18 @@
         emit('change', fileListRef.value);
       }
 
-      function openChooseModal() {
-        emit('openChooseModal');
-      }
-
-      function onFocus() {
-        state.tipShow = true;
-      }
-
-      function onBlur() {
-        state.tipShow = false;
-      }
-
-      function onInputChange(e) {
-        emit('onInputChange', e.target.value);
-      }
-
       return {
         registerUploadModal,
         openUploadModal,
-        openChooseModal,
         handleChange,
         handlePreviewChange,
         registerPreviewModal,
         openPreviewModal,
-        onFocus,
-        onBlur,
-        onInputChange,
         fileListRef,
         showPreview,
         bindValue,
         t,
-        ...toRefs(props),
-        ...toRefs(state),
       };
     },
   });
 </script>
-<style scoped>
-  .choose-btn {
-    margin-left: 5px !important;
-  }
-
-  .tip-span {
-    margin-left: 10px;
-    font-size: 13px;
-    line-height: 250%;
-    color: gray;
-  }
-
-  .upload-input {
-    width: 45%;
-    height: 33px;
-    margin-right: 5px;
-  }
-</style>

src/components/Upload/src/props.ts

@@ -50,18 +50,6 @@ export const uploadContainerProps = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
-  showChooseBtn: {
-    type: Boolean,
-    default: false,
-  },
-  tip: {
-    type: String,
-    default: '',
-  },
-  urls: {
-    type: String,
-    default: '',
-  },
 };
 
 export const previewProps = {

src/components/customComponents/upload.vue

@@ -3,10 +3,8 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicUpload } from '/@/components/Upload';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { PageWrapper } from '/@/components/Page';
   import { Alert } from 'ant-design-vue';
 
   import { uploadApi } from '/@/api/sys/upload';
@@ -17,7 +15,7 @@
       component: 'Upload',
       label: '',
       colProps: {
-        span: 8,
+        span: 6,
       },
       rules: [{ required: true, message: '请选择上传文件' }],
       componentProps: {
@@ -26,7 +24,7 @@
     },
   ];
   export default defineComponent({
-    components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert },
+    components: { BasicForm, [Alert.name]: Alert },
     setup() {
       const { createMessage } = useMessage();
       const [register] = useForm({

src/utils/foramtFileSize.ts

@@ -0,0 +1,22 @@
+/**
+ * 文件大小 字节转换单位
+ * @param size
+ * @returns {string|*}
+ */
+export const formatSize = (size) => {
+  if (!size) return '';
+  return size < 1024
+    ? size + ' B'
+    : size < pow1024(2)
+    ? (size / 1024).toFixed(2) + ' KB'
+    : size < pow1024(3)
+    ? (size / pow1024(2)).toFixed(2) + ' MB'
+    : size < pow1024(4)
+    ? (size / pow1024(3)).toFixed(2) + ' GB'
+    : (size / pow1024(4)).toFixed(2) + ' TB';
+};
+
+// 求次幂
+function pow1024(num) {
+  return Math.pow(1024, num);
+}

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

@@ -27,7 +27,7 @@
     display: flex;
     justify-content: space-around;
     width: 100%;
-    height: 100px;
+    height: 60px;
     align-items: center;
     border: 1px solid #ddd;
     border-radius: 2px;

src/views/general/attachment/data.ts

@@ -1,6 +1,8 @@
 import { BasicColumn } from '/@/components/Table';
 import Image from './customComponents/Image.vue';
 import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { formatSize } from '/@/utils/foramtFileSize';
 
 export const columns: BasicColumn[] = [
   {
@@ -13,11 +15,11 @@ export const columns: BasicColumn[] = [
     title: '预览',
     align: 'center',
     dataIndex: 'imgUrl',
-    width: 140,
+    width: 100,
     customRender: ({ record }) => {
       return h(Image, {
         src: record.imgUrl,
-        width: '80px',
+        width: '50px',
       });
     },
   },
@@ -25,7 +27,21 @@ export const columns: BasicColumn[] = [
     title: '物理路径',
     align: 'center',
     dataIndex: 'url',
-    width: 250,
+    width: 480,
+    customRender: ({ record }) => {
+      return h(
+        Tag,
+        {
+          color: '#18bc9c',
+          style: {
+            fontSize: '12px',
+            fontWeight: 'bold',
+            margin: '0 auto',
+          },
+        },
+        record.url
+      );
+    },
   },
   {
     title: '宽度',
@@ -52,6 +68,15 @@ export const columns: BasicColumn[] = [
     width: 100,
   },
   {
+    title: '文件大小',
+    align: 'center',
+    dataIndex: 'filesize',
+    width: 100,
+    customRender: ({ text = 0 }) => {
+      return formatSize(text);
+    },
+  },
+  {
     title: 'Mime类型',
     align: 'center',
     dataIndex: 'mimetype',

src/views/general/attachment/index.vue

@@ -16,12 +16,18 @@
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" stopButtonPropagation />
       </template>
+      <template #toolbar>
+        <Upload style="position: relative; top: 10px" />
+        <!-- <a-button type="primary" @click="addRole"> 上传 </a-button> -->
+        <a-button color="error" @click="deleteBatches"> 删除 </a-button>
+      </template>
     </BasicTable>
   </CollapseContainer>
 </template>
 <script lang="ts">
   // import { useMessage } from '/@/hooks/web/useMessage';
   import { defineComponent, nextTick, reactive, ref, toRefs, unref } from 'vue';
+  import Upload from '/@/components/customComponents/upload.vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { adapt } from '/@/utils/adapt';
@@ -34,34 +40,11 @@
     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,
-    },
-  ];
+  import { getAttachmentList } from '/@/api/sys/general';
 
   export default defineComponent({
     name: 'Attchment',
-    components: { CollapseContainer, BasicTable, TableAction },
+    components: { CollapseContainer, BasicTable, TableAction, Upload },
     setup() {
       const { t } = useI18n();
       // const { createMessage } = useMessage();
@@ -75,9 +58,7 @@
       const [registerTable] = useTable({
         columns: columns,
         maxHeight: tableHeight,
-        // api: ,
-        dataSource: fakeData,
-        afterFetch: afterFetch,
+        api: getAttachmentList,
         actionColumn: {
           width: 160,
           title: '操作',
@@ -98,12 +79,6 @@
         return tableAction;
       }
 
-      // 处理请求数据
-      function afterFetch(result) {
-        result = result[state.group].list;
-        return result;
-      }
-
       async function handleGroupBtn(group) {
         await nextTick();
         getTableAction().reload();

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

@@ -1,17 +1,32 @@
 <template>
   <div>
-    <BasicUpload
-      :urls="imageUrls"
-      :tip="tip"
-      :showChooseBtn="true"
-      :maxSize="20"
-      :maxNumber="10"
-      @change="handleChange"
-      @openChooseModal="openChooseModal"
-      @onInputChange="inputChange"
-      :api="uploadApi"
-      class="my-3"
-    />
+    <div style="display: flex">
+      <Input
+        class="upload-input"
+        :value="imageUrls"
+        @focus="onFocus"
+        @change="onInputChange"
+        @blur="onBlur"
+      />
+      <BasicUpload
+        :maxSize="20"
+        :maxNumber="10"
+        @change="handleChange"
+        :api="uploadApi"
+        class="my-3"
+      />
+      <a-button
+        @click="openChooseModal"
+        style="position: relative; top: 12px; margin: 0 5px"
+        type="danger"
+        preIcon="ic:sharp-view-list"
+        :iconSize="16"
+      >
+        选择
+      </a-button>
+      <span class="tip-span" v-if="tipShow">{{ tip }}</span>
+    </div>
+
     <div class="image-list" v-if="image_list">
       <div v-for="(item, index) in image_list" :key="index">
         <div class="image-item" v-if="imageUrls.split(',').includes(item.url)">
@@ -37,8 +52,9 @@
   import { uploadApi } from '/@/api/sys/upload';
   import ChooseModal from './ChooseModal.vue';
   import { useModal } from '/@/components/Modal';
-  import { Image } from 'ant-design-vue';
+  import { Image, Input } from 'ant-design-vue';
   import Icon from '/@/components/Icon';
+  import { getAttachmentList } from '/@/api/sys/general';
 
   const props = {
     value: { type: String, default: '' },
@@ -49,7 +65,7 @@
     rules: { type: Array, default: [] },
   };
   export default defineComponent({
-    components: { BasicUpload, ChooseModal, aImage: Image, Icon },
+    components: { BasicUpload, ChooseModal, aImage: Image, Input, Icon },
     props,
     emits: ['change'],
     setup(props, { emit }) {
@@ -60,32 +76,8 @@
       }
       const state = reactive({
         imageUrls: props.urls,
-        image_list: [
-          {
-            url: '/fake/fake.jpg',
-            preUrl: 'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
-          },
-          {
-            url: '/fake1/fake1.jpg',
-            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-          },
-          {
-            url: '/fake2/fake2.jpg',
-            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-          },
-          {
-            url: '/fake3/fake3.jpg',
-            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-          },
-          {
-            url: '/fake4/fake4.jpg',
-            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-          },
-          {
-            url: '/fake5/fake5.jpg',
-            preUrl: 'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
-          },
-        ],
+        image_list: [] as object[],
+        tipShow: false,
       });
 
       function deleteImage(url) {
@@ -95,7 +87,6 @@
           1
         );
         state.imageUrls = arr.toString();
-        console.log(`state.imageUrls`, state.imageUrls);
       }
       function checked(key, closeModal) {
         console.log(`key`, key);
@@ -109,19 +100,34 @@
         console.log('========checkedBatches========');
         emit('change');
       }
-      function inputChange(val) {
-        state.imageUrls = val;
+      function onInputChange(e) {
+        state.imageUrls = e.target.value;
+      }
+      function onFocus() {
+        state.tipShow = true;
+      }
+      function onBlur() {
+        state.tipShow = false;
+      }
+      getImageList();
+      async function getImageList() {
+        await getAttachmentList().then((res) => {
+          state.image_list = res.rows;
+        });
       }
 
       return {
         handleChange: (list: string[]) => {
+          console.log(`list`, list);
           createMessage.info(`已上传文件${JSON.stringify(list)}`);
         },
         checkedBatches,
         checked,
         openChooseModal,
         deleteImage,
-        inputChange,
+        onInputChange,
+        onFocus,
+        onBlur,
         uploadApi,
         chooseModalRegister,
         openModal,
@@ -132,6 +138,14 @@
   });
 </script>
 <style scoped>
+  .upload-input {
+    position: relative;
+    top: 11px;
+    width: 45%;
+    height: 34px;
+    margin-right: 5px;
+  }
+
   .image-list {
     display: flex;
     flex-wrap: wrap;
@@ -161,4 +175,12 @@
     background: #e74c3c;
     border-radius: 2px;
   }
+
+  .tip-span {
+    position: relative;
+    top: 11px;
+    font-size: 13px;
+    line-height: 250%;
+    color: gray;
+  }
 </style>

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

@@ -13,11 +13,11 @@ export const columns: BasicColumn[] = [
     title: '预览',
     align: 'center',
     dataIndex: 'imgUrl',
-    width: 110,
+    width: 100,
     customRender: ({ record }) => {
       return h(Image, {
         src: record.imgUrl,
-        width: '70px',
+        width: '50px',
       });
     },
   },

src/views/general/config/data.ts

@@ -154,7 +154,7 @@ export const columns: BasicColumn[] = [
             value: record.value,
             type: 'image',
             tip: record.tip,
-            urls: '/fake/fake.jpg,/fake1/fake1.jpg,/fake4/fake4.jpg',
+            urls: '/fake/fake.jpg,/fake1/fake1.jpg,/fake4/fake4.jpg,\\pyadmin\\public\\uploads\\2021713\\d64e169b4fa956e0cf935954e5671efd.jpg',
             // options: record.content,
             // style: { width: '65%' },
             // onChange: onArrayChange,

src/views/general/config/index.vue

@@ -10,7 +10,8 @@
       :key="index"
       type="default"
       class="mr-2"
-      @click="handleGroupBtn(group)"
+      :class="current_index === index ? 'current-btn' : ''"
+      @click="handleGroupBtn(group, index)"
     >
       {{ group }}
     </a-button>
@@ -56,7 +57,6 @@
     BasicTable,
     useTable,
     TableAction,
-    // BasicColumn,
     ActionItem,
     EditRecordRow,
     TableActionType,
@@ -84,6 +84,7 @@
         formShow: false,
         groupList: [] as object[],
         group: 'basic',
+        current_index: 0,
       });
       const tableRef = ref<Nullable<TableActionType>>(null);
       const [registerTable] = useTable({
@@ -142,9 +143,11 @@
         state.tipShow = false;
       }
 
-      async function handleGroupBtn(group) {
+      async function handleGroupBtn(group, i) {
         state.tableShow = true;
         state.formShow = false;
+        state.current_index = i;
+        console.log(`state.current_index`, state.current_index);
         await nextTick();
         getTableAction().reload();
         state.group = group.toLowerCase();
@@ -205,7 +208,7 @@
         }
         await addConfigInfo(e).then(() => {
           success('创建成功!');
-          handleGroupBtn('Basic'); // 跳转显示到table基础配置
+          handleGroupBtn('Basic', 0); // 跳转显示到table基础配置
         });
       }
       async function handleDelete(record: Recordable) {
@@ -274,8 +277,8 @@
     justify-content: center;
   }
 
-  .actions {
-    display: flex;
-    justify-content: center;
-  }
+  /* .current-btn {
+    color: #3785cc;
+    border: 1px solid #3785cc;
+  } */
 </style>