增加导入功能

sgzb-ui/src/main.js

@@ -12,13 +12,13 @@ import store from './store'
 import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
-import { download,downloadJson } from '@/utils/request'
+import { download, downloadJson } from '@/utils/request'
 
 import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree, indexContinuation } from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
@@ -56,6 +56,7 @@ Vue.prototype.download = download
 Vue.prototype.downloadJson = downloadJson
 Vue.prototype.handleTree = handleTree
 Vue.prototype.globalUrl = global_
+Vue.prototype.indexContinuation = indexContinuation
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)

sgzb-ui/src/utils/ruoyi.js

@@ -88,7 +88,7 @@ export function selectDictLabel(datas, value) {
 
 // 回显数据字典（字符串、数组）
 export function selectDictLabels(datas, value, separator) {
-  if (value === undefined || value.length ===0) {
+  if (value === undefined || value.length === 0) {
     return "";
   }
   if (Array.isArray(value)) {
@@ -231,3 +231,8 @@ export function tansParams(params) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+
+// 处理表格索引延续问题
+export function indexContinuation(num, size) {
+  return (num - 1) * size + 1
+}

sgzb-ui/src/views/base/section/index.vue

@@ -22,6 +22,9 @@
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
@@ -121,7 +124,12 @@
           <el-input v-model="form.linkMan" placeholder="请输入联系人" maxlength="20" />
         </el-form-item>
         <el-form-item label="联系电话" prop="telphone">
-          <el-input v-model="form.telphone" placeholder="请输入联系电话" maxlength="11" onkeyup="this.value = this.value.replace(/[^\d]/g,'');"/>
+          <el-input
+            v-model="form.telphone"
+            placeholder="请输入联系电话"
+            maxlength="11"
+            onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -129,6 +137,38 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 导入弹框 -->
+    <el-dialog
+      title="数据导入"
+      :visible.sync="importVisible"
+      v-if="importVisible"
+      append-to-body
+      width="40%"
+      :before-close="
+        () => {
+          this.importVisible = false
+        }
+      "
+    >
+      <el-upload
+        drag
+        :action="uploadAction"
+        :limit="1"
+        accept=".xls, .xlsx"
+        :headers="headers"
+        :data="uploadData"
+        :on-success="onSuccess"
+        :on-progress="onProgress"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <div class="el-upload__tip" slot="tip">只能上传.xlx/.xls文件</div>
+      </el-upload>
+    </el-dialog>
   </div>
 </template>
 
@@ -138,6 +178,7 @@ import { unitTypeList } from '@/api/base/base'
 import { deptTreeSelect } from '@/api/system/user'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getToken } from '@/utils/auth'
 export default {
   name: 'Section',
   dicts: ['sys_normal_disable'],
@@ -193,6 +234,14 @@ export default {
         //   { required: true, message: "所属工程项目", trigger: "blur" }
         // ]
       },
+      importVisible: false,
+      uploadAction: process.env.VUE_APP_BASE_API + '/system/sys/file/upload', // 上传地址
+      headers: {
+        Authorization: 'Bearer ' + getToken(),
+      },
+      uploadData: {
+        fileType: 'sx',
+      },
     }
   },
   created() {
@@ -361,6 +410,31 @@ export default {
         this.$store.dispatch('dict/cleanDict')
       })
     },
+
+    // 导入按钮
+    handleImport() {
+      console.log('导入----')
+      this.importVisible = true
+    },
+    // 上传时
+    onProgress(file) {
+      console.log(file, '上传时的文件')
+    },
+    // 上传成功
+    onSuccess(fileList) {
+      console.log('上传成功！！', fileList)
+    },
   },
 }
 </script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog__body {
+  text-align: center;
+}
+
+.el-upload__tip {
+  font-size: 14px;
+  color: red;
+}
+</style>