drp-ui/src/views/purchase/DemandSummary/colTol.vue

<template>
  <div class="colTol">
    <el-drawer
      title="隐藏列"
      :visible.sync="open"
      direction="rtl"
      @close='upIsShow'
      size="20%">
      <transition name="fade">
        <div class="columnOption">
          <div class="content">
            <el-row v-for="(item, index) in arrs" :key="index" style="font-size: 14px;font-weight: bold;margin-bottom: 10px;padding: 0 20px;">
              <el-col :span="18">
                <span>{{item.label}}</span>
              </el-col>
              <el-col :span="6">
                <el-switch size="mini" v-model="prop[item.prop]"></el-switch>
              </el-col>
            </el-row>
              <!-- <el-switch v-model="prop.materialClassifyOneName">一级品类</el-switch>
              <el-switch v-model="prop.materialCode">物料编码</el-switch>
              <el-switch v-model="prop.materialName">品名</el-switch>
              <el-switch v-model="prop.specification">规格</el-switch>
              <el-switch v-model="prop.unit">单位</el-switch>
              <el-switch v-model="prop.manufacturer">生产厂家/代理人</el-switch>
              <el-switch v-model="prop.demandNum">需求单位数</el-switch>
              <el-switch v-model="prop.evensalesforyear">近1月月均需求</el-switch>
              <el-switch v-model="prop.evensalesforthrmonth">近3月月均需求</el-switch>
              <el-switch v-model="prop.netDemandNum">总最终净需求量</el-switch>
              <el-switch v-model="prop.totalMonthlySales">总月销量</el-switch>
              <el-switch v-model="prop.demandCycle">需求可用周期</el-switch>
              <el-switch v-model="prop.dullQut">呆滞量</el-switch>
              <el-switch v-model="prop.buyPeriod">采购周期</el-switch>
              <el-switch v-model="prop.centralPublicStock">中心公共库存</el-switch>
              <el-switch v-model="prop.centralWarehouse">中心仓专属货位</el-switch>
              <el-switch v-model="prop.regionPublicStock">区域分仓公共库存</el-switch>
              <el-switch v-model="prop.eachWarehouseStock">各项目仓库存</el-switch>
              <el-switch v-model="prop.commerceWarehouse">电商仓库</el-switch>
              <el-switch v-model="prop.buyTransit">采购在途</el-switch>
              <el-switch v-model="prop.lendTransit">借出在途</el-switch>
              <el-switch v-model="prop.transferTransit">调拨在途</el-switch>
              <el-switch v-model="prop.stockTotal">库存总计</el-switch>
              <el-switch v-model="prop.minPackage">最小包装量</el-switch>
              <el-switch v-model="prop.minOrder">最小订货量</el-switch>
              <el-switch v-model="prop.minBatch">最小批量</el-switch>
              <el-switch v-model="prop.artificialAdjust">人工调整数</el-switch>
              <el-switch v-model="prop.modifyReason">修改原因</el-switch>
              <el-switch v-model="prop.suggestionPurchase">建议采购量</el-switch>
              <el-switch v-model="prop.finalBuyQty">最终采购量</el-switch>
              <el-switch v-model="prop.materialClassifyTwoName">二级品类</el-switch>
              <el-switch v-model="prop.materialClassifyThreeName">三级品类</el-switch>
              <el-switch v-model="prop.materialClassifyFourName">四级品类</el-switch>
              <el-switch v-model="prop.buyerName">采购员</el-switch>
              <el-switch v-model="prop.purchaseOrgName">默认采购组织</el-switch>
              <el-switch v-model="prop.validityPeriod">有效期</el-switch>
              <el-switch v-model="prop.validityPeriodUnit">有效期单位</el-switch>
              <el-switch v-model="prop.businessType">业务类型</el-switch>
              <el-switch v-model="prop.safetyStock">安全库存量</el-switch>
              <el-switch v-model="prop.billSource">单据来源</el-switch>
              <el-switch v-model="prop.registrant">注册人</el-switch>
              <el-switch v-model="prop.buyDiscrepancy">总需与终采差异</el-switch>
              <el-switch v-model="prop.forecastClassification">集团预测分类</el-switch>
              <el-switch v-model="prop.centerBinPossession">中心仓占有量</el-switch>
              <el-switch v-model="prop.centralWarehouseAvailable">中心仓可用量</el-switch>
              <el-switch v-model="prop.puManagerAuditor">采购经理审核人</el-switch> -->
            </div>
            <!-- <div class="footer">
              <el-button size="mini" type="primary" plain @click="saveColumn"
                >确认</el-button
              >
            </div> -->
        </div>
      </transition>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    showColumn: {
      type: Object,
      default: {}
    },
    arrs: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      open: false,
      // 列的配置化对象，存储配置信息
      prop: {},
      column: {
        status: true,
        materialClassifyOneName: true,
        materialCode: true,
        materialName: true,
        specification: true,
        unit: true,
        manufacturer: true,
        demandNum: true,
        evensalesforyear: true,
        evensalesforthrmonth: true,
        netDemandNum: true,
        totalMonthlySales: true,
        demandCycle: true,
        dullQut: true,
        buyPeriod: true,
        centralPublicStock: true,
        centralWarehouse: true,
        regionPublicStock: true,
        eachWarehouseStock: true,
        commerceWarehouse: true,
        buyTransit: true,
        lendTransit: true,
        transferTransit: true,
        stockTotal: true,
        minPackage: true,
        minOrder: true,
        minBatch: true,
        artificialAdjust: true,
        modifyReason: true,
        suggestionPurchase: true,
        finalBuyQty: true,
        materialClassifyTwoName: true,
        materialClassifyThreeName: true,
        materialClassifyFourName: true,
        buyerName: true,
        purchaseOrgName: true,
        validityPeriod: true,
        validityPeriodUnit: true,
        businessType: true,
        safetyStock: true,
        billSource: true,
        registrant: true,
        buyDiscrepancy: true,
        forecastClassification: true,
        centerBinPossession: true,
        centralWarehouseAvailable: true,
        puManagerAuditor: true,
      },
    }
  },
  mounted() {
    // 发请求得到checkListInitData的列的名字
    if(localStorage.getItem("columnSet")){
      this.prop = JSON.parse(localStorage.getItem("columnSet"))
    }else{
      this.prop = {
        status: true,
        materialClassifyOneName: true,
        materialCode: true,
        materialName: true,
        specification: true,
        unit: true,
        manufacturer: true,
        demandNum: true,
        evensalesforyear: true,
        evensalesforthrmonth: true,
        netDemandNum: true,
        totalMonthlySales: true,
        demandCycle: true,
        dullQut: true,
        buyPeriod: true,
        centralPublicStock: true,
        centralWarehouse: true,
        regionPublicStock: true,
        eachWarehouseStock: true,
        commerceWarehouse: true,
        buyTransit: true,
        lendTransit: true,
        transferTransit: true,
        stockTotal: true,
        minPackage: true,
        minOrder: true,
        minBatch: true,
        artificialAdjust: true,
        modifyReason: true,
        suggestionPurchase: true,
        finalBuyQty: true,
        materialClassifyTwoName: true,
        materialClassifyThreeName: true,
        materialClassifyFourName: true,
        buyerName: true,
        purchaseOrgName: true,
        validityPeriod: true,
        validityPeriodUnit: true,
        businessType: true,
        safetyStock: true,
        billSource: true,
        registrant: true,
        buyDiscrepancy: true,
        forecastClassification: true,
        centerBinPossession: true,
        centralWarehouseAvailable: true,
        puManagerAuditor: true,
      };
    }
  },
  methods: {
    upIsShow() {
      this.$emit('update:isVisible',false)//修改isDrawer的值
    },
    //设置列的 显示/隐藏
	  changeShow(item) {
      item.show = !item.show
    },
    // showColumnOption() {
    //   this.isShowColumn = true;
    // },
    saveColumn() {
      localStorage.setItem("columnSet",JSON.stringify(this.prop))
      // this.isShowColumn = false;
      this.upIsShow()
    },
  },
  watch: {
    isVisible: {
      handler(newValue) {
        this.open = newValue
      }
    },
    // 监听复选框配置列所有的变化
    prop: {
      handler: function (newnew, oldold) {
        console.log('新值',newnew);
        console.log('获取到表头没有？', this.arrs)
        this.column = newnew;
        this.$emit('update:showColumn', this.column)
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$emit('reDraw')
        });
      },
      deep: true,
      immediate: true
    },
  }
}
</script>