yos_web/src/WebsiteManagement/serviceAppointMag/detail/index.vue

<template>
  <div>
    <basicDetails
        ref="details"
        :mainAreaData="mainAreaData"
        :turnPageId="20240902102903"
        idname="sa_endcustserviceorderid"
        :titleText="mainData.billno"
        :tabs="isShowSn?['服务商品','工单']:['工单']"
        @pageChange="pageChange">
      <div slot="customOperation">
        <transferService v-if="tool.checkAuth($route.name,'transferService') && mainData.status == '待处理'" btnTitle="转服务申请单" class="inline-16" message="确定将预约单转服务申请单吗" @onSuccess="queryMainData($route.query.id)" :data="mainData"></transferService>
      </div>
      <div slot="slot0" >
        <tableTemplate v-if="isShowSn" :param="SNParam" height="calc(100vh - 380px)" :tablecols="SNTablecols" @listData="listData"></tableTemplate>
        <tableTemplate v-else :param="workParam" height="calc(100vh - 380px)" :tablecols="workTablecols">
          <template v-slot:detail="scope">
            <el-button type="text" size="mini" class="inline-16" @click="goDetail(scope.data)">详 情</el-button>
          </template>
        </tableTemplate>
      </div>
      <div slot="slot1" >
        <tableTemplate :param="workParam" height="calc(100vh - 380px)" :tablecols="workTablecols">
          <template v-slot:detail="scope">
            <el-button type="text" size="mini" class="inline-16" @click="goDetail(scope.data)">详 情</el-button>
          </template>
        </tableTemplate>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import tableTemplate from "@/WebsiteManagement/serviceAppointMag/compents/tableTemplate";
import transferService from "../modules/transferService";
export default {
  name: "index",
  components:{tableTemplate,transferService},
  data(){
    return {
      mainAreaData:{},
      mainData:{},
      isShowSn:true,
      SNParam:{
        "id": "20240902134203",
        "content": {
          "siteid":JSON.parse(sessionStorage.getItem('active_account')).siteid,
          "sa_endcustserviceorderid":this.$route.query.id,
          "pageNumber":1,
          "pageSize":50,
          "where":{
            "condition":""
          }
        }
      },
      SNTablecols:this.tool.tabelCol(this.$route.name)['SNCodeTable'].tablecols,
      workParam:{
        "id": "20240902102803",
        "content": {
          "siteid":JSON.parse(sessionStorage.getItem('active_account')).siteid,
          "sa_endcustserviceorderid":this.$route.query.id,
          "pageNumber":1,
          "pageSize":50,
          "where":{
            "condition":""
          }
        }
      },
      workTablecols:this.tool.tabelCol(this.$route.name)['WorkBillTable'].tablecols,
    }
  },
  methods:{
    async queryMainData(id){
      const res = await this.$api.requested({
        "id": "20240902102703",
        "content": {
          "siteid":"HY",
          "sa_endcustserviceorderid":id
        }
      })
      this.mainData = Object.assign({},this.mainData,res.data)
      this.changeDataStructure()
    },
    changeDataStructure () {
      let that = this
      this.mainAreaData = [
        {
          label:'企业名称',
          value: this.mainData.enterprisename
        },
        {
          label:'联系人',
          value: this.mainData.name
        },
        {
          label:'联系电话',
          value: this.mainData.phonenumber
        },
        {
          label:'省市县',
          value: this.mainData.province + '-' + this.mainData.county + '-' + this.mainData.city
        },
        {
          label:'详细地址',
          value: this.mainData.address
        },
        {
          label:'提交人手机号',
          value: this.mainData.scenecontactphonenumber
        },
        {
          label:'状态',
          value: this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '待处理':
                style = {color:'#d90a0a'}
                break;
              case '已确认':
                style = {color:'#79da56'}
                break;
              case '服务中':
                style = {color:'#1376e7'}
                break;
              default:
                style = {color:'#151515'}
                break;
            }
            return style

          }
        },
        {
          label:'服务类型',
          value: this.mainData.servicetype
        },
        {
          label:'应用系统',
          value: this.mainData.class1
        },
        {
          label:'客诉大类',
          value: this.mainData.class2
        },
        {
          label:'问题描述',
          value: this.mainData.remarks
        }
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.flag = 0
      this.$router.replace({path:'/serviceAppointMagDetail',query:{id:id,rowindex:rowindex,portrait:''}})
      this.queryMainData(id)
    },
    /*工单跳转*/
    goDetail (scope) {
      let route = this.$route
      if (route.path !== '/workorderDetail') {
        this.oldRoute = {path:route.path,query:route.query}
        this.$store.dispatch('setHistoryRouter',this.oldRoute)
      }
      this.$router.replace({path:'/workorderDetail',query:{id:scope.data.sa_workorderid,rowindex:scope.data.rowindex}})
    },
    listData(data){
      data.length > 0?this.isShowSn = true:this.isShowSn = false
    }
  },
  mounted() {
    this.queryMainData(this.$route.query.id)
  },
  created() {
    this.SNTablecols = this.tool.tabelCol(this.$route.name)['accountMoneyDetailTable'].tablecols
  }
}
</script>

<style scoped>

</style>