From dd58977ce355872745c2734f9ffb37153c1f3fcf Mon Sep 17 00:00:00 2001 From: fufeifei <fufeifei@zcloudchina.com> Date: Fri, 29 Nov 2024 09:38:50 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E5=8F=A3=E9=97=A8=E9=97=A8=E7=A6=81?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=B3=BB=E7=BB=9F--->=E9=95=BF=E6=9C=9F?= =?UTF-8?q?=E8=BD=A6=E8=BE=86=E8=BF=9B=E6=B8=AF=E7=AE=A1=E7=90=86=E6=A8=A1?= =?UTF-8?q?=E5=9D=97--->=E5=88=86=E5=85=AC=E5=8F=B8=E8=BD=A6=E8=BE=86?= =?UTF-8?q?=E4=BF=A1=E6=81=AF--->=E6=B7=BB=E5=8A=A0=E8=BD=A6=E8=BE=86?= =?UTF-8?q?=E8=BF=9B=E5=87=BA=E8=AE=B0=E5=BD=95=E7=9A=84=E5=A2=9E=E5=88=A0?= =?UTF-8?q?=E6=94=B9=E6=9F=A5=202=E3=80=81=E5=8F=A3=E9=97=A8=E9=97=A8?= =?UTF-8?q?=E7=A6=81=E7=AE=A1=E7=90=86=E7=B3=BB=E7=BB=9F--->=E8=BD=A6?= =?UTF-8?q?=E8=BE=86=E8=BF=9D=E8=A7=84=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97?= =?UTF-8?q?--->=E6=B7=BB=E5=8A=A0=E8=BD=A6=E8=BE=86=E8=BF=9D=E8=A7=84?= =?UTF-8?q?=E8=AE=B0=E5=BD=95=E7=AE=A1=E7=90=86=E7=9A=84=E5=A2=9E=E5=88=A0?= =?UTF-8?q?=E6=94=B9=E6=9F=A5=203=E3=80=81=E5=8F=A3=E9=97=A8=E9=97=A8?= =?UTF-8?q?=E7=A6=81=E7=AE=A1=E7=90=86=E7=B3=BB=E7=BB=9F--->=E8=BD=A6?= =?UTF-8?q?=E8=BE=86=E8=BF=9D=E8=A7=84=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97?= =?UTF-8?q?--->=E6=B7=BB=E5=8A=A0=E9=BB=91=E5=90=8D=E5=8D=95=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E7=9A=84=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/Navbar.vue | 4 + .../corpinfouser/components/detail.vue | 7 +- .../vehiclemessage/components/indexList.vue | 320 ++++++ .../vehiclemessage/components/index_view.vue | 981 ++++++++++++++++++ .../vehiclemessage/components/record.vue | 205 ++++ .../longtermvehicle/vehiclemessage/index.vue | 42 + .../blacklist/components/list.vue | 451 ++++++++ .../vehiclebreakrules/blacklist/index.vue | 31 + .../records/components/info.vue | 203 ++++ .../records/components/list.vue | 567 ++++++++++ src/views/vehiclebreakrules/records/index.vue | 35 + 11 files changed, 2845 insertions(+), 1 deletion(-) create mode 100644 src/views/longtermvehicle/vehiclemessage/components/indexList.vue create mode 100644 src/views/longtermvehicle/vehiclemessage/components/index_view.vue create mode 100644 src/views/longtermvehicle/vehiclemessage/components/record.vue create mode 100644 src/views/longtermvehicle/vehiclemessage/index.vue create mode 100644 src/views/vehiclebreakrules/blacklist/components/list.vue create mode 100644 src/views/vehiclebreakrules/blacklist/index.vue create mode 100644 src/views/vehiclebreakrules/records/components/info.vue create mode 100644 src/views/vehiclebreakrules/records/components/list.vue create mode 100644 src/views/vehiclebreakrules/records/index.vue diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 4c07761..4cc4a31 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -31,6 +31,10 @@ <svg-icon icon-class="dashboard" /> <span>在线监测</span> </div> + <div class="right-menu-item hover-effect" @click="setShowModel('mkmj')"> + <svg-icon icon-class="dashboard" /> + <span>口门门禁管理</span> + </div> <div class="right-menu-item hover-effect" @click="setShowModel('system')"> <svg-icon icon-class="example" /> <span>系统管理</span> diff --git a/src/views/corpInfo/corpinfouser/components/detail.vue b/src/views/corpInfo/corpinfouser/components/detail.vue index 2b6e345..da1ca4b 100644 --- a/src/views/corpInfo/corpinfouser/components/detail.vue +++ b/src/views/corpInfo/corpinfouser/components/detail.vue @@ -96,6 +96,9 @@ <el-form-item label="备注"> <el-input :rows="3" v-model="form.BZ" type="textarea" placeholder="这里输入备注..."/> </el-form-item> + <el-form-item label="车辆信息"> + <span>{{ form.vehicleMessage }}</span> + </el-form-item> <el-form-item label="是否在线学习人员"> <el-switch v-model="form.ISSTUDENT" active-color="#13ce66" inactive-color="#ff4949"/> </el-form-item> @@ -746,7 +749,8 @@ export default { letTypeOfWorkType: 'select', USER_ID_CARD: '', PERSONNEL_TYPE: '', - userCerList: [] + userCerList: [], + vehicleMessage: '' // 车辆信息 }, uesrInfoDic: { minzuList: [], // 民族 0a0e406f27f74ee698fe9979d25f62dd @@ -1129,6 +1133,7 @@ export default { ).then((data) => { this.form = { ...this.form, ...data.pd, ...data.licenseinfor } // this.form = Object.assign(this.form, data.pd, data.licenseinfor) // copy obj + this.form.vehicleMessage = data.pd.VEHICLE_NOS this.form.userCerList = data.userCerList if (this.form.ROLE_ID != null && this.form.ROLE_ID != '') { // 将字符串转换成数组,此时是字符串数组 diff --git a/src/views/longtermvehicle/vehiclemessage/components/indexList.vue b/src/views/longtermvehicle/vehiclemessage/components/indexList.vue new file mode 100644 index 0000000..bf0c926 --- /dev/null +++ b/src/views/longtermvehicle/vehiclemessage/components/indexList.vue @@ -0,0 +1,320 @@ +<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 :reserve-selection="true" type="selection" width="55" align="center"/>--> + <el-table-column type="index" label="序号" width="50" align="center" /> + <el-table-column prop="CORP_NAME" label="分公司名称" /> + <el-table-column label="属地" > + <template slot-scope="{row}"> + <span v-if="row.prvinceName">{{ row.prvinceName }}</span> + <span v-if="row.cityName"> -- {{ row.cityName }}</span> + <span v-if="row.countryName"> --{{ row.countryName }}</span> + <span v-if="row.villageName"> -- {{ row.villageName }}</span> + </template> + </el-table-column> + <el-table-column prop="INDUSTRYALL" label="所属行业"> + <!-- <template slot-scope="{row}">--> + <!-- {{ translate(industryList,row.INDUSTRY) }}--> + <!-- </template>--> + </el-table-column> + <el-table-column prop="count" label="人数"/> + <el-table-column prop="CORP_STATE" label="分公司状态"> + <template slot-scope="{row}"> + {{ translate(qyztList,row.CORP_STATE) }} + </template> + </el-table-column> + <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.CORPINFO_ID)">查看</el-button> + </template> + </el-table-column> + </el-table> + <div class="page-btn-group"> + <div> + <!-- + <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button> +--> + </div> + <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> + </div> + + <el-dialog :visible.sync="dialogFormEdit" title="查看公司组织架构" width="600px"> + <el-tree :data="treeData" :props="defaultProps"/> + </el-dialog> + </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, + add: true, + del: true, + edit: true, + listQuery: { + page: 1, + limit: 20 + }, + searchForm: { + CORP_NAME: '', + PROVINCE: '', + CITY: '', + CORP_STATE: '', + CREATTIME: '' + }, + total: 0, + varList: [], + qyztList: [], + options: [{ + value: '0', + label: '启用' + }, { + value: '1', + label: '禁用' + }], + STATE: [], + industryList: [], + countryList: [], + villageList: [], + treeData: [], + CITY_CODE: '', + COUNTRY: '', + VILLAGE: '', + config: config, + dialogFormEdit: false, + rules: { + CORP_NAME: [{ required: true, message: '分公司名称不能为空', trigger: 'blur' }], + NEWCORP_NAME: [{ required: true, message: '新分公司名称不能为空', trigger: 'blur' }], + PASSWORD: [{ required: true, message: '分公司密码不能为空', trigger: 'blur' }] + }, + updateBranchNameForm: { + CORPINFO_ID: '', + CORP_NAME: '', + NEWCORP_NAME: '', + PASSWORD: '' + }, + defaultProps: { + children: 'nodes', + label: 'name' + } + } + }, + created() { + this.getList() + this.getDicList('qyztList', '07c2674470c1498ba1ebd74906b3b518') + this.getDicList('industryList', 'f2598ba72e864eadabf0ca4b664d26b9') + }, + methods: { + getRowKey(row) { + return row.CORPINFO_ID + }, + // 搜索 + getQuery() { + this.getList() + }, + // 获取列表 + getList() { + this.listLoading = true + requestFN( + '/corpinfo/listRetrieval?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page, + { ...this.searchForm } + ).then((data) => { + this.listLoading = false + this.varList = data.varList + this.total = data.page.totalResult + this.hasButton() + this.CITY_CODE = data.CITY_CODE + this.getCountryList() + }).catch((e) => { + this.listLoading = false + }) + }, + getCountryList() { + requestFN( + '/dictionaries/getLevels', + { + DICTIONARIES_ID: this.CITY_CODE + } + ).then((data) => { + this.countryList = data.list + }).catch((e) => { + }) + }, + getVillageList(value, id) { + this.COUNTRY = value + requestFN( + '/dictionaries/getLevels', + { + DICTIONARIES_ID: id + } + ).then((data) => { + this.villageList = data.list + }).catch((e) => { + }) + }, + changeVillage(village) { + this.VILLAGE = village + }, + // 查看 + handleEdit(ID) { + this.$parent.activeName = 'IndexView' + this.$parent.CORPINFO_ID = ID + }, + enableORDisable(ISUSE, CORPINFO_ID) { + this.$confirm(ISUSE === '0' ? '确定要启用该账户吗?' : '确定要禁用该账户吗?', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + this.listLoading = true + requestFN( + '/corpinfo/editisuse', + { + CORPINFO_ID, + ISUSE + } + ).then(() => { + this.$message({ + message: ISUSE === '0' ? '启用成功' : '禁用成功', + type: 'success' + }) + this.listLoading = false + this.varList = [] + this.listQuery.page = 1 + this.getList() + }).catch((e) => { + this.listLoading = false + }) + }).catch(() => {}) + }, + // 判断按钮权限,用于是否显示按钮 + hasButton: function() { + var keys = 'corpinfo:add,corpinfo:del,corpinfo:edit,toExcel' + requestFN( + '/head/hasButton', + { + keys: keys + } + ).then((data) => { + this.add = data.corpinfofhadminadd // 新增权限 + this.del = data.corpinfofhadmindel // 删除权限 + this.edit = data.corpinfofhadminedit // 修改权限 + }).catch((e) => { + this.listLoading = false + }) + }, + goKeyReset() { + this.searchForm = { + CORP_NAME: '', + PROVINCE: '', + CITY: '', + CORP_STATE: '', + CREATTIME: '' + } + this.getList() + }, + resetPwd(id) { + this.$confirm('确定要重置选中的密码吗?', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + this.listLoading = true + requestFN( + '/corpinfo/resetPwd', + { + CORPINFO_ID: id + } + ).then(() => { + this.$message({ + message: '重置成功', + type: 'success' + }) + this.listLoading = false + this.varList = [] + this.listQuery.page = 1 + this.getList() + }).catch((e) => { + this.listLoading = false + }) + }).catch(() => { + }) + }, + // 获取数据字典 + getDicList(list, DICTIONARIES_ID) { + requestFN( + '/dictionaries/getLevels', + { + DICTIONARIES_ID + } + ).then((data) => { + this[list] = data.list + }).catch((e) => { + }) + }, + translate(list, id) { + for (let i = 0; i < list.length; i++) { + if (list[i].BIANMA === id || list[i].DICTIONARIES_ID === id) { + return list[i].NAME + } + } + }, + showBranchName(CORPINFO_ID, CORP_NAME) { + this.$refs.form && this.$refs.form.resetFields() + this.dialogFormEdit = true + this.updateBranchNameForm.CORPINFO_ID = CORPINFO_ID + this.updateBranchNameForm.CORP_NAME = CORP_NAME + }, + updateBranchName(ID) { + requestFN( + '/department/listTreeCorpInfo', + { + CORPINFO_ID: ID + } + ).then((data) => { + this.treeData = JSON.parse(data.zTreeNodes) + }).catch((e) => { + }) + } + } +} +</script> diff --git a/src/views/longtermvehicle/vehiclemessage/components/index_view.vue b/src/views/longtermvehicle/vehiclemessage/components/index_view.vue new file mode 100644 index 0000000..3d92dd8 --- /dev/null +++ b/src/views/longtermvehicle/vehiclemessage/components/index_view.vue @@ -0,0 +1,981 @@ +<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 class="subdy-foot">--> + <!-- <el-row style="text-align: center">--> + <!-- <el-button @click="goReturn">返回</el-button>--> + <!-- </el-row>--> + <!-- </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 { + 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.getDepartmentTreeData() // 获取部门树的数据 + // this.getDicList('qyztList', '07c2674470c1498ba1ebd74906b3b518') + // this.getDicList('industryList', 'f2598ba72e864eadabf0ca4b664d26b9') + // 调用自己的方法 + this.getLoginUserInfo() // 获取当前登陆用户的信息 + this.CORPINFO_ID = this.$parent.CORPINFO_ID + this.updateBranchName(this.CORPINFO_ID) + this.getPageList() // 获取分页列表要展示的数据 + + }, + methods: { + // 判断按钮权限,用于是否显示按钮 + // hasButton: function() { + // var keys = 'corpinfo:add,corpinfo:del,corpinfo:edit,toExcel' + // requestFN( + // '/head/hasButton', + // { + // keys: keys + // } + // ).then((data) => { + // this.add = data.corpinfofhadminadd // 新增权限 + // this.del = data.corpinfofhadmindel // 删除权限 + // this.edit = data.corpinfofhadminedit // 权限 + // }).catch((e) => { + // this.listLoading = false + // }) + // }, + // 获取数据字典 + // getDicList(list, DICTIONARIES_ID) { + // requestFN( + // '/dictionaries/getLevels', + // { + // DICTIONARIES_ID + // } + // ).then((data) => { + // this[list] = data.list + // }).catch((e) => { + // }) + // }, + // 之前旧的 + 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 = 'IndexList' + }, + // 从此处开始写自己的事件 + 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(DEPARTMENT_ID) { + this.listLoading = true + if (DEPARTMENT_ID) { + this.VEHICLE_DEPARTMENT_ID = DEPARTMENT_ID + } + requestFN( + 'vehiclemessage/getPageList?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page, + { + ...this.searchForm, + 'CORPINFO_ID': this.CORPINFO_ID + } + ).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(() => { + }) + }, + // 获取数据字典数据 + // getDict: function() { + // requestFN( + // '/dictionaries/listSelectTree', + // { + // DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型 + // } + // ).then((data) => { + // this.inspectionTypeList = JSON.parse(data.zTreeNodes) + // }).catch((e) => { + // + // }) + // }, + // 获得部门树 + getDepartmentTreeData() { + requestFN( + '/department/listTree', + {} + ).then((data) => { + this.departmentTreeData = JSON.parse(data.zTreeNodes) + }).catch((e) => { + }) + }, + 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> diff --git a/src/views/longtermvehicle/vehiclemessage/components/record.vue b/src/views/longtermvehicle/vehiclemessage/components/record.vue new file mode 100644 index 0000000..dcd76ee --- /dev/null +++ b/src/views/longtermvehicle/vehiclemessage/components/record.vue @@ -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 + '¤tPage=' + 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 = 'IndexView' + }, + getDict() { + requestFN( + 'dictionaries/getLevels', + { + DICTIONARIES_ID: '1c73fa2717f2835165104aee234caefe' + } + ).then((data) => { + this.RegionList = data.list + }) + .catch((e) => { + this.listLoading = false + }) + }, + } +} +</script> diff --git a/src/views/longtermvehicle/vehiclemessage/index.vue b/src/views/longtermvehicle/vehiclemessage/index.vue new file mode 100644 index 0000000..a024fc3 --- /dev/null +++ b/src/views/longtermvehicle/vehiclemessage/index.vue @@ -0,0 +1,42 @@ +<template> + <div> + <IndexList v-show="activeName=='IndexList'" ref="list" /> + <IndexView v-if="activeName=='IndexView'" /> + <!-- <List v-show="activeName==='List'" />--> + <Record v-if="activeName==='Record'" /> + </div> +</template> + +<script> +import IndexList from './components/indexList' +import IndexView from './components/index_view' +// import List from './components/list' +import Record from './components/record' +export default { + components: { + IndexList, + IndexView, + // List, + Record + }, + data() { + return { + activeName: 'IndexList', + INSPECTION_ID: '', + LICENCE_NO: '', + indexVal: '' + } + }, + watch: { + activeName(newValue, oldValue) { + if (newValue == 'IndexList') { + this.$refs.list.getQuery() + } + } + } +} +</script> + +<style scoped> + +</style> diff --git a/src/views/vehiclebreakrules/blacklist/components/list.vue b/src/views/vehiclebreakrules/blacklist/components/list.vue new file mode 100644 index 0000000..0e1c515 --- /dev/null +++ b/src/views/vehiclebreakrules/blacklist/components/list.vue @@ -0,0 +1,451 @@ +<template> + <div class="app-container"> + <!-- 查询列表--> + <el-form label-width="100px"> + <el-row> + <el-col :span="4"> + <el-form-item label="车牌号"> + <el-input v-model="searchFrom.LICENCE_NO" placeholder="请输入车牌号..." /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item label="车辆责任人"> + <el-input v-model="searchFrom.USER_NAME" placeholder="请输入车辆责任人..." /> + </el-form-item> + </el-col> + <!-- <el-col :span="4">--> + <!-- <el-form-item label="违规类型" prop="VIOLATION_TYPE">--> + <!-- <SelectTree--> + <!-- ref="selectTree_Search2"--> + <!-- :clearable="false"--> + <!-- :options="violationTypeList"--> + <!-- :props="oneselfDefaultProps"--> + <!-- v-model="searchFrom.VIOLATION_TYPE"--> + <!-- 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="VEHICLE_DEPARTMENT_NAME" label="车辆所属部门" align="center"/> + <el-table-column prop="USER_NAME" label="车辆责任人" align="center"/> + <el-table-column prop="ISEXIST" label="是否存在" align="center" /> + <el-table-column label="操作" align="center" width="480"> + <template slot-scope="{row}"> + <el-button icon="el-icon-view" size="mini" @click="showDetail(row.BLACK_LIST_ID)">详情</el-button> + <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSingleDataDeleteBtn(row.BLACK_LIST_ID, row.VEHICLE_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="车牌号" label-width="110px"> + <el-input v-model="addForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNo()"/> + </el-form-item> + <!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框--> + <el-form-item label="车牌类型" label-width="110px" prop="LICENCE_TYPE"> + <SelectTree + ref="selectTree_add2" + :clearable="false" + :options="licenceTypeList" + :props="oneselfDefaultProps" + v-model="addForm.LICENCE_TYPE" + placeholder="请选择车牌类型" + style="width: 300px"/> + </el-form-item> + <!-- 货车、轿车、大巴客车 下拉框--> + <el-form-item label="车辆类型" label-width="110px" prop="VEHICLE_TYPE"> + <SelectTree + ref="selectTree_add3" + :clearable="false" + :options="vehicleTypeList" + :props="oneselfDefaultProps" + v-model="addForm.VEHICLE_TYPE" + placeholder="请选择车辆类型" + style="width: 300px"/> + </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="detailDialogVisible" title="查看详情" width="600px"> + <el-form label-width="170px" style="padding:0 20px; width: 500px;"> + <!-- 违规类型:(0-未按规定车道行驶,1-违规停车)--> + <el-form-item label="车牌号" label-width="130px"> + <el-input v-model="detailForm.LICENCE_NO" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/> + </el-form-item> + <el-form-item label="车牌类型" label-width="130px"> + <el-input v-model="detailForm.LICENCE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/> + </el-form-item> + <el-form-item label="车辆类型" label-width="130px" prop="DESCRIBE_MESSAGE" > + <el-input :rows="3" v-model="detailForm.VEHICLE_TYPE" :disabled="true" type="textarea"/> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="detailDialogCloseBtn">返回</el-button> + </div> + </el-dialog> + </div> +</template> +<script> +import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包 +import { requestFN } from '@/utils/request' +import waves from '@/directive/waves' // waves directive +import WriteSign from '@/components/WriteSign' +import SelectTree from '@/components/SelectTree' +import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart' +export default { + components: { Pagination, WriteSign, safetyFlowChart, SelectTree }, + directives: { waves }, + data() { + return { + ISCHECK: false, // 校验车牌号是否规范 + listLoading: true, + add: false, + del: false, + edit: false, + detailDialogVisible: false, + loginUserId: '', // 当前登陆用户的id + loginUserName: '', // 当前登陆用户的名称 + loginUserCorpInfoId: '', // 当前登陆用户的分公司id + // 分页列表相关的三个属性 + listQuery: { + page: 1, + limit: 20 + }, + total: 0, + varList: [], // 列表数据 + // 部门树的数据和默认属性 + departmentTreeData: [], + defaultProps: { + value: 'id', + children: 'nodes', + label: 'name' + }, + // 查询表单的数据 + searchFrom: { + LICENCE_NO: '', // 车牌号 + USER_NAME: '', // 车辆类型 + VIOLATION_TYPE: '' // 违规类型 + }, + // 添加表单的数据 + addForm: { + LICENCE_NO: '', // 车牌号 + VIOLATION_TYPE: '', // 违规类型 + VIOLATIONTIME: '', // 最后一次违规时间 + LICENCE_TYPE: '', // 车牌类型 + VEHICLE_TYPE: '', // 车辆类型 + DESCRIBE_MESSAGE: '' // 违规说明 + }, + // 详情弹窗 + detailForm: { + LICENCE_NO: '', // 车牌号 + LICENCE_TYPE: '', // 车牌类型 + VEHICLE_TYPE: '' // 车辆类型 + }, + // 违规类型列表 + violationTypeList: [ + // { ID: '', NAME: '请选择' }, + { ID: '0', NAME: '未按规定车道行驶' }, + { ID: '1', NAME: '违规停车' } + ], + // 车辆类型列表 + vehicleTypeList: [ + // { ID: '', NAME: '请选择' }, + { ID: '0', NAME: '货车' }, + { ID: '1', NAME: '轿车' }, + { ID: '2', NAME: '大巴客车' } + ], + // 车牌类型列表 + licenceTypeList: [ + // { ID: '', NAME: '请选择' }, + { ID: '0', NAME: '白牌' }, + { ID: '1', NAME: '蓝牌' }, + { ID: '2', NAME: '黄牌' }, + { ID: '3', NAME: '绿牌' }, + { ID: '4', NAME: '黑牌' } + ], + // 自定义的下拉树默认属性 + oneselfDefaultProps: { + value: 'ID', + label: 'NAME', + children: 'nodes' + }, + addDialogVisible: false, + dialogImageVisible: false, // 放大照片的显示和隐藏 + violation_files: [], + dialogImageUrl: '' // 照片的地址 + } + }, + created() { + this.getLoginUserInfo() // 获取当前登陆用户的信息 + // this.getDict() // 获取字典 + this.getDepartmentTreeData() // 获取部门树的数据 + this.getPageList() // 获取分页列表要展示的数据 + }, + methods: { + // 获取并设置列表行的主键ID + getRowKey(row) { + return row.BLACK_LIST_ID + }, + // 获取数据字典数据 + // getDict: function() { + // requestFN( + // '/dictionaries/listSelectTree', + // { + // DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型 + // } + // ).then((data) => { + // this.inspectionTypeList = JSON.parse(data.zTreeNodes) + // }).catch((e) => { + // + // }) + // }, + // 获得部门树 + getDepartmentTreeData() { + requestFN( + '/department/listTree', + {} + ).then((data) => { + this.departmentTreeData = JSON.parse(data.zTreeNodes) + }).catch((e) => { + }) + }, + getLoginUserInfo() { // 获取登录人信息 + return new Promise((resolve) => { + requestFN( + '/user/goEditMyInfo', + {} + ).then((data) => { + this.loginUserId = data.pd.USER_ID + this.loginUserName = data.pd.NAME + this.loginUserCorpInfoId = data.pd.CORPINFO_ID + resolve('ok') + }).catch((e) => { + + }) + }) + }, + // 搜索按钮的点击事件 + getQuery() { + // vehicleMessageTable 需要置空表格的ref值 + this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询 + this.getPageList() + }, + // 重置搜索表单按钮的点击事件 + goKeyReset() { + this.resetSearch() // 重置搜索表单按钮的点击事件 + this.getQuery() // 根据查询参数重新获取列表数据 + }, + // 表单控件的置空操作 + resetSearch() { + this.searchFrom.LICENCE_NO = '' // 清空下拉框 + this.searchFrom.USER_NAME = '' // 车辆责任人 + // this.$refs.selectTree_Search2.clearHandle() + }, + // 获取分页列表的数据 + getPageList() { + this.listLoading = true + requestFN( + 'blackListManage/getPageList?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page, + { + ...this.searchFrom + // 'CORPINFO_ID': this.loginUserCorpInfoId + } + ).then((data) => { + this.listLoading = false + console.info('输出获取到的数据') + console.log(data) + 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() + }, + // 添加弹窗的取消按钮 + addDialogCancelBtn() { + this.addDialogVisible = false + }, + reSetAddDialog() { + this.addForm.LICENCE_NO = '' + this.addForm.VIOLATION_TYPE = '' + this.addForm.VIOLATIONTIME = '' + this.addForm.DESCRIBE_MESSAGE = '' + this.addForm.LICENCE_TYPE = '' // 车牌类型 + this.addForm.VEHICLE_TYPE = '' // 车辆类型 + }, + // 添加弹窗的确定按钮 + addDialogConfirmBtn() { + if (this.addForm.LICENCE_NO !== null && this.addForm.LICENCE_NO === '') { + this.$message({ + message: '车牌号不能为空', + type: 'error' + }) + return false + } + this.sendRequest() + }, + sendRequest() { + this.$refs.addForm.validate(valid => { + requestFN( + 'blackListManage/addBlackList', + { + ...this.addForm + // 'CORPINFO_ID': this.loginUserCorpInfoId + } + ).then((data) => { + if (data.result === 'fail') { + this.$message({ + message: data.msg, + type: 'error' + }) + } else { + this.addDialogVisible = false + this.getPageList() // 重新加载列表 + } + this.listLoading = false + }).catch((e) => { + }) + }) + }, + translateVehicleType(id) { + for (var i = 0; i < this.vehicleTypeList.length; i++) { + if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME + } + }, + translateLicenceType(id) { + for (var i = 0; i < this.licenceTypeList.length; i++) { + if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME + } + }, + // 违规类型 + translateViolationType(id) { + for (var i = 0; i < this.violationTypeList.length; i++) { + if (this.violationTypeList[i].ID == id) return this.violationTypeList[i].NAME + } + }, + reSetDetail() { + this.detailForm.LICENCE_NO = '' + this.detailForm.LICENCE_TYPE = '' + this.detailForm.VEHICLE_TYPE = '' + }, + showDetail(BLACK_LIST_ID) { + this.detailDialogVisible = true + this.reSetDetail() + requestFN( + 'blackListManage/detailBlackList', + { + 'BLACK_LIST_ID': BLACK_LIST_ID + } + ).then((data) => { + this.detailForm.LICENCE_NO = data.pd.LICENCE_NO + this.detailForm.LICENCE_TYPE = this.translateLicenceType(data.pd.LICENCE_TYPE) + this.detailForm.VEHICLE_TYPE = this.translateVehicleType(data.pd.VEHICLE_TYPE) + }) + }, + detailDialogCloseBtn() { + this.detailDialogVisible = false + }, + deleteSingleDataDeleteBtn(BLACK_LIST_ID, VEHICLE_ID) { + requestFN( + 'blackListManage/delBlackList', + { + 'BLACK_LIST_ID': BLACK_LIST_ID, + 'VEHICLE_ID': VEHICLE_ID + } + ).then((data) => { + if (data.result === 'success') { + this.$message({ + message: '删除成功', + type: 'success' + }) + this.getPageList() + } else { + this.$message({ + message: data.msg, + type: 'error' + }) + } + }) + }, + // 检查车牌号是否规范 + goCheckLicenceNo() { + if (this.addForm.LICENCE_NO === '') { + this.$message.success('请输入车牌号') + this.ISCHECK = false + } else { + 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) { + this.$message.success('验证通过') + this.ISCHECK = true + } else { + this.$message.success('车牌号不规范') + this.ISCHECK = false + } + } + } + } +} +</script> +<style scoped> + +</style> diff --git a/src/views/vehiclebreakrules/blacklist/index.vue b/src/views/vehiclebreakrules/blacklist/index.vue new file mode 100644 index 0000000..c45ea58 --- /dev/null +++ b/src/views/vehiclebreakrules/blacklist/index.vue @@ -0,0 +1,31 @@ +<template> + <div> + <List v-show="activeName==='List'" ref="list" /> + </div> +</template> + +<script> +import List from './components/list' +export default { + components: { + List + }, + data() { + return { + activeName: 'List', + VEHICLE_ID: '' // 车辆id + } + }, + watch: { + activeName(newValue, oldValue) { + if (newValue == 'List') { + this.$refs.list.getQuery() + } + } + } +} +</script> + +<style scoped> + +</style> diff --git a/src/views/vehiclebreakrules/records/components/info.vue b/src/views/vehiclebreakrules/records/components/info.vue new file mode 100644 index 0000000..8fb1946 --- /dev/null +++ b/src/views/vehiclebreakrules/records/components/info.vue @@ -0,0 +1,203 @@ +<template> + <div class="app-container"> + <div class="page-btn-group"> + <div> + <el-button plain type="info" icon="el-icon-arrow-left" class="return-btn" @click="detailListReturnBtn">返回</el-button> + </div> + </div> + <!-- 违规详情列表 --> + <el-table + v-loading="listLoading" + ref="vehicleViolationTable" + :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 label="违规类型" align="center" width="120"> + <template slot-scope="{row}"> + {{ translateLicenceType(row.VIOLATION_TYPE) }} + </template> + </el-table-column> + <el-table-column prop="LOCATION" label="违规区域" align="center" /> + <el-table-column prop="VIOLATIONTIME" label="违规时间" width="150" align="center" /> + <el-table-column prop="DESCRIBE_MESSAGE" label="违规说明" align="center" /> + <el-table-column label="操作" align="center" width="300"> + <template slot-scope="{row}"> + <el-button icon="el-icon-view" size="mini" @click="showDetail(row.VIOLATION_ID)">详情</el-button> + <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSingleDataDeleteBtn(row.VIOLATION_ID)">清除违规记录</el-button> + </template> + </el-table-column> + </el-table> + + <!-- 查看详情 --> + <el-dialog :visible.sync="detailDialogVisible" title="查看详情" width="600px"> + <el-form label-width="170px" style="padding:0 20px; width: 500px;"> + <!-- 违规类型:(0-未按规定车道行驶,1-违规停车)--> + <el-form-item label="违规类型" label-width="110px"> + <el-input v-model="detailForm.VIOLATION_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/> + </el-form-item> + <el-form-item label="违规时间" label-width="110px"> + <el-input v-model="detailForm.VIOLATIONTIME" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/> + </el-form-item> + <el-form-item label="违规区域" label-width="110px" prop="LOCATION"> + <el-input :rows="3" v-model="detailForm.LOCATION" :disabled="true" type="textarea"/> + </el-form-item> + <el-form-item label="违规照片" label-width="110px" prop="LOCATION"> + <viewer :images="detailForm.FILEPATHS"> + <img v-for="(item,index) in detailForm.FILEPATHS" :src="config.fileUrl + item" :key="index" width="100" style="margin-left: 3px" height="100"> + </viewer> + </el-form-item> + <el-form-item label="违规说明" label-width="110px" prop="DESCRIBE_MESSAGE" > + <el-input :rows="3" v-model="detailForm.DESCRIBE_MESSAGE" :disabled="true" type="textarea"/> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="detailDialogCloseBtn">返回</el-button> + </div> + </el-dialog> + </div> +</template> +<script> +import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包 +import { requestFN } from '@/utils/request' +import waves from '@/directive/waves' // waves directive +import WriteSign from '@/components/WriteSign' +import SelectTree from '@/components/SelectTree' +import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart' +export default { + components: { Pagination, WriteSign, safetyFlowChart, SelectTree }, + directives: { waves }, + data() { + return { + config: config, + imageError: false, + listLoading: true, + add: false, + del: false, + edit: false, + varList: [], // 列表数据 + detailDialogVisible: false, // 查看详情的弹窗 + // 违规类型列表 + violationTypeList: [ + // { ID: '', NAME: '请选择' }, + { ID: '0', NAME: '未按规定车道行驶' }, + { ID: '1', NAME: '违规停车' } + ], + // 详情弹窗 + detailForm: { + VIOLATION_TYPE: '', // 违规类型 + LOCATION: '', // 违规区域 + DESCRIBE_MESSAGE: '', // 违规说明 + VIOLATIONTIME: '', // 违规时间 + FILEPATH: '', // 单张违规照片 + FILEPATHS: [] // 多张违规照片 + } + } + }, + created() { + this.getList() // 获取分页列表要展示的数据 + }, + methods: { + // 获取并设置列表行的主键ID + getRowKey(row) { + return row.VIOLATION_ID + }, + // 获取列表的数据 + getList() { + this.listLoading = true + requestFN( + '/breakRulesRecord/getDetailList', + { + 'VEHICLE_ID': this.$parent.VEHICLE_ID + } + ).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 + }) + }, + // 打开详情弹窗的详情按钮 + openAddDialogDetailBtn() { + this.reSetDetailDialog() + this.detailDialogVisible = true + }, + // 添加弹窗的取消按钮 + detailDialogCloseBtn() { + this.detailDialogVisible = false + }, + detailListReturnBtn() { + this.$parent.activeName = 'List' + }, + reSetDetailDialog() { + this.detailForm.VIOLATION_TYPE = '' + this.detailForm.LOCATION = '' + this.detailForm.FILEPATH = '' + this.detailForm.VIOLATIONTIME = '' + this.detailForm.DESCRIBE_MESSAGE = '' + this.detailForm.FILEPATHS = [] + }, + translateLicenceType(id) { + for (var i = 0; i < this.violationTypeList.length; i++) { + if (this.violationTypeList[i].ID == id) return this.violationTypeList[i].NAME + } + }, + showDetail(VIOLATION_ID) { + this.detailDialogVisible = true + requestFN( + '/breakRulesRecord/getDetail', + { + 'VIOLATION_ID': VIOLATION_ID + } + ).then((data) => { + this.detailForm.VIOLATION_TYPE = this.translateLicenceType(data.pd.VIOLATION_TYPE) + this.detailForm.FILEPATH = this.config.fileUrl + data.pd.FILEPATH + this.detailForm.DESCRIBE_MESSAGE = data.pd.DESCRIBE_MESSAGE + this.detailForm.LOCATION = data.pd.LOCATION + this.detailForm.VIOLATIONTIME = data.pd.VIOLATIONTIME + this.detailForm.FILEPATHS = data.FILEPATHS + }) + }, + // 清除违规记录 + deleteSingleDataDeleteBtn(VIOLATION_ID) { + requestFN( + '/breakRulesRecord/deleteRecord', + { + 'VIOLATION_ID': VIOLATION_ID + } + ).then((data) => { + if (data.result == 'error') { + this.$message({ + message: '违规记录清除失败', + type: 'error' + }) + return false + } else { + this.$refs.vehicleViolationTable.clearSelection() // 先置空表格再查询 + this.getList() // 重新加载列表 + } + }) + } + } +} +</script> +<style scoped> + .return-btn{ + margin-bottom: 10px; + } +</style> diff --git a/src/views/vehiclebreakrules/records/components/list.vue b/src/views/vehiclebreakrules/records/components/list.vue new file mode 100644 index 0000000..11e8dd8 --- /dev/null +++ b/src/views/vehiclebreakrules/records/components/list.vue @@ -0,0 +1,567 @@ +<template> + <div class="app-container"> + <!-- 查询列表--> + <el-form label-width="100px"> + <el-row> + <el-col :span="4"> + <el-form-item label="车牌号"> + <el-input v-model="searchFrom.LICENCE_NO" placeholder="请输入车牌号..." /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item label="车辆类型" prop="VEHICLE_TYPE"> + <SelectTree + ref="selectTree_Search1" + :clearable="false" + :options="vehicleTypeList" + :props="oneselfDefaultProps" + v-model="searchFrom.VEHICLE_TYPE" + placeholder="请选择车辆类型"/> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item label="违规类型" prop="VIOLATION_TYPE"> + <SelectTree + ref="selectTree_Search2" + :clearable="false" + :options="violationTypeList" + :props="oneselfDefaultProps" + v-model="searchFrom.VIOLATION_TYPE" + 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" width="120"> + <template slot-scope="{row}"> + {{ translateLicenceType(row.LICENCE_TYPE) }} + </template> + </el-table-column> + <el-table-column label="车辆类型" align="center" width="120"> + <template slot-scope="{row}"> + {{ translateVehicleType(row.VEHICLE_TYPE) }} + </template> + </el-table-column> + <el-table-column prop="VEHICLE_DEPARTMENT_NAME" label="车辆所属部门" align="center" /> + <el-table-column prop="USER_NAME" label="车辆责任人" align="center" width="120" /> + <el-table-column prop="VIOLATION_COUNT" label="违规次数" align="center" /> + <el-table-column prop="ISEXIST" label="是否存在" align="center" /> + + <el-table-column label="操作" align="center" width="480"> + <template slot-scope="{row}"> + <el-button icon="el-icon-view" size="mini" @click="showDetail(row.VEHICLE_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" :rules="addFormRules" :model="addForm" label-width="170px" style="padding:0 20px; width: 500px;"> + <el-form-item :rules="[{required: true}]" label="车牌号" label-width="110px"> + <el-input v-model="addForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNo()"/> + </el-form-item> + <!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框--> + <el-form-item :rules="[{required: true}]" label="车牌类型" label-width="110px" prop="LICENCE_TYPE"> + <SelectTree + ref="selectTree_add2" + :clearable="false" + :options="licenceTypeList" + :props="oneselfDefaultProps" + v-model="addForm.LICENCE_TYPE" + placeholder="请选择车牌类型" + style="width: 300px"/> + </el-form-item> + <!-- 货车、轿车、大巴客车 下拉框--> + <el-form-item :rules="[{required: true}]" label="车辆类型" label-width="110px" prop="VEHICLE_TYPE"> + <SelectTree + ref="selectTree_add3" + :clearable="false" + :options="vehicleTypeList" + :props="oneselfDefaultProps" + v-model="addForm.VEHICLE_TYPE" + placeholder="请选择车辆类型" + style="width: 300px"/> + </el-form-item> + <el-form-item :rules="[{required: true}]" label="违规时间" label-width="110px"> + <el-date-picker id="VIOLATIONTIME" ref="VIOLATIONTIME" v-model="addForm.VIOLATIONTIME" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width: 100%" type="datetime" placeholder="请选择" /> + </el-form-item> + <!-- 违规类型:(0-未按规定车道行驶,1-违规停车) 下拉框--> + <el-form-item :rules="[{required: true}]" label="违规类型" label-width="110px" prop="VIOLATION_TYPE"> + <SelectTree + ref="selectTree_add3" + :clearable="false" + :options="violationTypeList" + :props="oneselfDefaultProps" + v-model="addForm.VIOLATION_TYPE" + placeholder="请选择违规类型" + style="width: 300px"/> + </el-form-item> + <el-form-item :rules="[{required: true}]" label="违规区域" label-width="110px" prop="LOCATION"> + <el-input :rows="3" v-model="addForm.LOCATION" type="textarea" placeholder="违规区域需明确车辆在港口内的具体违规位置如某一口门附近、某一码头区域、某一仓库通道等..."/> + </el-form-item> + <el-form-item :rules="[{required: true}]" label="违规图片" label-width="110px" prop="FFILE"> + <el-upload + ref="violationImageUpload" + :class="{hide:violationUpload}" + :on-preview="handlePictureCardPreview" + :before-upload="beforeFileUpload" + :on-remove="handleRemove" + :on-change="handleChangeIMG" + :limit="4" + :auto-upload="false" + action="#" + accept=".jpg,.jpeg,.png" + class="avatar-uploader" + list-type="picture-card"> + <i class="el-icon-plus" /> + </el-upload> + <span class="red-tip">* 最多只能上传四张图片</span> + <el-dialog :visible.sync="dialogImageVisible"> + <img :src="dialogImageUrl" width="100%" alt=""> + </el-dialog> + </el-form-item> + <el-form-item label="违规说明" label-width="110px" prop="DESCRIBE_MESSAGE" > + <el-input :rows="3" v-model="addForm.DESCRIBE_MESSAGE" type="textarea" placeholder="请在此处输入违规说明..."/> + </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> + </div> +</template> +<script> +import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包 +import { requestFN } from '@/utils/request' +import waves from '@/directive/waves' // waves directive +import WriteSign from '@/components/WriteSign' +import SelectTree from '@/components/SelectTree' +import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart' +import { upload } from '@/utils/upload' +export default { + components: { Pagination, WriteSign, safetyFlowChart, SelectTree }, + directives: { waves }, + data() { + return { + ISCHECK: false, + listLoading: true, + add: false, + del: false, + edit: false, + // 分页列表相关的三个属性 + listQuery: { + page: 1, + limit: 20 + }, + total: 0, + varList: [], // 列表数据 + loginUserId: '', // 当前登陆用户的id + loginUserName: '', // 当前登陆用户的名称 + loginUserCorpInfoId: '', // 当前登陆用户的分公司id + // 部门树的数据和默认属性 + departmentTreeData: [], + defaultProps: { + value: 'id', + children: 'nodes', + label: 'name' + }, + // 查询表单的数据 + searchFrom: { + VEHICLE_ID: '', // 车辆ID(基础属性) + LICENCE_NO: '', // 车牌号 + VEHICLE_TYPE: '', // 车辆类型 + VIOLATION_TYPE: '' // 违规类型 + }, + // 添加表单的数据 + addForm: { + LICENCE_NO: '', // 车牌号 + LICENCE_TYPE: '', // 车牌类型 + VEHICLE_TYPE: '', // 车辆类型 + VIOLATION_TYPE: '', // 违规类型 + LOCATION: '', // 违规区域 + FFILE: [], // 违规图片 + VIOLATIONTIME: '', // 违规时间 + DESCRIBE_MESSAGE: '' // 违规说明 + }, + detailForm: { + LICENCE_NO: '', // 车牌号 + LICENCE_TYPE: '', // 车牌类型 + VEHICLE_TYPE: '', // 车辆类型 + VIOLATION_TYPE: '', // 违规类型 + LOCATION: '', // 违规区域 + FFILE: [], // 违规图片 + VIOLATIONTIME: '', // 违规时间 + DESCRIBE_MESSAGE: '' // 违规说明 + }, + // 添加表单的验证规则 + addFormRules: { + LICENCE_NO: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }], + VIOLATION_TYPE: [{ required: true, message: '请选择违规类型', trigger: 'blur' }], + FFILE: [{ required: true, message: '违规图片不能为空', trigger: 'blur' }], + LICENCE_TYPE: [{ required: true, message: '请选择车牌类型', trigger: 'blur' }], + VEHICLE_TYPE: [{ required: true, message: '请选择车辆类型', trigger: 'blur' }] + }, + // 违规类型列表 + violationTypeList: [ + // { ID: '', NAME: '请选择' }, + { ID: '0', NAME: '未按规定车道行驶' }, + { ID: '1', NAME: '违规停车' } + ], + // 车辆类型列表 + vehicleTypeList: [ + // { ID: '', NAME: '请选择' }, + { ID: '0', NAME: '货车' }, + { ID: '1', NAME: '轿车' }, + { ID: '2', NAME: '大巴客车' } + ], + // 车牌类型列表 + licenceTypeList: [ + // { ID: '', NAME: '请选择' }, + { ID: '0', NAME: '白牌' }, + { ID: '1', NAME: '蓝牌' }, + { ID: '2', NAME: '黄牌' }, + { ID: '3', NAME: '绿牌' }, + { ID: '4', NAME: '黑牌' } + ], + // 自定义的下拉树默认属性 + oneselfDefaultProps: { + value: 'ID', + label: 'NAME', + children: 'nodes' + }, + addDialogVisible: false, + violationUpload: false, // 违规照片 + dialogImageVisible: false, // 放大照片的显示和隐藏 + violation_files: [], // 违规照片 + dialogImageUrl: '' // 照片的地址 + } + }, + created() { + this.getLoginUserInfo() // 获取当前登陆用户的信息 + this.getDepartmentTreeData() // 获取部门树的数据 + // this.getDict() // 获取字典 + this.getPageList() // 获取分页列表要展示的数据 + }, + methods: { + // 获取并设置列表行的主键ID + getRowKey(row) { + return row.VEHICLE_ID + }, + // 获取数据字典数据 + // getDict: function() { + // requestFN( + // '/dictionaries/listSelectTree', + // { + // DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型 + // } + // ).then((data) => { + // this.inspectionTypeList = JSON.parse(data.zTreeNodes) + // }).catch((e) => { + // + // }) + // }, + // 获得部门树 + getDepartmentTreeData() { + requestFN( + '/department/listTree', + {} + ).then((data) => { + this.departmentTreeData = JSON.parse(data.zTreeNodes) + }).catch((e) => { + }) + }, + getLoginUserInfo() { // 获取登录人信息 + return new Promise((resolve) => { + requestFN( + '/user/goEditMyInfo', + {} + ).then((data) => { + this.loginUserId = data.pd.USER_ID + this.loginUserName = data.pd.NAME + this.loginUserCorpInfoId = data.pd.CORPINFO_ID + resolve('ok') + }).catch((e) => { + + }) + }) + }, + // 搜索按钮的点击事件 + getQuery() { + this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询 + this.getPageList() + }, + // 重置搜索表单按钮的点击事件 + goKeyReset() { + this.resetSearch() // 重置搜索表单按钮的点击事件 + this.getQuery() // 根据查询参数重新获取列表数据 + }, + // 表单控件的置空操作 + resetSearch() { + this.searchFrom.LICENCE_NO = '' // 清空下拉框 + this.$refs.selectTree_Search1.clearHandle() // 清空下拉树 + this.$refs.selectTree_Search2.clearHandle() + }, + // 获取分页列表的数据 + getPageList() { + this.listLoading = true + requestFN( + 'breakRulesRecord/getPageList?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page, + { + ...this.searchFrom + // CORPINFO_ID: this.loginUserCorpInfoId !== '' ? this.loginUserCorpInfoId : this.$parent.CORPINFO_ID + } + ).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() + }, + // 添加弹窗的取消按钮 + addDialogCancelBtn() { + this.addDialogVisible = false + }, + reSetAddDialog() { + this.addForm.LICENCE_NO = '' + this.addForm.VIOLATION_TYPE = '' + this.addForm.LOCATION = '' + this.addForm.FFILE = '' + this.addForm.VIOLATIONTIME = '' + this.addForm.DESCRIBE_MESSAGE = '' + this.addForm.LICENCE_TYPE = '' // 车牌类型 + this.addForm.VEHICLE_TYPE = '' // 车辆类型 + this.violation_files = [] // 违规图片 + }, + // 图片上传相关的函数 + handleRemove(file, fileList) { + this.violationUpload = fileList.length >= 4 + }, + handleChangeIMG(file, fileList) { + const types = ['image/jpeg', 'image/jpg', 'image/png'] + const isImage = types.includes(file.raw.type) + if (!isImage) { + this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!') + fileList.pop() + } + this.violationUpload = fileList.length >= 4 + }, + // 点击放大图片 + handlePictureCardPreview(file) { + this.dialogImageUrl = file.url + this.dialogImageVisible = true + }, + beforeFileUpload(file) { + const types = ['image/jpeg', 'image/jpg', 'image/png'] + const isImage = types.includes(file.type) + if (!isImage) { + this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!') + return false + } else { + this.violation_files.push(file) // 将多个图片放到一个数组中 + // this.addForm.FFILE = file // 将单个图片放到一个变量中 + } + }, + // 添加弹窗的确定按钮 + 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.VIOLATIONTIME !== null && this.addForm.VIOLATIONTIME === '') { + this.$message({ + message: '请选择违规时间', + type: 'error' + }) + return false + } + if (this.addForm.VIOLATION_TYPE !== null && this.addForm.VIOLATION_TYPE === '') { + this.$message({ + message: '请选择违规类型', + type: 'error' + }) + return false + } + if (this.addForm.LOCATION !== null && this.addForm.LOCATION === '') { + this.$message({ + message: '请填写违规区域', + type: 'error' + }) + return false + } + if (this.$refs.violationImageUpload.uploadFiles.length < 1) { + this.$message({ + message: '请上传违规图片', + type: 'error' + }) + this.loading = false + return false + } + this.$refs.addForm.validate(valid => { + this.addRequest(valid) // 同时保存多张图片 + }) + }, + addRequest(valid) { + requestFN( + 'breakRulesRecord/addRecord', + { + ...this.addForm + // CORPINFO_ID: this.loginUserCorpInfoId + } + ).then((data) => { + if (data.result === 'fail') { + this.$message({ + message: data.msg, + type: 'error' + }) + } else { + this.saveViolationRecordImg(data.VIOLATION_ID) // 保存违规记录图片 + this.$message.success('违规记录添加成功') + this.getPageList() // 重新加载列表 + this.addDialogVisible = false + } + }).catch((e) => { + }) + }, + // 保存违规记录图片 + saveViolationRecordImg(VIOLATION_ID) { + var _this = this + const loading = this.$loading({ + lock: true, + text: '加载中......', + background: 'rgba(0,0,0,0.5)' + }) + this.$refs.violationImageUpload.submit() + const todata = new FormData() + // 将多个图片放到了一个数组violation_files中 + for (var i = 0; i < _this.violation_files.length; i++) { + if (_this.violation_files[i]) { + todata.append('FFILE', _this.violation_files[i]) + } + } + if (!todata.get('FFILE')) { + return + } + todata.append('FOREIGN_KEY', VIOLATION_ID) + todata.append('TYPE', 301) // 车辆违规记录 + upload( + '/imgfiles/add', + todata + ).then((data) => { + loading.close() + if (data.result == 'success') { + this.$message({ + message: '违规记录图片上传成功', + type: 'success' + }) + } else { + this.$message({ + message: '违规记录图片上传失败', + type: 'error' + }) + this.loading = false + } + }).catch((e) => { + this.listLoading = false + this.loading = false + }) + }, + 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 + } + }, + showDetail(VEHICLE_ID) { + this.$parent.VEHICLE_ID = VEHICLE_ID + this.$parent.activeName = 'Info' + }, + // 检查车牌号是否规范 + goCheckLicenceNo() { + if (this.addForm.LICENCE_NO === '') { + this.$message.success('请输入车牌号') + this.ISCHECK = false + } else { + 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) { + this.$message.success('验证通过') + this.ISCHECK = true + } else { + this.$message.success('车牌号不规范') + this.ISCHECK = false + } + } + } + } +} +</script> +<style scoped> + +</style> diff --git a/src/views/vehiclebreakrules/records/index.vue b/src/views/vehiclebreakrules/records/index.vue new file mode 100644 index 0000000..ef0d244 --- /dev/null +++ b/src/views/vehiclebreakrules/records/index.vue @@ -0,0 +1,35 @@ +<template> + <div> + <List v-show="activeName==='List'" ref="list" /> + <Info v-if="activeName==='Info'" /> + </div> +</template> + +<script> +import List from './components/list' +import Info from './components/info' +export default { + components: { + List, + Info + }, + data() { + return { + activeName: 'List', + VEHICLE_ID: '', // 车辆id + CORPINFO_ID: '' // 企业id + } + }, + watch: { + activeName(newValue, oldValue) { + if (newValue == 'List') { + this.$refs.list.getQuery() + } + } + } +} +</script> + +<style scoped> + +</style>