Ver código fonte

添加文件预览

lipenghui 5 meses atrás
pai
commit
20243c365e

+ 1 - 0
index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
       <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
+      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

+ 1 - 1
src/components/UploadFile/src/UploadFile.vue

@@ -80,7 +80,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
   modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
-  fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf','png','jpg','jpeg','sql','pptx','mp4']), // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileSize: propTypes.number.def(50), // 大小限制(MB)
   limit: propTypes.number.def(5), // 数量限制
   autoUpload: propTypes.bool.def(true), // 自动上传

+ 1 - 1
src/views/Login/Login.vue

@@ -20,7 +20,7 @@
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
             class="m-auto h-[calc(60%)] w-[100%] flex items-center at-2xl:max-w-550px at-lg:max-w-550px at-md:max-w-550px at-xl:max-w-550px"
-            :style="{backgroundImage: `url(${loginBox})`,minHeight: '620px', minWidth: '250px',backgroundSize: 'cover',marginTop:'5%'}"
+            :style="{backgroundImage: `url(${loginBox})`,minHeight: '650px', minWidth: '250px',backgroundSize: 'cover',marginTop:'5%'}"
           >
             <!-- 账号登录 -->
             <LoginForm class="m-auto h-auto p-50px lt-xl:(rounded-3xl)" />

+ 92 - 13
src/views/supplier/certificate/index.vue

@@ -50,10 +50,16 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button v-if="!isDetail" type="primary" plain @click="openForm('create')" >
+        <el-button v-if="!isDetail" type="primary" plain @click="openForm('create')">
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
-        <el-button v-if="!isDetail" type="success" plain @click="handleExport" :loading="exportLoading">
+        <el-button
+          v-if="!isDetail"
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+        >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
       </el-form-item>
@@ -75,7 +81,6 @@
         </template>
       </el-table-column>
       <el-table-column label="证件名称" align="center" prop="name" />
-      <el-table-column label="附件" align="center" prop="urls" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -83,6 +88,17 @@
         :formatter="dateFormatter"
         width="180px"
       />
+      <el-table-column label="附件" align="center" prop="urls">
+        <!--          <template #default="scope">-->
+
+        <!--            <el-button @click="openView(scope.row)">-->
+        <!--              <Icon style="color: #14c4ca" icon="ep:view"/>-->
+        <!--            </el-button>-->
+        <!--          </template>-->
+        <template #default="scope">
+          <el-button link type="primary" @click="openView(scope.row)"> 查看 </el-button>
+        </template>
+      </el-table-column>
       <el-table-column v-if="!isDetail" label="操作" align="center" min-width="120px">
         <template #default="scope">
           <el-button link type="primary" @click="openForm('update', scope.row.id)">
@@ -102,12 +118,54 @@
   </ContentWrap>
 
   <!-- 表单弹窗:添加/修改 -->
-  <CertificateForm ref="formRef" :supplierId="{ receivedParam }" :ifAlone ="ifAlone" @success="getList" />
-  <el-form v-if="ifAlone!= null">
+  <CertificateForm
+    ref="formRef"
+    :supplierId="{ receivedParam }"
+    :ifAlone="ifAlone"
+    @success="getList"
+  />
+  <el-form v-if="ifAlone != null">
     <el-form-item style="float: right">
       <el-button @click="close" type="primary">返回</el-button>
     </el-form-item>
   </el-form>
+
+  <el-dialog
+    title="预览文件"
+    v-model="showDialog"
+    width="900px"
+    height="700px"
+    style="min-height: 200px"
+    destroy-on-close
+  >
+    <el-row>
+      <el-table
+        :data="objectInfo"
+        size="small"
+        border
+        header-cell-class-name="table-header-gray"
+      >
+        <el-table-column
+          label="文件名称"
+          prop="name"
+          min-width="100"
+          align="center"
+        />
+        <el-table-column
+          label="预览"
+          prop="url"
+          min-width="100"
+          align="center"
+        >
+                    <template #default="scope">
+                      <el-button @click="openWeb(scope.row.url)" style="border: none">
+                        <Icon style="color: #14c4ca" icon="ep:view"/>
+                      </el-button>
+                    </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -119,9 +177,11 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as SupplierBaseApi from '@/api/supplier/base'
 import { SupplierVO } from '@/api/supplier/base'
 import { propTypes } from '@/utils/propTypes'
-import {useTagsViewStore} from "@/store/modules/tagsView";
+import { useTagsViewStore } from '@/store/modules/tagsView'
+
 const { delView } = useTagsViewStore() // 视图操作
 const { push, currentRoute } = useRouter() // 路由
+const showDialog = ref(false)
 /** 供应商证件资质 列表 */
 defineOptions({ name: 'SupplierCertificate' })
 const supplierList = ref([] as SupplierVO[])
@@ -129,7 +189,7 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const props = defineProps({
   isDetail: propTypes.bool.def(false), // 是否作为详情组件
-  ifAlone: {type:Boolean, default:()=>null},
+  ifAlone: { type: Boolean, default: () => null },
   receivedParam: { type: undefined, default: () => null }
 })
 const loading = ref(true) // 列表的加载中
@@ -147,14 +207,30 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const objectInfo = ref([])
+const openView = (row: CertificateVO) => {
+  if (row.urls) {
+    objectInfo.value=[]
+    row.urls.split(',').forEach(item => {
+      let object = {url:'',name:''};
+      object.url = item;
+      const lastIndex = item.lastIndexOf('/');
+      object.name = lastIndex !== -1 ? item.substring(lastIndex+1) : item;
+      objectInfo.value.push(object);
+    })
+  }
+  showDialog.value = true
+}
+const openWeb = (url) => {
+  window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
+}
 
-/** 查询列表 */
 const getList = async () => {
   supplierList.value = await SupplierBaseApi.Api.getAll()
   loading.value = true
   try {
-    if (props.ifAlone!=null) {
-      queryParams.supplierId = props.receivedParam === null?'0000000000':props.receivedParam
+    if (props.ifAlone != null) {
+      queryParams.supplierId = props.receivedParam === null ? '0000000000' : props.receivedParam
     }
     const data = await CertificateApi.getCertificatePage(queryParams)
     list.value = data.list
@@ -219,8 +295,11 @@ onMounted(async () => {
 })
 const close = () => {
   delView(unref(currentRoute))
-  push({ name: 'Suppliers',query: {
-      date: new Date().getTime(),
-    } })
+  push({
+    name: 'Suppliers',
+    query: {
+      date: new Date().getTime()
+    }
+  })
 }
 </script>