boying-pda/src/views/modules/common/com-roll-label.vue

<template>
  <div class="sl-el">
    <el-dialog ref="printLoading" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false"
               title="标签打印"
               :visible.sync="visible"
               width="800px" v-drag>
      <el-container>
        <el-main style="width: 75%;margin-top: -20px">
          <el-row>
            <el-col :span="18">
              <el-form @submit.native.prevent label-position="top">
                <el-form-item style="width: 60%" :label="'请输入卷号:'">
                  <el-input  readonly v-model="rollNos" class="input-with-select"
                            @keyup.enter.native="getBoxSoAndReportFile()">
                    <el-button @click="getBoxSoAndReportFile()" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6"></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span  style="font-size: 12px;">请选择标签:</span>
              <el-table
                :data="reportFileList"
                border
                ref="reportFileTable"
                highlight-current-row
                @current-change="handleCurrentChange"
                height="150px">
                <el-table-column
                  v-for="(item,index) in reportColumnList" :key="index"
                  :sortable="item.columnSortable"
                  :prop="item.columnProp"
                  :header-align="item.headerAlign"
                  :show-overflow-tooltip="item.showOverflowTooltip"
                  :align="item.align"
                  :fixed="item.fixed==''?false:item.fixed"
                  :min-width="item.columnWidth"
                  :label="item.columnLabel">
                  <template slot-scope="scope">
                    <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
                    <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                       style="width: 100px; height: 80px"/></span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span  style="font-size: 12px;">打印格式名称:</span>
              <el-input type="textarea" v-model="selectReportString" readonly :rows="3"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-tabs style="font-size: 14px" v-model="activeName" type="border-card" @tab-click="handleClick"
                       class="customer-tab">
                <el-tab-pane label="打印参数" name="first">
                  <el-table
                    :data="reportParamList"
                    :cell-style="customerCellStyle" :cell-class-name="customerCellClassName"
                    border
                    :height="height"
                  >
                    <el-table-column
                      v-for="(item,index) in printParamColumnList" :key="index"
                      :sortable="item.columnSortable"
                      :prop="item.columnProp"
                      :header-align="item.headerAlign"
                      :show-overflow-tooltip="item.showOverflowTooltip"
                      :align="item.align"
                      :fixed="item.fixed==''?false:item.fixed"
                      :min-width="item.columnWidth"
                      :label="item.columnLabel">
                      <template slot-scope="scope">
                      <span v-if="item.columnHidden">
                        <span v-if="scope.row.valuetypeDb === 'T'">
                             <el-input v-model='scope.row[item.columnProp]'> </el-input>
                        </span>
                         <span v-if="scope.row.valuetypeDb === 'D'">
                             <el-date-picker style="width: 100%;"
                                             v-model='scope.row[item.columnProp]'> </el-date-picker>
                        </span>
                         <span v-if="scope.row.valuetypeDb === 'I'">
                             <el-input type="number" v-model='scope.row[item.columnProp]' min="1"> </el-input>
                        </span>

                      </span>
                        <span v-else>{{ scope.row[item.columnProp] }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>

              </el-tabs>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bartenderPrint()">打印</el-button>
        <el-button type="primary" @click="closeDialog()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {
  checkRollCustomer,
  getRollCustomer,
  getReportFileByCustomer,
  getReportSubFileList,
  getReportParameters,
  printLabel
} from '@/api/print/rollPrint.js';

export default {
  components: {},
  data() {
    return {
      visible: false,
      rollNos: '',
      activeName: 'first',
      height: 200,
      // 模板
      reportColumnList: [
        {
          tableId: "common1001",
          tableName: "common",
          columnProp: "reportid",
          columnLabel: "报告编号",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        }, {
          tableId: "common1001",
          tableName: "common",
          columnProp: "Reportfile",
          columnLabel: "报告文件名",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        }, {
          tableId: "common1001",
          tableName: "common",
          columnProp: "Remark",
          columnLabel: "备注",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        }, {
          tableId: "common1001",
          tableName: "common",
          columnProp: "DefaultFlag",
          columnLabel: "默认格式",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },

      ],
      // 打印参数
      printParamColumnList: [
        {
          tableId: "common1001",
          tableName: "common",
          columnProp: "parametername",
          columnLabel: "参数名",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        }, {
          tableId: "common1001",
          tableName: "common",
          columnProp: "parameterdesc",
          columnLabel: "参数标题",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        }, {
          tableId: "common1001",
          tableName: "common",
          columnProp: "optionvalue",
          columnLabel: "参数值",
          columnHidden: true,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        }, {
          tableId: "common1001",
          tableName: "common",
          columnProp: "valuetype",
          columnLabel: "参数类型",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: "this.$route.meta.menuId",
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },

      ],
      // 数据
      // 可用模板列表
      reportFileList: [],
      // 选中模板列表
      selectReportFileList: [],
      selectReportString: '',
      // 数量
      orderInfo: {
        userName: this.$store.state.user.name,
        rollNo: '',
        customerId: '',
        totalQty: 0,
        perBoxQty: 0,
        boxQty: 0,
        lastBoxQty: 0,
        rollNos: [],
        // 选中模板列表
        reportFileList: [],
        // 手工参数
        param: []
      },
      // 记录打印参数
      printParamList: [],
      // 模板参数列表
      reportParamList: [],
      buttons: {
        settingLanguageList: '按语言设置',
        edit: '编辑',
        delete: '删除',
        deleteList: '批量删除',
        cz: '操作',
        search: '查询',
        download: '导出',
        settingTable: '设置列表',
        defaultTable: '设置默认配置',
        list: "列表",
        addList: '批量添加',
        settingLanguage: "按控件设置"
      },
      // 导出 end
      buttonList: [
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '按语言设置',
          objectId: 'settingLanguageList',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '编辑',
          objectId: 'edit',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '删除',
          objectId: 'delete',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '批量删除',
          objectId: 'deleteList',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '操作',
          objectId: 'cz',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '查询',
          objectId: 'search',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '导出',
          objectId: 'download',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '设置列表',
          objectId: 'settingTable',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '设置默认配置',
          objectId: 'defaultTable',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '列表',
          objectId: 'list',
          objectType: "button",
          tableId: "common1001"
        },
        {
          functionId: "this.$route.meta.menuId",
          languageValue: '按控件设置',
          objectId: 'settingLanguage',
          objectType: "button",
          tableId: "common1001"
        }
      ],
    }
  },
  watch: {
    orderInfo: {
      handler: function (val, oldVal) {
        if (this.orderInfo.totalQty > 0 && this.orderInfo.perBoxQty > 0) {
          this.orderInfo.lastBoxQty = this.decimalUtil.mod(this.orderInfo.totalQty, this.orderInfo.perBoxQty)
          if (this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty) < 1) {
            this.orderInfo.boxQty = 1
          } else {
            this.orderInfo.boxQty = this.decimalUtil.formatDown(this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty), 0)
          }

        }
      },
      // 深度观察监听
      deep: true
    },
    updateData: {
      deep: true,
      handler: function (newV, oldV) {
        this.updateData.projectID = this.updateData.projectID.toUpperCase();
        this.updateData.oriSOOrderNo = this.updateData.oriSOOrderNo.toUpperCase();
        this.updateData.orderType = this.updateData.orderType.toUpperCase();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 800;
    })
  },

  methods: {
    closeDialog() {
      this.visible = false
      this.selectReportString = ''
      this.reportParamList = []
    },
    init(val) {
      this.visible = true
      this.rollNos = val
      this.searchBoxLabelSO()
    },
    // 调用bartender打印
    bartenderPrint() {

      if (!this.rollNos) {
        this.$message.warning('请输入卷号')
        return
      }
      if (this.selectReportFileList.length === 0) {
        this.$message.warning('选择模板进行打印')
        return
      }
      // const loading = this.$loading({
      //   lock: true,
      //   text: '正在打印',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      let rollNoList = this.rollNos.split(";")
      this.orderInfo.reportFileList = this.selectReportFileList
      this.orderInfo.param = this.reportParamList
      this.orderInfo.rollNos = rollNoList
      this.printParamList = JSON.parse(JSON.stringify(this.reportParamList))
      printLabel(this.orderInfo).then(({data}) => {
        if (data.code === 0) {
          this.$message.success(data.msg)
          this.visible = false
        } else {
          this.$message.warning(data.msg)
        }
        // loading.close();
      })
      this.visible = false
    },
    // 获取订单信息
    searchBoxLabelSO() {

      if (!this.rollNos) {
        this.$message.warning('请输入卷号')
        return
      }
      let rollNoList = this.rollNos.split(";")
      this.reportFileList = []
      checkRollCustomer(rollNoList).then(({data}) => {
        if (data.code === 0) {
          getRollCustomer(rollNoList[0]).then(({data}) => {
            if (data.code === 0) {
              this.orderInfo.customerId = data.data.customerId ? data.data.customerId : '*'
              let query = {
                customerId: data.data.customerId ? data.data.customerId : '*',
                reportFamily: '卷标签'
              }
              getReportFileByCustomer(query).then(({data}) => {
                if (data.code === 0) {
                  this.reportFileList = data.dataList
                  this.$refs.reportFileTable.setCurrentRow(this.reportFileList[0]);
                } else {
                  this.$message.warning(data.msg)
                  Object.assign(this.$data, this.$options.data.call(this.orderInfo));
                  Object.assign(this.$data, this.$options.data.call(this.selectReportString));
                  Object.assign(this.$data, this.$options.data.call(this.reportParamList));
                }
              })
            } else {
              this.$message.warning(data.msg)
            }
          })
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
    // 获取订单数数据 和 打印 模板数据
    getBoxSoAndReportFile() {
      this.searchBoxLabelSO()
    },
    handleClick() {

    },
    // 选择模板
    handleCurrentChange(val) {
      if (!val) return
      this.selectReportFileList = []
      let query = {
        reportId: val.reportid,
        defaultFlag: val.DefaultFlag,
        reportFile: val.Reportfile,
        reportFamily: '卷标签',
        customerId: this.orderInfo.customerId,
      }
      this.selectReportFileList.push(query)
      this.searchReportSubFileList(query)
      this.searchReportParameters(query)

    },
    // 获取子模版
    searchReportSubFileList(val) {
      let str = ''
      str += val.reportId + ' | ' + val.reportFile + '\n'
      this.selectReportString = str
      getReportSubFileList(val).then(({data}) => {
        if (data.code === 0) {
          for (let item of data.data) {
            str += item.reportid + ' | ' + item.Reportfile + '\n'
            let reportFile = {
              reportId: item.reportid,
              defaultFlag: 'Y',
              reportFile: item.Reportfile,
              reportFamily: '外箱标签',
              customerId: this.orderInfo.customerId,
            }
            this.selectReportFileList.push(reportFile)
          }
          this.selectReportString = str
        }
      })

    },
    // 获取柱模版打印参数
    searchReportParameters(val) {
      let printParamList = JSON.parse(JSON.stringify(this.printParamList))
      getReportParameters(val.reportId).then(({data}) => {
        if (data.code === 0) {
          this.reportParamList = data.data
          if (printParamList) {
            for (let item1 of printParamList) {
              for (let item2 of this.reportParamList) {
                if (item1.parametername === item2.parametername) {
                  item2.optionvalue = item1.optionvalue
                }
              }
            }
          }
        }
      })
    },
    /*添加定制的css类*/
    customerCellClassName({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 2) {
        return 'customer-text-cell';
      }
    },

    /*添加定制的cess样式*/
    customerCellStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 2) {
        return 'padding: 0px 0px;';
      }
    },
  },
  created() {

  }
}
</script>
<style scoped>

/deep/ .customer-tab .el-tabs__content {
  padding: 0px !important;
}

/deep/ .sl-el .el-tabs__item {
  padding: 0 13px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  font-weight: 500;
}

/deep/ div.table-input {
  padding: 0px 0px;
  height: 25px !important;
}

/*table中input*/
div.table-input /deep/ input.el-input__inner {
  padding: 0px 0px;
  height: 23px !important;
  text-align: right;
}
</style>