前端页面

wang

2024-03-26 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee

前端页面

 UI-Project/src/assets/1.png

 UI-Project/src/assets/11.png

 UI-Project/src/assets/2.png

 UI-Project/src/assets/3.png

 UI-Project/src/assets/88.png

 UI-Project/src/assets/9.png

 UI-Project/src/assets/background.jpg

 UI-Project/src/assets/bigcar01.png

 UI-Project/src/assets/dipan.png

 UI-Project/src/assets/emi.png

 UI-Project/src/assets/main.css

@@ -3,12 +3,13 @@
#app {
  margin: 0 auto;
  padding: 0;
  background-color: #D5EAFF;
  /* background-color: #D5EAFF; */
  font-weight: normal;
  height: 100%;
  width: 100%;
  min-width: 1536px;
  min-height: 730px;
  /* min-width: 1536px; */
  /* min-height: 730px; */
  /* background-image: url("../../src/assets/background.jpg"); */
}

a,

 UI-Project/src/assets/s.png

 UI-Project/src/assets/shangpianji .png

 UI-Project/src/assets/shangpianji.png

 UI-Project/src/assets/sz.png

 UI-Project/src/assets/taimian.png

 UI-Project/src/assets/user.png

 UI-Project/src/assets/woshihuancun.png

 UI-Project/src/assets/xmjc.png

 UI-Project/src/assets/xmjclzh.png

 UI-Project/src/components/ComputedTest.vue

File was deleted

 UI-Project/src/components/basic/BasicTable.vue

File was deleted

 UI-Project/src/components/basic/product/GlassType.vue

File was deleted

 UI-Project/src/components/sd/product/GlassType.vue

File was deleted

 UI-Project/src/layout/MainErpView.vue

@@ -75,56 +75,31 @@
</script>

<template>
  <div>
  <div id="all">
    <el-container>
      <el-header >
        <div style="height: 100%;width: 100%;display: flex">
        <div style="height: 100%;width: 100%;display: flex;background-color: #fff;">
          <img src="../assets/northGlass.ico" alt="" style="max-width: 100%;max-height: 100%">
          <h3 style="margin: 1rem  ;font-weight: bold;width: 20vw;"> 欢迎{{ user }}使用北玻ERP系统！</h3>
          <h3 style="margin: 1rem  ;font-weight: bold;width: 20vw;"> 欢迎{{ user }}使用北玻MES系统！</h3>
          <span style="height: 70%;width: 78vw;margin-top: 1rem;" >

            <el-button  class="sys-quit" @click="quit"  type="info" round>
            <el-button  class="sys-quit" @click="quit" round>
              <el-icon size="large"><SwitchButton  size=""/></el-icon>
            </el-button>
          </span>

        </div>
      </el-header>
      <div id="line"></div>
      <el-container >
        <el-aside width="160px" style="height: 97%; " >
<!--          <el-menu
              style=" border-radius:0.5rem;border: 0.01rem solid #409EFF;margin-bottom: 0.5rem"
              @open="handleOpen"
              ref="menu"
              active-color="#ffd04b"
              background-color="#409EFF"
              default-active="2"
              text-color="#fff">
            <el-sub-menu

                v-for="items in menuList"
                :index="items.id"
                :key="items.id">
              <template #title>
                <el-icon v-if="items.id==1"><Grid/></el-icon>
                <el-icon v-if="items.id==2"><Histogram/></el-icon>
                <el-icon v-if="items.id==3"><MessageBox/></el-icon>
                <span style="font-weight: bold;">{{items.menuName}}</span>
              </template>
              <router-link
                  v-show="items.id==menuItem.menuID"
                  v-for="menuItem in menuItemList"
                  :to="{path:menuItem.url}">
                <el-menu-item  >
                  {{ menuItem.itemName}}
                </el-menu-item>
              </router-link>

            </el-sub-menu>
          </el-menu>-->
        <el-aside width="160px" style="height: 99%; background-color: #fff;" >
          <div class="menu"  >
              <div v-for="items in menuList">
                <div class='menu_title' @click="openMenu(items.id)"  >{{items.menuName}}<span class='indicator' >▼</span></div>
             <div v-for="items in menuList">
                <div class='menu_title' @click="openMenu(items.id)"  >
              <!-- <span class='indicator' >⌵</span> -->
              <!-- <span class='indicator' >≡</span> -->
              <!-- <img src="../assets/9.png" alt="" style="max-width: 50%;max-height: 50%;"> -->
                  <span>☰</span>
              {{items.menuName}}
                </div>
                <ul class='enter-x-left' v-show="openFlag==items.id">

                  <li v-for="menuItem in menuItemList"
@@ -154,9 +129,13 @@
</template>

<style scoped>
#all{
  background-color: #eee;
  height: 100%;
}
.el-container{
  height: 100vh;
  width: 100vw
  width: 99vw
}

*{
@@ -167,7 +146,17 @@
  float: right;
  margin-right: 1rem;
  width: 5rem;

}
/* 横线 */
#line{
float:right;
width: 100%;
height: 1px;
/* margin-top: 0.5em; */
margin-bottom: 0.5em;
background:#d4c4c4;
position: relative;
text-align: center;
}
:deep(span){
  margin-right: 0;
@@ -181,17 +170,11 @@
  width: 99%;
  float: right;
  height: 99%;
  background-color: #fff;
}




/*------------*/




.menu div div{
/* .menu div div{

  width: 138px;
  height: 35px;
@@ -208,16 +191,12 @@
  border-bottom: 12px ;
  margin-bottom:4px;
  text-align: left;
  cursor: pointer;
  border-radius:8px;
  cursor: pointer; */
  /* border-radius:8px; */
  /*   outline: none; */

  background-color:#5CADFE;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);



}
  /* background-color:#5CADFE; */
  /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
/* } */

.menu {
  width: 138px;
@@ -243,21 +222,21 @@

  height: 28px;
  line-height: 30px;
  background: rgb(128, 128, 128);
  /* background: rgb(128, 128, 128); */
  color: #000000;
  padding-left: 36px;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  border-radius:8px;
  /* border-radius:8px; */
  /*   outline: none; */

  background: #5CADFE;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
  /* background: #5CADFE; */
  /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
}

ul li:hover {
  background:#5CADFE ;
  /* background:#5CADFE ; */
  color: #ffffff;
}

@@ -268,7 +247,7 @@
}
ul li a:hover {

  color: #ffffff;
  color: #1087ff;
}

.item_divider {
@@ -282,6 +261,7 @@
  width: 138px;
  height: 35px;
  display: block;
  /* text-align: justify; */
  text-decoration: none;
  color: white;
  font-size: 14px;
@@ -289,12 +269,12 @@
}

.menu_title {
  width: 138px;
  height: 35px;
  line-height: 35px;
  background: #fafafa;
  color: rgb(128, 128, 128);
  font-size: 16px;
  width: 140px;
  height: 45px;
  line-height: 55px;
  /* background: #fafafa; */
  color: rgb(43, 42, 42);
  font-size: 17px;
  padding-left: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
@@ -306,12 +286,12 @@

.menu_title:hover {
  /* background: #dedede; */
  color: #ffffff;
  color: #3b9af9;
}

.indicator {
  display: block;
  width: 50px;
  width: 40px;
  height: 35px;
  font-weight: bold;
  position: absolute;
@@ -344,8 +324,6 @@
.enter-x-left:nth-child(4){
  animation-delay: 0.4s;
}


@keyframes enter-x-left {
  to {
    opacity: 1;

 UI-Project/src/router/index.js

@@ -177,6 +177,33 @@
            }
          ]
        },
        // {
        //   path:'appMenu',
        //   name:'appMenu',
        //   component: () => import('../layout/component/appMpenu.vue'),
        //   children:[
        //     {
        //       path: 'appMenu',
        //       name: 'appMenu',
        //       component:()=>import('../layout/component/appMpenu.vue')
        //     },
        //     {
        //       path: 'appView',
        //       name: 'appView',
        //       component:()=>import('../layout/component/appView.vue')
        //     },
        //     {
        //       path: 'logoHeader',
        //       name: 'logoHeader',
        //       component:()=>import('../layout/component/logoHeader.vue')
        //     },
        //     {
        //       path: 'routerHeader',
        //       name: 'routerHeader',
        //       component:()=>import('../layout/component/routerHeader.vue')
        //     },
        //   ]
        // },

          //pp模块
        {
@@ -191,11 +218,11 @@
              name: 'selectAddWorkOrder',
              component: () => import('../views/pp/workOrder/SelectAddWorkOrder.vue'),
            },
            {
              path: 'releaseWorkOrder',
              name: 'releaseWorkOrder',
              component: () => import('../views/pp/workOrder/ReleaseWorkOrder.vue'),
            },
            // {
            //   path: 'releaseWorkOrder',
            //   name: 'releaseWorkOrder',
            //   component: () => import('../views/pp/workOrder/ReleaseWorkOrder.vue'),
            // },
            {
              path: 'addWorkOrder',
              name: 'addWorkOrder',
@@ -531,10 +558,6 @@
            // }
          ]
        },




          //mm模块
        {
          path: 'productStock',
@@ -608,11 +631,6 @@
            }
          ]
        },





        {
          // 物料资料
          path:'ingredients',
@@ -637,66 +655,106 @@
        },




        {
          // 物料库存
          path:'ingredientsStock',
          name:'ingredientsStock',
          component: () => import('../views/mm/mainIngredientStock/IngredientsStock.vue'),
          path: 'UnLoadGlass',
          name: 'UnLoadGlass',
          component: () => import('../views/UnLoadGlass/UnLoadGlass.vue'),
          children:[
            {
              path: 'selectIngredientsStock',
              name: 'selectIngredientsStock',
              component:()=>import('../views/mm/mainIngredientStock/SelectIngredientsStock.vue')
            },

            {
              path: 'accessoriesMonthlySettlement',
              name: 'accessoriesMonthlySettlement',
              component:()=>import('../views/mm/mainIngredientStock/AccessoriesMonthlySettlement.vue')
              path: '/UnLoadGlass/loadmachinerack',
              name: 'loadmachinerack',
              component: () => import('../views/UnLoadGlass/loadmachinerack.vue')
            },
            {
              path: 'originalMonthlySettlement',
              name: 'originalMonthlySettlement',
              component:()=>import('../views/mm/mainIngredientStock/OriginalMonthlySettlement.vue')
            },
            //   物料出库
            {
              path: 'materialOutbound',
              name: 'materialOutbound',
              component:()=>import('../views/mm/mainIngredientStock/MaterialOutbound.vue')
            },
              //出库新增
            {
              path:'createOutBound',
              name:'createOutBound',
              component:()=>import('../views/mm/mainIngredientStock/CreateOutBound.vue')
            },
            //返库
            {
              path:'returnToStorage',
              name:'returnToStorage',
              component:()=>import('../views/mm/mainIngredientStock/ReturnToStorage.vue')
            },

            //返库新增
            {
              path:'returnToStorageCreate',
              name:'returnToStorageCreate',
              component:()=>import('../views/mm/mainIngredientStock/ReturnToStorageCreate.vue')
              path: '/UnLoadGlass/Landingindication',
              name: 'Landingindication',
              component: () => import('../views/UnLoadGlass/Landingindication.vue')
            },
            {
              path: '',
              redirect:'/main/ingredientsStock/SelectIngredientsStock'
              path: '/UnLoadGlass/Landingindicationtwo',
              name: 'Landingindicationtwo',
              component: () => import('../views/UnLoadGlass/Landingindicationtwo.vue')
            }
          ]
        },





        {
          /*----------- 采购订单 ----------------*/
          path: 'purchaseOrder',
          name: 'purchaseOrder',
          component: () => import('../views/mm/purchaseOrder/PurchaseOrder.vue'),
          children: [
            {
              path: 'SelectPurchaseOrder',
              name: 'SelectPurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Select.vue'),
            }, {
              path: 'CreatePurchaseOrder',
              name: 'CreatePurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Create.vue')
            },
            /*----------- 新增 ----------------*/
            {
              path: 'PaymentPurchaseOrder',
              name: 'PaymentPurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Payment.vue')
            },
            /*----------- 退货 ----------------*/
            {
              path: 'ReturnPurchaseOrder',
              name: 'ReturnPurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Return.vue')
            },
            /*----------- 入库 ----------------*/
            {
              path: 'StoragePurchaseOrder',
              name: 'StoragePurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Storage.vue')
            },
            {
              path: '',
              redirect: '/main/purchaseOrder/SelectPurchaseOrder'
            }
          ]
        },
        {
          /*----------- 掰片/识别 ----------------*/
          path: 'identify',
          name: 'identify',
          component: () => import('../views/mm/identify/Identify.vue'),
          children: [
            {
              path: 'SelectIdentify',
              name: 'SelectIdentify',
              component: () => import('../views/mm/identify/Select.vue'),
            }
          ]
        },
        {
          /*----------- 卧式缓存----------------*/
          path: 'caching',
          name: 'caching',
          component: () => import('../views/mm/caching/Caching.vue'),
          children: [
            {
              path: 'SelectCaching',
              name: 'SelectCaching',
              component: () => import('../views/mm/caching/caching.vue'),
            }
          ]
        },
        {
          /*----------- 大理片笼----------------*/
          path: 'slicecage',
          name: 'slicecage',
          component: () => import('../views/mm/slicecage/Slicecage.vue'),
          children: [
            {
              path: 'SelectSlicecage',
              name: 'SelectSlicecage',
              component: () => import('../views/mm/slicecage/slicecage.vue'),
            }
          ]
        },
        {
          // 供应商管理！！！
          path:'trader',
@@ -751,42 +809,16 @@
          ]
        },
        {
          /*----------- 采购订单 ----------------*/
          path: 'purchaseOrder',
          name: 'purchaseOrder',
          component: () => import('../views/mm/purchaseOrder/PurchaseOrder.vue'),
          /*-----------  ----------------*/
          path: 'stockBasicData',
          name: 'stockBasicData',
          component: () => import('../views/mm/stockBasicData/StockBasicData.vue'),
          children: [
            {
              path: 'SelectPurchaseOrder',
              name: 'SelectPurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Select.vue'),
            }, {
              path: 'CreatePurchaseOrder',
              name: 'CreatePurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Create.vue')
            },
            /*----------- 新增 ----------------*/
            {
              path: 'PaymentPurchaseOrder',
              name: 'PaymentPurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Payment.vue')
            },
            /*----------- 退货 ----------------*/
            {
              path: 'ReturnPurchaseOrder',
              name: 'ReturnPurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Return.vue')
            },
            /*----------- 入库 ----------------*/
            {
              path: 'StoragePurchaseOrder',
              name: 'StoragePurchaseOrder',
              component: () => import('../views/mm/purchaseOrder/Storage.vue')
            },
            {
              path: '',
              redirect: '/main/purchaseOrder/SelectPurchaseOrder'
            }
              path: 'SelectStockBasicData',
              name: 'SelectStockBasicData',
              component: () => import('../views/mm/stockBasicData/Select.vue'),
            }, 
          ]
        },
        {

 UI-Project/src/views/LoginView.vue

@@ -98,11 +98,19 @@
<template>
  <div class="mainDiv" >
    <div id="main-login">
      <div id="img-div">
        <img id="img-pic" src="@/assets/img.png" alt="">
      <!-- <img
        style="width: 100%; height: 99vh"
        src="../../src/assets/background.jpg"
      /> -->
      <div>
      <div style="position: absolute; left: 8vw; top: 6vw; ">
        <img src="../../src/assets/3.png">
      </div> 
       <div style="position: absolute; left: 15vw; top: 22vw; font-size: 55px;color: rgba(29, 33, 41, 1);">
        北玻MES系统
      </div>
    </div>
      <div id="div-login">
        <h2>北玻自动化ERP管理系统</h2>
        <el-form
            @submit.native.prevent
            ref="ruleFormRef"
@@ -110,41 +118,50 @@
            status-icon
            :rules="rules"
        >
          <el-form-item label="用户：" prop="userId">
        <div id="center">
            <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">账号</div>
          <el-form-item prop="userId">
            <el-input
            style="width: 340px;"
                v-model="userForm.userId"
                type="text"
                autocomplete="off"
                :prefix-icon="Avatar"
                placeholder="请输入你的账号"
                placeholder="请输入账号"
            />
          </el-form-item>
          <el-form-item label="密码：" prop="pass">
            <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div>
          <el-form-item prop="pass">
            <el-input
            style="width: 340px;"
                v-model="userForm.pass"
                type="password"
                autocomplete="off"
                :prefix-icon="Lock"
                placeholder="请输入你的密码"
                show-password
                placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item id="submitForm">
            <el-button
                :loading="registerLoadings"
                type="primary"
                @click="register"
            >注册
            </el-button>
            <el-button
                :loading="loginLoadings"
                type="primary"
                native-type="submit"
                @click="submitForm(ruleFormRef)"
                @keyup.enter.native="keyDown(e)"
                plain
            >登录
            </el-button>
            <el-button
                :loading="registerLoadings"
                type="primary"
                @click="register"
                plain
            >注册
            </el-button>

          </el-form-item>
        </div>
        </el-form>
      </div>
    </div>
@@ -154,16 +171,15 @@

<style scoped>
.mainDiv{
  //background-color: #1890FF;
  overflow: hidden;
  min-width: 718px;
  background-image: url("../../src/assets/background.jpg");

}
#main-login{
  margin: 150px auto 0 auto;
  height: 60vh;
  width: 70vw;

  //background-color: #f2f2f2;
  height: 70vh;
  width: 80vw;
}
#img-div{
  width: 55%;
@@ -179,23 +195,22 @@
}
#div-login{
  margin-top: 5%;
  /* margin-top: 20%; */
  /* margin-left: 650px; */
  background-color: #fff;
  float: right;
  width: 40%;
  height: 80%;
  border-radius: 12px;
  height: 60%;
  min-width: 318px;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
}
h2{
  color: #1890FF;
  width: 100%;
  text-align: center;
  margin-top: 20%;
#center{
  margin-top: -30px;
}
.el-form{
  width: 50%;
  margin: 5% auto auto;
  width: 60%;
  margin: 20% auto auto;
}
#submitForm {
  display: flex;

 UI-Project/src/views/RegisterView.vue

@@ -4,7 +4,8 @@
  import type { FormProps,FormInstance, FormRules } from 'element-plus'
  import {ElMessage,ElMessageBox} from "element-plus";
  import request from "@/utils/request";
  import {Avatar, UserFilled} from "@element-plus/icons-vue";
import { Lock,Avatar } from '@element-plus/icons-vue'
  // import {Avatar, UserFilled} from "@element-plus/icons-vue";

  const router = useRouter()
  const route = useRoute()
@@ -101,6 +102,12 @@
      }
    })
  }
  const toLogin = () => {
              router.push({
                path:'/login',
              })
  }




@@ -108,76 +115,141 @@
</script>

<template>
  <h2 style="color: #1890FF">
    <span>
      <el-icon><UserFilled /></el-icon>
      <p>北玻ERP用户注册</p>
    </span>
  </h2>
  <div id="main-div">

    <div id="register">
      <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="register"
          ref="ruleFormRef"
          status-icon
          :rules="rules"
      >
        <el-form-item label="姓名：" prop="userName">
          <el-input v-model="register.userName" />
        </el-form-item>
<!--        <el-form-item label="登陆名：" prop="loginName">-->
<!--          <el-input v-model="register.loginName" />-->
<!--        </el-form-item>-->
        <el-form-item label="密码：" prop="passWord">
          <el-input type="password" v-model="register.passWord" />
        </el-form-item>
        <el-form-item label="确认密码：" prop="confirmPassword">
          <el-input type="password" v-model="register.confirmPassword" />
        </el-form-item>
        <el-form-item >
          <el-button
              :loading="loginLoadings"
              type="primary"
              @click="submitForm(ruleFormRef)"
          >注册
          </el-button>
        </el-form-item>
      </el-form>
  
  <div class="mainDiv" >
    <div id="main-login">
     <div>
      <div style="position: absolute; left: 8vw; top: 6vw; ">
        <img src="../../src/assets/3.png">
      </div> 
       <div style="position: absolute; left: 15vw; top: 22vw; font-size: 55px;color: rgba(29, 33, 41, 1);">
        北玻MES系统
      </div>
    </div>
  </div>
    <div id="div-login">
        <el-form
            @submit.native.prevent
            ref="ruleFormRef"
            :model="register"
            status-icon
            :rules="rules"
            label-width="75px"
        >
          <div id="title">注册新用户</div>
        <div id="center">
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">姓名</div> -->
          <el-form-item prop="userName" label="姓名:">
            <el-input
            style="width: 200px;"
                v-model="register.userName"
                type="text"
                autocomplete="off"
                :prefix-icon="Avatar"
                placeholder="请输入姓名"
            />
          </el-form-item>
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div> -->
          <el-form-item prop="passWord" label="密码:">
            <el-input
            style="width: 200px;"
                v-model="register.passWord"
                type="password"
                autocomplete="off"
                :prefix-icon="Lock"
                placeholder="请输入密码"
                show-password
            />
          </el-form-item>
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">确认密码</div> -->
          <el-form-item prop="confirmPassword" label="确认密码:">
            <el-input
            style="width: 200px;"
                v-model="register.confirmPassword" 
                type="password"
                :prefix-icon="Lock"
                autocomplete="off"
                show-password
                placeholder="请确认密码"
            />
          </el-form-item>
          <el-form-item id="submitForm">
            <el-button
            :loading="loginLoadings"
                type="primary"
                @click="submitForm(ruleFormRef)"
                plain
            >确认注册
            </el-button>
            <el-button
                type="primary"
                @click="toLogin"
                plain
            >取消
            </el-button>

          </el-form-item>
        </div>
        </el-form>
      </div>
</div>
</div>
</template>

<style scoped>
#main-div{
  //overflow: hidden;
/* #main-div{
  position: absolute;
  left:50%;
  top:50%;
  left:75%;
  top:45%;
  transform: translate(-50%, -50%);

}
h2{
  text-align: center;
  width: 100vw;
  margin-top: 10vh;
}
#register{
  background-color: #FAFAFA;
  width: 50vw;
  height: 50vh;
  border-radius: 12px;
} */
/* #register{
  background-color: #fff;
  width: 32vw;
  height: 35vh;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 280px;
}
.el-form{
} */
/* .el-form{
  max-width: 300px;
} */
#div-login{
  margin-top: 5%;
  /* margin-top: 20%; */
  /* margin-left: 650px; */
  background-color: #fff;
  border-radius: 4px;
  float: right;
  width: 40%;
  height: 60%;
  min-width: 318px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
}

#center{
  margin-top: 45px;
  margin-left: 100px;
}
.mainDiv{
  overflow: hidden;
  min-width: 718px;
  background-image: url("../../src/assets/background.jpg");

}
#main-login{
  margin: 150px auto 0 auto;
  height: 70vh;
  width: 80vw;
}
#submitForm{
  margin-top: 30px;
  margin-left: -10px;
}
#title{
  font-size: 25px;
  text-align: center;
  margin-top: 10px;
}
</style>

 UI-Project/src/views/UnLoadGlass.rar

Binary files differ

 UI-Project/src/views/UnLoadGlass/Landingindication.vue

New file
@@ -0,0 +1,76 @@
<template>
  <div class="glass-rack">
    <div >
      <svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
        <g stroke="null" id="Layer_1">
          <!-- 使用 v-for 循环渲染数据 -->
          <g v-for="(rack, index) in racks" :key="index">
            <rect 
              :x="rack.x" 
              :y="rack.y" 
              :width="rack.width" 
              :height="rack.height" 
              :fill="rack.fillColor"
              
            />
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
              :y="calculateItemYPosition(rack, rack.item, index)" 
              :width="rack.item.width" 
              :height="rack.item.height" 
              :fill="rack.item.fillColor"
            />
            <text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 1 }}号工位</text>
            <text :x="rack.x + rack.width / 2" :y="rack.y + rack.height + 20" text-anchor="middle">{{ rack.item.content }}</text>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      racks: [
        { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
        { x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
        { x: 190, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 190, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
      ]
    };
  },
  methods: {
    // 计算内部物品的 x 坐标位置
    calculateItemXPosition(rack, item, index) {
      if (index === 0 || index === 1) {  // 如果是第一或第二个物品
        return rack.x;  // 返回左边界 x 坐标
      } else if (index === 2 || index === 3) {  // 如果是第三或第四个物品
        return rack.x + rack.width - item.width;  // 返回右边界 x 坐标
      } else {
        return rack.x + (rack.width - item.width) / 2;  // 返回水平居中的 x 坐标
      }
    },
    // 计算内部物品的 y 坐标位置
    calculateItemYPosition(rack, item, index) {
      if (index === 0 || index === 1) {  // 如果是第一或第二个物品
        return rack.y + (rack.height - item.height) / 2;  // 返回垂直居中的 y 坐标
      } else if (index === 2 || index === 3) {  // 如果是第三或第四个物品
        return rack.y + (rack.height - item.height) / 2;  // 返回垂直居中的 y 坐标
      } else {
        return rack.y + rack.height - item.height;  // 返回底部对齐的 y 坐标
      }
    }
  }
};
</script>

<style scoped>
.glass-rack {
  margin-left: 20px;
  width: 300px;
  margin-top: 10px;
}
</style>

 UI-Project/src/views/UnLoadGlass/Landingindicationtwo.vue

New file
@@ -0,0 +1,72 @@
<template>
  <div class="glass-rack">
    <div>
      <svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
        <g stroke="null" id="Layer_1">
          <!-- 使用 v-for 循环渲染数据 -->
          <g v-for="(rack, index) in racks" :key="index">
            <rect 
              :x="rack.x" 
              :y="rack.y" 
              :width="rack.width" 
              :height="rack.height" 
              :fill="rack.fillColor"
            />
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
              :y="calculateItemYPosition(rack, rack.item, index)" 
              :width="rack.item.width" 
              :height="rack.item.height" 
              :fill="rack.item.fillColor"
            />
            <text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 6 }}号工位</text>
            <text :x="rack.x + rack.width / 2" :y="rack.y + rack.height + 20" text-anchor="middle">{{ rack.item.content }}</text>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      racks: [
        { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
        { x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
        { x: 190, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 190, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
      ]
    };
  },
  methods: {
    calculateItemXPosition(rack, item, index) {
      if (index === 0 || index === 1) {
        return rack.x;
      } else if (index === 2 || index === 3) {
        return rack.x + rack.width - item.width;
      } else {
        return rack.x + (rack.width - item.width) / 2;
      }
    },
    calculateItemYPosition(rack, item, index) {
      if (index === 0 || index === 1) {
        return rack.y + (rack.height - item.height) / 2;
      } else if (index === 2 || index === 3) {
        return rack.y + (rack.height - item.height) / 2;
      } else {
        return rack.y + rack.height - item.height;
      }
    }
  }
};
</script>

<style scoped>
.glass-rack {
  margin-left: 20px;
  width: 300px;
}
</style>

 UI-Project/src/views/UnLoadGlass/UnLoadGlass.vue

New file
@@ -0,0 +1,55 @@
<script setup>
import {ArrowLeftBold, ArrowRight, Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router";
let indexFlag=$ref(1)
function changeRouter(index){
  indexFlag=index
}

</script>

<template>
  <div id="main-div">
    <!-- <div id="div-title">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item @click="changeRouter(1)" :class="indexFlag===1?'indexTag':''" :to="{ path: '/UnLoadGlass/loadmachinerack' }">下片管理</el-breadcrumb-item>
        <el-breadcrumb-item @click="changeRouter(2)" :class="indexFlag===2?'indexTag':''" :to="{ path: '/UnLoadGlass/loadmachinerack' }">下片信息</el-breadcrumb-item>
        <el-breadcrumb-item v-show="false" :to="{ path: '/main/product/test1' }">测试</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <div id="main-body">
      <router-view  />
    </div>
  </div>
</template>

<style scoped>
#main-div{
  width: 100%;
  height: 100%;
}
#div-title{
  height: 2%;
  width: 100%;
}
#searchButton{
  margin-top: -5px;
  margin-left: 1rem;
}
/* #searchButton1{
//margin-left: 10rem;
} */
/*main-body样式*/
#main-body{
  width: 100%;
  height: 95%;
  /* margin-top: 1%; */
}
#select{
  margin-left:0.5rem;
}
:deep(.indexTag .el-breadcrumb__inner){
  color: #5CADFE !important;
}
</style>

 UI-Project/src/views/UnLoadGlass/loadmachinerack.vue

New file
@@ -0,0 +1,176 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Landingindication from "./Landingindication.vue";
import Landingindicationtwo from "./Landingindicationtwo.vue";

const tableData = [
  {
    id: '1',
    long: '1005',
    wide: '183.6',
    thick: '1991',
    type: '待识别',
    typea: '1',
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
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:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})

</script>

<template>
  <div>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 200px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="下片位" min-width="80" />
          <el-table-column prop="long" align="center" label="架号" min-width="120" />
          <el-table-column prop="wide" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="type" align="center" label="状态" min-width="120" />
          <el-table-column prop="type" align="center" label="设备号" min-width="120" />
          <el-table-column prop="type" align="center" label="启用状态" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">绑定架子</el-button>
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">清空</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
   
  </div>
  <div style="display: flex;">
  <div id="main-body">
      <Landingindication></Landingindication>
    </div>
  <div id="main-bodya">
    <Landingindicationtwo></Landingindicationtwo>
    </div></div>
</template>

<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{
  text-align: center;
  margin-top: -15px;
}
#message{
  text-align: center;
  align-items: center;
  color: black;
   width: 200px;
   height: 100px;
   background-color: #337ecc;
   margin-left: 28%;
}
#awatch{
  height: 450px;
}
#main-body{
  margin-top: -20px;
  margin-left: 300px;
}
#main-bodya{
  margin-top: -10px;
  margin-left: 100px;
}
</style>

 UI-Project/src/views/mm/caching/caching.vue

New file
@@ -0,0 +1,765 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = [
  {
    id: '1',
    long: '1005',
    wide: '183.6',
    thick: '1991',
    type: '待识别',
    typea: '1',
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  }
]
const tableDataa = [
  {
    ida: '3',
    longa: '1005',
    widea: '183.6',
    thicka: '1991',
  },
  {
    ida: '4',
    longa: '105',
    widea: '183',
    thicka: '191',
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
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:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})
</script>

<template>
  <div>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 240px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="玻璃ID" min-width="80" />
          <el-table-column prop="long" align="center" label="位置" min-width="120" />
          <el-table-column prop="wide" align="center" label="宽" min-width="120" />
          <el-table-column prop="type" align="center" label="长" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">报缺</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
   
  </div>
  <div id="awatch">
    <img src="../../../assets/woshihuancun.png" alt="" style="width: 70%;height: 100%;margin-left: 160px;">

</div>
</template>

<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{
  text-align: center;
  margin-top: -15px;
}
#message{
  text-align: center;
  align-items: center;
  color: black;
   width: 200px;
   height: 100px;
   background-color: #337ecc;
   margin-left: 28%;
}
#awatch{
  height: 450px;
}
</style>

 UI-Project/src/views/mm/identify/Create.vue

New file
@@ -0,0 +1,724 @@
<template>
  <el-header height="auto">
    <el-descriptions
        class="margin-top"
        title=""
        :column="4"
        :size="'default'"
        border
        :rules="rules"
        :model="ruleForm"
    >

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy" prop="name">
        <template #label>
          <span style="color:red">*</span>
          采购类型
        </template>
<!--        <el-select v-model="form.buyType" class="m-2" placeholder="选择采购类型" clearable>-->
        <el-select v-model="ruleForm.name" class="m-2" placeholder="选择采购类型" clearable>
          <el-option
              v-for="item in CGTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-descriptions-item >

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购组织
        </template>
        <el-input v-model="ruleForm.name" placeholder="采购组织" clearable prop="name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          供应商
        </template>
        <el-cascader
            placeholder="选择供应商"
            :options="buyerOptions"
            filterable
            clearable
            empty-text="empty-text"
            :v-model="form.supplier"
        >
        </el-cascader>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购部门
        </template>
        <el-select v-model="cgBuMen" class="m-2" placeholder="选择采购部门" clearable>
          <el-option
              v-for="item in CGBuMenOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-descriptions-item>



      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购员
        </template>
        <el-select v-model="form.buyer" class="m-2" placeholder="选择采购员" clearable>
          <el-option
              v-for="item in BuyerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"
      >
        <template #label>
          <span style="color:red">*</span>
          制表日期
        </template>
        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择制表日期"

        />
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"></el-descriptions-item>
    </el-descriptions>

  </el-header>

  <el-main style="padding-top: 5px;height:100%">
    <!--    <el-button class="mt-4" style="width: 10%" @click="onAddItem"
        >添加
        </el-button>-->

    <vxe-grid

        max-height="500"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        @="gridEvents"
    >

      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{ key + ':  ' }}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
        <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <el-input v-model="option.data" @input="changeFilterEvent($event, option, $panel)" />
          </div>
        </div>
      </template>
    </vxe-grid>

  </el-main>

</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue'
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

let router = useRouter()

//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  columns: [
    //{title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'seq', fixed: "left", title: ' ', width: 50},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    //{type: 'expand', title: '详情', fixed: "left", slots: {content: 'content'}, width: 50},
    {
      field: 'cgdh',
      width: '10%',
      title: '物料编码',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'cgzt',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'gys',
      width: '10%',
      title: '产地',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'w',
      width: '8%',
      title: '宽度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'g',
      width: '8%',
      title: '高度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true,
      type: 'number'
    },
    {
      field: 'h',
      width: '8%',
      title: '厚度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'xh',
      width: '8%',
      title: '型号',/*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'dw',
      width: '8%',
      title: '单位', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '数量', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '操作数量', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}}
    },
    {
      field: 'sl',
      width: '12%',
      title: '箱数',    /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'je',
      width: '8%',
      title: '单片面积', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'je',
      width: '12%',
      title: '单价',   /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: '6',
      width: '8%',
      title: '总数量',   /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '总面积', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '总金额',/*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '备注', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    }
  ],//表头参数
  toolbarConfig: {
    buttons: [
      {type: 'text'},
      {
        'name': '新增',

        'code': 'Add',
      },
      {
        'name': '移除',

        'code': 'Remove'
      },
      {
        'name': '保存订单',
        status: 'primary',
        'code': 'Save'
      }, {
        'name': '入库',
        status: 'primary',
        'code': 'Storage'
      }/*,
      {
        'name': '退货',
        status: 'primary',
        'code': 'Return'
      },
      {
        'name': '返回查询',

        'code':'GoSelect'
      }*/],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    tools: [],

  },//表头按钮
  /*data: [{},{},{},{},{},{}],//table body实际数据*/
  data: [{}, {}, {}],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 3}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
//新增
        case 'Add': {
          const record = {
            checked: false
          }
          $grid.insertAt(record, 0).then(({row}) => {
            $grid.setEditRow(row)
          })
          break
        }
//移除
        case 'Remove': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {

            MessageConfirmShow('移除','是否确认移除选中的' + $grid.getCheckboxRecords().length + '条数据！');

          }
          break
        }
//保存
        case 'Save': {
          /*if (form.buyItem === null || form.buyItem === '') {
            MessageShow('采购组织不可为空','warning');
            return;
          }
*/
          //选中数据
          /* const $table = this.$refs.xTable
           const selectRecords = $table.getCheckboxRecords()*/
//+$grid.rows.number
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {


            MessageConfirmShow('保存订单','是否确定保存当前订单信息');
          }
          break
        }
//入库
        case 'Storage': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {
            MessageConfirmShow('入库','您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认入库？')
          }
          break
        }
//退库
        case 'Return': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {


          }
          break
        }

      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}


import type { FormInstance, FormRules } from 'element-plus'




interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})


const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  supplier: '',
  buyer: '',
  buyItem: '',
  buyType: ''

})

//供应商
const buyerOptions = [
  {value: '0', label: '供应商1'},
  {value: '1', label: '供应商2'},
  {value: '2', label: '供应商3'},
  {value: '3', label: '供应商4'},
  {value: '4', label: '供应商5'},
  {value: '5', label: '供应商6'},
]


const value = ref('')
const cgBuMen = ref('')

//采购类型
const CGTypeOptions = [
  {
    value: '1',
    label: '标准类型',
  },
  {
    value: '2',
    label: '非标准类型',
  },
  {
    value: '3',
    label: '追加采购',
  },

]

//采购部门
const CGBuMenOptions = [
  {
    value: '0',
    label: '采购华北部',
  },
  {
    value: '1',
    label: '采购东南部',
  },
  {
    value: '2',
    label: '采购西北部',
  },
  {
    value: '3',
    label: '采购中原部',
  },
  {
    value: '4',
    label: '采购外国部',
  },

]

//采购人
const BuyerOptions = [
  {
    value: '0',
    label: '采购员1',
  },
  {
    value: '1',
    label: '采购员2',
  },
  {
    value: '2',
    label: '采购员3',
  },
  {
    value: '3',
    label: '采购员4',
  },
  {
    value: '4',
    label: '采购员5',
  },

]

//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    case '保存订单':
      //保存订单逻辑代码TODO
      const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
          if (valid) {
            console.log('submit!')
          } else {
            console.log('error submit!', fields)
          }
        })
      }
      MessageShow('订单保存成功！', 'success');
      break;
    case '移除':
      $grid.removeCheckboxRow();
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;

}

//提示信息
const MessageShow = (content, type ) => {

  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title='操作确认提示', type='warning') => {

  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {
        return logicExecute(czType);
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}


</script>
<style scoped>
:deep(.el-descriptions__table .label-diy) {
  text-align: center;
  width: 100px;
  /*font-size: large;*/
}
</style>

 UI-Project/src/views/mm/identify/CreateHeader.vue

New file
@@ -0,0 +1,739 @@
<template>
  <el-header height="auto">


  </el-header>

  <el-main style="padding-top: 5px;height:100%">

    <!--    创建表头模拟样式一-->
    <div>创建表头类一</div>
    <el-form label-width="100px" :inline="true" :model="formInline" class="demo-form-inline">
      <div class="order-primary" style="background-color: white; border: #181818 1px solid">
        <el-row>
          <el-col class="elcolStyle" :span="2">
            <el-text>*项目名称：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-input/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>*客户选择：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>*订单类型：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>订单分类：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>商标选项：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>包装方式：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
          <!--      <el-col :span="2"><el-text  /></el-col>-->
        </el-row>
        <el-row>
          <el-col class="elcolStyle" :span="2">
            <el-text>销售单号：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>交货日期：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-date-picker
                type="week"
                format="[Week] ww"
                placeholder="选择日期" style="width: 100%"/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>批次：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-input/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>计算方式：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>*业务员：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>铝条方式：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-select clearable placeholder=" ">
              <el-option/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="elcolStyle" :span="2">
            <el-text>总金额：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text/>
          </el-col>

          <el-col class="elcolStyle" :span="2">
            <el-text>合同编号：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-input/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>客户批次：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>联系人：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-input/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>联系电话：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-input/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>送货地址：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-input/>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="elcolStyle" :span="2">
            <el-text>其他金额：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text/>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text>其他金额备注：</el-text>
          </el-col>
          <el-col class="elcolStyle" :span="2">
            <el-text/>
          </el-col>

        </el-row>
      </div>
    </el-form>

    <br/>
    <div>创建表头类二</div>
    <!--    创建表头模拟样式二-->
    <!--    <el-form label-width="80px" :inline="true" :model="formInline2" class="demo-form-inline">-->
    <div class="header2">
      <el-row :gutter="10" style="height: 35px">
        <el-col :span="4">
          <el-form-item label="项目名称" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="客户选择" class="item-style" prop="name">
            <el-select v-model="cgBuMen" class="m-2" placeholder="选择采购部门" clearable>
              <el-option
                  v-for="item in CGBuMenOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="订单类型" class="item-style">
            <el-cascader
                placeholder="订单类型"
                :options="buyerOptions"
                filterable
                clearable
                empty-text="empty-text"
                :v-model="form.supplier"
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="订单分类" class="item-style">
            <el-select v-model="form.buyer" class="m-2" placeholder="订单分类" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="商品选项" class="item-style">
            <el-select v-model="form.buyer" class="m-2" placeholder="商品选项" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="包装方式" class="item-style">
            <el-select v-model="form.buyer" class="m-2" placeholder="包装方式" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="height: 35px">
        <el-col :span="4">
          <el-form-item label="销售单号" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="交货日期" class="item-style">
            <el-date-picker
                type="week"
                format="[Week] ww"
                placeholder="选择日期" style="width: 100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="订单批次" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="计算方式" class="item-style">
            <el-select v-model="form.buyer" class="m-2" placeholder="计算方式" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="业务员" class="item-style">
            <el-select v-model="form.buyer" class="m-2" placeholder="业务员" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="铝条方式" class="item-style">
            <el-select v-model="form.buyer" class="m-2" placeholder="铝条方式" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="height: 35px">
        <el-col :span="4">
          <el-form-item label="总金额" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="合同编号" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="客户批次" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="联系人" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="联系电话" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="送货地址" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="height: 35px">
        <el-col :span="4">
          <el-form-item label="其他金额" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <!--          <el-col :span="4">
                    <span>其他金额备注</span>
                    <el-input ></el-input>
                  </el-col>-->
        <el-col :span="4">
          <el-form-item label="其他金额备注" class="item-style">
            <el-input></el-input>
          </el-form-item>
        </el-col>

      </el-row>

    </div>
    <!--    </el-form>-->

    <!--    创建表头模拟样式三-->
    <br/>
    <div>创建表头类三</div>
    <!--    <el-form label-width="100px" :inline="true" :model="formInline3" class="demo-form-inline">-->
    <el-descriptions
        class="margin-top"
        title=""
        :column="6"
        :size="'small'"
        border
    >

      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          项目名称
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          客户选择
        </template>
        <el-select></el-select>

      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          订单类型
        </template>
        <el-select></el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          订单分类
        </template>
        <el-select></el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          商标选项
        </template>
        <el-select></el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          包装方式
        </template>
        <el-select></el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          销售单号
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          交货日期
        </template>
        <el-date-picker
            type="week"
            format="[Week] ww"
            placeholder="选择日期" style="width: 100%"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          批次
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          计算方式
        </template>
        <el-select></el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="color:red">*</span>
          业务员
        </template>
        <el-select></el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          铝条方式
        </template>
        <el-select></el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          总金额
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          合同编号
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          客户批次
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          联系人
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          联系电话
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          送货地址
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>

          其他金额
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          其他金额备注
        </template>
       <el-input />
      </el-descriptions-item>

      <el-descriptions-item></el-descriptions-item>
<!--      <el-descriptions-item></el-descriptions-item>
      <el-descriptions-item></el-descriptions-item>
      <el-descriptions-item></el-descriptions-item>
      <el-descriptions-item></el-descriptions-item>-->
    </el-descriptions>

    <!--    </el-form>-->
  </el-main>

</template>

<script setup>
import {ref, reactive} from 'vue'

let router = useRouter()


const openAlert = (options) => {
  if (options.type === 'message') {
    VXETable.modal.message(options)
  } else {
    VXETable.modal.alert(options)
  }

}


const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  supplier: '',
  buyer: '',
  buyItem: '',
  buyType: ''

})

const onSubmit = () => {
  console.log('submit!')
}

//供应商
const buyerOptions = [
  {value: '0', label: '供应商1'},
  {value: '1', label: '供应商2'},
  {value: '2', label: '供应商3'},
  {value: '3', label: '供应商4'},
  {value: '4', label: '供应商5'},
  {value: '5', label: '供应商6'},
]


const value = ref('')
const cgBuMen = ref('')

//采购类型
const CGTypeOptions = [
  {
    value: '1',
    label: '标准类型',
  },
  {
    value: '2',
    label: '非标准类型',
  },
  {
    value: '3',
    label: '追加采购',
  },

]

//采购部门
const CGBuMenOptions = [
  {
    value: '0',
    label: '采购华北部',
  },
  {
    value: '1',
    label: '采购东南部',
  },
  {
    value: '2',
    label: '采购西北部',
  },
  {
    value: '3',
    label: '采购中原部',
  },
  {
    value: '4',
    label: '采购外国部',
  },

]

//采购人
const BuyerOptions = [
  {
    value: '0',
    label: '采购员1',
  },
  {
    value: '1',
    label: '采购员2',
  },
  {
    value: '2',
    label: '采购员3',
  },
  {
    value: '3',
    label: '采购员4',
  },
  {
    value: '4',
    label: '采购员5',
  },

]

import dayjs from 'dayjs'
import {VXETable} from "vxe-table";
import {useRouter} from "vue-router";
import {User} from "@element-plus/icons-vue";

const now = new Date()

const tableData = ref([
  {
    wlcode: '202312205101',
    wlname: '这是一个物料名称',
    cd: '产地12',
    hd: '8',
    gd: '2440',
    kd: '3660',
    xh: 'CN10P'
  },
  {
    wlcode: '202312305101',
    wlname: '这是一个物料名称',
    cd: '产地1',
    gd: '2440',
    kd: '3660',
    hd: '5',
    xh: 'CN10P'
  },
  {
    wlcode: '202312405101',
    wlname: '这是一个物料名称',
    cd: '产地13',
    hd: '12',
    gd: '2440',
    kd: '3660',
    xh: 'CN10P'
  },
])


const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    wlcode: dayjs(now).format('YYYYMMDDss') + '01',
    wlname: '这是一个物料名称',
    cd: '产地1',
    hd: '6',
    xh: 'CN10P',
    gd: '2440',
    kd: '3660',
  })
}


</script>


<style scoped>
.custom-header {
  .el-checkbox {
    display: flex;
    height: unset;
  }
}

.item-style {
  width: 92%;
}


.main-div {
  width: 100%;
  height: 100%;
  text-align: center;
}

/*.el-col{
  border: #181818 1px solid;
}*/

.elcolStyle {
  border: #181818 1px solid;
}

header2 :deep(.el-col) {
  padding: 0;
  margin: 0;
//height: 35px; color: red;

}

order-primary :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}

.order-primary {
  width: 100%;
}

.order-detail {
  width: 100%;
  height: 80%;
}

/*.cell-item {
  display: flex;
  align-items: center;
}*/

:deep(.el-descriptions__label) {
  width: 90px;
  text-align: center;
}
</style>

 UI-Project/src/views/mm/identify/Details.vue

New file
@@ -0,0 +1,453 @@
<template>
  <el-header height="auto">
    <el-descriptions
        class="margin-top"
        title=""
        :column="4"
        :size="'default'"
        border
    >
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          操作单号
        </template>
        <el-input v-model="form.buyItem" placeholder="单号" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购类型
        </template>
        <el-input v-model="form.buyItem" placeholder="采购类型" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购部门
        </template>
        <el-input v-model="form.buyItem" placeholder="采购部门" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          供应商
        </template>
        <el-input v-model="form.buyItem" placeholder="供应商" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购员
        </template>
        <el-input v-model="form.buyItem" placeholder="采购员" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购组织
        </template>
        <el-input v-model="form.buyItem" placeholder="采购组织" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          制表日期
        </template>
        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择制表日期"
        />
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"></el-descriptions-item>

    </el-descriptions>
  </el-header>

  <el-main style="padding-top: 5px;height:100%">
    <vxe-grid
        max-height="500"
        @filter-change="filterChanged"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
    >

      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{ key + ':  ' }}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

    </vxe-grid>

  </el-main>

</template>

<script setup>
import {ref, reactive} from 'vue'

let router = useRouter()
import {useRouter} from "vue-router";
import { ElMessage, ElMessageBox} from "element-plus";

const value = ref('')

//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  //表头参数、列名
  columns: [
    {type: 'seq', fixed: "left", title: ' ', width: 50},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    {
      field: 'cgdh',
      width: '10%',
      title: '物料编码',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'cgzt',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'gys',
      width: '10%',
      title: '产地',

      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'w',
      width: '8%',
      title: '宽度',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'g',
      width: '8%',
      title: '高度',
      filters: [{data: ''}],
      sortable: true,

    },
    {
      field: 'h',
      width: '8%',
      title: '厚度',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'xh',
      width: '8%',
      title: '型号',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'dw',
      width: '8%',
      title: '单位',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '数量',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'czsl',
      width: '8%',
      title: '操作数量',
      type: 'number',
      editRender: {name: 'input', type: 'number', attrs: {placeholder: ''}}
    },
    {
      field: 'sl',
      width: '12%',
      title: '箱数',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'je',
      width: '8%',
      title: '单片面积',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'je',
      width: '12%',
      title: '单价',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '总面积',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '总金额',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '备注',
      filters: [{data: ''}],
      sortable: true
    }
  ],
  //表头按钮
  toolbarConfig: {
    buttons: [
      {type: 'text'},
      {
        'name': '保存订单',
        status: 'primary',
        'code': 'Save'
      }, {
        'name': '入库',
        status: 'primary',
        'code': 'Storage'
      },
      {
        'name': '退货',
        status: 'primary',
        'code': 'Return'
      },
      {
        'name': '取消',
        status: '',
        'code': 'Cancel'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    tools: [],

  },
  //table body实际数据
  data: [{}, {}, {}],
  //脚合并
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 3}
  ],
  //合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
//保存
        case 'Save': {
          MessageAlertShow('点击了保存订单','操作提示');
          //MessageShow('点击了保存订单！', 'error');
          break;
        }
//取消，返回查询页面
        case 'Cancel': {
          router.push({path: '/main/purchaseOrder/StoragePurchaseOrder'})
          break
        }
//入库
        case 'Storage': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据！', 'warning');
            return
          } else {
            MessageConfirmShow('入库', '是否确认对选中的' + $grid.getCheckboxRecords().length + '物料进行入库操作！');
          }
          break
        }
//退货
        case 'Return': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据！', 'warning');
            return
          } else {

            MessageConfirmShow('退货', '是否确认对选中的' + $grid.getCheckboxRecords().length + '物料进行退货操作！');
          }
          break
        }

      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}

//表单数据
const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  supplier: '',
  buyer: '',
  buyItem: '',
  buyType: ''

})


//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;
}

//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content,type='success') => {
    ElMessage({
      message: content,
      type: type,
      showClose: true,
    })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title='操作确认提示', type='warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {

        return logicExecute(czType);
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow=(content,title,type='info')=>{

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}

</script>


<style scoped>
:deep(.el-descriptions__table .label-diy) {
  text-align: center;
  width: 100px;
  /*  font-size: large;*/
}
</style>

 UI-Project/src/views/mm/identify/Payment.vue

New file
@@ -0,0 +1,354 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />
        </el-col>

        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="autoAddRow">查询
          </el-button>
        </el-col>
      </el-row>

    </el-header>
    <el-main style="padding-top: 5px">
      <vxe-grid

          max-height="600"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="PayOptions"
          @="gridEvents"

      >

        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined ">
              <span style="font-weight: bold">{{item.title+':  '}}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
          <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
        </template>


        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>
    </el-main>
  </el-container>
</template>


<script setup>
import {ref} from 'vue'
import {Search} from "@element-plus/icons-vue";
import 'dayjs/locale/zh-cn'
import {VXETable} from "vxe-table";
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";

const datevalue = ref('')//时间

//组件接收参数
const PayOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  columns: [
    /* {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},*/
    {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: '5%'},//详情
    {type: 'checkbox', fixed: "left", title: '', width: '5%'},
    {type: 'seq', fixed: "left", title: ' ', width: '5%'},
    {
      field: 'cgdh',
      width: '10%',
      title: '采购单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'cgzt', width: '10%', title: '月份', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'gys',
      width: '10%',
      title: '供应商',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlbh',
      width: '10%',
      title: '期初金额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlmc',
      width: '10%',
      title: '本期应付',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'w',
      width: '10%',
      title: '本期已付',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'g',
      width: '10%',
      title: '期末余额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'h', width: '9%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: '6', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [{type: 'text'}, {
      'name': '应付确认',
      status: 'primary',
      'code': 'Sure',
    }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    style: 'paddling-left:10px'
  },//表头按钮
  data: [{}, {}, {}, {}],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 3}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})


const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
          //应付确认
        case 'Sure': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow("请选择至少一条数据!", 'warning');
            return
          } else {
            MessageConfirmShow("确认应付", '您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认应付？')
          }
          break
        }
      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}



const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '确认应付':
      //入库逻辑代码TODO
      MessageShow('操作成功！', 'success');
      break;

    default:
      MessageShow('未知操作！', 'error');
      break;

  }
  return true;
}


//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content, type = 'success') => {
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {

        return  logicExecute(czType);

      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow = (content, title, type = 'info') => {

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}

</script>


<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.m-header {
  height: 32px;
}
</style>

 UI-Project/src/views/mm/identify/Return.vue

New file
@@ -0,0 +1,593 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />

        </el-col>

        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="BtnSearchPurchaseOrder">查询
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding-top: 5px;height:100%">
      <vxe-grid

          max-height="600"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"
          @cell-dblclick="cellClickEvent"
      >

        <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined ">
              <span style="font-weight: bold">{{ item.title + ':  ' }}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
          <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
        </template>


        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>


      <!--      详情框 部分1-->
      <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false"
                 resize>
        <el-container>
          <el-header height="35px"
                     style="margin: 0;padding: 0">

            <el-input v-model="showCGDH" placeholder="采购单号" disabled>
              <template #prepend>采购单号：</template>
            </el-input>
          </el-header>
          <el-main>
            <template #default>
              <vxe-table
                  border="default"
                  auto-resize
                  show-overflow
                  max-height="400"
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :sync-resize="showDetails"
                  :data="detailData"

              >
                <vxe-column field="label" width="30%" class-name="v-column-label"></vxe-column>
                <vxe-column field="value"></vxe-column>
              </vxe-table>
            </template>
          </el-main>
          <el-footer height="40px">
            <el-row>
              <el-col :offset="20" :span="4">
                <el-button
                    id="Sure"
                    type="primary"
                    @click="SureReturn"
                >确认退货
                </el-button>
              </el-col>

            </el-row>
          </el-footer>
        </el-container>
      </vxe-modal>
      <!--      详情框 部分1 结束-->
    </el-main>
  </el-container>
</template>


<script setup>

import {ref} from "vue";
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";


let router = useRouter()
const getTableRow = (row, type) => {
  switch (type) {
    case 'edit' : {
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/purchaseOrder/DetailsPurchaseOrder', query: {id: row.id}})
      break
    }
    case 'delete': {


      alert('我接收到子组件传送的删除信息' + row.id)
      break
    }
  }
}

const xGrid = ref()

const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Sure': {
          if ($grid.getCheckboxRecords().length === 0) {

            MessageShow('请选择至少一条数据!', 'warning');

            return
          } else {

            MessageConfirmShow('确定', '您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认退货？')
          }
          break
        }
        case 'Log': {
          MessageAlertShow('点击了退货记录!', '操作提示');
          break
        }
      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}


//查询按钮方法
const BtnSearchPurchaseOrder = () => {

  //开始时间，结束时间获取
  //MessageShow("开始时间"+datevalue._rawValue[0]+"\r\n结束时间\r\n"+datevalue._rawValue[1]);

  for (let i = 1; i < 6; i++) {
    const randomInt = Math.floor(Math.random() * 999) + 1000;//4位数随机数
    const randomSumInt = Math.floor(Math.random() * 99) + 10;//2位数随机数
    const randomOrderInt = Math.floor(Math.random() * 99) + 100;//3位数随机数
    const t = i % 2 === 0 ? 5 : 6;
    const s = i % 2 === 0 ? '入库' : i % 3 === 0 ? '退货' : '部分入库';
    const thdh = i % 2 === 0 ? '' : i % 3 === 0 ? 'THID' + randomOrderInt : '';
    const CGNo = 'NGCG231200' + randomOrderInt;//采购编号
    const wlNo = 'NGWL1000' + randomInt;
    const xh = 'NGXH' + randomSumInt;
    const wlmc = 'WLMC' + randomInt;
    const gys = '供应商' + randomSumInt;
    const xhdh = 'NG231200' + randomOrderInt;
    const w = i % 2 === 0 ? '3300' : i % 3 === 0 ? '3660' : i % 4 === 0 ? '2250' : '2580';
    const h = i % 2 === 0 ? '2440' : i % 3 === 0 ? '2440' : i % 4 === 0 ? '2000' : '2300';
    const dw = i % 2 === 0 ? '片' : i % 3 === 0 ? '平米' : i % 4 === 0 ? '包' : '吨';
    now.setDate(now.getDate() + 1);
    gridOptions.data.push({
      cgdh: CGNo,
      thdh: thdh,
      h: t,
      xh: xh,
      wlbh: wlNo,
      wlmc: wlmc,
      gys: gys,
      w: w,
      g: h,
      dw: dw,
      cgzt: s,
      rq: dayjs(now).format('YYYY-MM-DD'),
      yl: randomSumInt,
      sl: randomOrderInt,
      xsdh: xhdh,
      je: randomInt,
      6: '139xxxxxxxx',

    })
  }

}


//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  columns: [
    {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: 50},//详情
    {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    {type: 'seq', fixed: "left", title: ' ', width: 50},


    {
      field: 'thdh',
      width: '10%',
      title: '退货单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'cgdh',
      width: '10%',
      title: '采购单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'cgzt', width: '10%', title: '状态', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'gys',
      width: '10%',
      title: '供应商',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlbh',
      width: '10%',
      title: '物料编号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlmc',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'w', width: '8%', title: '宽度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'g', width: '8%', title: '高度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'h', width: '8%', title: '厚度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'xh', width: '8%', title: '型号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'dw', width: '8%', title: '单位', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '12%',
      title: '不含税单价',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'sl', width: '8%', title: '数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'sl',
      width: '12%',
      title: '已采购数量',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'je', width: '8%', title: '金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'je',
      width: '12%',
      title: '不含税金额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '8%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'sl', width: '8%', title: '库存', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '周用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '月用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'cgzt',
      width: '10%',
      title: '单据状态',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'xsdh',
      width: '10%',
      title: '销售单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'rq',
      width: '10%',
      title: '制单日期',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '制单人', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '10%',
      title: '采购部门',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: '6',
      width: '10%',
      title: '采购组织',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [{type: 'text'}, {
      'name': '退货记录',

      'code': 'Log'
    },
      {
        'name': '确认退货',
        status: 'primary',
        'code': 'Sure'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    style: 'paddling-left:10px'
  },//表头按钮
  data: [],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 4}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})


//详情框 部分2
const showCGDH = ref();
const showDetails = ref(false);
let detailData = [];
const cellClickEvent = ({row}) => {
  if (isQueryColumnId === false) {
    queryColumnId();
  }

  detailData = list.map(field => {
    return {label: queryColumnsTitle(field), value: row[field]}
  })
  showDetails.value = true;
  showCGDH.value = row['cgdh'];
}

//获取表列
let list = [];
let columnIndex = 4;//列标头从第几列开始的
let isQueryColumnId = false;
const queryColumnId = () => {

  while (columnIndex < gridOptions.columns.length) {
    list.push(gridOptions.columns[columnIndex].field);
    columnIndex++;
  }
  isQueryColumnId = true;
  return list;
}

//获取表列名
function queryColumnsTitle(cn) {
  let i = 0;
  while (i < gridOptions.columns.length + 1) {
    if (gridOptions.columns[i].field === cn) {
      return gridOptions.columns[i].title;
    }
    i++;
  }
}

// 详情框部分2 结束

const SureReturn = () => {

  MessageConfirmShow('退货', '是否确认退货？')

}

//详情框 部分2 结束


const now = new Date()

//时间快捷选择
const datevalue = ref('')
const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//页面逻辑代码执行
function logicExecute(type) {
  const $grid = xGrid.value
  switch (type) {
    case '确定':
      //多选退货逻辑代码TODO
      MessageShow('操作成功！', 'success');
      break;
    case '退货':
      //单退货逻辑代码TODO
      MessageShow('操作成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;
}


//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content, type = 'success') => {
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {

        logicExecute(czType);

        return true;
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow = (content, title, type = 'info') => {

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}

</script>


<style scoped>
:deep(.v-column-label div span) {
  font-weight: bold;
}
</style>

 UI-Project/src/views/mm/identify/Select.vue

New file
@@ -0,0 +1,917 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)
const box = ref(true)
const boxa = ref(false)
const boxb = ref(false)
const tableData = [
  {
    id: '1',
    long: '1005',
    wide: '183.6',
    thick: '1991',
    type: '待识别',
    typea: '1',
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  }
]
const tableDataa = [
  {
    ida: '3',
    longa: '1005',
    widea: '183.6',
    thicka: '1991',
  },
  {
    ida: '4',
    longa: '105',
    widea: '183',
    thicka: '191',
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}


const dialogForm = () => {
  ElMessageBox.confirm(
    '是否切换版图?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    // this.boxa = true
    // this.box = false
      
    })
}
const selectedRows = ref([]);
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
const showMessage = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '重新识别成功！',
    type: 'success',
  })

  }
};
const pick = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '人工匹配成功！',
    type: 'success',
  })

  }
};
const remove = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '操作成功！',
    type: 'success',
  })

  }
};

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:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})
</script>

<template>
  <div>
     <el-button style="margin-top: 5px;margin-left: 5px;"   id="searchButton" type="primary" @click="showMessage">重新识别</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" type="primary" @click="pick">人工匹配</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" type="primary" @click="remove">人工拿走</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" type="primary" >破损</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" @click="boxb = true;box = false" >合并</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" @click="box = true;boxb = false" >单片</el-button>
    <el-button style="margin-top: 5px;float: right;margin-right: 50px;"  id="searchButton" type="text"  @click="dialogForm">版图号</el-button>

    <div v-if="box">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column type="selection" width="55"  />
          <el-table-column prop="id" align="center" label="id" min-width="80" />
          <el-table-column prop="long" align="center" label="长" min-width="120" />
          <el-table-column prop="wide" align="center" label="宽" min-width="120" />
          <el-table-column prop="type" align="center" label="状态" min-width="120" />
          <el-table-column prop="thick" align="center" label="其他" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <!-- <el-button size="mini" type="text" plain  @click="dialogFormVisible = true">详情</el-button> -->
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">设置</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
    <div v-if="boxb">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column type="selection" width="55"  />
          <el-table-column prop="id" align="center" label="类型序号" min-width="80" />
          <el-table-column prop="long" align="center" label="长" min-width="120" />
          <el-table-column prop="wide" align="center" label="宽" min-width="120" />
          <el-table-column prop="typea" align="center" label="数量" min-width="120" />
          <el-table-column prop="thick" align="center" label="其他" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <!-- <el-button size="mini" type="text" plain  @click="dialogFormVisible = true">详情</el-button> -->
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">设置</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
    <!-- <div v-if="boxa">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column type="selection" width="55"  />
          <el-table-column prop="ida" align="center" label="id" min-width="80" />
          <el-table-column prop="longa" align="center" label="长" min-width="120" />
          <el-table-column prop="widea" align="center" label="宽" min-width="120" />
          <el-table-column prop="thicka" align="center" label="其他" min-width="120" />
        </el-table>
      </div>
    </el-card>
  </div> -->
  </div>
  <!-- <el-dialog v-model="dialogFormVisible" top="21vh" width="30%" title="小片图" >
      
        <div id="message">
          200*100
        </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog> -->
  <el-dialog v-model="dialogFormVisiblea" top="21vh" width="30%" title="测量设置" >
            <el-form  size="mini" label-width="150px">
      <el-form style="margin-left: 80px;">
        
        <el-form-item label="误差长：" :required="true" style="width: 16vw;margin-bottom: 30px;">
            <div style="display: flex;"><el-input  autocomplete="off" /><div style="margin-left: 10px;">mm</div> </div>
              </el-form-item>
              <el-form-item label="误差宽：" :required="true" style="width: 16vw">
            <div style="display: flex;"><el-input  autocomplete="off" /><div style="margin-left: 10px;">mm</div> </div>
              </el-form-item>
        </el-form>
            </el-form>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="dialogFormVisiblea = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisiblea = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <div id="awatch">小片图：
<div id="watch">200*100</div>
</div>
</template>

<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{
  text-align: center;
  margin-top: -15px;
}
#message{
  text-align: center;
  align-items: center;
  color: black;
   width: 200px;
   height: 100px;
   background-color: #337ecc;
   margin-left: 28%;
}
#awatch{
  display: flex;
  margin-top: 20px;
  font-size: 20px;
  margin-left: 50px;
}
#watch{
  text-align: center;
  align-items: center;
  color: black;
   width: 300px;
   height: 150px;
   background-color: #337ecc;
   margin-left: 2%;
   margin-top: 10px;
}
</style>

 UI-Project/src/views/mm/identify/Storage.vue

New file
@@ -0,0 +1,603 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"

              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />

        </el-col>
        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="BtnSearchPurchaseOrder">查询
          </el-button>
        </el-col>

      </el-row>


    </el-header>
    <el-main style="padding-top: 5px;height:100%">
      <vxe-grid

          max-height="600"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"

          @cell-dblclick="cellClickEvent"

      >

        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined ">
              <span style="font-weight: bold">{{ item.title + ':  ' }}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <el-button @click="getTableRow(row,'look')" link type="primary" size="small">查看</el-button>
          <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
          <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
        </template>


        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>

      <!--      详情框 部分1-->
      <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false"
                 resize>
        <el-container>
          <el-header height="35px"
                     style="margin: 0;padding: 0">

            <el-input v-model="showCGDH" placeholder="采购单号" disabled>
              <template #prepend>采购单号：</template>
            </el-input>
          </el-header>
          <el-main>
            <template #default>
              <vxe-table
                  border="inner"
                  auto-resize
                  show-overflow
                  max-height="400"
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :sync-resize="showDetails"
                  :data="detailData">
                <vxe-column field="label" width="30%" class-name="v-column-label"></vxe-column>
                <vxe-column field="value"></vxe-column>
              </vxe-table>
            </template>
          </el-main>
          <el-footer height="40px">
            <el-row>
              <el-col :offset="20" :span="4">
                <el-button
                    id="Sure"
                    type="primary"
                    @click="SureStorage"
                >确认入库
                </el-button>
              </el-col>

            </el-row>
          </el-footer>
        </el-container>
      </vxe-modal>
      <!--      详情框 部分1 结束-->


    </el-main>
  </el-container>


</template>


<script setup>
import {ref} from "vue";
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {VXETable} from "vxe-table";
import {ElMessage, ElMessageBox} from "element-plus";

let router = useRouter()


const getTableRow = (row, type) => {
  switch (type) {
    case 'edit' : {
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/purchaseOrder/DetailsPurchaseOrder', query: {id: row.id}});

      break
    }
    case 'look': {
      /*this.detailData = ['name', 'nickname', 'role', 'sex', 'age', 'amount', 'address'].map(field => {
        return { label: field, value: row[field] }
      })*/
      //this.showDetails = true
      break
    }
    case 'delete': {
      alert('我接收到子组件传送的删除信息' + row.id)
      break
    }
  }
}

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Sure': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据', 'warning');
            //openAlert({type: 'message', content: '请选择至少一条数据', status: 'warning'})
            //VXETable.modal.message( '请选择一条数据！')
            return
          } else {
            const type = VXETable.modal.confirm('您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认入库？');
            //openAlert({type:'alert', content: '成功入库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success' })
            //VXETable.modal.message( '请选择一条数据！')
            return
          }
          break
        }
        case 'Log': {

          //openAlert({type: 'alert', content: '点击了退货记录', status: 'success'})
          MessageConfirmShow("退货记录", "点击了退货记录", "", 'success')
          break
        }
      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}

const openAlert = (options) => {
  if (options.type === 'message') {
    VXETable.modal.message(options)
  } else {
    VXETable.modal.alert(options)
  }

}
const closeAlert = (id) => {
  VXETable.modal.close(id)
}


//查询调用事件
const BtnSearchPurchaseOrder = () => {
  //开始时间，结束时间获取
  //MessageShow(datevalue._rawValue[0]+"\r\n时间2\r\n"+datevalue._rawValue[1]);

  for (let i = 1; i < 6; i++) {
    const randomInt = Math.floor(Math.random() * 999) + 1000;//4位数随机数
    const randomSumInt = Math.floor(Math.random() * 99) + 10;//2位数随机数
    const randomOrderInt = Math.floor(Math.random() * 99) + 100;//3位数随机数
    const t = i % 2 === 0 ? 5 : 6;
    const s = i % 2 === 0 ? '入库' : i % 3 === 0 ? '待审核' : '已采购';
    const rkdh = i % 2 === 0 ? 'RKID' + randomOrderInt : i % 3 === 0 ? '' : '';
    const CGNo = 'NGCG231200' + randomOrderInt;//采购编号
    const wlNo = 'NGWL1000' + randomInt;
    const xh = 'NGXH' + randomSumInt;
    const wlmc = 'WLMC' + randomInt;
    const gys = '供应商' + randomSumInt;
    const xhdh = 'NG231200' + randomOrderInt;
    const w = i % 2 === 0 ? '3300' : i % 3 === 0 ? '3660' : i % 4 === 0 ? '2250' : '2580';
    const h = i % 2 === 0 ? '2440' : i % 3 === 0 ? '2440' : i % 4 === 0 ? '2000' : '2300';
    const dw = i % 2 === 0 ? '片' : i % 3 === 0 ? '平米' : i % 4 === 0 ? '包' : '吨';
    now.setDate(now.getDate() + 1);
    gridOptions.data.push({
      cgdh: CGNo,
      rkdh: rkdh,
      h: t,
      xh: xh,
      wlbh: wlNo,
      wlmc: wlmc,
      gys: gys,
      w: w,
      g: h,
      dw: dw,
      cgzt: s,
      rq: dayjs(now).format('YYYY-MM-DD'),
      yl: randomSumInt,
      sl: randomOrderInt,
      xsdh: xhdh,
      je: randomInt,
      6: '139xxxxxxxx',

    })
  }

}


//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY: {enabled: true},//开启虚拟滚动
  showOverflow: true,
  //showDetails: false,//弹窗 是否显示
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  columns: [
    {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: 50},//详情
    {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    {type: 'seq', fixed: "left", title: ' ', width: 50},


    {
      field: 'rkdh',
      width: '10%',
      title: '入库单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'cgdh',
      width: '10%',
      title: '采购单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'cgzt', width: '10%', title: '状态', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'gys',
      width: '10%',
      title: '供应商',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlbh',
      width: '10%',
      title: '物料编号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlmc',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'w', width: '8%', title: '宽度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'g', width: '8%', title: '高度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'h', width: '8%', title: '厚度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'xh', width: '8%', title: '型号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'dw', width: '8%', title: '单位', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '12%',
      title: '不含税单价',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'sl', width: '8%', title: '数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'sl',
      width: '12%',
      title: '已采购数量',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'je', width: '8%', title: '金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'je',
      width: '12%',
      title: '不含税金额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '8%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'sl', width: '8%', title: '库存', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '周用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '月用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'cgzt',
      width: '10%',
      title: '单据状态',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'xsdh',
      width: '10%',
      title: '销售单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'rq',
      width: '10%',
      title: '制单日期',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '制单人', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '10%',
      title: '采购部门',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: '7',
      width: '10%',
      title: '采购组织',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '8', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [{type: 'text'/*,name:'订单入库'*/}, {
      'name': '入库记录',

      'code': 'Log'
    },
      {
        'name': '确认入库',
        status: 'primary',
        'code': 'Sure'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    style: 'paddling-left:10px'
  },//表头按钮
  data: [],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 4}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})



//详情框 部分2
const showCGDH = ref();
const showDetails = ref(false);
let detailData = [];
const cellClickEvent = ({row}) => {
  if(isQueryColumnId===false){
    queryColumnId();
  }

  detailData = list.map(field => {
    return {label: queryColumnsTitle(field), value: row[field]}
  })

  showDetails.value = true;
  showCGDH.value = row['cgdh'];
}

//获取表列
let list = [];
let columnIndex = 4;//列标头从第几列开始的
let isQueryColumnId = false;
const queryColumnId = () => {
  while (columnIndex < gridOptions.columns.length) {
    list.push(gridOptions.columns[columnIndex].field);
    columnIndex++;
  }
  isQueryColumnId = true;
  return list;
}

//获取表列名
function queryColumnsTitle(cn) {
  let i = 0;
  while (i < gridOptions.columns.length + 1) {
    if (gridOptions.columns[i].field === cn) {
      return gridOptions.columns[i].title;
    }
    i++;
  }
}
//详情框 部分2 结束


const SureStorage = () => {
  MessageShow('确认入库成功');

}


const now = new Date()

//时间快捷选择
const datevalue = ref('')
const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//页面逻辑代码执行
function logicExecute(type) {
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;
}

//提示信息
const MessageShow = (content, type = 'success') => {
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {
        return logicExecute(czType);

      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

</script>


<style scoped>
:deep(.v-column-label div span) {
  font-weight: bold;
}


</style>

 UI-Project/src/views/mm/identify/identify.vue

New file
@@ -0,0 +1,74 @@
<template>
  <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
    <div style="display: flex;">
      <div style="margin-left: 400px;font-size: 20px;">工程号：P20240305001 </div>
      <div style="margin-left: 150px;font-size: 20px;">版图编号：1</div>
    </div>
      <svg width="100%" height="650" xmlns="http://www.w3.org/2000/svg">
        <g stroke="null" id="Layer_1">
          <title stroke="null">Layer 1</title>
          <image x="100" y="50" width="100" xlink:href="${pageContext.request.contextPath}/static/images/log2.png"/>
          <!-- <text stroke="#000" xml:space="preserve" font-family="'Catamaran'" font-size="25" class="font1" y="105" x="740">1号线玻璃落架指导</text> -->

          <!-- 使用 v-for 循环渲染数据 -->
          <g v-for="(rack, index) in racks" :key="index">
            <rect :x="rack.x" :y="rack.y" :width="rack.width" :height="rack.height" :fill="rack.fillColor"/>
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
              :y="calculateItemYPosition(rack, rack.item, index)" 
              :width="rack.item.width" 
              :height="rack.item.height" 
              :fill="rack.item.fillColor"
            />
            <!-- <text :x="rack.x" :y="rack.y-10"  text-anchor="middle">{{ index + 1 }}号工位</text> -->
            <!-- <text :x="rack.x" :y="rack.y-30"  text-anchor="middle">{{rack.item.content}}</text> -->
          </g>

          <!-- 其他元素 -->
          <!-- <text id="glass_size" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text> -->
          <!-- <text id="glass_pos" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text> -->
        </g>
      </svg>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      racks: [
        { x: 70, y: 126, width: 600, height: 240, fillColor: '#79bbff', item: { width: 40, height: 30, top:5, fillColor: '#911005' ,content:'NG123456'} },
        { x: 675, y: 126, width: 600, height: 240, fillColor: '#a0cfff', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG1234567'} },
        { x: 70, y: 370, width: 1100, height: 260, fillColor: '#529b2e', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG12345678'} },
        { x: 1175, y: 370, width: 200, height: 300, fillColor: '#529b2e', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG123456910'} },
      ]
    };
  },
  methods: {
    calculateItemXPosition(rack, item, index) {
  if (index === 4) {
    // 第五个矩形，确保不超出架子右边界
    return Math.min(rack.x + rack.width - item.width, rack.x + rack.width);
  } else {
    return Math.max(rack.x, Math.min(rack.x + rack.width / 2 - item.width / 2, rack.x + rack.width - item.width));
  }
},
calculateItemYPosition(rack, item, index) {
  if (index === 0 || index === 2) {
    // 第一个和第三个矩形，贴近架子顶部
    return Math.min(rack.y, rack.y + rack.height);
  } else if (index === 1 || index === 3) {
    // 第二个和第四个矩形，贴近架子底部
    return Math.max(rack.y, Math.min(rack.y + rack.height - item.height, rack.y + rack.height));
  } 
}
  }
};
</script>

<style scoped>
.glass-rack {
  width: 100%;
  height: 80vh;
}
</style>

 UI-Project/src/views/mm/purchaseOrder/PurchaseOrder.vue

@@ -1,121 +1,39 @@
<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 30px">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item @click="changeRouter(1)" :class="indexFlag===1?'indexTag':''"
                              :to="{path:'/main/purchaseOrder/SelectPurchaseOrder'}">查询采购订单
      <!-- <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 @click="changeRouter(2)" :class="indexFlag===2?'indexTag':''"
                              :to="{path:'/main/purchaseOrder/CreatePurchaseOrder'}">创建采购订单
          <el-breadcrumb-item :to="{path:'/main/purchaseReturn/SelectPurchaseReturn'}"> 查询

          </el-breadcrumb-item>
          <el-breadcrumb-item @click="changeRouter(3)" :class="indexFlag===3?'indexTag':''"
                              :to="{path:'/main/purchaseOrder/StoragePurchaseOrder'}">采购入库

          <el-breadcrumb-item >

          </el-breadcrumb-item>
          <el-breadcrumb-item @click="changeRouter(4)" :class="indexFlag===4?'indexTag':''"
                              :to="{path:'/main/purchaseOrder/ReturnPurchaseOrder'}">采购退货
          </el-breadcrumb-item>
          <el-breadcrumb-item @click="changeRouter(5)" :class="indexFlag===5?'indexTag':''"
                              :to="{path:'/main/purchaseOrder/PaymentPurchaseOrder'}">应付采购订单
          </el-breadcrumb-item>
          <el-breadcrumb-item @click="changeRouter(6)" :class="indexFlag===6?'indexTag':''"
                              :to="{path:'/main/purchaseOrder/CreateHeader'}">创建头模拟
          </el-breadcrumb-item>
          <el-breadcrumb-item style="display: none"></el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="padding: 0">
        </el-breadcrumb> -->
      <!-- </el-header> -->
      <el-main style="padding: 0;width: 99%;height: 100%;">
        <router-view/>
      </el-main>
      <!--     <el-footer>Footer</el-footer>-->
      <!--      <el-footer>Footer</el-footer>-->
    </el-container>


  </div>

</template>


<script setup>
import {nextTick, ref} from 'vue'
import {ArrowRight, Search} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";

let indexFlag = $ref(1)
import {ArrowRight} from "@element-plus/icons-vue";

function changeRouter(index) {
  indexFlag = index
}

/*

//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content, type = 'success') =>{
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {
        switch (czType) {
          case '确定':
            //多选退货逻辑代码TODO
            MessageShow('操作成功！', 'success');
            break;
          case '退货':
            //单退货逻辑代码TODO
            MessageShow('操作成功！', 'success');
            break;
          default:
            MessageShow('未知操作！', 'error');
            break;
        }

        return true;
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow = (content, title, type = 'info') => {

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /!*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*!/
  })
}

*/

</script>


<style scoped>
:deep(.indexTag .el-breadcrumb__inner) {
  color: #5CADFE !important;
  font-weight: 900;
}

</style>

 UI-Project/src/views/mm/purchaseOrder/Select.vue

@@ -1,257 +1,753 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />

        </el-col>

        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="BtnSearchPurchaseOrder">查询
          </el-button>
        </el-col>
      </el-row>
    </el-header>

    <el-main style="padding-top: 5px;height:100%">
      <vxe-grid
          max-height="600"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"
          @cell-dblclick="cellClickEvent"
      >

        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined ">
              <span style="font-weight: bold">{{item.title+':  '}}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
          <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
        </template>


        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>

      <!--      详情框 部分1-->
      <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false"
                 resize>
        <el-container>
          <el-header height="35px"
                     style="margin: 0;padding: 0">

            <el-input v-model="showCGDH" placeholder="采购单号" disabled>
              <template #prepend>采购单号：</template>
            </el-input>
          </el-header>
          <el-main>
            <template #default>
              <vxe-table
                  border="inner"
                  auto-resize
                  show-overflow
                  max-height="400"
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :sync-resize="showDetails"
                  :data="detailData">
                <vxe-column field="label" width="30%" class-name="v-column-label"></vxe-column>
                <vxe-column field="value"></vxe-column>
              </vxe-table>
            </template>
          </el-main>
          <el-footer height="40px">
            <el-row>
              <el-col :offset="20" :span="4">
                <el-button
                    id="Sure"
                    type="primary"
                    @click="logicExecute('编辑')"
                >编辑
                </el-button>
              </el-col>

            </el-row>
          </el-footer>
        </el-container>
      </vxe-modal>
      <!--      详情框 部分1 结束-->


    </el-main>
  </el-container>
</template>


<script setup>
import {ref} from "vue";
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {ElMessage} from "element-plus";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()



let router = useRouter()
const getTableRow = (row, type) => {
  switch (type) {
    case 'edit' : {
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/purchaseOrder/CreatePurchaseOrder', query: {id: row.id}})
      break
    }
    case 'delete': {


      alert('我接收到子组件传送的删除信息' + row.id)
      break
    }
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)
const box = ref(true)
const boxa = ref(false)
const boxb = ref(false)
const tableData = [
  {
    id: '1',
    long: '1005',
    wide: '183.6',
    thick: '1991',
    type: '待识别',
    typea: '1',
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    type: '待识别'
  }
}

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Add': {//新增
          router.push({path: '/main/purchaseOrder/CreatePurchaseOrder'})
          break
        }
        case 'AddNo': {//无单新增

          MessageShow('点击了无单新增', 'success');
          break
        }

      }
    }
]
const tableDataa = [
  {
    ida: '3',
    longa: '1005',
    widea: '183.6',
    thicka: '1991',
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
  {
    ida: '4',
    longa: '105',
    widea: '183',
    thicka: '191',
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  },
}

const BtnSearchPurchaseOrder = () => {
  for (let i = 1; i < 6; i++) {
    const randomInt = Math.floor(Math.random() * 999) + 1000;//4位数随机数
    const randomSumInt = Math.floor(Math.random() * 99) + 10;//2位数随机数
    const randomOrderInt = Math.floor(Math.random() * 99) + 100;//3位数随机数
    const t = i % 2 === 0 ? 5 : 6;
    const s = i % 2 === 0 ? '入库' : i % 3 === 0 ? '待审核' : i % 5 === 0 ? '已采购' : '退库';
    const CGNo = 'NGCG231200' + randomOrderInt;//采购编号
    const wlNo = 'NGWL1000' + randomInt;
    const xh = 'NGXH' + randomSumInt;
    const wlmc = 'WLMC' + randomInt;
    const gys = '供应商' + randomSumInt;
    const xhdh = 'NG231200' + randomOrderInt;
    const w = i % 2 === 0 ? '3300' : i % 3 === 0 ? '3660' : i % 4 === 0 ? '2250' : '2580';
    const h = i % 2 === 0 ? '2440' : i % 3 === 0 ? '2440' : i % 4 === 0 ? '2000' : '2300';
    const dw = i % 2 === 0 ? '片' : i % 3 === 0 ? '平米' : i % 4 === 0 ? '包' : '吨';
    now.setDate(now.getDate() + 1);
    gridOptions.data.push({
      cgdh: CGNo,
      h: t,
      xh: xh,
      wlbh: wlNo,
      wlmc: wlmc,
      gys: gys,
      w: w,
      g: h,
      dw: dw,
      cgzt: s,
      rq: dayjs(now).format('YYYY-MM-DD'),
      yl: randomSumInt,
      sl: randomOrderInt,
      xsdh: xhdh,
      je: randomInt,
      6: '139xxxxxxxx',

  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
  }

    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}


//页面逻辑代码执行
function logicExecute(type) {
  const $grid = xGrid.value
const getTableRow = (row,type) =>{
  switch (type) {
    case '编辑':
      //MessageShow('操作成功！', 'success');
      //编辑逻辑代码TODO
      router.push({path: '/main/purchaseOrder/CreatePurchaseOrder'})
      break;
    case '退货':
      //单退货逻辑代码TODO
      MessageShow('操作成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
  return true;
}


//组件接收参数
const dialogForm = () => {
  ElMessageBox.confirm(
    '是否切换版图?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    // this.boxa = true
    // this.box = false
      
    })
}
const selectedRows = ref([]);
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
const showMessage = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '重新识别成功！',
    type: 'success',
  })

  }
};
const pick = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '人工匹配成功！',
    type: 'success',
  })

  }
};
const remove = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '操作成功！',
    type: 'success',
  })

  }
};

const gridOptions = reactive({
  border: "full",//表格加边框
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY: {enabled: true},//开启虚拟滚动
  showOverflow: true,
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
@@ -267,296 +763,155 @@
    mode: 'row',
    showStatus: true
  },
  columns: [
    {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: 50},//详情
    {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    /* {type: 'checkbox',fixed:"left", title: '', width: 50 },*/
    {type: 'seq', fixed: "left", title: ' ', width: 50},


  data:  [
    {
      field: 'cgdh',
      width: '10%',
      title: '采购单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'cgzt', width: '10%', title: '状态', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'gys',
      width: '10%',
      title: '供应商',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlbh',
      width: '10%',
      title: '物料编号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlmc',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'w', width: '8%', title: '宽度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'g', width: '8%', title: '高度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'h', width: '8%', title: '厚度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'xh', width: '8%', title: '型号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'dw', width: '8%', title: '单位', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '12%',
      title: '不含税单价',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'sl', width: '8%', title: '数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'sl',
      width: '12%',
      title: '已采购数量',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'je', width: '8%', title: '金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'je',
      width: '12%',
      title: '不含税金额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '8%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'sl', width: '8%', title: '库存', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '周用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '月用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'cgzt',
      width: '10%',
      title: '单据状态',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'xsdh',
      width: '10%',
      title: '销售单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'rq',
      width: '10%',
      title: '制单日期',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '制单人', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '10%',
      title: '采购部门',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: '6',
      width: '10%',
      title: '采购组织',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [/*{type:'text'},
      {
      'name': '创建订单',

      'code':'Add',
    },

      {
        'name': '无单新增',

        'code':'AddNo'
      }*/
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    style: 'paddling-left:10px'
  },//表头按钮
  data: [],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 4}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})

//详情框 部分2
const showCGDH = ref();
const showDetails = ref(false);
let detailData = [];
const cellClickEvent = ({row}) => {
  if(isQueryColumnId===false){
    queryColumnId();
  }

  detailData = list.map(field => {
    return {label: queryColumnsTitle(field), value: row[field]}
  })

  showDetails.value = true;
  showCGDH.value = row['cgdh'];
}

//获取表列
let list = [];
let columnIndex = 3;//列标头从第几列开始的
let isQueryColumnId = false;
const queryColumnId = () => {
  while (columnIndex < gridOptions.columns.length) {
    list.push(gridOptions.columns[columnIndex].field);
    columnIndex++;
  }
  isQueryColumnId = true;
  return list;
}

//获取表列名
function queryColumnsTitle(cn) {
  let i = 0;
  while (i < gridOptions.columns.length + 1) {
    if (gridOptions.columns[i].field === cn) {
      return gridOptions.columns[i].title;
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
    i++;
  }
}
//详情框 部分2 结束


const now = new Date()

//时间快捷选择
const datevalue = ref('')
const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content, type = 'success') => {
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {

        logicExecute(czType);

        return true;
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow = (content, title, type = 'info') => {

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}

  ],
})
</script>

<template>
  <div>
     <el-button style="margin-top: 5px;margin-left: 5px;"   id="searchButton" type="primary" @click="showMessage">重新识别</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" type="primary" @click="pick">人工匹配</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" type="primary" @click="remove">人工拿走</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" type="primary" >破损</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" @click="boxb = true;box = false" >合并</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" @click="box = true;boxb = false" >单片</el-button>
    <el-button style="margin-top: 5px;float: right;margin-right: 50px;"  id="searchButton" type="text"  @click="dialogForm">版图号</el-button>

    <div v-if="box">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column type="selection" width="55"  />
          <el-table-column prop="id" align="center" label="id" min-width="80" />
          <el-table-column prop="long" align="center" label="长" min-width="120" />
          <el-table-column prop="wide" align="center" label="宽" min-width="120" />
          <el-table-column prop="type" align="center" label="状态" min-width="120" />
          <el-table-column prop="thick" align="center" label="其他" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <!-- <el-button size="mini" type="text" plain  @click="dialogFormVisible = true">详情</el-button> -->
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">设置</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
    <div v-if="boxb">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column type="selection" width="55"  />
          <el-table-column prop="id" align="center" label="类型序号" min-width="80" />
          <el-table-column prop="long" align="center" label="长" min-width="120" />
          <el-table-column prop="wide" align="center" label="宽" min-width="120" />
          <el-table-column prop="typea" align="center" label="数量" min-width="120" />
          <el-table-column prop="thick" align="center" label="其他" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <!-- <el-button size="mini" type="text" plain  @click="dialogFormVisible = true">详情</el-button> -->
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">设置</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
    <!-- <div v-if="boxa">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column type="selection" width="55"  />
          <el-table-column prop="ida" align="center" label="id" min-width="80" />
          <el-table-column prop="longa" align="center" label="长" min-width="120" />
          <el-table-column prop="widea" align="center" label="宽" min-width="120" />
          <el-table-column prop="thicka" align="center" label="其他" min-width="120" />
        </el-table>
      </div>
    </el-card>
  </div> -->
  </div>
  <!-- <el-dialog v-model="dialogFormVisible" top="21vh" width="30%" title="小片图" >
      
        <div id="message">
          200*100
        </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog> -->
  <el-dialog v-model="dialogFormVisiblea" top="21vh" width="30%" title="测量设置" >
            <el-form  size="mini" label-width="150px">
      <el-form style="margin-left: 80px;">
        
        <el-form-item label="误差长：" :required="true" style="width: 16vw;margin-bottom: 30px;">
            <div style="display: flex;"><el-input  autocomplete="off" /><div style="margin-left: 10px;">mm</div> </div>
              </el-form-item>
              <el-form-item label="误差宽：" :required="true" style="width: 16vw">
            <div style="display: flex;"><el-input  autocomplete="off" /><div style="margin-left: 10px;">mm</div> </div>
              </el-form-item>
        </el-form>
            </el-form>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="dialogFormVisiblea = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisiblea = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <div id="awatch">小片图：
<div id="watch">200*100</div>
</div>
</template>

<style scoped>
:deep(.v-column-label div span) {
  font-weight: bold;

#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;
}
#message{
  text-align: center;
  align-items: center;
  color: black;
   width: 200px;
   height: 100px;
   background-color: #337ecc;
   margin-left: 28%;
}
#awatch{
  display: flex;
  margin-top: 20px;
  font-size: 20px;
  margin-left: 50px;
}
#watch{
  text-align: center;
  align-items: center;
  color: black;
   width: 300px;
   height: 150px;
   background-color: #337ecc;
   margin-left: 2%;
   margin-top: 10px;
}
</style>

 UI-Project/src/views/mm/purchaseReturn/PurchaseReturn.vue

@@ -1,39 +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/purchaseReturn/SelectPurchaseReturn'}"> 查询

          </el-breadcrumb-item>

          <el-breadcrumb-item >

          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="padding: 0;width: 99%;height: 100%;">
        <router-view/>
      </el-main>
      <!--      <el-footer>Footer</el-footer>-->
    </el-container>
  </div>
</template>


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

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>

 UI-Project/src/views/mm/purchaseReturn/Select.vue

@@ -1,255 +1,9 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">

        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />

        </el-col>

        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="autoAddRow">查询
          </el-button>
        </el-col>
      </el-row>

    </el-header>
    <el-main style="padding-top: 5px">
      <div @scroll="handleTableScroll">

        <el-table :data="tableData" empty-text="暂无数据" style="width: 100%" max-height="550px" border
                  show-summary
                  sum-text=" ">
          <el-table-column fixed="left" prop="rIndex" label="" width="50" align="center"></el-table-column>

          <el-table-column fixed="left" label="操作" width="120">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.$index)"
              >
                编辑
              </el-button>
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>


          <el-table-column prop="ordernumber" label="采购单号" width="150"/>
          <el-table-column prop="name" label="供应商" width="120"/>
          <el-table-column prop="strockNumber" label="物料编号" width="200"/>
          <el-table-column prop="city" label="物料名称" width="120"/>
          <el-table-column prop="width" sortable label="宽度" width="120"/>
          <el-table-column prop="height" sortable label="高度" width="120"/>
          <el-table-column prop="thick" sortable label="厚度" width="120"/>
          <el-table-column prop="zip" label="型号" width="120"/>
          <el-table-column prop="number" label="单位" width="120"/>
          <el-table-column prop="number" sortable label="不含税单价" width="120"/>
          <el-table-column prop="number" label="数量" width="120" show-summary="ture"/>
          <el-table-column prop="number" label="已采购数量" width="120"/>
          <el-table-column prop="zip" sortable label="金额" width="120"/>
          <el-table-column prop="zip" label="不含税金额" width="120"/>
          <el-table-column prop="date" label="税率" width="120"/>
          <el-table-column prop="date" label="库存" width="120"/>
          <el-table-column prop="zip" label="周用量" width="120"/>
          <el-table-column prop="zip" label="月用量" width="120"/>
          <el-table-column prop="state" label="单据状态" width="120"/>
          <el-table-column prop="ordernumber" label="销售单号" width="200"/>
          <el-table-column prop="date" label="制单日期" width="120"/>
          <el-table-column prop="zip" label="制单人" width="120"/>
          <el-table-column prop="zip" label="采购部门" width="120"/>
          <el-table-column prop="zip" label="采购组织" width="120"/>
          <el-table-column prop="zip" label="备注" width="200"/>


        </el-table>


      </div>
    </el-main>
  </el-container>
</template>


<script setup>

import {nextTick, ref} from 'vue'
import {Search} from "@element-plus/icons-vue";

const s_wuliaomingcheng = ref('')
const s_buyOrderNumber = ref('')
const s_width = ref('')
const s_height = ref('')
const s_thick = ref('')


const options = [
  {
    value: '0',
    label: '全部'
  },
  {
    value: '1',
    label: '原片'
  },
  {
    value: '2',
    label: '化学品'
  },
  {
    value: '3',
    label: '工具'
  },
  {
    value: '4',
    label: '木箱'
  },
  {
    value: '5',
    label: '白玻'
  },
]

const buyerOptions = [
  {
    value: '0',
    label: '全部'
  },
  {
    value: '1',
    label: '采购甲'
  },
  {
    value: '2',
    label: '采购乙'
  },
]

const stateOptions = [
  {
    value: '0',
    label: '待审核'
  },
  {
    value: '1',
    label: '待采购'
  },
  {
    value: '2',
    label: '已采购'
  },
]

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

const now = new Date()

const tableData = ref([])

const autoAddRow = () => {
  for (let i = 0; i < 10; i++) {
    now.setDate(now.getDate() + 1)
    const randomInt = Math.floor(Math.random() * 999) + 1000;
    const randomOrderInt = Math.floor(Math.random() * 99) + 100;
    const randomSumInt = Math.floor(Math.random() * 99) + 10;
    var t = i % 2 === 0 ? 5 : 6;
    var s = i % 3 === 0 ? '' : i % 4 === 0 ? '已采购' : '待审核';
    var oNo = 'NGNO100000' + randomOrderInt;//订单编号
    var wlNo = 'NGWL100000' + randomInt
    tableData.value.push({

      date: dayjs(now).format('YYYY-MM-DD'),
      name: '供应商' + randomSumInt,
      state: s,
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      number: randomInt,
      width: '3660',
      height: '2440',
      rIndex: tableData.value.length + 1,
      ordernumber: oNo,
      strockNumber: wlNo,
      thick: t
    })
  }
}

const datevalue = ref('')

const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

</script>

<template>
</template>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.m-header {
  height: 32px;
}
</style>

 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>

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

@@ -1,276 +1,144 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <!-- -->
      <el-row :gutter="10" style="margin-bottom: 5px">

        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />

        </el-col>
        <el-col :span="3">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="autoAddRow">查询
          </el-button>
        </el-col>
      </el-row>

    </el-header>
    <el-main style="padding-top: 5px">
      <el-table :data="tableData" empty-text="暂无数据" style="width: 100%" max-height="550px"  border show-summary
                sum-text=" ">
        <el-table-column fixed="left" prop="rIndex" label="" width="50" align="center"></el-table-column>

        <el-table-column fixed="left" label="操作" width="120">
          <template #default="scope">
            <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.$index)"
            >
              编辑
            </el-button>
            <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>


        <el-table-column prop="stockItem" label="库存组织" width="150"/>
        <el-table-column prop="wuliaoCode" label="物料编号" width="220"/>
        <el-table-column prop="rukuCode" label="入库单号" width="120"/>
        <el-table-column prop="storageType" label="入库类型" width="120"/>
        <el-table-column prop="buyerCode" label="采购单号" width="150"/>
        <el-table-column prop="wuliaoName" label="物料名称" width="120"/>
        <el-table-column prop="state" label="单据状态" width="120"/>
        <el-table-column prop="shname" label="审核员" width="120"/>
        <el-table-column prop="date" sortable label="审核日期" width="120"/>
        <el-table-column prop="date" sortable label="入库日期" width="120"/>
        <el-table-column prop="buyerName" label="采购员" width="120"/>
        <el-table-column prop="cgName" sortable label="仓管员" width="120"/>
        <el-table-column prop="zip" label="制单人" width="120"/>
        <el-table-column prop="address" label="产地" width="120"/>
        <el-table-column prop="number" sortable label="宽度" width="120"/>
        <el-table-column prop="number" sortable label="厚度" width="120"/>
        <el-table-column prop="kcCode" label="库存编号" width="150"/>
        <el-table-column prop="number" sortable label="箱数" width="120"/>
        <el-table-column prop="number" sortable label="单箱片数" width="200"/>
        <el-table-column prop="oneArea" sortable label="单片面积" width="120"/>
        <el-table-column prop="number" sortable label="总面积" width="120"/>
        <el-table-column prop="number" sortable label="总数量" width="120"/>
        <el-table-column prop="number" sortable label="总金额" width="120"/>
        <el-table-column prop="date" sortable label="生产日期" width="120"/>
        <el-table-column prop="zip" label="库区" width="120"/>
        <el-table-column prop="zip" label="备注" width="200"/>


      </el-table>
    </el-main>
  </el-container>
</template>

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

import {ref} from 'vue'
import {ArrowRight, Search} from "@element-plus/icons-vue";
import { ref } from 'vue'

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

const s_wuliaomingcheng = ref('')
const s_buyOrderNumber = ref('')
const s_width = ref('')
const s_height = ref('')
const s_thick = ref('')


const options = [
  {
    value: '0',
    label: '全部'
  },
  {
    value: '1',
    label: '原片'
  },
  {
    value: '2',
    label: '化学品'
  },
  {
    value: '3',
    label: '工具'
  },
  {
    value: '4',
    label: '木箱'
  },
  {
    value: '5',
    label: '白玻'
  },
]

const buyerOptions = [
  {
    value: '0',
    label: '全部'
  },
  {
    value: '1',
    label: '采购甲'
  },
  {
    value: '2',
    label: '采购乙'
  },
]

const stateOptions = [
  {
    value: '0',
    label: '待审核'
  },
  {
    value: '1',
    label: '待采购'
  },
  {
    value: '2',
    label: '已采购'
  },
]

const stockItemOptions = [
  {
    value: 0,
    label: '人工库'
  }, {
    value: 1,
    label: '计划库'
  }, {
    value: 2,
    label: '自动化库'
  }, {
    value: 3,
    label: '余片库'
  }, {
    value: 4,
    label: '残片库'
  }, {
    value: 5,
    label: '辅料库'
  },
]
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

const now = new Date()

const tableData = ref([])

const autoAddRow = () => {
  for (let i = 0; i < 10; i++) {
    now.setDate(now.getDate() + 1)
    const randomWLInt = Math.floor(Math.random() * 99999) + 100000;
    const randomInt = Math.floor(Math.random() * 999) + 1000;
    const randomSumInt = Math.floor(Math.random() * 99) + 10;
    const randomErInt = Math.floor(Math.random() * 9);
    const randomErInt2 = Math.floor(Math.random() * 9);
    const randomErInt3 = Math.floor(Math.random() * 9);
    const t = i % 3 === 0 ? 5 : i % 4 === 0 ? 6 : i % 5 === 0 ? 8 : i % 7 === 0 ? 10 : 12;
    const sItem = i % 3 === 0 ? '计划库' : i % 4 === 0 ? '人工库' : i % 5 === 0 ? '自动化库' : i % 7 === 0 ? '余片库' : '辅料库';
    tableData.value.push({
      date: dayjs(now).format('YYYY-MM-DD'),
      name: '供应商' + randomSumInt,
      state: '未审核',
      stockItem: sItem,
      wuliaoCode: 'WL9000000000' + randomWLInt,
      rukuCode: 'RK2312' + randomInt,
      storageType: '标准采购',
      buyerCode: 'CG2312000' + randomInt,
      zip: 'CA 90036',
      number: randomInt,
      shname: '审核' + randomErInt,
      buyerName: '采购' + randomErInt2,
      cgName: '仓管' + randomErInt3,
      address: '这是物料产地',
      kcCode: 'KC2312999' + randomInt,
      oneArea: randomSumInt / 10,
      rIndex: tableData.value.length + 1,
      thick: t
    })
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}

const datevalue = ref('')

const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
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
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  customConfig: {
    storage: true
  },
]

  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  data:  [
    {
    }
  ],
})
</script>

<template>
  <div>
     <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 id="boxa" style="width: 100px;height: 165px;">100*65</div>
            <div id="boxa" style="width: 107px;height: 150px;">107*60</div>
            <div id="boxa" style="width: 107px;height: 150px;">107*60</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>

.el-row {
  margin-bottom: 20px;
#boxa{
  border: 1px solid black;
  background-color:  #337ecc;
  /* display:flex; */
  text-align: center;
  display: inline-block;
    align-items:center;
    justify-content:center;
}

.el-row:last-child {
  margin-bottom: 0;
#box{
  border: 1px solid black;
  background-color:  #337ecc;
  display:flex;
    align-items:center;
    justify-content:center;
}

.el-col {
  border-radius: 4px;
}

.m-header {
  height: 64px;
}
#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>

 UI-Project/src/views/mm/slicecage/slicecage.vue

New file
@@ -0,0 +1,570 @@
<script lang="ts" setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)
const dialogFormVisibleb = ref(false)

const currentPage4 = ref(4)
const pageSize4 = ref(100)
// const tableData = [
//   {
//     id: '1',
//     long: '1005',
//     wide: '183.6',
//     thick: '1991',
//     type: '1234567',
//     typea: '1',
//   },
// ]
// const tableDatab = [
//   {
//     idb: '2',
//     longb: '105',
//     wideb: '183',
//     typeb: '123456',
//   }
// ]
const tableDataa = [
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
]

const dialogForm = () => {
  ElMessageBox.confirm(
    '确定要急停吗?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '急停成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '急停失败',
      })
    })
}
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:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})
</script>

<template>
  <div style="height: 700px;">
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="primary" @click="dialogFormVisible = true">手动进片</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="primary" @click="dialogFormVisiblea = true">订单信息</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="success" @click="dialogFormVisibleb = true">出片队列</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger">终止进片</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger">终止出片</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger"  @click="dialogForm">软急停</el-button>
    
    <el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="出片玻璃ID" min-width="80" />
          <el-table-column prop="long" align="center" label="笼子" min-width="120" />
          <el-table-column prop="wide" align="center" label="格子" min-width="120" />
          <el-table-column prop="type" align="center" label="订单编号" min-width="120" />
          <el-table-column prop="type" align="center" label="列表编号" min-width="120" />
          <el-table-column prop="type" align="center" label="箱子编号" min-width="120" />
          <el-table-column prop="type" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="type" align="center" label="结束任务" min-width="120" />
        </el-table>
      </div>
    </el-card>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 3px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="idb" align="center" label="进片玻璃ID" min-width="80" />
          <el-table-column prop="longb" align="center" label="笼子" min-width="120" />
          <el-table-column prop="wideb" align="center" label="格子" min-width="120" />
          <el-table-column prop="typeb" align="center" label="订单编号" min-width="120" />
          <el-table-column prop="typeb" align="center" label="列表编号" min-width="120" />
          <el-table-column prop="typeb" align="center" label="箱子编号" min-width="120" />
          <el-table-column prop="typeb" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="typeb" align="center" label="结束任务" min-width="120" />
        </el-table>
      </div>
    </el-card>
    <div style="padding: 10px;display: flex;height:110px;">
                <div v-for="n in 9" :key="n" id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#1</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">33%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空间（片数）</span><span id="zhi">555</span>
                    </el-col>
                </div>
    </div>
    <div id="awatch">
  <img src="../../../assets/xmjc.png" alt="" style="width: 70%;height: 100%;margin-left: 160px;">
</div>
  </div>
<el-dialog v-model="dialogFormVisible" top="12vh" width="85%" title="请确认玻璃信息" >
  <div style="margin-left: 50px;margin-bottom: 10px;">
    <div style="display: flex;">
    <p style="margin-top: 4px;">确认状态:</p>
    <el-button style="margin-left: 10px;size: mini;" type="success">允许</el-button>
    <el-button style="margin-left: 10px;size: mini;" type="danger">不允许</el-button>
    <p style="margin-left: 60px;margin-top: 4px;">当前状态:</p>
    <div style="margin-top: 4px; margin-left: 10px;">手动</div>
    <el-button style="margin-left: 10px;size: mini;" type="primary">切换</el-button>
    <el-input  placeholder="请输入玻璃id" style="width: 180px;size: mini;margin-left: 60px;"></el-input>
    <el-button style="margin-left: 10px;size: mini;" type="primary">添加</el-button>
    <p style="margin-left: 60px;margin-top: 4px;">玻璃id:</p>
    <el-input  style="width: 180px;size: mini;margin-left: 30px;"></el-input>
  </div>
    <div style="display: flex;">
      <p style="margin-left: 290px;margin-top: 20px;font-weight: bold;">上片位</p>
      <p style="margin-left: 630px;margin-top: 20px;font-weight: bold;">扫码位</p>
    </div>
    <div style="display: flex;">
    <div style="margin-top: 20px;">
      <p style="margin-top: 10px;margin-left: 100px;margin-bottom: 20px;">当前信息</p>
      <el-form label-position="right" label-width="90px">
      <el-form-item style="width: 20vw" label="玻璃id：">
      <el-input style="width: 180px" size="mini" placeholder="请输入玻璃id"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="订单编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入订单编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="列表编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入列表编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="箱子编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入箱子编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="长：">
      <el-input style="width: 180px" size="mini" placeholder="请输入长"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="宽：">
      <el-input style="width: 180px" size="mini" placeholder="请输入宽"></el-input>
       </el-form-item>
      </el-form>
      </div>
    <div style="margin-top: 20px;">
      <p style="margin-top: 10px;margin-left: 100px;margin-bottom: 20px;">修改信息</p>
      <el-form label-position="right" label-width="90px">
      <el-form-item style="width: 20vw" label="玻璃id：">
      <el-input style="width: 180px" size="mini" placeholder="请输入玻璃id"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="订单编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入订单编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="列表编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入列表编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="箱子编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入箱子编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="长：">
      <el-input style="width: 180px" size="mini" placeholder="请输入长"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="宽：">
      <el-input style="width: 180px" size="mini" placeholder="请输入宽"></el-input>
       </el-form-item>
      </el-form>
      </div>
    <div style="margin-top: 20px;">
      <p style="margin-top: 10px;margin-left: 100px;margin-bottom: 20px;">修改信息</p>
      <el-form label-position="right" label-width="90px">
      <el-form-item style="width: 20vw" label="玻璃id：">
      <el-input style="width: 180px" size="mini" placeholder="请输入玻璃id"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="订单编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入订单编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="列表编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入列表编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="箱子编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入箱子编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="长：">
      <el-input style="width: 180px" size="mini" placeholder="请输入长"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="宽：">
      <el-input style="width: 180px" size="mini" placeholder="请输入宽"></el-input>
       </el-form-item>
      </el-form>
      </div>
    <div style="margin-top: 20px;">
      <p style="margin-top: 10px;margin-left: 100px;margin-bottom: 20px;">当前信息</p>
      <el-form label-position="right" label-width="90px">
      <el-form-item style="width: 20vw" label="玻璃id：">
      <el-input style="width: 180px" size="mini" placeholder="请输入玻璃id"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="订单编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入订单编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="列表编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入列表编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="箱子编号：">
      <el-input style="width: 180px" size="mini" placeholder="请输入箱子编号"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="长：">
      <el-input style="width: 180px" size="mini" placeholder="请输入长"></el-input>
       </el-form-item>
      <el-form-item style="width: 20vw" label="宽：">
      <el-input style="width: 180px" size="mini" placeholder="请输入宽"></el-input>
       </el-form-item>
      </el-form>
      </div>
    </div>
        </div>
  <template #footer>
    <div id="dialog-footer">
      <el-button type="primary" @click="dialogFormVisible = false">
        确认
      </el-button>
      <el-button @click="dialogFormVisible = false">取消</el-button>
    </div>
  </template>
</el-dialog>
<el-dialog v-model="dialogFormVisiblea" top="10vh" width="85%" title="订单信息" >
  <el-input  placeholder="请输入订单id" style="width: 180px;size: mini;"></el-input>
    <el-button style="margin-left: 10px;size: mini;" type="primary">查询</el-button>
    <el-table  ref="table" style="margin-top: 20px;height: 500px;"
        @selection-change="handleSelectionChange"
        :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="ida" align="center" label="玻璃id" min-width="80" />
          <el-table-column prop="typea" align="center" label="订单编号" min-width="120" />
          <el-table-column prop="typea" align="center" label="列表编号" min-width="120" />
          <el-table-column prop="typea" align="center" label="箱子编号" min-width="120" />
          <el-table-column prop="ida" align="center" label="铝框id" min-width="120" />
          <el-table-column prop="typea" align="center" label="长" min-width="120" />
          <el-table-column prop="typea" align="center" label="宽" min-width="120" />
        </el-table>
        <div id="demo-pagination-block">
    <el-pagination
    style="margin-left: 850px;"
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</el-dialog>
<el-dialog v-model="dialogFormVisibleb" top="10vh" width="85%" title="订单信息" >
  <div style="display: flex;">
  <p style="margin-top: 4px;">队列状态：</p>
  <p style="margin-top: 4px;">开始</p>
    <el-button style="margin-left: 10px;size: mini;" type="danger">停止</el-button>
    <el-button style="margin-left: 10px;size: mini;" type="primary">添加</el-button>
  </div>
    <el-table  ref="table" style="margin-top: 20px;height: 500px;"
        @selection-change="handleSelectionChange"
        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="铝框id" min-width="80" />
          <el-table-column prop="type" align="center" label="玻璃id" min-width="120" />
          <el-table-column prop="type" align="center" label="订单编号" min-width="120" />
          <el-table-column prop="type" align="center" label="列表编号" min-width="120" />
          <el-table-column prop="type" align="center" label="箱子编号" min-width="120" />
          <el-table-column prop="type" align="center" label="长" min-width="120" />
          <el-table-column prop="type" align="center" label="宽" min-width="120" />
          <el-table-column prop="type" align="center" label="玻璃状态" min-width="120" />
          <el-table-column prop="type" align="center" label="顺序" min-width="120" />
          <el-table-column prop="type" align="center" label="完成" min-width="120" />
          <el-table-column prop="type" align="center" label="操作" min-width="120" />
        </el-table>
</el-dialog>

</template>
<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{
  text-align: center;
  margin-top: -15px;
}
#message{
  text-align: center;
  align-items: center;
  color: black;
   width: 200px;
   height: 100px;
   background-color: #337ecc;
   margin-left: 28%;
}
#awatch{
  height: 450px;
}
#occupy {
    height: 100%;
    width: 10%;
    background-color: white;
    margin: 0px 8px 0px 8px;
    border: 1px #EBEEF5 solid;
    text-align: center;
    padding: 5px;
}
#biao {
    font-size: 12px;
}
#zhi {
    font-size: 18px;
    font-weight: bold;
}
#demo-pagination-block + #demo-pagination-block {
  margin-top: 10px;
}
#demo-pagination-block #demonstration {
  margin-bottom: 16px;
}
::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
</style>

 UI-Project/src/views/mm/stockBasicData/Create.vue

New file
@@ -0,0 +1,724 @@
<template>
  <el-header height="auto">
    <el-descriptions
        class="margin-top"
        title=""
        :column="4"
        :size="'default'"
        border
        :rules="rules"
        :model="ruleForm"
    >

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy" prop="name">
        <template #label>
          <span style="color:red">*</span>
          采购类型
        </template>
<!--        <el-select v-model="form.buyType" class="m-2" placeholder="选择采购类型" clearable>-->
        <el-select v-model="ruleForm.name" class="m-2" placeholder="选择采购类型" clearable>
          <el-option
              v-for="item in CGTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-descriptions-item >

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购组织
        </template>
        <el-input v-model="ruleForm.name" placeholder="采购组织" clearable prop="name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          供应商
        </template>
        <el-cascader
            placeholder="选择供应商"
            :options="buyerOptions"
            filterable
            clearable
            empty-text="empty-text"
            :v-model="form.supplier"
        >
        </el-cascader>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购部门
        </template>
        <el-select v-model="cgBuMen" class="m-2" placeholder="选择采购部门" clearable>
          <el-option
              v-for="item in CGBuMenOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-descriptions-item>



      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购员
        </template>
        <el-select v-model="form.buyer" class="m-2" placeholder="选择采购员" clearable>
          <el-option
              v-for="item in BuyerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"
      >
        <template #label>
          <span style="color:red">*</span>
          制表日期
        </template>
        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择制表日期"

        />
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"></el-descriptions-item>
    </el-descriptions>

  </el-header>

  <el-main style="padding-top: 5px;height:100%">
    <!--    <el-button class="mt-4" style="width: 10%" @click="onAddItem"
        >添加
        </el-button>-->

    <vxe-grid

        max-height="500"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        @="gridEvents"
    >

      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{ key + ':  ' }}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
        <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <el-input v-model="option.data" @input="changeFilterEvent($event, option, $panel)" />
          </div>
        </div>
      </template>
    </vxe-grid>

  </el-main>

</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue'
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

let router = useRouter()

//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  columns: [
    //{title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'seq', fixed: "left", title: ' ', width: 50},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    //{type: 'expand', title: '详情', fixed: "left", slots: {content: 'content'}, width: 50},
    {
      field: 'cgdh',
      width: '10%',
      title: '物料编码',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'cgzt',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'gys',
      width: '10%',
      title: '产地',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'w',
      width: '8%',
      title: '宽度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'g',
      width: '8%',
      title: '高度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true,
      type: 'number'
    },
    {
      field: 'h',
      width: '8%',
      title: '厚度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'xh',
      width: '8%',
      title: '型号',/*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'dw',
      width: '8%',
      title: '单位', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '数量', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '操作数量', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}}
    },
    {
      field: 'sl',
      width: '12%',
      title: '箱数',    /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'je',
      width: '8%',
      title: '单片面积', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'je',
      width: '12%',
      title: '单价',   /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: '6',
      width: '8%',
      title: '总数量',   /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '总面积', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '总金额',/*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '备注', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
    }
  ],//表头参数
  toolbarConfig: {
    buttons: [
      {type: 'text'},
      {
        'name': '新增',

        'code': 'Add',
      },
      {
        'name': '移除',

        'code': 'Remove'
      },
      {
        'name': '保存订单',
        status: 'primary',
        'code': 'Save'
      }, {
        'name': '入库',
        status: 'primary',
        'code': 'Storage'
      }/*,
      {
        'name': '退货',
        status: 'primary',
        'code': 'Return'
      },
      {
        'name': '返回查询',

        'code':'GoSelect'
      }*/],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    tools: [],

  },//表头按钮
  /*data: [{},{},{},{},{},{}],//table body实际数据*/
  data: [{}, {}, {}],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 3}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
//新增
        case 'Add': {
          const record = {
            checked: false
          }
          $grid.insertAt(record, 0).then(({row}) => {
            $grid.setEditRow(row)
          })
          break
        }
//移除
        case 'Remove': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {

            MessageConfirmShow('移除','是否确认移除选中的' + $grid.getCheckboxRecords().length + '条数据！');

          }
          break
        }
//保存
        case 'Save': {
          /*if (form.buyItem === null || form.buyItem === '') {
            MessageShow('采购组织不可为空','warning');
            return;
          }
*/
          //选中数据
          /* const $table = this.$refs.xTable
           const selectRecords = $table.getCheckboxRecords()*/
//+$grid.rows.number
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {


            MessageConfirmShow('保存订单','是否确定保存当前订单信息');
          }
          break
        }
//入库
        case 'Storage': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {
            MessageConfirmShow('入库','您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认入库？')
          }
          break
        }
//退库
        case 'Return': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {


          }
          break
        }

      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}


import type { FormInstance, FormRules } from 'element-plus'




interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})


const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  supplier: '',
  buyer: '',
  buyItem: '',
  buyType: ''

})

//供应商
const buyerOptions = [
  {value: '0', label: '供应商1'},
  {value: '1', label: '供应商2'},
  {value: '2', label: '供应商3'},
  {value: '3', label: '供应商4'},
  {value: '4', label: '供应商5'},
  {value: '5', label: '供应商6'},
]


const value = ref('')
const cgBuMen = ref('')

//采购类型
const CGTypeOptions = [
  {
    value: '1',
    label: '标准类型',
  },
  {
    value: '2',
    label: '非标准类型',
  },
  {
    value: '3',
    label: '追加采购',
  },

]

//采购部门
const CGBuMenOptions = [
  {
    value: '0',
    label: '采购华北部',
  },
  {
    value: '1',
    label: '采购东南部',
  },
  {
    value: '2',
    label: '采购西北部',
  },
  {
    value: '3',
    label: '采购中原部',
  },
  {
    value: '4',
    label: '采购外国部',
  },

]

//采购人
const BuyerOptions = [
  {
    value: '0',
    label: '采购员1',
  },
  {
    value: '1',
    label: '采购员2',
  },
  {
    value: '2',
    label: '采购员3',
  },
  {
    value: '3',
    label: '采购员4',
  },
  {
    value: '4',
    label: '采购员5',
  },

]

//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    case '保存订单':
      //保存订单逻辑代码TODO
      const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
          if (valid) {
            console.log('submit!')
          } else {
            console.log('error submit!', fields)
          }
        })
      }
      MessageShow('订单保存成功！', 'success');
      break;
    case '移除':
      $grid.removeCheckboxRow();
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;

}

//提示信息
const MessageShow = (content, type ) => {

  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title='操作确认提示', type='warning') => {

  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {
        return logicExecute(czType);
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}


</script>
<style scoped>
:deep(.el-descriptions__table .label-diy) {
  text-align: center;
  width: 100px;
  /*font-size: large;*/
}
</style>

 UI-Project/src/views/mm/stockBasicData/Details.vue

New file
@@ -0,0 +1,453 @@
<template>
  <el-header height="auto">
    <el-descriptions
        class="margin-top"
        title=""
        :column="4"
        :size="'default'"
        border
    >
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          操作单号
        </template>
        <el-input v-model="form.buyItem" placeholder="单号" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购类型
        </template>
        <el-input v-model="form.buyItem" placeholder="采购类型" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购部门
        </template>
        <el-input v-model="form.buyItem" placeholder="采购部门" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          供应商
        </template>
        <el-input v-model="form.buyItem" placeholder="供应商" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购员
        </template>
        <el-input v-model="form.buyItem" placeholder="采购员" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购组织
        </template>
        <el-input v-model="form.buyItem" placeholder="采购组织" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          制表日期
        </template>
        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择制表日期"
        />
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"></el-descriptions-item>

    </el-descriptions>
  </el-header>

  <el-main style="padding-top: 5px;height:100%">
    <vxe-grid
        max-height="500"
        @filter-change="filterChanged"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
    >

      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{ key + ':  ' }}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

    </vxe-grid>

  </el-main>

</template>

<script setup>
import {ref, reactive} from 'vue'

let router = useRouter()
import {useRouter} from "vue-router";
import { ElMessage, ElMessageBox} from "element-plus";

const value = ref('')

//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  //表头参数、列名
  columns: [
    {type: 'seq', fixed: "left", title: ' ', width: 50},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    {
      field: 'cgdh',
      width: '10%',
      title: '物料编码',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'cgzt',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'gys',
      width: '10%',
      title: '产地',

      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'w',
      width: '8%',
      title: '宽度',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'g',
      width: '8%',
      title: '高度',
      filters: [{data: ''}],
      sortable: true,

    },
    {
      field: 'h',
      width: '8%',
      title: '厚度',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'xh',
      width: '8%',
      title: '型号',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'dw',
      width: '8%',
      title: '单位',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '数量',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'czsl',
      width: '8%',
      title: '操作数量',
      type: 'number',
      editRender: {name: 'input', type: 'number', attrs: {placeholder: ''}}
    },
    {
      field: 'sl',
      width: '12%',
      title: '箱数',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'je',
      width: '8%',
      title: '单片面积',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'je',
      width: '12%',
      title: '单价',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '总面积',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '总金额',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '备注',
      filters: [{data: ''}],
      sortable: true
    }
  ],
  //表头按钮
  toolbarConfig: {
    buttons: [
      {type: 'text'},
      {
        'name': '保存订单',
        status: 'primary',
        'code': 'Save'
      }, {
        'name': '入库',
        status: 'primary',
        'code': 'Storage'
      },
      {
        'name': '退货',
        status: 'primary',
        'code': 'Return'
      },
      {
        'name': '取消',
        status: '',
        'code': 'Cancel'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    tools: [],

  },
  //table body实际数据
  data: [{}, {}, {}],
  //脚合并
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 3}
  ],
  //合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
//保存
        case 'Save': {
          MessageAlertShow('点击了保存订单','操作提示');
          //MessageShow('点击了保存订单！', 'error');
          break;
        }
//取消，返回查询页面
        case 'Cancel': {
          // router.push({path: '/main/purchaseOrder/StoragePurchaseOrder'})
          break
        }
//入库
        case 'Storage': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据！', 'warning');
            return
          } else {
            MessageConfirmShow('入库', '是否确认对选中的' + $grid.getCheckboxRecords().length + '物料进行入库操作！');
          }
          break
        }
//退货
        case 'Return': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据！', 'warning');
            return
          } else {

            MessageConfirmShow('退货', '是否确认对选中的' + $grid.getCheckboxRecords().length + '物料进行退货操作！');
          }
          break
        }

      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}

//表单数据
const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  supplier: '',
  buyer: '',
  buyItem: '',
  buyType: ''

})


//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;
}

//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content,type='success') => {
    ElMessage({
      message: content,
      type: type,
      showClose: true,
    })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title='操作确认提示', type='warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {

        return logicExecute(czType);
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow=(content,title,type='info')=>{

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}

</script>


<style scoped>
:deep(.el-descriptions__table .label-diy) {
  text-align: center;
  width: 100px;
  /*  font-size: large;*/
}
</style>

 UI-Project/src/views/mm/stockBasicData/Payment.vue

New file
@@ -0,0 +1,354 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />
        </el-col>

        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="autoAddRow">查询
          </el-button>
        </el-col>
      </el-row>

    </el-header>
    <el-main style="padding-top: 5px">
      <vxe-grid

          max-height="600"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="PayOptions"
          @="gridEvents"

      >

        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined ">
              <span style="font-weight: bold">{{item.title+':  '}}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
          <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
        </template>


        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>
    </el-main>
  </el-container>
</template>


<script setup>
import {ref} from 'vue'
import {Search} from "@element-plus/icons-vue";
import 'dayjs/locale/zh-cn'
import {VXETable} from "vxe-table";
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";

const datevalue = ref('')//时间

//组件接收参数
const PayOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  columns: [
    /* {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},*/
    {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: '5%'},//详情
    {type: 'checkbox', fixed: "left", title: '', width: '5%'},
    {type: 'seq', fixed: "left", title: ' ', width: '5%'},
    {
      field: 'cgdh',
      width: '10%',
      title: '采购单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'cgzt', width: '10%', title: '月份', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'gys',
      width: '10%',
      title: '供应商',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlbh',
      width: '10%',
      title: '期初金额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlmc',
      width: '10%',
      title: '本期应付',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'w',
      width: '10%',
      title: '本期已付',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'g',
      width: '10%',
      title: '期末余额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'h', width: '9%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: '6', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [{type: 'text'}, {
      'name': '应付确认',
      status: 'primary',
      'code': 'Sure',
    }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    style: 'paddling-left:10px'
  },//表头按钮
  data: [{}, {}, {}, {}],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 3}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})


const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
          //应付确认
        case 'Sure': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow("请选择至少一条数据!", 'warning');
            return
          } else {
            MessageConfirmShow("确认应付", '您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认应付？')
          }
          break
        }
      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}



const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '确认应付':
      //入库逻辑代码TODO
      MessageShow('操作成功！', 'success');
      break;

    default:
      MessageShow('未知操作！', 'error');
      break;

  }
  return true;
}


//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content, type = 'success') => {
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {

        return  logicExecute(czType);

      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow = (content, title, type = 'info') => {

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}

</script>


<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.m-header {
  height: 32px;
}
</style>

 UI-Project/src/views/mm/stockBasicData/Return.vue

New file
@@ -0,0 +1,593 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />

        </el-col>

        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="BtnSearchPurchaseOrder">查询
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding-top: 5px;height:100%">
      <vxe-grid

          max-height="600"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"
          @cell-dblclick="cellClickEvent"
      >

        <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined ">
              <span style="font-weight: bold">{{ item.title + ':  ' }}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
          <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
        </template>


        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>


      <!--      详情框 部分1-->
      <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false"
                 resize>
        <el-container>
          <el-header height="35px"
                     style="margin: 0;padding: 0">

            <el-input v-model="showCGDH" placeholder="采购单号" disabled>
              <template #prepend>采购单号：</template>
            </el-input>
          </el-header>
          <el-main>
            <template #default>
              <vxe-table
                  border="default"
                  auto-resize
                  show-overflow
                  max-height="400"
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :sync-resize="showDetails"
                  :data="detailData"

              >
                <vxe-column field="label" width="30%" class-name="v-column-label"></vxe-column>
                <vxe-column field="value"></vxe-column>
              </vxe-table>
            </template>
          </el-main>
          <el-footer height="40px">
            <el-row>
              <el-col :offset="20" :span="4">
                <el-button
                    id="Sure"
                    type="primary"
                    @click="SureReturn"
                >确认退货
                </el-button>
              </el-col>

            </el-row>
          </el-footer>
        </el-container>
      </vxe-modal>
      <!--      详情框 部分1 结束-->
    </el-main>
  </el-container>
</template>


<script setup>

import {ref} from "vue";
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";


let router = useRouter()
const getTableRow = (row, type) => {
  switch (type) {
    case 'edit' : {
      //alert('我接收到子组件传送的编辑信息')
      // router.push({path: '/main/purchaseOrder/DetailsPurchaseOrder', query: {id: row.id}})
      break
    }
    case 'delete': {


      alert('我接收到子组件传送的删除信息' + row.id)
      break
    }
  }
}

const xGrid = ref()

const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Sure': {
          if ($grid.getCheckboxRecords().length === 0) {

            MessageShow('请选择至少一条数据!', 'warning');

            return
          } else {

            MessageConfirmShow('确定', '您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认退货？')
          }
          break
        }
        case 'Log': {
          MessageAlertShow('点击了退货记录!', '操作提示');
          break
        }
      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}


//查询按钮方法
const BtnSearchPurchaseOrder = () => {

  //开始时间，结束时间获取
  //MessageShow("开始时间"+datevalue._rawValue[0]+"\r\n结束时间\r\n"+datevalue._rawValue[1]);

  for (let i = 1; i < 6; i++) {
    const randomInt = Math.floor(Math.random() * 999) + 1000;//4位数随机数
    const randomSumInt = Math.floor(Math.random() * 99) + 10;//2位数随机数
    const randomOrderInt = Math.floor(Math.random() * 99) + 100;//3位数随机数
    const t = i % 2 === 0 ? 5 : 6;
    const s = i % 2 === 0 ? '入库' : i % 3 === 0 ? '退货' : '部分入库';
    const thdh = i % 2 === 0 ? '' : i % 3 === 0 ? 'THID' + randomOrderInt : '';
    const CGNo = 'NGCG231200' + randomOrderInt;//采购编号
    const wlNo = 'NGWL1000' + randomInt;
    const xh = 'NGXH' + randomSumInt;
    const wlmc = 'WLMC' + randomInt;
    const gys = '供应商' + randomSumInt;
    const xhdh = 'NG231200' + randomOrderInt;
    const w = i % 2 === 0 ? '3300' : i % 3 === 0 ? '3660' : i % 4 === 0 ? '2250' : '2580';
    const h = i % 2 === 0 ? '2440' : i % 3 === 0 ? '2440' : i % 4 === 0 ? '2000' : '2300';
    const dw = i % 2 === 0 ? '片' : i % 3 === 0 ? '平米' : i % 4 === 0 ? '包' : '吨';
    now.setDate(now.getDate() + 1);
    gridOptions.data.push({
      cgdh: CGNo,
      thdh: thdh,
      h: t,
      xh: xh,
      wlbh: wlNo,
      wlmc: wlmc,
      gys: gys,
      w: w,
      g: h,
      dw: dw,
      cgzt: s,
      rq: dayjs(now).format('YYYY-MM-DD'),
      yl: randomSumInt,
      sl: randomOrderInt,
      xsdh: xhdh,
      je: randomInt,
      6: '139xxxxxxxx',

    })
  }

}


//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  columns: [
    {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: 50},//详情
    {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    {type: 'seq', fixed: "left", title: ' ', width: 50},


    {
      field: 'thdh',
      width: '10%',
      title: '退货单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'cgdh',
      width: '10%',
      title: '采购单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'cgzt', width: '10%', title: '状态', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'gys',
      width: '10%',
      title: '供应商',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlbh',
      width: '10%',
      title: '物料编号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlmc',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'w', width: '8%', title: '宽度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'g', width: '8%', title: '高度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'h', width: '8%', title: '厚度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'xh', width: '8%', title: '型号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'dw', width: '8%', title: '单位', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '12%',
      title: '不含税单价',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'sl', width: '8%', title: '数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'sl',
      width: '12%',
      title: '已采购数量',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'je', width: '8%', title: '金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'je',
      width: '12%',
      title: '不含税金额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '8%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'sl', width: '8%', title: '库存', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '周用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '月用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'cgzt',
      width: '10%',
      title: '单据状态',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'xsdh',
      width: '10%',
      title: '销售单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'rq',
      width: '10%',
      title: '制单日期',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '制单人', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '10%',
      title: '采购部门',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: '6',
      width: '10%',
      title: '采购组织',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [{type: 'text'}, {
      'name': '退货记录',

      'code': 'Log'
    },
      {
        'name': '确认退货',
        status: 'primary',
        'code': 'Sure'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    style: 'paddling-left:10px'
  },//表头按钮
  data: [],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 4}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})


//详情框 部分2
const showCGDH = ref();
const showDetails = ref(false);
let detailData = [];
const cellClickEvent = ({row}) => {
  if (isQueryColumnId === false) {
    queryColumnId();
  }

  detailData = list.map(field => {
    return {label: queryColumnsTitle(field), value: row[field]}
  })
  showDetails.value = true;
  showCGDH.value = row['cgdh'];
}

//获取表列
let list = [];
let columnIndex = 4;//列标头从第几列开始的
let isQueryColumnId = false;
const queryColumnId = () => {

  while (columnIndex < gridOptions.columns.length) {
    list.push(gridOptions.columns[columnIndex].field);
    columnIndex++;
  }
  isQueryColumnId = true;
  return list;
}

//获取表列名
function queryColumnsTitle(cn) {
  let i = 0;
  while (i < gridOptions.columns.length + 1) {
    if (gridOptions.columns[i].field === cn) {
      return gridOptions.columns[i].title;
    }
    i++;
  }
}

// 详情框部分2 结束

const SureReturn = () => {

  MessageConfirmShow('退货', '是否确认退货？')

}

//详情框 部分2 结束


const now = new Date()

//时间快捷选择
const datevalue = ref('')
const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//页面逻辑代码执行
function logicExecute(type) {
  const $grid = xGrid.value
  switch (type) {
    case '确定':
      //多选退货逻辑代码TODO
      MessageShow('操作成功！', 'success');
      break;
    case '退货':
      //单退货逻辑代码TODO
      MessageShow('操作成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;
}


//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content, type = 'success') => {
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {

        logicExecute(czType);

        return true;
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

//弹窗信息
const MessageAlertShow = (content, title, type = 'info') => {

  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}

</script>


<style scoped>
:deep(.v-column-label div span) {
  font-weight: bold;
}
</style>

 UI-Project/src/views/mm/stockBasicData/Select.vue

New file
@@ -0,0 +1,275 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)

const tableData = [
  {
    id: '1',
    long: '1005',
    wide: '183.6',
    thick: '1991'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191'
  }
]
const tableDataa = [
  {
    long: '1005',
    wide: '183.6',
    thick: '1991',
    station: '1'
  },
  {
    long: '105',
    wide: '183',
    thick: '191',
    station: '2'
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
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
  },//表头参数
  // columns:[
  //   {type:'expand',slots: { content:'content' },width: 50},
  //   // {title: '操作', width: 110, slots: { default: 'button_slot' }},
  //   {type: 'seq', title: '自序', width: 80 },

  //   // {title: '审核', width: 40, slots: { default: 'state' }},
  //   {title: 'id', width: 140, slots: { default: 'state' }},
  //   {title: '长', width: 160, slots: { default: 'state' }},
  //   {title: '宽', width: 160, slots: { default: 'state' }},
  //   {title: '厚', width: 160, slots: { default: 'state' }},

  //   // {field: '3',width:120,  title: '退货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
  // ],
  //表头按钮
  // toolbarConfig: {
  //   buttons: [],
  //   import: false,
  //   export: true,
  //   print: true,
  //   zoom: true,
  //   custom: true
  // },
  data:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
  //table body实际数据
  // footerMethod ({ columns, data }) {//页脚函数
  //   return[
  //     columns.map((column, columnIndex) => {
  //       if (columnIndex === 0) {
  //         return '合计:'
  //       }
  //       // if (props.tableProp.footList.includes(column.field)) {
  //       //   return sumNum(data, column.field)
  //       // }
  //       return ''
  //     })
  //   ]
  // }
})
</script>

<template>
  <div>
    <!-- <el-date-picker
        v-model="value1"
        type="daterange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
    /> -->
    <!-- <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button> -->
    <el-button style="margin-left: 5px;"   id="searchButton" type="primary" @click="dialogFormVisible = true">重新识别</el-button>
    <el-button id="searchButton" type="primary" @click="dialogFormVisiblea = true">人工匹配</el-button>
    <el-button id="searchButton" type="primary" @click="dialogFormVisiblea = true">人工拿走</el-button>
    <el-button id="searchButton" type="primary" @click="dialogFormVisiblea = true">破损</el-button>
    <el-button id="searchButton" type="primary" @click="dialogFormVisiblea = true">合并/单片</el-button>

    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto">
        <el-table height="100%" ref="table" :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="id" min-width="80" />
          <el-table-column prop="long" align="center" label="长" min-width="120" />
          <el-table-column prop="wide" align="center" label="宽" min-width="120" />
          <el-table-column prop="thick" align="center" label="其他" min-width="120" />
          <!-- <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <el-button size="mini" type="text" plain @click="open">人工拿走</el-button>
            </template>
        </el-table-column> -->
        </el-table>
      </div>
    </el-card>
  </div>

  
  <el-dialog v-model="dialogFormVisible" top="21vh" width="40%" title="上片输入" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form >
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="工位：" :required="true" style="width: 14vw">
                <el-input  autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="长：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="宽：" :required="true" style="width: 13.2vw;margin-left: 14px;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="厚：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" title="原片信息">
    <el-table height="100%" ref="table" :data="tableDataa" @row-click="handle">
      <el-table-column
        prop="long"
        align="center"
        label="长"
        min-width="120"
      />
      <el-table-column
        prop="wide"
        align="center"
        label="宽"
        min-width="120"
      />
      <el-table-column
        prop="thick"
        align="center"
        label="厚"
        min-width="120"
      />
      <el-table-column
        prop="station"
        align="center"
        label="工位"
        min-width="120"
      />
    </el-table>
    <div style="text-align: center; height: 22px; margin-top: 30px;">
        <el-button @click="dialogFormVisiblea = false">关闭</el-button>
      </div>
  </el-dialog>
</template>

<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{
  text-align: center;
  margin-top: -15px;
}
</style>

 UI-Project/src/views/mm/stockBasicData/StockBasicData.vue

New file
@@ -0,0 +1,486 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)
const box = ref(true)
const boxa = ref(false)
const boxb = ref(false)
// const tableData = [
//   {
//     id: '1',
//     long: '1005',
//     wide: '183.6',
//     thick: '1991',
//     type: '5',
//     typea: '1',
//   },
//   {
//     id: '2',
//     long: '105',
//     wide: '183',
//     thick: '191',
//     typea: '1',
//     type: '5'
//   },
//   {
//     id: '2',
//     long: '105',
//     wide: '183',
//     thick: '191',
//     typea: '1',
//     type: '5'
//   },
// ]
const tableData = ref([
{
    id: '2',
    ida: '2',
    long: '105',
    wide: '183',
    thick: '191',
    typea: '1',
    typeb: '1',
    typec: '1',
    type: '5'
  },
  {
    id: '12',
    ida: '12',
    long: '1105',
    wide: '1183',
    thick: '1911',
    typea: '11',
    typeb: '11',
    typec: '11',
    type: '15'
  },
])
// 新增一行
const addTableData = ()=>{
  const newRow = {
    id: null,
    id: null,
    long: null,
    wide: null,
    thick: null,
    typea: null,
    type: null,
    typeb: null,
    typec: null,
  }
  tableData.value.push(newRow)
}
// 删除
const deleteTableData = (row) =>{
  const index = tableData.value.indexOf(row);
  if (index !== -1) {
    tableData.value.splice(index, 1);
  }
}
const tableDataa = [
  {
    ida: '3',
    longa: '1005',
    widea: '183.6',
    thicka: '1991',
  },
  {
    ida: '4',
    longa: '105',
    widea: '183',
    thicka: '191',
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}

const selectedRows = ref([]);
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
const showMessage = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '出片成功！',
    type: 'success',
  })

  }
};
const pick = () => {
  if (selectedRows.value.length === 0) {
    ElMessage('请至少选择一个选项')
  } else{
    ElMessage({
    message: '破损成功！',
    type: 'success',
  })

  }
};
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:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})
</script>

<template>
  <div>
     <el-button style="margin-top: 5px;margin-left: 5px;"   id="searchButton" type="primary" @click="showMessage">出片</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" type="primary" @click="pick">破损</el-button>
    <!-- <el-button style="margin-top: 5px"  id="searchButton" type="primary" @click="dialogFormVisible = true">添加</el-button> -->
    <el-button style="margin-top: 5px"  id="searchButton" type="primary"  @click="addTableData" >添加</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" @click="boxb = true;box = false" >合并</el-button>
    <el-button style="margin-top: 5px"  id="searchButton" @click="box = true;boxb = false" >单片</el-button>

    <div v-if="box">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
    <el-table-column type="selection" width="55"  />
    <el-table-column prop="id" align="center" label="栅格号" min-width="80" >
      <template #default="scope">
        <el-input v-model="scope.row.id" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="ida" align="center" label="id" min-width="80">
            <template #default="scope">
        <el-input v-model="scope.row.ida" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="long" align="center" label="长" min-width="100" >
            <template #default="scope">
        <el-input v-model="scope.row.long" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="wide" align="center" label="宽" min-width="100">
            <template #default="scope">
        <el-input v-model="scope.row.wide" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="type" align="center" label="厚度" min-width="100">
            <template #default="scope">
        <el-input v-model="scope.row.type" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="typea" align="center" label="膜系" min-width="100" >
            <template #default="scope">
        <el-input v-model="scope.row.typea" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="typeb" align="center" label="出片顺序" min-width="120" >
            <template #default="scope">
        <el-input v-model="scope.row.typeb" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="typec" align="center" label="流程卡号" min-width="150">
            <template #default="scope">
        <el-input v-model="scope.row.typec" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="thick" align="center" label="其他" min-width="120" >
            <template #default="scope">
        <el-input v-model="scope.row.thick" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default="scope">
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">详情</el-button>
        <el-button @click="deleteTableData(scope.row)" link icon="Delete" type="primary">删除</el-button>
            </template>
        </el-table-column>
  </el-table>
</div>

    </el-card>
  </div>
  <div v-if="boxb">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
    <el-table-column type="selection" width="55"  />
    <el-table-column prop="id" align="center" label="栅格" min-width="80">
      <template #default="scope">
        <el-input v-model="scope.row.id" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="ida" align="center" label="id" min-width="80">
            <template #default="scope">
        <el-input v-model="scope.row.ida" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="long" align="center" label="长" min-width="120" >
            <template #default="scope">
        <el-input v-model="scope.row.long" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="wide" align="center" label="宽" min-width="120">
            <template #default="scope">
        <el-input v-model="scope.row.wide" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="type" align="center" label="厚度" min-width="120">
            <template #default="scope">
        <el-input v-model="scope.row.type" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="typea" align="center" label="膜系" min-width="120" >
            <template #default="scope">
        <el-input v-model="scope.row.typea" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="typeb" align="center" label="出片顺序" min-width="120" >
            <template #default="scope">
        <el-input v-model="scope.row.typeb" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="typec" align="center" label="流程卡号" min-width="120">
            <template #default="scope">
        <el-input v-model="scope.row.typec" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column prop="thick" align="center" label="其他" min-width="120" >
            <template #default="scope">
        <el-input v-model="scope.row.thick" size="small"></el-input>
      </template>
      </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default="scope">
              <el-button size="mini" type="text" plain  @click="dialogFormVisiblea = true">详情</el-button>
        <el-button @click="deleteTableData(scope.row)" link icon="Delete" type="primary">删除</el-button>
            </template>
        </el-table-column>
  </el-table>
      </div>
    </el-card>
  </div>
  </div>
  <el-dialog v-model="dialogFormVisible" top="21vh" width="40%" title="添加" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form >
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="栅格号：" :required="true" style="width: 14vw">
                <el-input  autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="id：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="长：" :required="true" style="width: 13.2vw;margin-left: 14px;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="宽：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="厚度：" :required="true" style="width: 13.2vw;margin-left: 14px;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="膜系：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="出片顺序：" :required="true" style="width: 13.2vw;margin-left: 14px;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="流程卡号" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="其他：" :required="true" style="width: 13.2vw;margin-left: 14px;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
    <el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" title="原片信息">
    <el-table height="100%" ref="table" :data="tableDataa" @row-click="handle">
      <el-table-column
        prop="long"
        align="center"
        label="长"
        min-width="120"
      />
      <el-table-column
        prop="wide"
        align="center"
        label="宽"
        min-width="120"
      />
      <el-table-column
        prop="thick"
        align="center"
        label="厚"
        min-width="120"
      />
      <el-table-column
        prop="station"
        align="center"
        label="工位"
        min-width="120"
      />
    </el-table>
    <div style="text-align: center; height: 22px; margin-top: 30px;">
        <el-button @click="dialogFormVisiblea = false">关闭</el-button>
      </div>
  </el-dialog>
</template>

<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{
  text-align: center;
  margin-top: -15px;
}
#message{
  text-align: center;
  align-items: center;
  color: black;
   width: 200px;
   height: 100px;
   background-color: #337ecc;
   margin-left: 28%;
}
#box{
  position: relative;

  #icon{
    position: absolute;
    bottom:10px;
    right: 19px;
  }
}
</style>

 UI-Project/src/views/mm/stockBasicData/Storage.vue

New file
@@ -0,0 +1,603 @@
<template>
  <el-container>
    <el-header class="m-header" style="height: auto">
      <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="7">
          <el-date-picker
              v-model="datevalue"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"

              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          />

        </el-col>
        <el-col :span="2">
          <el-button
              id="select"
              type="primary"
              :icon="Search"
              @click="BtnSearchPurchaseOrder">查询
          </el-button>
        </el-col>

      </el-row>


    </el-header>
    <el-main style="padding-top: 5px;height:100%">
      <vxe-grid

          max-height="600"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"

          @cell-dblclick="cellClickEvent"

      >

        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined ">
              <span style="font-weight: bold">{{ item.title + ':  ' }}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <el-button @click="getTableRow(row,'look')" link type="primary" size="small">查看</el-button>
          <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
          <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
        </template>


        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>

      <!--      详情框 部分1-->
      <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false"
                 resize>
        <el-container>
          <el-header height="35px"
                     style="margin: 0;padding: 0">

            <el-input v-model="showCGDH" placeholder="采购单号" disabled>
              <template #prepend>采购单号：</template>
            </el-input>
          </el-header>
          <el-main>
            <template #default>
              <vxe-table
                  border="inner"
                  auto-resize
                  show-overflow
                  max-height="400"
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :sync-resize="showDetails"
                  :data="detailData">
                <vxe-column field="label" width="30%" class-name="v-column-label"></vxe-column>
                <vxe-column field="value"></vxe-column>
              </vxe-table>
            </template>
          </el-main>
          <el-footer height="40px">
            <el-row>
              <el-col :offset="20" :span="4">
                <el-button
                    id="Sure"
                    type="primary"
                    @click="SureStorage"
                >确认入库
                </el-button>
              </el-col>

            </el-row>
          </el-footer>
        </el-container>
      </vxe-modal>
      <!--      详情框 部分1 结束-->


    </el-main>
  </el-container>


</template>


<script setup>
import {ref} from "vue";
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {VXETable} from "vxe-table";
import {ElMessage, ElMessageBox} from "element-plus";

let router = useRouter()


const getTableRow = (row, type) => {
  switch (type) {
    case 'edit' : {
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/purchaseOrder/DetailsPurchaseOrder', query: {id: row.id}});

      break
    }
    case 'look': {
      /*this.detailData = ['name', 'nickname', 'role', 'sex', 'age', 'amount', 'address'].map(field => {
        return { label: field, value: row[field] }
      })*/
      //this.showDetails = true
      break
    }
    case 'delete': {
      alert('我接收到子组件传送的删除信息' + row.id)
      break
    }
  }
}

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Sure': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据', 'warning');
            //openAlert({type: 'message', content: '请选择至少一条数据', status: 'warning'})
            //VXETable.modal.message( '请选择一条数据！')
            return
          } else {
            const type = VXETable.modal.confirm('您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认入库？');
            //openAlert({type:'alert', content: '成功入库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success' })
            //VXETable.modal.message( '请选择一条数据！')
            return
          }
          break
        }
        case 'Log': {

          //openAlert({type: 'alert', content: '点击了退货记录', status: 'success'})
          MessageConfirmShow("退货记录", "点击了退货记录", "", 'success')
          break
        }
      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}

const openAlert = (options) => {
  if (options.type === 'message') {
    VXETable.modal.message(options)
  } else {
    VXETable.modal.alert(options)
  }

}
const closeAlert = (id) => {
  VXETable.modal.close(id)
}


//查询调用事件
const BtnSearchPurchaseOrder = () => {
  //开始时间，结束时间获取
  //MessageShow(datevalue._rawValue[0]+"\r\n时间2\r\n"+datevalue._rawValue[1]);

  for (let i = 1; i < 6; i++) {
    const randomInt = Math.floor(Math.random() * 999) + 1000;//4位数随机数
    const randomSumInt = Math.floor(Math.random() * 99) + 10;//2位数随机数
    const randomOrderInt = Math.floor(Math.random() * 99) + 100;//3位数随机数
    const t = i % 2 === 0 ? 5 : 6;
    const s = i % 2 === 0 ? '入库' : i % 3 === 0 ? '待审核' : '已采购';
    const rkdh = i % 2 === 0 ? 'RKID' + randomOrderInt : i % 3 === 0 ? '' : '';
    const CGNo = 'NGCG231200' + randomOrderInt;//采购编号
    const wlNo = 'NGWL1000' + randomInt;
    const xh = 'NGXH' + randomSumInt;
    const wlmc = 'WLMC' + randomInt;
    const gys = '供应商' + randomSumInt;
    const xhdh = 'NG231200' + randomOrderInt;
    const w = i % 2 === 0 ? '3300' : i % 3 === 0 ? '3660' : i % 4 === 0 ? '2250' : '2580';
    const h = i % 2 === 0 ? '2440' : i % 3 === 0 ? '2440' : i % 4 === 0 ? '2000' : '2300';
    const dw = i % 2 === 0 ? '片' : i % 3 === 0 ? '平米' : i % 4 === 0 ? '包' : '吨';
    now.setDate(now.getDate() + 1);
    gridOptions.data.push({
      cgdh: CGNo,
      rkdh: rkdh,
      h: t,
      xh: xh,
      wlbh: wlNo,
      wlmc: wlmc,
      gys: gys,
      w: w,
      g: h,
      dw: dw,
      cgzt: s,
      rq: dayjs(now).format('YYYY-MM-DD'),
      yl: randomSumInt,
      sl: randomOrderInt,
      xsdh: xhdh,
      je: randomInt,
      6: '139xxxxxxxx',

    })
  }

}


//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY: {enabled: true},//开启虚拟滚动
  showOverflow: true,
  //showDetails: false,//弹窗 是否显示
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  columns: [
    {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: 50},//详情
    {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    {type: 'seq', fixed: "left", title: ' ', width: 50},


    {
      field: 'rkdh',
      width: '10%',
      title: '入库单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'cgdh',
      width: '10%',
      title: '采购单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'cgzt', width: '10%', title: '状态', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'gys',
      width: '10%',
      title: '供应商',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlbh',
      width: '10%',
      title: '物料编号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'wlmc',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'w', width: '8%', title: '宽度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'g', width: '8%', title: '高度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'h', width: '8%', title: '厚度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'xh', width: '8%', title: '型号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'dw', width: '8%', title: '单位', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '12%',
      title: '不含税单价',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'sl', width: '8%', title: '数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'sl',
      width: '12%',
      title: '已采购数量',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: 'je', width: '8%', title: '金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'je',
      width: '12%',
      title: '不含税金额',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '8%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'sl', width: '8%', title: '库存', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '周用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {field: 'yl', width: '10%', title: '月用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: 'cgzt',
      width: '10%',
      title: '单据状态',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'xsdh',
      width: '10%',
      title: '销售单号',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: 'rq',
      width: '10%',
      title: '制单日期',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '6', width: '10%', title: '制单人', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true},
    {
      field: '6',
      width: '10%',
      title: '采购部门',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {
      field: '7',
      width: '10%',
      title: '采购组织',
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      sortable: true
    },
    {field: '8', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [{type: 'text'/*,name:'订单入库'*/}, {
      'name': '入库记录',

      'code': 'Log'
    },
      {
        'name': '确认入库',
        status: 'primary',
        'code': 'Sure'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    style: 'paddling-left:10px'
  },//表头按钮
  data: [],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 4}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})



//详情框 部分2
const showCGDH = ref();
const showDetails = ref(false);
let detailData = [];
const cellClickEvent = ({row}) => {
  if(isQueryColumnId===false){
    queryColumnId();
  }

  detailData = list.map(field => {
    return {label: queryColumnsTitle(field), value: row[field]}
  })

  showDetails.value = true;
  showCGDH.value = row['cgdh'];
}

//获取表列
let list = [];
let columnIndex = 4;//列标头从第几列开始的
let isQueryColumnId = false;
const queryColumnId = () => {
  while (columnIndex < gridOptions.columns.length) {
    list.push(gridOptions.columns[columnIndex].field);
    columnIndex++;
  }
  isQueryColumnId = true;
  return list;
}

//获取表列名
function queryColumnsTitle(cn) {
  let i = 0;
  while (i < gridOptions.columns.length + 1) {
    if (gridOptions.columns[i].field === cn) {
      return gridOptions.columns[i].title;
    }
    i++;
  }
}
//详情框 部分2 结束


const SureStorage = () => {
  MessageShow('确认入库成功');

}


const now = new Date()

//时间快捷选择
const datevalue = ref('')
const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]


//页面逻辑代码执行
function logicExecute(type) {
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;
}

//提示信息
const MessageShow = (content, type = 'success') => {
  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {
        return logicExecute(czType);

      })
      //点击了取消
      .catch(() => {
        return false;
      })
}

</script>


<style scoped>
:deep(.v-column-label div span) {
  font-weight: bold;
}


</style>

 UI-Project/src/views/pp/workOrder/ReleaseWorkOrder.vue

File was deleted

 UI-Project/src/views/sd/order/Order.vue

@@ -29,7 +29,9 @@
<style scoped>
#main-div{
  width: 99%;
  height: 100%;
  height: 99%;
  margin-top: 10px;
  margin-left: 10px;
}
#div-title{
  height: 2%;

 UI-Project/src/views/sd/order/SelectOrder.vue

@@ -157,7 +157,7 @@
        start-placeholder="开始时间"
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-button style="margin-left: 10px;  margin-top: -5px"  id="searchButton" type="primary " :icon="Search">查询</el-button>
    <vxe-grid
        @cell-dblclick="cellClickEvent"
        max-height="97%"

 UI-Project/src/views/sd/returns/Returns.vue

@@ -1,55 +1,407 @@
<script setup>
import {ArrowLeftBold, ArrowRight, Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router";
let indexFlag=$ref(1)
function changeRouter(index){
  indexFlag=index
<script lang="ts" setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()
import type { TableColumnCtx } from 'element-plus'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const add = ref(false)
const adda = ref(false)

const value = ref('')

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const options = [
  {
    value: 'Option1',
    label: 'P202561456',
  },
  {
    value: 'Option2',
    label: 'P202561456',
  },
  {
    value: 'Option3',
    label: 'P202561456',
  },
  {
    value: 'Option4',
    label: 'P202561456',
  },
  {
    value: 'Option5',
    label: 'P202561456',
  },
]
const tableData: User[] = [

  {
    id: 'P202561456',
    long: '1005',
    wide: '183.6',
    thick: '1991',
  },
  {
    id: 'P202561456',
    long: '105',
    wide: '183',
    thick: '191',
  }
]
const tableDataa = [
  {
    long: '1005',
    wide: '183.6',
    thick: '1991',
    station: '1'
  },
  {
    long: '105',
    wide: '183',
    thick: '191',
    station: '1'
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
const getTableRow = (type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      // router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
      state: true
    }
    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:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})
</script>

<template>
  <div id="main-div">
    <div id="div-title">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item @click="changeRouter(1)" :class="indexFlag===1?'indexTag':''" :to="{ path: '/main/returns/selectReturns' }">退货首页</el-breadcrumb-item>
        <el-breadcrumb-item @click="changeRouter(2)" :class="indexFlag===2?'indexTag':''" :to="{ path: '/main/returns/selectDeliveryList' }">发货退货</el-breadcrumb-item>
        <el-breadcrumb-item @click="changeRouter(3)" :class="indexFlag===3?'indexTag':''" :to="{ path: '/main/returns/returnsReport' }">报表</el-breadcrumb-item>
        <el-breadcrumb-item v-show="false" :to="{ path: '/main/product/test1' }">测试</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  <div>
    <div id="dotClass">
      <div>打标机就绪状态：</div>
      <i style="margin-top: 2px; background-color: green;width:18px;  height:18px;  border-radius: 50%;  display: block"></i>
    <el-button style="margin-left: 30px;margin-top: -3px;">手动确认</el-button>
 
    <div style="margin-left: 70px;">切割机就绪状态：</div>
     <i style="margin-top: 2px; background-color: #911005 ;width:18px;  height:18px;  border-radius: 50%;  display: block"></i>
    <el-button style="margin-left: 30px;margin-top: -3px;" >手动确认</el-button>
   </div>
    <el-button style="margin-top: 5px;margin-left: 15px;"   id="searchButton" type="primary" @click="dialogFormVisible = true">选择工程</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="primary">开始上片</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="warning" >暂停</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="danger" >停止任务</el-button>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto">
        <!-- <el-table height="100%" ref="table" :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="工程号" min-width="80" />
          <el-table-column prop="long" align="center" label="原片宽" min-width="120" />
          <el-table-column prop="wide" align="center" label="原片长" min-width="120" />
          <el-table-column prop="thick" align="center" label="膜系" min-width="120" />
          <el-table-column prop="thick" align="center" label="数量" min-width="120" />
          <el-table-column
            align="center"
            label="状态"
            min-width="80"
          >
          <el-tag type="success">就绪</el-tag>
          </el-table-column>
        </el-table> -->
    <el-table
    height="100%"
     ref="table"
     :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"
      :data="tableData"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="id" label="工程号" width="200" align="center"/>
      <el-table-column prop="long" label="原片宽" align="center"/>
      <el-table-column prop="wide" label="原片长" align="center"/>
      <el-table-column prop="thick" label="膜系" align="center"/>
      <el-table-column prop="thick" label="数量" align="center"/>
      <el-table-column
            align="center"
            label="状态"
            min-width="80"
          >
          <el-tag type="success">就绪</el-tag>
          <!-- <el-tag type="danger">未就绪</el-tag> -->
          </el-table-column>
    </el-table>
      </div>
    </el-card>
      <div id="parent">
        <img src="../../../assets/shangpianji .png" alt="" style="max-width: 20%;max-height: 20%;margin-top: 20px;margin-left: 130px;">
        <el-button style="margin-top: -830px;margin-left: -40px;"  size="mini" id="searchButton" @click="add = true">添加原片</el-button>
        <el-button style="margin-top: -10px;margin-left: -80px;"  size="mini" id="searchButton"  @click="adda = true">添加原片</el-button>
        <div id="overlay" v-show="state"></div>
        <div id="overlaya" v-show="statea"></div>
      </div>
        </div>

    <div id="main-body">
      <router-view  />
    </div>
  </div>
  
  <el-dialog v-model="dialogFormVisible" top="24vh" width="30%" title="工程" >
    <div style="margin-left: 50px;margin-bottom: 10px;">
      <el-form-item label="工程号：" :required="true">
        <el-select
    v-model="value"
    clearable
    placeholder="请选择工程"
    style="width: 300px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
              </el-form-item>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="add" top="23vh" width="40%" title="添加原片" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form >
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="宽：" :required="true" style="width: 14vw">
                <el-input  autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="长：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="膜系：" :required="true" style="width: 14vw;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="数量：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="getTableRow('edit')">
          确认
        </el-button>
        <el-button @click="add = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="adda" top="23vh" width="40%" title="添加原片" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form >
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="宽：" :required="true" style="width: 14vw">
                <el-input  autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="长：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="膜系：" :required="true" style="width: 14vw;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="数量：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="adda = false">
          确认
        </el-button>
        <el-button @click="adda = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
#main-div{
  width: 100%;
  height: 100%;

#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;
}
#div-title{
  height: 2%;
  width: 100%;
#dotClass {
  display: flex;
  margin-left: 20px; 
  size: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}
#searchButton{
  margin-top: -5px;
  margin-left: 1rem;
#parent{
  position: relative;
}
#searchButton1{
//margin-left: 10rem;
#overlay{
  position: absolute;
  z-index: 1;
  width: 212px;
  height: 15px;
  background-color: #529b2e;
  margin-top: -407px;
  margin-left: 171px;
}
/*main-body样式*/
#main-body{
  width: 99%;
  height: 95%;
  margin-top: 1%;
}
#select{
  margin-left:0.5rem;
}
:deep(.indexTag .el-breadcrumb__inner){
  color: #5CADFE !important;
#overlaya{
  position: absolute;
  z-index: 1;
  width: 212px;
  height: 15px;
  background-color: #529b2e;
  margin-top: -40px;
  margin-left: 167px;
}
</style>

 UI-Project/src/views/sd/returns/SelectReturns.vue

@@ -4,9 +4,62 @@
import {useRouter} from "vue-router"
const router = useRouter()

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)



const tableData = [
  {
    id: '1',
    long: '1005',
    wide: '183.6',
    thick: '1991'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191'
  }
]
const tableDataa = [
  {
    long: '1005',
    wide: '183.6',
    thick: '1991',
    station: '1'
  },
  {
    long: '105',
    wide: '183',
    thick: '191',
    station: '2'
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
@@ -49,123 +102,172 @@
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',slots: { content:'content' },width: 50},
    {title: '操作', width: 110, slots: { default: 'button_slot' }},
    {type: 'seq', title: '自序', width: 80 },
  // columns:[
  //   {type:'expand',slots: { content:'content' },width: 50},
  //   // {title: '操作', width: 110, slots: { default: 'button_slot' }},
  //   {type: 'seq', title: '自序', width: 80 },

    {title: '审核', width: 40, slots: { default: 'state' }},
    {title: '入库', width: 40, slots: { default: 'state' }},
  //   // {title: '审核', width: 40, slots: { default: 'state' }},
  //   {title: 'id', width: 140, slots: { default: 'state' }},
  //   {title: '长', width: 160, slots: { default: 'state' }},
  //   {title: '宽', width: 160, slots: { default: 'state' }},
  //   {title: '厚', width: 160, slots: { default: 'state' }},

    {field: '3',width:120,  title: '退货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '4',width:120,  title: '退货员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5',width:120,  title: '退货日期',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '6',width:120,  title: '客户编码',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '7',width:120,  title: '客户名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '8',width:120,  title: '批次',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '9',width:120,  title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '10',width:120,   title: '发货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '11',width:120,  title: '退货方式',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '12',width:120,  title: '总数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '13',width:120,  title: '总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '14',width:120,  title: '总金额',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '15',width:120,  title: '报表日期',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '16',width:120,  title: '业务员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
  ],//表头按钮
  toolbarConfig: {
    buttons: [],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  //   // {field: '3',width:120,  title: '退货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
  // ],
  //表头按钮
  // toolbarConfig: {
  //   buttons: [],
  //   import: false,
  //   export: true,
  //   print: true,
  //   zoom: true,
  //   custom: true
  // },
  data:  [
    {
      '0': '1',
      '1': '',
      '2': '',
      '3': 'TH23120801',
      '4': '郑珊珊',
      '5': '2023-12-08',
      '6': '310',
      '7': '上海里诺建筑工程有限公司',
      '8': '补1-2',
      '9': '宿迁某某项目',
      '10': 'JG23112304',
      '11': '实物退货',
      '12': '8',
      '13': '15.68',
      '14': '11912.05',
      '15': '2023-11-24',
      '16': '王龙'
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],//table body实际数据
  footerMethod ({ columns, data }) {//页脚函数
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        // if (props.tableProp.footList.includes(column.field)) {
        //   return sumNum(data, column.field)
        // }
        return ''
      })
    ]
  }
  ],
  //table body实际数据
  // footerMethod ({ columns, data }) {//页脚函数
  //   return[
  //     columns.map((column, columnIndex) => {
  //       if (columnIndex === 0) {
  //         return '合计:'
  //       }
  //       // if (props.tableProp.footList.includes(column.field)) {
  //       //   return sumNum(data, column.field)
  //       // }
  //       return ''
  //     })
  //   ]
  // }
})
</script>

<template>
  <div>
    <el-date-picker
    <!-- <el-date-picker
        v-model="value1"
        type="daterange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    /> -->
    <!-- <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button> -->
    <el-button style="margin-top: -5px;margin-left: 5px;"   id="searchButton" type="primary" @click="dialogFormVisible = true">上片输入</el-button>
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" @click="dialogFormVisiblea = true">原片信息</el-button>
    <!-- <el-button style="margin-top: -5px"  id="searchButton" type="danger">人工拿走</el-button> -->


    <vxe-grid
        max-height="97%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row }">
        <ul class="expand-wrapper">
          <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!=undefined ">
            <span style="font-weight: bold">{{item.title+':  '}}</span>
            <span>{{ row[item.field] }}</span>
          </li>
        </ul>
      </template>

      <template #state="{ row}">
        <el-checkbox checked/>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>
    </vxe-grid>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto">
        <el-table height="100%" ref="table" :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="id" min-width="80" />
          <el-table-column prop="long" align="center" label="长" min-width="120" />
          <el-table-column prop="wide" align="center" label="宽" min-width="120" />
          <el-table-column prop="thick" align="center" label="厚" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default>
              <el-button size="mini" type="text" plain @click="open">人工拿走</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>

  
  <el-dialog v-model="dialogFormVisible" top="21vh" width="40%" title="上片输入" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form >
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="工位：" :required="true" style="width: 14vw">
                <el-input  autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="长：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="宽：" :required="true" style="width: 13.2vw;margin-left: 14px;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="厚：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" title="原片信息">
    <el-table height="100%" ref="table" :data="tableDataa" @row-click="handle">
      <el-table-column
        prop="long"
        align="center"
        label="长"
        min-width="120"
      />
      <el-table-column
        prop="wide"
        align="center"
        label="宽"
        min-width="120"
      />
      <el-table-column
        prop="thick"
        align="center"
        label="厚"
        min-width="120"
      />
      <el-table-column
        prop="station"
        align="center"
        label="工位"
        min-width="120"
      />
    </el-table>
    <div style="text-align: center; height: 22px; margin-top: 30px;">
        <el-button @click="dialogFormVisiblea = false">关闭</el-button>
      </div>
  </el-dialog>
</template>

<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{
  text-align: center;
  margin-top: -15px;
}
</style>