From e23a1db0b60437f17d09d65c65f8fd0c8a5d88c7 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 26 八月 2024 18:11:07 +0800
Subject: [PATCH] 最新版本
---
admin/src/views/platform/index.vue | 336 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 194 insertions(+), 142 deletions(-)
diff --git a/admin/src/views/platform/index.vue b/admin/src/views/platform/index.vue
index d25f751..7bc61bf 100644
--- a/admin/src/views/platform/index.vue
+++ b/admin/src/views/platform/index.vue
@@ -1,8 +1,8 @@
<template>
<div class="main_app">
- <div class="df_ac mb20">
- <el-select v-model="currentPlatform" class="w300">
- <el-option v-for="item in platformList" :key="item.id"></el-option>
+ <div class="mb20">
+ <el-select v-model="platformId" @change="getList()">
+ <el-option v-for="item in PlatformList" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
<el-button type="primary" class="ml20" @click="handleSet"
>閰嶇疆鏈堝彴</el-button
@@ -12,47 +12,68 @@
<div class="platform_list">
<div class="item" v-for="i in 2">
<div class="head">
- <div class="name">6鍙锋湀鍙�</div>
- <div class="status">
- <span class="green">浣滀笟涓�</span>
- <span class="">浣滀笟锛�1</span>
- <span>鍙彿锛�1</span>
- <span>绛夊緟锛�1</span>
- <span class="red">寮傚父锛�1</span>
+ <div class="left">
+ <div class="status mr10">浣滀笟涓�</div>
+ <div class="name">6鍙锋湀鍙�</div>
+ <div class="ite">
+ <span class="placeholder9">浣滀笟锛�</span><span>1</span>
+ </div>
+ <div class="ite">
+ <span class="placeholder9">浣滀笟锛�</span><span>1</span>
+ </div>
+ <div class="ite">
+ <span class="placeholder9">浣滀笟锛�</span><span class="red">1</span>
+ </div>
</div>
- <el-button type="primary">鍙彿</el-button>
+ <el-button type="primary" @click="handleQueuing()">鍙彿</el-button>
</div>
- <div class="info" v-for="j in 3">
- <div class="line">
- <div class="left">
- <span class="plate mr20">鐨朅12122</span>
- <span class="placeholder9">椹鹃┒鍛�</span>
- <span>鐜嬫煇鏌�</span>
- <span>18888888888</span>
- </div>
- <div class="right">
- <span class="green">浣滀笟涓�</span>
- <span class="placeholder9 ml20">浣滀笟鏃堕暱锛�23鍒嗛挓26绉�</span>
- </div>
- </div>
- <div class="line">
- <div class="left">
- <div>
- <span>杩愯緭鍗曞彿</span
- ><span class="ml10 placeholder9">1231231</span>
+ <div class="list">
+ <div class="info" v-for="j in 3">
+ <div class="line">
+ <div class="left">
+ <span class="plate">鐨朅12122</span>
</div>
- <div>
- <span>鎬昏繍杈撻噺</span
- ><span class="ml10 placeholder9">3000涓囨敮</span
- ><span class="primaryColor ml10 pointer" @click="isShowDetail = true">杩愬崟璇︽儏</span>
+ <div class="right">
+ <span class="green">浣滀笟涓�</span>
+ <span class="green ml20">23鍒嗛挓26绉�</span>
</div>
</div>
- <div class="right">
- <el-button type="primary" @click="handleFinish()"
- >浣滀笟瀹屾垚</el-button
- >
- <el-button plain>杞Щ鏈堝彴</el-button>
- <el-button plain>寮傚父鎸傝捣</el-button>
+ <div class="line">
+ <div class="ite">
+ <span>杩愯緭鍗曞彿锛�</span>
+ <span>202020</span>
+ </div>
+ <div class="ite">
+ <span>椹鹃┒鍛橈細</span>
+ <span>202020</span>
+ </div>
+ <div class="ite">
+ <span>鎵嬫満鍙凤細</span>
+ <span>202020</span>
+ </div>
+ <div class="ite">
+ <span>鎬昏繍杈撻噺锛�</span>
+ <span>202020</span>
+ </div>
+ <div class="ite" style="width: 66.6%">
+ <span>杩愯緭鍏徃锛�</span>
+ <span>20202dasd鐜╁効鐜╁効鐜╁効棰濆 棰濆0</span>
+ </div>
+ <div class="ite"></div>
+ </div>
+ <div class="line">
+ <div class="left">
+ <span class="primaryColor pointer" @click="handleDetail"
+ >杩愬崟璇︽儏</span
+ >
+ </div>
+ <div class="right">
+ <el-button type="primary" @click="handleFinish()"
+ >浣滀笟瀹屾垚</el-button
+ >
+ <el-button plain>杞Щ鏈堝彴</el-button>
+ <el-button plain>寮傚父鎸傝捣</el-button>
+ </div>
</div>
</div>
</div>
@@ -69,7 +90,7 @@
<div class="mb20">
<div class="title">鍏ュ簱鏈堝彴缁�</div>
<div class="list">
- <div class="item">1鍙锋湀鍙�</div>
+ <div class="item active">1鍙锋湀鍙�</div>
<div class="item">2鍙锋湀鍙�</div>
<div class="item">1鍙锋湀鍙�</div>
<div class="item">2鍙锋湀鍙�</div>
@@ -91,133 +112,178 @@
</span>
</el-dialog>
<!-- 杩愬崟璇︽儏 -->
- <el-dialog
- title="杩愬崟璇︽儏"
- :visible.sync="isShowDetail"
- width="420px"
- >
- <div class="detail_modal">
- <div class="head">
- <div class="line">
- <span class="ccc">杩愯緭鍗曞彿</span>
- <span>28282</span>
- </div>
- <div class="line">
- <span class="ccc">杩愯緭杞﹁締</span>
- <span>鐨朅12122</span>
- </div>
- <div class="line">
- <span class="ccc">椹鹃┒鍛�</span>
- <span>鐜嬪痉鍙�</span>
- <span>1888888</span>
- </div>
- <div class="line">
- <span class="ccc">鎬昏繍杈撻噺</span>
- <span>28282涓囨敮</span>
- </div>
- </div>
- <div class="content">
- <div class="item">
- <div class="line">
- <div>鍚堝悓鍙凤細1292992</div>
- <div class="address">鏀惰揣鍦帮細address</div>
- </div>
- <div class="line">
- <div>鐗╂枡鍚嶇О锛氶粍灞�</div>
- <div>鏁伴噺锛�700</div>
- </div>
- <div class="line">
- <div>鐗╂枡鍚嶇О锛氶粍灞�</div>
- <div>鏁伴噺锛�200</div>
- </div>
- </div>
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="isShowDetail = false">鍏抽棴</el-button>
- </span>
- </el-dialog>
+ <!-- -->
+ <!-- 鍙彿 -->
+ <PlatformQueuing ref="PlatformQueuingRef" v-if="isShowQueuing" @success="getList" @close="isShowQueuing = false" />
+ <WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
</div>
</template>
<script>
+import { getPlatform, getPlatformJob } from '@/api'
+import PlatformQueuing from './components/PlatformQueuing.vue'
+import WaybillDetail from './components/WaybillDetail.vue'
export default {
- data() {
+ components: {
+ PlatformQueuing,
+ WaybillDetail
+ },
+ data () {
return {
- currentPlatform: '',
- platformList: [],
+ platformId: '',
+ PlatformList: [],
+ dataList: [],
isShowSet: false, // 鏈堝彴閰嶇疆
setParam: {},
isShowDetail: false, // 杩愬崟璇︽儏
- detail: {}
+ detail: {},
+ isShowQueuing: false
}
},
+ created () {
+ this.getPlatList()
+ this.getList()
+ },
methods: {
- handleFinish(item) {
+ handleQueuing (row) {
+ this.isShowQueuing = true
+ this.$nextTick(() => {
+ this.$refs.PlatformQueuingRef.isShowModal = true
+ })
+ },
+ handleDetail () {
+ this.isShowDetail = true
+ this.$nextTick(() => {
+ this.$refs.WaybillDetailRef.isShowModal = true
+ })
+ },
+ getList () {
+ const { platformId } = this
+ getPlatformJob({
+ model: { platformId }
+ }).then(res => {
+ this.dataList = res.records
+ })
+ },
+ handleFinish (item) {
this.$confirm('楂樻灦搴�6鍙锋湀鍙� 鐨朅12345 浣滀笟缁撴潫', '娓╅Θ鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning'
})
},
- handleSet() {
+ getPlatList () {
+ getPlatform({
+ model: {}
+ }).then(res => {
+ this.PlatformList = res.records
+ })
+ },
+ handleSet () {
this.isShowSet = true
},
- setReset() { },
- setSub() { }
+ setReset () { },
+ setSub () { }
}
}
</script>
<style lang="scss" scoped>
+@import "@/assets/style/variables.scss";
.platform_list {
.item {
- padding: 16px 24px;
+ /* padding: 16px 24px; */
+ background: #ffffff;
border-radius: 2px;
- border: 2px solid #cccccc;
+ border: 1px solid #dfe2e8;
margin-bottom: 12px;
.head {
display: flex;
justify-content: space-between;
- .name {
- font-size: 16px;
- }
- .status {
+ align-items: center;
+ height: 50px;
+ background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%);
+ border-radius: 2px 2px 0px 0px;
+ padding: 0 28px;
+ .left {
flex: 1;
- margin-left: 50px;
- span {
+ display: flex;
+ align-items: center;
+ .name {
+ font-size: 16px;
+ margin-right: 50px;
+ }
+ .status {
+ line-height: 25px;
+ height: 25px;
+ padding: 0 4px;
+ background: #00ba67;
+ border-radius: 2px;
+ color: #ffffff;
+ }
+ .ite {
margin-right: 30px;
}
}
}
- .info {
+ .list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
margin-top: 10px;
- border: 1px solid #999999;
- padding: 6px 8px;
- border-radius: 2px;
- margin-bottom: 10px;
- .line {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 6px;
- .left {
- .plate {
- border: 1px solid #4969f6;
- border-radius: 2px;
- padding: 0 5px;
- }
- }
- .right {
+ padding: 16px;
+ .info {
+ background: #effbf5;
+ border-radius: 2px;
+ border: 1px solid #dfe2e8;
+ padding: 16px;
+ border-radius: 2px;
+ margin-bottom: 10px;
+ width: 30%;
+ .line {
display: flex;
align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ margin-bottom: 6px;
+ span {
+ &:nth-child(1) {
+ color: #999999;
+ }
+ }
+ .ite {
+ width: 33.3%;
+ margin-top: 8px;
+ }
+ .left {
+ .plate {
+ font-size: 15px;
+ color: #111111;
+ padding: 4px 5px;
+ font-weight: 700;
+ border: 1px solid #279baa;
+ background-color: #fff;
+ }
+ }
+ .right {
+ display: flex;
+ align-items: center;
+ }
}
}
}
}
}
+.main_head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .tabs {
+ flex: 1;
+ }
+}
/* */
.set_modal {
.title {
@@ -233,34 +299,20 @@
cursor: pointer;
width: 30%;
height: 32px;
- background-color: #d9d9d9;
- border: 1px solid #4d99a7;
+ border: 1px solid #dfe2e8;
display: flex;
justify-content: center;
align-items: center;
- border-radius: 6px;
+ border-radius: 2px;
margin-bottom: 12px;
+ }
+ .active {
+ background: rgba(39, 155, 170, 0.06);
+ border: 1px solid #279baa;
+ color: #279baa;
}
}
}
/* */
-.detail_modal {
- font-size: 12px;
- .head {
- border-bottom: 1px solid #999999;
- }
- .item {
- border-bottom: 1px solid #999999;
- }
- .line {
- display: flex;
- justify-content: space-between;
- .ccc{
- color: #999999;
- }
- .address {
- margin-right: 30px;
- }
- }
-}
+/* */
</style>
--
Gitblit v1.9.3