airoptweb/src/views/titlecomponent/ffds.vue

<template>
  <div class="XFpdding">
    <div>
      <el-form-item label="FFD box：" :label-width="formLabelWidth1">
        <el-input
          v-model="cstnum"
          :max="20"
          controls-position="right"
          @keydown.enter="keydownenter"
        >
        <template #append>
          <fileUploads
          :projectId="123" 
          solverType="exampleSolver" 
          accept=".xyz" 
          upId="uniqueId1" 
          name="点击选择文件"
          :imgSrc="imageSrc"
          />
        </template>
        </el-input>
      <el-form-item label="FFD包围盒：" :label-width="formLabelWidth1" style="align-items: center;">
        <el-row align="middle" :gutter="20">
          <el-col :span="22">
            <el-input
              v-model="ffdvalue.fname"
              :max="20"
              controls-position="right"
              @keydown.enter="keydownenter"
            />
          </el-col>
          <el-col :span="2">
            <el-upload
            class="upload-demo"
            action="your-upload-api-endpoint"  
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :show-file-list="false"
            >
            <img 
            src="" 
            alt="Button Image" 
            style="width: 40px; height: 40px; cursor: pointer;"
            @click="handleUploadClick" 
            />
            </el-upload>
          </el-col>
        </el-row>
        
      </el-form-item>
      <el-form-item label="参考坐标系：" :label-width="formLabelWidth1">
        <el-radio-group v-model="order">
          <el-radio :value="0" :label="0">x-y-z</el-radio>
          <el-radio :value="1" :label="1">x-z-y</el-radio>
          <el-radio :value="2" :label="2">y-x-z</el-radio>
          <el-radio :value="3" :label="3">y-z-x</el-radio>
          <el-radio :value="4" :label="4">z-x-y</el-radio>
          <el-radio :value="5" :label="5">z-y-x</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <el-form-item label="控制点数：" :label-width="formLabelWidth1">
      <div style="display: flex">
        <el-input type="text" style="margin-right: 10px" v-model="ffdvalue.nx">
          <!-- <template #prepend>X方向</template> -->
          <template #prefix>X方向</template>
        </el-input>
        <el-input type="text" style="margin-right: 10px" v-model="ffdvalue.ny">
          <template #prefix>Y方向</template>
        </el-input>
        <el-input type="text" style="margin-right: 10px" v-model="ffdvalue.nz">
          <template #prefix>Z方向</template>
        </el-input>
        <el-button @click="generateTable">应用</el-button>
      </div>
    </el-form-item>
    <div class="classtable">
      <el-table :data="tableDatacst1" style="width: 100%" border>
        <el-table-column prop="表格" label="表格" width="180" />
        <el-table-column
          v-for="(item, index) in tablecstHeaders"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template #default="{ row }">
            <el-input v-model="row[item.prop]" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script  setup>
import { ref, onMounted, reactive, provide, nextTick } from "vue"
import { RouterView, RouterLink, useRouter, useRoute } from "vue-router"
import myheader from "@/components/header.vue"
import fileUploads from '../components/fileuploads.vue'
import { request, uploadFile } from "@/utils/request"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import { Edit, CaretBottom } from "@element-plus/icons-vue"
let formLabelWidth3 = ref(100)
let formLabelWidth200 = ref(200)
let cstnum = ref("")
let pid = ref()
let fid = ref()
let ffdid = ref()
let ffdvalue = ref({
  fname: "",
  nx: 0,
  ny: 0,
  nz: 0
})
let order = ref(0)
let vars = ref()
let tableDatacst1 = ref([])
let tablecstHeaders = ref([]) // 表格列头
const imageSrc = new URL('@/assets/flowimg/ffdFileSave.png', import.meta.url).href;
const generateTable = () => {
  console.log("generateTable");

  // 获取X, Y, Z方向的数值
  const xCount = Number(ffdvalue.value.nx);
  const yCount = Number(ffdvalue.value.ny);
  const zCount = Number(ffdvalue.value.nz);

  // 根据选中的参考坐标系来确定列名和行名
  let columns = [];
  let rows = [];

  switch (order.value) {
    case 0: // x-y-z
      columns = Array.from({ length: xCount }, (_, i) => ({ label: `x${i + 1}`, prop: `x${i + 1}` }));
      rows = Array.from({ length: yCount }, (_, i) => ({ label: `y${i + 1}`, prop: `y${i + 1}` }));
      break;
    case 1: // x-z-y
      columns = Array.from({ length: xCount }, (_, i) => ({ label: `x${i + 1}`, prop: `x${i + 1}` }));
      rows = Array.from({ length: zCount }, (_, i) => ({ label: `z${i + 1}`, prop: `z${i + 1}` }));
      break;
    case 2: // y-x-z
      columns = Array.from({ length: yCount }, (_, i) => ({ label: `y${i + 1}`, prop: `y${i + 1}` }));
      rows = Array.from({ length: xCount }, (_, i) => ({ label: `x${i + 1}`, prop: `x${i + 1}` }));
      break;
    case 3: // y-z-x
      columns = Array.from({ length: yCount }, (_, i) => ({ label: `y${i + 1}`, prop: `y${i + 1}` }));
      rows = Array.from({ length: zCount }, (_, i) => ({ label: `z${i + 1}`, prop: `z${i + 1}` }));
      break;
    case 4: // z-x-y
      columns = Array.from({ length: zCount }, (_, i) => ({ label: `z${i + 1}`, prop: `z${i + 1}` }));
      rows = Array.from({ length: xCount }, (_, i) => ({ label: `x${i + 1}`, prop: `x${i + 1}` }));
      break;
    case 5: // z-y-x
      columns = Array.from({ length: zCount }, (_, i) => ({ label: `z${i + 1}`, prop: `z${i + 1}` }));
      rows = Array.from({ length: yCount }, (_, i) => ({ label: `y${i + 1}`, prop: `y${i + 1}` }));
      break;
    default:
      break;
  }

  // 更新表格列头
  tablecstHeaders.value = columns;

  // 生成表格的数据行
  tableDatacst1.value = [];
  for (let i = 1; i <= rows.length; i++) {
    let row = { 表格: rows[i - 1].label };
    columns.forEach((column) => {
      row[column.prop] = null; // 每个单元格初始化为空
    });
    tableDatacst1.value.push(row);
  }
};

// 用来生成 vars，存储表格中除了行名与列名的所有值
const generateVars = () => {
  let values = [];

  tableDatacst1.value.forEach(row => {
    tablecstHeaders.value.forEach(col => {
      let value = row[col.prop];
      if (value === null || value === undefined || value === '') {
        value = ' ';
      }
      values.push(value);
    });
  });

  // 将值拼接成用逗号分隔的字符串
  vars.value = values.join(',');
};

const initializeTableFromVars = () => {
  if (!vars.value) return; 

  const values = vars.value.split(','); 

  let index = 0; 

  // 遍历 tableDatacst1 中的每一行
  tableDatacst1.value.forEach(row => {
    columns.forEach(col => {
      if (index < values.length) {
        // 将解析后的值赋给相应的单元格
        row[col.prop] = values[index] === ' ' ? '' : values[index]; // 空格用空字符串代替
        index++; 
      }
    });
  });
};


// ffd查询
const getffd = (id) => {
  pid.value = id;
  const params = {
    transCode: "MDO0043",
    pid: pid.value
  };
  request(params).then((res) => {
    if (res.hasOwnProperty("ffdid")) {
      ffdid.value = res.ffd;
      ffdvalue.value.fname = res.fname;
      ffdvalue.value.nx = res.nx;
      ffdvalue.value.ny = res.ny;
      ffdvalue.value.nz = res.nz;
      order.value = Number(res.order);
      vars.value = res.vars;
      initializeTableFromVars();
    }
  })
  .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
};

// ffd保存
const getffdsave = () => {
  generateVars();
  const params = {
    transCode: "MDO0044",
    pid: pid.value,
    fid: fid.value,
    fname: ffdvalue.value.fname,
    nx: ffdvalue.value.nx,
    ny: ffdvalue.value.ny,
    nz: ffdvalue.value.nz,
    order: order.value,
    vars: vars.value,
    checked:1
  };
  request(params)
    .then((res) => {
      ElMessage({
        message: res.returnMsg,
        type: 'success',
      })
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg);
    });
};

defineExpose({ getffd, getffdsave });

</script>