优化组盘表获取成品编号、流水号、供方代码

dengjunjie

3 天以前 b52018589bf6c7ec1d51ce8ad000a7aa993b0ab5

 ´úÂë¹ÜÀí/WIDESEAWCS_Client/src/views/basicinfo/formula.vue

@@ -11,14 +11,43 @@
    :extend="extend"
  >
  </view-grid>

  <!-- å³ä¾§å›¾ç‰‡ä¾§è¾¹æ  - å¢žåŠ z-index层级 -->
  <div class="image-sidebar" :class="{ 'sidebar-open': isSidebarOpen }">
    <div class="sidebar-toggle" @click="toggleSidebar">
      <span>{{ isSidebarOpen ? ">" : "<" }}</span>
    </div>
    <div class="sidebar-content">
      <div class="image-container">
        <img :src="logoUrl" alt="参考图片" class="reference-image" />
        <div class="image-description">配方布局参考图</div>
      </div>
    </div>
  </div>
</template>

<script>
import extend from "@/extension/basicinfo/formula.js";
import { ref, defineComponent } from "vue";
import { ref, defineComponent, computed } from "vue";

export default defineComponent({
  setup() {
    const isSidebarOpen = ref(false);

    // å›¾ç‰‡è·¯å¾„
    const logoUrl = computed(() => {
      try {
        return require("@/assets/test.png");
      } catch (e) {
        console.log("使用相对路径加载图片");
        return "/assets/test.png";
      }
    });

    const toggleSidebar = () => {
      isSidebarOpen.value = !isSidebarOpen.value;
    };

    const table = ref({
      key: "id",
      footer: "Foots",
@@ -28,7 +57,7 @@
      sortName: "createDate",
    });

    // ç¼–辑表单字段 - æ–°å¢žpressFastenTorque（压装位紧固扭矩）
    // ç¼–辑表单字段 - å®Œå…¨åŒ¹é…åŽç«¯Dt_Formula实体类
    const editFormFields = ref({
      id: "",
      productCode: "",
@@ -37,173 +66,230 @@
      productWidth: "",
      productHeight: "",
      pressNoTighten: "",
      screwDownsetDistance: "",
      screwTorqueOutput: "",
      pressFastenTorque: "", // ã€æ–°å¢žã€‘压装位紧固扭矩
      pressNoCheckBottomPlate: "",
      screwDownsetDistance: "", // åŽç«¯æ³¨é‡Šä¸ºï¼šä¿åŽ‹åŽ‹åŠ›
      screwTorqueOutput: "", // åŽç«¯æ³¨é‡Šä¸ºï¼šä¸­å¿ƒé«˜åº¦
      dintAutoScrewOn: "",
      pressFastenTorque: "",
      p0P1Width: "",
      p0P2Width: "",
      p0P3Width: "",
      p1P3Height: "",
      p2P3Height: "",
      productImagePath: "",
      pressPressureDiff: "",
      pressTorqueDiff: "",
      detectHeightDiff: "",
      screwPositionDiff: "",
      // ç§»é™¤äº†centerHeight字段（后端无此字段，原前端配置错误映射）
    });

    // ç¼–辑表单配置-新增压装位紧固扭矩，布局适配原有紧凑性
    // ç¼–辑表单配置 - ä¿®æ­£å­—段中文名称和注释，匹配后端实体
    // é‡ç‚¹ï¼šä¸ºæ ¸å¿ƒå­—段补充必填配置（require: true）
    const editFormOptions = ref([
      // ç¬¬ä¸€è¡Œï¼šåŸºç¡€æ ‡è¯†
      [
        {
          title: "成品编号",
          required: true,
          field: "productCode",
          type: "input",
          type: "string",
          width: 200,
          require: true,
        },
        {
          title: "成品名称",
          field: "productName",
          type: "input",
          type: "string",
          width: 200,
          require: true,
          required: true,
        },
        {
          title: "拧紧程序号",
          field: "dintAutoScrewOn",
          type: "input",
          type: "string",
          inputType: "number",
          width: 180,
          placeholder: "请输入整数",
        },
        {
          title: "产品长度",
          field: "productLength",
          type: "input",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true,
        },
      ],
      [
        {
          title: "产品宽度",
          title: "产品长度", // ä¿®æ­£åŽç«¯æ³¨é‡Š
          field: "productLength",
          type: "string",
          inputType: "number",
          width: 100,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true,
        },
        {
          title: "产品宽度", // ä¿®æ­£åŽç«¯æ³¨é‡Š
          field: "productWidth",
          type: "input",
          type: "string",
          inputType: "number",
          width: 120,
          width: 100,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true,
        },
        {
          title: "产品高度",
          title: "产品高度", // ä¿®æ­£åŽç«¯æ³¨é‡Š
          field: "productHeight",
          type: "input",
          type: "string",
          inputType: "number",
          width: 120,
          width: 100,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true,
        },
      ],
      [
        {
          title: "压装位不拧紧",
          title: "不拧紧",
          field: "pressNoTighten",
          type: "select",
          width: 120,
          align: "center",
          defaultValue: "0",
          data: [
            { key: "0", value: "否" },
            { key: "1", value: "是" },
          ],
          required: true, // æ–°å¢žï¼šå¼€å…³ç±»å­—段必填
        },
        {
          title: "不测底板",
          field: "pressNoCheckBottomPlate",
          type: "select",
          width: 120,
          align: "center",
          defaultValue: "0",
          data: [
            { key: "0", value: "否" },
            { key: "1", value: "是" },
          ],
          required: true, // æ–°å¢žï¼šå¼€å…³ç±»å­—段必填
        },
        {
          title: "保压压力",
          field: "screwDownsetDistance",
          type: "input",
          inputType: "number",
          width: 150,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
        },
      ],
      [
        {
          title: "中心高度",
          field: "screwTorqueOutput",
          type: "input",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå·¥è‰ºå‚æ•°å¿…å¡«
        },
      ],
      [
        {
          title: "中心高度", // ä¿®æ­£å­—段中文名称（后端注释）
          field: "screwTorqueOutput",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå·¥è‰ºå‚æ•°å¿…å¡«
        },
        {
          title: "紧固扭矩",
          title: "紧固扭矩", // è¡¥å……完整字段名称
          field: "pressFastenTorque",
          type: "input",
          type: "string",
          inputType: "number",
          width: 150,
          width: 120,
          placeholder: "保留2位小数，默认0.00",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå·¥è‰ºå‚æ•°å¿…å¡«
        },
        {
          title: "P0P1宽度",
          field: "p0P1Width",
          type: "input",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå°ºå¯¸å‚æ•°å¿…å¡«
        },
      ],
      [
        {
          title: "P0P2宽度",
          field: "p0P2Width",
          type: "input",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå°ºå¯¸å‚æ•°å¿…å¡«
        },
      ],
      // ç¬¬å››è¡Œï¼šP系列高度 + äº§å“å›¾ç‰‡è·¯å¾„
      [
        {
          title: "P0P3宽度",
          field: "p0P3Width",
          type: "input",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå°ºå¯¸å‚æ•°å¿…å¡«
        },
        {
          title: "P1P3高度",
          field: "p1P3Height",
          type: "input",
          title: "压力差值",
          field: "pressPressureDiff",
          type: "string",
          inputType: "number",
          width: 150,
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå·®å€¼å‚æ•°å¿…å¡«
        },
      ],
      [
        {
          title: "P2P3高度",
          field: "p2P3Height",
          type: "input",
          title: "扭力差值",
          field: "pressTorqueDiff",
          type: "string",
          inputType: "number",
          width: 150,
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå·®å€¼å‚æ•°å¿…å¡«
        },
        {
          title: "产品图片路径",
          field: "productImagePath",
          type: "textarea",
          width: 400,
          rows: 2,
          placeholder: "请输入图片完整路径，支持500字符以内",
          title: "高度差值",
          field: "detectHeightDiff",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå·®å€¼å‚æ•°å¿…å¡«
        },
        {
          title: "螺纹差值",
          field: "screwPositionDiff",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true, // æ–°å¢žï¼šå·®å€¼å‚æ•°å¿…å¡«
        },
      ],
      [
        {
          title: "垫片高度",
          field: "gasketHeight",
          type: "string",
          inputType: "number",
          width: 120,
          placeholder: "保留2位小数",
          attrs: { step: 0.01, min: 0 },
          required: true,
        },
      ],
    ]);

    // æœç´¢è¡¨å•å­—段 - æ— éœ€ä¿®æ”¹
    // æœç´¢è¡¨å•å­—段
    const searchFormFields = ref({
      productCode: "",
      productName: "",
@@ -211,7 +297,7 @@
      createDate: "",
    });

    // æœç´¢è¡¨å•é…ç½® - æ— éœ€ä¿®æ”¹
    // æœç´¢è¡¨å•é…ç½®
    const searchFormOptions = ref([
      [
        { title: "成品编号", field: "productCode", type: "like", width: 200 },
@@ -223,14 +309,14 @@
      ],
    ]);

    // è¡¨æ ¼åˆ—配置 - æ–°å¢žåŽ‹è£…位紧固扭矩列
    // è¡¨æ ¼åˆ—配置 - ä¿®æ­£å­—段中文名称和注释，匹配后端实体
    const columns = ref([
      {
        field: "id",
        title: "序号",
        title: "id",
        type: "int",
        width: 80,
        hidden: true,
        // hidden: true,
        align: "center",
      },
      {
@@ -250,28 +336,28 @@
      },
      {
        field: "productLength",
        title: "产品长度",
        title: "产品长度", // ä¿®æ­£åŽç«¯æ³¨é‡Š
        type: "decimal",
        width: 90,
        align: "center",
      },
      {
        field: "productWidth",
        title: "产品宽度",
        title: "产品宽度", // ä¿®æ­£åŽç«¯æ³¨é‡Š
        type: "decimal",
        width: 90,
        align: "center",
      },
      {
        field: "productHeight",
        title: "产品高度",
        title: "产品高度", // ä¿®æ­£åŽç«¯æ³¨é‡Š
        type: "decimal",
        width: 90,
        align: "center",
      },
      {
        field: "pressNoTighten",
        title: "压装位不拧紧",
        title: "不拧紧",
        type: "select",
        width: 100,
        align: "center",
@@ -284,24 +370,38 @@
        },
      },
      {
        field: "pressNoCheckBottomPlate",
        title: "不测底板",
        type: "select",
        width: 110,
        align: "center",
        bind: {
          key: "value",
          data: [
            { key: "0", value: "否" },
            { key: "1", value: "是" },
          ],
        },
      },
      {
        field: "screwDownsetDistance",
        title: "保压压力",
        title: "保压压力", // ä¿®æ­£å­—段中文名称
        type: "decimal",
        width: 110,
        align: "center",
      },
      {
        field: "screwTorqueOutput",
        title: "中心高度",
        title: "中心高度", // ä¿®æ­£å­—段中文名称
        type: "decimal",
        width: 90,
        align: "center",
      },
      {
        field: "pressFastenTorque", // ã€æ–°å¢žã€‘表格列
        title: "压装位紧固扭矩",
        field: "pressFastenTorque",
        title: "紧固扭矩", // è¡¥å……完整字段名称
        type: "decimal",
        width: 120,
        width: 90,
        align: "center",
      },
      {
@@ -311,7 +411,6 @@
        width: 100,
        align: "center",
      },
      // P系列宽度
      {
        field: "p0P1Width",
        title: "P0P1宽度",
@@ -333,30 +432,41 @@
        width: 90,
        align: "center",
      },
      // P系列高度
      {
        field: "p1P3Height",
        title: "P1P3高度",
        field: "pressPressureDiff",
        title: "压力差值",
        type: "decimal",
        width: 90,
        width: 100,
        align: "center",
      },
      {
        field: "p2P3Height",
        title: "P2P3高度",
        field: "pressTorqueDiff",
        title: "扭矩差值",
        type: "decimal",
        width: 90,
        width: 100,
        align: "center",
      },
      {
        field: "productImagePath",
        title: "图片路径",
        type: "string",
        width: 200,
        align: "left",
        overflow: "ellipsis",
        field: "detectHeightDiff",
        title: "高度差值",
        type: "decimal",
        width: 100,
        align: "center",
      },
      // å…¬å…±å­—段
      {
        field: "screwPositionDiff",
        title: "螺纹差值",
        type: "decimal",
        width: 100,
        align: "center",
      },
      {
        field: "gasketHeight",
        title: "垫片高度",
        type: "decimal",
        width: 100,
        align: "center",
      },
      {
        field: "creater",
        title: "创建人",
@@ -387,7 +497,7 @@
      },
    ]);

    // é…æ–¹æ˜Žç»†é…ç½® - æ— éœ€ä¿®æ”¹
    // é…æ–¹æ˜Žç»†é…ç½® - åŒæ ·ç»™æ˜Žç»†å­—段添加必填
    const detail = ref({
      cnName: "配方信息详情",
      table: "FormulaDetail",
@@ -399,32 +509,34 @@
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          required: true,
          align: "center",
        },
        {
          field: "componentCode",
          title: "零件编号",
          type: "string",
          edit: { type: "" },
          edit: { type: "input" },
          width: 120,
          require: true,
          required: true, // æ˜Žç»†æ ¸å¿ƒå­—段必填
          align: "left",
        },
        {
          field: "componentName",
          title: "零件名称",
          type: "string",
          edit: { type: "" },
          edit: { type: "input" },
          width: 150,
          required: true, // æ˜Žç»†æ ¸å¿ƒå­—段必填
          align: "left",
        },
        {
          field: "supplierCode",
          title: "供方代码",
          type: "string",
          edit: { type: "" },
          edit: { type: "input" },
          width: 150,
          required: true, // æ˜Žç»†æ ¸å¿ƒå­—段必填
          align: "left",
        },
        {
@@ -440,6 +552,7 @@
              { key: "1", value: "是" },
            ],
          },
          required: true, // æ˜Žç»†å¼€å…³å­—段必填
        },
      ],
      sortName: "createDate",
@@ -455,7 +568,112 @@
      searchFormOptions,
      columns,
      detail,
      isSidebarOpen,
      logoUrl,
      toggleSidebar,
    };
  },
});
</script>

<style scoped>
/* ä¾§è¾¹æ æ ·å¼ - å¢žåŠ z-index层级 */
.image-sidebar {
  position: fixed;
  top: 0;
  right: -600px;
  width: 600px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 9999;
  display: flex;
}

.sidebar-open {
  right: 0;
}

.sidebar-toggle {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 80px;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px 0 0 8px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 10000; /* åˆ‡æ¢æŒ‰é’®çš„z-index更高 */
}

.sidebar-toggle:hover {
  background: #66b1ff;
}

.sidebar-toggle span {
  transition: transform 0.3s ease;
}

.sidebar-open .sidebar-toggle span {
  transform: rotate(180deg);
}

.sidebar-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  z-index: 9999; /* å†…容区域也设置高z-index */
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.reference-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: #f8f9fa;
}

.image-description {
  margin-top: 15px;
  padding: 10px;
  background: #409eff;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .image-sidebar {
    width: 250px;
    right: -250px;
  }

  .sidebar-toggle {
    left: -30px;
    width: 30px;
    height: 60px;
  }
}
</style>