原片仓储 料架管理页面

wuyouming666

2024-06-26 e6554a5f4ca0a1cfc39057b61c0bccbb7b07817e

 UI-Project/src/views/GlassStorage/MaterialRackManagement.vue

@@ -1,5 +1,5 @@
<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;">



@@ -7,7 +7,7 @@
<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" @click="addglass()">添加原片</el-button>

</div>



<!-- 右侧选择框 -->

@@ -156,7 +156,51 @@
        <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>









    <!-- <div ref="chart" id="chart" style="width: 100%; height: 400px;"></div> -->

  </div>

</template>



@@ -322,6 +366,45 @@
      // 关闭对话框

      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

    };

    





@@ -407,6 +490,26 @@


</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>