From 22079767f98c024fb4005f751a450ad214fd1f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E4=B8=96=E5=BC=BA?= <vayne0702@163.com>
Date: Tue, 14 Mar 2023 15:15:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=80=E5=94=AE=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SC-web/src/api/scm/arinvoices.js              |  25 ++
 .../basicInformation/saleorder/ImportForm.vue | 247 ++++++++++++++++++
 2 files changed, 272 insertions(+)
 create mode 100644 SC-web/src/api/scm/arinvoices.js
 create mode 100644 SC-web/src/views/scm/basicInformation/saleorder/ImportForm.vue

diff --git a/SC-web/src/api/scm/arinvoices.js b/SC-web/src/api/scm/arinvoices.js
new file mode 100644
index 00000000..571029c3
--- /dev/null
+++ b/SC-web/src/api/scm/arinvoices.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+// 导入
+export function ImportData(data) {
+  return request({
+    url: '/api/arinvoices/Arinvoices/ImportData',
+    method: 'post',
+    data
+  })
+}
+// 导入预览
+export function ImportPreview(data) {
+  return request({
+    url: '/api/arinvoices/Arinvoices/ImportPreview',
+    method: 'get',
+    data
+  })
+}
+//模板下载
+export function TemplateDownload() {
+  return request({
+    url: '/api/arinvoices/Arinvoices/TemplateDownload',
+    method: 'get'
+  })
+}
diff --git a/SC-web/src/views/scm/basicInformation/saleorder/ImportForm.vue b/SC-web/src/views/scm/basicInformation/saleorder/ImportForm.vue
new file mode 100644
index 00000000..8895e354
--- /dev/null
+++ b/SC-web/src/views/scm/basicInformation/saleorder/ImportForm.vue
@@ -0,0 +1,247 @@
+<template>
+  <el-dialog title="批量导入" :close-on-click-modal="false" :visible.sync="visible"
+    class="JNPF-dialog JNPF-dialog_center JNPF-dialog-import" lock-scroll width="1000px" :modal="false" :modal-append-to-body="false">
+    <el-steps :active="active" align-center>
+      <el-step title="上传文件"></el-step>
+      <el-step title="数据预览"></el-step>
+      <el-step title="导入数据"></el-step>
+    </el-steps>
+    <div class="import-main" v-show="active==1">
+      <div class="upload">
+        <div class="up_left">
+          <img src="@/assets/images/upload.png">
+        </div>
+        <div class="up_right">
+          <p class="title">上传填好的数据表</p>
+          <p class="tip">文件后缀名必须是xls或xlsx，文件大小不超过500KB，最多支持导入1000条数据</p>
+          <el-upload :action="define.comUrl+'/api/arinvoices/Arinvoices/Uploader'"
+            :headers="{ Authorization: $store.getters.token}" :on-success="handleSuccess"
+            :on-remove="handleRemove" :before-remove="beforeRemove" :on-change="handleChange"
+            :file-list="fileList" accept=".xls,.xlsx" :before-upload="beforeUpload"
+            class="upload-area">
+            <el-button type="text">上传文件</el-button>
+          </el-upload>
+        </div>
+      </div>
+      <div class="upload">
+        <div class="up_left">
+          <img src="@/assets/images/import.png">
+        </div>
+        <div class="up_right">
+          <p class="title">填写导入数据信息</p>
+          <p class="tip">请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除</p>
+          <el-button type="text" @click="templateDownload">下载模板</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="import-main" v-show="active==2">
+      <JNPF-table v-loading="listLoading" :data="list">
+<!--        <el-table-column prop="materialName" label="物料名称" width="150">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-input v-model="scope.row.materialName" />-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+        <el-table-column prop="invoiceCode" label="发票代码" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.invoiceCode" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="invoiceNo" label="发票号码" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.invoiceNo" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="invoiceQuantity" label="发票数量" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.invoiceQuantity" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="involceAmount" label="发票金额" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.involceAmount" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="taxRate" label="税率" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.taxRate" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="taxAmount" label="税额" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.taxAmount" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="amountNotTax" label="不含税金额" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.amountNotTax" />
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="invoiceStatus" label="发票状态" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.invoiceStatus" />
+          </template>
+        </el-table-column> -->
+        <el-table-column prop="creatorUserName" label="开票人" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.creatorUserName" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="invoiceDate" label="开票日期" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.invoiceDate" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="50">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" class="JNPF-table-delBtn"
+              @click="handleDel(scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </JNPF-table>
+    </div>
+    <div class="import-main" v-show="active==3">
+      <div class="success" v-if="!result.resultType">
+        <img src="@/assets/images/success.png" alt="">
+        <p class="success-title">批量导入成功</p>
+        <p class="success-tip">您已成功导入数据</p>
+      </div>
+      <div class="unsuccess" v-if="result.resultType">
+        <el-alert title="错误提醒：导入失败数据展示" type="warning" show-icon :closable="false" />
+        <div class="upload error-show">
+          <div class="up_left">
+            <img class="" src="@/assets/images/tip.png">
+          </div>
+          <div class="up_right">
+            <p class="tip">正常数量条数：<el-link type="success" :underline="false">{{result.snum}}条
+              </el-link>
+            </p>
+            <p class="tip">异常数量条数：<el-link type="danger" :underline="false">{{result.fnum}}条
+              </el-link>
+            </p>
+          </div>
+        </div>
+        <p class="contips">以下文件数据为导入异常数据</p>
+        <JNPF-table :data="resultList" height="280px">
+          <el-table-column prop="materialName" label="物料名称" width="100" />
+          <el-table-column prop="invoiceCode" label="发票代码" width="100" />
+          <el-table-column prop="invoiceNo" label="发票号码" width="80" />
+          <el-table-column prop="invoiceQuantity" label="发票数量" width="120" />
+          <el-table-column prop="involceAmount" label="发票金额" width="120" />
+          <el-table-column prop="taxRate" label="税率" width="100" />
+          <el-table-column prop="taxAmount" label="税额" width="150" />
+          <el-table-column prop="amountNotTax" label="不含税金额" width="100" />
+          <!-- <el-table-column prop="invoiceStatus" label="发票状态" width="100" /> -->
+          <el-table-column prop="creatorUserName" label="开票人" width="100" />
+          <el-table-column prop="invoicingDate" label="开票日期" width="100" />
+        </JNPF-table>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancel()" v-if="active == 1">取 消</el-button>
+      <el-button @click="prev" v-if="active == 2">上一步</el-button>
+      <el-button @click="next" type="primary" v-if="active < 3" :loading="btnLoading"
+        :disabled="active == 1 && !fileName">下一步
+      </el-button>
+      <el-button @click="cancel(true)" type="primary" v-else>关 闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { TemplateDownload, ImportData, ImportPreview } from '@/api/scm/invoices'
+export default {
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      listLoading: false,
+      fileName: '',
+      fileList: [],
+      active: 1,
+      list: [],
+      resultList: [],
+      result: {
+        resultType: 0,
+        snum: 0,
+        fnum: 0
+      }
+    }
+  },
+  methods: {
+    prev() {
+      if (this.active == 1) return
+      this.active--
+    },
+    next() {
+      if (this.active == 2) {
+        if (!this.list.length) return this.$message({ message: '导入数据为空', type: 'warning' })
+        this.btnLoading = true
+        this.btnLoading = false
+        this.result = this.list
+        console.log('rrrrrrr', this.list);
+        //this.$emit('importData', this.list)
+        this.active++
+        /* ImportData({ list: this.list }).then(res => {
+          this.result = res.data
+          this.resultList = res.data.failResult
+          this.btnLoading = false
+          this.active++
+        }).catch(() => { this.btnLoading = false }) */
+      }
+      if (this.active == 1) {
+        if (!this.fileList.length || !this.fileName) return this.$message({ message: '请先上传文件', type: 'warning' })
+        this.btnLoading = true
+        ImportPreview({ fileName: this.fileName }).then(res => {
+          this.list = res.data.dataRow
+          this.btnLoading = false
+          this.active++
+        }).catch(() => { this.btnLoading = false })
+      }
+    },
+    cancel(isRefresh) {
+      this.visible = false
+      this.$emit('importData', {
+					checkedList: this.result
+				})
+      //if (isRefresh) this.$emit('refresh')
+    },
+    init() {
+      this.active = 1
+      this.fileList = []
+      this.fileName = ''
+      this.visible = true
+    },
+    handleDel(index) {
+      this.list.splice(index, 1)
+    },
+    templateDownload() {
+      TemplateDownload().then(res => {
+        this.jnpf.downloadFile(res.data.url)
+      })
+    },
+    beforeUpload(file) {
+      let isRightSize = file.size / 1024 < 500
+      if (!isRightSize) this.$message.error(`文件大小不能超过500KB`)
+      return isRightSize
+    },
+    handleRemove(file, fileList) {
+      this.fileList = []
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`).catch(() => { })
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList.slice(-1)
+    },
+    handleSuccess(res, file, fileList) {
+      if (res.code == 200) {
+        this.fileList = fileList.slice(-1)
+        this.fileName = res.data.name
+      } else {
+        this.fileList = fileList.filter(o => o.uid != file.uid)
+        this.$message({ message: res.msg, type: 'error', duration: 1000 })
+      }
+    }
+  }
+}
+</script>