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

<template>
  <div id="checkDemandSummary">
    <el-card>
      <span>采购需求汇总详情</span>
      <div class="btn_grooup">
        <el-button type="primary" size="small">编辑</el-button>
        <el-button type="primary" size="small">确定</el-button>
        <el-button type="primary" size="small" @click="closeLine">行关闭</el-button>
        <el-button type="primary" size="small">重取批量</el-button>
      </div>

      <el-table 
          :data="tableList" 
          fit
          max-height="680"
          @selection-change="handleSelectionChange"
        >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" align="center" prop="index"/>
        <el-table-column label="行号" align="center" prop="rowNo"/>
        <el-table-column label="物料编码" align="center" prop="code"/>
        <el-table-column label="品名" align="center" prop="code"/>
        <el-table-column label="规格" align="center" prop="code"/>
        <el-table-column label="单位" align="center" prop="code"/>
        <el-table-column label="生产厂家/代理人" align="center" prop="manufacturer"/>
        <el-table-column label="末级供应仓库库存量" align="center" prop="code"/>
        <el-table-column label="月销量" align="center" prop="code"/>
        <el-table-column label="采购周期" align="center" prop="code"/>
        <el-table-column label="最终净需求量" align="center" prop="code"/>
        <el-table-column label="最终采购量" align="center" prop="code"/>
        <el-table-column label="需求客户" align="center" prop="code"/>
        <el-table-column label="最小订货量" align="center" prop="code"/>
        <el-table-column label="最小包装量" align="center" prop="code"/>
        <el-table-column label="修改人" align="center" prop="code"/>
        <el-table-column label="修改原因" align="center" prop="code"/>
        <el-table-column label="业务备注" align="center" prop="code"/>
        <el-table-column label="有效期" align="center" prop="code"/>
        <el-table-column label="要求交货日期" align="center" prop="code"/>
        <el-table-column label="紧急标识" align="center" prop="code"/>
        <el-table-column label="补单标识" align="center" prop="code"/>
        <el-table-column label="需求单单号" align="center" prop="code"/>
        <el-table-column label="供应仓库" align="center" prop="code"/>
        <el-table-column label="供应库位" align="center" prop="code"/>
        <el-table-column label="业务类型" align="center" prop="code"/>
        <el-table-column label="行状态" align="center" prop="code"/>
        <el-table-column label="收货仓库" align="center" prop="code"/>
        <el-table-column label="收货货位" align="center" prop="code"/>
        <el-table-column label="采购员" align="center" prop="code"/>
        <el-table-column label="制单人" align="center" prop="code"/>
        <el-table-column label="审核人员" align="center" prop="code"/>
        <el-table-column label="请购单号" align="center" prop="code"/>
        <el-table-column label="品类" align="center" prop="code"/>
        <el-table-column label="注册人" align="center" prop="code"/>
        <el-table-column label="集团预测分类" align="center" prop="code"/>
        <el-table-column label="修改时间" align="center" prop="code"/>
        <el-table-column label="采购员编码" align="center" prop="code"/>
        <el-table-column label="采购组织" align="center" prop="code"/>
        <el-table-column label="物料类别" align="center" prop="code"/>
        <el-table-column label="有效期单位" align="center" prop="code"/>
        <el-table-column label="最小批量" align="center" prop="code"/>
        <el-table-column label="业务部门" align="center" prop="code"/>
        <el-table-column label="需求部门" align="center" prop="code"/>
        <el-table-column label="批号锁定标识" align="center" prop="code"/>
        <el-table-column label="采购需求单审批人" align="center" prop="code"/>
        <el-table-column label="需求单审批时间" align="center" prop="code"/>
        <el-table-column label="需求单提交时间" align="center" prop="code"/>
        <el-table-column label="需求单提交人" align="center" prop="code"/>
        <el-table-column label="处理需求时间" align="center" prop="code"/>
        <el-table-column label="处理需求人员" align="center" prop="code"/>
        <el-table-column label="汇总确认人" align="center" prop="code"/>
        <el-table-column label="汇总确认时间" align="center" prop="code"/>
        <el-table-column label="转请购时间" align="center" prop="code"/>
        <el-table-column label="转请购人员" align="center" prop="code"/>
        <el-table-column label="价格类型" align="center" prop="code"/>
      </el-table>
    </el-card>

    <div class="btn_group">
      <el-col :span="1.5">
        <el-button size="small" plain @click="back">返回</el-button>
      </el-col>
    </div>
  </div>
</template>

<script>
import {getSummaryDetail, shutDownSummary } from '@/api/purchase/DemandSummary.js'
export default {
  name: 'checkDemandSummary',
  props: ['pageStu','row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return{
      tableList: [],
      ids: []
    }
  },
  created() {
    if(this.pageStu == 'check') {
      console.log('数据', this.row)
      this.getDetails(this.row)
    } else if(this.pageStu == 'edit') {
      this.getDetails(this.row)
    }
  },
  methods: {
    handleSelectionChange(selection) {
      console.log('选中', selection)
      this.ids = selection.map(item => item.demandItemId)
      console.log('选中数组', this.ids.join())
    },
    back() {
      this.$emit('jugislist', true)
      let queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.$emit('refresh', queryParams)
    },
    // 如果需要回显则调用详情接口
    getDetails(row) {
      getSummaryDetail(row).then(res => {
        if (res.code === 200) {
          this.tableList = res.data
        }
      })
    },
    // 行关闭
    closeLine() {
      if (this.ids.length == 0) {
        this.$modal.msgWarning("请选中至少一条数据");
      } else {
        let param = this.ids.join()
        shutDownSummary(param).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("取消成功");
            this.getDetails(this.row)
          }
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
 .btn_group {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
} 
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
} 
</style>