¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | :visible.sync="visible" |
| | | @confirm="confirm" |
| | | @close="reject" |
| | | > |
| | | <div class="modal_wrap"> |
| | | <div class="modal_content"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="h1">å
¬å¡è½¦ç³è¯·</div> |
| | | <div class="time">æäº¤æ¶é´ï¼{{model.createDate}}</div> |
| | | </div> |
| | | <span class="right" v-if="model.status === 0">ç³è¯·ä¸</span> |
| | | <span class="right" v-if="model.status === 1">å¾
审æ¹</span> |
| | | <span class="right" style="background:#53b76f " v-if="model.status === 2">审æ¹éè¿</span> |
| | | <span class="right" style="background:#dc362e " v-if="model.status === 3">审æ¹ä¸éè¿</span> |
| | | <span class="right" style="background:#dc362e " v-if="model.status === 4">已忶</span> |
| | | </div> |
| | | <div class="info"> |
| | | <div class="title">å
¬å¡è½¦ç³è¯·ä¿¡æ¯</div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="label">ç³è¯·äºº</div> |
| | | <div class="value">{{model.memberName || ''}} {{model.memberPhone || ''}} ({{model.companyName || ''}})</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">ç³è¯·è½¦è¾</div> |
| | | <div class="value">{{model.carCode || ''}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">叿ºä¿¡æ¯</div> |
| | | <div class="value" v-if="model.driverId !=null">{{model.driverName || ''}} {{model.driverPhone || ''}}</div> |
| | | <div class="value" v-if="model.driverId ==null">æªææ´¾</div> |
| | | </div> |
| | | <div class="item" > |
| | | <div class="label">ç¨è½¦äºç±</div> |
| | | <div class="value">{{model.content}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">ä¹è½¦äººå</div> |
| | | <div class="value">{{model.memberNames || ''}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">ç®çå°ç±»å«</div> |
| | | <div class="value status-green" v-if="model.type === 0">ãå¸å
ç¨è½¦ã</div> |
| | | <spdivan class="value status-red" v-if="model.type === 1">ãå¸å
ç¨è½¦ã</spdivan> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">ç®çå°</div> |
| | | <div class="value">{{model.addr || ''}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">é¢è®¡åºåæ¶é´</div> |
| | | <div class="value">{{model.planUseDate || ''}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">ç¨è½¦æ¶æ®µ</div> |
| | | <div class="value">{{model.startTime || ''}}-{{model.endTime || ''}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="side"> |
| | | <div class="side_title">å®¡æ¹æµç¨</div> |
| | | <div class="list"> |
| | | <div class="item" v-for="(item,index) in logList" :key="item.id"> |
| | | <div class="separate" v-if="index < logList.length-1"></div> |
| | | <div class="info"> |
| | | <i class="el-icon-success icon" v-if="(model.status ==1) || index < logList.length-1"></i> |
| | | <i class="el-icon-question icon1" v-if="(model.status==0) && index == logList.length-1"></i> |
| | | <i class="el-icon-error icon2" v-if="(model.status==2) && index == logList.length-1"></i> |
| | | <img v-if="item.avatar!=null && item.avatar !=''" :src="item.avatar" class="avatar" alt="" /> |
| | | <img v-if="item.avatar ==null ||item.avatar ==''" src="@/assets/avatar/man.png" class="avatar" alt="" /> |
| | | <div class="content"> |
| | | <div class="line"> |
| | | <div class="name">{{ item.title}}</div> |
| | | <div class="time">{{ item.createDate }}</div> |
| | | </div> |
| | | <div class="line"> |
| | | <div class="company"> |
| | | {{ item.createUserName }} {{ item.companyName }} |
| | | <div style="display: inline"> |
| | | ï¼<span class="status-green">{{stausInfo}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="line"> |
| | | <div class="remark"> |
| | | {{ item.checkInfo ||'' }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- --> |
| | | <template v-slot:footer> |
| | | <el-button @click="isShowProblem = true" type="primary" v-if="model.approveDateVO!=null&& model.approveDateVO.canBeApproved!=null &&model.approveDateVO.canBeApproved ==1 " class="status-red">åæ</el-button> |
| | | <el-button @click="isBackProblem=true" type="danger" v-if="model.approveDateVO!=null&& model.approveDateVO.canBeApproved!=null &&model.approveDateVO.canBeApproved ==1 " >æç»</el-button> |
| | | <el-button @click="visible=false">è¿å</el-button> |
| | | </template> |
| | | <el-dialog |
| | | append-to-body |
| | | title="转交" |
| | | class="dialogCl" |
| | | :visible.sync="isShowTransfer" |
| | | width="480px" |
| | | > |
| | | <el-form :model="dealForm" ref="dealForm" > |
| | | <el-form-item label="æ´¾è½¦å¸æº" prop="driverId" required v-if="model.approveDateVO!=null && model.approveDateVO.drvierParam ===1"> |
| | | <el-select v-model="transForm.driverId" style="width: 300px" filterable clearable placeholder="è¯·éæ©æ´¾é£å¸æº"> |
| | | <el-option |
| | | v-for="item in memberList" |
| | | :key="item.id" |
| | | :label="item.name+'-'+item.phone" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="åæè¯´æ"> |
| | | <el-input |
| | | type="textarea" |
| | | placeholder="请填å说æ" |
| | | :rows="4" |
| | | v-model="backForm.checkInfo" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="isShowProblem = false">åæ¶</el-button> |
| | | <el-button type="primary" :loading="transfering" @click="dealDo">ç¡®å®</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <el-dialog |
| | | append-to-body |
| | | title="æç»ç³è¯·" |
| | | class="dialogCl" |
| | | :visible.sync="isBackProblem" |
| | | width="600px" |
| | | > |
| | | <el-form :model="backForm" ref="backForm" label-width="100px"> |
| | | <el-form-item label="æç»è¯´æ"> |
| | | <el-input |
| | | type="textarea" |
| | | placeholder="请填å说æ" |
| | | :rows="4" |
| | | v-model="backForm.checkInfo" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="isBackProblem= false">åæ¶</el-button> |
| | | <el-button type="primary" :loading="transfering" @click="backDo">ç¡®å®</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { driveList } from '@/api/business/member' |
| | | import { mapState } from 'vuex' |
| | | export default { |
| | | name:'OperaCarUseBookWindow.vue', |
| | | components: { GlobalWindow }, |
| | | extends: BaseOpera, |
| | | data () { |
| | | return { |
| | | title: 'å
¬å¡è½¦ç³è¯·', |
| | | visible: false, |
| | | dataId: null, |
| | | model: { }, |
| | | dealing: false, |
| | | isShowProblem: false, |
| | | isBackProblem: false, |
| | | memberList: [], |
| | | logList:[], |
| | | copyList:[], |
| | | dealForm: { |
| | | driveId: null, |
| | | checkInfo: null |
| | | }, |
| | | backForm: { |
| | | checkInfo: null |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState(['userInfo']) |
| | | }, |
| | | created () { |
| | | this.config({ |
| | | api: '/business/carUserBook', |
| | | 'field.id': 'id' |
| | | }) |
| | | }, |
| | | methods: { |
| | | dealDo () { |
| | | this.$refs.dealForm.validate((valid) => { |
| | | if (!valid) { |
| | | return |
| | | } |
| | | this.$dialog.actionConfirm('æä½ç¡®è®¤', 'æ¨ç¡®è®¤æäº¤è¯¥éæ£å¤çæ
åµåï¼') |
| | | .then(() => { |
| | | this.dealing = true |
| | | this.api.dealHiddenDanger({ |
| | | id: this.dataId, |
| | | status: 1, |
| | | driverId: this.dealForm.driveId, |
| | | checkInfo: this.dealForm.checkInfo |
| | | }) |
| | | .then(res => { |
| | | this.$tip.apiSuccess('å¤çæå') |
| | | this.getDetail() |
| | | this.isShowProblem = false |
| | | }) |
| | | .finally(() => { |
| | | this.dealing = false |
| | | }) |
| | | }) |
| | | }) |
| | | }, |
| | | backDo () { |
| | | this.$refs.backForm.validate((valid) => { |
| | | if (!valid) { |
| | | return |
| | | } |
| | | this.$dialog.actionConfirm('æä½ç¡®è®¤', 'æ¨ç¡®è®¤éåè¯¥éæ£å¤çæ
åµåï¼') |
| | | .then(() => { |
| | | this.dealing = true |
| | | this.api.dealHiddenDanger({ |
| | | id: this.dataId, |
| | | status: 2, |
| | | checkInfo: this.backForm.checkInfo |
| | | }) |
| | | .then(res => { |
| | | this.$tip.apiSuccess('éåæå') |
| | | this.getDetail() |
| | | this.isBackProblem = false |
| | | }) |
| | | .catch(e => { |
| | | }) |
| | | .finally(() => { |
| | | this.dealing = false |
| | | }) |
| | | }) |
| | | }) |
| | | }, |
| | | open (title, target) { |
| | | this.title = title |
| | | this.visible = true |
| | | this.model = {} |
| | | this.dataId = target.id |
| | | this.$nextTick(() => { |
| | | this.memberList = [] |
| | | this.logList = [] |
| | | this.copyList = [] |
| | | this.dealForm = { |
| | | driveId: null, |
| | | checkInfo: null |
| | | } |
| | | this.backForm = { |
| | | checkInfo: null |
| | | } |
| | | this.getDetail() |
| | | }) |
| | | }, |
| | | getDetail () { |
| | | this.api.detail(this.dataId) |
| | | .then(res => { |
| | | this.model = res |
| | | this.dealForm.driveId = res.driveId |
| | | if(res.approveDateVO){ |
| | | if(res.approveDateVO.approveList){ |
| | | this.logList = res.approveDateVO.approveList |
| | | } |
| | | if(res.approveDateVO.copyList){ |
| | | this.copyList = res.approveDateVO.copyList |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | handleTransfer () { |
| | | this.isShowTransfer = true |
| | | this.loadMemberList() |
| | | }, |
| | | loadMemberList () { |
| | | driveList({}).then(res => { |
| | | this.memberList = res |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .side_title{ |
| | | font-weight: 600; |
| | | font-size: 18px; |
| | | color: #111111; |
| | | margin-bottom: 20px; |
| | | margin-left: 20px; |
| | | margin-top: 20px; |
| | | } |
| | | .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; |
| | | } |
| | | } |
| | | |
| | | .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: 68px; |
| | | } |
| | | |
| | | .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; |
| | | background: linear-gradient(to right, #f2f6fe, #cadffa); |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | .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; |
| | | position: relative; |
| | | .separate { |
| | | position: absolute; |
| | | border-left: 2px dashed #cccccc; |
| | | left: 31px; |
| | | height: calc(100% - 24px); |
| | | top: 46px; |
| | | } |
| | | .info { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-left: 20px; |
| | | .icon { |
| | | position: relative; |
| | | z-index: 11; |
| | | color: #53b76f; |
| | | font-size: 24px; |
| | | } |
| | | .icon1 { |
| | | position: relative; |
| | | z-index: 11; |
| | | color: deepskyblue; |
| | | font-size: 24px; |
| | | } |
| | | .icon2 { |
| | | position: relative; |
| | | z-index: 11; |
| | | color: #dc362e; |
| | | font-size: 24px; |
| | | } |
| | | .avatar { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 50%; |
| | | margin: 0 12px 0 16px; |
| | | border: 1px solid; |
| | | } |
| | | .content { |
| | | flex: 1; |
| | | .line { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-content: center; |
| | | margin-bottom: 6px; |
| | | .name { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | color: #111111; |
| | | } |
| | | .time { |
| | | color: #888888; |
| | | } |
| | | .company { |
| | | font-size: 13px; |
| | | color: #888888; |
| | | .status { |
| | | color: #00ba67; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .remark { |
| | | background: #f7f7f7; |
| | | border-radius: 4px; |
| | | padding: 13px 15px; |
| | | color: #666666; |
| | | margin-left: 120px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |