yos_web/src/HDrpManagement/dispatch/modules/productlist.vue

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="setcol">
        <div class="flex-align-center">
          <el-button style="margin:0 0 10px 10px" size="small" type="primary" :disabled="data.status !== '新建'" v-if="type !== 'confirmdate'" @click="drawer = true">{{setcol === 24?$t('添 加'):$t('取 消')}}</el-button>
        </div>
        <Table
          height="calc(100vh - 500px)"
          ref="multipleTable"
          :layout="tablecols"
          :data="tableData"
          :custom="true" :checkbox="true" fixedName="rowno orderRowno itemname itemno erpitemno model" redirect="left">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'qty'">
              <el-input-number :controls="true" controls-position='right' :step-strictly="true" v-if="data.status === '新建'" size="mini" v-model="scope.column.data.qty" :min="1" :max="scope.column.data.undeliqty" :label="$t(`输入数量`)" @change="rowChange(scope.column.data,scope.$index)"></el-input-number>
              <span v-else>{{scope.column.data.qty}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'price'">
              {{tool.formatAmount(scope.column.data.price,2)}}
            </div>
            <div v-else-if="scope.column.columnname === 'remarks'">
              <el-input v-if="data.status === '新建'" v-model="scope.column.data.remarks" :placeholder="$t(`输入订单备注`)" size="mini" @change="rowChange(scope.column.data,scope.$index)"></el-input>
              <p v-else>{{scope.column.data.remarks}}</p>
            </div>
            <p v-else>{{$t(scope.column.data[scope.column.columnname])}}</p>
          </template>
          <template v-slot:opreation="scope">
            <el-button type="text" size="mini" @click="deleteOrderProduct(scope.data)" :disabled="data.status !== '新建'">{{$t(`删 除`)}}</el-button>
          </template>
        </Table>
    <!-- <el-table
      ref="multipleTable"
      :data="tableData"
      height="500px"
      style="width: 100%;"
      size="small"
      stripe
      border>
      <el-table-column
        prop="rowno"
        width="100px"
        label="发货单行号"
        fixed>
      </el-table-column>
      <el-table-column
        prop="orderRowno"
        width="100px"
        label="订单行号"
        fixed>
      </el-table-column>
      <el-table-column
        prop="itemname"
        label="产品名称"
        fixed>
      </el-table-column>
      <el-table-column
        prop="itemno"
        fixed
        label="产品编码">
      </el-table-column>
      <el-table-column
        prop="erpitemno"
        label="品号"
        fixed>
      </el-table-column>
      <el-table-column
          prop="model"
          label="型号"
          fixed>
      </el-table-column>
      <el-table-column
          prop="spec"
          label="规格">
      </el-table-column>
      <el-table-column
        prop="unitname"
        label="单位">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价">
        <template slot-scope="scope">
          {{tool.formatAmount(scope.row.price,2)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="qty"
          label="数量"
          width="180">
        <template slot-scope="scope">
          <el-input-number :controls="true" controls-position='right' :step-strictly="true" v-if="data.STATUS === '新建'" size="mini" v-model="scope.row.qty" :min="1" :max="scope.row.undeliqty" label="输入数量" @change="rowChange(scope.row,scope.$index)"></el-input-number>
          <span v-else>{{scope.row.qty}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="amount"
        label="发货金额">
      </el-table-column>
      <el-table-column
        prop="undeliqty"
        label="未发货数量"
        width="100px">
      </el-table-column>
      <el-table-column
          label="备注"
          width="300"
          prop="remarks">
        <template slot-scope="scope">
          <el-input v-if="data.STATUS === '新建'" v-model="scope.row.remarks" placeholder="输入订单备注" size="mini" @change="rowChange(scope.row,scope.$index)"></el-input>
          <p v-else>{{scope.row.remarks}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="suminqty"
        width="120px"
        label="erp即时库存">
      </el-table-column>
      <el-table-column :label="$t(`操作`)"  width="90" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="deleteOrderProduct(scope.row)">{{$t(`删 除`)}}</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <div style="margin-top:16px;text-align:right">
<!--      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="param.content.pageNumber"
        :page-size="param.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>-->
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.content.pageNumber"
          :page-sizes="[100, 50, 100, 200]"
          :page-size="100"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
      </el-col>
      <el-col :span="24 - setcol">
        <el-drawer
            title="添加商品"
            :visible.sync="drawer"
            append-to-body
            size="80%"
            direction="rtl">
          <div class="drawer__panel">
            <addProduct :drawer="drawer" :data="data" @onConfirm="onConfirm"></addProduct>
          </div>
        </el-drawer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import addProduct from '@/template/invoiceCanUseProduct/index.vue'
import Table from '@/HDrpManagement/orderManage/details/tabs/table'
export default {
  props:['type','data'],
  components:{addProduct,Table},
  data () {
    return {
      tableData:[],
      drawer:false,
      setcol:24,
      param:{
        "id": 20221115104703,
        "content": {
          "sa_orderid": 0,
          "pageNumber": 1,
          "pageSize": 100,
          "where": {
              "condition": ""
          }
        },
      },
      total:0,
      currentPage:0,
      time: null,
      tablecols:[]
    }
  },
  methods:{
    async listData () {
      this.param.content.sa_dispatchid = this.$route.query.id
      const res = await this.$api.requested(this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      console.log(res.data);

    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    async deleteOrderProduct (row) {
      const res = await this.$api.requested({
        "id": 20221115104803,
        "content": {
          "sa_dispatch_itemsids": [row.sa_dispatch_itemsid]
        },
      })
      this.tool.showMessage(res,()=>{
        this.listData()
        this.$emit('onSuccess')
      })
    },
    async updateOrderProduct (val) {
      const res  = await this.$api.requested({
        "id": 20221110145302,
        "content": val
      })
    },
    qtyChange (val,index) {
      let that = this
      this.$set(this.tableData,index,val)
      // console.log(val,this.tableData)
      // // 防抖
      if(this.time !== null){
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        that.updateOrderProduct({
          "sa_orderitemsid":val.sa_orderitemsid,
          "sa_orderid":this.$route.query.id,//订单ID
          "itemid":val.itemid,//商品ID
          "type":"数量",//调整类型，目前只支持数量
          "oldvalue":val.qty,//原值
          "newvalue":val.qty,//调整后值
          "remarks":val.remarks
        })
      },500)
    },
    // 订单添加商品
    async onConfirm (data) {
      console.log(data,'添加商品')
      const res = await this.$api.requested({
        "id": 20221115104603,
        "content": {
          "sa_dispatchid": this.$route.query.id, //订单ID
          "iteminfos":data.map(e=>{
            e.sa_dispatch_itemsid = 0
            e.qty=e.undeliqty
            e.remarks = e.remarks
            return e
          })
        },
      })
      this.tool.showMessage(res,()=>{
        this.drawer = false
        this.listData()
        this.$emit('onSuccess')
      })
    },
    rowChange(val,index){
      let that = this
      this.$set(this.tableData,index,val)
      // // 防抖
      if(this.time !== null){
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        that.updateOrder({
          "sa_dispatchid": this.$route.query.id, //订单ID
          "iteminfos": [{
            "sa_dispatch_itemsid": val.sa_dispatch_itemsid,//0表示新增
            "qty": val.qty, //数量
            "remarks":val.remarks
          }]
        },()=>{
          this.listData()
        })
      },500)
    },
    async updateOrder (val,fn) {
      const res  = await this.$api.requested({
        "id": 20221115104603,
        "content": val
      })
      this.$emit('onSuccess')
      res.code === 1?fn():""

    },
    // tableCellStyle({ row, column, rowIndex, columnIndex }) {
    //   console.log(row.taskColor, "-->row.taskColor");
    //   let rowBackground = {};
    //   if (columnIndex === 10 || columnIndex == 13) {
    //     rowBackground.background = 'yellow';
    //   } else {
    //     rowBackground.background = "#ffffff";
    //   }
    //   return rowBackground;
    // },
  },
  mounted () {
    this.listData()
    this.tablecols = this.tool.tabelCol(this.$route.name).OrderListTable.tablecols
  }
}

</script>
<style scoped>
/* /deep/.el-table__fixed .el-table__row {
  color: red !important;
} */
</style>