违法上报画面
parent
a0f3c2c810
commit
2e41579138
|
|
@ -0,0 +1,27 @@
|
|||
import { defHttp } from '@/utils/http/axios';
|
||||
enum Api {
|
||||
// 分页
|
||||
LoadAllPage = '/api/MiVehiclePickup/LoadAllPage',
|
||||
// 提车审核
|
||||
PickUpAudit = '/api/MiVehiclePickup/PickUpAudit',
|
||||
// 添加
|
||||
Add = '/api/MiVehiclePickup/Add',
|
||||
}
|
||||
export function LoadAllPage(params) {
|
||||
return defHttp.get({
|
||||
url: Api.LoadAllPage,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export function PickUpAudit(params) {
|
||||
return defHttp.post({
|
||||
url: Api.PickUpAudit,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export function Add(params) {
|
||||
return defHttp.post({
|
||||
url: Api.Add,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { defHttp } from '@/utils/http/axios';
|
||||
enum Api {
|
||||
// 分页
|
||||
LoadAllPage = '/api/MiViolationReport/LoadAllPage',
|
||||
// 上报详情
|
||||
Get = '/api/MiViolationReport/Get',
|
||||
// 处理意见
|
||||
ReportHandle = '/api/MiViolationReport/ReportHandle',
|
||||
}
|
||||
export function LoadAllPage(params) {
|
||||
return defHttp.get({
|
||||
url: Api.LoadAllPage,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export function Get(params) {
|
||||
return defHttp.get({
|
||||
url: Api.Get,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export function ReportHandle(params) {
|
||||
return defHttp.post({
|
||||
url: Api.ReportHandle,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<div class="modal-content" id="reportviolations-show-modal">
|
||||
<a-descriptions title="上报信息" bordered :column="3" style="margin-bottom: 20px;">
|
||||
<a-descriptions-item
|
||||
v-for="item in showInfoColumn"
|
||||
:label="item.label"
|
||||
:span="item.span? item.span: 1"
|
||||
>
|
||||
<template v-if="item.key == 'scenePhotos'">
|
||||
<a-image-preview-group
|
||||
:preview="{
|
||||
getContainer: getContainer,
|
||||
}"
|
||||
>
|
||||
<template v-for="(imageItem, imageIndex) in props.modalData[item.key]" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem.image"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem.image}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'vehicles'">
|
||||
<a-table :dataSource="props.modalData['vehicles']" :columns="vehiclesColumns" :pagination="false">
|
||||
<template #bodyCell="{ column, record, text }">
|
||||
<template v-if="column.key === 'images'">
|
||||
<a-image-preview-group
|
||||
:preview="{
|
||||
getContainer: getContainer,
|
||||
}"
|
||||
>
|
||||
<template v-for="(imageItem, imageIndex) in text" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem.image"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem.image}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
<template v-else>{{ props.modalData.violationReport[item.key] }}</template>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<div class="button-div">
|
||||
<a-input v-if="props.modalType == 'process'" v-model:value="processValue" style="margin-right: 20px;" placeholder="请输入处理意见"/>
|
||||
<div style="display: flex;">
|
||||
<a-button class="cancel-button" @click="cancel">取消</a-button>
|
||||
<a-button v-if="props.modalType == 'process'" class="save-button" type="primary" @click="submit">提交处理</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue"
|
||||
import { ReportHandle } from '@/api/illegalconstruction/reportviolations'
|
||||
import { message } from "ant-design-vue";
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
|
||||
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||||
const props = defineProps(['modalType', 'modalData'])
|
||||
const emits = defineEmits(['closeModal'])
|
||||
const processValue = ref('')
|
||||
|
||||
const showInfoColumn = [
|
||||
{ label: '标题', key: 'title' },
|
||||
{ label: '当事人姓名', key: 'partyName' },
|
||||
{ label: '当事人电话', key: 'partyPhone' },
|
||||
{ label: '违法类型', key: 'violationType' },
|
||||
{ label: '问题描述', key: 'problemDescription' },
|
||||
{ label: '上报人', key: 'reporter' },
|
||||
{ label: '上报时间', key: 'reportTime' },
|
||||
{ label: '上报单位', key: 'reportUnitName' },
|
||||
{ label: '状态', key: 'status' },
|
||||
{ label: '处理意见', key: 'handlingOpinion' },
|
||||
{ label: '处理单位', key: 'handlingUnit' },
|
||||
{ label: '处理人', key: 'handler' },
|
||||
{ label: '处理时间', key: 'handlingTime', },
|
||||
{ label: '现场照片', key: 'scenePhotos', span: 2},
|
||||
{ label: '车辆信息', key: 'vehicles', span: 3},
|
||||
]
|
||||
const vehiclesColumns = [
|
||||
{ title: '身份证', dataIndex: 'idCard', key: 'idCard',},
|
||||
{ title: '姓名', dataIndex: 'name', key: 'name',},
|
||||
{ title: '联系方式', dataIndex: 'phone', key: 'phone',},
|
||||
{ title: '类型', dataIndex: 'type', key: 'type',},
|
||||
{ title: '牌照', dataIndex: 'licensePlate', key: 'licensePlate',},
|
||||
{ title: '图片', dataIndex: 'images', key: 'images',},
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
})
|
||||
|
||||
const cancel = () => {
|
||||
emits('closeModal')
|
||||
}
|
||||
const getContainer = () => {
|
||||
return document.getElementById('reportviolations-show-modal');
|
||||
};
|
||||
const submit = () => {
|
||||
let params = {
|
||||
id: props.modalData.violationReport.id,
|
||||
handlingOpinion: processValue.value
|
||||
}
|
||||
ReportHandle(params).then(res => {
|
||||
message.success('处理成功')
|
||||
emits('closeModal', true)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal-content{
|
||||
padding: 20px;
|
||||
.content-form{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.button-div{
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
.cancel-button{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<!-- <PermissionBtn @btnEvent="buttonClick"></PermissionBtn> -->
|
||||
<a-button type="primary" :disabled="processDisabled" @click="buttonClick('process')">处理</a-button>
|
||||
<a-button type="primary" :disabled="getCarDisabled" @click="buttonClick('getcar')">提车</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record, index, text }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '详情',
|
||||
onClick: () => {
|
||||
showInfo(record)
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal width="100%" wrap-class-name="reportviolations-show-info-modal" v-model:open="showInfoModalOpen" :title="modalType == 'process'? '处理': '详情'" :maskClosable="false" :footer="null" :destroyOnClose="true" @cancel="modalClose">
|
||||
<ShowInfoModal :modalType="modalType" :modalData="modalData" @closeModal="closeModal"/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch, createVNode, unref, computed, h } from 'vue';
|
||||
import { Modal, message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { LoadAllPage, Get } from '@/api/illegalconstruction/reportviolations'
|
||||
import { Add } from '@/api/illegalconstruction/getcar'
|
||||
import { columns, searchFormSchema, statusOptions, violationTypeOptions } from './util';
|
||||
import ShowInfoModal from './ShowInfoModal/index.vue'
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const showInfoModalOpen = ref(false)
|
||||
const modalType = ref()
|
||||
const modalData = ref({})
|
||||
const getCarRemark = ref('')
|
||||
|
||||
const processDisabled = ref()
|
||||
const getCarDisabled = ref()
|
||||
|
||||
// 表格
|
||||
const [registerTable, { reload, getSelectRows, getPaginationRef }] = useTable({
|
||||
title: '上报违法列表',
|
||||
api: LoadAllPage,
|
||||
columns: columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
showIndexColumn: false,
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
onChange: (record,list) => {
|
||||
processDisabled.value = list[0].Status == 0? false: true
|
||||
getCarDisabled.value = list[0].Status == 1? false: true
|
||||
|
||||
}
|
||||
},
|
||||
useSearchForm: true,
|
||||
bordered: true,
|
||||
showTableSetting: true,
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
const { begindate, enddate } = params
|
||||
return {
|
||||
...params,
|
||||
begindate: begindate
|
||||
? dayjs(begindate).startOf('day').format('YYYY-MM-DD HH:mm:ss')
|
||||
: undefined,
|
||||
enddate: enddate
|
||||
? dayjs(enddate).endOf('day').format('YYYY-MM-DD HH:mm:ss')
|
||||
: undefined,
|
||||
}
|
||||
}
|
||||
});
|
||||
const showInfo = (record) => {
|
||||
modalType.value = 'showInfo'
|
||||
Get({id: record.Id}).then(res => {
|
||||
modalData.value = res
|
||||
showInfoModalOpen.value = true
|
||||
})
|
||||
}
|
||||
// 按键分类
|
||||
const buttonClick = async (type) => {
|
||||
switch (type) {
|
||||
case 'process':
|
||||
let select = getSelectRows()
|
||||
if (select.length !== 1) {
|
||||
message.warning('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
modalType.value = 'process'
|
||||
Get({id: select[0].Id}).then(res => {
|
||||
modalData.value = res
|
||||
showInfoModalOpen.value = true
|
||||
})
|
||||
|
||||
break;
|
||||
case 'getcar':
|
||||
let selectList = getSelectRows()
|
||||
if (selectList.length !== 1) {
|
||||
message.warning('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '正在发起提车，请输入提车备注',
|
||||
content: h('input',{
|
||||
class: 'getCarRemarkInput',
|
||||
onChange: (e) => getCarRemark.value = e.target.value
|
||||
}),
|
||||
onOk: async () => {
|
||||
try{
|
||||
const result = await Add({ violationReportId: selectList[0].Id, remark: getCarRemark.value })
|
||||
if(result){
|
||||
message.success('发起提车成功');
|
||||
reload()
|
||||
}
|
||||
getCarRemark.value = ''
|
||||
} catch (error){
|
||||
getCarRemark.value = ''
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
getCarRemark.value = ''
|
||||
},
|
||||
})
|
||||
break;
|
||||
}
|
||||
};
|
||||
const closeModal = (isReload=false) => {
|
||||
showInfoModalOpen.value = false
|
||||
if(isReload){
|
||||
reload()
|
||||
}
|
||||
}
|
||||
const getLabel = (type, value) => {
|
||||
let result: any[] = [];
|
||||
let label = '';
|
||||
switch (type) {
|
||||
case 'Status':
|
||||
result = statusOptions;
|
||||
break;
|
||||
case 'ViolationType':
|
||||
result = violationTypeOptions;
|
||||
break;
|
||||
}
|
||||
result.forEach((item) => {
|
||||
if (item.value == value) {
|
||||
label = item.label;
|
||||
}
|
||||
});
|
||||
return label;
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.reportviolations-show-info-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh);
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.getCarRemarkInput{
|
||||
border: 1px solid;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
padding: 0px 10px;
|
||||
border-color: #000;
|
||||
transition: 0.2s;
|
||||
color: #000 !important;
|
||||
&:focus{
|
||||
border-color: #6db8ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { asyncGetOptions } from '@/utils/global'
|
||||
|
||||
export const statusOptions = await asyncGetOptions('FMViolationStatus');
|
||||
export const violationTypeOptions = await asyncGetOptions('JGViolationType');
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '上报时间',
|
||||
dataIndex: 'ReportTime',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'StatusName',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'TypeName',
|
||||
},
|
||||
{
|
||||
title: '当事人',
|
||||
dataIndex: 'PartyName',
|
||||
},
|
||||
{
|
||||
title: '当事人电话',
|
||||
dataIndex: 'PartyPhone',
|
||||
},
|
||||
{
|
||||
title: '问题描述',
|
||||
dataIndex: 'ProblemDescription',
|
||||
},
|
||||
{
|
||||
title: '处理人',
|
||||
dataIndex: 'Handler',
|
||||
},
|
||||
{
|
||||
title: '处理单位',
|
||||
dataIndex: 'HandlingUnit',
|
||||
},
|
||||
{
|
||||
title: '处理时间',
|
||||
dataIndex: 'HandlingTime',
|
||||
},
|
||||
{
|
||||
title: '上报人',
|
||||
dataIndex: 'ReportUserName',
|
||||
},
|
||||
{
|
||||
title: '上报单位',
|
||||
dataIndex: 'ReportUnit',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '主题',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '违法状态',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: statusOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'viotype',
|
||||
label: '违法类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: violationTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'pointname',
|
||||
label: '盗采点名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: '[begindate, enddate]',
|
||||
label: '上报时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 5 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue