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

<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.billno"
        :oldFormPath="{edit:'HDrpManagement/serveWorkBill/components'}"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20221031141102"
        idname="sa_workorderid"
        ownertable="sa_workorder"
        tags=""
        :tabs="mainData.actiontype == '工序模板' ? ['工序详情','确认单','服务团队','工单物料','详细信息'] : ['服务商品','确认单','服务团队','详细信息']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation" >
        <!-- <customBtn 
          btnName="接单"
          message="确认接单当前服务工单吗?"
          idName="20230210101103"
          keyName="sa_workorderid"
          :id="$route.query.id"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status == '新建' && tool.checkAuth($route.name,'join')"
        />
        <customBtn 
          btnName="开始"
          message="确认开始当前服务工单吗?"
          idName="20230209144503"
          keyName="sa_workorderid"
          :id="$route.query.id"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status == '待开始' && tool.checkAuth($route.name,'start')"

        /> -->
        <customBtn 
          btnName="暂停"
          message="确认暂停当前服务工单吗?"
          idName="20230209144603"
          keyName="sa_workorderid"
          :id="$route.query.id"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status == '进行中' && tool.checkAuth($route.name,'stop')"

        />
        <customBtn 
          btnName="启用"
          message="确认启用当前服务工单吗?"
          idName="20230209144703"
          keyName="sa_workorderid"
          :id="$route.query.id"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status == '暂停' && tool.checkAuth($route.name,'used')"

        />
        <!-- <customBtn 
          btnName="完结"
          message="确认完结当前服务工单吗?"
          idName="20230209144903"
          keyName="sa_workorderid"
          :id="$route.query.id"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status != '新建' && tool.checkAuth($route.name,'complete')"

        /> -->
        <customBtn 
          btnName="作废"
          message="确认作废当前服务工单吗?"
          idName="20230209144803"
          keyName="sa_workorderid"
          :id="$route.query.id"
          @onSuccess="queryMainData"
          class="inline-16"
          v-if="mainData.status != '完结' && tool.checkAuth($route.name,'delete')"
        />
      </div>
      <div slot="slot0" v-if="mainData.actiontype == '工序模板'">
        <taskDetail :data="nodes">
          <template v-slot:detail="scope">
              <taskListDetail class="inline-16" :data="scope.data"></taskListDetail>
          </template>
          <!-- <template v-slot:edit="scope">
            <taskListEdit class="inline-16" :data="scope.data"/>
          </template> -->
        </taskDetail>
      </div>
      <div slot="slot1" v-if="mainData.actiontype == '工序模板'">
        <checkBill>
          <template v-slot:download="scope">
            <el-button v-if="tool.checkAuth($route.name,'checkBillDetail')" type="text" size="mini" @click="downLoadBill(scope.data)">单 据 下 载</el-button>
          </template>
        </checkBill>
      </div>
      <div slot="slot2" v-if="mainData.actiontype == '工序模板'">
        <teamList v-if="tool.checkAuth($route.name,'teamList')" ref="teamList" :data="mainData.team">
          <selectTeam ref="team" @teamChange="teamChange" slot="add">
            <el-button  v-if="tool.checkAuth($route.name,'teamHandle')" class="button-new-tag" size="small" type="primary" @click="$refs.team.dialogFormVisible=true">添 加</el-button>
          </selectTeam>
        </teamList>
      </div>
      <div slot="slot3" v-if="mainData.actiontype == '工序模板'">
        <Items :data="mainData"></Items>
      </div>
      <div slot="slot4" v-if="mainData.actiontype == '工序模板'">
        <detailInfo :more="true" :data="detailInfo"></detailInfo>
      </div>

      <div slot="slot0" v-if="mainData.actiontype != '工序模板'">
        <Items :data="mainData"></Items>
      </div>
      <div slot="slot1" v-if="mainData.actiontype != '工序模板'">
        <checkBill>
          <template v-slot:download="scope">
            <el-button v-if="tool.checkAuth($route.name,'checkBillDetail')" type="text" size="mini" @click="downLoadBill(scope.data)">单 据 下 载</el-button>
          </template>
        </checkBill>
      </div>
      <div slot="slot2" v-if="mainData.actiontype != '工序模板'">
        <teamList v-if="tool.checkAuth($route.name,'teamList')" ref="teamList" :data="mainData.team">
          <selectTeam ref="team" @teamChange="teamChange" slot="add">
            <el-button  v-if="tool.checkAuth($route.name,'teamHandle')" class="button-new-tag" size="small" type="primary" @click="$refs.team.dialogFormVisible=true">添 加</el-button>
          </selectTeam>
        </teamList>
      </div>
      <div slot="slot3" v-if="mainData.actiontype != '工序模板'">
        <detailInfo :more="true" :data="detailInfo"></detailInfo>
      </div>
      
    </basicDetails>
  </div>
</template>

<script>
import detailInfo from '@/components/detailInfo/index'
import taskDetail from './taskDetail/index'
import taskListDetail from './taskDetail/taskListDetail'
import taskListEdit from './taskDetail/taskListEdit'
import checkBill from './checkBill/index'
import teamList from './teamList/index'
import Items from './items/index'
import selectTeam from '../components/teamSelect'
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "detail",
  data() {
    return {
      mainData:'',
      mainAreaData:{},
      detailInfo:'',
      nodes:[]
    }
  },
  components:{
    detailInfo,
    taskDetail,
    taskListDetail,
    taskListEdit,
    checkBill,
    teamList,
    Items,
    selectTeam
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20230208140103,
        "content": {
          "sa_workorderid": this.$route.query.id
        }
      })
      this.mainData = res.data
      this.changeDataStructure()
      console.log(res.data);
      
      this.nodes = this.createTreeData(res.data.nodes)
      console.log(this.nodes);
            
    },
    downLoadBill (data) {
      let result = data.attinfos.filter(item => item.usetype == "comfirmbill")
      if(result.length == 0) return this.$message({
        type:'warning',
        message:'暂无单据信息'
      })      
      window.open(result[0].url,'_self')
    },
    async teamChange (data) {
      let result = data.map(item => {
        return item.userid
      })
      const res = await this.$api.requested({
        "id": 20220930103603,
        "content": {
            "ownertable":'sa_workorder',
            "ownerid":this.$route.query.id,
            "justuserids":false,
            "userids": result
        }
      })
      this.tool.showMessage(res,() => {
        this.$refs.team.dialogFormVisible = false
        this.$refs.teamList.listData()
      })
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {
          label:'单号',
          value:this.mainData.billno
        },
        {
          label:'服务申请单号',
          value:this.mainData.servicebillno
        },
        {
          label:'工单类型',
          value:this.mainData.type
        },
        {
          label:'负责人',
          value:this.mainData.projectleader
        },
        {
          label:'状态',
          value: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
        },
        {
          label:'经销商',
          value:this.mainData.enterprisename
        },
        {
          label:'省市县',
          value:this.mainData.province + this.mainData.city + this.mainData.county
        },
        {
          label:'业务员',
          value:this.mainData.saler_name
        },
        {
          label:'业务员电话',
          value:this.mainData.salerphonenumber
        },
        {
          label:'地址',
          value:this.mainData.address
        },
        {
          label:'创建时间',
          value:this.mainData.createdate
        },
        {
          label:'结束时间',
          value:this.mainData.enddate
        },
        {
          label:'操作类型',
          value:this.mainData.actiontype
        }
      ]
      this.detailInfo = [
        {
          title:'基本信息',
          info: [
            {label:'单号',value:this.mainData.billno},
            {label:'申请单号',value:this.mainData.servicebillno},
            {
              label:'状态',
              value: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},
            {label:'经销商',value:this.mainData.enterprise},
            {label:'现场联系人',value:this.mainData.scenecontact},
            {label:'联系人电话',value:this.mainData.scenecontactphonenumber},
            {label:'工单负责人',value:this.mainData.projectleader},
            {label:'工单类型',value:this.mainData.type},
            {label:'工单模板',value:this.mainData.name},
            {label:'省市县',value:`${this.mainData.province}-${this.mainData.city}-${this.mainData.county}`},
            {label:'地址',value:this.mainData.address},
            {label:'创建人',value:this.mainData.createby},
            {label:'创建时间',value:this.mainData.createdate},
          ]
        },
      ]
    },
    createTreeData (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        var elNode = {
          amount:node['amount'],
          attinfos:node['attinfos'],
          changeby: node["changeby"],
          changedate:node['changedate'],
          changeuserid:node['changeuserid'],
          confirm_value:node['confirm_value'],
          finishby:node['finishby'],
          parentid:node['parentid'],
          remarks:node['remarks'],
          sa_workorder_nodeid:node['sa_workorder_nodeid'],
          sa_workorderid:node['sa_workorderid'],
          sequence:node['sequence'],
          status:node['status'],
          textcontent:node['textcontent'],
          workname:node['workpresetjson'].workname,
          additem:node['workpresetjson'].additem,
          addperson:node['workpresetjson'].amountpay,
          confirm_options:node['workpresetjson'].confirm_options,
          confirm:node['workpresetjson'].confirm,
          contractupload:node['workpresetjson'].contractupload,
          fileupload:node['workpresetjson'].fileupload,
          itemtype:node['workpresetjson'].itemtype,
          remarks:node['workpresetjson'].remarks,
          required:node['workpresetjson'].required,
          textedit:node['workpresetjson'].textedit,
          children: [],
        }
          
        if (node.child && node.child.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.child.length; index++) {
          // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
          elNode.children.push(convertToElementTree(node.child[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/workorderDetail',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>