前端页面

wang

2024-03-26 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee

 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>