| | |
|---|
| | | <template>
|
|---|
| | | <div >
|
|---|
| | | <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="handleInbound()">入库</el-button>
|
|---|
| | | <el-button type="success" size="mini" @click="handleInbound()">吊装位入库</el-button>
|
|---|
| | | <el-button type="success" size="mini" @click="handleInbound()">添加原片</el-button>
|
|---|
| | | <el-button type="success" size="mini" >吊装位入库</el-button>
|
|---|
| | | |
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <!-- 右侧选择框 -->
|
|---|
| | |
|---|
| | | min-width="80"
|
|---|
| | | prop="shelf_status"
|
|---|
| | | >
|
|---|
| | | <template #default="scope">
|
|---|
| | | <el-tag :type="getTagType(scope.row.shelf_status)">
|
|---|
| | | {{ scope.row.shelf_status === 1 ? '启用' : '未启用' }}
|
|---|
| | | </el-tag>
|
|---|
| | | </template>
|
|---|
| | | <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>
|
|---|
| | |
|
|---|
| | | <!-- 操作列 -->
|
|---|
| | | <el-table-column label="操作" width="300">
|
|---|
| | | <el-table-column label="操作" width="350">
|
|---|
| | | <template #default="{ row }">
|
|---|
| | | <el-button type="primary" size="mini" @click="handleEdit(row)">修改</el-button>
|
|---|
| | | <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>
|
|---|
| | |
|---|
| | | 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="taskStatus" label="任务状态"></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 label="操作" width="350">
|
|---|
| | | <template #default="{ row }">
|
|---|
| | | <el-button type="primary" size="mini" @click="handleRestart(row)">重新开始</el-button>
|
|---|
| | | <el-button type="danger" size="mini" @click="handleDelete(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-button type="primary" @click="handleConfirmInbound">确 定</el-button>
|
|---|
| | | </div>
|
|---|
| | | </el-dialog>
|
|---|
| | | <div ref="chart" id="chart" style="width: 100%; height: 400px;"></div>
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | <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.wid" required style="width: 250px; font-size: 20px" @focus="clearInput('wid')"></el-input>
|
|---|
| | | </el-form-item>
|
|---|
| | |
|
|---|
| | | <el-form-item label="高度">
|
|---|
| | | <el-input v-model="formData.heig" required style="width: 250px; font-size: 20px" @focus="clearInput('heig')"></el-input>
|
|---|
| | | </el-form-item>
|
|---|
| | |
|
|---|
| | | <el-form-item label="厚度">
|
|---|
| | | <el-input v-model="formData.thinkness" 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.num" 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-form-item>
|
|---|
| | | <el-form-item label="批次号">
|
|---|
| | | <el-input v-model="editForm.batchnumber"></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 ref="chart" id="chart" style="width: 100%; height: 400px;"></div> -->
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | |
|---|
| | | <script setup>
|
|---|
| | | import { ref, onMounted, onBeforeUnmount } from 'vue'; // 导入 Vue 3 的模块
|
|---|
| | | import * as echarts from 'echarts';
|
|---|
| | | import { ElMessage, ElMessageBox } from 'element-plus'
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | const loading = ref(false);
|
|---|
| | |
|---|
| | | height: '50',
|
|---|
| | | thickness: '10',
|
|---|
| | | quantity: '5',
|
|---|
| | | entry_time: '2024-06-19',
|
|---|
| | | entry_time: '2024-06-19 10:00:00',
|
|---|
| | | batchnumber:"444",
|
|---|
| | | shelf_status: 1
|
|---|
| | | },
|
|---|
| | |
|---|
| | | height: '60',
|
|---|
| | | thickness: '12',
|
|---|
| | | quantity: '10',
|
|---|
| | | entry_time: '2024-06-18',
|
|---|
| | | entry_time: '2024-06-19 10:00:00',
|
|---|
| | | batchnumber:"444",
|
|---|
| | | shelf_status: 0
|
|---|
| | | },
|
|---|
| | |
|---|
| | | height: '60',
|
|---|
| | | thickness: '12',
|
|---|
| | | quantity: '10',
|
|---|
| | | entry_time: '2024-06-18',
|
|---|
| | | entry_time: '2024-06-19 10:00:00',
|
|---|
| | | batchnumber:"444",
|
|---|
| | | shelf_status: 1
|
|---|
| | | },
|
|---|
| | |
|---|
| | | height: '60',
|
|---|
| | | thickness: '12',
|
|---|
| | | quantity: '10',
|
|---|
| | | entry_time: '2024-06-18',
|
|---|
| | | entry_time: '2024-06-19 10:00:00',
|
|---|
| | | batchnumber:"444",
|
|---|
| | | shelf_status: 1
|
|---|
| | | },
|
|---|
| | |
|---|
| | | height: '60',
|
|---|
| | | thickness: '12',
|
|---|
| | | quantity: '10',
|
|---|
| | | entry_time: '2024-06-18',
|
|---|
| | | entry_time: '2024-06-19 10:00:00',
|
|---|
| | | batchnumber:"444",
|
|---|
| | | shelf_status: 1
|
|---|
| | | }
|
|---|
| | |
|---|
| | | 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([
|
|---|
| | |
|
|---|
| | |
|---|
| | |
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | const handleEdit = (row) => {
|
|---|
| | | // 处理修改数量逻辑
|
|---|
| | | console.log('Edit Quantity:', row);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | |
|---|
| | | const handleDelete = (row) => {
|
|---|
| | | // 处理删除逻辑
|
|---|
| | | console.log('Delete:', row);
|
|---|
| | | };
|
|---|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
|---|
| | | ElMessageBox.confirm('确定要执行删除操作吗？', '确认删除', {
|
|---|
| | | confirmButtonText: '确认',
|
|---|
| | | cancelButtonText: '取消',
|
|---|
| | | type: 'warning',
|
|---|
| | | }).then(() => {
|
|---|
| | | // 点击确认按钮的回调，执行出库操作
|
|---|
| | | console.log('执行删除操作', row);
|
|---|
| | | }).catch(() => {
|
|---|
| | | // 点击取消按钮的回调，不执行任何操作
|
|---|
| | | console.log('取消删除操作');
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | |
|---|
| | | const handleCheckout = (row) => {
|
|---|
| | | // 处理出库逻辑
|
|---|
| | | console.log('Checkout:', row);
|
|---|
| | | };
|
|---|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
|---|
| | | ElMessageBox.confirm('确定要执行出库操作吗？', '确认出库', {
|
|---|
| | | confirmButtonText: '确认',
|
|---|
| | | cancelButtonText: '取消',
|
|---|
| | | type: 'warning',
|
|---|
| | | }).then(() => {
|
|---|
| | | // 点击确认按钮的回调，执行出库操作
|
|---|
| | | console.log('执行出库操作', row);
|
|---|
| | | }).catch(() => {
|
|---|
| | | // 点击取消按钮的回调，不执行任何操作
|
|---|
| | | console.log('取消出库操作');
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | const handleInbound = () => {
|
|---|
| | | // 打开入库对话框
|
|---|
| | |
|---|
| | | // 关闭对话框
|
|---|
| | | 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({
|
|---|
| | | quantity: '',
|
|---|
| | | batchnumber: ''
|
|---|
| | | });
|
|---|
| | | const editFormRef = ref(null);
|
|---|
| | | let currentRow = ref(null);
|
|---|
| | |
|
|---|
| | | // 处理行点击事件
|
|---|
| | | const edithandleRowClick = (row) => {
|
|---|
| | | currentRow.value = row;
|
|---|
| | | editForm.value.quantity = row.quantity.toString();
|
|---|
| | | editForm.value.batchnumber = row.batchnumber;
|
|---|
| | | 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 = '';
|
|---|
| | | currentRow.value = null;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | |
|---|
| | |
|
|---|
| | |
|
|---|
| | | const handleRestart = (row) => {
|
|---|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
|---|
| | | ElMessageBox.confirm('确定要执行重新开始操作吗？', '确认重新开始', {
|
|---|
| | | confirmButtonText: '确认',
|
|---|
| | | cancelButtonText: '取消',
|
|---|
| | | type: 'warning',
|
|---|
| | | }).then(() => {
|
|---|
| | | // 点击确认按钮的回调
|
|---|
| | | 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('取消删除任务操作');
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | const handleComplete = (row) => {
|
|---|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
|---|
| | | ElMessageBox.confirm('确定要执行任务完成操作吗？', '确认任务完成', {
|
|---|
| | | confirmButtonText: '确认',
|
|---|
| | | cancelButtonText: '取消',
|
|---|
| | | type: 'warning',
|
|---|
| | | }).then(() => {
|
|---|
| | | // 点击确认按钮的回调
|
|---|
| | | console.log('执行任务完成操作', row);
|
|---|
| | | }).catch(() => {
|
|---|
| | | // 点击取消按钮的回调，不执行任何操作
|
|---|
| | | console.log('取消任务完成操作');
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | let chartInstance = null;
|
|---|
| | |
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style>
|
|---|
| | | <style scoped>
|
|---|
| | | html, body {
|
|---|
| | | height: 100%;
|
|---|
| | | margin: 0;
|
|---|
| | | padding: 0;
|
|---|
| | | overflow: hidden; /* 禁止出现滚动条 */
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .app-container {
|
|---|
| | |
|
|---|
| | | flex-direction: column;
|
|---|
| | | height: 100vh; /* 使用视口高度 */
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | .custom-dialog {
|
|---|
| | | max-height: 90vh; /* 最大高度为视口高度的90% */
|
|---|
| | | overflow-y: auto; /* 对话框内部出现垂直滚动条 */
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
