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/sd/returns/Returns.vue | 434 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 393 insertions(+), 41 deletions(-)
diff --git a/UI-Project/src/views/sd/returns/Returns.vue b/UI-Project/src/views/sd/returns/Returns.vue
index cfa6d0c..457ef97 100644
--- a/UI-Project/src/views/sd/returns/Returns.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0