|
@@ -0,0 +1,353 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="full-container-p24">
|
|
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
|
|
+ <!-- <el-select
|
|
|
|
|
+ v-model="type"
|
|
|
|
|
+ class="m-2"
|
|
|
|
|
+ placeholder="全部文件"
|
|
|
|
|
+ @change="getUFileList"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in options"
|
|
|
|
|
+ :key="item.key"
|
|
|
|
|
+ :label="item.value"
|
|
|
|
|
+ :value="item.key"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select> -->
|
|
|
|
|
+ <el-button @click="showUploadModal" type="primary">上传</el-button>
|
|
|
|
|
+ <el-dialog v-model="visable" title="上传海事公告">
|
|
|
|
|
+ <div class="mt20 df aic">
|
|
|
|
|
+ <div class="mr20">区域选择:</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="df aic mt10">
|
|
|
|
|
+ <div class="mr20">省:</div>
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ v-model="uploadParams.pCode"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ placeholder="请选择省"
|
|
|
|
|
+ @change="selectProvince"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in provinceSelect"
|
|
|
|
|
+ :key="item.key"
|
|
|
|
|
+ :label="item.value"
|
|
|
|
|
+ :value="item.key"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="df aic mt10" v-if="uploadParams.pCode != 0">
|
|
|
|
|
+ <div class="mr20">市:</div>
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ v-model="uploadParams.cCode"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ placeholder="请选择市"
|
|
|
|
|
+ @change="selectCity"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in citySelect"
|
|
|
|
|
+ :key="item.key"
|
|
|
|
|
+ :label="item.value"
|
|
|
|
|
+ :value="item.key"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="df aic mt10" v-if="uploadParams.cCode != 0">
|
|
|
|
|
+ <div class="mr20">区:</div>
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ v-model="uploadParams.aCode"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ placeholder="请选择区"
|
|
|
|
|
+ @change="selectArea"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in areaSelect"
|
|
|
|
|
+ :key="item.key"
|
|
|
|
|
+ :label="item.value"
|
|
|
|
|
+ :value="item.key"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="mt20">
|
|
|
|
|
+ <el-upload
|
|
|
|
|
+ ref="uploadRef"
|
|
|
|
|
+ v-model:file-list="fileList"
|
|
|
|
|
+ action="https://interface.huihenduo.cc/hhd-datacenter/ufile/upload"
|
|
|
|
|
+ :on-remove="handleRemove"
|
|
|
|
|
+ :data="uploadParams"
|
|
|
|
|
+ :limit="1"
|
|
|
|
|
+ :on-success="uploadSuccess"
|
|
|
|
|
+ :on-change="uploadChange"
|
|
|
|
|
+ :auto-upload="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-button v-if="!fileList.length" size="small" type="primary">
|
|
|
|
|
+ 选择文件
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </el-upload>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="df jcfe mt40">
|
|
|
|
|
+ <el-button @click="uploadUFile" type="primary">上传</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-top: 24px">
|
|
|
|
|
+ <el-table :data="tableData" stripe style="width: 100%">
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ type="index"
|
|
|
|
|
+ label="序号"
|
|
|
|
|
+ min-width="80"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ ></el-table-column>
|
|
|
|
|
+
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ prop="typeName"
|
|
|
|
|
+ label="文件类型"
|
|
|
|
|
+ min-width="160"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ ></el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ prop="fileName"
|
|
|
|
|
+ label="文件名称"
|
|
|
|
|
+ min-width="160"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ ></el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ prop="createTime"
|
|
|
|
|
+ label="上传时间"
|
|
|
|
|
+ min-width="120"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ ></el-table-column>
|
|
|
|
|
+ <el-table-column label="操作" min-width="180" align="center">
|
|
|
|
|
+ <template v-slot="scope">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ @click="downloadUFIle(scope.row)"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ >
|
|
|
|
|
+ 下载
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ @click="deleteUFIle(scope.row)"
|
|
|
|
|
+ type="danger"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ >
|
|
|
|
|
+ 删除
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <div style="width: 100%; text-align: right; margin-top: 43px">
|
|
|
|
|
+ <el-pagination
|
|
|
|
|
+ background
|
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
|
+ :current-page="currentPage"
|
|
|
|
|
+ :total="total"
|
|
|
|
|
+ @current-change="pageChange"
|
|
|
|
|
+ ></el-pagination>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { ref, h, reactive, toRefs, onMounted } from "vue";
|
|
|
|
|
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
|
|
|
|
|
+import store from "../store";
|
|
|
|
|
+import router from "../router";
|
|
|
|
|
+import md5 from "md5";
|
|
|
|
|
+import api from "../apis/otherFetch";
|
|
|
|
|
+const dataCenterUrl = import.meta.env.VITE_URL_DATACENTER;
|
|
|
|
|
+let actionUrl = ref(dataCenterUrl + "ufile/upload");
|
|
|
|
|
+let currentPage = ref(1);
|
|
|
|
|
+let type = ref("2");
|
|
|
|
|
+let tableData = ref([]);
|
|
|
|
|
+let total = ref(0);
|
|
|
|
|
+async function getUFileList(page) {
|
|
|
|
|
+ currentPage.value = page || currentPage.value;
|
|
|
|
|
+ let res = await api.getUFileList({
|
|
|
|
|
+ currentPage: currentPage.value,
|
|
|
|
|
+ size: 10,
|
|
|
|
|
+ type: type.value || 0,
|
|
|
|
|
+ });
|
|
|
|
|
+ if (res.data.status == 0) {
|
|
|
|
|
+ tableData.value = res.data.result;
|
|
|
|
|
+ total.value = res.data.total;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ tableData.value = [];
|
|
|
|
|
+ total.value = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+let upLoading = ref(false);
|
|
|
|
|
+let currentIndex = ref(0);
|
|
|
|
|
+
|
|
|
|
|
+function pageChange(e) {
|
|
|
|
|
+ currentPage.value = e;
|
|
|
|
|
+ getUFileList();
|
|
|
|
|
+}
|
|
|
|
|
+let options = ref([{ key: 2, value: "海事公告" }]);
|
|
|
|
|
+
|
|
|
|
|
+async function getUFileTypeSelect() {
|
|
|
|
|
+ let res = await api.getUFileTypeSelect();
|
|
|
|
|
+ options.value = res.data.result;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function downloadUFIle(item) {
|
|
|
|
|
+ let a = document.createElement("a");
|
|
|
|
|
+ a.setAttribute("href", item.downloadUrl);
|
|
|
|
|
+ a.click();
|
|
|
|
|
+}
|
|
|
|
|
+function deleteUFIle(item) {
|
|
|
|
|
+ ElMessageBox.confirm(`确认删除: ${item.fileName}?`, "提示", {
|
|
|
|
|
+ confirmButtonText: "确定",
|
|
|
|
|
+ cancelButtonText: "取消",
|
|
|
|
|
+ type: "warning",
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(async () => {
|
|
|
|
|
+ let res = await api.deleteUFile({
|
|
|
|
|
+ id: item.id,
|
|
|
|
|
+ });
|
|
|
|
|
+ if (res.data.status == 0) {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ type: "success",
|
|
|
|
|
+ message: "删除成功",
|
|
|
|
|
+ });
|
|
|
|
|
+ getUFileList();
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((e) => {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ });
|
|
|
|
|
+}
|
|
|
|
|
+let uploadRef = ref(null);
|
|
|
|
|
+function uploadUFile(e) {
|
|
|
|
|
+ if (fileList.value.length == 0) {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: "请选择文件",
|
|
|
|
|
+ type: "warning",
|
|
|
|
|
+ });
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ uploadRef.value.submit();
|
|
|
|
|
+}
|
|
|
|
|
+let visable = ref(false);
|
|
|
|
|
+function showUploadModal() {
|
|
|
|
|
+ visable.value = true;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+let fileList = ref([]);
|
|
|
|
|
+function uploadSuccess(e) {
|
|
|
|
|
+ if (e.status == 0) {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: "上传成功!",
|
|
|
|
|
+ type: "success",
|
|
|
|
|
+ });
|
|
|
|
|
+ visable.value = false;
|
|
|
|
|
+ fileList.value = [];
|
|
|
|
|
+ uploadRef.value.clearFiles();
|
|
|
|
|
+ uploadParams.value = {
|
|
|
|
|
+ type: 2,
|
|
|
|
|
+ pCode: 0,
|
|
|
|
|
+ cCode: 0,
|
|
|
|
|
+ aCode: 0,
|
|
|
|
|
+ };
|
|
|
|
|
+ getUFileList();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: e.msg,
|
|
|
|
|
+ type: "error",
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function uploadChange(e) {
|
|
|
|
|
+ fileList.value[0] = e;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleRemove() {
|
|
|
|
|
+ fileList.value = [];
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+let uploadParams = ref({
|
|
|
|
|
+ type: 2,
|
|
|
|
|
+ pCode: 0,
|
|
|
|
|
+ cCode: 0,
|
|
|
|
|
+ aCode: 0,
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+let provinceSelect = ref([]);
|
|
|
|
|
+async function getProvince() {
|
|
|
|
|
+ let { data } = await api.getProvince({});
|
|
|
|
|
+ provinceSelect.value = [{ key: 0, value: "全选" }, ...data.result];
|
|
|
|
|
+}
|
|
|
|
|
+let citySelect = ref([]);
|
|
|
|
|
+async function getCity(provinceCode) {
|
|
|
|
|
+ let { data } = await api.getCity({ provinceCode });
|
|
|
|
|
+ citySelect.value = [{ key: 0, value: "全选" }, ...data.result];
|
|
|
|
|
+}
|
|
|
|
|
+let areaSelect = ref([]);
|
|
|
|
|
+async function getArea(cityCode) {
|
|
|
|
|
+ let { data } = await api.getArea({ cityCode });
|
|
|
|
|
+ areaSelect.value = [{ key: 0, value: "全选" }, ...data.result];
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+async function selectProvince(provinceCode) {
|
|
|
|
|
+ getCity(provinceCode);
|
|
|
|
|
+}
|
|
|
|
|
+async function selectCity(cityCode) {
|
|
|
|
|
+ getArea(cityCode);
|
|
|
|
|
+}
|
|
|
|
|
+function selectArea(e) {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ getUFileList();
|
|
|
|
|
+ getProvince();
|
|
|
|
|
+ // getUFileTypeSelect();
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.seach-btn {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ width: 60px;
|
|
|
|
|
+ height: 38px;
|
|
|
|
|
+ background: #0094fe;
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 38px;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.cargo-owner-add {
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+ border: 1px solid #0094fe;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #0094fe;
|
|
|
|
|
+ line-height: 32px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+:deep().el-dialog {
|
|
|
|
|
+ width: 560px;
|
|
|
|
|
+ padding: 20px 50px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+:deep() .el-dialog__title {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #0094fe;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|