WZC2/fe/PC/src/views/inventoryManage/InventoryQuery/safetyStockWarning.vue

<template>
  <div class="page-box InspectNoticePage" v-loading="Loading.appMainLoading">
    <tablePagination
      :currenButtonData="currenButtonData"
      :tableData="tableData"
      :tableLoading="Loading.tableLoading"
      :tableColumns="tableColumns"
      @rowDrop="rowDrop"
      :totalCount="totalCount"
      :multipleSelection="multipleSelection"
      :MaxResultCount="PageListParams.MaxResultCount"
      FormFixedLeft="0px"
      :Options="editOptions"
      @topbutton="topbutton"
      @inlineDialog="inlineDialog"
      @sortChange="sortChange"
      @alertoldSkipCount="alertoldSkipCount"
      @alterResultCount="alterResultCount"
      @handleSelectionChange="handleSelectionChange"
      :currentPageProps="oldSkipCount"
      :quicklySearchOption="quicklySearchOption"
      @quicklySearchClick="quicklySearchClick"
      @quicklySearchClear="quicklySearchClear"
      :primarySearchOption="primarySearchOption"
      @overallSearchFormClick="overallSearchFormClick"
      :httpOverallSearchData="httpOverallSearchData"
      :cellStyle = "cellStyle"
    >
    </tablePagination>
    <curren-Drawer
      :title="tableColumns"
      :DrawerLoading="Loading.DrawerLoading"
      :drawer="displayDialog.detailsDialog"
      :propsData="propsData"
      :tabsDesTions="tabsDesTions"
      :Butttondata="[]"
      @drawerShut="(val) => (displayDialog.detailsDialog = val)"
      @drawerbutton="drawerbutton"
      @close-value="closeValue"
      :currenButtonData="currenButtonData"
      :tableColumns="detailsTableColumns"
      :totalCount="totalCountDetails"
      :MaxResultCount="MaxResultCountDetails"
      @alterResultCountDetails="alterResultCountDetails"
      @alertoldSkipCountDetails="alertoldSkipCountDetails"
    ></curren-Drawer>
  </div>
</template>
<script>
import { tableMixins } from "@/mixins/TableMixins"
import { LoadingMixins } from "@/mixins/LoadingMixins"
import { drawerMixins } from "@/mixins/drawerMixins"
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins"
import { mixins } from "@/mixins/mixins"
import { getListPageSafety } from '@/api/wms-api'
export default {
  name: "safetyStockWarning",
  mixins: [
    tableMixins,
    LoadingMixins,
    drawerMixins,
    TableHeaderMixins,
    mixins,
  ],
  data () {
    return {
      URL: 'wms/inventory/safety-stock-inventory-balance',
      //常用按钮数据
      currenButtonData: [
        // this.defaultExportBtn(),//导出
        this.defaultFieldSettingBtn(),//字段设置
        this.defaultFreshBtn(),//刷新
        this.defaultFilterBtn(),//筛选
      ]
    }
  },
  mounted () {
    this.paging();
  },
  watch: {
    tableColumns: {
      handler(val, oldVal) {
        // localStorage.setItem('tableColumns_' + this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify([]))
        // this.$nextTick(() => {
        // });
      },
      immediate: false,
    }
  },
  methods: {
    //渲染数据
    paging(callback) {
      this.Loading.tableLoading = true;
      this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount
      getListPageSafety(this.PageListParams, this.URL + '/list-page').then(res => {
        this.tableData = res.items
        this.totalCount = res.totalCount
          this.pagingCallback(callback)
      }).catch(err => {
        this.Loading.tableLoading = false
      })
    },
    //点击Table行内名称
    inlineDialog(val) {
      val.details = val.balancesDtos
      // 打开抽屉后，点击其他信息，默认回到详情位置上，避免特殊需要重新点击获取接口的tag页面数据不更新
      this.firstTabs = 'xq'
      //打开抽屉
      this.Loading.DrawerLoading = true
      this.displayDialog.detailsDialog = true;
      if (val.details) {
        // 前端分页处理
        this.tableDataDetails = JSON.parse(JSON.stringify(val))
        let linshiTableDataDetails = JSON.parse(JSON.stringify(this.tableDataDetails))
        this.totalCountDetails = val.details.length
        // 删除除当前页面最大数以外数据
        linshiTableDataDetails.details.splice(this.MaxResultCountDetails,this.totalCountDetails); 
        this.propsData = linshiTableDataDetails
      } else {
        this.propsData = {}
      }
      this.inlineDialogCallback()
    },
    //设置指定行、列、具体单元格颜色
    cellStyle({row, column, rowIndex, columnIndex}){
      // 根据字段设置动态判断变色列
      const tableColumnsIndex = this.tableColumns.find((item) => (item.prop == 'safetyStock' && item.istrue))
      const tableColumnsArray = this.tableColumns.filter((item) => (item.istrue))
      let _index = 0 
      tableColumnsArray.filter((item,key) => {
        if(item.prop == 'safetyStock' && item.istrue){
          _index = key
          return
        }
      })
      if (tableColumnsIndex) {
        if (row.safetyStockStatus == 'Red' && columnIndex === _index) {
          return {'background':'#B22222','color':'#fff'}
        } else if (row.safetyStockStatus == 'Green' && columnIndex === _index) {
          return {'background':'#228B22','color':'#fff'}
        } else if (row.safetyStockStatus == 'Yellow' && columnIndex === _index) {
          return {'background':'#FFFF000','color':'#fff'}
        }
      }
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../styles/mainbasicData.scss";
</style>