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

<template>
  <div>
    <el-button :disabled="data.status !=='新建'" type="primary" size="mini" @click="onShow(drawer = true)">{{$t('编辑')}}</el-button>
    <el-drawer
    :visible.sync="drawer"
    :wrapperClosable="false"
    direction="rtl"
    append-to-body
    size="80%">
    <div slot="title">
      <div class="flex-align-center">
        <p>{{$t(`编辑发货单`)}}</p>
      </div>
    </div>
    <div class="drawer__panel">
      <div class="normal-margin">{{$t(`发货数量`)}}:{{data.qty}}</div>
      <div class="normal-margin">{{$t(`发货金额`)}}:{{data.sumamount ? tool.formatAmount(data.sumamount,2) : '--'}}</div>
      <div class="mt-10">
        <p class="normal-title inline-16"><span v-if="siteid == 'YOSTEST1' || siteid == 'HY'" style="color: red">*</span><span>{{$t(`发货时间`)}}</span></p>
        <!-- billdate -->
        <el-date-picker
          v-model="defaultData.billdate"
          type="date"
          value-format="yyyy-MM-dd"
          :placeholder="$t(`选择发货日期`)"
          size="small"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="flex-align-center normal-margin">
        <div style="flex:1;margin-right:10px">
          <div class="mt-10">
            <p class="normal-title inline-16">{{$t(`收货信息`)}}</p>
            <el-popover
              placement="bottom"
              :title="$t(`选择地址`)"
              trigger="click"
              v-model="visible">
              <div class="flex-align-center" style="justify-content:space-between;margin-bottom:10px">
                <el-input
                  size="small"
                  v-model="addressparam.content.where.condition"
                  :placeholder="$t('请输入搜索内容')"
                  style="width:150px"
                  @keyup.enter.native="receiveAddress(addressparam.content.pageNumber = 1)" @clear="receiveAddress(addressparam.content.pageNumber = 1)" clearable></el-input>&nbsp;
                <addAddressInfo style="text-align:right" @onAddSuccess="receiveAddress()" :mainData="{sys_enterpriseid:data.sys_enterpriseid}"/>
              </div>
              <el-table
                :data="receiveAddresslist"
                style="width: 100%"
                size="mini">
                <el-table-column
                  prop="name"
                  :label="$t('联系人')"
                  width="90">
                </el-table-column>
                <el-table-column
                  prop="phonenumber"
                  :label="$t(`电话`)"
                  width="120">
                </el-table-column>
                <el-table-column
                  :label="$t('地址')"
                  width="360">
                  <template slot-scope="scope">
                    {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}{{scope.row.address}}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('操作')"
                  width="120">
                  <template slot-scope="scope">
                    <el-button class="inline-16" type="text" @click="(defaultData.re_info = scope.row,visible = false)" size="mini">{{$t('选 择')}}</el-button>
                    <el-popconfirm :confirm-button-text="$t('确定')" :cancel-button-text="$t('取消')"
                      :title="$t(`确定删除吗?`)"
                      @confirm="deleteContacts(scope.row)">
                      <el-button class="inline-16" size="small" type="text" slot="reference">{{$t('删 除')}}</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
              <div class="container" style="text-align:right">
                <el-pagination
                  background
                  small
                  :current-page="addressparam.content.pageNumber"
                  @current-change="addresPageChange"
                  layout="total,prev, pager, next"
                  :total="addresstotal">
                </el-pagination>
              </div>
              <el-button slot="reference" type="text" size="mini">{{$t(`选择其他地址`)}}</el-button>
            </el-popover>
          </div>
          <div class="reveive__panel normal-margin">
            <p><span class="inline-16"><b>{{defaultData.re_info.name}}</b></span><small>{{defaultData.re_info.phonenumber}}</small></p>
            <small>{{defaultData.re_info.province}}{{defaultData.re_info.city}}{{defaultData.re_info.county}}{{defaultData.re_info.address?defaultData.re_info.address:'--'}}</small>
          </div>
        </div>
      </div>
      <div class="mt-10" v-if="tool.checkAuth($route.name,'updShipping')">
        <p class="normal-title inline-16">{{$t(`运费方式`)}}</p>
      </div>
      <div class="mt-10 flex-align-center" v-if="tool.checkAuth($route.name,'updShipping')">
        <div :style="defaultData.freightstatus === '到付'?{background:'#d9ecff'}:{background:'#fff'}" class="reveive__panel normal-margin inline-16" @click="defaultData.freightstatus = '到付'">
          <p>{{$t(`到付`)}}</p>
        </div>
        <div :style="defaultData.freightstatus === '预付'?{background:'#d9ecff'}:{background:'#fff'}" class="reveive__panel normal-margin" @click="defaultData.freightstatus = '预付'">
          <p>{{$t(`预付`)}}</p>
        </div>
      </div>
      <div class="mt-10">
        <p class="normal-title inline-16">{{$t(`对外备注`)}}</p>
      </div>
      <el-input style="margin-bottom:20px" v-model="defaultData.remarks"  :placeholder="$t(`请输入对外备注`)"></el-input>
      <div class="mt-10" v-if="tool.checkAuth($route.name,'internalNote')">
        <p class="normal-title inline-16">{{$t(`对内备注`)}}</p>
      </div>
      <el-input style="margin-bottom:20px" v-model="defaultData.remarks_in" v-if="tool.checkAuth($route.name,'internalNote')"  :placeholder="$t(`请输入对内备注`)"></el-input>
      <div class="mt-10">
        <div>
          <p class="normal-title inline-16">{{$t(`发货单产品`)}}</p>
<!--          <el-button type="text" size="mini" @click="addMoreProduct">{{setcol === 12?'关闭选择':'添加发货产品'}}</el-button>-->
        </div>
        <el-row :gutter="10">
          <el-col :span="setcol">
            <product-list ref="prolist" :type="'edit'" :data="data" @onSuccess="onDelSuccess"></product-list>
          </el-col>
          <el-col :span="24 - setcol">
            <add-disProduct ref="addpro" :data="data" @onConfirm="onConfirm"></add-disProduct>
          </el-col>
        </el-row>
      </div>
    </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 previewImage from '@/components/previewImage/index.vue'
import productList from './productlist.vue'
import addDisProduct from '@/template/disCanUseProduct/index.vue'
import addAddressInfo from '@/HManagement/marketing2/agent/details/modules/address/add'
export default {
  props:['data'],
  components:{
    previewImage,
    productList,
    addDisProduct,
    addAddressInfo
  },
  data () {
    return {
      visible:false,
      visible1:false,
      drawer:false,
      logisticcomlist:[],
      receiveAddresslist:[],
      defaultData:{
        re_info:{},
        logist_info:{},
        billdate:(new Date()).toISOString().split('T')[0],
        freightstatus:'',
        remarks:'',
        remarks_in:''
      },
      setcol:24,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < (Date.now() - 24 * 3600 * 1000);
        },
      },
      addressparam: {
        "id": "20221009155803",
        "content": {
          "nocache":true,
          "pageNumber":1,
          "pageSize":10,
          "sys_enterpriseid":'',
          "where":{
            "condition":"",
            "workaddress":1
          }
        }
      },
      addresstotal:0,
      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid
    }
  },
  methods:{
    addresPageChange (n) {
      this.addressparam.content.pageNumber = n
      this.receiveAddress()
    },
    onShow () {
      this.receiveAddress()
      this.queryLogisticcom()
      this.defaultData.freightstatus = this.data.freightstatus
      this.defaultData.billdate = this.data.billdate?this.data.billdate:this.siteid == 'YOSTEST1' || this.siteid == 'HY'?'':(new Date()).toISOString().split('T')[0]
      this.defaultData.remarks = this.data.remarks
      this.defaultData.remarks_in = this.data.remarks_in
    },
    async deleteContacts (row) {
      const res = await this.$api.requested({
        "id": "20221009155903",
        "version":1,
        "content": {
          "contactsids":[row.contactsid]
        }
      })
      this.tool.showMessage(res,()=>{
        this.receiveAddress()
      })
    },
   // 收货信息:合作企业联系人
   async receiveAddress () {
      this.addressparam.content.sys_enterpriseid = this.data.sys_enterpriseid
      const res = await this.$api.requested(this.addressparam)
      this.receiveAddresslist = res.data
      this.addresstotal = res.total
      this.defaultData.re_info = this.data.recvice
    },
    // 物流企业
    async queryLogisticcom () {
      const res = await this.$api.requested({
        "id": "20221121135804",
        "content": {
          "pageNumber": 1,
          "pageSize": 100
        }
      })
      this.logisticcomlist = res.data
      this.defaultData.logist_info = this.data.logiscomp
    },
    async onSubmit() {
      console.log(this.data)
      if (!this.defaultData.billdate){
        this.$confirm('请填写发货时间！', '提示', {
          showCancelButton:false,
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
        }).catch(() => {
        });
      }else {
        const res = await this.$api.requested({
          "id": 20221114135203,
          "content": {
            "sa_dispatchid":this.data.sa_dispatchid,
            "sa_orderid":0,
            "sys_enterpriseid":this.data.sys_enterpriseid,
            "rec_contactsid":this.defaultData.re_info.contactsid,
            "billdate":this.defaultData.billdate,
            "freightstatus":this.defaultData.freightstatus,
            "remarks":this.defaultData.remarks,
            "remarks_in":this.defaultData.remarks_in
          },
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.drawer = false
        })
      }
    },
    onDelSuccess () {
      this.$refs.addpro.listData()
      this.$emit('onSuccess')
    },
    addMoreProduct () {
      this.setcol === 12?this.setcol = 24 : this.setcol = 12
    },
    // 订单添加商品
    async onConfirm (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.remarks = ''
            e.qty=e.undeliqty
            return e
          })
        },
      })
      this.tool.showMessage(res,()=>{
        this.$refs.prolist.listData()
        this.$refs.addpro.listData()
        this.$emit('onSuccess')
      })
    }
  },
  mounted () {
  }
}

</script>
<style>
</style>
<style scoped>
.reveive__panel{
  font-size: 14px;
  line-height: 30px;
  padding: 10px;
  background: #d9ecff;
  border: 1px dashed #0676e7;
}
.account__panel small,.reveive__panel small{
  color:#666
}
.account__panel{
  width: calc(33% - 26px);
  padding: 10px;
  margin-bottom:10px;
  border: 1px dashed #666;
}
.act{
  background: #d9ecff;
  border: 1px dashed #0676e7;
}
.image {
  width:40px;height:40px;margin:0px auto;
}
.order__note__input{
  border: none;
  outline: none;
  /* margin-left: 10px; */
  /* border-bottom: 1px solid #f1f2f3; */
  flex:1
}
</style>