add 带模板导入、人员信息（部分完成）

2023-09-04 16:09:35 +08:00
parent 83a55d9d29
commit 3ec511e114
9 changed files with 561 additions and 110 deletions
@@ -0,0 +1,121 @@
+<template>
+  <a-modal
+    :title="$t('import')"
+    :maskClosable="false"
+    :width="600"
+    :closable="true"
+    :confirm-loading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    :visible="visible">
+    <a-form layout="inline">
+      <a-form-item :label="$t('importWithTemplate.chooseFile')">
+        <div class="form-content">
+          <a-input v-model="fileName" />
+          <j-upload type="primary" :number="1" @change="handleFileChange" :show-upload-list="false" :return-url="false" v-bind="$attrs">
+            <template v-slot:customButton>
+              <a-button type="primary">{{ $t('importWithTemplate.chooseFile') }}</a-button>
+            </template>
+          </j-upload>
+        </div>
+        <a-button type="link" class="down-template-btn" @click="downTemplate">{{ $t('importWithTemplate.downTemplate') }}</a-button>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import { urlToParams } from '../utils/util'
+import { downloadFile } from '../api/manage'
+
+export default {
+  name: 'ImportWithTemplate',
+  props: {
+    // 下载模板的地址
+    downTemplateUrl: {
+      type: String,
+      required: false,
+      default: null
+    },
+    // 导入模板文件名
+    templateName: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false,
+      fileId: null,
+      fileName: null
+    }
+  },
+  methods: {
+    open () {
+      this.visible = true
+    },
+    handleOk () {
+      if (this.fileId) {
+        this.$emit('ok', this.fileId)
+        this.close()
+      } else {
+        this.$message.warn(this.$t('importWithTemplate.noFileMsg'))
+      }
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.fileId = null
+      this.fileName = null
+    },
+    handleFileChange (fileList) {
+      this.fileName = fileList[0].fileName
+      const file = urlToParams(fileList[0].filePath)
+      this.fileId = file.id
+    },
+    // 下载导入模板
+    downTemplate () {
+      if (!this.downTemplateUrl) {
+        this.$message.warn('请设置downTemplateUrl属性')
+        return
+      }
+      const fileName = this.templateName || '导入模板'
+      downloadFile(this.downTemplateUrl, fileName + '.xlsx')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.form-content {
+  display: flex;
+  margin-top: 5px;
+
+  .ant-input {
+    pointer-events: none;
+  }
+
+  .ant-btn {
+    margin-left: 16px;
+  }
+}
+
+.ant-form-inline .ant-form-item {
+  width: 100%;
+  display: flex;
+
+  /deep/ .ant-form-item-control-wrapper {
+    flex: 1;
+    width: 0;
+  }
+}
+
+/deep/ .ant-form-item-control {
+  line-height: 32px;
+}
+</style>