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

<template>
  <div id="demandSummary">
    <div v-if="isList">
      <el-form class="search_area" label-width="120px">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="行状态">
              <el-select multiple v-model="queryParams.rowStatus" size="small" style="width: 200px" clearable>
                <el-option v-for="dict in dict.type.sys_row_status" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="采购员">
              <el-select size="small" v-model="queryParams.buyerName" @focus="chooseRefer('CONTACTS_PARAM', true, '采购员')" style="width: 200px">
                <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="品类">
              <el-select
              v-model="queryParams.materialName"
              size="small"
              clearable
              @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '选择品类')"
              style="width: 200px"
              >
              <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="生产厂家">
              <el-input
              v-model="queryParams.manufacturer"
              size="small"
              clearable
              style="width: 200px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="" label-width="20px">
              <el-button type="primary" size="small" icon="el-icon-search" plain @click="search">搜索</el-button>
              <el-button size="small" icon="el-icon-refresh" plain @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <CollapseTransition>
        <div v-show="expanded">
          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-form-item label="预测分类">
                <el-select v-model="queryParams.forecastClassification" size="small" style="width: 200px" clearable>
                  <el-option
                    v-for="dict in dict.type.predictive_classify" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="周期单位">
                <el-select v-model="queryParams.periodUnit" size="small" style="width: 200px" clearable>
                  <el-option
                    v-for="dict in dict.type.sys_period_unit" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="业务部门">
                <el-select size="small" v-model="queryParams.departmentName" @focus="chooseRefer('DEPT_PARAM', true, '业务部门')" style="width: 200px">
                  <el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="审核人">
                <el-select size="small" v-model="queryParams.puManagerAuditor" @focus="chooseRefer('CONTACTS_PARAM', true, '审核人')" style="width: 200px">
                  <el-option v-for="item in auditOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <!-- <el-col :span="1.5">
              <el-form-item label="转请购单号">
                <el-input
                v-model="queryParams.zqgdh"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="1.5">
              <el-form-item label="采购需求单号">
                <el-input
                v-model="queryParams.code"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="注册人">
                <el-input
                v-model="queryParams.registrant"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="业务类型">
                <el-select v-model="queryParams.businessType" size="small" style="width: 200px" clearable>
                  <el-option
                    v-for="dict in dict.type.sys_business" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-form-item label="单据来源">
                <el-select v-model="queryParams.billSource" size="small" style="width: 200px" clearable>
                  <el-option
                    v-for="dict in dict.type.sys_bill_source" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="需求客户">
                <el-select size="small" v-model="queryParams.customer" @focus="chooseRefer('CUSTOMER_PARAM', true, '需求客户')" style="width: 200px">
                  <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="末级供应仓库">
                <el-select size="small" v-model="queryParams.lastWarehouse" @focus="chooseRefer('WAREHOUSE_PARAM', true, '末级供应仓库')" style="width: 200px">
                  <el-option v-for="item in lastWarehouseOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="末级供应库位">
                <el-select size="small" v-model="queryParams.lastAllocation" @focus="chooseRefer('ALLOCATION_PARAM', true, '末级供应库位')" style="width: 200px">
                  <el-option v-for="item in lastAllocationOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-form-item label="物料编码">
                <el-input readonly size="small" v-model="queryParams.names" style="width: 200px">
                  <el-button size="small" slot="append" icon="el-icon-more" @click="chooseMaterial"></el-button>
                </el-input>
                <el-input v-show="false" v-model="queryParams.materialCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="默认采购组织">
                <el-select size="small" v-model="queryParams.purchaseOrg" @focus="chooseRefer('ORG_PARAM', true, '默认采购组织')" style="width: 200px">
                  <el-option v-for="item in orgOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="需求日期">
                <el-date-picker
                  v-model="queryParams.demandDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="1.5">
              <el-form-item label="转请购时间">
                <el-select v-model="queryParams.ywlx" size="small" style="width: 200px" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>

          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-form-item label="汇总审核时间">
                <el-date-picker
                  v-model="queryParams.auditTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="汇总确认时间">
                <el-date-picker
                  v-model="queryParams.yesTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        </CollapseTransition>
      </el-form>
      <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
    
      <el-card>
        <div class="btn_grooup">
          <el-button type="primary" size="small" @click="editList">编辑</el-button>
          <el-button type="primary" size="small" @click="saveList">保存</el-button>
          <el-button type="primary" size="small" @click="confirms">确认</el-button>
          <el-button type="primary" size="small" @click="cancels">取消</el-button>
          <el-button type="primary" size="small" @click="audits">审核</el-button>
          <el-button type="primary" size="small" @click="cancelAudits">弃审</el-button>

          <el-dropdown size="small" @command="handleCommand">
            <el-button size="small" type="primary" style="margin: 0 10px;">
              导出<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
              <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!-- <el-button type="primary" size="small">转请购</el-button> -->
        </div>
        <el-table 
          :data="tableList" 
          fit
          show-summary
          max-height="480"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="一级品类" align="center" prop="materialClassifyOneName" width="120px"/>
          <el-table-column label="物料编码" align="center" prop="materialCode" width="180px"/>
          <el-table-column label="品名" align="center" prop="materialName" width="180px"/>
          <el-table-column label="规格" align="center" prop="specification" width="200px"/>
          <el-table-column label="单位" align="center" prop="unit"/>
          <el-table-column label="生产厂家/代理人" align="center" prop="manufacturer" width="180px"/>
          <el-table-column label="需求单位数" align="center" prop="demandNum" width="120px"/>
          <el-table-column label="总最终净需求量" align="center" prop="netDemandNum" width="120px"/>
          <el-table-column label="总月销量" align="center" prop="totalMonthlySales"/>
          <el-table-column label="需求可用周期" align="center" prop="demandCycle" width="180px"/>
          <el-table-column label="呆滞量" align="center" prop="dullQut"/>
          <el-table-column label="采购周期" align="center" prop="buyPeriod"/>
          <el-table-column label="中心公共库存" align="center" prop="centralPublicStock" width="120px"/>
          <el-table-column label="中心仓专属货位" align="center" prop="centralWarehouse" width="120px"/>
          <el-table-column label="区域分仓公共库存" align="center" prop="regionPublicStock" width="130px"/>
          <el-table-column label="各项目仓库存" align="center" prop="eachWarehouseStock" width="120px"/>
          <el-table-column label="电商仓库" align="center" prop="commerceWarehouse"/>
          <el-table-column label="采购在途" align="center" prop="buyTransit"/>
          <el-table-column label="借出在途" align="center" prop="lendTransit"/>
          <el-table-column label="调拨在途" align="center" prop="transferTransit"/>
          <el-table-column label="库存总计" align="center" prop="stockTotal"/>
          <el-table-column label="最小包装量" align="center" prop="minPackage" width="100px"/>
          <el-table-column label="最小订货量" align="center" prop="minOrder" width="100px"/>
          <el-table-column label="最小批量" align="center" prop="minBatch"/>
          <el-table-column label="人工调整数" align="center" prop="artificialAdjust" width="100px"/>
          <el-table-column label="修改原因" align="center" prop="modifyReason" width="150px">
            <template slot-scope="scope">
                <el-input :disabled="lineDisable" v-model="scope.row.modifyReason"/>
            </template>
          </el-table-column>
          <el-table-column label="建议采购量" align="center" prop="suggestionPurchase" width="100px"/>
          <el-table-column label="建议净采购量" align="center" prop="suggestBuyQty" width="100px"/>
          <el-table-column label="最终采购量" align="center" prop="finalBuyQty" width="150">
            <template slot-scope="scope">
                <el-input :disabled="lineDisable" v-model="scope.row.finalBuyQty"/>
            </template>
          </el-table-column>
          <el-table-column label="二级品类" align="center" prop="materialClassifyTwoName" width="150px"/>
          <el-table-column label="三级品类" align="center" prop="materialClassifyThreeName" width="150px"/>
          <el-table-column label="四级品类" align="center" prop="materialClassifyFourName" width="150px"/>
          <el-table-column label="单据状态" align="center" prop="status"/>
          <el-table-column label="采购员" align="center" prop="buyerName" width="120px">
            <template slot-scope="scope">
                <el-input :disabled="lineDisable" v-model="scope.row.buyerName"/>
            </template>
          </el-table-column>
          <el-table-column label="默认采购组织" align="center" prop="purchaseOrgName" width="280px">
            <template slot-scope="scope">
                <el-input :disabled="lineDisable" v-model="scope.row.purchaseOrgName"/>
            </template>
          </el-table-column>
          <el-table-column label="有效期" align="center" prop="validityPeriod"/>
          <el-table-column label="有效期单位" align="center" prop="validityPeriodUnit" width="100px"/>
          <el-table-column label="业务类型" align="center" prop="businessType"/>
          <el-table-column label="安全库存量" align="center" prop="safetyStock" width="100px"/>
          <el-table-column label="单据来源" align="center" prop="billSource"/>
          <el-table-column label="行号" align="center" prop="rowNo"/>
          <el-table-column label="注册人" align="center" prop="registrant"/>
          <el-table-column label="可用量" align="center" prop="qty"/>
          <el-table-column label="总需与终采差异" align="center" prop="buyDiscrepancy" width="120px"/>
          <el-table-column label="集团预测分类" align="center" prop="forecastClassification" width="100px"/>
          <el-table-column label="中心仓占有量" align="center" prop="centerBinPossession" width="100px"/>
          <el-table-column label="中心仓可用量" align="center" prop="centralWarehouseAvailable" width="100px"/>
          <el-table-column label="物料类别" align="center" prop="materialCategory" width="150px"/>
          <el-table-column label="业务部门" align="center" prop="departmentName" width="150px"/>
          <el-table-column label="需求单位" align="center" prop="demandUnit"/>
          <el-table-column label="采购经理审核人" align="center" prop="puManagerAuditor" width="120px"/>
          <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="100"
          >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="check(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
        </el-pagination>
      </el-card>
    </div>

    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
  
    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>

    <TreeRefers ref="tree" @doSubmit="selectionsToInput2" :single="true"/>

    <popDialog ref="materialRefer" @doSubmit="selectMaterial" :single="true" />
  </div>
</template>

<script>
import Add from './add.vue'
import Refers from '@/components/Refers/refers.vue'
import TreeRefers from '@/components/Refers/treeRefer.vue'
import popDialog from '@/components/PopDialog/index.vue'
import CollapseTransition from '@/components/MyCollapse/collapse.vue'
import {getSummaryList, auditSummary, confirmSummary , cancelSummary , cancelAuditSummary, editSummaryList } from '@/api/purchase/DemandSummary.js'
export default {
  name: 'demandSummary',
  dicts: ['sys_row_status', 'predictive_classify', 'sys_period_unit', 'sys_business', 'sys_bill_source'],
  components: {
    Add,
    CollapseTransition,
    Refers,
    TreeRefers,
    popDialog
  },
  data() {
    return {
      expanded: false,
      // 页面配置
      isList: true,
      // 页面状态
      page: '',
      queryParams: {
        rowStatus: [],
        buyerName: '',
        materialName: '',
        manufacturer: '',
        forecastClassification: '',
        periodUnit: '',
        departmentName: '',
        puManagerAuditor: '',
        // zqgdh: '',
        code: '',
        registrant: '',
        businessType: '',
        billSource: '',
        customer: '',
        lastWarehouse: '',
        lastAllocation: '',
        materialCode: '',
        names: '',
        purchaseOrg: '',
        demandDate: '',
        auditTime: '',
        yesTime: '',
        pageNum: 1,
        pageSize: 10
      },
      personOptions: [],
      classOptions: [],
      deptOptions: [],
      auditOptions: [],
      customerOptions: [],
      lastWarehouseOptions: [],
      lastAllocationOptions: [],
      orgOptions: [],
      options: [{
        value: '0', label: '是',
      }, {
        value: '2', label: '否'
      }],
      referCondition: {
        type: '',
        isPage: true,
        title: ''
      },
      tableList: [],
      total: 0,
      rowDetail: {},
      disable: false,
      lineDisable: true,
      ids: [],
      allSelection: [],
    }
  },
  created() {
    this.getList(this.queryParams)
  },
  methods: {
    // 搜索
    search() {
      this.getList(this.queryParams)
    },
    reset() {
      this.queryParams = {
        rowStatus: [],
        buyerName: '',
        materialName: '',
        manufacturer: '',
        forecastClassification: '',
        periodUnit: '',
        departmentName: '',
        puManagerAuditor: '',
        // zqgdh: '',
        code: '',
        registrant: '',
        businessType: '',
        billSource: '',
        customer: '',
        lastWarehouse: '',
        lastAllocation: '',
        materialCode: '',
        names: '',
        purchaseOrg: '',
        demandDate: '',
        auditTime: '',
        yesTime: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getList(this.queryParams)
    },
    getList(params){
      getSummaryList(params).then(res => {
        if (res.code === 200) {
          this.tableList = res.rows
          this.total = res.total
        }
      })
    },
    handleSelectionChange(selection) {
      console.log('选中', selection)
      this.allSelection = selection
      this.ids = selection.map(item => item.demandItemId)
      console.log('选中数组', this.ids.join())
    },
    handleCommand(command) {
      alert(command)
    },
    check(row) {
      this.isList = false
      this.page = 'check'
      this.rowDetail = row
      this.disable = true
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val
      this.getList(this.queryParams)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val
      this.getList(this.queryParams)
    },
    drop() {
      this.expanded = !this.expanded
    },
    editList() {
      console.log('Lists`````',this.tableList)
      this.lineDisable = false
    },
    saveList() {
      editSummaryList(this.tableList).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("保存成功");
          this.lineDisable = true
          this.getList(this.queryParams)
        }
      })
    },
    confirms() {
      if (this.ids.length == 0) {
        this.$modal.msgWarning("请选中至少一条数据");
      } else {
        confirmSummary(this.allSelection).then(res => {
          this.$modal.msgSuccess("确认成功");
          this.getList(this.queryParams)
        })
      }
    },
    cancels() {
      if (this.ids.length == 0) {
        this.$modal.msgWarning("请选中至少一条数据");
      } else {
        let param = this.ids.join()
        cancelSummary(param).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("取消成功");
            this.getList(this.queryParams)
          }
        })
      }
    },
    audits() {
      if(this.ids.length == 0) {
        this.$modal.msgWarning("请选中至少一条数据");
      } else {
        let param = this.ids.join()
        auditSummary(param).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("审核成功");
            this.getList(this.queryParams)
          }
        })
      }
    },
    cancelAudits() {
      if (this.ids.length == 0) {
        this.$modal.msgWarning("请选中至少一条数据");
      } else {
        let param = this.ids.join()
        cancelAuditSummary(param).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("操作成功");
            this.getList(this.queryParams)
          }
        })
      } 
    },
    // 搜索区参照选择
    chooseRefer(type, isPage, title) {
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.refer.init(this.referCondition)
    },
    selectionsToInput(selection) {
      if (this.referCondition.title == '采购员') {
        this.personOptions = selection
        this.queryParams.buyerName = selection[0].id
      }
      if (this.referCondition.title == '业务部门') {
        this.deptOptions = selection
        this.queryParams.departmentName = selection[0].id
      }
      if (this.referCondition.title == '审核人') {
        this.auditOptions = selection
        this.queryParams.puManagerAuditor = selection[0].id
      }
      if (this.referCondition.title == '需求客户') {
        this.customerOptions = selection
        this.queryParams.customer = selection[0].id
      }
      if (this.referCondition.title == '末级供应仓库') {
        this.lastWarehouseOptions = selection
        this.queryParams.lastWarehouse = selection[0].id
      }
      if (this.referCondition.title == '末级供应库位') {
        this.lastAllocationOptions = selection
        this.queryParams.lastAllocation = selection[0].id
      }
      if (this.referCondition.title == '默认采购组织') {
        this.orgOptions = selection
        this.queryParams.purchaseOrg = selection[0].id
      }
    },
    // 搜索区树形选择
    chooseTreeRefer(type, isPage, title) {
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.tree.init(this.referCondition)
    },
    selectionsToInput2(selection) {
      this.classOptions.push(selection)
      this.queryParams.materialName = selection.id
    },
    // 搜索区物料编码
    chooseMaterial() {
      this.$refs.materialRefer.init()
    },
    selectMaterial(selection) {
      this.queryParams.materialCode = selection[0].id
      this.queryParams.names = selection[0].name
    }
  }
}
</script>

<style lang="scss" scoped>
#demandSummary {
  height: calc(100vh - 84px);
  padding: 12px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.lines {
  margin-top: 0;
}
.hang {
  margin: auto;
}
.hang ::v-deep .el-form-item__content{
  margin-left: 0px !important;
}
</style>