From 69a1b3bf45738f048361ee4ccb6bdc64fce35720 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 12 三月 2025 11:31:46 +0800
Subject: [PATCH] 更新
---
admin/src/views/task/driverDetail.vue | 519 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 519 insertions(+), 0 deletions(-)
diff --git a/admin/src/views/task/driverDetail.vue b/admin/src/views/task/driverDetail.vue
new file mode 100644
index 0000000..e7f6cad
--- /dev/null
+++ b/admin/src/views/task/driverDetail.vue
@@ -0,0 +1,519 @@
+<template>
+ <GlobalWindow :title="title" :visible.sync="isShowModal" @close="close" @confirm="confirm">
+ <div class="modal_wrap">
+ <div class="modal_content">
+ <div class="header">
+ <img v-if="info.status == '3' || info.status == '6'" class="head_bg" src="@/assets/task/bg_shenhe_fail@2x.png"
+ alt="">
+ <img v-else-if="info.status == '2' || info.status == '5'" class="head_bg"
+ src="@/assets/task/bg_shenhe_pass@2x.png" alt="">
+ <img v-else-if="info.status == '4'" class="head_bg" src="@/assets/task/bg_shenhe_chexiao@2x.png" alt="">
+ <img v-else class="head_bg" src="@/assets/task/bg_shenhe@2x.png" alt="">
+ <div class="left">
+ <div class="h1">鐗╂祦杞﹂绾�</div>
+ <div class="time">鎻愪氦鏃堕棿锛歿{ info.createDate }}</div>
+ </div>
+ <div class="right"
+ :class="{ scs: info.status == '2' || info.status == '5', msg: info.status == '3' || info.status == '6' }">{{
+ statusMap[info.status] }}</div>
+ </div>
+ <div class="info">
+ <div class="title">鐗╂祦杞﹂绾︿俊鎭�</div>
+ <div class="list">
+ <div class="item">
+ <div class="label">鐢宠浜�</div>
+ <div class="value">{{ info.driverName }} {{ info.driverPhone }}</div>
+ </div>
+ <div class="item">
+ <div class="label">杞︾墝鐓�</div>
+ <div class="value">鍓� {{ info.carCodeFront }}锛屽悗 {{ info.carCodeBack }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鍚堝悓缂栧彿</div>
+ <div class="value">{{ info.contractNum }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鍒板巶鏃堕棿</div>
+ <div class="value">{{ info.arriveDate }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鍏ュ簱绫诲瀷</div>
+ <div class="value">{{ info.inType == 0 ? '鏁存墭鐩�' : '浠剁儫' }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鎬昏繍杈撻噺</div>
+ <div class="value">{{ info.totalNum || info.ioQty }}涓囨敮</div>
+ </div>
+ <div class="item">
+ <div class="label">鍑嗚繍璇佺収鐗�</div>
+ <div v-if="info.transportImg" class="value">
+ <el-image style="width: 100px" :preview-src-list="[info.prefixUrl + info.transportImg]"
+ :src="info.prefixUrl + info.transportImg" alt="" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="side">
+ <div class="side_title">瀹℃壒娴佺▼</div>
+ <div class="list" v-if="info.approveDateVO != null && info.approveDateVO.approveList != null">
+ <div class="item" v-for="item, index in info.approveDateVO.approveList">
+ <div v-if="index != info.approveDateVO.approveList.length - 1" class="separate"></div>
+ <div class="info">
+ <img src="@/assets/icons/ic_tongguo.png" class="iconnew" v-if="item.status == 2" />
+ <img src="@/assets/icons/ic_dangqian.png" class="iconnew" v-if="item.status == 1" />
+ <img src="@/assets/icons/ic_jujue.png" class="iconnew" v-if="item.status == 3" />
+ <img src="@/assets/icons/ic_grey.png" class="iconnew" v-if="item.status == null || item.status == 0" />
+ </div>
+ <div class="avatar_wrap">
+ <img class="img" :src="item.faceImg
+ ? item.faceImg
+ : require('@/assets/avatar/man.png')
+ " />
+ </div>
+ <div class="content">
+ <div class="head">
+ <div class="event">{{ item.title }}</div>
+ <div class="time">{{ item.checkDate }}</div>
+ </div>
+ <div class="name_wrap">
+ <span>{{ item.memberName }}<span v-if="item.statusInfo" class="status">({{ item.statusInfo
+ }})</span></span>
+ </div>
+ <div v-if="item.checkInfo" class="remark">
+ {{ item.checkInfo }}
+ </div>
+ <div v-if="item.approveType == 0 || item.type == 1 || item.approveType == 1" class="carbon">
+ <div class="carbon_item" v-for="child in item.approveList" :key="child.id">
+ <img v-if="child.faceImg != null && child.faceImg != ''" :src="child.faceImg" class="avatar" alt="" />
+ <img v-if="child.faceImg == null || child.faceImg == ''" src="@/assets/avatar/man.png" class="avatar"
+ alt="" />
+ <div class="text">{{ child.memberName }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- -->
+ <template v-slot:footer>
+ <el-button @click="handleAppr(2)" type="primary" class="status-red" v-if="
+ info.approveDateVO != null &&
+ info.approveDateVO.canBeApproved != null &&
+ info.approveDateVO.canBeApproved == 1
+ ">鍚屾剰</el-button>
+ <el-button @click="handleAppr(3)" type="danger" v-if="
+ info.approveDateVO != null &&
+ info.approveDateVO.canBeApproved != null &&
+ info.approveDateVO.canBeApproved == 1
+ ">鎷掔粷</el-button>
+ <el-button @click="close">杩斿洖</el-button>
+ </template>
+ <!-- 鍚屾剰/鎷掔粷 -->
+ <el-dialog append-to-body :title="apprTitle" :visible.sync="isShowAppr" width="480px">
+ <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+ <el-form-item :prop="param.status == 3 ? 'checkInfo' : ''" :label="param.status == 2 ? '鍚屾剰璇存槑' : '鎷掔粷璇存槑'">
+ <el-input type="textarea" :placeholder="param.status == 2 ? '鍚屾剰璇存槑锛岄潪蹇呭～' : '鎷掔粷璇存槑蹇呭～'
+ " :rows="4" v-model="param.checkInfo" />
+ </el-form-item>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="isShowAppr = false">鍙栨秷</el-button>
+ <el-button :loading="subLoading" type="primary" @click="onSubAppr">纭畾</el-button>
+ </span>
+ </el-dialog>
+ </GlobalWindow>
+</template>
+
+<script>
+import GlobalWindow from '@/components/common/GlobalWindow'
+import {
+ getDriverJobDetail,
+ approveDo
+} from '@/api'
+export default {
+ components: { GlobalWindow },
+ data() {
+ return {
+ id: '',
+ type: '',
+
+ title: '鐗╂祦杞﹂绾﹁鎯�',
+ isShowModal: false,
+ info: {},
+ isShowAppr: false,
+ apprTitle: '鍚屾剰',
+ subLoading: false,
+ param: {},
+
+ isShowProblem: false,
+ rules: {
+ checkInfo: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }]
+ },
+ statusMap: {
+ 0: '寰呭鏍�',
+ 1: '澶勭悊涓�',
+ 2: '宸插悓鎰�',
+ 3: '宸叉嫆缁�',
+ 4: '宸插彇娑�',
+ 5: '浠栦汉鎴栫',
+ 6: '浠栦汉鎷掔粷'
+ },
+ cateList: {
+ 0: '璁垮鐢宠',
+ 1: '璁垮鎶ュ',
+ 2: '鐢ㄨ溅鐢宠',
+ 3: '闅愭偅闅忔墜鎷�',
+ 4: '鐗╂祦杞︾敵璇�'
+ }
+ }
+ },
+ methods: {
+ onSubAppr() {
+ this.$refs.ruleForm.validate((valid) => {
+ if (!valid) {
+ return
+ }
+ this.$dialog.actionConfirm('鎿嶄綔纭', this.param.status === 2 ? '鎮ㄧ‘璁ゅ悓鎰忚鐢宠鍚楋紵' : '鎮ㄧ‘璁ゆ嫆缁濊鐢宠鍚楋紵')
+ .then(() => {
+ this.subLoading = true
+ approveDo({
+ objId: this.id,
+ objType: 6,
+ status: this.param.status,
+ checkInfo: this.param.checkInfo
+ })
+ .then(res => {
+ this.subLoading = false
+ this.$tip.apiSuccess('澶勭悊鎴愬姛')
+ this.getDetail()
+ this.$emit('success')
+ this.$emit('close')
+ this.isShowAppr = false
+ })
+ .finally(() => {
+ this.subLoading = false
+ })
+ })
+ })
+ },
+ getDetail() {
+ const { id } = this
+ getDriverJobDetail(id).then(res => {
+ this.info = res
+ if (this.info.approveDateVO && this.info.approveDateVO.approveList.length > 0) {
+ this.info.approveDateVO.approveList.forEach(item => {
+ if (item.approveList && item.approveList.length == 1 && item.type !== 1) {
+ item.title = item.approveList[0].title
+ item.faceImg = item.approveList[0].faceImg
+ item.memberName = item.approveList[0].memberName
+ item.statusInfo = item.approveList[0].statusInfo
+ item.approveList = []
+ }
+ })
+ }
+ })
+ },
+ close() {
+ this.isShowModal = false
+ this.$emit('close')
+ },
+ handleAppr(val) {
+ this.$set(this.param, 'status', val)
+ this.apprTitle = val == 2 ? '鍚屾剰' : '鎷掔粷'
+ this.isShowAppr = true
+ },
+ confirm() {
+ console.log('--')
+ },
+ handleTransfer() {
+ this.isShowProblem = true
+ },
+ reject() { },
+ handleAvatarSuccess() { },
+ beforeAvatarUpload() { }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/style/variables.scss";
+
+.upload_box {
+ width: 84px;
+ height: 84px;
+ border-radius: 4px;
+ background-color: #f7f7f7;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #999999;
+ border: 1px solid #e4e4e4;
+
+ .icon {
+ font-size: 24px;
+ }
+
+ .text {
+ font-size: 12px;
+ }
+}
+
+.side_title {
+ font-weight: 600;
+ font-size: 18px;
+ color: #111111;
+ margin-bottom: 20px;
+ margin-left: 20px;
+ margin-top: 20px;
+}
+
+.modal_wrap {
+ display: flex;
+ height: 100%;
+
+ .modal_content {
+ flex: 1;
+ padding: 0px 30px;
+ border-radius: 8px;
+ overflow: hidden;
+ height: 100%;
+
+ .title {
+ font-weight: 600;
+ font-size: 18px;
+ color: #333333;
+ margin-bottom: 20px;
+ margin-top: 30px;
+ }
+
+ .info {
+ .list {
+ display: flex;
+ flex-wrap: wrap;
+
+ .item {
+ display: flex;
+ width: 40%;
+ margin-bottom: 20px;
+
+ &:nth-of-type(2n) {
+ width: 60%;
+ }
+
+ .label {
+ color: #888888;
+ width: 100px;
+ }
+
+ .value {
+ color: #111111;
+ }
+ }
+ }
+ }
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 30px;
+ margin: 0 -30px;
+ border-radius: 8px 8px 0 0;
+ position: relative;
+
+ .head_bg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ z-index: 9;
+ }
+
+ .h1 {
+ font-weight: 600;
+ font-size: 22px;
+ color: #111111;
+ margin-bottom: 8px;
+ }
+
+ .time {
+ font-size: 14px;
+ color: #999999;
+ }
+
+ .right {
+ height: 40px;
+ font-size: 16px;
+ color: #ffffff;
+ line-height: 40px;
+ padding: 0 20px;
+ background: #207ff7;
+ box-shadow: 4px 4px 0px 0px rgba(32, 127, 247, 0.16);
+ border-radius: 16px 0px 16px 0px;
+ position: relative;
+ z-index: 99;
+ }
+
+ .scs {
+ background-color: #00BA67;
+ }
+
+ .msg {
+ background-color: #ED4545;
+ }
+ }
+
+ .table_info {
+ .name_wrap {
+ display: flex;
+ align-items: center;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 12px;
+ }
+
+ .content {
+ .line {
+ display: flex;
+ }
+
+ .tag {
+ color: #b2cbf9;
+ border: 1px solid #b2cbf9;
+ padding: 0px 4px;
+ border-radius: 4px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+ }
+
+ .side {
+ height: 100%;
+ width: 420px;
+ background: #ffffff;
+ border-left: 20px solid #f7f7f7;
+
+ .list {
+ .item {
+ padding: 8px 0;
+ display: flex;
+ margin-bottom: 24px;
+ position: relative;
+
+ .separate {
+ position: absolute;
+ border-left: 2px dashed #cccccc;
+ left: 31px;
+ height: calc(100% - 2px);
+ top: 42px;
+ }
+
+ .info {
+ padding-top: 10px;
+ margin-left: 20px;
+ margin-right: 16px;
+
+ .iconnew {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ .avatar_wrap {
+ width: 40px;
+ height: 40px;
+ position: relative;
+ margin-right: 10px;
+
+ .img {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+
+ .status {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+
+ }
+
+ .content {
+ flex: 1;
+
+ .head {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 2px;
+
+ .event {
+ font-size: 15px;
+ }
+
+ .time {
+ font-size: 13px;
+ color: #999999;
+ }
+ }
+
+ .name_wrap {
+ font-size: 13px;
+ color: #777777;
+
+ .status {
+ color: $primaryColor;
+ }
+ }
+
+ .remark {
+ margin-top: 6px;
+ background-color: #f7f7f7;
+ padding: 7px 10px;
+ border-radius: 4px;
+ font-size: 13px;
+ color: #666666;
+ line-height: 18px;
+ }
+ }
+
+ .carbon {
+ display: flex;
+ width: 100%;
+ overflow-x: auto;
+ margin-top: 12px;
+
+ .carbon_item {
+ text-align: center;
+ flex-shrink: 0;
+ width: 60px;
+
+ img {
+ width: 36px;
+ height: 36px;
+ margin: 0 auto;
+ }
+
+ div {
+ font-size: 13px;
+ color: #777777;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3