rongxing-vue/src/views/modules/finishedProductWarehouse/boxingPrint.vue

<template>
  <div class="sl">
    <div ref="sl_search">
        <span @click="favoriteFunction()">
         <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"></icon-svg>
        </span>
      <el-button @click="searchShowDiv()" type="primary">{{ buttons.search }}</el-button>
      <el-button @click="userSetting" type="primary">{{ buttons.settingTable }}</el-button>
      <el-button v-if="isAuth('sys:setting')"  @click="saveColumnList()" type="primary" v-show="showDefault">{{ buttons.defaultTable }}
      </el-button>
      <el-form :inline="true" label-position="top" :model="queryData" @keyup.enter.native="searchList()"
               v-show="searchShow">
        <el-form-item label="箱号">
          <el-input style="width: 150px" v-model="queryData.boxNo" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="销售单号">
          <el-input style="width: 150px" v-model="queryData.orderNo" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="物料编号">
          <el-input style="width: 150px" v-model="queryData.itemCode" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker style="width: 150px" value-format="yyyy-MM-dd HH:mm:ss" type="date"
                          v-model="queryData.createdDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item label=" - ">
          <el-button @click="searchList()" type="primary">{{ buttons.select }}</el-button>
        </el-form-item>
      </el-form>
    </div>


    <el-table

      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          {{ scope.row[item.columnProp] }}
          <!--          <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-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        :label="buttons.cz">
        <template slot-scope="scope">
          <a type="text" size="small" @click="openPrintDialog(scope.row)" herf="#">{{ buttons.boxPrint }}</a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 模板列表  -->
    <el-dialog
      v-drag
      :title="pageLanguageData.printDialog"
      :visible.sync="printVisible"
      width="220px"
      center>
      <dev style="margin: 0 auto">
        <el-select style="width: 200px" :placeholder="pageLanguageData.printTemplateMsg" v-model="reportFileVo">
          <el-option v-for="(item,index) in printTemplates" :key="index" :label="item.reportFileVo"
                     :value="item.reportIdVo"></el-option>
        </el-select>
      </dev>

      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="printBox()">{{ buttons.print }}</el-button>
         <el-button @click="printVisible = false">{{ buttons.close }}</el-button>
       </span>
    </el-dialog>

    <!-- 设置列 -->
    <column v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>


  </div>
</template>

<script>

import {
  getSoBoxingList,
  getReportFileListByCustomerId,
  getCustomerId,
  printPacking
} from '@/api/finishedProductWarehouse/soBoxes.js'
import column from "../common/column";
import search from "../common/search";
import {
  searchSysLanguageParam,
  searchFunctionButtonList,
  saveButtonList,
  searchPageLanguageData
} from "@/api/sysLanguage.js"
import {
  saveTableDefaultList,
  getTableDefaultListLanguage,
  getTableUserListLanguage
} from "@/api/table.js"
import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'

export default {
  data() {
    return {
      printVisible: false,
      searchVisible: false,
      searchShow: false,
      // table高度
      height: 450,
      // 是否收藏
      favorite: false,
      addLanguage: false,
      functionId: 1001,
      tableId: "1001BoxingPrint",
      languageCode: this.$i18n.locale,
      visible: false,
      showDefault: false,
      queryData: {
        boxNo: '',
        orderNo: '',
        itemCode: '',
        createdDate: this.dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      reportFileVo: '',
      boxNumber: 0,
      itemCode: '',
      orderNo: '',
      boxNo:'',
      // 打印模板列表
      printTemplates: [],
      // 语言词典集合
      sysLanguageParams: [],
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "id",
          headerAlign: "center",
          align: "center",
          columnLabel: "主键",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintId'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "site",
          headerAlign: "center",
          align: "center",
          columnLabel: "工厂编号",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintSite'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "boxNo",
          headerAlign: "center",
          align: "center",
          columnLabel: "箱编号",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintBoxNo'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "orderNo",
          headerAlign: "center",
          align: "center",
          columnLabel: "订单编号",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintOrderNo'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "batchCode",
          headerAlign: "center",
          align: "center",
          columnLabel: "批号",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintBatchCode'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "itemCode",
          headerAlign: "center",
          align: "center",
          columnLabel: "物料编码",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintItemCode'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "status",
          headerAlign: "center",
          align: "center",
          columnLabel: "状态",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintStatus'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "status2",
          headerAlign: "center",
          align: "center",
          columnLabel: "状态2",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintStatus2'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "rollsQty",
          headerAlign: "center",
          align: "center",
          columnLabel: "卷数量",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintRollsQty'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "boxType",
          headerAlign: "center",
          align: "center",
          columnLabel: "箱类型",
          columnHidden: true,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintBoxType'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "createdDate",
          headerAlign: "center",
          align: "center",
          columnLabel: "创建时间",
          columnHidden: true,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintCreatedDate'
        }, {
          userId: this.$store.state.user.name,
          functionId: 1001,
          tableId: "1001BoxingPrint",
          tableName: "so_receive_boxes",
          columnProp: "createdBy",
          headerAlign: "center",
          align: "center",
          columnLabel: "创建人",
          columnHidden: true,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          serialNumber: '1001BoxingPrintCreatedBy'
        }
      ],
      dataList: [],
      pageLanguageDataList: [
        {
          functionId: "1001",
          languageValue: '操作',
          objectId: 'operate',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '销售单号',
          objectId: 'shopOrderNo',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '箱号',
          objectId: 'boxNo',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '物料编号',
          objectId: 'partNo',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '创建时间',
          objectId: 'createdDate',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '搜索',
          objectId: 'search',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '设置列表',
          objectId: 'setting',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '取消',
          objectId: 'recall',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '打印',
          objectId: 'print',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '请选择模板',
          objectId: 'printTemplateMsg',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '打印模板选择',
          objectId: 'printDialog',
          objectType: "page",
          tableId: "boxingPrint"
        },
        {
          functionId: "1001",
          languageValue: '标签打印',
          objectId: 'labelPrint',
          objectType: "page",
          tableId: "boxingPrint"
        }
      ],
      queryPageLang: {
        functionId: "1001",
        objectType: "page",
        tableId: "boxingPrint",
        languageCode: this.$i18n.locale
      },
      buttons: {
        add: '添加',
        edit: '编辑',
        delete: '删除',
        deleteList: '批量删除',
        cz: '操作',
        search: '搜索',
        select: '查询',
        download: '导出',
        settingTable: '设置列表',
        defaultTable: '设置默认配置',
        print: '打印',
        close: '取消',
        boxPrint: '标签打印'
      },
      pageLanguageData: {
        printDialog: "打印模板选择",
        printTemplateMsg: "请选择模板",
      },
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    column,
    search
  },
  mounted() {
    this.getAutoHeight()
  },
  activated() {
    this.searchList()
  },

  methods: {
    // 打开搜索条件
    searchShowDiv() {
      if (this.searchShow) {
        this.searchShow = false
      } else {
        this.searchShow = true
      }

    },
    // 打开打印模态框
    openPrintDialog(val) {
      this.boxNumber = val.rollsQty
      this.itemCode = val.itemCode
      this.orderNo = val.orderNo
      this.boxNo = val.boxNo
      this.printVisible = true
      this.getReportFileListByCustomerId(val.itemCode)
    },
    // 打印
    printBox() {
      this.printVisible = false
      let reportFile = this.reportFileVo.split(":");

      let reportFileVo = {
        reportFile: reportFile[2],
        reportId: reportFile[1],
        isCustomer: reportFile[0],
        pickingNumber: this.boxNumber,
        partNo: this.itemCode,
        orderNo: this.orderNo,
        boxNo: this.boxNo,
      }
      printPacking(reportFileVo).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
        }
        if (data.code == 500) {
          this.$message.error(data.msg)
        }

      })
    },
    // 获取打印模板数据
    getReportFileListByCustomerId(partNo) {
      let vo = {
        partNo: partNo
      }
      getCustomerId(vo).then((data) => {
        let reportFileVo = {
          customerId: data.customerId,
          reportFamily: '外箱标签'
        }
        getReportFileListByCustomerId(reportFileVo).then(({data}) => {
          this.printTemplates = data.reportFileVos
          this.reportFileVo = data.reportFileVos[0].reportIdVo
        })
      })
    },
    // 获取数据
    searchList() {
      getSoBoxingList(this.queryData).then(({data}) => {
        this.dataList = data.data
      })
    },

    // 这个方法用来动态设置 height
    getAutoHeight() {
      // 一定要使用 nextTick 来改变height 不然不会起作用
      this.$nextTick(() => {
        this.height = window.innerHeight - 174;
      });
    },
    // 校验用户是否收藏
    favoriteIsOk() {
      let userFavorite = {
        userId: this.$store.state.user.id,
        languageCode: this.$i18n.locale
      }
      userFavoriteList(userFavorite).then(({data}) => {
        let size = data.list.filter(item => item.menuId == this.$route.meta.menuId).length;
        if (size > 0) {
          this.favorite = true
        } else {
          this.favorite = false
        }
      })
    },
    // 收藏 OR 取消收藏
    favoriteFunction() {
      let userFavorite = {
        userId: this.$store.state.user.id,
        functionId: this.$route.meta.menuId,
      }
      if (this.favorite) {
        // 取消收藏
        this.$confirm(`确定取消收藏`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeUserFavorite(userFavorite).then(({data}) => {
            this.$message.success(data.msg)
            this.favorite = false
          })
        })
      } else {
        // 收藏
        saveUserFavorite(userFavorite).then(({data}) => {
          this.$message.success(data.msg)
          this.favorite = true
        })
      }

    },
    // 获取页面所有语言数据
    // 获取页面提示信息
    getPageLanguageData() {
      searchPageLanguageData(this.queryPageLang).then((data) => {
        if (JSON.stringify(data.data) != '{}') {
          this.pageLanguageData = data.data
        } else {
        }
      })
    },
    // 获取button的词典
    getFunctionButtonList() {
      let queryButton = {
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode,
        objectType: 'button'
      }
      searchFunctionButtonList(queryButton).then(({data}) => {
        if (data.data.length > 0) {
          this.buttons = data.data
        }
      })
    },
    // 获取语言词典
    getSysLanguageParamList() {
      let querySysLanguageParam = {
        languageCode: this.$i18n.locale
      }
      searchSysLanguageParam(querySysLanguageParam).then(({data}) => {
        this.sysLanguageParams = data.rows
      })
    },
    // 打开页面设置
    userSetting() {
      this.visible = true;
      let queryTable = {
        userId: this.userId,
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode
      }
      this.$nextTick(() => {
        this.$refs.column.init(queryTable);
      });
    },
    // 获取 用户保存的 格式列
    getTableUserColumn() {
      let queryTableUser = {
        userId: this.userId,
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode,
        status: true,
      }
      getTableUserListLanguage(queryTableUser).then(({data}) => {
        if (data.rows.length > 0) {
          //this.columnList = []
          this.columnList = data.rows
        } else {
          this.getColumnList()
        }

      })
    },
    // 保存 默认配置 列
    saveColumnList() {
      this.showDefault = false
      saveButtonList(this.buttonList).then(({data}) => {
      })
      saveButtonList(this.buttonList).then(({data}) => {
      })
      saveTableDefaultList(this.columnList).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.showDefault = false
        } else {
          this.showDefault = true
          this.$message.error(data.msg)
        }
      })
/*      this.getFunctionButtonList();
      this.getPageLanguageData()
      this.getColumnList()*/
    },
    // 获取 tableDefault 列
    getColumnList() {
      let queryTable = {
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode
      }
      getTableDefaultListLanguage(queryTable).then(({data}) => {
        if (!data.rows.length == 0) {
          this.showDefault = false
          this.columnList = data.rows
        } else {
          this.showDefault = true
        }
      })
    },
  },
  created() {
    this.getTableUserColumn()
    this.getSysLanguageParamList()
    this.getFunctionButtonList()
    this.favoriteIsOk()

  }
}
</script>
<style>
.sl-svg {
  overflow: hidden;
  float: right;
}

.el-dialog--center .el-dialog__body {
  text-align: center;
  padding: 0;
}

</style>