前端页面

wang

2024-03-26 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee

 UI-Project/src/views/mm/purchaseStorage/PurchaseStorage.vue

@@ -1,36 +1,174 @@
<template>
  <div class="common-layout">
    <el-container >
      <el-header style="height: 30px">

        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>采购与物资</el-breadcrumb-item>
          <el-breadcrumb-item>采购入库

          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/main/purchaseStorage/SelectPurchaseStorage'}">查询

          </el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="padding: 0">
        <router-view/>
      </el-main>

      <!--      <el-footer>Footer</el-footer>-->
    </el-container>
  </div>
</template>


<script setup>
import {useRouter} from "vue-router";
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"

const router = useRouter();
import {ArrowRight} from "@element-plus/icons-vue";
import { ref } from 'vue'

const dialogFormVisible = ref(true)
const dialogFormVisiblea = ref(false)

const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  data:  [
    {
    }
  ],
})
</script>

<template>
  <div style="margin-top: 10px;">
     <el-button style="margin-left: 15px;"   id="searchButton" type="primary" @click="dialogFormVisible = true;dialogFormVisiblea = false">摆片版图</el-button>
    <el-button  id="searchButton" type="success" @click="dialogFormVisiblea = true;dialogFormVisible = false">已出炉玻璃</el-button>
<div v-if="dialogFormVisible" >
    <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
      <div style="display: flex;margin-bottom: 20px;">
      <div style="margin-left: 400px;font-size: 20px;">工程号：P20240305001 </div>
      <div style="margin-left: 150px;font-size: 20px;">版图编号：1</div>
    </div>
    <div>
            <div id="boxa" style="width: 400px;height: 120px;margin-left: 260px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
          </div>
            <div id="boxa" style="width: 400px;height: 120px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
          </div>
    </div>
    <div style="margin-top: 20px;">
            <div id="boxa" style="width: 400px;height: 120px;margin-left: 260px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
          </div>
            <div id="boxb" style="width: 400px;height: 120px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
          </div>
    </div>
    </el-card>
    </div>
<div v-if="dialogFormVisiblea">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
      <el-scrollbar height="630px">
      <div id="home-card">
      <div id="home-item" v-for="n in 20" :key="n">
            <div id="box" style="width: 100px;height: 165px;">100*65</div>
            <div id="box" style="width: 107px;height: 150px;">107*60</div>
            <div id="box" style="width: 107px;height: 155px;">109*60</div>
      </div>
    </div>
  </el-scrollbar>
    </el-card>
</div>
  </div>

</template>

<style scoped>
#boxa{
  border: 1px solid rgb(119, 116, 116);
  background-color:  #529b2e;
  text-align: center;
  display: inline-block;
   /* align-items:center; */
   /* justify-content:center; */
  margin-left: 20px;
}
#boxb{
  border: 1px solid rgb(119, 116, 116);
  background-color:  #a0cfff;
  /* display:flex; */
  text-align: center;
  display: inline-block;
   align-items:center;
   justify-content:center;
  margin-left: 20px;
}
#box{
  border: 1px solid black;
  background-color:  #337ecc;
  display:flex;
   align-items:center;
   justify-content:center;
}
#home-card {
    width: 100%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    #home-item {
      border-style: solid;
      border-width: 1px;
      border-color: #E4E4E4;
      width: calc(34% - 20px);
      padding: 20px 0px 20px 20px;
      margin-right: 10px;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      /* align-items: center; */
      background: #fff;
      #home-img {
        display: inline-block;
        width: 160px;
        height: 60px;
        margin: 0;
        padding: 0;
      }
      #home-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 10px;
        #home-num {
          font-size: 40px;
          margin: 5px 0;
        }
      }
    }
  }
</style>