boying-vue/src/views/modules/finishedProductWarehouse/rollPrint.vue

<template>
  <div class="mod-config">
    <div>
        <span @click="favoriteFunction()">
         <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"></icon-svg>
        </span>
    </div>
<!--    <el-button @click="searchList()" type="primary">{{ buttons.search }}</el-button>-->
<!--    <el-button @click="saveColumnList()" v-show="showDefault" type="primary">{{ buttons.defaultTable }}-->
<!--    </el-button>-->
<!--    <el-button @click="userSetting" type="primary">{{ buttons.settingTable }}</el-button>-->
    <el-form label-position="top" style="margin-top: 5px" v-show="searchShow" :inline="true" :model="queryData"
             @keyup.enter.native="getDataList()">
      <el-form-item label="卷号">
        <el-input v-model="queryData.rollno" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="物料编码">
        <el-input v-model="queryData.partno" clearable>
        </el-input>
      </el-form-item>
      <el-form-item style="margin-top: 18px">
        <el-button @click="getDataList()" type="primary">{{ buttons.search1 }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      highlight-current-row
      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==''?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-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        :label="buttons.cz">
        <template slot-scope="scope">
          <a type="text" size="small" @click="printRoll(scope.row)" herf="#">{{ buttons.rollPrint }}</a>
        </template>
      </el-table-column>

    </el-table>
    <!-- 设置列 -->
    <column v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './crollinfo-add-or-update'
import {getCRollInfoList} from '@/api/crollinfo/crollinfo.js'
import {rollPrint} from '@/api/finishedProductWarehouse/rollPrint.js'
import column from "../common/column";
import search from "../common/search";
import {
  searchSysLanguageParam,
  searchFunctionButtonList,
  saveButtonList,
} from "@/api/sysLanguage.js"
import {
  saveTableDefaultList,
  getTableDefaultListLanguage,
  getTableUserListLanguage,
  removerDefault,
  removerUser
} from "@/api/table.js"
import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'

export default {
  data() {
    return {
      searchVisible: false,
      searchShow: false,
      // table高度
      height: 450,
      // 是否收藏
      favorite: false,
      addLanguage: false,
      userId: this.$store.state.user.name,
      functionId: this.$route.meta.menuId,
      tableId: "105003002RP",
      languageCode: this.$i18n.locale,
      visible: false,
      showDefault: false,
      queryData: {
        day1: '',
        day2: '',
        rollno: '',
        partno: ''
      },
      queryTable: {
        functionId: this.$route.meta.menuId,
        tableId: "105003002RP",
        languageCode: this.$i18n.locale
      },
      // 语言词典集合
      sysLanguageParams: [],
      columnList: [
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "rollno",
          "columnLabel": "卷号",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 100,
          "format": null,
          "sortLv": 10,
          "status": true,
          "fixed": true,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "partno",
          "columnLabel": "物料编号",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 100,
          "format": null,
          "sortLv": 20,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "partDescription",
          "columnLabel": "物料描述",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 250,
          "format": null,
          "sortLv": 30,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "site",
          "columnLabel": "工厂编号",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 40,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "rollqty",
          "columnLabel": "卷数量",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 41,
          "format": null,
          "sortLv": 7,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "number",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "status",
          "columnLabel": "状态",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 50,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "number",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "sourcetype",
          "columnLabel": "来源类型",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 60,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },

        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "warehouseid",
          "columnLabel": "仓库编码",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 70,
          "status": false,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "supplierid",
          "columnLabel": "供应商编号",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 80,
          "status": false,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "suppliername",
          "columnLabel": "供应商名称",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 90,
          "status": false,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "createdby",
          "columnLabel": "创建人",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 100,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "rolldate",
          "columnLabel": "卷创建时间",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 120,
          "format": null,
          "sortLv": 110,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "date",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "manufacturedate",
          "columnLabel": "制造日期",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 120,
          "format": null,
          "sortLv": 111,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "createddate",
          "columnLabel": "创建时间",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 150,
          "format": null,
          "sortLv": 112,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": "date",
          "align": null
        },
        {
          "userId": this.$store.state.user.name,
          "tableId": "105003002RP",
          "tableName": "卷标签打印",
          "columnProp": "remark",
          "columnLabel": "备注",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": 80,
          "format": null,
          "sortLv": 113,
          "status": false,
          "fixed": false,
          "serialNumber": null,
          "columnType": "string",
          "align": null
        },

      ],
      dataList: [],
      buttons: {
        add: '添加',
        edit: '编辑',
        delete: '删除',
        deleteList: '批量删除',
        cz: '操作',
        search: '搜索',
        search1: '查询',
        download: '导出',
        settingTable: '设置列表',
        defaultTable: '设置默认配置',
        rollPrint: '卷补打'
      },
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      pagination: {
        page: 1,
        pageSize: 200,
        total: 0,
      },
      totalPage: 5,
      countTotal: 200,
    }
  },
  components: {
    AddOrUpdate,
    column,
    search
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 180;
    }),
      this.lazyLoading();
  },
  activated() {
    //  this.getDataList()
  },
  methods: {
    lazyLoading() {
      let dom = document.querySelector(".el-table__body-wrapper");
      dom.addEventListener("scroll", (v) => {
        const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        // if (scrollDistance <= 0) {  //分辨率问题，如果设置 100% ，滑倒最底部，scrollDistance的值 可能为 0.201 到 -0.201
        if (scrollDistance <= 1) {
          //等于0证明已经到底，可以请求接口
          if (this.pagination.page >= this.totalPage) {
            //判断是否到达底部
            // this.$message.warning("我~是有底线的 (～￣▽￣)～");
            //console.log("我~是有底线的 (～￣▽￣)～")
          }
          if (this.pagination.page < this.totalPage) {
            //当前页数小于总页数就请求
            this.pagination.page++; //当前页数自增
            //console.log("页面已经到达底部,可以请求接口,请求第 " + this.pagination.page + " 页数据");
            this.pagination.pageSize = this.countTotal;
            this.getDataListAdd()
          }
        }
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      let query = {
        parttypeFlag: 'F',
        sourceType: '其他入库',
        rollno: this.queryData.rollno,
        partno: this.queryData.partno,
        limit: 200,
        page: 1
      }
      getCRollInfoList(query).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalPage
          // this.countTotal = data.page.totalCount
          this.pagination.page = data.page.currPage
          this.pagination.total = data.page.totalCount
        }
        this.dataListLoading = false
      })
      //  this.searchShow = false
    },
    // 滚动获取数据
    getDataListAdd() {
      this.dataListLoading = true
      let query = {
        parttypeFlag: 'F',
        sourceType: '其他入库',
        rollno: this.queryData.rollno,
        partno: this.queryData.partno,
        limit: this.pagination.pageSize,
        page: this.pagination.page
      }
      getCRollInfoList(query).then(({data}) => {
        if (data && data.code === 0) {
          let voList = data.page.list
          this.dataList.push(...voList)
        }
        this.dataListLoading = false
      })
      //  this.searchShow = false
    },
    // 打开搜索页面
    searchList() {
      if (this.searchShow) {
        this.searchShow = false
        return
      } else {
        this.searchShow = true
      }
    },
    // 卷标签补打
    printRoll(val) {
      let rollList = []
      rollList.push(val)
      rollPrint(rollList).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
    // 校验用户是否收藏
    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
        })
      }

    },
    // 获取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,
        objectType: 'table',
        status: true,
      }
      getTableUserListLanguage(queryTableUser).then(({data}) => {
        if (data.rows.length > 0) {
          this.columnList = data.rows
        } else {
          this.getColumnList()
        }

      })
    },
    // 保存 默认配置 列
    async saveColumnList() {
      // 删除所有的该页面下保存的数据
      //删除 user自定义的数据
      await removerUser(this.queryTable)
      // 删除默认配置
      await removerDefault(this.queryTable)
      // 保存页面 table属性
      let sumColumnList = this.columnList;
      sumColumnList = sumColumnList.map(item => {
        return item = {
    tableId: item.tableId,
          tableName: item.tableName,
          columnProp: item.columnProp,
          columnLabel: item.columnLabel,
          columnHidden: false,
          columnImage: false,
          columnSortable: item.columnSortable,
          columnWidth: item.columnWidth,
          format: item.format,
          functionId: this.$route.meta.menuId,
          sortLv: item.sortLv,
          status: true,
          fixed: item.fixed,
          serialNumber: item.serialNumber,
          columnType: item.columnType,
          align: item.align
        }
      })

      await saveTableDefaultList(sumColumnList)
      // 保存页面 button label title 属性
      let buttons = this.buttonList.map(item => {
        return item = {
          functionId: this.$route.meta.menuId,
          languageValue: item.languageValue,
          objectId: item.objectId,
          objectType: item.objectType,
          tableId: item.tableId
        }
      })
      await saveButtonList(buttons)
      this.getFunctionButtonList()
      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 scoped>
.sl-svg {
  overflow: hidden;
  float: right;
}
</style>