2222

src/views/components/common/upload.vue

 <template>
-  <div v-if="file.downloadUrl" class="file-box">
-    <div>
-      <document-view :fileUrl="file.downloadUrl" :fileName="file.fileName" :imageArray="[file.downloadUrl]"></document-view>
+  <div class="upload-layout">
+    <div v-if="file.downloadUrl" class="file-box">
+      <div>
+        <a-icon type="file" style="margin-right: 8px" />
+        <span class="hover-pointer" @click="downloadfile">{{file.fileName}}</span>
+      </div>
+      <a-icon type="delete" class="hover-pointer" @click="deletefile" style="margin-left: 8px" />
+    </div>
+    <div v-else>
+      <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" ref="fileElem" class="visually-hidden" @change="handleFiles">
+      <a-button @click="fileSelect">
+        <a-icon type="upload" />选择文件
+      </a-button>
     </div>
-    <a-icon type="delete" class="hover-pointer d-icon" @click="deletefile(file)" />
-  </div>
-  <div v-else>
-    <a-form-model-item :prop="name +'.'+ index + '.downloadUrl'" :rules="{required: true, message: '请上传附件',trigger: 'blur',}">
-      <input type="file" :ref="name +'fileElem' + index" class="visually-hidden" @change="handleFiles(file, index)" />
-      <a-button @click="fileSelect(index)"><a-icon type="upload" />选择文件</a-button>
-    </a-form-model-item>
   </div>
 </template>
 <script>
-import documentView from '@/views/components/common/documentView'
+const File = { fileName: null, downloadUrl: null, fileExplain: null, downloadId: null }
 export default {
-  name: "upLoad",
-  components: {
-    documentView
-  },
+  name: "FileUpload",
   data () {
     return {
+      file: { ...File },
     };
   },
   props: {
     value: {
-      type: Object,
-      default: () => {
-        return null
-      }
-    },
-    file: {
-      type: Object,
-      default: () => {
-        return null
-      }
-    },
-    name: {
       type: String,
-      default: () => {
-        return 'fileList'
-      }
-    },
-    index: {
-      type: Number,
       default () {
-        return 0
-      },
-    },
+        return null
+      }
+    }
   },
   created () {
-
+    this.fileLoad(this.value)
   },
   methods: {
-    deletefile (item) {
-      this.$api.base.deletefile({ id: item.downloadId }).then(({ data = {} }) => {
-        if (data) {
-          item.fileName = ''
-          item.downloadUrl = ''
-          item.downloadId = ''
-        }
-      }).catch(() => {
-        this.$message.error('删除失败')
-      })
+    fileLoad (value) {
+    },
+    fileSelect () {
+      let fileElem = this.$refs['fileElem']
+      if (fileElem) {
+        fileElem.click()
+      }
     },
-    handleFiles (item, index) {
-      let fileElem = this.$refs[this.name + 'fileElem' + index]
+    handleFiles () {
+      let fileElem = this.$refs['fileElem']
       let files = fileElem.files
       if (files.length <= 0) {
         this.$message.error('未选中文件，请尝试重新选择')
         return
       }
-      if (!this.fileCheck(files[0]))
-        return
-      this.$api.base.asyncUpload(this.uploadHandle(files[0], files[0].name)).then(({ data = {} }) => {
-        if (data) {
-          item.fileName = files[0].name
-          item.downloadUrl = data.downloadUrl
-          item.downloadId = data.id
-          console.log(item, data)
-        } else
-          this.$message.error('上传失败')
-      }).catch(() => {
-        this.$message.error('上传失败')
-      })
+      this.file.fileName = files[0].name
+      this.file.downloadUrl = '/' + files[0].name
+      this.$emit("beforeUpload", files[0]);
     },
-    fileCheck (file) {
-      //判断是否小于1M
-      let isLtSize = file.size < 1024 * 1024 * 15;
-      if (!isLtSize) {
-        this.$message.error('文件大小不能超过15M！');
-        return false
-      }
-      // var fileNames = file.name.split('.')
-      // var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
-      // var extList = ['doc', 'docx', 'pdf']
-      // if (!extList.find((item) => item == fileType)) {
-      //   this.$message.error('文件格式错误！')
-      //   return false
-      // }
-      return true
+    downloadfile () {
+
+    },
+    deletefile () {
+      this.file = { ...File }
+      this.$emit("cancel");
     },
     uploadHandle (file, fileName) {
       let formData = new FormData()
@@ -107,17 +68,11 @@ export default {
       formData.append('fileName', fileName)
       return formData
     },
-    fileSelect (index) {
-      let fileElem = this.$refs[this.name + 'fileElem' + index]
-      if (fileElem) {
-        fileElem.click()
-      }
-    },
   },
   watch: {
     value: {
       handler (value) {
-
+        this.selected = value
       },
     }
   }
@@ -131,7 +86,17 @@ export default {
   line-height: 30px;
 
   .file-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin: 0 8px;
+
+    > div:nth-child(1) {
+      max-width: 90%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
   .visually-hidden {
     display: none !important;

src/views/report/project/components/memberImport.vue

+<template>
+  <div class="app-content" style="height: 65vh;overflow: auto;">
+    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
+      <div style="width:100%; height: 36px;">
+        <a :href="url" download="memberInfo.xlsx">
+          <a-icon type="download"></a-icon>&nbsp;<span style="color:green;text-decoration:underline;">模板下载</span>
+        </a>
+        <up-load @beforeUpload="beforeUpload" />
+      </div>
+      <div style="width:100%;height: calc(100% - 72px);overflow: auto;">
+        <a-table :dataSource="tableData"  :columns="columns" rowKey="index" :pagination="false" :loading="loading" bordered size="small">
+        </a-table>
+      </div>
+      <div style="text-align:center;width:100%; height: 36px;">
+        <a-button type="primary" @click="dataImport" :disabled="disabled">导入</a-button>
+      </div>
+    </a-spin>
+  </div>
+</template>
+<script>
+import { isEmptyParams, readExcelFile, personGender, personBirthday, checkIdentitytionId, checkEmail, checkPhone } from "@/views/utils/common"
+import moment from "moment"
+
+export default {
+  name: "expertImport",
+  data () {
+    return {
+      columns: [
+        { title: "姓名", dataIndex: "name", align: 'center' },
+        { title: "出生日期", dataIndex: "birthday", align: 'center' },
+        { title: "性别", dataIndex: "sex", align: 'center' },
+        { title: "职称", dataIndex: "titleName", align: 'center' },
+        { title: "学位", dataIndex: "degreeName", align: 'center' },
+        { title: '工作单位', dataIndex: 'workUnit', align: 'center' },
+        { title: '电话', dataIndex: 'mobile', align: 'center' },
+        { title: '电子邮箱', dataIndex: 'email', align: 'center' },
+        { title: '证件号码', dataIndex: 'certId', align: 'center' },
+        { title: '项目分工', dataIndex: 'projWork', align: 'center' },
+        { title: '每年工作（月）', dataIndex: 'forMonths', align: 'center' },
+      ],
+      tableData: [],
+      disabled: true,
+      loading: false,
+      url: '/downloadFile/memberInfo.xlsx',
+    };
+  },
+  created () {
+
+  },
+  methods: {
+    beforeUpload (file) {
+      this.tableData = []
+      let list = readExcelFile(file, 0)
+      let certList = []
+      let mobileList = []
+      let exportList = []
+
+      list.then((d) => {
+        //读取文件数据
+        d.forEach(e => {
+          let gender = personGender(e.证件号)
+          let birthday = personBirthday(e.证件号) + ' 00:00:00'
+          let expert = { personName: e.姓名, certId: e.证件号, sex: gender, birthday: moment(birthday).format('YYYY-MM-DD HH:mm:ss'), mobile: e.手机号, email: e.邮箱, specName: e.专业, titleName: e.职称, unitName: e.单位 }
+          exportList.push(expert)
+          certList.push(e.证件号)
+          mobileList.push(e.手机号)
+        })
+
+        let uniqueMobileList = [...new Set(mobileList)]
+        if (uniqueMobileList.length != exportList.length) {
+          this.$message.error('手机号出现重复！')
+          return false
+        }
+
+        let uniqueCertList = [...new Set(certList)]
+        if (uniqueCertList.length != exportList.length) {
+          this.$message.error('证件号出现重复！')
+          return false
+        }
+
+        if (exportList.length > 0) {
+          this.tableData = exportList
+          this.disabled = false
+        }
+      })
+
+      return false
+    },
+    dataImport () {
+      if (this.tableData.length == 0) {
+        this.$message.error('请选择Excel！')
+        return
+      }
+      let pars = isEmptyParams(this.tableData)
+      let par = { ...pars }
+      this.$api.expert.expertImport(this.tableData).then(({ data = {} }) => {
+        if (data) {
+          this.$message.info(data)
+          this.tableData = []
+        }
+      })
+    }
+  },
+};
+</script>
+<style scoped lang="less">
+::v-deep .ant-spin-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+

src/views/report/project/components/projectMemberEdit.vue

@@ -186,53 +186,34 @@
       <a-row type="flex">
         <a-col :span="24" style="text-align: center;">
           <div class="special-middle">
-            <a-button type="primary" @click="addMember">添加项目组成员</a-button>
+            <a-button type="primary" @click="importExcel">导入组成员</a-button>
+            <a-button type="primary" @click="addMember" style="margin-left: 20px;">添加项目组成员</a-button>
           </div>
         </a-col>
       </a-row>
     </div>
-
     <a-modal v-model="visibleEdit" v-if="visibleEdit" title="项目组成员（添加/修改）" width="60%" :footer="null" :dialog-style="{ top: '20%' }" destroyOnClose :maskClosable="false">
       <member-edit :memObject.sync="memObject" @close="closeWindow" />
     </a-modal>
+    <a-modal v-model="visibleImport" v-if="visibleImport" title="项目组成员导入" width="90%" :footer="null" :dialog-style="{ top: '12%' }" destroyOnClose>
+      <member-import />
+    </a-modal>
   </div>
 </template>
 
 <script>
 //用法 <proj-group-member :members.sync="formData.members" />
 
+import memberImport from '@/views/report/project/components/memberImport';
 import memberEdit from '@/views/report/project/components/memberEdit'
 import moment from 'moment'
 
-const Member = {
-  name: null,
-  sex: null,
-  birthday: null,
-  certificateType: null,
-  certificateTypeName: null,
-  certId: null,
-  nation: null,
-  nationName: null,
-  country: null,
-  workUnit: null,
-  title: null,
-  titleName: null,
-  degree: null,
-  degreeName: null,
-  email: null,
-  mobile: null,
-  telephone: null,
-  fax: null,
-  projWork: null,
-  forMonths: null,
-  spec: null,
-  specName: null
-}
+const Member = { name: null, sex: null, birthday: null, certificateType: null, certId: null, nation: null, country: null, workUnit: null, title: null, degree: null, email: null, mobile: null, telephone: null, fax: null, projWork: null, forMonths: null, spec: null, fileId: null, downloadId: null, fileName: null, downloadUrl: null }
 
 export default {
   name: 'projectMemberEdit',
   components: {
-    
+    memberImport,memberEdit
   },
   data () {
     return {
@@ -240,6 +221,7 @@ export default {
       isEdit: false,
       memIndex: 0,
       visibleEdit: false,
+      visibleImport: false,
     }
   },
   props: {
@@ -250,13 +232,13 @@ export default {
       }
     },
   },
-  components: {
-    memberEdit
-  },
   created () {
   },
   methods: {
     moment,
+    importExcel () {
+      this.visibleImport = true;
+    },
     closeWindow (value) {
       if (!this.isEdit) {
         this.memObject = {}

static/css/antd.css

@@ -25450,7 +25450,7 @@ tr.ant-table-expanded-row td>.ant-table-wrapper {
 .ant-table-small>.ant-table-content>.ant-table-fixed-right>.ant-table-header>table>.ant-table-thead>tr>th,
 .ant-table-small>.ant-table-content>.ant-table-fixed-left>.ant-table-body-outer>.ant-table-body-inner>table>.ant-table-thead>tr>th,
 .ant-table-small>.ant-table-content>.ant-table-fixed-right>.ant-table-body-outer>.ant-table-body-inner>table>.ant-table-thead>tr>th {
-    background-color: transparent;
+    /* background-color: transparent; */
 }
 
 .ant-table-small>.ant-table-content>.ant-table-header>table>.ant-table-thead>tr,

static/css/common.less

+.ant-modal div[aria-hidden="true"] {
+    display: none !important
+}
+
 .app-content {
     padding: 0px 8px 0px 8px;
     height: 100%;
@@ -215,6 +219,7 @@
             transform: translateY(50%);
             margin-left: 10px;
         }
+
         &::before {
             content: "";
             flex-grow: 1;