123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406 |
- <template>
- <div class="detail-container">
- <div v-show="!isShowPrint">
- <el-page-header @back="goBack" content="详情"></el-page-header>
- <div class="main-title">
- <div class="title">发货单信息</div>
- </div>
- <div class="diy-table-1">
- <el-row :gutter="0">
- <el-col :span="8" class="item">
- <div class="label">发货单号</div>
- <div class="value">{{detailData.id}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">发货日期</div>
- <div class="value">{{detailData.orderTime}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">单据状态</div>
- <div class="value">{{detailData.examineStatus | statusFilter}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">发货申请单号</div>
- <div class="value">{{detailData.id}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">订单类型</div>
- <div class="value">{{detailData.orderType | orderTypeFilter}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">工程订单号</div>
- <div class="value">{{detailData.enginOrderNo}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">经销商编码</div>
- <div class="value">{{detailData.customerNumber}}</div>
- </el-col>
- <el-col :span="16" class="item">
- <div class="label">经销商名称</div>
- <div class="value">{{detailData.customerName}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">工程编号</div>
- <div class="value">{{detailData.refEnginRecordNo}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">厂工程编码</div>
- <div class="value">{{detailData.refFactoryNo}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">项目名称</div>
- <div class="value">{{detailData.refProjectName}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">仓库</div>
- <div class="value">{{detailData.correspondName}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">税率</div>
- <div class="value">{{detailData.tax}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">发票号</div>
- <div class="value">{{detailData.billNumber}}</div>
- </el-col>
- <el-col :span="16" class="item">
- <div class="label">备注</div>
- <div class="value">{{detailData.remark}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">币种</div>
- <div class="value">{{detailData.currency}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">外仓印刷单号</div>
- <div class="value">{{detailData.printingSheet}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">制单人</div>
- <div class="value">{{detailData.createBy}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">制单日期</div>
- <div class="value">{{detailData.createTime}}</div>
- </el-col>
- <el-col :span="16" class="item">
- <div class="label">文件编号</div>
- <div class="value">{{detailData.fileNumber}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">出库日期</div>
- <div class="value">{{detailData.outTime}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">审核人</div>
- <div class="value">{{detailData.approvalName}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">审核日期</div>
- <div class="value">{{detailData.approvalTime}}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">开票日期</div>
- <div class="value">{{detailData.billTime}}</div>
- </el-col>
- </el-row>
- </div>
- <div class="main-title">
- <div class="title">货品信息</div>
- </div>
- <div class="table">
- <el-table
- :data="detailData.invoicePickBeans"
- element-loading-text="Loading"
- border
- fit
- highlight-current-row
- stripe
- show-summary
- :summary-method="$getSummaries">
- <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
- <el-table-column align="center" label="订单号" prop="enginOrderNo" min-width="180" show-overflow-tooltip></el-table-column>
- <el-table-column align="center" label="销售类型" prop="saleTypeName" min-width="160" show-overflow-tooltip></el-table-column>
- <el-table-column align="center" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip></el-table-column>
- <el-table-column align="center" label="产品编码" prop="materialOldNumber" min-width="120" show-overflow-tooltip></el-table-column>
- <el-table-column align="center" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
- <el-table-column align="center" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
- <el-table-column align="center" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
- <el-table-column align="right" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>
- <el-table-column align="right" label="未出库数量" prop="notOutNumber" min-width="100" show-overflow-tooltip></el-table-column>
- <el-table-column align="right" label="含税单价" prop="price" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{scope.row.price | numToFixed}}
- </template>
- </el-table-column>
- <el-table-column align="right" label="无税单价" prop="afterTaxPrice" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{scope.row.afterTaxPrice | numToFixed}}
- </template>
- </el-table-column>
- <el-table-column align="right" label="价税合计" prop="payAmount" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{scope.row.payAmount | numToFixed}}
- </template>
- </el-table-column>
- <el-table-column align="right" label="税率" prop="tax" min-width="100" show-overflow-tooltip></el-table-column>
- <el-table-column align="right" label="折扣额" prop="totalDiscAmount" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{scope.row.totalDiscAmount | numToFixed}}
- </template>
- </el-table-column>
- <el-table-column align="right" label="折扣后单价" prop="singlePayPrice" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{scope.row.singlePayPrice | numToFixed}}
- </template>
- </el-table-column>
- <el-table-column align="center" label="退补标记" prop="refundStatus" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{scope.row.refundStatus | refundStatusFilter}}
- </template>
- </el-table-column>
- <el-table-column align="left" label="订单备注" prop="headerRemark" min-width="160" show-overflow-tooltip></el-table-column>
- <el-table-column align="left" label="发货申请备注" prop="remark" min-width="160" show-overflow-tooltip></el-table-column>
- <el-table-column align="left" label="表体备注" prop="invoiceRemark" min-width="160" show-overflow-tooltip></el-table-column>
- <el-table-column align="left" label="业务员" prop="serviceName" min-width="100" show-overflow-tooltip></el-table-column>
- </el-table>
- </div>
- <div class="page-footer">
- <div class="footer">
- <el-button type="primary" icon="el-icon-printer" @click="toPrint" v-if="$checkBtnRole('print', $route.meta.roles)">打 印</el-button>
- <el-popconfirm title="确定关闭吗?" @onConfirm="goBack" style="margin-left: 10px;">
- <el-button slot="reference">关 闭</el-button>
- </el-popconfirm>
- </div>
- </div>
- </div>
- <print-preview ref="preView" />
- <!-- <CommonPrint :printId="printId" :printType="printType" v-if="isShowPrint" @backDetail="backDetail" /> -->
- </div>
- </template>
- <script>
- import { disAutoConnect, hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
- disAutoConnect();
- import panel from '../../apply/components/design/panel'
- import { getDetail, detailArr } from '../../apply/components/design/print-data'
- import printPreview from '../../apply/components/design/preview.vue'
- import { getEnginDetail } from "@/api/supply/deliver";
- import CommonPrint from "@/views/supply/deliver/components/common_print";
- export default {
- name: 'HomeDetail',
- componentName: 'HomeDetail',
- props: ['listItem'],
- components: {
- CommonPrint,printPreview
- },
- filters: {
- statusFilter(val) {
- const statusList = [
- { label: '已保存', value: 'SAVE' },
- { label: '待审核', value: 'WAIT' },
- { label: '审核通过', value: 'OK' },
- // { label: '审核驳回', value: 'FAIL' },,
- ]
- let obj = statusList.find(o => o.value == val);
- return obj ? obj.label : ''
- },
- orderTypeFilter(val) {
- const MAP = {
- 1: '零售订单',
- 2: '家用工程订单',
- 3: '商用工程订单',
- }
- return MAP[val];
- },
- refundStatusFilter(val) {
- const MAP = {
- 1: '正常',
- }
- return MAP[val];
- }
- },
- data() {
- return {
- detailData: {},
- printType: 2,
- printId: '',
- isShowPrint: false,
- curPaper: {
- type: 'A5',
- width: 500,
- height: 147.6
- },
- paperTypes: {
- 'A3': {
- width: 420,
- height: 296.6
- },
- 'A4': {
- width: 210,
- height: 296.6
- },
- 'A5': {
- width: 210,
- height: 147.6
- },
- 'B3': {
- width: 500,
- height: 352.6
- },
- 'B4': {
- width: 250,
- height: 352.6
- },
- 'B5': {
- width: 250,
- height: 175.6
- }
- },
- scaleValue: 1,
- scaleMax: 5,
- scaleMin: 0.5,
- hiprintTemplate:'',
- }
- },
- computed:{
- curPaperType() {
- let type = 'other'
- let types = this.paperTypes
- for (const key in types) {
- let item = types[key]
- let { width, height } = this.curPaper
- if (item.width === width && item.height === height) {
- type = key
- }
- }
- return type
- }
- },
- // activated(){
- // this.initPrint()
- // },
- mounted() {
- this.initPrint()
- },
- created() {
- this.getDetail();
- },
- methods: {
- // 返回列表
- goBack() {
- this.$emit('backListFormDetail');
- },
- initPrint(){
- hiprint.init({
- providers: [new defaultElementTypeProvider()]
- });
- // 还原配置
- hiprint.setConfig()
- // 替换配置
- hiprint.setConfig({
- movingDistance: 2.5,
- text: {
- supportOptions: [
- {
- name: 'styler',
- hidden: true
- },
- {
- name: 'formatter',
- hidden: true
- },
- ]
- }
- })
- // eslint-disable-next-line no-undef
- hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
- this.hiprintTemplate = new hiprint.PrintTemplate({
- template: panel,
- settingContainer: '#PrintElementOptionSetting',
- paginationContainer: '.hiprint-printPagination'
- });
- this.hiprintTemplate.design('#hiprint-printTemplate');
- // 获取当前放大比例, 当zoom时传true 才会有
- // this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
- }
- ,
- // 获取详情
- getDetail() {
- getEnginDetail({id: this.listItem.id}).then(res => {
- if(res.data.invoicePickBeans) {
- res.data.invoicePickBeans.forEach(item => {
- item.notOutNumber = item.salesStatus ? 0 : item.refundableQty;
- item.sums1 = ['notOutNumber', 'refundableQty'];
- item.sums2 = ['price', 'afterTaxPrice', 'payAmount', 'totalDiscAmount', 'singlePayPrice'];
- })
- }
- this.detailData = res.data;
- })
- },
- // 点击打印
- toPrint() {
- this.printId = this.listItem.id;
- // this.isShowPrint = true;
- getDetail(this.listItem.id)
- this.$refs.preView.show(this.hiprintTemplate, detailArr)
- },
- backDetail() {
- this.printId = '';
- this.isShowPrint = false;
- },
- /**
- * 设置纸张大小
- * @param type [A3, A4, A5, B3, B4, B5, other]
- * @param value {width,height} mm
- */
- setPaper(type, value) {
- try {
- if (Object.keys(this.paperTypes).includes(type)) {
- this.curPaper = { type: type, width: value.width, height: value.height }
- this.hiprintTemplate.setPaper(value.width, value.height)
- } else {
- this.curPaper = { type: 'other', width: value.width, height: value.height }
- this.hiprintTemplate.setPaper(value.width, value.height)
- }
- } catch (error) {
- this.$message.error(`操作失败: ${error}`)
- }
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .detail-container {
- width: 100%;
- height: 100%;
- }
- .main-title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 30px;
- height: 60px;
- border-bottom: 1px solid #DCDFE6;
- margin-bottom: 20px;
- .title {
- font-size: 16px;
- font-weight: 600;
- padding-left: 10px;
- }
- }
- </style>
|