严智鑫
2024-08-01 903adb90f70518fce4bc22d69008c3eee30e4f89
UI-Project/src/views/GlassStorage/MaterialRackManagement.vue
@@ -1,144 +1,174 @@
<template>
  <div  class="app-container">
    <el-card style="flex: 1; margin-left: 10px; " :loading="loading">
      <div slot="header" class="clearfix" style="display: flex; align-items: center;">
  <div class="app-container">
    <el-card style="flex: 1; margin-left: 10px" :loading="loading">
      <div
        slot="header"
        class="clearfix"
        style="display: flex; align-items: center"
      >
        <!-- 左侧按钮组 -->
        <div>
          <el-button type="success" size="mini" @click="storage()"
            >原片仓储详情</el-button
          >
          <el-button type="success" size="mini" @click="handleInbound()"
            >入库</el-button
          >
          <el-button type="success" size="mini">吊装位入库</el-button>
        </div>
<!-- 左侧按钮组 -->
<div >
  <el-button type="success" size="mini"  @click="storage()">原片仓储详情</el-button>
  <el-button type="success" size="mini" @click="handleInbound()">入库</el-button>
  <el-button type="success" size="mini" >吊装位入库</el-button>
</div>
        <!-- 右侧选择框 -->
        <el-form-item style="margin-top: 15px; width: 150px">
          <el-select v-model="formData2.dzw" placeholder="请选择吊装位">
            <el-option label="吊装位1" value="吊装位1"></el-option>
            <el-option label="吊装位2" value="吊装位2"></el-option>
            <!-- 根据实际情况添加更多选项 -->
          </el-select>
        </el-form-item>
      </div>
      <el-dialog v-model="Hidden" top="10vh" width="80%">
        <el-table
          :data="tableData"
          v-model="dialogVisible3"
          style="width: 98%; height: 200px"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
          ref="table"
          empty-text="No Data"
        >
          <el-table-column prop="number" label="库位号"></el-table-column>
          <el-table-column prop="rawType" label="类型"></el-table-column>
          <el-table-column prop="rawWidth" label="长度(mm)"></el-table-column>
          <el-table-column prop="rawHeight" label="高度(mm)"></el-table-column>
          <el-table-column
            prop="rawThickness"
            label="厚度(mm)"
          ></el-table-column>
          <el-table-column prop="pieces" label="数量"></el-table-column>
          <el-table-column prop="createTime" label="入库时间"></el-table-column>
          <el-table-column prop="batchId" label="批次号"></el-table-column>
<!-- 右侧选择框 -->
<el-form-item style="margin-top: 15px; width: 150px;">
  <el-select v-model="formData2.dzw" placeholder="请选择吊装位">
    <el-option label="吊装位1" value="吊装位1"></el-option>
    <el-option label="吊装位2" value="吊装位2"></el-option>
    <!-- 根据实际情况添加更多选项 -->
  </el-select>
</el-form-item>
          <el-table-column
            align="center"
            label="料架状态"
            min-width="80"
            prop="enableState"
          >
            <template #default="scope">
              <el-tag
                :type="getTagType(scope.row.enableState)"
                @click="toggleStatus(scope.row)"
              >
                {{ scope.row.enableState === 1 ? "启用" : "未启用" }}
              </el-tag>
            </template>
          </el-table-column>
</div>
<el-dialog v-model="Hidden" top="10vh" width="80%"  >
          <!-- 操作列 -->
          <el-table-column label="操作" width="250">
            <template #default="{ row }">
              <el-button
                type="primary"
                size="mini"
                @click="edithandleRowClick(row)"
                >修改</el-button
              >
              <el-button type="danger" size="mini" @click="handleDelete(row)"
                >删除</el-button
              >
              <el-button type="warning" size="mini" @click="handleCheckout(row)"
                >出库</el-button
              >
              <!-- <el-button type="success" size="mini" @click="addglass()">添加原片</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="totalItems > 0"
          background
          layout="prev, pager, next"
          :total="totalItems"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-dialog>
      <el-table
        :data="tableData" v-model="dialogVisible3"
        style="width: 98%; height: 200px"
        :data="tasktableData"
        style="width: 98%; height: 150px"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
        ref="table"
        empty-text="No Data"
      >
        <el-table-column prop="location" label="库位号"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="length" label="长度(mm)"></el-table-column>
        <el-table-column prop="height" label="高度(mm)"></el-table-column>
        <el-table-column prop="thickness" label="厚度(mm)"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="entry_time" label="入库时间"></el-table-column>
        <el-table-column prop="batchnumber" label="批次号"></el-table-column>
        <template #header>
          <div style="display: flex; align-items: center">
            <span style="font-size: 16px; font-weight: bold; margin-right: 20px"
              >任务列表</span
            >
          </div>
        </template>
        <el-table-column prop="id" label="Glassid"></el-table-column>
        <el-table-column
  align="center"
  label="料架状态"
  min-width="80"
  prop="shelf_status"
>
<template #default="scope">
        <el-tag :type="getTagType(scope.row.shelf_status)" @click="toggleStatus(scope.row)">
          {{ scope.row.shelf_status === 1 ? '启用' : '未启用' }}
        </el-tag>
      </template>
</el-table-column>
          prop="taskType"
          label="任务描述"
          width="250"
          :formatter="formatTaskType"
        ></el-table-column>
        <el-table-column
          prop="rawThickness"
          label="玻璃厚度"
        ></el-table-column>
        <el-table-column prop="color" label="玻璃膜系"></el-table-column>
        <el-table-column prop="startTime" label="创建时间"></el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="edithandleRowClick(row)">修改</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
            <el-button type="warning" size="mini" @click="handleCheckout(row)">出库</el-button>
            <!-- <el-button type="success" size="mini" @click="addglass()">添加原片</el-button> -->
        <el-table-column
          align="center"
          label="任务状态"
          min-width="80"
          prop="taskState"
        >
          <template #default="scope">
            <el-tag :type="getTagType2(scope.row.taskState)">
              {{ scope.row.taskState == "completed" ? "完成" : "进行中" }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="350">
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="handleRestart(row)"
              >重新开始</el-button
            >
            <el-button type="danger" size="mini" @click="handleDeletetask(row)"
              >删除任务</el-button
            >
            <el-button type="success" size="mini" @click="handleComplete(row)"
              >任务完成</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="totalItems > 0"
        background
        layout="prev, pager, next"
        :total="totalItems"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      ></el-pagination>
  </el-dialog>
  <el-table
    :data="tasktableData"
    style="width: 98%; height: 150px"
    @selection-change="handleSelectionChange"
    :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
    ref="table"
    empty-text="No Data"
  >
  <template #header>
        <div style="display: flex; align-items: center;">
          <span style="font-size: 16px; font-weight: bold; margin-right: 20px;">任务列表</span>
        </div>
      </template>
    <el-table-column prop="Glassid" label="Glassid"></el-table-column>
    <el-table-column prop="taskDescription" label="任务描述" width="250"></el-table-column>
    <el-table-column prop="glassThickness" label="玻璃厚度"></el-table-column>
    <el-table-column prop="glassFilm" label="玻璃膜系"></el-table-column>
    <el-table-column prop="creationTime" label="创建时间"></el-table-column>
    <el-table-column
      align="center"
      label="任务状态"
      min-width="80"
      prop="taskStatus"
    >
      <template #default="scope">
        <el-tag :type="getTagType2(scope.row.taskStatus)">
          {{ scope.row.taskStatus == 'completed' ? '完成' : '进行中' }}
        </el-tag>
      </template>
    </el-table-column>
    <!-- 操作列 -->
    <el-table-column label="操作" width="350">
      <template #default="{ row }">
        <el-button type="primary" size="mini" @click="handleRestart(row)">重新开始</el-button>
        <el-button type="danger" size="mini" @click="handleDeletetask(row)">删除任务</el-button>
        <el-button type="success" size="mini" @click="handleComplete(row)">任务完成</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
    <div class="img-ypcc" >
      <div class="img-car1" :style="'z-index:999;left:397px;top:205px;position:absolute;'">
      <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
    <div class="img-ypcc">
      <div
        class="img-car1"
        :style="'z-index:999;left:397px;top:205px;position:absolute;'"
      >
        <div
          v-show="cellshow1"
          style="
            margin-top: 10px;
            width: 200px;
            height: 5px;
            background-color: #409eff;
          "
        ></div>
      </div>
    </div>
    </div>
    <!-- 入库对话框 -->
    <el-dialog
      title="入库"
@@ -148,9 +178,9 @@
    >
      <el-form :model="formData" ref="form" label-width="80px">
        <el-form-item label="进库料架">
          <el-select v-model="formData.shelf" placeholder="请选择进库料架">
            <el-option label="A1" value="A1"></el-option>
            <el-option label="B2" value="B2"></el-option>
          <el-select v-model="formData.number" placeholder="请选择进库料架">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <!-- 根据实际情况添加更多选项 -->
          </el-select>
        </el-form-item>
@@ -162,91 +192,137 @@
          </el-select>
        </el-form-item>
        <el-form-item label="宽度">
          <el-input v-model.number="formData.width" placeholder="请输入宽度"></el-input>
          <el-input
            v-model.number="formData.rawWidth"
            placeholder="请输入宽度"
          ></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model.number="formData.height" placeholder="请输入高度"></el-input>
          <el-input
            v-model.number="formData.rawHeight"
            placeholder="请输入高度"
          ></el-input>
        </el-form-item>
        <el-form-item label="厚度">
          <el-input v-model.number="formData.thickness" placeholder="请输入厚度"></el-input>
          <el-input
            v-model.number="formData.rawThickness"
            placeholder="请输入厚度"
          ></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model.number="formData.quantity" placeholder="请输入数量"></el-input>
          <el-input
            v-model.number="formData.pieces"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmInbound">确 定</el-button>
        <el-button type="primary" @click="handleConfirmInbound"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="添加原片"  v-model="dialogVisible3" width="50%">
    <el-form :model="formData3" ref="form" label-width="80px">
      <el-form-item label="颜色膜系">
        <el-input v-model="formData.selectedColor" readonly style="width: 250px; height: 35px; font-size: 20px"></el-input>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            选择<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="color in colors" :key="color['0_glass_id']" :command="color['0_glass_id']">
              {{ color['0_glass_id'] }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item label="长度">
        <el-input v-model="formData.width" required style="width: 250px; font-size: 20px" @focus="clearInput('wid')"></el-input>
      </el-form-item>
      <el-form-item label="高度">
        <el-input v-model="formData.height" required style="width: 250px; font-size: 20px" @focus="clearInput('heig')"></el-input>
      </el-form-item>
      <el-form-item label="厚度">
        <el-input v-model="formData.thickness" required style="width: 250px; font-size: 20px" @focus="clearInput('thinkness')"></el-input>
      </el-form-item>
      <el-form-item label="数量">
        <el-input-number v-model="formData.quantity" required :min="0" :max="9000" style="width: 250px; font-size: 20px" @focus="clearInput('num')"></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible3 = false">关闭</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </span>
  </el-dialog>
  <el-dialog title="编辑" v-model="editdialogVisible" width="30%" @close="edithandleDialogClose">
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-form-item label="数量">
          <el-input v-model="editForm.quantity"></el-input>
    <el-dialog title="添加原片" v-model="dialogVisible3" width="50%">
      <el-form :model="formData3" ref="form" label-width="80px">
        <el-form-item label="颜色膜系">
          <el-input
            v-model="formData.selectedColor"
            readonly
            style="width: 250px; height: 35px; font-size: 20px"
          ></el-input>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              选择<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="color in colors"
                :key="color['0_glass_id']"
                :command="color['0_glass_id']"
              >
                {{ color["0_glass_id"] }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="editForm.batchnumber"></el-input>
        </el-form-item>
        <el-form-item label="长度">
          <el-input v-model="editForm.length"></el-input>
          <el-input
            v-model="formData.width"
            required
            style="width: 250px; font-size: 20px"
            @focus="clearInput('wid')"
          ></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="editForm.height"></el-input>
          <el-input
            v-model="formData.height"
            required
            style="width: 250px; font-size: 20px"
            @focus="clearInput('heig')"
          ></el-input>
        </el-form-item>
        <el-form-item label="厚度">
          <el-input v-model="editForm.thickness"></el-input>
          <el-input
            v-model="formData.thickness"
            required
            style="width: 250px; font-size: 20px"
            @focus="clearInput('thinkness')"
          ></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number
            v-model="formData.quantity"
            required
            :min="0"
            :max="9000"
            style="width: 250px; font-size: 20px"
            @focus="clearInput('num')"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div  class="dialog-footer">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">关闭</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑"
      v-model="editdialogVisible"
      width="30%"
      @close="edithandleDialogClose"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-form-item label="数量">
          <el-input v-model="editForm.pieces"></el-input>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="editForm.batchId"></el-input>
        </el-form-item>
        <el-form-item label="长度">
          <el-input v-model="editForm.rawWidth"></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="editForm.rawHeight"></el-input>
        </el-form-item>
        <el-form-item label="厚度">
          <el-input v-model="editForm.rawThickness"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="editdialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editsaveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
@@ -254,363 +330,413 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'; // 导入 Vue 3 的模块
import * as echarts from 'echarts';
import { ElMessage, ElMessageBox } from 'element-plus'
import {tableData} from '@/stores/tableData.js';
import { ref, onMounted, onBeforeUnmount } from "vue"; // 导入 Vue 3 的模块
//import * as echarts from 'echarts';
import { ElMessage, ElMessageBox } from "element-plus";
// import {tableData} from '@/stores/tableData.js';
import { WebSocketHost, host } from "@/utils/constants";
import { initializeWebSocket, closeWebSocket } from "@/utils/WebSocketService";
import {
  updateRawUsage,
  deleteRawUsage,
  inStorage,
  outStorage,
  taskUpdate,
} from "@/utils/api";
    const loading = ref(false);
    const Hidden = ref(false)
    const totalItems = ref(0);
    totalItems.value = 10;
    const pageSize = 10;
    let currentPage = ref(1);
    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };
   const getTagType2 =(status) => {
      switch (status) {
        case 'completed':
          return 'success';
        case 'in-progress':
          return 'info';
        case 'warning':
          return 'warning';
        case 'danger':
          return 'danger';
        default:
          return '';
      }
    }
    const getTagType =(status) => {
      return status === 1 ? 'success' : 'danger';
      // 根据状态值决定标签类型,这里假设状态为1时为成功(绿色),否则为失败(红色)
    }
    const toggleStatus = (row) => {
      // 切换料架状态的逻辑
      row.shelf_status = 1 - row.shelf_status; // Toggle between 0 and 1
      // 此处可以添加保存状态的逻辑,比如调用 API 更新数据
    };
   const tasktableData=ref([
    {
          Glassid: 'G001',
          taskDescription: '从吊装位【99】到仓位【56】',
          taskStatus: 'in-progress',
          glassThickness: '5mm',
          glassFilm: '膜系A',
          creationTime: '2024-06-19 10:00:00'
        },
        {
          Glassid: 'G002',
          taskDescription: '从吊装位【99】到仓位【56】',
          taskStatus: 'completed',
          glassThickness: '10mm',
          glassFilm: '膜系B',
          creationTime: '2024-06-19 11:00:00'
        }
        ]);
    const dialogVisible = ref(false);
    const formData = ref({
      shelf: '',
      color: '',
      width: '',
      height: '',
      thickness: '',
      quantity: ''
    });
    const formData2 = ref({
      dzw: '',
    });
    const handleDelete = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm('确定要执行删除操作吗?', '确认删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 点击确认按钮的回调,执行出库操作
    console.log('执行删除操作', row);
  }).catch(() => {
    // 点击取消按钮的回调,不执行任何操作
    console.log('取消删除操作');
  });
const loading = ref(false);
const Hidden = ref(false);
const tableData = ref([]);
const totalItems = ref(0);
totalItems.value = 10;
const pageSize = 10;
let currentPage = ref(1);
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
    const handleCheckout = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm('确定要执行出库操作吗?', '确认出库', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 点击确认按钮的回调,执行出库操作
    console.log('执行出库操作', row);
  }).catch(() => {
    // 点击取消按钮的回调,不执行任何操作
    console.log('取消出库操作');
  });
const formatTaskType = (row, column) => {
  if (row.taskType === "从仓位到吊装位") {
    return `从仓位${row.shelfRack}到吊装位${row.loadRack}`;
  } else if (row.taskType === "从仓位到上片位") {
    return `从仓位${row.shelfRack}到上片位${row.loadRack}`;
  } else if (row.taskType === "从上片位到仓位") {
    return `从上片位${row.loadRack}到仓位${row.shelfRack}`;
  } else if (row.taskType === "从吊装位到仓位") {
    return `从吊装位${row.loadRack}到仓位${row.shelfRack}`;
  }
};
const getTagType2 = (status) => {
  switch (status) {
    case "completed":
      return "success";
    case "in-progress":
      return "info";
    case "warning":
      return "warning";
    case "danger":
      return "danger";
    default:
      return "";
  }
};
    const handleInbound = () => {
      // 打开入库对话框
      dialogVisible.value = true;
    };
const getTagType = (status) => {
  return status === 1 ? "success" : "danger";
  // 根据状态值决定标签类型,这里假设状态为1时为成功(绿色),否则为失败(红色)
};
    const storage = () => {
      // 打开入库对话框
      Hidden.value = true;
    };
const toggleStatus = (row) => {
  // 切换料架状态的逻辑
  row.enableState = 1 - row.enableState; // Toggle between 0 and 1
  // 此处可以添加保存状态的逻辑,比如调用 API 更新数据
};
const socketUrl = `ws://${WebSocketHost}:${host}/api/glassStorage/api/talk/storageTask`;
// 定义消息处理函数,更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
    const handleCloseDialog = () => {
      // 关闭对话框时重置表单数据
      formData.value = {
        shelf: '',
        color: '',
        width: '',
        height: '',
        thickness: '',
        quantity: ''
  tableData.value = data.rack[0]; // 假设 tableData 是响应式对象或变量
  tableData.value.forEach((item) => {
    // 获取 createTime 的时间戳
    const createTimeTimestamp = item.createTime;
    // 创建日期对象
    const date = new Date(createTimeTimestamp);
    // 格式化日期时间为本地格式
    const formattedDateTime = date.toLocaleString();
    // 替换原来的 createTime 字段为格式化后的日期时间字符串
    item.createTime = formattedDateTime;
  });
  tasktableData.value = data.tasks[0]; // 假设 tasktableData 是响应式对象或变量
  tasktableData.value.forEach((item) => {
    // 获取 createTime 的时间戳
    const createTimeTimestamp = item.startTime;
    // 创建日期对象
    const date = new Date(createTimeTimestamp);
    // 格式化日期时间为本地格式
    const formattedDateTime = date.toLocaleString();
    // 替换原来的 createTime 字段为格式化后的日期时间字符串
    item.startTime = formattedDateTime;
  });
};
onMounted(() => {
  initializeWebSocket(socketUrl, handleMessage);
});
onBeforeUnmount(() => {
  console.log("关闭了");
  closeWebSocket();
});
const tasktableData = ref([]);
const dialogVisible = ref(false);
const formData = ref({
  number: "",
  color: "",
  rawWidth: "",
  rawHeight: "",
  rawThickness: "",
  pieces: "",
  loadRack: 1,
});
const formData2 = ref({
  dzw: "",
});
const handleDelete = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm("确定要执行删除操作吗?", "确认删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 点击确认按钮的回调,执行出库操作
      const intNumber = {
        id: parseInt(row.number),
      };
      dialogVisible.value = false;
    };
      deleteRawUsage(intNumber);
    const handleConfirmInbound = () => {
      // 处理确认入库逻辑,可以在这里提交表单或者执行其他操作
      console.log('Confirm Inbound:', formData.value);
      // 关闭对话框
      dialogVisible.value = false;
    };
    const dialogVisible3 = ref(false);
    const colors = ref([
      { '0_glass_id': 'Red' },
      { '0_glass_id': 'Green' },
      { '0_glass_id': 'Blue' }
      // Add more colors as needed
    ]);
    const formData3 = ref({
      selectedColor: '',
      wid: '',
      heig: '',
      thinkness: '',
      num: ''
      console.log("执行删除操作");
    })
    .catch(() => {
      // 点击取消按钮的回调,不执行任何操作
      console.log("取消删除操作");
    });
    const addglass = () => {
      // 打开入库对话框
      dialogVisible3.value = true;
    };
    const handleCommand = (command) => {
      formData.value.selectedColor = command;
    };
    const clearInput = (field) => {
      formData.value[field] = '';
    };
    const submitForm = () => {
      console.log('提交数据:', formData.value);
      dialogVisible3.value = false;
      // Add your submit logic here
    };
    const editdialogVisible = ref(false);
    const editForm = ref({
      quantity: '',
      batchnumber: '',
      length:'',
      height:'',
      thickness:''
    });
    const editFormRef = ref(null);
    let currentRow = ref(null);
    // 处理行点击事件
    const edithandleRowClick = (row) => {
      currentRow.value = row;
      console.log(row)
      editForm.value.quantity = row.quantity.toString();
      editForm.value.batchnumber = row.batchnumber;
      editForm.value.length = row.length;
      editForm.value.height = row.height;
      editForm.value.thickness = row.thickness;
      editdialogVisible.value = true;
      console.log(editForm.value)
    };
    // 添加保存编辑内容
    const editsaveEdit = () => {
      if (!currentRow.value) return;
      // 更新当前行数据
      currentRow.value.quantity = parseInt(editForm.value.quantity);
      currentRow.value.batchnumber = editForm.value.batchnumber;
      // 关闭对话框
      editdialogVisible.value = false;
    };
    // 对话框关闭时重置编辑表单和当前行数据
    const edithandleDialogClose = () => {
      editForm.value.quantity = '';
      editForm.value.batchnumber = '';
      editForm.value.width = '';
      editForm.value.height = '';
      editForm.value.thickness = '';
      currentRow.value = null;
    };
    const handleRestart = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm('确定要执行重新开始操作吗?', '确认重新开始', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 点击确认按钮的回调
    console.log('执行重新开始操作', row);
  }).catch(() => {
    // 点击取消按钮的回调,不执行任何操作
    console.log('取消重新开始操作');
  });
};
const handleCheckout = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm("确定要执行出库操作吗?", "确认出库", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 点击确认按钮的回调,执行出库操作
      const raw={
        number:parseInt(row.number),
        loadRack:2
      }
      outStorage(raw)
      console.log("执行出库操作", row);
    })
    .catch(() => {
      // 点击取消按钮的回调,不执行任何操作
      console.log("取消出库操作");
    });
};
const handleInbound = () => {
  // 打开入库对话框
  dialogVisible.value = true;
};
const storage = () => {
  // 打开入库对话框
  Hidden.value = true;
};
const handleCloseDialog = () => {
  // 关闭对话框时重置表单数据
  formData.value = {
    number: "",
    color: "",
    rawWidth: "",
    rawHeight: "",
    rawThickness: "",
    pieces: "",
  };
  dialogVisible.value = false;
};
const handleConfirmInbound = () => {
  inStorage(formData.value);
  // 处理确认入库逻辑,可以在这里提交表单或者执行其他操作
  console.log("Confirm Inbound:", formData.value);
  // 关闭对话框
  dialogVisible.value = false;
};
const dialogVisible3 = ref(false);
const colors = ref([
  { "0_glass_id": "Red" },
  { "0_glass_id": "Green" },
  { "0_glass_id": "Blue" },
  // Add more colors as needed
]);
const formData3 = ref({
  selectedColor: "",
  wid: "",
  heig: "",
  thinkness: "",
  num: "",
});
const addglass = () => {
  // 打开入库对话框
  dialogVisible3.value = true;
};
const handleCommand = (command) => {
  formData.value.selectedColor = command;
};
const clearInput = (field) => {
  formData.value[field] = "";
};
const submitForm = () => {
  console.log("提交数据:", formData.value);
  dialogVisible3.value = false;
  // Add your submit logic here
};
const editdialogVisible = ref(false);
const editForm = ref({
  id: "",
  pieces: "",
  batchId: "",
  rawWidth: "",
  rawHeight: "",
  rawThickness: "",
});
const editFormRef = ref(null);
let currentRow = ref(null);
// 处理行点击事件
const edithandleRowClick = (row) => {
  currentRow.value = row;
  console.log(row);
  editForm.value.pieces = row.pieces.toString();
  editForm.value.batchId = row.batchId;
  editForm.value.rawWidth = row.rawWidth;
  editForm.value.rawHeight = row.rawHeight;
  editForm.value.rawThickness = row.rawThickness;
  editForm.value.id = row.number;
  editdialogVisible.value = true;
  console.log(editForm.value);
};
// 添加保存编辑内容
const editsaveEdit = () => {
  if (!currentRow.value) return;
  // 更新当前行数据
  currentRow.value.pieces = editForm.value.pieces;
  currentRow.value.batchId = editForm.value.batchId;
  currentRow.value.rawWidth = editForm.value.rawWidth;
  currentRow.value.rawHeight = editForm.value.rawHeight;
  currentRow.value.rawThickness = editForm.value.rawThickness;
  // 调用更新函数,并处理其返回的 Promise
  updateRawUsage(editForm.value);
  // 关闭对话框
  editdialogVisible.value = false;
};
// 对话框关闭时重置编辑表单和当前行数据
const edithandleDialogClose = () => {
  editForm.value.pieces = "";
  editForm.value.batchId = "";
  editForm.value.rawWidth = "";
  editForm.value.rawHeight = "";
  editForm.value.rawThickness = "";
  currentRow.value = null;
};
const handleRestart = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm("确定要执行重新开始操作吗?", "确认重新开始", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const taskdata={
        id:row.id,
        Type:"重新开始"
      }
      taskUpdate(taskdata);
      console.log("执行重新开始操作", row);
    })
    .catch(() => {
      // 点击取消按钮的回调,不执行任何操作
      console.log("取消重新开始操作");
    });
};
const handleDeletetask = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm('确定要执行删除任务操作吗?', '确认删除任务', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 点击确认按钮的回调
    console.log('执行删除任务操作', row);
  }).catch(() => {
    // 点击取消按钮的回调,不执行任何操作
    console.log('取消删除任务操作');
  });
  ElMessageBox.confirm("确定要执行删除任务操作吗?", "确认删除任务", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 点击确认按钮的回调
      const taskdata={
        id:row.id,
        Type:"删除"
      }
      taskUpdate(taskdata);
      console.log("执行删除任务操作", row);
    })
    .catch(() => {
      // 点击取消按钮的回调,不执行任何操作
      console.log("取消删除任务操作");
    });
};
const handleComplete = (row) => {
  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
  ElMessageBox.confirm('确定要执行任务完成操作吗?', '确认任务完成', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 点击确认按钮的回调
    console.log('执行任务完成操作', row);
  }).catch(() => {
    // 点击取消按钮的回调,不执行任何操作
    console.log('取消任务完成操作');
  });
  ElMessageBox.confirm("确定要执行任务完成操作吗?", "确认任务完成", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const taskdata={
        id:row.id,
        Type:"完成"
      }
      taskUpdate(taskdata);
      // 点击确认按钮的回调
      console.log("执行任务完成操作", row);
    })
    .catch(() => {
      // 点击取消按钮的回调,不执行任何操作
      console.log("取消任务完成操作");
    });
};
</script>
<style scoped>
#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
#dialog-footer{
#dt {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 100px;
}
#dta {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 80%;
}
#dialog-footer {
  text-align: center;
  margin-top: -15px;
}
.img-ypcc{
.img-ypcc {
  margin-left: 80px;
  background-image:url('../../assets/ypcc.png');
  background-image: url("../../assets/ypcc.png");
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 600px;
    width: 1400px;
    max-width: 100%;
    background-size: 1400px 600px;
    overflow: hidden;
    position:relative;
    margin-top:0px
  background-attachment: local;
  min-height: 600px;
  width: 1400px;
  max-width: 100%;
  background-size: 1400px 600px;
  overflow: hidden;
  position: relative;
  margin-top: 0px;
}
.img-car1{
  background-image:url('../../assets/ypccche.png');
.img-car1 {
  background-image: url("../../assets/ypccche.png");
  position: absolute;
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 400px;
    width: 200px;
    max-width: 100%;
    background-size: 200px 170px;
    overflow: hidden;
    position:relative
  background-attachment: local;
  min-height: 400px;
  width: 200px;
  max-width: 100%;
  background-size: 200px 170px;
  overflow: hidden;
  position: relative;
}
.custom-dialog {