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

<template>
  <div id="checkDemandSummary">
    <el-card style="position: relative;">
      <span>采购需求处理详情</span>
      <div class="btn_grooup">
        <el-button type="primary" size="mini" @click="editLine">编辑</el-button>
        <el-button type="danger" size="mini" v-if="!lineDisable" @click="cancelEdit">取消编辑</el-button>
        <el-button type="success" size="mini" v-if="!lineDisable" @click="saveLine">保存</el-button>
        <el-button type="primary" size="mini" v-if="lineDisable" @click="closeLine">行关闭</el-button>
        <el-button type="primary" size="mini" v-if="lineDisable" @click="reloadBatch">重取批量</el-button>
      </div>

      <el-table
          v-loading="loading"
          :data="tableList" 
          fit
          :cell-style="{ borderColor: '#c0c0c0' }"
          :header-cell-style="{ borderColor: '#c0c0c0' }"
          class="exporttable"
          border
          highlight-current-row
          max-height="580"
          style="font-size: 12px;"
          @selection-change="handleSelectionChange"
        >
        <el-table-column show-overflow-tooltip type="selection" fixed="left"/>
        <el-table-column show-overflow-tooltip label="序号" align="center" type="index" width="55" fixed="left"/>
        <el-table-column show-overflow-tooltip label="行号" align="center" prop="rowNo">
          <template slot-scope="scope">
            {{ scope.$index + 1 + '0' }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="行状态" align="center" prop="status" width="100px" :formatter="hangStatus"/>
        <el-table-column show-overflow-tooltip label="物料编码" align="center" prop="materialCode" width="120px"/>
        <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="manufacturerName" width="230"/>
        <!-- <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="puPeriod"/>
        <el-table-column show-overflow-tooltip label="最终净需求量" align="center" prop="resDemandQty" width="120"/>
        <el-table-column show-overflow-tooltip label="最终采购量" align="center" prop="puQtyRes" width="120"/>
        <el-table-column show-overflow-tooltip label="需求客户" align="center" prop="customerName" width="150"/>
        <el-table-column show-overflow-tooltip label="最小订货量" align="center" prop="minOrderQty" width="100"/>
        <el-table-column show-overflow-tooltip label="最小包装量" align="center" prop="minPackage" width="100"/>
        <el-table-column show-overflow-tooltip label="最小批量" align="center" prop="minBatch" width="100"/>
        <el-table-column show-overflow-tooltip label="修改人" align="center" prop="updateByName" width="100"/>
        <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="120"/>
        <el-table-column show-overflow-tooltip label="紧急标识" align="center" prop="isUrgency">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isUrgency"
              :disabled="scope.row.status !== '1' || 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="scope.row.status !== '1' || lineDisable"
              active-value="Y"
              inactive-value="N"
              @change="clean(scope.row, '选择补单供应商')"
              active-color="#13ce66"
              inactive-color="#a1a3a9">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="补单供应商" align="center"  prop="additionalSupplierName" width="200px">
          <template slot-scope="scope">
              <el-input clearable :disabled="scope.row.isReplenishment == 'N' || lineDisable" size="mini" v-model="scope.row.additionalSupplierName" @clear="clean(scope.row, '选择补单供应商')" @focus="chooseMxHW(scope.$index, 'SUPPLIER_PARAM', true, '选择补单供应商')">
                <el-button size="mini" :disabled="scope.row.isReplenishment == 'N' || lineDisable" slot="append" icon="el-icon-more" @click="chooseMxHW(scope.$index, 'SUPPLIER_PARAM', true, '选择补单供应商')"></el-button>
              </el-input>
          </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="100"/>
        <el-table-column show-overflow-tooltip label="供应货位" align="center" prop="lastAllocationName" width="120"/>
        <el-table-column show-overflow-tooltip label="默认采购组织" align="center" prop="orgName" width="250px">
          <template slot-scope="scope">
              <el-input :disabled="scope.row.status !== '1' || lineDisable" size="mini" v-model="scope.row.orgName" @clear="clean(scope.row, '默认采购组织')" @focus="chooseMxHW(scope.$index, 'ORG_PARAM', true, '默认采购组织')">
                <el-button size="mini" :disabled="scope.row.status !== '1' || lineDisable" slot="append" icon="el-icon-more" @click="chooseMxHW(scope.$index, 'ORG_PARAM', true, '默认采购组织')"></el-button>
              </el-input>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="业务类型" align="center" prop="billType" width="120" :formatter="formatterBillType"/>
        <el-table-column show-overflow-tooltip label="收货仓库" align="center" prop="deliveryWarehouseName" width="200">
            <template slot-scope="scope">
              <el-input clearable :disabled="scope.row.status !== '1' || lineDisable" size="mini" v-model="scope.row.deliveryWarehouseName" @clear="clean(scope.row, '收货仓库')" @focus="chooseMxCK(scope.$index, 'WAREHOUSE_PARAM', true, '收货仓库', scope.row.org)">
                <el-button size="mini" :disabled="scope.row.status !== '1' || lineDisable" slot="append" icon="el-icon-more" @click="chooseMxCK(scope.$index, 'WAREHOUSE_PARAM', true, '收货仓库', scope.row.org)"></el-button>
              </el-input>
            </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="收货货位" align="center" prop="deliveryAllocationName" width="200">
          <template slot-scope="scope">
            <el-input clearable :disabled="scope.row.status !== '1' || lineDisable" size="mini" v-model="scope.row.deliveryAllocationName" @clear="clean(scope.row, '收货货位')" @focus="chooseMxHW(scope.$index, 'ALLOCATION_PARAM', true, '收货货位', scope.row.deliveryWarehouse)">
              <el-button size="mini" :disabled="scope.row.status !== '1' || lineDisable" slot="append" icon="el-icon-more" @click="chooseMxHW(scope.$index, 'ALLOCATION_PARAM', true, '收货货位', scope.row.deliveryWarehouse)"></el-button>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="采购员" align="center" prop="buyerName" width="100"/>
        <el-table-column show-overflow-tooltip label="制单人" align="center" prop="billMaker" width="100"/>
        <el-table-column show-overflow-tooltip label="审核人员" align="center" prop="approver" width="100"/>
        <!-- <el-table-column show-overflow-tooltip label="请购单号" align="center" prop="code"/> -->
        <el-table-column show-overflow-tooltip label="品类" align="center" prop="materialCategory" width="100"/>
        <el-table-column show-overflow-tooltip label="注册人" align="center" prop="registrant" width="100"/>
        <el-table-column show-overflow-tooltip label="集团预测分类" align="center" prop="forecastClassify" width="120"/>
        <el-table-column show-overflow-tooltip label="修改时间" align="center" prop="updateTime" width="140"/>
        <el-table-column show-overflow-tooltip label="采购员编码" align="center" prop="buyer" width="100"/>
        <!-- <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="100"/>
        <!-- <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="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isBatchLock"
              :disabled="scope.row.status !== '1' || 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="140"/>
        <el-table-column show-overflow-tooltip label="需求单审批时间" align="center" prop="approverFinishTime" width="120"/>
        <el-table-column show-overflow-tooltip label="需求单提交时间" align="center" prop="createTime" width="120"/>
        <el-table-column show-overflow-tooltip label="需求单提交人" align="center" prop="createByName" width="120"/>
        <!-- <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="affirmerName" width="100"/>
        <el-table-column show-overflow-tooltip label="处理确认时间" align="center" prop="affirmerTime" width="120"/>
        <!-- <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="100" :formatter="priceClass"/>
      </el-table>

      <div class="btn_group">
        <el-col :span="1.5">
          <el-button size="mini" plain @click="back" v-if="lineDisable">返回</el-button>
        </el-col>
      </div>
    </el-card>

    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>
  </div>
</template>

<script>
import Refers from '@/components/Refers/refers.vue'
import {getSummaryDetail, shutDownSummary, editSummaryMx, reloadBatch } from '@/api/purchase/DemandSummary.js'
export default {
  name: 'checkDemandSummary',
  components: {
    Refers
  },
  props: ['pageStu','row', 'disable', 'query'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return{
      loading: true,
      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 '调货价'
        }
      },
      formatterBillType(row) {
        switch (row.billType) {
          case 'ZQBH':
            return '周期备货'
          case 'FXXQ':
            return '分销需求'
          case 'TSXQ':
            return '特殊采购需求'
          case 'BDXQ':
            return '补单需求'
          case 'JJXQ':
            return '紧急需求单'
          case 'XPXQ':
            return '新品需求'
          case 'HZBM':
            return '合作部门需求'
          case 'DZBH':
            return '大宗备货'
          case 'XZCG':
            return '行政类采购'
        }
      },
      // 不能直接改变props传来的值
      sonPageStu: this.pageStu,
      sonDisable: this.disable,
      tableList: [],
      ids: [],
      lineDisable: true,
      tableIndex: '',
      referCondition: {
        type: '',
        isPage: true,
        title: ''
      }
    }
  },
  created() {
    if(this.pageStu == 'check') {
      console.log('数据', this.row)
      let param = JSON.parse(JSON.stringify(this.query))
      param.sumFlag = this.row.sumFlag
      this.getDetails(param)
    }
  },
  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')
    },
    // 如果需要回显则调用详情接口
    getDetails(row) {
      row.demandItemId = this.row.demandItemId
      getSummaryDetail(row).then(res => {
        if (res.code === 200) {
          this.tableList = res.data
        }
      }).then(() => {
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    editLine() {
      console.log('sonList`````', this.tableList)
      this.lineDisable = false
    },
    cancelEdit() {
      this.lineDisable = true
      let param = JSON.parse(JSON.stringify(this.query))
      param.sumFlag = this.row.sumFlag
      this.getDetails(param)
    },
    saveLine() {
      editSummaryMx(this.tableList).then(res => {
        if (res.code === 200) {
          this.$modal.notifySuccess("保存成功");
          this.lineDisable = true
          let param = JSON.parse(JSON.stringify(this.query))
          param.sumFlag = this.row.sumFlag
          this.getDetails(param)
        }
      })
    },
    // 行关闭
    closeLine() {
      if (this.ids.length == 0) {
        this.$modal.notifyWarning("请选中至少一条数据");
      } else {
        this.$modal.confirm('是否确定关闭?').then(function () {
        }).then(() => {
          let param = this.ids.join()
          shutDownSummary(param).then(res => {
            if (res.code === 200) {
              this.$modal.notifySuccess("操作成功");
              let param = JSON.parse(JSON.stringify(this.query))
              param.sumFlag = this.row.sumFlag
              this.getDetails(param)
            }
          })
        }).catch(() => {})
      }
    },
    // 重取批量
    reloadBatch() {
      this.$modal.confirm('是否更新明细的最小包装量,最小订货量,最小批量?').then(function () {}).then(() => {
        let param = this.tableList.map(item => { return item.demandItemId })
        reloadBatch(param).then(res => {
          if (res.code === 200) {
            this.$modal.notifySuccess("操作成功");
            let params = JSON.parse(JSON.stringify(this.query))
            params.sumFlag = this.row.sumFlag
            params.demandItemId = this.row.demandItemId
            this.getDetails(params)
          }
        })
      }).catch(() =>{})
      
    },
    // 明细行选择货位
    chooseMxHW(index, type, isPage, title, stordocId) {
      this.tableIndex = index
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.referCondition.stordocId = stordocId
      this.$refs.refer.init(this.referCondition)
    },
    // 明细行选择仓库
    chooseMxCK(index, type, isPage, title, orgId) {
      this.tableIndex = index
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.referCondition.pkOrg = orgId
      this.$refs.refer.init(this.referCondition)
    },
    selectionsToInput(selection) {
      if (this.referCondition.title == '收货货位') {
        this.tableList[this.tableIndex].deliveryAllocationName = selection[0].name
        this.tableList[this.tableIndex].deliveryAllocation = selection[0].id
      }
      if (this.referCondition.title == '收货仓库') {
        this.tableList[this.tableIndex].deliveryWarehouseName = selection[0].name
        this.tableList[this.tableIndex].deliveryWarehouse = selection[0].id
        this.tableList[this.tableIndex].deliveryAllocation = ''
        this.tableList[this.tableIndex].deliveryAllocationName = ''
      }
      if (this.referCondition.title == '选择补单供应商') {
        this.tableList[this.tableIndex].additionalSupplierName = selection[0].name
        this.tableList[this.tableIndex].additionalSupplier = selection[0].id
      }
      if (this.referCondition.title == '默认采购组织') {
        this.tableList[this.tableIndex].org = selection[0].id
        this.tableList[this.tableIndex].orgName = selection[0].name
        this.tableList[this.tableIndex].deliveryWarehouse = ''
        this.tableList[this.tableIndex].deliveryWarehouseName = ''
        this.tableList[this.tableIndex].deliveryAllocation = ''
        this.tableList[this.tableIndex].deliveryAllocationName = ''
      }
    },
    // 清空选中的货位
    clean(row, title) {
      if (title == '收货仓库') {
        row.deliveryWarehouse = ''
        row.deliveryWarehouseName = ''
        row.deliveryAllocation = ''
        row.deliveryAllocationName = ''
      }
      if (title == '收货货位') {
        row.deliveryAllocation = ''
        row.deliveryAllocationName = ''
      }
      if (title == '选择补单供应商') {
        row.additionalSupplier = ''
        row.additionalSupplierName = ''
      }
      if (title == '默认采购组织') {
        row.org = ''
        row.orgName = ''
        row.deliveryWarehouse = ''
        row.deliveryWarehouseName = ''
        row.deliveryAllocation = ''
        row.deliveryAllocationName = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 .btn_group {
  // width: 100%;
  // margin: 20px 0;
  display: flex;
  // justify-content: center;
  position: absolute;
  top: 10px;right: 20px;
} 
.btn_grooup {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
} 
::v-deep .el-table__row > td {
  border: none;
}
</style>