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/SelectReturns.vue | 304 +++++++++++++++++++++++++++++++++----------------
1 files changed, 203 insertions(+), 101 deletions(-)
diff --git a/UI-Project/src/views/sd/returns/SelectReturns.vue b/UI-Project/src/views/sd/returns/SelectReturns.vue
index 6870fce..d2317cd 100644
--- a/UI-Project/src/views/sd/returns/SelectReturns.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0