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 ref="checkBillRef">
          <template v-slot:download="scope">
            <el-button
              v-if="tool.checkAuth($route.name, 'checkBillDetail')"
              type="text"
              size="mini"
              @click="downLoadBill(scope.data)"
              >{{ $t("单 据 下 载") }}</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"
              >{{ $t("添 加") }}</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)"
              >{{ $t("单 据 下 载") }}</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"
              >{{ $t("添 加") }}</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: [],
      active_accoun:JSON.parse(sessionStorage.getItem('active_account')),
      folderid:JSON.parse(sessionStorage.getItem('folderid'))
    };
  },
  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"
      );
      let http = location.href.substring(0,5) == 'https'?'https://oms.idcgroup.com.cn:8079/yosweb/#/printTable?':'http://61.164.207.46:8000/yosweb/#/printTable?'
      let token = 'token=' + this.active_accoun.token
      let parentid = '&parentid=' + this.folderid.appfolderid
      let ownerid = '&ownerid=' + data.sa_workorder_confirmationid
      let action = '&action=1'
      let urlNew = http + token + parentid + ownerid + action
      if (result.length == 0)
        window.open(urlNew);
      window.open(result[result.length - 1].url, "_self");
      this.$refs.checkBillRef.listData()
    },
    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.$t(this.mainData.status),
          style: function () {
            let style = that.tool.getStatusColor(that.mainData.status);
            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.$t(this.mainData.status),
              style: function () {
                let style = that.tool.getStatusColor(that.mainData.status);
                return style;
              },
            },
            { label: "企业编号", value: this.mainData.agentnum },
            { label: "企业名称", value: this.mainData.enterprise },
            { label:'客诉大类',  value: this.mainData.class2},
            { label:'申请原因',  value: this.mainData.reason},
            { 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>