yos_web/src/HDrpManagement/toolBorrowingMag/detail/index.vue

<template>
  <div>
    <basicDetails
      ref="details"
      :titleText="`单号:${mainData.sonum}`"
      :editData="mainData"
      :mainAreaData="mainAreaData"
      turnPageId="20230114105002"
      idname="sa_orderid"
      ownertable="sa_order"
      delApiId="20230116100002"
      :statusCheck="[{key:'status',value:'审核'},{key:'status',value:'交期待确认'},{key:'status',value:'提交'},{key:'status',value:'交期确认'}]"
      :tabs="['借用单明细','发货单','物流单','收支明细']"
      @pageChange="pageChange"
      @onEditSuccess="onEditSuccess">
      <div slot="customOperation" class="inline-16">
          <Edit v-if="tool.checkAuth($route.name,'update') && mainData.status == '新建'" class="inline-16" @onSuccess="queryMainData()" :data="mainData" />
          <el-button v-if="tool.checkAuth($route.name,'confirmDate')" :disabled="mainData.status !== '交期待确认'" class="inline-16"  type="primary" size="mini" @click="confirmdate">确认交期</el-button>
          <confirmDate v-if="tool.checkAuth($route.name,'replyDate')" class="inline-16" :data="mainData" @onSuccess="queryMainData"></confirmDate>
          <el-popover
            placement="top"
            v-model="visible">
            <p  class="mt-10 normal-title">选择评审类型</p>
            <el-select class="mt-10" v-model="value" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value + '-' + item.remarks"
                :value="item.value">
                <span style="float: left">{{ item.value }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
              </el-option>
            </el-select>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button  type="primary" size="mini" @click="onSubmit('审核')">确定</el-button>
            </div>
            <el-button class="inline-16" v-if="tool.checkAuth($route.name,'examine')"  :disabled="mainData.status !== '提交' && mainData.status !== '交期确认'" type="primary" size="mini" slot="reference">审 核</el-button>
          </el-popover>
          
          <el-button v-if="tool.checkAuth($route.name,'examine')" :disabled="mainData.status !== '审核'" type="primary" size="mini" @click="onReturnCheck">反审核</el-button>
          <el-button v-if="tool.checkAuth($route.name,'reback')"  type="primary" size="mini" @click="dialogVisible = true">退 回</el-button>
          <el-button v-if="tool.checkAuth($route.name,'submit')" :disabled="mainData.status !== '新建'"  type="primary" size="mini" @click="onSubmit('提交')">提 交</el-button>
          <!-- <el-button v-if="tool.checkAuth($route.name,'close')" :disabled="mainData.status !== '审核'" type="primary" size="mini" @click="closeOrder">关 闭</el-button> -->
          <!-- <el-button v-if="tool.checkAuth($route.name,'insert')"  type="primary" size="mini" @click="onCopy">复 制</el-button> -->
      </div>
      <div slot="slot0" >
        <toolList ref="tool" :data="mainData" @queryDetail="queryMainData"></toolList>
      </div>
       <div slot="slot1">
        <dispatch></dispatch>
      </div>
      <div slot="slot2">
        <logistics></logistics>
      </div>
      <div slot="slot3">
        <revenue :data="mainData"></revenue>
      </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 toolList from './tabs/toolList.vue'
import confirmDate from '../modules/confirmDate.vue'
import dispatch from './tabs/dispatch.vue'
import logistics from './tabs/logistics.vue'
import revenue from './tabs/revenueAndExp.vue'
import Edit from '../modules/edit'

export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      backreason:'',
      options:[],
      dialogVisible:false,
      visible:false,
      value:''
    }
  },
  provide () {
    return {
      thisDetail:() => this
    }
  },
  components:{
    toolList,
    confirmDate,
    dispatch,
    logistics,
    revenue,
    Edit
  },
  methods:{
    async orderreviewtype () {
      const res = await this.$store.dispatch('optiontypeselect','orderreviewtype')
      this.options = res.data
      this.value = res.data[0].value
    },
    onEditSuccess(){
      this.queryMainData()
      this.queryTool()
    },
    queryTool(){
      this.$refs.tool.listData()
    },
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20230114140402,
        "content": {
          "sa_orderid": this.$route.query.id
        }
      })
      this.mainData = res.data
      this.changeDataStructure()
      this.orderreviewtype()
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {
          label:'单据日期',
          value:this.mainData.billdate
        },
        {
          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.enterprisename
        },
        {
          label:'合计数量',
          value:this.mainData.qty * this.mainData.toolcount
        },
        {
          label:'合计金额',
          value:this.tool.formatAmount(this.mainData.amount,2)
        },
        {
          label:'借用合同',
          value:this.mainData.contract_title?this.mainData.contract_title:'无合同'
        },
        {
          label:'审核日期',
          value:this.mainData.checkdate
        },
        {
          label:'收货人',
          value:this.mainData.name
        },
        {
          label:'收货地址',
          value:this.mainData.province + this.mainData.city + this.mainData.county + this.mainData.address
        },

        {
          label:'备注',
          value:this.mainData.remarks
        }
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/toolBorrowingMagDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    },
    // 提交审核订单
    onSubmit (type) {
      this.$confirm(`是否${type}该订单`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id": type === '审核'?20230114161402:20230114160002,
          "content": {
            "sa_orderid": this.mainData.sa_orderid,
            "sys_enterpriseid": this.mainData.sys_enterpriseid,
            "sa_accountclassid": this.mainData.accountclass.sa_accountclassid,
            "reviewtype":type === '审核'?this.value:''
          },
        })
        this.tool.showMessage(res,async ()=>{
          this.visible = false
          this.queryMainData()
        })
      }).catch((err) => {
        this.$message({
          type: 'info',
          message: '取消提交'
        });          
      });
    },
    // 反审核订单
    onReturnCheck () {
      this.$confirm(`是否反审核该订单`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id": 20230114161502,
          "content": {
            "sa_orderid": this.mainData.sa_orderid,
          },
        })
        this.tool.showMessage(res,()=>{
          this.$store.dispatch('changeDetailDrawer',false)
        })
      }).catch((err) => {
        this.$message({
          type: 'info',
          message: err
        });          
      });
    },
    async onRebanck () {
      const res = await this.$api.requested({
        "id": 20230116085902,
        "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
        this.$store.dispatch('changeDetailDrawer',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": 20230129154102,
        "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)
      })
    },
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>

</style>