guoyuepeng
/
qa-regulatory-gwj-vue
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[新增功能](hyx_门口门禁): 

- 新增门口门禁管理相关页面
hyx_门口门禁
huangyuxuan 2025-01-07 09:24:51 +08:00
parent 9eec9df2e7
commit 6e77573ac2
4 changed files with 1280 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/views/longtermvehicle/jgCarMessage/components/List.vue Normal file
View File

@ -0,0 +1,117 @@
<template>
<div class="app-container">
<el-form label-width="90px">
<el-row>
<el-col :span="4">
<el-form-item label="分公司名称">
<el-input v-model="searchForm.CORP_NAME" placeholder="分公司名称"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="10px">
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
v-loading="listLoading"
ref="multipleTable"
:data="varList"
:row-key="getRowKey"
:header-cell-style="{
'font-weight': 'bold',
'color': '#000'
}"
tooltip-effect="dark"
border
fit
highlight-current-row
>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="NAME" label="部门名称" />
<el-table-column prop="DEPT_TYPE_NAME" label="部门类型" />
<el-table-column prop="USER_COUNT" label="部门人数" />
<el-table-column label="操作" align="left" width="110">
<template slot-scope="{row}">
<el-button type="success" icon="el-icon-view" size="mini" @click="handleEdit(row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-btn-group">
<div>
</div>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</div>
</template>
<script>
import SelectTree from '@/components/SelectTree'
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
export default {
components: {Pagination, SelectTree },
directives: { waves },
data() {
return {
listLoading: true,
listQuery: {
page: 1,
limit: 20
},
searchForm: {
CORP_NAME: ''
},
total: 0,
varList: []
}
},
created() {
this.getList()
},
methods: {
getRowKey(row) {
return row.CORPINFO_ID
},
// 搜索
getQuery() {
this.getList()
},
// 获取列表
getList() {
this.listLoading = true
requestFN(
'/mkmjManagement/getJgDepartmentList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
...this.searchForm
}
).then((data) => {
this.listLoading = false
this.varList = data.deptList
this.total = data.page.totalResult
}).catch((e) => {
this.listLoading = false
})
},
// 查看
handleEdit(row) {
console.log('--------------------------')
this.$parent.activeName = 'CarView'
this.$parent.CORPINFO_ID = row.CORPINFO_ID
},
goKeyReset() {
this.searchForm = {
CORP_NAME: ''
}
this.getList()
}
}
}
</script>

922
src/views/longtermvehicle/jgCarMessage/components/car_view.vue Normal file
View File

@ -0,0 +1,922 @@
<template>
<div class="icons-container">
<el-container>
<el-aside width="200px" style="background-color:#fff">
<div class="filter-btn-group">
<el-tree
v-loading="treeLoading"
ref="tree"
:data="treeData"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
@node-click="handleNodeClick"/>
</div>
</el-aside>
<el-main>
<el-form label-width="60px">
<el-row>
<el-col :span="2">
<el-form-item label-width="0px">
<el-button v-show="DEPARTMENT_ID != '0'" icon="el-icon-arrow-left" @click="goReturn()">返回</el-button>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="车牌号">
<el-input v-model="searchForm.LICENCE_NO" placeholder="请输入车牌号..." />
</el-form-item>
</el-col>
<el-col :span="4" class="m-l-10">
<el-form-item label="车辆类型" prop="VEHICLE_TYPE" label-width="100px">
<SelectTree
ref="selectTree_Search1"
:clearable="false"
:options="vehicleTypeList"
:props="vehicleDefaultProps"
v-model="searchForm.VEHICLE_TYPE"
placeholder="请选择车辆类型"/>
</el-form-item>
</el-col>
<el-col :span="4" class="m-l-10">
<el-form-item label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID" label-width="100px">
<SelectTree
ref="selectTree_Search2"
:clearable="false"
:options="treeData"
:props="defaultProps"
v-model="searchForm.VEHICLE_DEPARTMENT_ID"
placeholder="请选择车辆所属部门"/>
</el-form-item>
</el-col>
<el-col :span="4" class="m-l-10">
<el-form-item label="车辆责任人" label-width="100px">
<el-input v-model="searchForm.USER_NAME" placeholder="请输入车辆责任人..." />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="10px">
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
<el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
v-loading="listLoading"
ref="vehicleMessageTable"
:data="varList"
:row-key="getRowKey"
:header-cell-style="{
'font-weight': 'bold',
'color': '#000'
}"
tooltip-effect="dark"
border
fit
highlight-current-row
>
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="CORPINFO_NAME" label="分公司名称" align="center" />
<el-table-column prop="LICENCE_NO" label="车牌号" align="center" />
<el-table-column label="车牌类型" align="center">
<template slot-scope="{row}">
{{ translateLicenceType(row.LICENCE_TYPE) }}
</template>
</el-table-column>
<el-table-column label="车辆类型" align="center">
<template slot-scope="{row}">
{{ translateVehicleType(row.VEHICLE_TYPE) }}
</template>
</el-table-column>
<el-table-column prop="DEPARTMENT_NAME" label="车辆所属部门" align="center" />
<el-table-column prop="USER_NAME" label="车辆责任人" align="center"/>
<el-table-column label="操作" align="center" width="480">
<template slot-scope="{row}">
<el-button type="warning" icon="el-icon-more" size="mini" @click="vehicleInOutRecordBtn(row.LICENCE_NO)">车辆进出记录</el-button>
<el-button icon="el-icon-view" size="mini" @click="showDetail(row.VEHICLE_ID)">查看</el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" @click="openEditDialogEditBtn(row.VEHICLE_ID)">修改</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSingleDataDeleteBtn(row.VEHICLE_ID, row.USER_ID, row.EMPLOYEE_VEHICLE_USER_ID)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-btn-group">
<div>
<el-button type="primary" icon="el-icon-plus" @click="openAddDialogAddBtn">新增</el-button>
</div>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
</div>
<!-- 添加车辆信息 -->
<el-dialog :visible.sync="addDialogVisible" title="添加车辆信息" width="600px">
<el-form v-if="addDialogVisible" ref="addForm" :model="addForm" label-width="170px" style="padding:0 20px; width: 500px;">
<el-form-item :rules="[{required: true}]" label="车牌号">
<el-input v-model="addForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNoAdd()"/>
</el-form-item>
<!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框-->
<el-form-item :rules="[{required: true}]" label="车牌类型" prop="LICENCE_TYPE">
<SelectTree
ref="selectTree_add2"
:clearable="false"
:options="licenceTypeList"
:props="vehicleDefaultProps"
v-model="addForm.LICENCE_TYPE"
placeholder="请选择车牌类型"
style="width: 300px"/>
</el-form-item>
<!-- 货车、轿车、大巴客车 下拉框-->
<el-form-item :rules="[{required: true}]" label="车辆类型" prop="VEHICLE_TYPE">
<SelectTree
ref="selectTree_add3"
:clearable="false"
:options="vehicleTypeList"
:props="vehicleDefaultProps"
v-model="addForm.VEHICLE_TYPE"
placeholder="请选择车辆类型"
style="width: 300px"/>
</el-form-item>
<!-- 员工车辆、单位车辆、外部车辆 下拉框 -->
<el-form-item :rules="[{required: true}]" label="车辆所属类型" prop="VEHICLE_BELONG_TYPE">
<SelectTree
ref="selectTree_add4"
:clearable="false"
:options="vehicleBelongTypeList"
:props="vehicleDefaultProps"
v-model="addForm.VEHICLE_BELONG_TYPE"
placeholder="请选择车辆所属类型"
style="width: 300px"/>
</el-form-item>
<!-- 车辆所属部门下拉框 -->
<el-form-item :rules="[{required: true}]" label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
<SelectTree
ref="selectTree_add1"
:clearable="false"
:options="treeData"
:props="defaultProps"
v-model="addForm.VEHICLE_DEPARTMENT_ID"
placeholder="请选择车辆所属部门"
style="width: 300px"
@change="addUserList"/>
</el-form-item>
<!-- 车辆责任人下拉框 -->
<el-form-item :rules="[{required: true}]" label="车辆责任人" prop="USER_ID">
<el-select :value="addForm.USER_ID" clearable placeholder="请选择" @visible-change="$forceUpdate()" @change="userIdAddChange">
<el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogCancelBtn">取 消</el-button>
<el-button type="primary" @click="addDialogConfirmBtn">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="editDialogVisible" title="修改" width="600px">
<el-form ref="editForm" :model="editForm" label-width="170px" style="width: 500px;">
<el-form-item :rules="[{required: true}]" label="车牌号">
<el-input v-model="editForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNoUpdate()"/>
</el-form-item>
<el-form-item label="车牌类型" prop="LICENCE_TYPE">
<el-select :value="editForm.LICENCE_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
<el-option v-for="item in licenceTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
</el-select>
</el-form-item>
<el-form-item label="车辆类型" prop="VEHICLE_TYPE">
<el-select :value="editForm.VEHICLE_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
<el-option v-for="item in vehicleTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
</el-select>
</el-form-item>
<el-form-item label="车辆所属类型" prop="VEHICLE_BELONG_TYPE">
<el-select :value="editForm.VEHICLE_BELONG_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
<el-option v-for="item in vehicleBelongTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
</el-select>
</el-form-item>
<!-- 车辆所属部门下拉框 -->
<el-form-item label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
<SelectTree
ref="selectTree_edit"
:clearable="true"
:options="treeData"
:props="defaultProps"
v-model="editForm.VEHICLE_DEPARTMENT_ID"
placeholder="请选择车辆所属部门"
style="width: 300px"
@change="updateUserList"/>
</el-form-item>
<!-- 车辆责任人下拉框 -->
<el-form-item label="车辆责任人" prop="USER_ID">
<el-select :value="editForm.USER_ID" clearable placeholder="请选择" @visible-change="$forceUpdate()" @change="userIdUpdateChange">
<el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogCancelBtn">取 消</el-button>
<el-button type="primary" @click="editDialogConfirmBtn">提 交</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="detailDialogVisible" title="详情" width="600px">
<el-form ref="form" :model="detailForm" label-width="170px" style="width: 500px;">
<el-form-item label="车牌号">
<el-input v-model="detailForm.LICENCE_NO" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
</el-form-item>
<el-form-item label="车牌类型">
<el-input v-model="detailForm.LICENCE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
</el-form-item>
<el-form-item label="车辆类型">
<el-input v-model="detailForm.VEHICLE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
</el-form-item>
<el-form-item label="车辆所属类型">
<el-input v-model="detailForm.VEHICLE_BELONG_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
</el-form-item>
<el-form-item label="车辆所属部门">
<el-input v-model="detailForm.VEHICLE_DEPARTMENT_ID" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
</el-form-item>
<el-form-item label="车辆责任人">
<el-input v-model="detailForm.USER_ID" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="detailDialogReturnBtn">返回</el-button>
</div>
</el-dialog>
</el-main>
</el-container>
<div class="heightt"/>
</div>
</template>
<script>
import SelectTree from '@/components/SelectTree'
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
export default {
components: { Pagination, SelectTree },
directives: { waves },
data() {
return {
config: config,
treeLoading: false,
listLoading: true,
add: true,
del: true,
edit: true,
readonly: true,
listQuery: {
page: 1,
limit: 20
},
total: 0,
defaultProps: {
value: 'id',
children: 'nodes',
label: 'name'
},
treeData: [],
// 从此处开始写自己的属性
loginUserCorpInfoId: '', // 从接口获取用户所属企业
CORPINFO_ID: '', // 企业id
DEPARTMENT_ID: '', // 部门ID
KEYWORDS: '',
loginUserId: '', // 登录人ID
// 车牌类型列表
licenceTypeList: [
// { ID: '', NAME: '请选择' },
{ ID: '0', NAME: '白牌' },
{ ID: '1', NAME: '蓝牌' },
{ ID: '2', NAME: '黄牌' },
{ ID: '3', NAME: '绿牌' },
{ ID: '4', NAME: '黑牌' }
],
// 车辆类型列表
vehicleTypeList: [
// { ID: '', NAME: '请选择' },
{ ID: '0', NAME: '货车' },
{ ID: '1', NAME: '轿车' },
{ ID: '2', NAME: '大巴客车' }
],
// 车辆所属类型列表
vehicleBelongTypeList: [
// { ID: '', NAME: '请选择' },
{ ID: '0', NAME: '员工车辆' },
{ ID: '1', NAME: '单位车辆' }
// { ID: '2', NAME: '外部车辆' }
],
// 车辆下拉树默认属性
vehicleDefaultProps: {
value: 'ID',
label: 'NAME',
children: 'nodes'
},
departmentTreeData: [],
// inspectionTypeList: [], //字典列表
// 列表展示的数据
varList: [],
// 查询表单的数据
searchForm: {
DEPARTMENT_ID: '',
VEHICLE_ID: '', // 车辆ID(基础属性)
LICENCE_NO: '', // 车牌号
VEHICLE_TYPE: '', // 车辆类型
VEHICLE_DEPARTMENT_ID: '' // 车辆所属部门ID
},
// 添加表单的数据
addForm: {
LICENCE_NO: '', // 车牌号
VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门id
VEHICLE_DEPARTMENT_NAME: '', // 车辆所属部门名称
USER_ID: '', // 车辆责任人
LICENCE_TYPE: '', // 车牌类型
VEHICLE_TYPE: '', // 车辆类型
VEHICLE_BELONG_TYPE: '', // 车辆所属类型
EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人id
EMPLOYEE_VEHICLE_USER_NAME: '', // 车辆所属人姓名
DEPARTMENT_NAME: '', // 部门名称
DEPARTMENT_ID: '',
USER_NAME: '' // 车辆责任人姓名
},
// 修改表单的数据
editForm: {
VEHICLE_ID: '', // 车辆id(基础属性)
LICENCE_NO: '', // 车牌号
OLD_LICENCE_NO: '', // 修改前的车牌号
USER_ID: '', // 车辆责任人
USER_NAME: '', // 车辆责任人姓名
LICENCE_TYPE: '', // 车牌类型
VEHICLE_TYPE: '', // 车辆类型
VEHICLE_BELONG_TYPE: '', // 车辆所属类型
DEPARTMENT_NAME: '', // 车辆所属部门名称
EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
EMPLOYEE_VEHICLE_USER_NAME: '', // 车辆所属人姓名
VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
VEHICLE_DEPARTMENT_NAME: '' // 车辆所属部门名称
},
// 详情表单的数据
detailForm: {
LICENCE_NO: '', // 车牌号
VEHICLE_BELONG_TYPE: '', // 车辆所属类型
VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
USER_ID: '', // 车辆责任人id
EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
LICENCE_TYPE: null, // 车牌类型
VEHICLE_TYPE: null // 车辆类型
},
addDialogVisible: false, // 添加弹窗的展示与不展示
editDialogVisible: false, // 编辑弹窗的展示与不展示
detailDialogVisible: false, // 详情弹窗的展示与不展示
userList: [], // 部门用户列表
selectTree_edit: []
}
},
created() {
// 调用自己的方法
this.getLoginUserInfo() // 获取当前登陆用户的信息
this.CORPINFO_ID = this.$parent.CORPINFO_ID
this.updateBranchName(this.CORPINFO_ID)
this.getPageList() // 获取分页列表要展示的数据
},
methods: {
// 之前旧的
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
handleNodeClick(node, data, value) {
this.searchForm.VEHICLE_DEPARTMENT_ID = node.id
this.getPageList(node.id)
},
updateBranchName(ID) {
requestFN(
'/department/listTreeCorpInfo',
// '/department/listTree',
{
CORPINFO_ID: ID
}
).then((data) => {
this.treeData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
})
},
goReturn() {
this.$parent.activeName = 'List'
},
// 从此处开始写自己的事件
getRowKey(row) {
return row.VEHICLE_ID
},
translateLicenceType(id) {
for (var i = 0; i < this.licenceTypeList.length; i++) {
if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME
}
},
translateVehicleType(id) {
for (var i = 0; i < this.vehicleTypeList.length; i++) {
if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME
}
},
translateVehicleBelongType(id) {
for (var i = 0; i < this.vehicleBelongTypeList.length; i++) {
if (this.vehicleBelongTypeList[i].ID == id) return this.vehicleBelongTypeList[i].NAME
}
},
getLoginUserInfo() { // 获取登录人信息
return new Promise((resolve) => {
requestFN(
'/user/goEditMyInfo',
{}
).then((data) => {
console.info(data.pd)
this.loginUserId = data.pd.USER_ID
// this.loginUserName = data.pd.NAME
this.loginUserCorpInfoId = data.pd.CORPINFO_ID
// this.loginUserDepartmentName = data.pd.DEPARTMENT_NAME
resolve('ok')
}).catch((e) => {
})
})
},
// 搜索
getQuery() {
this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询
this.getPageList()
},
goKeyReset() {
this.resetSearch()
this.getQuery()
},
// 获取列表
getPageList() {
console.log('22222222222222222222222222222')
this.listLoading = true
requestFN(
'vehiclemessage/getPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
...this.searchForm,
'CORPINFO_ID': this.CORPINFO_ID,
CAR_FROM: 0
}
).then((data) => {
this.listLoading = false
this.varList = data.varList
this.total = data.page.totalResult
// this.hasButton()
this.pd = data.pd
}).catch((e) => {
this.listLoading = false
})
},
// 打开新增弹窗的新增按钮
openAddDialogAddBtn() {
this.addDialogVisible = true
this.reSetAddDialog()
this.ISCHECK = false
},
// 添加弹窗的取消按钮
addDialogCancelBtn() {
this.addDialogVisible = false
},
// 查看弹窗的返回按钮
detailDialogReturnBtn() {
this.detailDialogVisible = false
},
// 置空添加弹窗
reSetAddDialog() {
this.addForm.LICENCE_NO = ''
this.addForm.USER_ID = ''
this.addForm.VEHICLE_DEPARTMENT_ID = ''
this.addForm.LICENCE_TYPE = ''
this.addForm.VEHICLE_TYPE = ''
this.addForm.VEHICLE_BELONG_TYPE = ''
this.addForm.EMPLOYEE_VEHICLE_USER_ID = ''
this.userList = []
this.addForm.DEPARTMENT_NAME = ''
this.addForm.DEPARTMENT_ID = ''
},
// 添加弹窗的确定按钮
addDialogConfirmBtn() {
if (this.addForm.LICENCE_NO !== null && this.addForm.LICENCE_NO === '') {
this.$message({
message: '车牌号不能为空',
type: 'error'
})
return false
}
if (this.addForm.LICENCE_TYPE !== null && this.addForm.LICENCE_TYPE === '') {
this.$message({
message: '请选择车牌类型',
type: 'error'
})
return false
}
if (this.addForm.VEHICLE_TYPE !== null && this.addForm.VEHICLE_TYPE === '') {
this.$message({
message: '请选择车辆类型',
type: 'error'
})
return false
}
if (this.addForm.VEHICLE_BELONG_TYPE !== null && this.addForm.VEHICLE_BELONG_TYPE === '') {
this.$message({
message: '请选择车辆所属类型',
type: 'error'
})
return false
}
if (this.addForm.VEHICLE_DEPARTMENT_ID !== null && this.addForm.VEHICLE_DEPARTMENT_ID === '') {
this.$message({
message: '请选择车辆所属部门',
type: 'error'
})
return false
}
if (this.addForm.USER_ID !== null && this.addForm.USER_ID === '') {
this.$message({
message: '请选择车辆责任人',
type: 'error'
})
return false
}
if (this.addForm.VEHICLE_BELONG_TYPE === '0') {
this.addForm.EMPLOYEE_VEHICLE_USER_ID = this.addForm.USER_ID // 车辆所属人id
this.addForm.EMPLOYEE_VEHICLE_USER_NAME = this.addForm.USER_NAME // 车辆所属人姓名
} else {
this.addForm.EMPLOYEE_VEHICLE_USER_ID = '' // 车辆所属人id
this.addForm.EMPLOYEE_VEHICLE_USER_NAME = '' // 车辆所属人姓名
}
this.addRequest()
},
addRequest() {
requestFN(
'vehiclemessage/addVehicleMessage',
{
...this.addForm,
'CORPINFO_ID': this.CORPINFO_ID
}
).then((data) => {
if (data.result === 'fail') {
this.$message({
message: data.msg,
type: 'error'
})
} else {
this.$message.success('车辆信息添加成功')
this.getPageList() // 重新加载列表
this.addDialogVisible = false
}
}).catch((e) => {
})
},
// 打开编辑弹窗的编辑按钮
openEditDialogEditBtn(VEHICLE_ID) {
this.editForm = {
VEHICLE_ID: VEHICLE_ID, // 车辆id(基础属性)
LICENCE_NO: '', // 车牌号
OLD_LICENCE_NO: '', // 修改前的车牌号
USER_ID: '', // 车辆责任人
EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
VEHICLE_DEPARTMENT_ID: '' // 车辆归属公司或责任公司（车辆所属部门）
}
this.userList = []
this.editDialogVisible = true
// 提供查询接口回显数据
requestFN(
'vehiclemessage/updateShowVehicleMessage',
{
VEHICLE_ID: VEHICLE_ID
}
).then((data) => {
if (data.result === 'success') {
this.editForm.LICENCE_NO = data.pd.LICENCE_NO // 车牌号
this.editForm.OLD_LICENCE_NO = data.pd.LICENCE_NO // 车牌号
this.editForm.USER_ID = data.pd.USER_ID // 车辆责任人
this.editForm.LICENCE_TYPE = String(data.pd.LICENCE_TYPE) // 车牌类型
this.editForm.VEHICLE_TYPE = String(data.pd.VEHICLE_TYPE) // 车辆类型
this.editForm.VEHICLE_BELONG_TYPE = data.pd.VEHICLE_BELONG_TYPE === undefined ? '' : data.pd.VEHICLE_BELONG_TYPE // 车辆所属类型
if ('VEHICLE_DEPARTMENT_ID' in data.pd) { // 存在车辆归属部门id
const node = {}
node.id = data.pd.VEHICLE_DEPARTMENT_ID
// this.$refs.selectTree_edit.clearHandle() // 这句代码会报错，注释掉了
this.editForm.VEHICLE_DEPARTMENT_ID = data.pd.VEHICLE_DEPARTMENT_ID
this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
this.$refs.selectTree_edit.handleNodeClick(node)
})
}
} else {
this.$message({
message: '数据回显失败',
type: 'error'
})
}
}).catch((e) => {
})
},
editDialogCancelBtn() {
this.editDialogVisible = false
},
// 查看按钮(展示详情)
showDetail(VEHICLE_ID) {
this.detailForm = {
LICENCE_NO: '', // 车牌号
VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
VEHICLE_BELONG_TYPE: '', // 车辆所属类型
USER_ID: '', // 车辆责任人
EMPLOYEE_VEHICLE_USER_ID: '', // 员工车辆所属人
LICENCE_TYPE: null, // 车牌类型
VEHICLE_TYPE: null // 车辆类型
}
this.detailDialogVisible = true
// 提供查询接口回显数据
requestFN(
'vehiclemessage/detailVehicleMessage',
{
VEHICLE_ID: VEHICLE_ID
}
).then((data) => {
if (data.result === 'success') {
this.detailForm.LICENCE_NO = data.pd.LICENCE_NO // 车牌号
this.detailForm.VEHICLE_DEPARTMENT_ID = data.pd.DEPARTMENT_NAME // 车辆所属部门
this.detailForm.LICENCE_TYPE = this.translateLicenceType(data.pd.LICENCE_TYPE) // 车牌类型
this.detailForm.VEHICLE_TYPE = this.translateVehicleType(data.pd.VEHICLE_TYPE) // 车辆类型
this.detailForm.VEHICLE_BELONG_TYPE = data.pd.VEHICLE_BELONG_TYPE === undefined ? '' : this.translateVehicleBelongType(data.pd.VEHICLE_BELONG_TYPE)
this.detailForm.USER_ID = data.pd.USER_NAME // 车辆责任人
} else {
this.$message({
message: '数据回显失败',
type: 'error'
})
}
}).catch((e) => {
})
},
// 修改弹窗的确定按钮
editDialogConfirmBtn() {
this.$refs.editForm.validate(valid => {
if (valid) {
const loading = this.$loading({
lock: true,
text: '数据保存中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.listLoading = true
requestFN(
'vehiclemessage/updateVehicleMessage',
{
...this.editForm
}
).then((data) => {
if (data.result === 'success') {
this.$message({
message: '修改成功',
type: 'success'
})
} else {
this.$message({
message: data.msg,
type: 'success'
})
}
this.listLoading = false
loading.close()
this.editDialogVisible = false
this.getQuery()
}).catch((e) => {
this.listLoading = false
loading.close()
})
} else {
return false
}
})
},
// 删除单条数据的删除按钮
deleteSingleDataDeleteBtn(id, USER_ID, EMPLOYEE_VEHICLE_USER_ID) {
this.$confirm('确定要删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true
requestFN(
'vehiclemessage/deleteVehicleMessage',
{
VEHICLE_ID: id,
USER_ID: USER_ID,
EMPLOYEE_VEHICLE_USER_ID: EMPLOYEE_VEHICLE_USER_ID
}
).then((data) => {
if (data.result === 'success') {
this.$message({
message: '删除成功',
type: 'success'
})
} else {
this.$message({
message: data.msg,
type: 'success'
})
}
this.listLoading = false
this.varList = []
this.listQuery.page = 1
this.getPageList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
resetSearch() {
this.searchForm = {
LICENCE_NO: '' // 车牌号（输入框）
}
this.$refs.selectTree_Search1.clearHandle() // 清空
this.$refs.selectTree_Search2.clearHandle()
},
addUserList(DEPARTMENT_ID) {
// this.getUserList(DEPARTMENT_ID)
this.customGetUserList(DEPARTMENT_ID)
this.handleDepartmentAddChange(DEPARTMENT_ID)
},
updateUserList(DEPARTMENT_ID) {
this.getUserList(DEPARTMENT_ID)
this.handleDepartmentUpdateChange(DEPARTMENT_ID)
},
getUserList(DEPARTMENT_ID) { // 根据部门获取部门内的人员
this.userList = []
console.info(DEPARTMENT_ID)
requestFN(
'/user/listAll',
{
DEPARTMENT_ID: DEPARTMENT_ID,
tm: new Date().getTime()
}
).then((data) => {
console.info(data)
this.userList = data.userList
}).catch((e) => {
// this.listLoading = false
})
},
customGetUserList(DEPARTMENT_ID) { // 根据部门获取部门内的人员
this.userList = []
requestFN(
'vehiclemessage/selectTreeByDepartmentId',
{
DEPARTMENT_ID: DEPARTMENT_ID,
tm: new Date().getTime()
}
).then((data) => {
this.userList = data.list
}).catch((e) => {
// this.listLoading = false
})
},
// 添加弹窗中的车辆责任人
userIdAddChange(event) {
this.addForm.USER_ID = event
this.handleUserAddChange(event)
},
// 添加弹窗中的车辆所属人
employeeUserIdAddChange(event) {
this.addForm.EMPLOYEE_VEHICLE_USER_ID = event
this.handleEmployeeUserAddChange(event)
},
// 修改弹窗中的车辆责任人
userIdUpdateChange(event) {
this.editForm.USER_ID = event
this.handleUserUpdateChange(event)
},
handleDepartmentAddChange(value) {
this.addForm.VEHICLE_DEPARTMENT_NAME = this.findLabelByValue(this.treeData, value)
},
handleDepartmentUpdateChange(value) {
this.editForm.VEHICLE_DEPARTMENT_NAME = this.findLabelByValue(this.treeData, value)
},
findLabelByValue(tree, value) {
for (const node of tree) {
if (node.id === value) {
return node.name
}
if (node.nodes && node.nodes.length > 0) {
const result = this.findLabelByValue(node.nodes, value)
if (result) {
return result
}
}
}
return ''
},
handleUserAddChange(value) {
const selectedUser = this.userList.find(user => user.USER_ID === value)
if (selectedUser) {
this.addForm.USER_NAME = selectedUser.NAME
} else {
this.addForm.USER_NAME = ''
}
},
handleEmployeeUserAddChange(value) {
const selectedUser = this.userList.find(user => user.USER_ID === value)
if (selectedUser) {
this.addForm.EMPLOYEE_VEHICLE_USER_NAME = selectedUser.NAME
} else {
this.addForm.EMPLOYEE_VEHICLE_USER_NAME = ''
}
},
handleUserUpdateChange(value) {
const selectedUser = this.userList.find(user => user.USER_ID === value)
if (selectedUser) {
this.editForm.USER_NAME = selectedUser.NAME
} else {
this.editForm.USER_NAME = ''
}
},
goCheckLicenceNoAdd() {
if (this.addForm.LICENCE_NO) {
const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
const result = regex.test(this.addForm.LICENCE_NO)
if (result) {
console.log('格式校验通过')
requestFN(
'vehiclemessage/goCheckLicenceNo',
{
'LICENCE_NO': this.addForm.LICENCE_NO
}
).then((data) => {
if (data.result === 'success') {
this.$message.success('验证通过')
this.ISCHECK = true
} else {
this.$message.error('车牌号已存在,请重新输入')
this.ISCHECK = false
}
}).catch((e) => {
console.info(e)
this.listLoading = false
this.ISCHECK = false
})
} else {
this.$message.success('车牌号不规范')
this.ISCHECK = false
}
}
},
goCheckLicenceNoUpdate() {
if (this.editForm.LICENCE_NO) {
if (this.editForm.LICENCE_NO !== this.editForm.OLD_LICENCE_NO) {
const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
const result = regex.test(this.editForm.LICENCE_NO)
if (result) {
console.log('格式校验通过')
requestFN(
'vehiclemessage/goCheckLicenceNo',
{
'LICENCE_NO': this.editForm.LICENCE_NO
}
).then((data) => {
if (data.result === 'success') {
this.$message.success('验证通过')
this.ISCHECK = true
} else {
this.$message.error('车牌号已存在,请重新输入')
this.ISCHECK = false
}
}).catch((e) => {
console.info(e)
this.listLoading = false
this.ISCHECK = false
})
} else {
this.$message.success('车牌号不规范')
this.ISCHECK = false
}
}
}
},
// 车辆进出记录按钮的点击事件
vehicleInOutRecordBtn(LICENCE_NO) {
this.$parent.activeName = 'Record'
this.$parent.LICENCE_NO = LICENCE_NO
}
}
}
</script>
<style>
.m-l-10 {
margin-left: 10px;
}
.q-f-w-v-200{
width: 200px;
}
</style>

205
src/views/longtermvehicle/jgCarMessage/components/record.vue Normal file
View File

@ -0,0 +1,205 @@
<template>
<div class="app-container">
<el-form label-width="100px">
<el-row>
<el-col :span="2">
<el-form-item label-width="0px">
<el-button icon="el-icon-arrow-left" @click="goReturn()">返回</el-button>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="口门名称：" label-width="110px">
<el-input v-model="searchForm.KEYWORDS" style="width:206px" placeholder="请输入内容"/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="口门状态" label-width="110px">
<el-select v-model="searchForm.GATE_STATUS" placeholder="请选择">
<el-option v-for="(item,index) in StatusList" :key="index" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="所属区域" label-width="110px">
<el-select v-model="searchForm.REGION_BIANMA" placeholder="请选择">
<el-option v-for="(item,index) in RegionList" :key="index" :label="item.NAME" :value="item.BIANMA"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="10px">
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
<el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
v-loading="listLoading"
ref="queryTable"
:data="varList"
:cell-style="getPlateColor"
:row-key="getRowKey"
:header-cell-style="{
'font-weight': 'bold',
'color': '#000'
}"
tooltip-effect="dark"
border
fit
highlight-current-row
>
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="REGION_NAME" label="区域" width="100px" align="center"/>
<el-table-column prop="AREA_NAME" label="口门名称" width="100px" align="center"/>
<el-table-column prop="AREA_LEVEL_NAME" label="口门级别" width="100px" align="center"/>
<el-table-column prop="vehicle_plate_number" label="车牌号" width="100px" align="center"/>
<!-- <el-table-column prop="vehicle_category_name" label="车辆类型" width="150px" align="center"/>-->
<el-table-column prop="VEHICLE_TYPE_NAME" label="车辆类型" width="150px" align="center"/>
<!-- <el-table-column prop="vehicle_filing_method" label="车辆所属类型" width="100px" align="center"/>-->
<el-table-column prop="VEHICLE_BELONG_TYPE_NAME" label="车辆所属类型" width="100px" align="center"/>
<el-table-column prop="vehicle_arrival_status" label="车辆在港状态" width="100px" align="center"/>
<el-table-column prop="VEHICLE_DEPARTMENT_NAME" label="车辆所属部门" align="center"/>
<!-- <el-table-column prop="vehicle_filing_info_recording_org" label="车辆所属部门" align="center"/>-->
<el-table-column prop="USER_NAME" label="车辆责任人" width="150ox" align="center"/>
<!-- <el-table-column prop="vehicle_contact_name" label="车辆联系人" width="150ox" align="center"/>-->
<!-- <el-table-column prop="vehicle_contact_phone_number" label="联系人手机号" width="120px" align="center"/>-->
<el-table-column prop="vehicle_arrival_barrier" label="入港闸口" align="center"/>
<el-table-column prop="vehicle_arrival_time" label="入港时间" align="center"/>
<el-table-column prop="vehicle_departure_barrier" label="离港闸口" align="center"/>
<el-table-column prop="vehicle_departure_time" label="离港时间" align="center"/>
</el-table>
<div class="page-btn-group">
<!-- <div>-->
<!-- <el-button plain type="info" @click="returnBtn">返回</el-button>-->
<!-- </div>-->
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
</div>
</div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart'
export default {
components: { Pagination, safetyFlowChart },
directives: { waves },
data() {
return {
listLoading: true,
add: false,
del: false,
edit: false,
listQuery: {
page: 1,
limit: 20
},
total: 0,
KEYWORDS: '',
// 列表展示的数据
varList: [],
// 查询表单的数据
searchForm: {
LICENCE_NO: '', // 车牌号
KEYWORDS: '',
GATE_STATUS: '',
REGION_BIANMA: ''
},
RegionList: [],
StatusList: [
{ value: '0', label: '停用' },
{ value: '1', label: '正常' },
{ value: '2', label: '暂时关闭' }
]
}
},
created() {
this.getDict()
this.searchForm.LICENCE_NO = this.$parent.LICENCE_NO
this.getPageList() // 获取分页列表要展示的数据
},
methods: {
getRowKey(row) {
return row.id_sequence
},
// 搜索
getQuery() {
this.$refs.queryTable.clearSelection() // 先置空表格再查询
this.getPageList()
},
resetSearch() {
this.searchForm.KEYWORDS = ''
this.searchForm.GATE_STATUS = ''
this.searchForm.REGION_BIANMA = ''
},
goKeyReset() {
this.resetSearch()
this.getQuery()
},
// 获取列表
getPageList() {
this.listLoading = true
requestFN(
'/vehiclemessage/getInOutPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
...this.searchForm
}
).then((data) => {
this.listLoading = false
this.varList = data.varList
this.total = data.page.totalResult
// this.hasButton()
}).catch((e) => {
this.listLoading = false
})
},
// 车辆进出记录按钮的点击事件
returnBtn() {
this.$parent.activeName = 'List'
},
getPlateColor(row, column, rowIndex, columnIndex) {
if (row.column.label === '车牌号') {
const colorMap = {
蓝牌: 'background-color: blue;color: white',
黄牌: 'background-color: yellow;color: black',
新能源: 'background-color: green;color: white',
白牌: 'background-color: gray;color: black',
黑牌: 'background-color: black;color: white',
其他: 'background-color: white;color: black',
default: 'background-color: white;color: black'
}
// const plateColor = row.row.vehicle_plate_color || 'default'
const plateColor = row.row.LICENCE_TYPE_NAME || 'default'
const backgroundColorAndColor = colorMap[plateColor] || colorMap.default
return backgroundColorAndColor
}
},
goReturn() {
this.$parent.activeName = 'CarView'
},
getDict() {
requestFN(
'dictionaries/getLevels',
{
DICTIONARIES_ID: '1c73fa2717f2835165104aee234caefe'
}
).then((data) => {
this.RegionList = data.list
})
.catch((e) => {
this.listLoading = false
})
},
}
}
</script>

36
src/views/longtermvehicle/jgCarMessage/index.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div>
<IndexList v-show="activeName==='List'" ref="list" />
<CarView v-if="activeName==='CarView'" />
<Record v-if="activeName==='Record'" />
</div>
</template>
<script>
import IndexList from './components/List'
import CarView from "./components/car_view";
import Record from "./components/record";
export default {
components: {
CarView: CarView,
IndexList: IndexList,
Record: Record
},
data() {
return {
activeName: 'List'
}
},
watch: {
activeName(newValue, oldValue) {
if (newValue == 'List') {
this.$refs.list.getQuery()
}
}
}
}
</script>
<style scoped>
</style>