yos_web/src/SDrpManagement/salerOrder/details/index.vue

<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="`${mainData.sonum}`"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20221111145202"
        idname="sa_orderid"
        ownertable="sa_order"
        tags=""
        :statusCheck="[{key:'status',value:'审核'},{key:'status',value:'提交'},{key:'status',value:'关闭'}]"
        :tabs="['订单明细','基本信息','订单进度','居间费明细','物流单','发票记录','收支明细','核销记录']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
        <div slot="customOperation" class="inline-16">
          <Edit class="inline-16" v-if="tool.checkAuth($route.name,'update') && mainData.status == '新建'" :data="mainData" @onSuccess="queryMainData();$refs.prod && $refs.prod.listData()" />
          <el-button :disabled="mainData.status !== '交期待确认'"  type="primary" size="mini" @click="confirmdate">确认交期</el-button>
          <el-button  v-if="tool.checkAuth($route.name,'submit')" :disabled="mainData.status !== '新建' || mainData.qty === 0"  type="primary" size="mini" @click="onSubmit('提交')">提 交</el-button>
          <customBtn 
            btnName="撤回"
            message="确认撤回当前订单吗?"
            idName="20230301190202"
            keyName="sa_orderid"
            :id="$route.query.id"
            @onSuccess="queryMainData"
            class="inline-16"
            style="margin-left: 10px"
            v-if="mainData.status == '提交' && tool.checkAuth($route.name,'reback')"
          />
          <el-button  v-if="tool.checkAuth($route.name,'insert')"  type="primary" size="mini" @click="onCopy">复 制</el-button>
          <customBtn 
            btnName="删 除"
            message="确认删除当前订单吗?"
            idName="20221108152102"
            keyName="sa_orderids"
            :id="[$route.query.id]"
            @onSuccess="$router.back()"
            style="display: inline-block !important;margin-left: 10px !important;"
            v-if="mainData.status == '新建' && tool.checkAuth($route.name,'delete')"
          />
        </div>
        <template #headerBottom>
          <div style="display:flex" v-if="Object.keys(mainData).length > 0">
            <div class="account_info">
              <div>
                <p class="normal-title" style="margin-bottom:10px">支付信息</p>
              </div>
              <div class="reveive__panel inline-16">
                <p class="flex-align-center"><small>结算企业:</small>&nbsp;<b>{{mainData.finance.enterprisename}}</b></p>
                <div class="flex-align-center">
                  <p class="inline-16"><small>账户名称:&nbsp;</small>{{mainData.accountclass.accountname?mainData.accountclass.accountname:'未选择账户'}}</p>
                  <p class="inline-16"><small>账户余额:&nbsp;</small><b>¥{{tool.formatAmount(mainData.accountclass.balance?mainData.accountclass.balance:0,2)}}</b></p>

                  <p><small>信用额度:&nbsp;</small>{{mainData.accountclass.creditquota ? tool.formatAmount(mainData.accountclass.creditquota,2) : mainData.accountclass.creditquota}}</p>&nbsp;
                  <p><small>本单金额:&nbsp;</small>{{mainData.rebate_used ? tool.formatAmount(mainData.defaultamount - rebateamount,2) : mainData.defaultamount}}</p>
                </div>
                <div v-if="(mainData.type === '标准订单' ||  mainData.type === '特殊订单') && isusedrebate === 1">
                  <div v-if="checked" class="flex-align-center">
                    <p class="inline-16"><small>返利金余额:&nbsp;</small><b>{{tool.formatAmount(mainData.rebatebalance,2)}}</b></p>
                    <p class="inline-16"><small>已使用返利金金额:&nbsp;</small><b>{{tool.formatAmount(mainData.rebateamount,2)}}</b></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="address_info">
              <div>
                <p class="normal-title" style="margin-bottom:10px">收货信息</p>
              </div>
              <div class="reveive__panel inline-16">
                <div>
                  <p class="inline-16"><b>{{mainData.contactsEnterprise.enterprisename}}</b></p>
                  <p class="inline-16"><span class="inline-16"><b>{{mainData.contacts.name}}</b></span><small>{{mainData.contacts.phonenumber}}</small></p>
                </div>
                <small>{{mainData.contacts.province?mainData.contacts.province:'--'}}{{mainData.contacts.city}}{{mainData.contacts.county}}{{mainData.contacts.address?mainData.contacts.address:''}}</small>
              </div>
            </div>
          </div>
        </template>
      <div slot="slot1">
        <default-info :mainData="mainData"></default-info>
      </div>
      <div slot="slot0">
        <product-list :data="mainData" @onSuccess="queryMainData($route.query.id)" ref="prod">
          <div slot="operation">
            <importFile v-if="tool.checkAuth($route.name,'importOrderMx')" class="inline-16" :bindData="{ownertable:'sa_order',ownerid:$route.query.id,usetype:'default'}" :errorUrl="errorUrl" @clearUrl="errorUrl = null" @onSuccess="bindImportOrder"></importFile>
          </div>
        </product-list>
      </div>
      <div slot="slot2">
        <orderprogress ref="prod"></orderprogress>
      </div>
      <div slot="slot3">
        <rebat></rebat>
      </div>
      <!-- <div slot="slot4">
        <dispatch></dispatch>
      </div> -->
      <div slot="slot4">
        <logistics></logistics>
      </div>
      <div slot="slot5">
        <invoiceTable></invoiceTable>
      </div>
      <div slot="slot6">
        <revenue :data="mainData"></revenue>
      </div>
      <div slot="slot7">
        <writeOff :data="mainData"></writeOff>
      </div>
    </basicDetails>
    <el-dialog append-to-body title="退回原因" :visible.sync="dialogVisible" width="400px">
      <el-input v-model="backreason" type="textarea" placeholder="请输入退回原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onRebanck" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Edit from '../modules/edit'
import defaultInfo from './tabs/defaultInfo.vue'
import productList from '../modules/productlist.vue'
import rebat from './tabs/rebatesettlement.vue'
import orderprogress from './tabs/orderpProgress.vue'
import logistics from './tabs/logistics.vue'
import dispatch from './tabs/dispatch.vue'
import invoiceTable from './tabs/invoiceTable.vue'
import revenue from './tabs/revenueAndExp.vue'
import importFile from '../modules/importFile.vue'
import writeOff from './tabs/writeoff.vue'

export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      backreason:'',
      dialogVisible:false,
      errorUrl:null,
      isusedrebate:'',
      checked:0,
      rebateamount:'',
    }
  },
  provide () {
    return {
      thisDetail:() => this
    }
  },
  components:{
    Edit,
    defaultInfo,
    productList,
    rebat,
    orderprogress,
    dispatch,
    logistics,
    invoiceTable,
    revenue,
    importFile,
    writeOff
  },
  methods:{
    async queryMainData(id) {
      return new Promise(async (re,rj) => {
        const res = await this.$api.requested({
          "id":'20221108151302',
          "content": {
            "nocache":true,
            "sa_orderid": this.$route.query.id
          }
        })
        this.mainData = res.data
        this.checked = this.mainData.rebate_used
        if (this.mainData.rebateamount > this.mainData.defaultamount) {
          this.rebateamount = this.tool.formatAmount(+this.mainData.defaultamount / 2)
        } else {
          this.rebateamount = this.mainData.rebateamount
        }
        this.changeDataStructure()
        this.queryUsedrebate()

        re()
      })
      
      
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {
          label:'订单状态',
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '新建':
                style = {color:"#000000"}
                break;
              case '提交':
                style = {color:"#d90a0a"}
                break;
              case '交期待确认':
                style = {color:"#e09a1a"}
                break;
              case '交期确认':
                style = {color:"#3874f6"}
                break;
              case '审核':
                style = {color:"#52C41A"}
                break;
              case '关闭':
                style = {color:"#b2c0ea"}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'订单类型',
          value:this.mainData.type
        },
        {
          label:'明细分类',
          value:this.mainData.typemx
        },
        {
          label:'单据日期',
          value:this.mainData.createdate
        },
        {
          label:'企业名称',
          value:this.mainData.enterprisename
        },
        {
          label:'订单总金额',
          value:this.mainData.defaultamount,
          style:function () {
            let style = {color:"#ff0000"}
            return style
          }
        },
        {
          label:'折后总金额',
          value:this.tool.formatAmount(this.mainData.amount,2),
          style:function () {
            let style = {color:"#ff0000"}
            return style
          }
        },
        {
          label:'合计数量',
          value:this.mainData.qty,
          style:function () {
            let style = {color:"#ff0000"}
            return style
          }
        },
      /*  {
          label:'合计数量',
          value:this.mainData.qty,
          style:function () {
            let style = {color:"#ff0000"}
            return style
          }
        },
        {
          label:'合计金额',
          value:this.mainData.amount,
          style:function () {
            let style = {color:"#ff0000"}
            return style
          }
        },
        {
          label:'折前金额',
          value:this.mainData.defaultamount,
          style:function () {
            let style = {color:"#ff0000"}
            return style
          }
        },*/
        /*{
          label:'企业名称',
          value:this.mainData.enterprisename
        },*/
        // {
        //   label:'收货地址',
        //   value:`${this.mainData.province}-${this.mainData.city}-${this.mainData.county}-${this.mainData.address}`
        // },
        {
          label:'品牌',
          value:this.mainData.brandname
        },
        {
          label:'领域',
          value:this.mainData.tradefield
        },
        {
          label:'领域明细',
          value:this.mainData.tradefieldmx
        },
        {
          label:'评审类型',
          value:this.mainData.optiontyperemarks?this.mainData.reviewtype + '-' + this.mainData.optiontyperemarks : this.mainData.reviewtype
        },
        {
          label:'业务员',
          value:this.mainData.saler_name
        },
        {
          label:'项目信息',
          value:this.mainData.contract_title
        },
        {
          label:'销售分类',
          value:this.mainData.saletype
        },
        {
          label:'运费状态',
          value:this.mainData.freightstatus
        },
        {
          label:'备注',
          value:this.mainData.remarks
        },
        {
          label:'退回原因',
          value:this.mainData.backreason
        },
        {
          label:'核销状态',
          value:this.mainData.writeoffstatus
        },
        {
          label:'开票状态',
          value:this.mainData.invoicestatus
        },
        {
          label:'项目备注',
          value:this.mainData.projectnote
        }
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.$router.replace({path:'/saler_orderDetails',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    // 查询站点是否使用返利金
    async queryUsedrebate () {
      const res = await this.$api.requested({
         "classname": "webmanage.site.site",
        "method": "querySite_Parameter",
        "content": {
        }
      })
      this.isusedrebate = res.data.order_rebate_used
    },
    // 提交审核订单 saletype
    onSubmit (type) {
      let siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
      console.log(siteid,this.mainData.saletype)
      if (siteid == 'HY' && this.mainData.saletype == '') return this.$message({
        message:'销售分类不能为空!',
        type:'error'
      })
      this.$confirm(`是否${type}该订单`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id": type === '审核'?20221108153502:20221108153402,
          "content": {
              "sa_orderid": this.mainData.sa_orderid,
              "sys_enterpriseid": this.mainData.sys_enterpriseid,
              "sa_accountclassid": this.mainData.accountclass.sa_accountclassid
          },
        })
        this.tool.showMessage(res,async ()=>{
          this.queryMainData()
        })
      }).catch((err) => {
        this.$message({
          type: 'info',
          message: err
        });          
      });
    },
    // 反审核订单
    onReturnCheck () {
      this.$confirm(`是否反审核该订单`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id": 20230102141502,
          "content": {
            "sa_orderid": this.mainData.sa_orderid,
          },
        })
        this.tool.showMessage(res,()=>{
          this.queryMainData()
        })
      }).catch((err) => {
        this.$message({
          type: 'info',
          message: err
        });          
      });
    },
    async onRebanck () {
      const res = await this.$api.requested({
        "id": 20221108161902,
        "content": {
          "sys_enterpriseid":this.mainData.sys_enterpriseid,
          "sa_accountclassid":this.mainData.accountclass.sa_accountclassid,
          "sa_orderid": this.mainData.sa_orderid,
          "backreason": this.backreason //退回原因,可选
        },
      })
      this.tool.showMessage(res,()=>{
        this.queryMainData()
        this.dialogVisible = false
      })
    },
    async closeOrder () {
      const res = await this.$api.requested({
        "id": 20221108164502,
        "content": {
          "sa_orderids":[this.$route.query.id]
        },
      })
      this.tool.showMessage(res,()=>{
        this.queryMainData()
        this.dialogVisible = false
      })
    },
    async confirmdate () {
      const res = await this.$api.requested({
        "id": 20221230094802,
        "content": {
          "sa_orderid": this.$route.query.id
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryMainData()
      })
    },
    async onCopy () {
      const res = await this.$api.requested({
        "id": 20230102144502,
        "content": {
          "sa_orderid": this.$route.query.id
        }
      })
      this.tool.showMessage(res,()=>{
        this.tool.showMessage(res)
      })
    },
    async bindImportOrder (id) {
      const res = await this.$api.requested({
        "id": 20230227194803,
        "content": {
        "sa_orderid":this.$route.query.id,
        "attachmentid":id
        }
      })
      this.$refs['prod'].listData()
      if (res.data !== '成功') {
        this.errorUrl = res.data
      }
      this.queryMainData()
    },
    reback () {
      this.$confirm('确定撤回订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id": 20230301190202,
          "content": {
              "sa_orderid": this.$route.query.id
          },
        })
        this.tool.showMessage(res,()=>{
          this.mainData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    },
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>
.reveive__panel{
  font-size: 16px;
  line-height: 30px;
  padding: 0 10px;
  background: #d9ecff;
  border: 1px dashed #0676e7;
}
</style>