wms-vue/src/views/modules/warehouse/PurchasePart.vue

<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
      <el-form-item label="工厂编码">
        <el-input v-model="searchData.site" style="width: 120px"></el-input>
      </el-form-item>
      <!--      <el-form-item >-->
      <!--        <span slot="label" style="" @click="getBaseList(5)"><a herf="#">{{buttons.partNo}}：</a></span>-->
      <!--        <el-input v-model="searchData.partNo" style="width: 120px"  oninput="this.value = this.value.toUpperCase()"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="物料编码">
        <el-input v-model="searchData.partNo" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchData.partDesc" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="新增日期">
        <el-date-picker
          style="width: 130px"
          v-model="searchData.date1"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker
          style="width: 130px"
          v-model="searchData.date2"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 5px;margin-left: -2px">
      <el-form-item>
        <el-button @click="getData()" type="primary" style="margin-left: 2px;">查询</el-button>
<!--        <el-button @click="userSetting" type="primary">设置列表</el-button>-->
        <el-button v-if="isAuth('sys:setting')" @click="saveColumnList()" type="primary">设置默认配置</el-button>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          导出
        </download-excel>
      </el-form-item>

    </el-form>
    <el-table
      :height="700"
      :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==''?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-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="this.searchData.page"
      :page-sizes="[100, 200, 500]"
      :page-size="this.searchData.size"
      :total="this.searchData.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 动态列    -->
    <column v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>
    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
import {getCRollInfoList} from '@/api/crollinfo/crollinfo.js'
import column from "../common/column";
import Chooselist from '@/views/modules/common/Chooselist';
import {
  searchSysLanguagePackList,
  searchSysLanguageParam,
  searchFunctionButtonList,
  saveButtonList,
  searchSysLanguage,
  searchLanguageListByLanguageCode,
  saveSysLanguageOne,
  searchPageLanguageData,
  removerLanguage
} from "@/api/sysLanguage.js"
import {
  saveTableDefaultList,
  saveTableUser,
  getTableDefaultListLanguage,
  getTableUserListLanguage,
  removerDefault,
  removerUser
} from "@/api/table.js"
import {
  searchPartNoDataWithPage,
} from "@/api/base/site.js"
import {
  getPurchasePartList
} from "@/api/warehouse/inventoryPart.js"

export default {
  name: "searchPartNo",
  components: {column,Chooselist},
  watch: {
    searchData: {
      deep: true,
      handler: function (newV, oldV) {
        this.searchData.partNo = this.searchData.partNo.toUpperCase()
      }
    }
  },
  data() {
    return {
      tagNo:'',
      // 多语言 start
      buttonList: [
        {
          functionId: this.$route.meta.menuId,
          languageValue: '设置默认配置',
          objectId: 'defaultTable',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '查询',
          objectId: 'search',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '导出',
          objectId: 'download',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '设置列表',
          objectId: 'settingTable',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '工厂编码',
          objectId: 'site',
          objectType: "button",
          tableId: "100005Table"
        },

        {
          functionId: this.$route.meta.menuId,
          languageValue: '全部',
          objectId: 'all',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '是',
          objectId: 'yes',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '否',
          objectId: 'no',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '在用',
          objectId: 'active',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '物料编码',
          objectId: 'partNo',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '物料名称',
          objectId: 'partDescription',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '规格型号',
          objectId: 'spec',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '新增日期',
          objectId: 'newDate',
          objectType: "button",
          tableId: "100005Table"
        },
        {
          functionId: this.$route.meta.menuId,
          languageValue: '至',
          objectId: 'to',
          objectType: "button",
          tableId: "100005Table"
        }
      ],
      showDefault:false,
      // 语言词典集合
      sysLanguageParams: [],
      dataListLoading: false,
      // 用户table 配置集合
      userColumnList: [],
      queryTableUser: {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: "100005Table",
        status: true,
        languageCode: this.$i18n.locale
      },
      buttons:{
        defaultTable:'设置默认配置',
        search:'查询',
        download:'导出',
        settingTable: '设置列表',
        site:'工厂编码',
        active:'在用',
        all:'全部',
        yes:'是',
        no:'否',
        partNo:'物料编码',
        partDescription:'物料名称',
        spec:'规格型号',
        newDate:'新增日期',
        to:'至',
      },
      // 默认table 查询参数
      queryTable: {
        functionId: this.$route.meta.menuId,
        tableId: "100005Table",
        languageCode: this.$i18n.locale
      },
      languageList: [],
      queryLanguage: {},
      visible:false,
      // 多语言 end
      // 导出 start
      exportData: [],
      exportName: "物料编码"+this.dayjs().format('YYYYMMDDHHmmss'),
      exportHeader: ["物料编码"],
      exportFooter: [],
      // 导出 end
      height: 200,
      modelFlag:false,
      modelInputFlag:true,
      selectList:[],
      searchData: {
        site:'',
        page:1,
        size:100,
        total:0,
        partNo:'',
        partDesc:'',
        date1:'',
        date2:'',
        user:this.$store.state.user.name,
      },
      dataList:[],
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          serialNumber: '100005TablePartNo',
          tableId: "100005Table",
          tableName: "查询物料编码表",
          columnProp: "partNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "采购件编码",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          serialNumber: '100005TablePartDescription',
          tableId: "100005Table",
          tableName: "查询物料编码表",
          columnProp: "partDesc",
          headerAlign: "center",
          align: "left",
          columnLabel: "采购件描述",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          serialNumber: '100005TableUmid',
          tableId: "100005Table",
          tableName: "查询物料编码表",
          columnProp: "umId",
          headerAlign: "center",
          align: "left",
          columnLabel: "计量单位",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          serialNumber: '100005TableCreateDate',
          tableId: "100005Table",
          tableName: "查询物料编码表",
          columnProp: "createDate",
          headerAlign: "center",
          align: "left",
          columnLabel: "新增日期",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          serialNumber: '100005TableinventoryPart',
          tableId: "100005Table",
          tableName: "查询物料编码表",
          columnProp: "inventoryPart",
          headerAlign: "center",
          align: "left",
          columnLabel: "库存件",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          serialNumber: '100005TableSite',
          tableId: "100005Table",
          tableName: "查询物料编码表",
          columnProp: "site",
          headerAlign: "center",
          align: "left",
          columnLabel: "工厂编号",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60
        }
      ],
      //懒加载start
      loading: false,
      pagination: {
        page: 1,
        pageSize: 200,
        total: 0,
      },
      totalPage: 5,
      countTotal: 200,
      //懒加载end
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 180;
      this.lazyLoading();
    })
  },
  methods: {
    //多语言start
    // 获取页面多语言
    getMsgLanguage() {
      this.dataListLoading = true
      let queryLang = {
        functionId: this.$route.meta.menuId,
        table_id: '100005Table',
        languageCode: this.$i18n.locale
      }
      searchPageLanguageData(queryLang).then((data) => {
        if (data.code == 0) {
          this.pageLanguageData = data.data
        } else {
        }
      })
      this.dataListLoading = false
    },
    // 获取button的词典
    getFunctionButtonList() {
      searchFunctionButtonList(this.queryTable).then(({data}) => {
        if (data.code == 0) {
          this.buttons = data.data
        } else {
          // saveButtonList(this.buttonList).then(({data}) => {
          // })
        }
      })
    },
    getBaseData(val){
      if (this.tagNo === 5){
        this.searchData.partNo = val.PartNo
      }
    },
    // 获取基础数据列表
    getBaseList(val){
      this.tagNo = val
      this.$nextTick(() => {
        let strVal = "";
        if (val === 5){
          strVal = this.searchData.partNo
        }
        this.$refs.baseList.init(val, strVal);
      })
    },
    // 获取语言词典
    getSysLanguageParamList() {
      searchSysLanguageParam(this.queryTable).then(({data}) => {
        this.sysLanguageParams = data.rows
      })
    },
    // 打开页面设置
    userSetting() {
      this.visible = true;
      let queryTable = {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: "100005Table",
        languageCode: this.$i18n.locale
      }
      this.$nextTick(() => {
        this.$refs.column.init(queryTable);
      });
    },
    // 获取 用户保存的 格式列
    getTableUserColumn() {
      getTableUserListLanguage(this.queryTableUser).then(({data}) => {
        if (data.rows.length>0) {
          //this.columnList = []
          this.columnList = data.rows
        } else {
          this.getColumnList()
        }

      })
    },
    // 保存 默认配置 列
    saveColumnList() {
      // 删除所有的该页面下保存的数据
      if (this.userColumnList) {
        //删除 user自定义的数据
        removerUser(this.queryTable)
      }
      // 删除默认配置
      removerDefault(this.queryTable)
      // 删除语言
      removerLanguage(this.queryTable)
      // 保存页面 table属性
      let sumColumnList = this.columnList;
      saveTableDefaultList(sumColumnList).then(({data}) => {
      })
      // 保存页面 button label title 属性
      saveButtonList(this.buttonList).then(({data}) => {
      })
      this.getFunctionButtonList()
      this.getColumnList()
    },
    // 获取 tableDefault 列
    getColumnList() {
      getTableDefaultListLanguage(this.queryTable).then(({data}) => {
        if (data.rows.length>0) {
          // this.showDefault = false
          this.columnList = data.rows
        } else {
          // this.showDefault = true
        }
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.searchData.size = val
      this.searchData.page = 1
      this.getData()
    },
    // 当前页
    currentChangeHandle (val) {
      this.searchData.page = val
      this.getData()
    },
    //多语言 end
    // getData(){
    //   if((this.searchData.site==null||this.searchData.site=='')&&(this.searchData.partNo==null||this.searchData.partNo=='')&&(this.searchData.partDescription==null||this.searchData.partDescription=='')&&
    //     (this.searchData.spec==null||this.searchData.spec=='')&&(this.searchData.date1==null||this.searchData.date1=='')&&(this.searchData.date2==null||this.searchData.date2=='')){
    //     this.$alert("数据量过大，请至少输入一个查询条件！",'提示',{
    //       confirmButtonText:'确定'
    //     })
    //     return false;
    //   }
    //   searchPartNoDataWithPage(this.searchData).then(({data}) => {
    //     this.dataList = data.rows
    //   })
    // },
    //导出excel
    createExportData() {

      return this.dataList;

    },
    startDownload() {
      //  this.exportData = this.dataList

    },
    finishDownload() {

    },
    fields() {
      let json = "{"
      this.columnList.forEach((item, index) => {
        if (index == this.columnList.length - 1) {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
        } else {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
        }
      })
      json += "}"
      let s = eval("(" + json + ")")

      return s
    },
    // 导出 end
    lazyLoading() {
      // let dom = document.querySelector(".el-table__body-wrapper");
      // dom.addEventListener("scroll", (v) => {
      //   const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
      //   //console.log("鼠标滑动-scrollDistance", scrollDistance)
      //   // if (scrollDistance <= 0) {  //分辨率问题，如果设置 100% ，滑倒最底部，scrollDistance的值 可能为 0.201 到 -0.201
      //   if (scrollDistance <= 1) {
      //     //等于0证明已经到底，可以请求接口
      //     if (this.pagination.page >= this.totalPage) {
      //       //判断是否到达底部
      //       // this.$message.warning("我~是有底线的 (～￣▽￣)～");
      //     }
      //     if (this.pagination.page < this.totalPage) {
      //       //当前页数小于总页数就请求
      //       this.pagination.page++; //当前页数自增
      //       this.pagination.pageSize = this.countTotal;
      //       this.getDataListAdd()
      //     }
      //   }
      // });
    },
    // 滚动获取数据
    getDataListAdd(val) {
      // this.dataListLoading = true
      // let query = {
      //   parttypeFlag:'R',
      //   limit:  this.pagination.pageSize,
      //   page: this.pagination.page,
      //   site:this.searchData.site,
      //   partNo:this.searchData.partNo,
      //   partDescription:this.searchData.partDescription,
      //   active:this.searchData.active,
      //   spec:this.searchData.spec,
      //   date1:this.searchData.date1,
      //   date2:this.searchData.date2,
      //   user:this.$store.state.user.name,
      // }
      // searchPartNoDataWithPage(query).then(({data}) => {
      //   if (data && data.code === 0) {
      //     let voList =  data.page.list
      //     this.dataList.push(...voList)
      //   }
      //   this.dataListLoading = false
      // })
    },
    // 获取数据列表
    getData(val) {
      if((this.searchData.site==null||this.searchData.site=='')&&(this.searchData.partNo==null||this.searchData.partNo=='')&&(this.searchData.partDescription==null||this.searchData.partDescription=='')&&
        (this.searchData.spec==null||this.searchData.spec=='')&&(this.searchData.date1==null||this.searchData.date1=='')&&(this.searchData.date2==null||this.searchData.date2=='')){
        this.$alert("数据量过大，请至少输入一个查询条件！",'提示',{
          confirmButtonText:'确定'
        })
        return false;
      }
      this.dataListLoading = true
      if (val != 0){
        this.pagination.pageSize=200
      }

      let query = {
        parttypeFlag:'R',
        limit:  this.pagination.pageSize,
        page: this.pagination.page,
        site:this.searchData.site,
        partNo:this.searchData.partNo,
        partDescription:this.searchData.partDescription,
        active:this.searchData.active,
        spec:this.searchData.spec,
        date1:this.searchData.date1,
        date2:this.searchData.date2,
        user:this.$store.state.user.name,
      }
      getPurchasePartList(this.searchData).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.searchData.page = data.page.currPage
          this.searchData.size = data.page.pageSize
          this.searchData.total = data.page.totalCount
        }
        this.dataListLoading = false
      })
    }
  },
  created() {
    this.getTableUserColumn()
    this.getSysLanguageParamList()
    this.getFunctionButtonList()
    this.getMsgLanguage()
  }
}
</script>

<style >
.el-textarea__inner {
  padding: 5px 5px;
}
</style>