guoyuepeng
/
qa-regulatory-gwj-vue
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity
qa-regulatory-gwj-vue/src/views/freightVehicles/carInfoManagement/components/carList.vue

510 lines
18 KiB
Vue
Raw Blame History

<template>
<div class="app-container">
<div class="filter-container">
<el-form ref="form" v-model="form">
<el-row>
<el-col :span="5">
<el-form-item label="车牌号:">
<el-input v-model="form.LICENCE_NO" placeholder="搜索" class="filter-item" style="width: 200px;"/>
</el-form-item>
</el-col>
<el-col :span="4">
<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="reset">重置</el-button>
</el-col>
</el-row>
</el-form>
</div>
<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
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="LICENCE_NO" label="车牌号"/>
<el-table-column prop="CONTACT" label="联系人姓名"/>
<el-table-column prop="PHONE" label="联系人电话"/>
<el-table-column prop="LICENCE_TYPE" label="车牌类型"/>
<el-table-column prop="VEHICLE_TYPE" label="车辆类型"/>
</el-table>
<div class="page-btn-group">
<div/>
<div/>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</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="车牌号" prop="LICENCE_NO">
<el-input v-model="addForm.LICENCE_NO" 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="IS_DANGEROUS_CAR">
<SelectTree
ref="selectTree_add4"
:clearable="false"
:options="DANGEROUS_CAR_LIST"
:props="vehicleDefaultProps"
v-model="addForm.IS_DANGEROUS_CAR"
placeholder="请选择是否危化车辆"
style="width: 300px"/>
</el-form-item>
<el-form-item label="负责人" :rules="[{ required: true, message: '请填写负责人姓名', trigger: 'blur' }]">
<el-input v-model="addForm.CONTACT" type="text" maxlength="300" placeholder="这里输入负责人名称..."/>
</el-form-item>
<el-form-item label="负责人手机号" :rules="[{ required: true, message: '请填写负责人手机号', trigger: 'blur' }]">
<el-input v-model="addForm.PHONE" type="text" maxlength="300" placeholder="这里输入负责人手机号..."/>
</el-form-item>
<el-form-item label="排放标准" :rules="[{ required: true, message: '请填写排放标准', trigger: 'blur' }]">
<el-input v-model="addForm.EMISSION_STANDARDS" type="text" maxlength="300" placeholder="这里输入排放标准..."/>
</el-form-item>
<!-- 驾驶证上传 -->
<el-form-item label="驾驶证" :rules="[{ required: true, message: '请上传驾驶证', trigger: 'blur' }]">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleDrivingLicenseSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="绿本" :rules="[{ required: true, message: '请上传绿本', trigger: 'blur' }]">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleGreenBookSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="环保随车清单" :rules="[{ required: true, message: '请上传环保随车清单', trigger: 'blur' }]">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleEcoFriendlyChecklistSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="出厂合格证" :rules="[{ required: true, message: '请上传出厂合格证', trigger: 'blur' }]">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleFactoryCertificateSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="环保信息截图" :rules="[{ required: true, message: '请上传环保信息截图', trigger: 'blur' }]">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleEnvironmentalScreenshotsSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</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 v-if="editDialogVisible" ref="editForm" :model="addForm" label-width="170px" style="padding:0 20px; width: 500px;">
<el-form-item label="车牌号" prop="LICENCE_NO">
<el-input v-model="addForm.LICENCE_NO" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNoAdd()"/>
</el-form-item>
<!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框-->
<el-form-item label="车牌类型" prop="LICENCE_TYPE">
<SelectTree
ref="selectTree_edit2"
:clearable="false"
:options="licenceTypeList"
:props="vehicleDefaultProps"
v-model="addForm.LICENCE_TYPE"
placeholder="请选择车牌类型"
style="width: 300px"/>
</el-form-item>
<!-- 货车、轿车、大巴客车 下拉框-->
<el-form-item label="车辆类型" prop="VEHICLE_TYPE">
<SelectTree
ref="selectTree_edit3"
:clearable="false"
:options="vehicleTypeList"
:props="vehicleDefaultProps"
v-model="addForm.VEHICLE_TYPE"
placeholder="请选择车辆类型"
style="width: 300px"/>
</el-form-item>
<!--是否为危化车辆-->
<el-form-item label="是否为危化车辆" prop="IS_DANGEROUS_CAR">
<SelectTree
ref="selectTree_edit4"
:clearable="false"
:options="DANGEROUS_CAR_LIST"
:props="vehicleDefaultProps"
v-model="addForm.IS_DANGEROUS_CAR"
placeholder="请选择是否危化车辆"
style="width: 300px"/>
</el-form-item>
<el-form-item label="负责人">
<el-input v-model="addForm.CONTACT" type="text" maxlength="300" placeholder="这里输入负责人名称..."/>
</el-form-item>
<el-form-item label="负责人手机号">
<el-input v-model="addForm.PHONE" type="text" maxlength="300" placeholder="这里输入负责人手机号..."/>
</el-form-item>
<el-form-item label="排放标准">
<el-input v-model="addForm.EMISSION_STANDARDS" type="text" maxlength="300" placeholder="这里输入排放标准..."/>
</el-form-item>
<!-- 驾驶证上传 -->
<el-form-item label="驾驶证">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleDrivingLicenseSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="绿本">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleGreenBookSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="环保随车清单">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleEcoFriendlyChecklistSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="出厂合格证">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleFactoryCertificateSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="环保信息截图">
<el-upload
action="http://127.0.0.1:8199/mkmj/management/fileUpload"
:on-success="handleEnvironmentalScreenshotsSuccess"
:before-upload="beforeUpload"
:limit="1">
<el-button type="primary">点击上传</el-button>
</el-upload>
</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>
<flow-step ref="flowStep" append-to-body @refresh="getList"/>
</div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
export default{
components: { Pagination, SelectTree},
data() {
return {
listQuery: {
page: 1,
limit: 10
},
areaList: [], // 省市县列表
placeList: [],
listLoading: true,
varList: [],
total: 0,
title: '',
isShow: false,
addDialogVisible: false,
editDialogVisible: false,
addForm: {
VEHICLE_ID: '',
LICENCE_NO: '',
LICENCE_TYPE: '',
VEHICLE_TYPE: '',
CONTACT: '',
PHONE: '',
EMISSION_STANDARDS: '',
IS_DANGEROUS_CAR: '',
DRIVING_LICENSE: '',
GREEN_BOOK: '',
ECO_FRIENDLY_CHECKLIST: '',
FACTORY_CERTIFICATE: '',
ENVIRONMENTAL_SCREENSHOTS: '',
CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID,
MOTORCADE_ID: this.$parent.MOTORCADE_ID
},
form: {
MOTORCADE_NAME: '',
PHONE: '',
ID_CARD: '',
CORPINFO_NAME: '',
DEPARTMENT_NAME: '',
VISIT_START_TIME: '',
VISIT_END_TIME: '',
DOOR_NAME: '',
TEMPORARY_TYPE: '2',
CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID,
MOTORCADE_ID: this.$parent.MOTORCADE_ID
},
// 车牌类型列表
licenceTypeList: [
{ 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: '大巴客车' }
],
DANGEROUS_CAR_LIST: [
{ ID: '0', NAME: '否' },
{ ID: '1', NAME: '是' },
],
// 车辆下拉树默认属性
vehicleDefaultProps: {
value: 'ID',
label: 'NAME',
children: 'nodes'
}
}
},
async created() {
this.getList()
},
methods: {
// 搜索
getQuery() {
this.$refs.multipleTable.clearSelection()
this.getList()
},
// 重置
reset() {
this.form = {
USER_NAME: '',
PHONE: '',
ID_CARD: '',
CORPINFO_NAME: '',
DEPARTMENT_NAME: '',
VISIT_START_TIME: '',
VISIT_END_TIME: '',
DOOR_NAME: ''
}
this.getList()
},
// 获取列表
getList() {
this.listLoading = true
requestFN(
'/mkmjManagement/getAllCarInfoList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page, this.form
).then((data) => {
console.log(data)
this.listLoading = false
this.varList = data.carInfoList
this.total = data.page.totalResult
this.hasButton()
this.pd = data.pd
}).catch((e) => {
this.listLoading = false
})
},
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(
'/mkmj/management/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
}
}
},
// 打开新增弹窗的新增按钮
openAddDialogAddBtn() {
this.addDialogVisible = true
this.reSetAddDialog()
this.ISCHECK = false
},
reSetAddDialog() {
this.addForm.VEHICLE_ID = '',
this.addForm.LICENCE_NO = '',
this.addForm.LICENCE_TYPE = '',
this.addForm.VEHICLE_TYPE = '',
this.addForm.CONTACT = '',
this.addForm.PHONE = '',
this.addForm.EMISSION_STANDARDS = '',
this.addForm.IS_DANGEROUS_CAR = '',
this.addForm.DRIVING_LICENSE = '',
this.addForm.GREEN_BOOK = '',
this.addForm.ECO_FRIENDLY_CHECKLIST = '',
this.addForm.FACTORY_CERTIFICATE = '',
this.addForm.ENVIRONMENTAL_SCREENSHOTS = ''
},
handleDrivingLicenseSuccess(response, file) {
this.addForm.DRIVING_LICENSE = response.uploadPath;
},
handleGreenBookSuccess(response, file) {
this.addForm.GREEN_BOOK = response.uploadPath;
},
handleEcoFriendlyChecklistSuccess(response, file) {
this.addForm.ECO_FRIENDLY_CHECKLIST = response.uploadPath;
},
handleFactoryCertificateSuccess(response, file) {
this.addForm.FACTORY_CERTIFICATE = response.uploadPath;
},
handleEnvironmentalScreenshotsSuccess(response, file) {
this.addForm.ENVIRONMENTAL_SCREENSHOTS = response.uploadPath;
},
beforeUpload(file) {
// 文件上传前的校验逻辑
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!');
}
return isLt2M;
},
addDialogCancelBtn() {
this.addDialogVisible = false;
},
addDialogConfirmBtn() {
requestFN(
'/mkmj/management/carInfoMaintenance' ,
this.addForm
).then((data) => {
this.addDialogVisible = false
this.reSetAddDialog()
this.getList()
}).catch((e) => {
this.addDialogVisible = false
})
},
goDelete(row){
this.$confirm('确定要删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
requestFN(
'/mkmj/management/deleteCarInfo',
{
VEHICLE_ID : row.VEHICLE_ID
}
).then((data) => {
this.listLoading = false
this.getList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
goEdit(row){
this.addForm.VEHICLE_ID = row.VEHICLE_ID
this.editDialogVisible = true
},
editDialogCancelBtn(){
this.editDialogVisible = false
},
editDialogConfirmBtn(){
requestFN(
'/mkmj/management/carInfoMaintenance' ,
this.addForm
).then((data) => {
this.editDialogVisible = false
this.reSetAddDialog()
this.getList()
}).catch((e) => {
this.editDialogVisible = false
})
}
}
}
</script>
Reference in New Issue View Git Blame Copy Permalink