yos_web/src/HDrpManagement/serveBill/modules/detail.vue

<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.billno"
        :oldFormPath="{edit:'/HDrpManagement/serveBill/components'}"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20230206091703"
        idname="sa_serviceorderid"
        ownertable="sa_serviceorder"
        :delApiId="20230206091803"
        :statusCheck="[{key:'status',value:'待处理'},{key:'status',value:'进行中'},{key:'status',value:'提交'},{key:'status',value:'待指派'},{key:'status',value:'已完成'}]"
        tags=""
        :tabs="['详细信息','关联工单','服务商品']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation" >
        <Edit v-if="tool.checkAuth($route.name,'update') && mainData.status == '新建'" class="inline-16" :data="mainData" @onSuccess="queryMainData" />
        <changeBill v-if="mainData.status == '待指派' && tool.checkAuth($route.name,'changeBill')" class="inline-16" @onSuccess="queryMainData" :data="mainData"></changeBill>
        <customBtn 
          btnName="提交"
          message="确认提交当前服务申请单吗?"
          idName="20230206101403"
          keyName="sa_serviceorderid"
          :id="$route.query.id"
          :paramData="[{key:'issumbit',value:1}]"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status == '新建'"
        />
        <customBtn 
          btnName="退回"
          message="确认退回当前服务申请单吗?"
          idName="20230206101403"
          keyName="sa_serviceorderid"
          :id="$route.query.id"
          :paramData="[{key:'issumbit',value:0}]"
          :dialog="true"
          dialogTitle="请输入退回原因"
          dialogKey="backreason"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status == '提交'"
        />
      </div>
      <div slot="slot0" >
        <detailInfo :more="true" :data="detailInfo"></detailInfo>
      </div>
      <div slot="slot1" >
        <workBill ref="workBill">
          <!-- <template v-slot:delProduct="scope">
            <delete-btn nameId="20230206162003" nameKey="sa_serviceorderitemsids" :id="scope.data.sa_serviceorderid" @deleteSuccess="$refs.workBill.listData()"></delete-btn>
          </template> -->
        </workBill>
      </div>
      <div slot="slot2">
        <productTable ref="product">
          <addProduct v-if="tool.checkAuth($route.name,'serveProduct') && mainData.status == '新建'" slot="addProduct" :data="mainData" @onSuccess="$refs.product.listData()" />
          <template v-slot:editProduct="scope">
            <el-button class="inline-16" v-if="tool.checkAuth($route.name,'serveProduct') && mainData.status == '新建'" type="text" size="mini" @click="$refs.product.currentProduct=scope.data">编 辑</el-button>            
          </template>
          <template v-slot:delProduct="scope">
            <delete-btn nameId="20230206162003" v-if="tool.checkAuth($route.name,'serveProduct') && mainData.status == '新建'" nameKey="sa_serviceorderitemsids" :id="scope.data.sa_serviceorderitemsid" @deleteSuccess="$refs.product.listData()"></delete-btn>
          </template>
        </productTable>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import detailInfo from '@/components/detailInfo/index'
import changeBill from '../components/changeBill'
import Edit from '../components/edit'

import workBill from './workBill/index'
import productTable from './product/index'
import addProduct from './product/add'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      detailInfo:[]
    }
  },
  components:{
    detailInfo,
    changeBill,
    Edit,
    workBill,
    productTable,
    addProduct
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20230206091603,
        "content": {
          "sa_serviceorderid": this.$route.query.id
        }
      })
      this.mainData = res.data
      console.log(this.mainData);
      
      this.changeDataStructure()
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {label:'单号',value:this.mainData.billno ? this.mainData.billno : ''},
        {label:'单据日期',value:this.mainData.billdate ? this.mainData.billdate : ''},
        {label:'状态',value:this.mainData.status ? this.mainData.status : '',
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '进行中':
                style = {color:'#52c41a'}
                break;
              case '待处理':
                style = {color:'#3874f6'}
                break;
              case '新建':
                style = {color:'#333333'}
                break;
              case '提交':
                style = {color:'#3874f6'}
                break; 
              case '待指派':
                style = {color:'#fa8c16'}
                break; 
              case '已完成':
                style = {color:'#fa8c16'}
                break; 
              default:
                break;
            }
            return style
            
          }  
        },
        {label:'经销商编号',value:this.mainData.agentnum ? this.mainData.agentnum : ''},
        {label:'经销商',value:this.mainData.enterprisename ? this.mainData.enterprisename : ''},
        {label:'省市县',value:`${this.mainData.province}-${this.mainData.city}-${this.mainData.county}`},
        {label:'地址',value:this.mainData.address ? this.mainData.address : ''},
        {label:'关联订单',value:this.mainData.sonum ? this.mainData.sonum : ''},
        {label:'服务分类',value:this.mainData.servicetype ? this.mainData.servicetype : ''},
        {label:'服务联系人',value:this.mainData.scenecontact ? this.mainData.scenecontact : ''},
        {label:'联系人角色',value:this.mainData.scenecontactrole ? this.mainData.scenecontactrole : ''},
        {label:'服务联系电话',value:this.mainData.scenecontactphonenumber ? this.mainData.scenecontactphonenumber : ''},
        {label:'应用系统',value:this.mainData.class1 ? this.mainData.class1 : ''},
        {label:'客诉大类',value:this.mainData.class2 ? this.mainData.class2 : ''},
        {label:'需求服务开始日期',value:this.mainData.begdate ? this.mainData.begdate : ''},
        {label:'需求服务结束日期',value:this.mainData.enddate ? this.mainData.enddate : ''},
        {label:'申请原因',value:this.mainData.reason ? this.mainData.reason : ''},
        {label:'备注',value:this.mainData.remarks ? this.mainData.remarks : ''},
      ]
      this.detailInfo = [
        {
          title:'基本信息',
          info: [
            {label:'单号',value:this.mainData.billno},
            {label:'单据日期',value:this.mainData.billdate},
            {label:'状态',value:this.mainData.status},
            {label:'经销商编号',value:this.mainData.agentnum},
            {label:'经销商',value:this.mainData.enterprisename},
            {label:'省市县',value:`${this.mainData.province}-${this.mainData.city}-${this.mainData.county}`},
            {label:'关联订单',value:this.mainData.sonum},
            {label:'服务分类',value:this.mainData.servicetype},
            {label:'服务联系人',value:this.mainData.scenecontact},
            {label:'联系人角色',value:this.mainData.scenecontactrole},
            {label:'服务联系电话',value:this.mainData.scenecontactphonenumber},
            {label:'应用系统',value:this.mainData.class1},
            {label:'客诉大类',value:this.mainData.class2},
            {label:'申请原因',value:this.mainData.reason},
            {label:'需求服务开始日期',value:this.mainData.begdate},
            {label:'需求服务结束日期',value:this.mainData.enddate},
            {label:'备注',value:this.mainData.remarks ? this.mainData.remarks : ''},
          ]
        },
        {
          title:'系统信息',
          info: [
            {label:'创建人',value:this.mainData.createby},
            {label:'创建时间',value:this.mainData.createdate},
            {label:'提交人',value:this.mainData.submitby},
            {label:'提交时间',value:this.mainData.submitdate},
          ]
        }
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/serveBillDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>

</style>