fix:修改页面bug
This commit is contained in:
5g0Wp7Zy
parent
e71013676d
commit
325fc0e926
@ -1,280 +1,285 @@
|
||||
<template>
|
||||
<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="0" tab="待处理" force-render></a-tab-pane>
|
||||
<a-tab-pane key="1" tab="处理中"></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已处理"></a-tab-pane>
|
||||
</a-tabs>
|
||||
<a-form
|
||||
:label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
|
||||
:wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="反馈时间">
|
||||
<a-range-picker v-model:value="queryform.backTime" :placeholder="['反馈时间起','反馈时间止']" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" style="background-color: #5cc750" @click="search"
|
||||
>查询</a-button
|
||||
>
|
||||
<!-- <a-button>重置</a-button> -->
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<a-spin
|
||||
:spinning="spinning"
|
||||
:tip="tipContent"
|
||||
<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="0" tab="待处理" force-render></a-tab-pane>
|
||||
<a-tab-pane key="1" tab="处理中"></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已处理"></a-tab-pane>
|
||||
</a-tabs>
|
||||
<a-form
|
||||
:label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
|
||||
:wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="反馈时间">
|
||||
<a-range-picker
|
||||
v-model:value="queryform.backTime"
|
||||
:placeholder="['反馈时间起', '反馈时间止']"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" style="background-color: #5cc750" @click="search"
|
||||
>查询</a-button
|
||||
>
|
||||
<!-- <a-button>重置</a-button> -->
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<a-spin :spinning="spinning" :tip="tipContent">
|
||||
<a-table
|
||||
:pagination="pagination"
|
||||
@change="handleTableChange"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
>
|
||||
<a-table
|
||||
:pagination="pagination"
|
||||
@change="handleTableChange"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
>
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<SettingOutlined style="margin-right: 5px" />{{ column.title }}
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'dealState'">
|
||||
{{ record.dealState == '0' ? '未处理' : record.dealState == '1' ? '处理中' : record.dealState == '2' ? '已处理' : '' }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space v-if="record.dealState == '0'">
|
||||
<a @click="handleDeal(record)">处理</a>
|
||||
</a-space>
|
||||
<a-space v-if="record.dealState == '1'">
|
||||
<a @click="handleDeal(record)">完成处理</a>
|
||||
</a-space>
|
||||
<!-- <a-divider type="vertical" /> -->
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
<!-- 处理停车点申请 -->
|
||||
<a-modal
|
||||
v-model:open="open"
|
||||
:title="openTitle"
|
||||
@ok="handleOkModal"
|
||||
@cancel="handleCancelModal"
|
||||
width="800px"
|
||||
:maskClosable="false"
|
||||
>
|
||||
<BackSiteForm ref="formModel"></BackSiteForm>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { callOrder } from '@/apis/call.js'
|
||||
import { message } from 'ant-design-vue'
|
||||
import config from '@/utils/config.js'
|
||||
import { dataFormat } from '@/utils/tools'
|
||||
import { getCache } from '@/utils/authority';
|
||||
import BackSiteForm from '@/views/form/backsite/BackSiteForm.vue'
|
||||
const activeKey = ref('');
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<SettingOutlined style="margin-right: 5px" />{{ column.title }}
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'dealState'">
|
||||
{{
|
||||
record.dealState == '0'
|
||||
? '未处理'
|
||||
: record.dealState == '1'
|
||||
? '处理中'
|
||||
: record.dealState == '2'
|
||||
? '已处理'
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space v-if="record.dealState == '0'">
|
||||
<a @click="handleDeal(record)">处理</a>
|
||||
</a-space>
|
||||
<a-space v-if="record.dealState == '1'">
|
||||
<a @click="handleDeal(record)">完成处理</a>
|
||||
</a-space>
|
||||
<!-- <a-divider type="vertical" /> -->
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
<!-- 处理停车点申请 -->
|
||||
<a-modal
|
||||
v-model:open="open"
|
||||
:title="openTitle"
|
||||
@ok="handleOkModal"
|
||||
@cancel="handleCancelModal"
|
||||
width="800px"
|
||||
:maskClosable="false"
|
||||
>
|
||||
<BackSiteForm ref="formModel"></BackSiteForm>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||||
import { callOrder } from '@/apis/call.js'
|
||||
import { message } from 'ant-design-vue'
|
||||
import config from '@/utils/config.js'
|
||||
import { dataFormat } from '@/utils/tools'
|
||||
import { getCache } from '@/utils/authority'
|
||||
import BackSiteForm from '@/views/form/backsite/BackSiteForm.vue'
|
||||
const activeKey = ref('')
|
||||
|
||||
const open = ref(false);
|
||||
const openTitle = ref('处理停车点申请');
|
||||
const formModel = ref(null);
|
||||
const open = ref(false)
|
||||
const openTitle = ref('处理停车点申请')
|
||||
const formModel = ref(null)
|
||||
|
||||
const spinning = ref(false);
|
||||
const tipContent = ref("加载中...");
|
||||
// 表格行数据
|
||||
const dataSource = ref([]);
|
||||
const data = ref([])
|
||||
// 查询相关
|
||||
const queryform = ref({
|
||||
regionId: '',
|
||||
state: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
backTime: [
|
||||
'',
|
||||
''
|
||||
],
|
||||
pageParam: {
|
||||
pageNum: config.pageParam.pageNum,
|
||||
pageSize: config.pageParam.pageSize
|
||||
const spinning = ref(false)
|
||||
const tipContent = ref('加载中...')
|
||||
// 表格行数据
|
||||
const dataSource = ref([])
|
||||
const data = ref([])
|
||||
// 查询相关
|
||||
const queryform = ref({
|
||||
regionId: '',
|
||||
state: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
backTime: ['', ''],
|
||||
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({
|
||||
total: dataSource.value.length,
|
||||
current: queryform.value.pageParam.pageNum,
|
||||
pageSize: queryform.value.pageParam.pageSize,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: config.pageParam.pageSizeOptions,
|
||||
showQuickJumper: true
|
||||
/**
|
||||
* 处理停车点申请modal确定
|
||||
*/
|
||||
const handleOkModal = () => {
|
||||
formModel.value.formSave((bres) => {
|
||||
open.value = false
|
||||
if (bres) {
|
||||
getData()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
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 handleCancelModal = () => {
|
||||
formModel.value.resetAll((bres) => {
|
||||
if (bres) open.value = false
|
||||
})
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理停车点申请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>
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user