inv.vue

<template>
	<div class="eibs-tab">

		<c-col :span="6">

			<c-fullbox>
				<el-form-item label="查验编号" prop="fftref">
					<c-input v-model="model.fftref" placeholder="查验编号"></c-input>
				</el-form-item>
				<template slot="footer">
					<c-button @click="getInvuse" size="small" type="primary">获取</c-button>
				</template>
			</c-fullbox>

		</c-col>
		<c-col :span="18">
			<el-form-item label-width="0px" style="margin-left:2px">
				<c-button @click="excelUpload" size="small" type="primary">Excel导入</c-button>
				<c-button @click="addRow" size="small" type="primary">人工新增</c-button>
					<c-button @click="deleteRow" size="small" type="primary">
					删除
				</c-button>
			</el-form-item>
		</c-col>
		

		<c-col :span="24">
			<el-form ref="invTable" :model="model" label-width="120px" label-position="right" size="small" :validate-on-rule-change="false">
			<el-table max-height="300px" style="text-align: center;" @selection-change="changeSelection1" stripe :data="model.invgrdm.invlst" :paginationShow="false" :border="true">
				<el-table-column type="selection" align="left"  min-width="50">
					</el-table-column>
				<el-table-column label="发票影像ID" sortable min-width="100px" prop="imagid">
					<template slot-scope="scope">
						<c-input v-model="scope.row.imagid"></c-input>
					</template>
				</el-table-column>
				<el-table-column label="发票类型" sortable min-width="110px" prop="invtyp">
					<template slot-scope="scope">
						<c-select v-model="scope.row.invtyp"  dbCode="typinv"></c-select>
					</template>
				</el-table-column>
				<el-table-column label="发票号码" sortable min-width="110px" prop="invnum">
					<template slot-scope="scope">
						<el-form-item :prop="'invgrdm.invlst.' + scope.$index + '.invnum'" label-width="0" :rules="[{required:true,message:'必输项',trigger:['blur','change']}]">
								<c-input v-model="scope.row.invnum" >
								</c-input>
							</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="发票代码" sortable min-width="110px" prop="invcod">
					<template slot-scope="scope">
						<el-form-item :prop="'invgrdm.invlst.' + scope.$index + '.invcod'" label-width="0" :rules="[{required:true,message:'必输项',trigger:['blur','change']}]">
								<c-input v-model="scope.row.invcod" >
								</c-input>
							</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="非税金额" sortable min-width="110px" prop="untamt">
					<template slot-scope="scope">
						<c-input-currency :precision="2" v-model="scope.row.untamt">
						</c-input-currency>
					</template>
				</el-table-column>

				<el-table-column label="开票日期" sortable min-width="110px" prop="invdat">
					<template slot-scope="scope">
						<c-date-picker v-model="scope.row.invdat">
						</c-date-picker>
					</template>
				</el-table-column>
				<el-table-column label="有效标识" sortable min-width="100px" prop="valflg">
					<template slot-scope="scope">
						<c-select v-model="scope.row.valflg" dbCode="vldflg"></c-select>
					</template>
				</el-table-column>
			</el-table>
			</el-form>

		</c-col>
		<el-dialog v-dialogDrag width="30%" title="Excel导入" :before-close="closeDialog" :visible.sync="detailsDialog" v-if="detailsDialog">
					<c-col :span="4">
						<el-form-item label-width="0px">
							<el-upload action="#" :before-upload="beforeUpload" :show-file-list="false" accept=".xlsx, .xls, .csv">
								<c-button slot="trigger" size="small" type="primary">选择文件</c-button>
							</el-upload>
						</el-form-item>
					</c-col>
					<c-col :span="4">
						<el-form-item label-width="0px" style="margin-left:10px">
							<c-button @click="downFile()" type="primary" size="small">下载模板</c-button>
						</el-form-item>
					</c-col>
		</el-dialog>

	</div>
</template>
<script>
import Api from "~/service/Api";
import moment from "moment";
import commonFunctions from '~/mixin/commonFunctions.js';

export default {
  inject: ["root"],
	props: ["model"],
	mixins: [commonFunctions],
  data() {
    return {
      dbCodes: {
        invtyp: []
			},
			detailsDialog: false,
			selection1: []
    };
  },
  methods: {
    async getdbCode(dbCode, codeNam) {
      let params = {
        codeType: dbCode,
        uil: "EN"
      };
      let rtnmsg = await Api.post("/manager/dic/listDicInfo", params);
      if (rtnmsg.respCode === SUCCESS) {
        let srvtxt = rtnmsg.data.map(item => ({
          value: item.codeValue,
          label: item.codeName
        }));
        this.dbCodes[codeNam] = srvtxt;
      }
    },
    getLabel(list, id) {
      if (id != "" && Array.isArray(list) && list.length != 0) {
        return !list.find(item => item["value"] == id)
          ? id
          : list.find(item => item["value"] == id)["label"];
      }
		},
		changeSelection1(val) {
      this.selection1 = val;
		},
		//校验发票
		invTable(){
			this.$refs["invTable"].validate(async valid => {
        if (!valid) {
					this.$notify({
            title: "失败",
            message: "校验失败",
            type: "error"
					});
				}
      });
		},
		addRow() {
			let newRow = {
				imagid: '00000000-0000-0000-0000-000000000000',
				invcod: '',
				invnum: '',
				invdat: null,
				untamt: 0.00,
				valflg: 'VLID',
			};
			let start = 0;
			if (this.model.invgrdm.invlst) {
				start = this.model.invgrdm.invlst.length;
			}
			this.model.invgrdm.invlst.splice(start, 0, newRow);
		},
		deleteRow(){
			if(this.selection1.length == 0){
				this.$message.warning("请选择需要删除的数据");
        return;
			}
			for (var i = this.selection1.length - 1; i >= 0; i--) {
					this.model.invgrdm.invlst.splice(this.selection1[i].index, 1);
				}
		},
    async getInvuse() {
      if (this.model.fftref == "") {
        this.$message.warning("请输入影像编号");
        return;
      }
      let res = await Api.post("/manager/invchk/getImfInfoForElcadd", this.model.fftref);
      if (res.respCode == SUCCESS) {
				if(res.data.errorMsg){
					this.$message.warning(res.data.errorMsg);
					return
				}
        if(res.data.invlst != null){
					this.model.invgrdm.invlst = this.model.invgrdm.invlst.concat(
          res.data.invlst
        );
				}
      }
		},
		closeDialog() {
			this.detailsDialog = false
		},
		excelUpload(){
			this.detailsDialog = true
		},
		beforeUpload(file) {
      this.file2XLSX(file).then(res => {
        let newData = res[0].sheet.map(item => ({
          imagid:
            "00000000-0000-0000-0000-000000000000",
          invcod: item.hasOwnProperty("发票代码")
            ? typeof item["发票代码"] === "number"
              ? item["发票代码"].toString().trim()
              : item["发票代码"].trim()
            : "",
          invnum:
            typeof item["发票号码"] === "number"
              ? item["发票号码"].toString().trim()
              : item["发票号码"].trim(),
          invdat:
            this.changeDate(typeof item["开票日期（YYYY-MM-DD）"] === "number"
              ? moment("1900-01-01")
                  .add(item["开票日期（YYYY-MM-DD）"] - 2, "days")
                  .format("YYYY-MM-DD")
              : item["开票日期（YYYY-MM-DD）"]),
          untamt: item.hasOwnProperty("非税金额（小数点后两位）")
            ? item["非税金额（小数点后两位）"].toString().trim()
            : "",
          amountin: item.hasOwnProperty("发票占用金额（小数点后两位）")
            ? item["发票占用金额（小数点后两位）"].toString().trim()
            : "",
          checkcode:item.hasOwnProperty("校验码后六位") ? (typeof item["校验码后六位"] === "number"
              ? item["校验码后六位"].toString().trim()
              : item["校验码后六位"].trim()) :""
            ,
          amounttax: item.hasOwnProperty("价税合计金额（小数点后两位）")
            ? item["价税合计金额（小数点后两位）"].toString().trim()
            : "",
          valflg: "VLID",
					reason: "",
					state:""
        }));

        this.model.invgrdm.invlst = this.model.invgrdm.invlst.concat(
          newData
				);
				this.detailsDialog = false
      });
      return false;
		},
		//日期格式转换
		changeDate(val){
			let result = val.replace(/\//g,"-")
			return result
		},
		async downFile() {
			let params = {
				path: 'sstf/data/doc/invoiceAuthen.xlsx'
			}
			let res = await Api.post("/manager/fileupdown/fileDown", params);
			if (res.respCode == "AAAAAA") {
				//res.data 内容为 TextResultVo 
				if (res.data.data) {
					let type, code = res.data;
					const loading = this.loading()
					this.base64ToBlob(code, type)
					loading.close()
					this.$notify({
						title: "成功",
						message: "文件下载成功！",
						type: "success",
					});
					this.detailsDialog = false
				}
				else {
					this.$notify({
						title: '失败',
						message: '文件下载失败！',
						type: 'error',
					});
				}
			}
		},
		base64ToBlob(code, type) {
			if (type == 'application/pdf') {
				code.data = code.data.replace(/[\n\r]/g, "")
			}
			const raw = window.atob(code.data);
			const rawLength = raw.length;
			const uInt8Array = new Uint8Array(rawLength);
			for (let i = 0; i < rawLength; ++i) {
				uInt8Array[i] = raw.charCodeAt(i);
			}
			const blob = new Blob([uInt8Array], { type: type });
			// const fileURL = URL.createObjectURL(blob);
			// window.open(fileURL)
			let fileName = code.filename;
			var downloadElement = document.createElement('a');
			var href = window.URL.createObjectURL(blob);
			downloadElement.href = href;
			downloadElement.download = fileName;
			document.body.appendChild(downloadElement);
			downloadElement.click();
			document.body.removeChild(downloadElement);
			window.URL.revokeObjectURL(href);
		},
		file2XLSX(file) {
			return new Promise(function (resolve, reject) {
				// 通过FileReader对象读取文件
				const reader = new FileReader()
				// 读取为二进制字符串
				reader.readAsBinaryString(file)
				reader.onload = function (e) {
					console.log(e, '读取文件成功的e');
					// 获取读取文件成功的结果值
					const data = e.target.result
					// XLSX.read解析数据，按照type 的类型解析
					const XLSX = require('xlsx')
					let wb = XLSX.read(data, {
						type: 'binary' // 二进制
					})
					console.log(wb, '---->解析后的数据')
					// 存储获取到的数据
					const result = []
					// 工作表名称的有序列表
					wb.SheetNames.forEach(sheetName => {
						result.push({
							// 工作表名称
							sheetName: sheetName,
							// 利用 sheet_to_json 方法将 excel 转成 json 数据
							sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
						})
					})
					resolve(result)
				}
			})
		},
  },
  mounted() {
    this.getdbCode("typinv", "invtyp");
  },
  created() {}
};
</script>
<style scoped lang="less">
.eibs-tab{
	/deep/ .el-dialog{
		height: 200px!important;
		margin-top: calc(50vh - 100px)!important;
	}
	/deep/ .el-dialog__body{
		height: calc(100% - 65px);
	}
}
</style>