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

<template>
  <div>
    <el-button :disabled="data.status !=='新建' && data.status !=='提交'" type="primary" size="mini" @click="onShow(drawer = true)">编辑</el-button>
    <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    append-to-body
    size="80%">
    <div slot="title">
      <div class="flex-align-center">
        <p><span style="font-size:14px">订单合计:</span><span style="color:red;font-size:16px;"><b>¥&nbsp;{{tool.formatAmount(data.amount,2)}}</b></span></p>
        <!-- <label style="font-size:14px;margin-left:10px" for="">备注:</label>
        <input class="order__note__input" v-model="defaultData.remarks" type="text" placeholder="请输入订单备注"> -->
      </div>
    </div>
    <div class="drawer__panel">
      <div>
        <div class="mt-10">
          <p class="normal-title inline-16">选择账户</p>
          <el-popover
            placement="bottom"
            title="选择账户"
            trigger="click"
            v-model="visible3">
            <el-table
              :data="accountlist"
              style="width: 100%"
              size="mini">
              <el-table-column
                prop="accountname"
                label="账户名称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="balance"
                label="账户余额"
                width="120">
                <template slot-scope="scope">
                  ¥{{tool.formatAmount(scope.row.balance,2)}}
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="90">
                <template slot-scope="scope">
                  <el-button type="text" @click="(defaultData.accountclass = scope.row,visible3 = false)" size="mini">选 择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button slot="reference" type="text" size="mini">选择其他账户</el-button>
          </el-popover>
        </div>
        <div class="reveive__panel normal-margin">
          <p><b>¥{{tool.formatAmount(defaultData.accountclass.balance?defaultData.accountclass.balance:0,2)}}</b></p>
          <small>{{defaultData.accountclass.accountname?defaultData.accountclass.accountname:'未选择账户'}}</small>
          <div v-if="(data.type === '标准订单' ||  data.type === '特殊订单') && isusedrebate === 1">
            <el-checkbox v-model="checked" :true-label="1" :false-label="0">使用返利金</el-checkbox>
            <div v-if="checked" class="flex-align-center">
              <p class="inline-16"><b>返利金余额:{{tool.formatAmount(rebateAccount[0]?rebateAccount[0].balance:0,2)}}</b></p>
              <el-input class="inline-16" size="mini" style="width:150px" v-model="rebateamount" @blur="useRebate" placeholder="输入使用金额"></el-input>
              <small>(返利金最高使用比例{{data.order_rebate_userate}}%)</small>
            </div>
          </div>
        </div>
      </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">选择财务信息</p>
            <el-popover
              placement="bottom"
              title="选择财务信息"
              trigger="click"
              v-model="visible2">
              <el-table
                :data="financiallist"
                style="width: 100%"
                size="mini">
                <el-table-column
                  prop="enterprisename"
                  label="公司抬头"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="开票地址"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="bank"
                  label="开户行"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="bankcardno"
                  label="开户账号"
                  width="120">
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="90">
                  <template slot-scope="scope">
                    <el-button type="text" @click="(defaultData.fin_info = scope.row,visible2 = false)" size="mini">选 择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button slot="reference" type="text" size="mini">选择其他</el-button>
            </el-popover>
          </div>
          <div class="reveive__panel normal-margin">
            <p><small>抬头:&nbsp;</small><span class="inline-16"><b>{{defaultData.fin_info.enterprisename}}</b></span></p>
            <div class="flex-align-center">
              <p class="inline-16"><small>开票地址:&nbsp;</small>{{defaultData.fin_info.address?defaultData.fin_info.address:'--'}}</p>
              <p><small>开户行:&nbsp;</small> {{defaultData.fin_info.bank}} &emsp;<small>开户账号:&nbsp;</small> {{defaultData.fin_info.bankcardno}}</p>
            </div>
          </div>
        </div>
        <div style="flex:1;">
          <div class="mt-10">
            <p class="normal-title inline-16">收货信息</p>
            <el-popover
              placement="bottom"
              title="选择地址"
              trigger="click"
              v-model="visible">
              <el-table
                :data="receiveAddresslist"
                style="width: 100%"
                size="mini">
                <el-table-column
                  prop="name"
                  label="联系人"
                  width="90">
                </el-table-column>
                <el-table-column
                  prop="phonenumber"
                  label="电话"
                  width="120">
                </el-table-column>
                <el-table-column
                  label="地址"
                  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="操作"
                  width="90">
                  <template slot-scope="scope">
                    <el-button type="text" @click="(defaultData.re_info = scope.row,visible = false)" size="mini">选 择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button slot="reference" type="text" size="mini">选择其他地址</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">
        <p class="normal-title inline-16">领域明细</p>
      </div>
      <div class="mt-10 flex-align-center">
        <div v-for="item in data.subvalues" :key="item.index" :style="defaultData.tradefieldmx === item?{background:'#d9ecff'}:{background:'#fff'}" class="reveive__panel normal-margin inline-16" @click="defaultData.tradefieldmx = item">
          <p>{{item}}</p>
        </div>
      </div>
      <div class="mt-10">
        <p class="normal-title inline-16">寄付方式</p>
      </div>
      <div class="mt-10 flex-align-center">
        <div :style="defaultData.freightstatus === '到付'?{background:'#d9ecff'}:{background:'#fff'}" class="reveive__panel normal-margin inline-16" @click="defaultData.freightstatus = '到付'">
          <p>到付</p>
        </div>
        <div :style="defaultData.freightstatus === '预付'?{background:'#d9ecff'}:{background:'#fff'}" class="reveive__panel normal-margin" @click="defaultData.freightstatus = '预付'">
          <p>预付</p>
        </div>
      </div>
      
      <div class="mt-10">
        <p class="normal-title inline-16">订单备注</p>
      </div>
      <div class="mt-10">
        <el-input v-model="defaultData.remarks" type="textarea" :autosize="{minRows:5,maxRows:10}" placeholder="请输入订单备注"></el-input>
      </div>
      <div>
        <div class="mt-10">
          <p class="normal-title inline-16">订单产品</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" :data="data" :type="data.status === '提交'?'':'edit'" @onSuccess="onDelSuccess"></product-list>
          </el-col>
          <el-col :span="24 - setcol">
            <add-product ref="addpro" :data="data" @onConfirm="onConfirm"></add-product>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="fixed__btn__panel">
      <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
      <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">保存修改</el-button>
    </div>
  </el-drawer>
  </div>
</template>

<script>
import previewImage from '@/components/previewImage/index.vue'
import productList from '../details/tabs/productlist.vue'
import addProduct from '@/template/orderCanUseProduct/index.vue'
export default {
  props:['data'],
  components:{
    previewImage,
    productList,
    addProduct
  },
  data () {
    return {
      visible:false,
      visible1:false,
      visible2:false,
      visible3:false,
      drawer:false,
      receiveAddresslist:[],
      accountlist:[],
      logisticcomlist:[],
      financiallist:[],
      defaultData:{
        re_info:{},
        logist_info:{},
        fin_info:{},
        accountclass:{},
        account_index:0,
        remarks:this.data.remarks,
        freightstatus:'到付',
        tradefieldmx:''
      },
      agnetInfo:{},
      total:0,
      setcol:24,
      checked:0,
      rebateamount:null,
      isusedrebate:0,
      rebateAccount:[]
    }
  },
  methods:{
    onShow () {
      this.queryAgentiInfo()
      this.defaultData.freightstatus = this.data.freightstatus
      this.defaultData.tradefieldmx = this.data.tradefieldmx
    },
    async queryAgentiInfo () {
      const res = await this.$api.requested({
        "id": "20221022165203",
        "content": {
          sys_enterpriseid:this.data.sys_enterpriseid
        }
      })
      this.agnetInfo = res.data

      this.receiveAddress()

      this.queryAccount()

      this.queryLogisticcom()

      this.queryFinancial()

      this.queryUsedrebate()

      this.checked = this.data.rebate_used
      this.rebateamount = this.data.rebateamount
    },
    // 收货信息:合作企业联系人
    async receiveAddress () {
      const res = await this.$api.requested({
        "id": "20221009155803",
        "content": {
        "sys_enterpriseid":this.agnetInfo.sys_enterpriseid,
          "where":{
            "condition":"",
            "workaddress":0
          }
        }
      })
      this.receiveAddresslist = res.data
      this.defaultData.re_info = res.data[0]
    },

    // 账号信息
    async queryAccount () {
      const res = await this.$api.requested({
        "id": "20221008134803",
        "content": {
          "pageNumber": 1,
          "pageSize": 100,
          "where":{
            "isused":1
          }
        }
      })
     this.accountlist = res.data.filter(e=>{
        return e.isrebate !== 1
      })
      this.rebateAccount = res.data.filter(e=>{
        return e.isrebate === 1
      })
      this.defaultData.accountclass = this.data.accountclass
    },

    // 物流企业
    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 queryFinancial () {
      const res = await this.$api.requested({
        "id": "20221013160602",
        "content": {
          "sys_enterpriseid":this.agnetInfo.sys_enterpriseid,
          "pageNumber": 1,
          "pageSize": 100
        }
      })
      this.financiallist = res.data
      this.defaultData.fin_info = this.data.finance
    },
    async onSubmit() {
      const res = await this.$api.requested({
        "id": 20221108111402,
        "content": {
          "sa_orderid": this.$route.query.id,
          "sys_enterpriseid": this.data.sys_enterpriseid, //订货企业id
          "sa_accountclassid": this.defaultData.accountclass.sa_accountclassid, //营销账户类型ID
          "sa_brandid": this.data.sa_brandid, //品牌ID
          "sa_contractid":this.data.sa_contractid, //合同ID，标准订单不传
          "sa_projectid": this.data.sa_projectid, //工程项目表ID，标准订单不传
          "sys_enterprise_financeid": this.defaultData.fin_info.sys_enterprise_financeid, //合作企业财务信息ID（开票信息）
          "sa_logiscompid": this.defaultData.logist_info.sa_logiscompid, //物流公司档案ID
          "rec_contactsid": this.defaultData.re_info.contactsid, //合作企业联系人表ID（收货信息）
          "type": this.data.type, //订单类型
          "typemx":this.data.typemx, //明细分类，可选
          "remarks": this.defaultData.remarks, //可选
          // "saler_hrid":this.data.saler_hrid//销售人员hrid,业务员hrid
          "pay_enterpriseid":this.data.pay_enterpriseid,
          "tradefield":this.data.tradefield,
          "freightstatus":this.defaultData.freightstatus
        },
      })
      this.tool.showMessage(res,()=>{
        console.log(this.data)
        this.$emit('onSuccess')
        this.useRebate()
        this.drawer = false
      })
    },
    onDelSuccess () {
      this.$refs.addpro.listData()
    },
    addMoreProduct () {
      this.setcol === 12?this.setcol = 24 : this.setcol = 12
    },
    // 订单添加商品
    async onConfirm (data) {
      const res = await this.$api.requested({
        "id": 20221109093602,
        "content": {
          "sa_orderid": this.$route.query.id, //订单ID
          "sys_enterpriseid": this.data.sys_enterpriseid, //企业ID
          "type": "标准订单", //订单类型
          "items": data.map(e=>{
            return {
              sa_orderitemsid:0,
              itemid:e.itemid,
              qty:e.orderminqty,
              needdate:e.deliverydate
            }
          })
        },
      })
      this.tool.showMessage(res,()=>{
        this.setcol = 24
        this.$refs['prolist'].listData()
      })
    },
     async useRebate () {
      if (this.rebateamount == null) return this.$message({
          message:"返利金不能为空",
          type:'error'
        })
      const res = await this.$api.requested({
        "id": 20230218225002,
        "content": {
          "sa_orderid": this.data.sa_orderid, //订单金额
          "isused": this.checked, //是否使用
          "rebateamount": this.rebateamount //返利金使用金额
        },
      })
      if (res.code === 0) this.$message({
        message:`使用返利金失败!${res.msg}`,
        type:'error'
      })
    },
    // 查询站点是否使用返利金
    async queryUsedrebate () {
      const res = await this.$api.requested({
         "classname": "webmanage.site.site",
        "method": "querySite_Parameter",
        "content": {
        }
      })
      this.isusedrebate = res.data.order_rebate_used
    }
  },
  mounted () {
  }
}

</script>
<style>
</style>
<style scoped>
.reveive__panel{
  font-size: 14px;
  line-height: 30px;
  padding: 10px;
  background: #d9ecff;
  border: 1px dashed #0676e7;
  cursor: pointer;
}
.account__panel small,.reveive__panel small{
  color:#666
}
.account__panel{
  width: calc(25% - 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>