yos_web/src/HDrpManagement/logistics/details/tabs/logisticsBox/edit.vue

<template>
  <div>
    <el-button type="text" size="small" @click="onShow(drawer = true)">{{$t('编 辑')}}</el-button>
    <el-drawer
      :title="$t(`编辑装箱信息`)"
      :visible.sync="drawer"
      :with-header="false"
      append-to-body
      size="90%">
      <div class="drawer__panel">
        <p class="normal-title mt-10">
          {{$t(`装箱信息`)}}
        </p>
        <el-form style="width:500px" label-position="right" :label-width="tool.onlyZh('80px')" :model="form" size="small">
          <el-form-item :label="$t(`箱码`)">
            <el-input v-model="form.boxnum" :placeholder="$t(`输入箱码`)"></el-input>
          </el-form-item>
          <el-form-item :label="$t('备注')">
            <el-input type="textarea" :autosize="{minRows:5,maxRows:10}" v-model="form.remarks" :placeholder="$t(`请输入备注`)"></el-input>
          </el-form-item>
        </el-form>
        <p class="normal-title mt-10">
          {{$t(`装箱明细`)}}
          <el-button size="mini" type="text" @click="showSelect(setcol === 12 ? setcol = 24 : setcol = 12)">{{setcol === 24?$t('添加产品'):$t('关闭添加')}}</el-button>
        </p>
        <el-row :gutter="10">
          <el-col :span="setcol">
            <!-- 产品编码、产品名称、品号、型号、规格尺寸、装箱数量 -->
            <el-table
              :data="tableData"
              size="small"
              border>
              <el-table-column
                  prop="billno"
                  :label="$t(`发货单号`)"
                  width="180">
              </el-table-column>
              <el-table-column
                prop="itemno"
                :label="$t(`产品编码`)"
                width="180">
              </el-table-column>
              <el-table-column
                prop="itemname"
               :label="$t('产品名称')"
                width="180">
              </el-table-column>
              <el-table-column
                prop="model"
                :label="$t('型号')"
                width="180">
              </el-table-column>
              <el-table-column
                prop="spec"
                :label="$t(`规格尺寸`)"
                width="180">
              </el-table-column>
              <el-table-column
                prop="qty"
                :label="$t(`装箱数量`)"
                width="200">
                <template slot-scope="scope">
                  <el-input v-model.number="scope.row.qty" type="number" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks"
                :label="$t('备注')"
                min-width="250">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remarks" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('操作')"
                fixed="right"
                width="90">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="deleteRow(scope.row)">{{$t('删 除')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24 - setcol">
            <logisticsCanUseProduct ref="logislist" :sa_logistics_boxid="this.data.sa_logistics_boxid" @onConfirm="onConfirm" :addList="delList" type="edit">
              <el-button class="inline-16" slot="allBtn" type="primary" size="small" @click="handlePullData">{{$t(`一键全选`)}}</el-button>
            </logisticsCanUseProduct>
          </el-col>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">{{$t(`保存修改`)}}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import logisticsCanUseProduct from '@/template/logisticsCanUseProduct/index.vue'
export default {
  props:['data'],
  data () {
    return {
      drawer:false,
      form:{},
      setcol:24,
      tableData:[],
      delList:[]
    }
  },
  components:{
    logisticsCanUseProduct
  },
  methods:{
    onShow () {
      this.form = Object.assign({},this.form,this.data)
      console.log(this.data,'data22222')
      this.delList = []
      this.listData()
    },
    async onSubmit (){
      let delID = []
      delID = this.delList.map(item=>item.sa_logistics_boxmxid)
      const res1 = await this.$api.requested({
        "id": "20230109155504",
        "content": {
          "sa_logisticsid":this.data.sa_logisticsid,
          "sa_logistics_boxmxids":delID
        }
      })
      if (res1.code == 0){
        this.tool.showMessage(res,()=>{})
      }
      const res = await this.$api.requested({
        "id": "20230109155104",
        "content": {
            "sa_logisticsid":this.$route.query.id,
            "sa_logistics_boxid": this.data.sa_logistics_boxid,
            "boxnum": this.form.boxnum,
            "remarks":this.form.remarks,
            "sa_logistics_boxmx": this.tableData.map(e=>{
              return {
                "sa_logistics_boxmxid": e.sa_logistics_boxmxid?e.sa_logistics_boxmxid:0,
                "sa_dispatch_itemsid": e.sa_dispatch_itemsid,
                "qty": e.qty,
                "remarks": e.remarks
              }
            })
        }
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
        this.drawer = false
      })
    },
    showSelect () {
      this.$refs['logislist'].listData()
    },
    onConfirm (val) {
      this.tableData = [...val,...this.tableData]
      // const res = new Map();
      // this.tableData = this.tableData.filter((item) => !res.has(item['itemno']) && res.set(item['itemno'], 1));
    },
    async deleteRow (row) {
      this.tableData = this.tableData.filter(e=>{
        if (e.sa_dispatch_itemsid !== row.sa_dispatch_itemsid)
          return e
      })
      console.log(row,'row删除')
      let delNew = []
      delNew[0] = row
      this.delList = [...this.delList,...delNew]
      this.$refs.logislist.listData()
    },
    async handlePullData () {
      let res = await this.$api.requested({
        id:20230110112204,
        content: {
          "pageNumber": 1,
          "pageSize": 9999999999,
          "sa_logisticsid":this.$route.query.id,
          "sa_logistics_boxid":1,
          "where": {
            "condition": ""
          }
        }
      })
      if(res.data.length) {
        this.tableData = res.data
        // this.tableData.push(...res.data)
        // const res2 = new Map();
        // this.tableData = this.tableData.filter((item) => !res2.has(item['itemno']) && res2.set(item['itemno'], 1));
        this.$refs.logislist.tableData = []
      }
    },
    async listData (id) {
      const res = await this.$api.requested({
        "id": 20230109155304,
        "content": {
          "pageNumber": 1,
          "pageSize": 999,
          "sa_logisticsid":this.$route.query.id,
          "sa_logistics_boxid":this.data.sa_logistics_boxid,
          "where": {
            "condition": ""
          }
        }
      })
      this.tableData = res.data
    }
  }
}

</script>
<style>
</style>