From 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee Mon Sep 17 00:00:00 2001 From: wang <3597712270@qq.com> Date: 星期二, 26 三月 2024 13:31:38 +0800 Subject: [PATCH] 前端页面 --- UI-Project/src/views/mm/purchaseStorage/Select.vue | 388 ++++++++++++++++++------------------------------------- 1 files changed, 128 insertions(+), 260 deletions(-) diff --git a/UI-Project/src/views/mm/purchaseStorage/Select.vue b/UI-Project/src/views/mm/purchaseStorage/Select.vue index ed8e9aa..f733e66 100644 --- a/UI-Project/src/views/mm/purchaseStorage/Select.vue +++ b/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> \ No newline at end of file -- Gitblit v1.8.0