西海岸：已办--增加单兵无人机设备历史记录
This commit is contained in:
parent
787ceeef3f
commit
9023a44715
|
|
@ -0,0 +1,171 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.guoyue
|
||||||
|
* @LastEditors: hisense.guoyue
|
||||||
|
* @LastEditTime: 2022-09-27 14:23:29
|
||||||
|
* @Description: 设备审批
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<el-card shadow="never" class="aui-card--fill" style="position:relative">
|
||||||
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="dataForm.deviceName" :placeholder="$t('process.name')" clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-select v-model="dataForm.state" placeholder="请选择" style="margin-right: 10px">
|
||||||
|
<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="getDataList()">{{
|
||||||
|
$t('query')
|
||||||
|
}}</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<div class="mod-activiti__process">
|
||||||
|
<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%">
|
||||||
|
<el-table-column prop="title" label="申请标题" header-align="center" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="name" label="申请人信息" header-align="center" align="center"></el-table-column>
|
||||||
|
<el-table-column label="设备名称" header-align="center" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span class="demand-text">{{
|
||||||
|
(scope.row && scope.row.tbDeviceDTO && scope.row.tbDeviceDTO.name)
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="state" label="审批状态" header-align="center" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{wrjStateObj[scope.row.state]}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="应用领域" header-align="center" align="center">
|
||||||
|
<template slot-scope="scope" v-if="scope.row.applicationArea">
|
||||||
|
<span class="area-text" v-for="(x,i) in JSON.parse(scope.row.applicationArea)"
|
||||||
|
:key="i">{{x}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="需求依据" header-align="center" align="center" width="200">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tooltip placement="top-start">
|
||||||
|
<div class="tooltip-box" slot="content">{{(scope.row && scope.row.demand)}}</div>
|
||||||
|
<span class="demand-text">{{
|
||||||
|
(scope.row && scope.row.demand)
|
||||||
|
}}</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
|
||||||
|
@current-change="pageCurrentChangeHandle">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="审批" :visible.sync="centerDialogVisible" width="30%" center>
|
||||||
|
<el-form ref="form" :model="form" label-width="80px">
|
||||||
|
<el-form-item label="审批意见">
|
||||||
|
<el-input type="textarea" v-model="form.auditViem" placeholder="请输入审批意见"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="through(3)">不通过</el-button>
|
||||||
|
<el-button type="primary" @click="through(2)">通过</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import bus from '@/views/bus.js'
|
||||||
|
import mixinViewModule from '@/mixins/view-module'
|
||||||
|
import processModule from '@/mixins/process-module'
|
||||||
|
import { addDynamicRoute } from '@/router'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [mixinViewModule, processModule],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
mixinViewModuleOptions: {
|
||||||
|
getDataListURL: '/deviceApply/myDonePage',
|
||||||
|
getDataListIsPage: true,
|
||||||
|
activatedIsNeed: true,
|
||||||
|
deleteIsBatch: true,
|
||||||
|
deleteIsBatchKey: 'deploymentId'
|
||||||
|
},
|
||||||
|
centerDialogVisible: false,
|
||||||
|
form: {
|
||||||
|
auditViem: ''
|
||||||
|
},
|
||||||
|
dataForm: {
|
||||||
|
state: '',
|
||||||
|
deviceName: null
|
||||||
|
},
|
||||||
|
wrjStateObj: {
|
||||||
|
0: '待审批',
|
||||||
|
1: '未申请',
|
||||||
|
2: '通过',
|
||||||
|
3: '未通过'
|
||||||
|
},
|
||||||
|
// 详情
|
||||||
|
detailInfo: {},
|
||||||
|
// 设备详情
|
||||||
|
deviceDetailInfo: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
stateOptions() {
|
||||||
|
let arr = []
|
||||||
|
Object.keys(this.wrjStateObj).map(v => {
|
||||||
|
arr.push({
|
||||||
|
label: this.wrjStateObj[v],
|
||||||
|
value: v,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return arr
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showDetail(row) {
|
||||||
|
this.forwardDetail(row)
|
||||||
|
},
|
||||||
|
// 查看流程图
|
||||||
|
forwardDetail(data) {
|
||||||
|
console.log('data------------>', data);
|
||||||
|
console.log('this.$route------------>', this.$route);
|
||||||
|
var routeParams = {
|
||||||
|
routeName: `${this.$route.name}__detail_${data.id}`,
|
||||||
|
menuId: `${this.$route.meta.menuId}`,
|
||||||
|
title: `${this.$route.meta.title} - 详情`,
|
||||||
|
path: 'hasToDoTasks/deviceApprovalDetail',
|
||||||
|
params: {
|
||||||
|
params: data,
|
||||||
|
id: data.id,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('routeParams------------>', routeParams);
|
||||||
|
addDynamicRoute(routeParams, this.$router)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.demand-text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-text {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-box {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,319 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.guoyue
|
||||||
|
* @Date: 2022-06-29 15:59:51
|
||||||
|
* @LastEditors: hisense.guoyue
|
||||||
|
* @LastEditTime: 2022-09-27 18:08:00
|
||||||
|
* @Description: 设备审批详情
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- 设备审批详情 -->
|
||||||
|
<template>
|
||||||
|
<el-card shadow="never" class="aui-card--fill">
|
||||||
|
<!-- 申请人详情 -->
|
||||||
|
<div>
|
||||||
|
<h3>申请人信息</h3>
|
||||||
|
<div class="big-BOX">
|
||||||
|
<p>
|
||||||
|
<span class="text">申请人：<span> {{ detailInfo.name || '--' }}</span></span>
|
||||||
|
<span class="text">电话：<span>{{ detailInfo.phone || '--' }}</span></span>
|
||||||
|
<span class="text">部门：<span>{{ detailInfo.dept || '--' }}</span></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="text">
|
||||||
|
能力申请标题：<span>
|
||||||
|
{{ detailInfo.title || '--' }}</span></span>
|
||||||
|
<span class="text" v-if="detailInfo.applicationSystem">应用系统：<span>{{
|
||||||
|
detailInfo.applicationSystem || '--'
|
||||||
|
}}</span></span>
|
||||||
|
<span class="text"></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span v-if="detailInfo.applicationArea">
|
||||||
|
应用领域：
|
||||||
|
<span class="area-item" v-for="(area, i) in JSON.parse(detailInfo.applicationArea)" :key="i">{{ area || '--'
|
||||||
|
}}</span>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
需求依据：<span>
|
||||||
|
{{ detailInfo.demand || '--' }}</span></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 申请能力 -->
|
||||||
|
<div class="AbilityApply">
|
||||||
|
<h3>申请能力</h3>
|
||||||
|
</div>
|
||||||
|
<el-card shadow="never" class="aui-card--fill">
|
||||||
|
<h4>{{ $t('process.circulation') }}</h4>
|
||||||
|
<el-table :data="dataList" border style="width: 100%;">
|
||||||
|
<!-- 任务名称 -->
|
||||||
|
<el-table-column prop="activityName" :label="$t('process.taskName')" header-align="center" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<!-- 处理人 -->
|
||||||
|
<el-table-column prop="assigneeName" :label="$t('process.assignee')" header-align="center" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<!-- 流程开始时间 -->
|
||||||
|
<el-table-column prop="startTime" :label="$t('task.startTime')" header-align="center" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<!-- 流程结束时间 -->
|
||||||
|
<el-table-column prop="endTime" :label="$t('task.endTime')" header-align="center" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<!-- 审核意见 -->
|
||||||
|
<el-table-column prop="comment" :label="$t('process.comment')" header-align="center" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<!-- 任务时长（秒） -->
|
||||||
|
<el-table-column prop="durationInSeconds" :label="$t('task.durationInSeconds')" header-align="center"
|
||||||
|
align="center" width="180"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as moment from 'moment';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 详情信息
|
||||||
|
detailInfo: {},
|
||||||
|
dataList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.detailInfo = this.$route.params.params || {};
|
||||||
|
console.log('this.detailInfo------------>', this.detailInfo);
|
||||||
|
// 表格数据
|
||||||
|
let durationInSeconds = ''
|
||||||
|
if (this.detailInfo.auditTime && this.detailInfo.auditTime) {
|
||||||
|
durationInSeconds = moment(this.detailInfo.auditTime).diff(moment(this.detailInfo.createDate), 'seconds')
|
||||||
|
}
|
||||||
|
let _obj = {
|
||||||
|
activityName: this.detailInfo.title || '',
|
||||||
|
assigneeName: this.detailInfo.auditorName || '',
|
||||||
|
startTime: this.detailInfo.createDate || '',
|
||||||
|
endTime: this.detailInfo.auditTime,
|
||||||
|
comment: this.detailInfo.auditViem,
|
||||||
|
durationInSeconds: durationInSeconds,
|
||||||
|
}
|
||||||
|
this.dataList.push(_obj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::v-deep .big-BOX {
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #212121;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 8px;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastP {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding: 0 12px;
|
||||||
|
height: 32px;
|
||||||
|
background: rgba(232, 234, 239, 1);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: unset;
|
||||||
|
border: 0;
|
||||||
|
color: #0558e1;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .AbilityApply {
|
||||||
|
margin-top: 32px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #212121;
|
||||||
|
border-bottom: 1px solid #dddee1;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 0px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
padding: 30px 0;
|
||||||
|
border-bottom: 1px solid #dddee1;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin-left: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-left: 8px;
|
||||||
|
background: rgba(0, 184, 230, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #0558e1;
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title:before {
|
||||||
|
content: "";
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #0558e1;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .agreeOr>div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .agreeOr>div:last-of-type {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blueAll {
|
||||||
|
::v-deep .el-radio-button__inner {
|
||||||
|
width: 80px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #0558e1;
|
||||||
|
border: 1px solid #0558e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||||||
|
box-shadow: unset !important;
|
||||||
|
background: #0558e1;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputBule {
|
||||||
|
width: 55px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #0558e1;
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid #0558e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.redAll {
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
::v-deep .el-radio-button__inner {
|
||||||
|
width: 80px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #e83a48;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #e83a48;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||||||
|
box-shadow: unset !important;
|
||||||
|
color: #ffffff;
|
||||||
|
background: #e83a48;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blueInput {
|
||||||
|
width: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-item {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue