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" @click="editLine">编辑</el-button>
        <el-button type="success" size="small" v-if="!lineDisable" @click="saveLine">保存</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" type="index"/>
        <el-table-column label="行号" align="center" prop="rowNo"/>
        <el-table-column label="物料编码" align="center" prop="materialCode"/>
        <el-table-column label="品名" align="center" prop="materialName"/>
        <el-table-column label="规格" align="center" prop="specification"/>
        <el-table-column label="单位" align="center" prop="unit"/>
        <el-table-column label="生产厂家/代理人" align="center" prop="manufacturer"/>
        <el-table-column label="末级供应仓库存量" align="center" prop="lastWarehouseQty"/>
        <el-table-column label="月销量" align="center" prop="totalMonthlySales"/>
        <el-table-column label="采购周期" align="center" prop="buyPeriod"/>
        <el-table-column label="最终净需求量" align="center" prop="resDemandQty"/>
        <el-table-column label="最终采购量" align="center" prop="puQtyRes"/>
        <el-table-column label="需求客户" align="center" prop="customerName"/>
        <el-table-column label="最小订货量" align="center" prop="minOrderQty"/>
        <el-table-column label="最小包装量" align="center" prop="minPackage"/>
        <el-table-column label="最小批量" align="center" prop="minBatch"/>
        <el-table-column label="修改人" align="center" prop="updateByName"/>
        <el-table-column label="修改原因" align="center" prop="updateCause"/>
        <el-table-column label="业务备注" align="center" prop="remark"/>
        <el-table-column label="有效期" align="center" prop="expiry"/>
        <el-table-column label="要求交货日期" align="center" prop="deliveryDate"/>
        <el-table-column label="紧急标识" align="center" prop="isUrgency">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isUrgency"
              :disabled="lineDisable"
              active-value="Y"
              inactive-value="N"
              active-color="#13ce66"
              inactive-color="#a1a3a9">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="补单标识" align="center" prop="isReplenishment">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isReplenishment"
              :disabled="lineDisable"
              active-value="Y"
              inactive-value="N"
              active-color="#13ce66"
              inactive-color="#a1a3a9">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="需求单单号" align="center" prop="code"/>
        <el-table-column label="供应仓库" align="center" prop="lastWarehouseName"/>
        <el-table-column label="供应货位" align="center" prop="lastAllocationName"/>
        <el-table-column label="业务类型" align="center" prop="billType"/>
        <el-table-column label="行状态" align="center" prop="status"/>
        <el-table-column label="收货仓库" align="center" prop="deliveryWarehouseName"/>
        <el-table-column label="收货货位" align="center" prop="deliveryAllocationName"/>
        <el-table-column label="采购员" align="center" prop="buyerName"/>
        <el-table-column label="制单人" align="center" prop="billMaker"/>
        <el-table-column label="审核人员" align="center" prop="approver"/>
        <!-- <el-table-column label="请购单号" align="center" prop="code"/> -->
        <el-table-column label="品类" align="center" prop="materialCategory"/>
        <el-table-column label="注册人" align="center" prop="registrant"/>
        <el-table-column label="集团预测分类" align="center" prop="forecastClassify"/>
        <el-table-column label="修改时间" align="center" prop="updateTime"/>
        <el-table-column label="采购员编码" align="center" prop="buyer"/>
        <el-table-column label="采购组织" align="center" prop="orgName"/>
        <el-table-column label="有效期单位" align="center" prop="expiryUnit"/>
        <el-table-column label="业务部门" align="center" prop="businessDeptName"/>
        <el-table-column label="需求部门" align="center" prop="demandDeptName"/>
        <el-table-column label="批号锁定标识" align="center" prop="isBatchLock">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isBatchLock"
              :disabled="lineDisable"
              active-value="Y"
              inactive-value="N"
              active-color="#13ce66"
              inactive-color="#a1a3a9">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="采购需求单审批人" align="center" prop="approveName"/>
        <el-table-column label="需求单审批时间" align="center" prop="approverFinishTime"/>
        <el-table-column label="需求单提交时间" align="center" prop="createTime"/>
        <el-table-column label="需求单提交人" align="center" prop="createByName"/>
        <el-table-column label="处理需求时间" align="center" prop="processTime"/>
        <el-table-column label="处理需求人员" align="center" prop="processPersonal"/>
        <el-table-column label="汇总确认人" align="center" prop="affirmer"/>
        <el-table-column label="汇总确认时间" align="center" prop="affirmerTime"/>
        <!-- <el-table-column label="转请购时间" align="center" prop="code"/>
        <el-table-column label="转请购人员" align="center" prop="code"/> -->
        <el-table-column label="价格类型" align="center" prop="priceType"/>
      </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, editSummaryMx } from '@/api/purchase/DemandSummary.js'
export default {
  name: 'checkDemandSummary',
  props: ['pageStu','row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return{
      // 不能直接改变props传来的值
      sonPageStu: this.pageStu,
      sonDisable: this.disable,
      tableList: [],
      ids: [],
      lineDisable: true,
    }
  },
  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
        }
      })
    },
    editLine() {
      console.log('sonList`````', this.tableList)
      this.lineDisable = false
    },
    saveLine() {
      editSummaryMx(this.tableList).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("保存成功");
          this.lineDisable = true
          this.getDetails(this.row)
        }
      })
    },
    // 行关闭
    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>