图片显示 env配置

.env.development

@@ -26,3 +26,6 @@ VITE_GLOB_UPLOAD_URL=http://localhost:8888/admin/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX= /admin
+
+# imgurl prefix
+VITE_GLOB_IMG_URL_PREFIX=http://localhost:8888

.env.production

@@ -1,5 +1,5 @@
 # Whether to open mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # public path
 VITE_PUBLIC_PATH = /
@@ -13,13 +13,13 @@ VITE_DROP_CONSOLE = true
 VITE_BUILD_COMPRESS = 'none'
 
 # Basic interface address SPA
-# VITE_GLOB_API_URL=http://139.186.154.72:80/admin
-VITE_GLOB_API_URL=http://localhost:8888/admin
+VITE_GLOB_API_URL=http://139.186.154.72:80/admin
+# VITE_GLOB_API_URL=http://localhost:8888/admin
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly
-# VITE_GLOB_UPLOAD_URL=http://139.186.154.72:80/admin/upload
-VITE_GLOB_UPLOAD_URL=http://localhost:8888/admin/upload
+VITE_GLOB_UPLOAD_URL=http://139.186.154.72:80/admin/upload
+# VITE_GLOB_UPLOAD_URL=http://localhost:8888/admin/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=
@@ -32,3 +32,6 @@ VITE_USE_PWA = false
 
 # Is it compatible with older browsers
 VITE_LEGACY = false
+
+# imgurl prefix
+VITE_GLOB_IMG_URL_PREFIX=http://pyadmin.cqtd.games

src/App.vue

@@ -19,7 +19,6 @@
     components: { ConfigProvider, AppProvider },
     setup() {
       const appStore = useAppStore();
-      console.log('---------app-----------');
       appStore.setAppInfoAction();
       useTitle();
 

src/components/Application/src/AppLogo.vue

@@ -4,7 +4,7 @@
 -->
 <template>
   <div class="anticon" :class="getAppLogoClass" @click="goHome">
-    <img src="../../../assets/images/logo.png" />
+    <img :src="logo" />
     <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
       {{ title }}
     </div>
@@ -12,7 +12,7 @@
 </template>
 <script lang="ts">
   import { defineComponent, computed, unref } from 'vue';
-  // import { useGlobSetting } from '/@/hooks/setting';
+  import { useGlobSetting } from '/@/hooks/setting';
   import { useGo } from '/@/hooks/web/usePage';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -38,13 +38,13 @@
     name: 'AppLogo',
     props: props,
     setup(props) {
+      const { imgUrlPrefix } = useGlobSetting();
       const appStore = useAppStore();
       const { prefixCls } = useDesign('app-logo');
       const { getCollapsedShowTitle } = useMenuSetting();
-      // const { title } = useGlobSetting();
       const go = useGo();
       const title = computed(() => appStore.getAppTitle);
-      const getAppLogo = computed(() => appStore.getAppLogo);
+      const logo = computed(() => imgUrlPrefix + appStore.getAppLogo);
 
       const getAppLogoClass = computed(() => [
         prefixCls,
@@ -64,7 +64,7 @@
       }
 
       return {
-        getAppLogo,
+        logo,
         getAppLogoClass,
         getTitleClass,
         getCollapsedShowTitle,

src/hooks/setting/index.ts

@@ -9,9 +9,9 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_IMG_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL,
   } = getAppEnvConfig();
-
   if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
     warn(
       `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
@@ -24,6 +24,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     apiUrl: VITE_GLOB_API_URL,
     shortName: VITE_GLOB_APP_SHORT_NAME,
     urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    imgUrlPrefix: VITE_GLOB_IMG_URL_PREFIX,
     uploadUrl: VITE_GLOB_UPLOAD_URL,
   };
   return glob as Readonly<GlobConfig>;

src/utils/env.ts

@@ -28,6 +28,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_IMG_URL_PREFIX,
   } = ENV;
 
   if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -41,6 +42,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_IMG_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL,
   };
 }

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

@@ -1,11 +1,12 @@
 <template>
   <div class="wrap">
-    <a-image class="image" :src="src" style="width: auto; height: 70px" />
+    <a-image class="image" :src="imgUrlPrefix + src" style="width: auto; height: 70px" />
   </div>
 </template>
 <script lang="ts">
   import { Image } from 'ant-design-vue';
   import { defineComponent, toRefs } from 'vue';
+  import { useGlobSetting } from '/@/hooks/setting';
 
   const props = {
     src: { type: String, default: '' },
@@ -15,7 +16,9 @@
     components: { aImage: Image },
     props,
     setup(props) {
+      const { imgUrlPrefix } = useGlobSetting();
       return {
+        imgUrlPrefix,
         ...toRefs(props),
       };
     },

src/views/general/config/a.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <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="file_list.length">
+      <div v-for="(item, index) in file_list" :key="index">
+        <div class="image-item">
+          <div class="image-wrap"> <a-image width="70px" :src="imgUrlPrefix + item" /></div>
+          <div class="dele-image" @click="deleteImage(item, index)">
+            <Icon icon="ri:delete-bin-5-fill" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <ChooseModal :type="type" @register="chooseModalRegister" @checked="checked" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, onUpdated, reactive, 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 { useGlobSetting } from '/@/hooks/setting';
+  import { useModal } from '/@/components/Modal';
+  import { Image, Input } 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, aImage: Image, Input, Icon },
+    props,
+    emits: ['change'],
+    setup(props, { emit }) {
+      // const { createMessage } = useMessage();
+      const { imgUrlPrefix } = useGlobSetting();
+      const [chooseModalRegister, { openModal }] = useModal();
+      function openChooseModal() {
+        openModal(true);
+      }
+      const state = reactive({
+        imageUrls: props.value,
+        file_list: [] as string[],
+        tipShow: false,
+      });
+
+      function deleteImage(url, index) {
+        const arr = state.imageUrls.split(',');
+        // arr.splice(
+        //   arr.findIndex((item) => item === url),
+        //   1
+        // );
+        arr.splice(index, 1);
+        state.imageUrls = arr.toString();
+        emit('change', state.imageUrls);
+      }
+      function checked(imgs) {
+        if (props.type === 'image') {
+          state.imageUrls = imgs[0].url;
+        } else {
+          let urls: string[] = [];
+          imgs.map((item) => {
+            urls.push(item.url);
+          });
+          state.imageUrls += ',' + urls.toString();
+        }
+        emit('change', state.imageUrls);
+      }
+
+      function onInputChange(e) {
+        state.imageUrls = e.target.value;
+      }
+      function onFocus() {
+        state.tipShow = true;
+      }
+      function onBlur() {
+        state.tipShow = false;
+      }
+
+      onUpdated(() => {
+        state.file_list = props.value.split(',');
+      });
+
+      return {
+        handleChange: (list: string[]) => {
+          if (props.type === 'image') {
+            state.imageUrls = list[0];
+          } else {
+            state.imageUrls = list.toString();
+          }
+          emit('change', state.imageUrls);
+        },
+        checked,
+        imgUrlPrefix,
+        openChooseModal,
+        deleteImage,
+        onInputChange,
+        onFocus,
+        onBlur,
+        uploadApi,
+        chooseModalRegister,
+        openModal,
+        ...toRefs(props),
+        ...toRefs(state),
+      };
+    },
+  });
+</script>
+<style scoped>
+  .upload-input {
+    position: relative;
+    top: 11px;
+    width: 45%;
+    height: 34px;
+    margin-right: 5px;
+  }
+
+  .image-list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 70%;
+  }
+
+  .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;
+  }
+
+  .tip-span {
+    position: relative;
+    top: 11px;
+    font-size: 13px;
+    line-height: 250%;
+    color: gray;
+  }
+</style>

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

@@ -47,6 +47,7 @@
         api: getAttachmentList,
         showIndexColumn: false,
         bordered: true,
+        maxHeight: 300,
       });
       function getTableAction() {
         // 获取组件

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

@@ -1,13 +1,7 @@
 <template>
   <div>
     <div style="display: flex">
-      <Input
-        class="upload-input"
-        :value="imageUrls"
-        @focus="onFocus"
-        @change="onInputChange"
-        @blur="onBlur"
-      />
+      <Input class="upload-input" :value="imageUrls" disabled />
       <BasicUpload
         :maxSize="20"
         :maxNumber="10"
@@ -27,11 +21,11 @@
       <span class="tip-span" v-if="tipShow">{{ tip }}</span>
     </div>
 
-    <div class="image-list" v-if="file_list">
+    <div class="image-list" v-if="file_list.length">
       <div v-for="(item, index) in file_list" :key="index">
-        <div class="image-item" v-if="imageUrls.split(',').includes(item.url)">
-          <div class="image-wrap"> <a-image width="70px" :src="item.url" /></div>
-          <div class="dele-image" @click="deleteImage(item.url)">
+        <div class="image-item" v-if="item !== ''">
+          <div class="image-wrap"> <a-image width="70px" :src="imgUrlPrefix + item" /></div>
+          <div class="dele-image" @click="deleteImage(item, index)">
             <Icon icon="ri:delete-bin-5-fill" />
           </div>
         </div>
@@ -41,11 +35,12 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, toRefs } from 'vue';
+  import { defineComponent, watch, reactive, 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 { useGlobSetting } from '/@/hooks/setting';
   import { useModal } from '/@/components/Modal';
   import { Image, Input } from 'ant-design-vue';
   import Icon from '/@/components/Icon';
@@ -57,67 +52,71 @@
     errMsg: { type: String, default: '' },
     rules: { type: Array, default: [] },
   };
+  interface PropsType {
+    value: string;
+    tip: string;
+    type: string;
+    errMsg: string;
+    rules: [];
+  }
   export default defineComponent({
     components: { BasicUpload, ChooseModal, aImage: Image, Input, Icon },
     props,
     emits: ['change'],
     setup(props, { emit }) {
       // const { createMessage } = useMessage();
+      const { imgUrlPrefix } = useGlobSetting();
       const [chooseModalRegister, { openModal }] = useModal();
       function openChooseModal() {
         openModal(true);
       }
       const state = reactive({
         imageUrls: props.value,
-        file_list: [] as object[],
+        file_list: [] as string[],
         tipShow: false,
       });
-
-      function deleteImage(url) {
+      state.file_list = props.value.split(',');
+      function deleteImage(url, index) {
         const arr = state.imageUrls.split(',');
-        arr.splice(
-          arr.findIndex((item) => item === url),
-          1
-        );
+        // arr.splice(
+        //   arr.findIndex((item) => item === url),
+        //   1
+        // );
+        console.log(`url`, url);
+        arr.splice(index, 1);
         state.imageUrls = arr.toString();
+        emit('change', state.imageUrls);
       }
       function checked(imgs) {
         if (props.type === 'image') {
           state.imageUrls = imgs[0].url;
         } else {
+          let urls: string[] = [];
           imgs.map((item) => {
-            state.imageUrls += item.url + ',';
+            urls.push(item.url);
           });
+          state.imageUrls += ',' + urls.toString();
         }
         emit('change', state.imageUrls);
-        console.log(`imgs`, imgs);
       }
 
-      function onInputChange(e) {
-        state.imageUrls = e.target.value;
-      }
-      function onFocus() {
-        state.tipShow = true;
-      }
-      function onBlur() {
-        state.tipShow = false;
-      }
+      watch(props, (props: PropsType) => {
+        state.file_list = props.value.split(',');
+      });
 
       return {
         handleChange: (list: string[]) => {
           if (props.type === 'image') {
             state.imageUrls = list[0];
           } else {
-            state.imageUrls = list.join(',');
+            state.imageUrls = list.toString();
           }
           emit('change', state.imageUrls);
         },
         checked,
+        imgUrlPrefix,
         openChooseModal,
         deleteImage,
-        onInputChange,
-        onFocus,
-        onBlur,
         uploadApi,
         chooseModalRegister,
         openModal,

src/views/money/dues/index.vue

@@ -8,7 +8,7 @@
     <BasicTable
       ref="tableRef"
       @register="registerTable"
-      rowKey="dues.id"
+      rowKey="id"
       @selectionChange="selectionChange"
       @rowClick="rowClick"
       @rowDbClick="handleEdit"

types/config.d.ts

@@ -141,6 +141,8 @@ export interface GlobConfig {
   uploadUrl?: string;
   //  Service interface url prefix
   urlPrefix?: string;
+  //  img url prefix
+  imgUrlPrefix?: string;
   // Project abbreviation
   shortName: string;
 }
@@ -155,4 +157,6 @@ export interface GlobEnvConfig {
   VITE_GLOB_APP_SHORT_NAME: string;
   // Upload url
   VITE_GLOB_UPLOAD_URL?: string;
+  // img prefixurl
+  VITE_GLOB_IMG_URL_PREFIX?: string;
 }