yos_web/src/SDrpManagement/shopCart/modules/confirmOrder.vue

<template>
  <div>
    <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    append-to-body
    size="50%">
    <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(total,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 normal-margin">品牌与领域</p>
          <div>
            <el-tag class="inline-16" effect="dark">{{data[0].brandname}}</el-tag><el-tag effect="dark">{{data[0].tradefield_shoppingcart}}</el-tag>
          </div>
        </div>
        <div class="mt-10">
          <p class="normal-title inline-16">支付信息</p>
        </div>
        <div class="reveive__panel normal-margin">
          <p class="flex-align-center"><small>结算企业:&nbsp;</small><b>{{defaultData.finance.enterprisename}}</b>&nbsp;<financeEnterprise v-if="data.type !== '项目订单'" ref="finance" @select="onSelect"></financeEnterprise></p>
          <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(defaultData.rebatebalance,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}}%,本单上限:{{tool.formatAmount(data.amount * data.order_rebate_userate / 100,2)}})</small>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-align-start 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?defaultData.fin_info.enterprisename:''}}</b></span></p>
            <p><small>开票地址:&nbsp;</small>{{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 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?defaultData.re_info.name:''}}</b></span><small>{{defaultData.re_info?defaultData.re_info.phonenumber:''}}</small></p>
            <small>{{defaultData.re_info?defaultData.re_info.province:''}}{{defaultData.re_info?defaultData.re_info.city:''}}{{defaultData.re_info?defaultData.re_info.county:''}}{{defaultData.re_info ?defaultData.re_info.address:'--'}}</small>
          </div>
        </div>
      </div>
      <div class="mt-10">
        <p class="normal-title">订单产品</p>
      </div>
      <div style="border:1px solid #f1f2f3">
        <el-table
          ref="multipleTable"
          :data="data"
          style="width: 100%;"
          :header-cell-style="{height:'50px',color:'#768093',fontWeight:'400'}"
          :cell-style="{height:'50px',color:'#768093',fontWeight:'400'}">
          <!-- <el-table-column
            type="selection"
            width="55"
            align="center">
          </el-table-column> -->
          <el-table-column
            align="center"
            label="产品图"
            width="80">
            <template slot-scope="scope">
              <previewImage class="image" :image="scope.row.attinfos[0]" :list="scope.row.attinfos" :deletebtn="false"></previewImage>
            </template>
          </el-table-column>
          <el-table-column
            prop="itemname"
            label="产品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="itemno"
            label="产品编号"
            width="180">
          </el-table-column>
          <el-table-column
            label="型号/规格"
            width="180">
            <template slot-scope="scope">
              <p><span>{{scope.row.model}}</span>&nbsp;/&nbsp;<span>{{scope.row.spec}}</span></p>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            width="150">
            <template slot-scope="scope">
              {{scope.row.qty}}
            </template>
          </el-table-column>
          <el-table-column
            prop="unit"
            label="计量单位"
            width="90">
            <template slot-scope="scope">
              <el-tag size="mini" type="info" effect="plain">{{scope.row.unitname}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="gradeprice"
            label="价格"
            width="90">
            <template slot-scope="scope">
              <p style="color:red;font-weight:500">¥&nbsp;{{tool.formatAmount(scope.row.gradeprice,2)}}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="小计"
            width="150">
            <template slot-scope="scope">
              <p style="color:red;font-weight:500">¥&nbsp;{{tool.formatAmount(scope.row.gradeprice * scope.row.qty,2)}}</p>
            </template>
          </el-table-column>
          <el-table-column width="90">
            <template slot-scope="scope">
              <slot name="del" :data="scope.row"></slot>
            </template>
          </el-table-column>
        </el-table>
      </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 financeEnterprise from '@/template/orderCanUseFinance/index.vue'

export default {
  props:['data','total','istool'],
  components:{
    previewImage,
    financeEnterprise
  },
  data () {
    return {
      visible:false,
      visible1:false,
      visible2:false,
      drawer:false,
      receiveAddresslist:[],
      accountlist:[],
      logisticcomlist:[],
      financiallist:[],
      defaultData:{
        re_info:{
          name:'',
          phonenumber:'',
          province:'',
          city:'',
          county:''
        },
        logist_info:{},
        fin_info:{
          enterprisename:"",
          address:"",
          bank:""
        },
        account_index:0,
        finance:{
          enterprisename:''
        }
      },
      agnetInfo:{}
    }
  },
  methods:{
    async queryAgentiInfo () {
      const res = await this.$api.requested({
        "id": "20221022165203",
        "content": {}
      })
      this.agnetInfo = res.data

      this.receiveAddress()

      this.queryFinancial()
      console.log(this.$refs['finance'].ENlist,'---')
    },
    // 收货信息:合作企业联系人
    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
      res.data[0]? this.defaultData.re_info = res.data[0]:''
      // this.defaultData.finance = this.$refs['finance'].ENlist[0]
    },
    // 财务信息
    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
      res.data[0]?this.defaultData.fin_info = res.data[0]: ''
    },
    // 提交订单
    async onSubmit() {
      
      const res = await this.$api.requested({
        "id": 20221128183202,
        "content": {
          "istool":this.istool,
          // "sa_accountclassid": this.accountlist[this.defaultData.account_index].sa_accountclassid, //营销账户类型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（收货信息）
          "remarks": this.defaultData.remarks, //可选
          "tradefield":this.data[0].tradefield_shoppingcart,
          "items": this.data.map(e=>{
            return {
              "sa_orderitemsid": 0, //写死0
              "itemid": e.itemid, //商品ID
              "sa_brandid": e.sa_brandid,
              "qty": e.qty //数量
            }
          })
        },
      })
      this.tool.showMessage(res,()=>{
        this.drawer = false
        let usertype = JSON.parse(sessionStorage.getItem('active_account')).usertype
        console.log(usertype,'---')
        switch (usertype) {
          case 1:
            this.$router.replace({path:'/ordersaler'})
            break;
          case 0:
            this.$router.replace({path:'/ordermag'})
            break;
          default:
            this.$store.dispatch('changeDetailDrawer',true)
            this.$router.push({path:'/orderdetail',query:{id:res.data.sa_orderid,rowindex:res.data.rowindex}})
            break;
        }
      })
    },
    // 选择结算企业
    onSelect (data) {
      this.defaultData.finance = data
      this.financiallist = data.finance
      data.finance.forEach(e => {
        if (e.isdefault === 1) {
           this.defaultData.fin_info = e
        } else {
          this.defaultData.fin_info = data.finance.length > 0 ?data.finance[0]:{}
        }
      });
    },
  },
  mounted () {
    this.queryAgentiInfo()
  }
}

</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>