add 降雨量模板下载

src/components/Base/index.ts

@@ -1,25 +1,25 @@
-import { kebabCase } from 'lodash'
 import Vue from 'vue'
 // import Page from '../Base/Page/index.vue'
 // import Table from '../Base/Table/index.vue'
 // import Dialog from '../Base/Dialog/index.vue'
 // import Title from '../Base/Title/index.vue'
 // import ImagePreview from '../Base/Dialog/ImagePreview.vue'
-
+import { upperFirst, camelCase } from 'lodash'
 // Vue.component('tf-page', Page)
 // Vue.component(`tf-table`, Table)
 // Vue.component(`tf-dialog`, Dialog)
 // Vue.component(`tf-title`, Title)
 // Vue.component(`tf-image-preview`, ImagePreview)
+const requireComponent = require.context('@/components/Base', true, /\.vue$/)
 
 export default {
-  install(vue: typeof Vue): void {
-    const requireComponent = require.context('@/components/Base', true, /\.vue$/)
+  install(): void {
     requireComponent.keys().forEach((fileName) => {
-      const Component = requireComponent(fileName)
-      console.log(Component.default.name)
-      vue.component(kebabCase(Component.default.name), Component.default)
-      vue.component(Component.default.name, Component.default)
+      const componentConfig = requireComponent(fileName)
+      const component = componentConfig.default || componentConfig
+      const componentName = upperFirst(camelCase(component.options.name))
+      console.log(componentName, component)
+      Vue.component(componentName, component)
     })
   }
 }

src/main.ts

@@ -11,6 +11,9 @@ import 'element-ui/lib/theme-chalk/index.css'
 import '@/styles/index.scss'
 import './directives'
 
+import baseComponents from '@/components/Base'
+Vue.use(baseComponents)
+
 import App from './App.vue'
 import store from './store'
 import router from './router'
@@ -22,9 +25,6 @@ import '@/permission' // 权限控制
 import '@/assets/iconfont/iconfont.js'
 import '@/assets/iconfont/iconfont.css'
 
-import baseComponents from '@/components/Base'
-Vue.use(baseComponents)
-
 import Moment from 'vue-moment'
 //全局接口
 import PortApi from './api/APIs'

src/views/spectrum/report/rainfall/ImportForm.vue

@@ -15,6 +15,11 @@
           <div slot="tip" class="text">⚠️ 注意：请上传.xlsx .xls格式的文件，且文件大小不能超10MB</div>
           <el-button size="small" type="primary" :disabled="loading"> 点击上传 </el-button>
         </el-upload>
+        <div>
+          <el-button type="text" style="margin-top: 1em">
+            <a :href="xlsxString" download="降雨量模板.xlsx">下载降雨量模板</a>
+          </el-button>
+        </div>
       </el-form-item>
     </el-form>
   </tf-dialog>
@@ -24,12 +29,13 @@
   import { Vue, Component, Prop } from 'vue-property-decorator'
   import { ElForm } from 'element-ui/types/form'
   import { ElUploadInternalFileDetail } from 'element-ui/types/upload'
+  import xlsxString from './xlsx_template'
 
   @Component({ name: 'TeamForm', components: {} })
   export default class TeamForm extends Vue {
     @Prop({ type: Boolean, default: false }) loading!: boolean
     $refs!: { form: ElForm }
-
+    xlsxString: string = xlsxString
     formData: { fileList: ElUploadInternalFileDetail[] } = { fileList: [] }
     rules = {
       fileList: [

src/views/spectrum/report/rainfall/QueryForm.vue

@@ -39,6 +39,9 @@
         导入
       </el-button>
     </el-form-item>
+    <el-form-item label-width="0">
+      <!-- <input @change="onChange" type="file" /> -->
+    </el-form-item>
   </el-form>
 </template>
 
@@ -59,7 +62,15 @@
     getDefaultDateTimePickerProp = getDefaultDateTimePickerProp
     datetime: (Date | string)[] = []
     formData: Partial<IRainfall> = {}
-
+    // xlsxString = xlsxString
+    // onChange(e: Event) {
+    //   console.log(e)
+    //   const fr = new FileReader()
+    //   fr.readAsDataURL(e.target.files[0])
+    //   fr.onload = (e) => {
+    //     console.log(fr.result)
+    //   }
+    // }
     onQuery() {
       const [beginDate = '', endDate = ''] = this.datetime
       this.$emit('query', { ...this.formData, beginDate, endDate })