feat: 添加导入研发费用明细表和模板下载功能

src/views/expense-management/cost-detail/index.vue

@@ -1,6 +1,9 @@
 <template>
   <fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
-  <fvTable ref="tableIns" :tableConfig="tableConfig">
+  <div style="float: left">
+    <import-cost-excel   @success="importTheExpenseLedger"/>
+  </div>
+  <fvTable ref="tableIns" class="tablte" :tableConfig="tableConfig" @headBtnClick="headBtnClick" :changeExportPosition="true">
     <template #empty>
       <el-empty description="暂无数据"/>
     </template>
@@ -8,11 +11,10 @@
 </template>
 
 <script setup lang="jsx">
-import fvSelect from '@/fvcomponents/fvSelect/index.vue'
-import {toThousands} from '@/utils/changePrice.js'
-import { getSubCompOpt } from '@/api/user/user.js';
 import {reactive, ref} from "vue";
 import {useRoute, useRouter} from "vue-router";
+import {costTemplateDownload, exportExcel, ledgerTemplateDownload} from "../../../api/project-manage";
+import ImportCostExcel from "@/components/ImportCostExcel.vue";
 const router = useRouter()
 const route = useRoute()
 const searchConfig = ref([
@@ -160,24 +162,65 @@ const tableConfig = reactive({
   ],
   api: '/workflow/mosr/payment/list',
   params: {},
+  btns: [
+    {name: '模板下载', key: 'down', color: '#DED0B2'},
+    // {name: '导入', key: 'import', color: '#DED0B2'}
+  ],
   export:{
     open :true,
-    fileName:`研发费用明细表.xlsx`
+    fileName:`研发费用明细表`
   }
 })
 const search = (val) => {
   tableConfig.params = {...val}
   tableIns.value.refresh()
 }
-const init = async () => {
-  const res = await getSubCompOpt()
-  searchConfig.value.find(item=>item.prop == 'affiliatedCompanyIds').props.data = res.data
+
+const headBtnClick = (key) => {
+  switch (key) {
+    case 'down':
+      handleImportTemplateDownload()
+      break;
+    case 'import':
+      handleAdd()
+      break;
+  }
+}
+const exportTable = () => {
+  const $e = tableIns.value.$el
+  let $table = $e.querySelector('.el-table__fixed')
+  if (!$table) {
+    $table = $e
+  }
+  exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表", 2)
+}
+//导入模板下载
+const handleImportTemplateDownload=()=>{
+  costTemplateDownload().then(res => {
+    let link = document.createElement('a')
+    try {
+      let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
+      let _fileName = "研发费用明细表模板.xlsx"//文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
+      link.style.display='none';
+      // 兼容不同浏览器的URL对象
+      const url = window.URL || window.webkitURL || window.moxURL;
+      link.href=url.createObjectURL(blob);
+      link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_')+1))
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      url.revokeObjectURL(link.href);//销毁url对象
+    }catch (e) {
+      console.log('下载的文件出错',e)
+    }
+  })
+}
+const importTheExpenseLedger = () => {
+  tableIns.value.refresh()
 }
-
-// init()
-
 </script>
 <style scoped lang="scss">
+
 :deep(.el-table__header) {
   .is-leaf:first-child {
     .cell {