You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spms-vue/src/views/warehouse/successOrderExportPDF.vue

597 lines
24 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<el-form :model="formData" :rules="formRules" ref="dataForm">
<el-button-group style="display: flex">
<el-button
type="primary"
@click.native="resetSetting()"
style="margin: -50px 0 10px auto; height: 35px"
>重置选项
</el-button
>
<el-button
type="primary"
@click.native="submit()"
style="margin: -50px 60px 10px 0; height: 35px"
>导出PDF
</el-button
>
</el-button-group>
<el-row :gutter="20">
<el-col :span="4">
<div class="ao-text">
<span>订单号</span>
<el-switch v-model="formData.orderIdEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="orderIdWidth">
<el-slider
v-model="formData.orderIdWidth"
:disabled="!formData.orderIdEnable"
:min="4"
:max="16"
:show-tooltip="true"
>
</el-slider>
<!-- <el-input v-model="formData.orderIdWidth" auto-complete="off" :disabled="!formData.orderIdEnable"></el-input>-->
</el-form-item>
</el-col>
<el-col :span="4">
<div class="ao-text">
<span>业务类型:</span>
<el-switch v-model="formData.actionEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="actionWidth">
<!-- <span style="width:50px; display:inline-block; margin-top: 4px">宽度:</span>-->
<el-slider
v-model="formData.actionWidth"
:disabled="!formData.actionEnable"
:min="4"
:max="16"
:show-tooltip="true"
>
</el-slider>
<!-- <el-slider v-model="formData.actionWidth" :disabled="!formData.actionEnable" style="float: right; width: 85%;"></el-slider>-->
<!-- <el-input v-model="formData.actionWidth" auto-complete="off" :disabled="!formData.actionEnable"></el-input>-->
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="ao-text">
<span>往来单位:</span>
<el-switch v-model="formData.fromCorpEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromCorpWidth">
<el-slider
v-model="formData.fromCorpWidth"
:disabled="!formData.fromCorpEnable"
:min="4"
:max="16"
:show-tooltip="true"
>
</el-slider>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="ao-text">
<span>订单来源:</span>
<el-switch v-model="formData.fromTypeEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromTypeWidth">
<el-slider
v-model="formData.fromTypeWidth"
:disabled="!formData.fromTypeEnable"
:min="4"
:max="16"
:show-tooltip="true"
>
</el-slider>
</el-form-item>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row :gutter="20">
<el-col :span="4">
<div class="ao-text">
<span>序号:</span>
<el-switch @change="switchChange(
$event, 'numberWidth', 'numberEnable')" v-model="formData.numberEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromCorpWidth">
<el-slider
v-model="formData.numberWidth"
:disabled="!formData.numberEnable"
:min="tableCellMinWidth"
:max="tableCellMaxWidth"
:show-tooltip="true"
@change="sliderChange($event, 'numberWidth')"
>
</el-slider>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="ao-text">
<span>产品通用名:</span>
<el-switch @change="switchChange(
$event, 'coNameWidth', 'coNameEnable')" v-model="formData.coNameEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromTypeWidth">
<el-slider
v-model="formData.coNameWidth"
:disabled="!formData.coNameEnable"
:min="tableCellMinWidth"
:max="tableCellMaxWidth"
:show-tooltip="true"
@change="sliderChange($event, 'coNameWidth')"
>
</el-slider>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="ao-text">
<span>包装规格:</span>
<el-switch @change="switchChange(
$event, 'packSpecWidth', 'packSpecEnable')" v-model="formData.packSpecEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromCorpWidth">
<el-slider
v-model="formData.packSpecWidth"
:disabled="!formData.packSpecEnable"
:min="tableCellMinWidth"
:max="tableCellMaxWidth"
:show-tooltip="true"
@change="sliderChange($event, 'packSpecWidth')"
>
</el-slider>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="ao-text">
<span>批次号:</span>
<el-switch @change="switchChange(
$event, 'batchNoWidth', 'batchNoEnable')" v-model="formData.batchNoEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromTypeWidth">
<el-slider
v-model="formData.batchNoWidth"
:disabled="!formData.batchNoEnable"
:min="tableCellMinWidth"
:max="tableCellMaxWidth"
:show-tooltip="true"
@change="sliderChange($event, 'batchNoWidth')"
>
</el-slider>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="ao-text">
<span>扫码数量:</span>
<el-switch @change="switchChange(
$event, 'countWidth', 'countEnable')" v-model="formData.countEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromCorpWidth">
<el-slider
v-model="formData.countWidth"
:disabled="!formData.countEnable"
:min="tableCellMinWidth"
:max="tableCellMaxWidth"
:show-tooltip="true"
@change="sliderChange($event, 'countWidth')"
>
</el-slider>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="ao-text">
<span>生产企业:</span>
<el-switch @change="switchChange(
$event, 'productCompanyWidth', 'productCompanyEnable')" v-model="formData.productCompanyEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromTypeWidth">
<el-slider
v-model="formData.productCompanyWidth"
:disabled="!formData.productCompanyEnable"
:min="tableCellMinWidth"
:max="tableCellMaxWidth"
:show-tooltip="true"
@change="sliderChange($event, 'productCompanyWidth')"
>
</el-slider>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="ao-text">
<span>注册/备案凭证号:</span>
<el-switch @change="switchChange(
$event, 'authCodeWidth', 'authCodeEnable')" v-model="formData.authCodeEnable"></el-switch>
<span style="margin-left: 30px">宽度:</span>
</div>
</el-col>
<el-col :span="6">
<el-form-item prop="fromCorpWidth">
<el-slider
v-model="formData.authCodeWidth"
:disabled="!formData.authCodeEnable"
:min="tableCellMinWidth"
:max="tableCellMaxWidth"
:show-tooltip="true"
@change="sliderChange($event, 'authCodeWidth')"
>
</el-slider>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- <a :href="pdfUrl" target="_blank" >打开pdf文件</a>-->
</div>
</template>
<script>
import {
downloadInoutOrderSuccessPDF
} from "../../api/itextpdf/itextpdf";
import draggable from "vuedraggable";
import {parseTime} from "../../filtres/index";
import store from "../../store";
const formJson = {
orderIdEnable: true,
orderIdWidth: 8,
actionEnable: true,
actionWidth: 4,
fromCorpEnable: true,
fromCorpWidth: 8,
fromTypeEnable: true,
fromTypeWidth: 4,
numberEnable: true,
numberWidth: 1,
coNameEnable: true,
coNameWidth: 4,
packSpecEnable: true,
packSpecWidth: 3,
batchNoEnable: true,
batchNoWidth: 2,
countEnable: true,
countWidth: 2,
productCompanyEnable: true,
productCompanyWidth: 4,
authCodeEnable: true,
authCodeWidth: 4,
};
export default {
name: "idQuery",
props: {
closeDialog: {
type: Function,
required: true,
},
idQuery: {
type: Object,
required: true,
},
},
data() {
return {
formData: formJson,
formRules: {
temp: [
{required: true, message: "请输入条码", trigger: "blur"}
],
},
cellDefaultWidth: {
numberWidth: 1,
coNameWidth: 4,
packSpecWidth: 3,
batchNoWidth: 2,
countWidth: 2,
productCompanyWidth: 4,
authCodeWidth: 4,
},
cellOldWidth: {
numberWidth: 1,
coNameWidth: 4,
packSpecWidth: 3,
batchNoWidth: 2,
countWidth: 2,
productCompanyWidth: 4,
authCodeWidth: 4,
},
orderIdDisabled: false,
total: 0,
loading: false,
index: null,
formLoading: false,
formVisible: false,
deleteLoading: false,
orderNo: null,
pdfUrl: '',
tableCellMinWidth: 1,
tableCellMaxWidth: 14,
nowWidth: 0,
};
},
components: {
draggable,
},
methods: {
resetSetting(formName) {
this.resetFormData();
},
submit(formName) {
let tQuery = {
orderId: this.idQuery.id,
settingData: this.formData
}
console.log(tQuery)
this.loading = true;
downloadInoutOrderSuccessPDF(tQuery).then((response) => {
//将pdf文件转换为url。
const binaryData = [];
binaryData.push(response);
//获取blob链接。
let url = window.URL.createObjectURL(
new Blob(binaryData, {type: "application/pdf"})
);
this.loading = false;
window.open(url);//打开新标签页预览pdf。
});
},
// 刷新表单
resetForm() {
if (this.$refs["dataForm"]) {
// 清空验证信息表单
this.$refs["dataForm"].clearValidate();
// 刷新表单
this.$refs["dataForm"].resetFields();
this.getList();
}
},
resetFormData() {
this.formData = {
orderIdEnable: true,
orderIdWidth: 8,
actionEnable: true,
actionWidth: 4,
fromCorpEnable: true,
fromCorpWidth: 8,
fromTypeEnable: true,
fromTypeWidth: 4,
numberEnable: true,
numberWidth: this.cellDefaultWidth.numberWidth,
coNameEnable: true,
coNameWidth: this.cellDefaultWidth.coNameWidth,
packSpecEnable: true,
packSpecWidth: this.cellDefaultWidth.packSpecWidth,
batchNoEnable: true,
batchNoWidth: this.cellDefaultWidth.batchNoWidth,
countEnable: true,
countWidth: this.cellDefaultWidth.countWidth,
productCompanyEnable: true,
productCompanyWidth: this.cellDefaultWidth.productCompanyWidth,
authCodeEnable: true,
authCodeWidth: this.cellDefaultWidth.authCodeWidth,
}
this.cellOldWidth = {
numberWidth: this.cellDefaultWidth.numberWidth,
coNameWidth: this.cellDefaultWidth.coNameWidth,
packSpecWidth: this.cellDefaultWidth.packSpecWidth,
batchNoWidth: this.cellDefaultWidth.batchNoWidth,
countWidth: this.cellDefaultWidth.countWidth,
productCompanyWidth: this.cellDefaultWidth.productCompanyWidth,
authCodeWidth: this.cellDefaultWidth.authCodeWidth,
}
this.tableCellMaxWidth = 14
},
getInputFocus(event) {
event.currentTarget.select();
},
intentBack() {
this.$router.go(-1);
},
switchChange(event, param, param2) {
if (this.formData.numberEnable === false &&
this.formData.coNameEnable === false &&
this.formData.packSpecEnable === false &&
this.formData.batchNoEnable === false &&
this.formData.countEnable === false &&
this.formData.productCompanyEnable === false &&
this.formData.authCodeEnable === false) {
this.formData[param2] = true;
this.formData[param] = 20;
return;
}
this.tableCellMaxWidth = event === true ? --this.tableCellMaxWidth : ++this.tableCellMaxWidth;
this.formData[param] = event === true ? this.cellDefaultWidth[param] : 0;
let number = this.formData[param] - this.cellOldWidth[param];
this.cellOldWidth[param] = this.formData[param];
this.sliderChangeAlgorithm(number, param);
},
sliderChange(event, param) {
let i = 7;
if (this.formData.numberEnable === false) {
--i;
}
if (this.formData.coNameEnable === false) {
--i;
}
if (this.formData.packSpecEnable === false) {
--i;
}
if (this.formData.batchNoEnable === false) {
--i;
}
if (this.formData.countEnable === false) {
--i;
}
if (this.formData.productCompanyEnable === false) {
--i;
}
if (this.formData.authCodeEnable === false) {
--i;
}
if (i <= 1) {
this.formData[param] = 20;
return;
}
console.log("更新后的值:" + event)
console.log("传递的参数:" + param)
let number = event - this.cellOldWidth[param];
this.cellOldWidth[param] = event;
this.sliderChangeAlgorithm(number, param);
},
//表格单元格宽度滑动条关联改变
sliderChangeAlgorithm(number, param) {
console.log("----------------------------")
console.log("更新后的值:" + number)
console.log("传递的参数:" + param)
this.nowWidth = 0;
this.nowNumber = number;
for (; this.nowNumber !== 0;) {
console.log("num ber:" + this.nowNumber)
if (this.nowNumber < 0) {
console.log("this.nowWidth:" + this.nowWidth)
if (this.nowNumber === 0) break;
this.sliderChangeAdd('numberEnable', 'numberWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeAdd('coNameEnable', 'coNameWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeAdd('packSpecEnable', 'packSpecWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeAdd('batchNoEnable', 'batchNoWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeAdd('countEnable', 'countWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeAdd('productCompanyEnable', 'productCompanyWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeAdd('authCodeEnable', 'authCodeWidth', param);
} else if (this.nowNumber > 0) {
if (this.nowNumber === 0) break;
this.sliderChangeDelete('numberEnable', 'numberWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeDelete('coNameEnable', 'coNameWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeDelete('packSpecEnable', 'packSpecWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeDelete('batchNoEnable', 'batchNoWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeDelete('countEnable', 'countWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeDelete('productCompanyEnable', 'productCompanyWidth', param);
if (this.nowNumber === 0) break;
this.sliderChangeDelete('authCodeEnable', 'authCodeWidth', param);
} else {
break;
}
console.log("number:" + number)
}
},
sliderChangeAdd(paramEnable, paramWidth, nowParamWidth) {
console.log("++++++++++++++ 更新后的值: " + this.nowNumber)
if (this.formData[paramEnable] && paramWidth !== nowParamWidth
&& this.formData[paramWidth] < this.tableCellMaxWidth) {
if (this.nowNumber === 0) return;
if (this.nowWidth === 0) {
this.nowWidth = this.formData[paramWidth];
} else if (this.nowWidth > this.formData[paramWidth]) {
this.nowWidth = this.formData[paramWidth];
} else if (this.nowWidth === this.formData[paramWidth]) {
this.nowWidth = 0;
++this.formData[paramWidth];
++this.cellOldWidth[paramWidth];
++this.nowNumber;
}
}
},
sliderChangeDelete(paramEnable, paramWidth, nowParamWidth) {
console.log("-------------- 更新后的值: " + this.nowNumber)
if (this.formData[paramEnable] && paramWidth !== nowParamWidth
&& this.formData[paramWidth] > this.tableCellMinWidth) {
if (this.nowNumber === 0) return;
if (this.nowWidth === 0) {
this.nowWidth = this.formData[paramWidth];
} else if (this.nowWidth < this.formData[paramWidth]) {
this.nowWidth = this.formData[paramWidth];
} else if (this.nowWidth === this.formData[paramWidth]) {
this.nowWidth = 0;
--this.formData[paramWidth];
--this.cellOldWidth[paramWidth];
--this.nowNumber;
}
}
}
},
filters: {},
mounted() {
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
};
},
created() {
this.resetFormData();
if (this.$isNotBlank(this.idQuery.id)) {
// this.getCodeList();
}
},
};
</script>
<style>
.ao-text {
width: 100%;
font-size: 13px;
font-family: "Microsoft YaHei";
float: right;
text-align: right;
margin-top: 10px;
}
</style>