yos_web/src/bgj/workOrderManage/modules/processInfo/index.vue

<template>
  <div class="brand">
    <el-table
      :data="tableData"
      stripe
      border
      row-key="sc_workorder_nodeid"
      size="small"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column width="55"> </el-table-column>
      <el-table-column
        prop="workname"
        :label="$t(`工序内容`)"
        show-overflow-tooltip
        width="400"
      >
        <template slot-scope="scope">
          <span>{{ $t(scope.row.workname) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t(`状态`)" width="70">
        <template slot-scope="scope">
          <div
            v-if="scope.row.parentid != 0"
            :style="{
              color:
                scope.row.status == 0
                  ? tool.getStatusColor('未完成', true)
                  : scope.row.status == 1
                  ? tool.getStatusColor('已完成', true)
                  : tool.getStatusColor('进行中', true),
            }"
          >
            {{
              scope.row.status == 0
                ? $t("未完成")
                : scope.row.status == 1
                ? $t("已完成")
                : $t("进行中")
            }}
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        show-overflow-tooltip
        :label="$t(`操作说明`)"
        min-width="400"
      >
        <template slot-scope="scope">
          {{ scope.row.remarks ? $t(scope.row.remarks) : "--" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="trainers"
        show-overflow-tooltip
        :label="$t(`操作人员`)"
        width="300"
      >
        <template slot-scope="scope">
          {{
            scope.row.trainers?.length
              ? scope.row.trainers.map((item) => $t(item.name)).join(",")
              : "--"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="remarksBz"
        show-overflow-tooltip
        :label="$t(`备注说明`)"
        min-width="400"
      >
        <template slot-scope="scope">
          {{ scope.row.remarksBz ? $t(scope.row.remarksBz) : "--" }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" width="110" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="goDetail(scope.row)" size="mini">
            {{ $t(`详情`) }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <detail
      :visible.sync="drawerVisible"
      :data="detailData"
      @close="drawerVisible = false"
    />
  </div>
</template>

<script>
import detail from "./detail.vue";
export default {
  props: ["data"],
  components: { detail },
  data() {
    return {
      tableData: [],
      drawerVisible: false,
      detailData: null,
    };
  },
  created() {},
  methods: {
    async department(callback) {
      this.tableData = this.sortBySequence(
        this.createTreeData(this.data.nodes)
      );
      console.log("this.tableData", this.tableData);
    },
    createTreeData(array) {
      var that = this;
      let arr = [];
      function convertToElementTree(node) {
        // 新节点
        var elNode = {
          parentid: node["parentid"],
          sc_workorder_nodeid: node["sc_workorder_nodeid"],
          sc_workorderid: node["sc_workorderid"],
          workname: node["workpresetjson"]?.workname,
          status: node["status"],
          parentid: node["parentid"],
          remarks: node["workpresetjson"]?.remarks,
          trainers: node["trainers"],
          remarksBz: node["remarks"],
          sequence: node["sequence"],
          children: [],
        };
        if (Array.isArray(node.child) && node.child.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.child.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.child[index]));
          }
          elNode.children = that.sortBySequence(elNode.children);
        }
        return elNode;
      }
      array.forEach((element) => {
        console.log("element-----------", element);
        arr.push(convertToElementTree(element));
      });
      console.log("arr-----------", arr);
      return arr;
    },
    sortBySequence(list) {
      return [...list].sort(
        (a, b) => (Number(a.sequence) || 0) - (Number(b.sequence) || 0)
      );
    },
    async goDetail(row) {
      const res = await this.$api.requested({
        id: 2026052615161102,
        content: {
          sc_workorderid: row.sc_workorderid,
          sc_workorder_nodeid: row.sc_workorder_nodeid,
        },
      });
      if (res.code === 1) {
        this.detailData = res.data;
        this.drawerVisible = true;
      }
    },
    handleSizeChange(val) {
      this.params.content.pageSize = val;
      this.department();
    },
    handleCurrentChange(val) {
      this.params.content.pageNumber = val;
      this.department();
    },
  },
  mounted() {
    this.department();
  },
};
</script>

<style scoped>
</style>