mes-sdai-admin-backend-ui/src/view/yunyin/shengchanguanli/gongdanshengchan.vue

<template>
  <div>
    <el-container>
      <!-- 左侧树形结构 -->
      <el-aside width="340px">
        <div class="JKWTree-tree">
          <h3> 组织列表</h3>
          <el-tree :data="sctreeData" :props="defaultProps" @node-click="schandleNodeClick"></el-tree>
          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </el-aside>
      <el-container>
        <el-main>

          <!-- 搜索框 -->
          <div class="gva-search-box">
            <el-form ref="elSearchFormRef" :inline="true" class="demo-form-inline" >

              <!-- 左侧查询输入框 -->
              <el-form-item>
                <el-input  placeholder="" clearable style="width: 300px;"></el-input>
              </el-form-item>

              <!-- 查询和重置按钮 -->
              <el-form-item>
                <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                <el-button icon="refresh" @click="onReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="gva-table-box">
            <div class="gva-btn-list">
              <el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
            </div>

            <!-- 表格部分 -->
            <el-table ref="multipleTable"
                      style="width: 100%;height: 400px;"
                      :data="tableData" border tooltip-effect="dark"
                      row-key="ID"
                      @selection-change="handleSelectionChange"
                      :show-summary="true"
            >
              <!-- 动态绑定 el-table-column 列 -->
              <el-table-column
                  v-for="column in dynamicColumns"
                  :key="column.prop"
                  :label="column.label"
                  :prop="column.prop"
                  :width="column.width"
                  :align="column.align"
              >
                <!-- 可以根据需要添加模板内容 -->
              </el-table-column>

              <!-- 合计行 -->
              <el-table-column
                  label="合计"
                  align="center"
                  :formatter="formatTotal"
              ></el-table-column>

              <!-- 操作列 -->
              <el-table-column align="left" label="操作" min-width="100" fixed="right">
                <template #default="scope">
                  <el-button type="primary" link icon="edit" class="table-button" @click="updateCompanyFunc(scope.row)">变更</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {ref, computed, onMounted, reactive} from 'vue';
import { workbench, getProduct, Project } from "@/api/yunyin/yunying";
export default {
  setup() {
    const totalRow = reactive({
      '产品名称': 0,
    });

    const calculateTotal = () => {
      totalRow.产品名称 = 0;

      tableData.value.forEach((item) => {
        totalRow.产品名称 += item.产品名称数量 || 0;
      });
    };

    const formatTotal = ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex === dynamicColumns.value.length - 1 && column.property === '产品名称数量') {
        return `产品名称：${totalRow.产品名称}个`;
      }
      return '';
    };

    const sctreeData = ref([
      {
        label: '设备定额及分配参数设置',
        children:[
          { label: '1.计划中工单', number: 1 },
          { label: '2.排程中工单', number: 2 },
          { label: '3.制程中工单', number: 3 },
          { label: '4.已完工工单', number: 4 }
        ],
      }
    ]);
    const treeData = ref([]); // 添加 treeData 的定义
    const tableData = ref([]);
    const currentNumber = ref(0);
    const dynamicColumns = computed(() => {
      switch (currentNumber.value) {
        case 1:
          return [
            { label: '生产分类', prop: '生产分类', width: 120, align: 'left' },
            { label: '工单编号', prop: '工单编号', width: 120, align: 'left' },
            { label: '产品代号', prop: '产品代号', width: 120, align: 'left' },
            { label: '产品名称', prop: '产品名称', width: 200, align: 'left' },
            { label: '接单日期', prop: '接单日期', width: 160, align: 'left' },
            { label: '交货日期', prop: '交货日期', width: 160, align: 'left' },
            { label: '订单数量', prop: '订单数量', width: 120, align: 'left' },
            { label: '计量单位', prop: '计量单位', width: 120, align: 'left' },
            { label: '客户名称', prop: '客户名称', width: 200, align: 'left' },
            { label: '客户编号', prop: '客户编号', width: 120, align: 'left' },
            { label: '备注', prop: '备注', width: 120, align: 'left' },
            { label: '客户料号', prop: '客户料号', width: 120, align: 'left' },
            { label: '创建用户', prop: '创建用户', width: 160, align: 'left' },
            { label: '创建时间', prop: '创建时间', width: 160, align: 'left' },
            { label: '修改时间', prop: '修改时间', width: 160, align: 'left' },
            { label: 'UNIQID', prop: 'UNIQID', width: 120, align: 'left' },
            { label: '投料率', prop: '投料率', width: 120, align: 'left' },
            { label: '销售订单号', prop: '销售订单号', width: 120, align: 'left' },
          ];
        case 2:
          return [
            { label: '工单编号', prop: '工单编号', width: 120, align: 'left' },
          ];
        case 3:
          return [
            { label: '工单编号', prop: '工单编号', width: 120, align: 'left' },
          ];
        case 4:
          return [
            { label: '工单编号', prop: '工单编号', width: 120, align: 'left' },
          ];
        default:
          return [];
      }
    });
    const schandleNodeClick = async (node) => {
      currentNumber.value = node.number;
      switch (node.number) {
        case 1:
          const Projectdata = await Project();
          tableData.value = Projectdata.data;
          break;
        case 2:
          break;
        case 3:
          break;
        case 4:
          break;
        default:
          break;
      }
    };
    const handleSelectionChange = () => {
      // 处理表格选中变化的逻辑
    };

    const updateCompanyFunc = (row) => {
      // 处理表格行的编辑操作逻辑
    };

    const workbenchdata = async () => {
      try {
        const data = await workbench();
        const rawData = data.data;
        const dataArray = Object.keys(rawData).map((key) => ({
          label: key,
          children: Object.keys(rawData[key]).map((subKey) => ({
            label: subKey,
            children: rawData[key][subKey].map((item) => ({
              label: item,
            })),
          })),
        }));
        treeData.value = dataArray;
      } catch (error) {
        console.error(error);
      }
    };

    // 获取左侧树形结构数据
    onMounted(() => {
      workbenchdata();
    });

    // 处理左侧树形结构节点点击事件
    const handleNodeClick = async (node) => {
      const custom_code = node.label; // 假设你想使用节点的 label 作为 custom_code
      console.log(custom_code);
    };

    return {
      sctreeData,
      treeData,
      totalRow,
      formatTotal,
      tableData,
      dynamicColumns,
      schandleNodeClick,
      handleSelectionChange,
      updateCompanyFunc,
      handleNodeClick,
    };
  },
};
</script>