feat: 新增文件上传模板

guzijian
1 parent 9c977621
Showing 3 changed files with 338 additions and 21 deletions
src/api/template/template.js
src/components/FileUpload/index.vue
src/views/template/template/index.vue
+import request from '@/utils/request'
+
+// 查询车队与线路对应模板列表
+export function listTemplate(query) {
+  return request({
+    url: '/template/template/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询车队与线路对应模板详细
+export function getTemplate(id) {
+  return request({
+    url: '/template/template/' + id,
+    method: 'get'
+  })
+}
+
+// 新增车队与线路对应模板
+export function addTemplate(data) {
+  return request({
+    url: '/template/template',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改车队与线路对应模板
+export function updateTemplate(data) {
+  return request({
+    url: '/template/template',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除车队与线路对应模板
+export function delTemplate(id) {
+  return request({
+    url: '/template/template/' + id,
+    method: 'delete'
+  })
+}
 <template>
   <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="fileUpload"
-    >
+    <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit"
+      :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false"
+      :headers="headers" class="upload-file-uploader" ref="fileUpload">
       <!-- 上传按钮 -->
       <el-button type="primary">选取文件</el-button>
     </el-upload>
@@ -56,12 +45,19 @@ const props = defineProps({
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "txt", "pdf"],
   },
   // 是否显示提示
   isShowTip: {
     type: Boolean,
     default: true
+  },
+  prefix: {
+    type: String,
+    default: "/common/upload"
+  },
+  callBackUpload: {
+    type: Function,
   }
 });
@@ -70,7 +66,7 @@ const emit = defineEmits();
 const number = ref(0);
 const uploadList = ref([]);
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
+const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + props.prefix); // 上传文件服务器地址
 const headers = ref({ Authorization: "Bearer " + getToken() });
 const fileList = ref([]);
 const showTip = computed(
@@ -94,7 +90,7 @@ watch(() =&gt; props.modelValue, val =&gt; {
     fileList.value = [];
     return [];
   }
-},{ deep: true, immediate: true });
+}, { deep: true, immediate: true });
 // 上传前校检格式和大小
 function handleBeforeUpload(file) {
@@ -160,14 +156,24 @@ function uploadedSuccessfully() {
     emit("update:modelValue", listToString(fileList.value));
     proxy.$modal.closeLoading();
   }
+  try {
+    proxy.callBackUpload();
+  } catch (error) {
+
+  }
 }
 // 获取文件名称
 function getFileName(name) {
-  if (name.lastIndexOf("/") > -1) {
-    return name.slice(name.lastIndexOf("/") + 1);
-  } else {
-    return "";
+  console.log(name);
+  try {
+    if (name.lastIndexOf("/") > -1) {
+      return name.slice(name.lastIndexOf("/") + 1);
+    } else {
+      return "";
+    }
+  } catch (res) {
+    return "文件"
   }
 }
@@ -188,18 +194,21 @@ function listToString(list, separator) {
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
 }
+
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="车队名称" prop="fleetName">
+        <el-input v-model="queryParams.fleetName" placeholder="请输入车队名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="线路名称" prop="lineName">
+        <el-input v-model="queryParams.lineName" placeholder="请输入线路名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
+          v-hasPermi="['template:template:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['template:template:edit']">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['template:template:remove']">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport"
+          v-hasPermi="['template:template:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleDownloadTemplate"
+          v-hasPermi="['template:template:export']">下载全量导入模板</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Upload" @click="handleImport"
+          v-hasPermi="['template:template:import']">上传全量导入文件</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" type="index" width="60" align="center">
+        <template #default="scope">
+          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="车队名称" align="center" prop="fleetName" />
+      <el-table-column label="线路名称" align="center" prop="lineName" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="160">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['template:template:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['template:template:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+      @pagination="getList" />
+
+    <!-- 添加或修改车队与线路对应模板对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="templateRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="车队名称" prop="fleetName">
+          <el-input v-model="form.fleetName" placeholder="请输入车队名称" />
+        </el-form-item>
+        <el-form-item label="线路名称" prop="lineName">
+          <el-input v-model="form.lineName" placeholder="请输入线路名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 添加或修改车队与线路对应模板对话框 -->
+    <el-dialog :title="title" v-model="isShowTipOpen" width="800px" append-to-body>
+      <file-upload :callBackUpload="callBackUpload" :limit="1" :isShowTip="isShowTip"
+        prefix="/big/view/importExcel"></file-upload>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Template">
+import { addTemplate, delTemplate, getTemplate, listTemplate, updateTemplate } from "@/api/template/template";
+import { ElNotification } from 'element-plus';
+import moment from 'moment';
+import { ref } from "vue";
+const { proxy } = getCurrentInstance();
+
+const templateList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const isShowTip = ref(false);
+const isShowTipOpen = ref(false)
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    fleetName: null,
+    lineName: null,
+  },
+  rules: {
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询车队与线路对应模板列表 */
+function getList() {
+  loading.value = true;
+  listTemplate(queryParams.value).then(response => {
+    templateList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+function handleImport() {
+  isShowTip.value = true;
+  isShowTipOpen.value = true;
+}
+
+function callBackUpload() {
+  console.log("上传完成");
+  isShowTip.value = false;
+  isShowTipOpen.value = false;
+  getList();
+  ElNotification({
+    title: '提示',
+    message: '上传完成',
+    duration: 0,
+  })
+  isShowTipOpen.value = false;
+  isShowTip.value = false;
+
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    fleetName: null,
+    lineName: null,
+    createTime: null,
+    updateTime: null,
+    createBy: null,
+    updateBy: null,
+    remark: null
+  };
+  proxy.resetForm("templateRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加车队与线路对应模板";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value
+  getTemplate(_id).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改车队与线路对应模板";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["templateRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateTemplate(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addTemplate(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal.confirm('是否确认删除车队与线路对应模板编号为"' + _ids + '"的数据项？').then(function () {
+    return delTemplate(_ids);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => { });
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  let namePre = moment().format("YYYY-MM")
+  proxy.download('template/template/export', {
+    ...queryParams.value
+  }, `${namePre}车队与线路匹配表.xlsx`)
+}
+
+/** 下载模板 */
+function handleDownloadTemplate() {
+  let namePre = moment().format("YYYY-MM")
+  proxy.download('big/view/exportExcel', {
+    ...queryParams.value
+  }, `${namePre}车队与线路匹配表全量导入模板.xlsx`)
+
+}
+getList();
+</script>