fix:修改页面bug
This commit is contained in:
5g0Wp7Zy
parent
e71013676d
commit
325fc0e926
@ -1,280 +1,285 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-tabs v-model:activeKey="activeKey" @change="onTabChange" style="width: 100%; margin-top: 10px;">
|
<a-tabs v-model:activeKey="activeKey" @change="onTabChange" style="width: 100%; margin-top: 10px">
|
||||||
<a-tab-pane key="" tab="全部"></a-tab-pane>
|
<a-tab-pane key="" tab="全部"></a-tab-pane>
|
||||||
<a-tab-pane key="0" tab="待处理" force-render></a-tab-pane>
|
<a-tab-pane key="0" tab="待处理" force-render></a-tab-pane>
|
||||||
<a-tab-pane key="1" tab="处理中"></a-tab-pane>
|
<a-tab-pane key="1" tab="处理中"></a-tab-pane>
|
||||||
<a-tab-pane key="2" tab="已处理"></a-tab-pane>
|
<a-tab-pane key="2" tab="已处理"></a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
<a-form
|
<a-form
|
||||||
:label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
|
:label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
|
||||||
:wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
|
:wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
|
||||||
>
|
>
|
||||||
<a-row :gutter="8">
|
<a-row :gutter="8">
|
||||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
<a-form-item label="反馈时间">
|
<a-form-item label="反馈时间">
|
||||||
<a-range-picker v-model:value="queryform.backTime" :placeholder="['反馈时间起','反馈时间止']" />
|
<a-range-picker
|
||||||
</a-form-item>
|
v-model:value="queryform.backTime"
|
||||||
</a-col>
|
:placeholder="['反馈时间起', '反馈时间止']"
|
||||||
<a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
|
/>
|
||||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
</a-form-item>
|
||||||
<a-space>
|
</a-col>
|
||||||
<a-button type="primary" style="background-color: #5cc750" @click="search"
|
<a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
>查询</a-button
|
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||||
>
|
<a-space>
|
||||||
<!-- <a-button>重置</a-button> -->
|
<a-button type="primary" style="background-color: #5cc750" @click="search"
|
||||||
</a-space>
|
>查询</a-button
|
||||||
</a-form-item>
|
>
|
||||||
</a-col>
|
<!-- <a-button>重置</a-button> -->
|
||||||
</a-row>
|
</a-space>
|
||||||
</a-form>
|
</a-form-item>
|
||||||
<!-- 表格 -->
|
</a-col>
|
||||||
<a-spin
|
</a-row>
|
||||||
:spinning="spinning"
|
</a-form>
|
||||||
:tip="tipContent"
|
<!-- 表格 -->
|
||||||
|
<a-spin :spinning="spinning" :tip="tipContent">
|
||||||
|
<a-table
|
||||||
|
:pagination="pagination"
|
||||||
|
@change="handleTableChange"
|
||||||
|
bordered
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource"
|
||||||
>
|
>
|
||||||
<a-table
|
<template #headerCell="{ column }">
|
||||||
:pagination="pagination"
|
<template v-if="column.key === 'action'">
|
||||||
@change="handleTableChange"
|
<SettingOutlined style="margin-right: 5px" />{{ column.title }}
|
||||||
bordered
|
</template>
|
||||||
:columns="columns"
|
</template>
|
||||||
:dataSource="dataSource"
|
<template #bodyCell="{ column, record }">
|
||||||
>
|
<template v-if="column.key === 'dealState'">
|
||||||
<template #headerCell="{ column }">
|
{{
|
||||||
<template v-if="column.key === 'action'">
|
record.dealState == '0'
|
||||||
<SettingOutlined style="margin-right: 5px" />{{ column.title }}
|
? '未处理'
|
||||||
</template>
|
: record.dealState == '1'
|
||||||
</template>
|
? '处理中'
|
||||||
<template #bodyCell="{ column, record }">
|
: record.dealState == '2'
|
||||||
<template v-if="column.key === 'dealState'">
|
? '已处理'
|
||||||
{{ record.dealState == '0' ? '未处理' : record.dealState == '1' ? '处理中' : record.dealState == '2' ? '已处理' : '' }}
|
: ''
|
||||||
</template>
|
}}
|
||||||
<template v-if="column.key === 'action'">
|
</template>
|
||||||
<a-space v-if="record.dealState == '0'">
|
<template v-if="column.key === 'action'">
|
||||||
<a @click="handleDeal(record)">处理</a>
|
<a-space v-if="record.dealState == '0'">
|
||||||
</a-space>
|
<a @click="handleDeal(record)">处理</a>
|
||||||
<a-space v-if="record.dealState == '1'">
|
</a-space>
|
||||||
<a @click="handleDeal(record)">完成处理</a>
|
<a-space v-if="record.dealState == '1'">
|
||||||
</a-space>
|
<a @click="handleDeal(record)">完成处理</a>
|
||||||
<!-- <a-divider type="vertical" /> -->
|
</a-space>
|
||||||
</template>
|
<!-- <a-divider type="vertical" /> -->
|
||||||
</template>
|
</template>
|
||||||
</a-table>
|
</template>
|
||||||
</a-spin>
|
</a-table>
|
||||||
<!-- 处理停车点申请 -->
|
</a-spin>
|
||||||
<a-modal
|
<!-- 处理停车点申请 -->
|
||||||
v-model:open="open"
|
<a-modal
|
||||||
:title="openTitle"
|
v-model:open="open"
|
||||||
@ok="handleOkModal"
|
:title="openTitle"
|
||||||
@cancel="handleCancelModal"
|
@ok="handleOkModal"
|
||||||
width="800px"
|
@cancel="handleCancelModal"
|
||||||
:maskClosable="false"
|
width="800px"
|
||||||
>
|
:maskClosable="false"
|
||||||
<BackSiteForm ref="formModel"></BackSiteForm>
|
>
|
||||||
</a-modal>
|
<BackSiteForm ref="formModel"></BackSiteForm>
|
||||||
</template>
|
</a-modal>
|
||||||
<script setup>
|
</template>
|
||||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
<script setup>
|
||||||
import { callOrder } from '@/apis/call.js'
|
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { callOrder } from '@/apis/call.js'
|
||||||
import config from '@/utils/config.js'
|
import { message } from 'ant-design-vue'
|
||||||
import { dataFormat } from '@/utils/tools'
|
import config from '@/utils/config.js'
|
||||||
import { getCache } from '@/utils/authority';
|
import { dataFormat } from '@/utils/tools'
|
||||||
import BackSiteForm from '@/views/form/backsite/BackSiteForm.vue'
|
import { getCache } from '@/utils/authority'
|
||||||
const activeKey = ref('');
|
import BackSiteForm from '@/views/form/backsite/BackSiteForm.vue'
|
||||||
|
const activeKey = ref('')
|
||||||
|
|
||||||
const open = ref(false);
|
const open = ref(false)
|
||||||
const openTitle = ref('处理停车点申请');
|
const openTitle = ref('处理停车点申请')
|
||||||
const formModel = ref(null);
|
const formModel = ref(null)
|
||||||
|
|
||||||
const spinning = ref(false);
|
const spinning = ref(false)
|
||||||
const tipContent = ref("加载中...");
|
const tipContent = ref('加载中...')
|
||||||
// 表格行数据
|
// 表格行数据
|
||||||
const dataSource = ref([]);
|
const dataSource = ref([])
|
||||||
const data = ref([])
|
const data = ref([])
|
||||||
// 查询相关
|
// 查询相关
|
||||||
const queryform = ref({
|
const queryform = ref({
|
||||||
regionId: '',
|
regionId: '',
|
||||||
state: '',
|
state: '',
|
||||||
startTime: '',
|
startTime: '',
|
||||||
endTime: '',
|
endTime: '',
|
||||||
backTime: [
|
backTime: ['', ''],
|
||||||
'',
|
pageParam: {
|
||||||
''
|
pageNum: config.pageParam.pageNum,
|
||||||
],
|
pageSize: config.pageParam.pageSize
|
||||||
pageParam: {
|
}
|
||||||
pageNum: config.pageParam.pageNum,
|
})
|
||||||
pageSize: config.pageParam.pageSize
|
|
||||||
|
//对于每页数据的管理
|
||||||
|
let pagination = reactive({
|
||||||
|
total: dataSource.value.length,
|
||||||
|
current: queryform.value.pageParam.pageNum,
|
||||||
|
pageSize: queryform.value.pageParam.pageSize,
|
||||||
|
showSizeChanger: true,
|
||||||
|
pageSizeOptions: config.pageParam.pageSizeOptions,
|
||||||
|
showQuickJumper: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表格列配置
|
||||||
|
const columns = ref([
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
key: 'index',
|
||||||
|
width: 70,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'index'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'applySource',
|
||||||
|
title: '上报来源',
|
||||||
|
dataIndex: 'applySource',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'applyNickname',
|
||||||
|
title: '昵称',
|
||||||
|
dataIndex: 'applyNickname',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'applyPhone',
|
||||||
|
title: '手机号',
|
||||||
|
dataIndex: 'applyPhone',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'applyTime',
|
||||||
|
title: '反馈时间',
|
||||||
|
dataIndex: 'applyTime',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'dealState',
|
||||||
|
title: '处理状态',
|
||||||
|
dataIndex: 'dealState',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'applyPosition',
|
||||||
|
title: '反馈位置',
|
||||||
|
dataIndex: 'applyPosition',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'applyReason',
|
||||||
|
title: '申请原因',
|
||||||
|
dataIndex: 'applyReason',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'dealNotes',
|
||||||
|
title: '操作备注',
|
||||||
|
dataIndex: 'dealNotes',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'dealUser',
|
||||||
|
title: '操作人',
|
||||||
|
dataIndex: 'dealUser',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'dealTime',
|
||||||
|
title: '处理时间',
|
||||||
|
dataIndex: 'dealTime',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 320,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
//获取用户列表数据并格式化字段
|
||||||
|
onMounted(async () => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
spinning.value = true
|
||||||
|
let queryparams = queryform.value
|
||||||
|
if (queryparams.backTime && queryparams.backTime[0] != '') {
|
||||||
|
queryparams.startTime = dataFormat(queryparams.backTime[0], 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
}
|
||||||
|
if (queryparams.backTime && queryparams.backTime[1] != '') {
|
||||||
|
queryparams.endTime = dataFormat(queryparams.backTime[1], 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
}
|
||||||
|
delete queryparams.backTime
|
||||||
|
//获取默认区域
|
||||||
|
const userdefultoperation = getCache('ebike-userdefultoperation')
|
||||||
|
queryparams.regionId = userdefultoperation?.regionId
|
||||||
|
const res = await callOrder('/ebikeUserBacksite/page', queryparams)
|
||||||
|
spinning.value = false
|
||||||
|
if (res.code != 200) {
|
||||||
|
message.error(res.message)
|
||||||
|
dataSource.value = []
|
||||||
|
data.value = []
|
||||||
|
pagination.total = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
data.value = res.data.records
|
||||||
|
data.value = data.value.map((item, index) => {
|
||||||
|
index++
|
||||||
|
return { ...item, index }
|
||||||
|
})
|
||||||
|
dataSource.value = data.value
|
||||||
|
pagination.total = res.data.totalRow
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对每页数据显示的交互
|
||||||
|
let handleTableChange = (pagina) => {
|
||||||
|
pagination.current = pagina.current
|
||||||
|
pagination.pageSize = pagina.pageSize
|
||||||
|
queryform.value.pageParam.pageNum = pagina.current
|
||||||
|
queryform.value.pageParam.pageSize = pagina.pageSize
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const search = () => {
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onTabChange = (key) => {
|
||||||
|
activeKey.value = key
|
||||||
|
queryform.value.state = key
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeal = async (record) => {
|
||||||
|
open.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
if (formModel.value) {
|
||||||
|
formModel.value.openForm({ ...record })
|
||||||
|
} else {
|
||||||
|
console.log('formModel is not ready yet')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
//对于每页数据的管理
|
/**
|
||||||
let pagination = reactive({
|
* 处理停车点申请modal确定
|
||||||
total: dataSource.value.length,
|
*/
|
||||||
current: queryform.value.pageParam.pageNum,
|
const handleOkModal = () => {
|
||||||
pageSize: queryform.value.pageParam.pageSize,
|
formModel.value.formSave((bres) => {
|
||||||
showSizeChanger: true,
|
open.value = false
|
||||||
pageSizeOptions: config.pageParam.pageSizeOptions,
|
if (bres) {
|
||||||
showQuickJumper: true
|
getData()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 表格列配置
|
const handleCancelModal = () => {
|
||||||
const columns = ref([
|
formModel.value.resetAll((bres) => {
|
||||||
{
|
if (bres) open.value = false
|
||||||
title: '序号',
|
|
||||||
key: 'index',
|
|
||||||
width: 70,
|
|
||||||
align: 'center',
|
|
||||||
dataIndex: 'index'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'applySource',
|
|
||||||
title: '上报来源',
|
|
||||||
dataIndex: 'applySource',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'applyNickname',
|
|
||||||
title: '昵称',
|
|
||||||
dataIndex: 'applyNickname',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'applyPhone',
|
|
||||||
title: '手机号',
|
|
||||||
dataIndex: 'applyPhone',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'applyTime',
|
|
||||||
title: '反馈时间',
|
|
||||||
dataIndex: 'applyTime',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'dealState',
|
|
||||||
title: '处理状态',
|
|
||||||
dataIndex: 'dealState',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'applyPosition',
|
|
||||||
title: '反馈位置',
|
|
||||||
dataIndex: 'applyPosition',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'applyReason',
|
|
||||||
title: '申请原因',
|
|
||||||
dataIndex: 'applyReason',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'dealNotes',
|
|
||||||
title: '操作备注',
|
|
||||||
dataIndex: 'dealNotes',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'dealUser',
|
|
||||||
title: '操作人',
|
|
||||||
dataIndex: 'dealUser',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'dealTime',
|
|
||||||
title: '处理时间',
|
|
||||||
dataIndex: 'dealTime',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
width: 320,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
//获取用户列表数据并格式化字段
|
|
||||||
onMounted(async () => {
|
|
||||||
getData();
|
|
||||||
})
|
})
|
||||||
|
}
|
||||||
const getData = async () => {
|
</script>
|
||||||
spinning.value = true;
|
|
||||||
let queryparams = queryform.value;
|
|
||||||
if (queryparams.backTime && queryparams.backTime[0] != '') {
|
|
||||||
queryparams.startTime = dataFormat(queryparams.backTime[0], 'yyyy-MM-dd HH:mm:ss');
|
|
||||||
}
|
|
||||||
if (queryparams.backTime && queryparams.backTime[1]!= '') {
|
|
||||||
queryparams.endTime = dataFormat(queryparams.backTime[1], 'yyyy-MM-dd HH:mm:ss');
|
|
||||||
}
|
|
||||||
delete queryparams.backTime;
|
|
||||||
//获取默认区域
|
|
||||||
const userdefultoperation = getCache('ebike-userdefultoperation');
|
|
||||||
queryparams.regionId = userdefultoperation.regionId;
|
|
||||||
const res = await callOrder("/ebikeUserBacksite/page", queryparams);
|
|
||||||
spinning.value = false;
|
|
||||||
if (res.code != 200) {
|
|
||||||
message.error(res.message)
|
|
||||||
dataSource.value = []
|
|
||||||
data.value = []
|
|
||||||
pagination.total = 0
|
|
||||||
return
|
|
||||||
}
|
|
||||||
data.value = res.data.records
|
|
||||||
data.value = data.value.map((item, index) => {
|
|
||||||
index++
|
|
||||||
return { ...item, index }
|
|
||||||
})
|
|
||||||
dataSource.value = data.value
|
|
||||||
pagination.total = res.data.totalRow
|
|
||||||
}
|
|
||||||
|
|
||||||
// 对每页数据显示的交互
|
|
||||||
let handleTableChange = (pagina) => {
|
|
||||||
pagination.current = pagina.current
|
|
||||||
pagination.pageSize = pagina.pageSize
|
|
||||||
queryform.value.pageParam.pageNum = pagina.current
|
|
||||||
queryform.value.pageParam.pageSize = pagina.pageSize
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const search = () => {
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const onTabChange = (key) => {
|
|
||||||
activeKey.value = key;
|
|
||||||
queryform.value.state = key;
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDeal = async (record) => {
|
|
||||||
open.value = true;
|
|
||||||
nextTick(() => {
|
|
||||||
if (formModel.value) {
|
|
||||||
formModel.value.openForm({ ...record });
|
|
||||||
} else {
|
|
||||||
console.log('formModel is not ready yet');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理停车点申请modal确定
|
|
||||||
*/
|
|
||||||
const handleOkModal = () => {
|
|
||||||
formModel.value.formSave(bres => {
|
|
||||||
open.value = false;
|
|
||||||
if(bres){
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCancelModal = () => {
|
|
||||||
formModel.value.resetAll(bres => {
|
|
||||||
if(bres) open.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user