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="danger" size="small" v-if="!lineDisable" @click="cancelEdit">取消编辑</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 show-overflow-tooltip type="selection" width="55" />
        <el-table-column show-overflow-tooltip label="序号" align="center" type="index"/>
        <el-table-column show-overflow-tooltip label="行号" align="center" prop="rowNo"/>
        <el-table-column show-overflow-tooltip label="行状态" align="center" prop="status" width="120px" :formatter="hangStatus"/>
        <el-table-column show-overflow-tooltip label="物料编码" align="center" prop="materialCode"/>
        <el-table-column show-overflow-tooltip label="品名" align="center" prop="materialName" width="180"/>
        <el-table-column show-overflow-tooltip label="规格" align="center" prop="specification"/>
        <el-table-column show-overflow-tooltip label="单位" align="center" prop="unit"/>
        <el-table-column show-overflow-tooltip label="生产厂家/代理人" align="center" prop="manufacturer" width="150"/>
        <el-table-column show-overflow-tooltip label="末级供应仓库存量" align="center" prop="lastWarehouseQty" width="150"/>
        <el-table-column show-overflow-tooltip label="月销量" align="center" prop="totalMonthlySales"/>
        <el-table-column show-overflow-tooltip label="采购周期" align="center" prop="buyPeriod"/>
        <el-table-column show-overflow-tooltip label="最终净需求量" align="center" prop="resDemandQty" width="150"/>
        <el-table-column show-overflow-tooltip label="最终采购量" align="center" prop="puQtyRes" width="150"/>
        <el-table-column show-overflow-tooltip label="需求客户" align="center" prop="customerName"/>
        <el-table-column show-overflow-tooltip label="最小订货量" align="center" prop="minOrderQty" width="150"/>
        <el-table-column show-overflow-tooltip label="最小包装量" align="center" prop="minPackage" width="150"/>
        <el-table-column show-overflow-tooltip label="最小批量" align="center" prop="minBatch" width="150"/>
        <el-table-column show-overflow-tooltip label="修改人" align="center" prop="updateByName" width="150"/>
        <el-table-column show-overflow-tooltip label="修改原因" align="center" prop="updateCause" width="150"/>
        <el-table-column show-overflow-tooltip label="业务备注" align="center" prop="remark" width="150"/>
        <el-table-column show-overflow-tooltip label="有效期" align="center" prop="expiry" width="150"/>
        <el-table-column show-overflow-tooltip label="要求交货日期" align="center" prop="deliveryDate" width="150"/>
        <el-table-column show-overflow-tooltip 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 show-overflow-tooltip 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 show-overflow-tooltip label="需求单单号" align="center" prop="code" width="150"/>
        <el-table-column show-overflow-tooltip label="供应仓库" align="center" prop="lastWarehouseName" width="150"/>
        <el-table-column show-overflow-tooltip label="供应货位" align="center" prop="lastAllocationName" width="150"/>
        <el-table-column show-overflow-tooltip label="业务类型" align="center" prop="billType" width="150"/>
        <el-table-column show-overflow-tooltip label="行状态" align="center" prop="status" width="150"/>
        <el-table-column show-overflow-tooltip label="收货仓库" align="center" prop="deliveryWarehouseName" width="150"/>
        <el-table-column show-overflow-tooltip label="收货货位" align="center" prop="deliveryAllocationName" width="150"/>
        <el-table-column show-overflow-tooltip label="采购员" align="center" prop="buyerName" width="150"/>
        <el-table-column show-overflow-tooltip label="制单人" align="center" prop="billMaker" width="150"/>
        <el-table-column show-overflow-tooltip label="审核人员" align="center" prop="approver" width="150"/>
        <!-- <el-table-column show-overflow-tooltip label="请购单号" align="center" prop="code"/> -->
        <el-table-column show-overflow-tooltip label="品类" align="center" prop="materialCategory" width="150"/>
        <el-table-column show-overflow-tooltip label="注册人" align="center" prop="registrant" width="150"/>
        <el-table-column show-overflow-tooltip label="集团预测分类" align="center" prop="forecastClassify" width="150"/>
        <el-table-column show-overflow-tooltip label="修改时间" align="center" prop="updateTime" width="150"/>
        <el-table-column show-overflow-tooltip label="采购员编码" align="center" prop="buyer" width="150"/>
        <el-table-column show-overflow-tooltip label="采购组织" align="center" prop="orgName" width="150"/>
        <el-table-column show-overflow-tooltip label="有效期单位" align="center" prop="expiryUnit" width="150"/>
        <!-- <el-table-column show-overflow-tooltip label="业务部门" align="center" prop="businessDeptName"/> -->
        <el-table-column show-overflow-tooltip label="需求部门" align="center" prop="demandDeptName" width="150"/>
        <el-table-column show-overflow-tooltip label="批号锁定标识" align="center" prop="isBatchLock" width="150">
          <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 show-overflow-tooltip label="采购需求单审批人" align="center" prop="approveName" width="150"/>
        <el-table-column show-overflow-tooltip label="需求单审批时间" align="center" prop="approverFinishTime" width="150"/>
        <el-table-column show-overflow-tooltip label="需求单提交时间" align="center" prop="createTime" width="150"/>
        <el-table-column show-overflow-tooltip label="需求单提交人" align="center" prop="createByName" width="150"/>
        <!-- <el-table-column show-overflow-tooltip label="处理需求时间" align="center" prop="processTime"/> -->
        <!-- <el-table-column show-overflow-tooltip label="处理需求人员" align="center" prop="processPersonal"/> -->
        <el-table-column show-overflow-tooltip label="处理确认人" align="center" prop="affirmer" width="150"/>
        <el-table-column show-overflow-tooltip label="处理确认时间" align="center" prop="affirmerTime" width="150"/>
        <!-- <el-table-column show-overflow-tooltip label="转请购时间" align="center" prop="code"/>
        <el-table-column show-overflow-tooltip label="转请购人员" align="center" prop="code"/> -->
        <el-table-column show-overflow-tooltip label="价格类型" align="center" prop="priceType" width="150" :formatter="priceClass"/>
      </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{
      hangStatus(row) {
        switch (row.status) {
          case '0':
            return '需补货'
          case '1':
            return '待计划确认'
          case '2':
            return '计划已确认'
          case '3':
            return '计划已审核'
          case '4':
            return '行关闭'
          case '5':
            return '总供应可满足'
        }
      },
      priceClass(row) {
        switch (row.priceType) {
          case 'order':
            return '订货价'
          case 'consignment':
            return '寄售价'
          case 'adjusted':
            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
    },
    cancelEdit() {
      this.lineDisable = true
    },
    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>