前端页面

wang

2024-03-26 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee

 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>