feat(预制数据管理): 文件上传 模板下载

src/components/FileUpload/index.vue

@@ -20,9 +20,11 @@
     </el-upload>
     <!-- 上传提示 -->
     <div v-if="showTip && !disabled" class="el-upload__tip">
-      请上传
+      <template v-if="otherTips">
+        <b style="color: #f56c6c">{{otherTips}}</b>
+      </template>
       <template v-if="fileSize">
-        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        请上传大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
       </template>
       <template v-if="fileType">
         格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
@@ -72,6 +74,11 @@ const props = defineProps({
     type: Number,
     default: 5,
   },
+  // 大小限制(MB)
+  otherTips: {
+    type: String,
+    default: '',
+  },
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,

src/views/controlPlan/baseConfig/presetData/details.vue

@@ -7,17 +7,17 @@
           <el-button type="text" @click="$router.go(-1)">返回</el-button>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="所属填写模板">
-            <span>{{contentData.templateCode}}</span>
+          <el-form-item label="所属填写模板:">
+            <span>{{contentData.relatedTemplateName}}</span>
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="所属表单">
+          <el-form-item label="所属表单:">
             <span>{{contentData.relatedFormName}}</span>
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="备注">
+          <el-form-item label="备注:">
             <span>{{contentData.remark}}</span>
           </el-form-item>
         </el-col>
@@ -31,14 +31,20 @@
 </template>
 <script setup>
 import {getPreset} from "@/api/control/preset.js";
-
+import {onMounted} from "vue";
+import {useRouter} from "vue-router";
+const router = useRouter();
 let contentData = reactive({})
-function getContentData(){
-  getPreset(route.query.id).then(res => {
+function getContentData(id){
+  getPreset(id).then(res => {
     contentData = res.data
   })
 }
-getContentData()
+onMounted(() => {
+  console.log('111',router.currentRoute.value.query.id)
+  const id = router.currentRoute.value.query.id
+  getContentData(id)
+})
 </script>
 
 <style scoped lang="scss">

src/views/controlPlan/baseConfig/presetData/index.vue

@@ -90,9 +90,8 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary"  @click="" v-hasPermi="['control:preset:edit']">下载</el-button>
+          <el-button link type="primary"  @click="downFile(scope.row)" v-hasPermi="['control:preset:edit']">下载</el-button>
           <el-button link type="primary"  @click="handleUpdate(scope.row)" v-hasPermi="['control:preset:edit']">上传更新</el-button>
-          <el-button link type="primary"  @click="" v-hasPermi="['control:preset:edit']">恢复默认</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -145,7 +144,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="上传文件" prop="file">
-          <FileUpload ref="upload" :modelValue="form.file" :limit="1" :fileType="['xls', 'xlsx']" :file-size="30"/>
+          <FileUpload ref="upload" v-model="form.fileUrl" :modelValue="form.fileUrl" :limit="1" :fileType="['xls', 'xlsx']" :file-size="30" other-tips="请先下载模板填好数据再上传"/>
           <el-button type="text"  :disabled="form.relatedFormId==''||form.relatedFormId==null" @click="downloadTemplate">点击下载数据内容模板</el-button>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -187,6 +186,7 @@ const file = ref(null);
 const upload = ref(null);
 const templateList = ref([]);
 const formList = ref([]);
+const baseUrl = ref(import.meta.env.VITE_APP_BASE_API)
 const data = reactive({
   form: {},
   queryParams: {
@@ -277,6 +277,10 @@ function dataContent(row){
     }
   });
 }
+// 文件下载
+function downFile(row){
+  window.location.href = row.fileUrl
+}
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();