接口对接
parent
b656067110
commit
8c6108e16e
@ -1,229 +1,122 @@
|
||||
<template>
|
||||
<BasicTable @register="registerTable" >
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'streetname'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handlePreViewData.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
<a-table :columns="columns.col" :data-source="columns.data" size="small" height="300px" bordered :pagination="pagination.pagination">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a @click="viewDetail(record)">详情</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
title="案件详情"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="true"
|
||||
:showCancelBtn="false"
|
||||
:showOkBtn="false"
|
||||
:draggable="false"
|
||||
>
|
||||
<CaseView :caseId="caseId"></CaseView>
|
||||
</BasicModal>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive,defineProps,watch } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction, FormSchema } from '@/components/Table';
|
||||
import { getRoleListByPage,getReportList, deleteRole } from '@/api/demo/system';
|
||||
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
import { columns,columnsDataPreview,searchFormSchema } from './record.data';
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
import { reactive,ref,defineProps,watch } from 'vue';
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { getCaseInfoList } from '@/api/demo/system';
|
||||
import { CaseView } from '@/views/demo/monitor/index';
|
||||
const [registerModal, { openModal, setModalProps }] = useModal();
|
||||
|
||||
const props = defineProps<{
|
||||
tablist:Object,
|
||||
currentListQuery:Object
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
tablist:Object,
|
||||
currentListQuery:Object
|
||||
}>()
|
||||
const caseId = ref('');
|
||||
let columns = reactive({data:[{},{},{}],col:[{
|
||||
title: '案件编号',
|
||||
dataIndex: 'case_no',
|
||||
},
|
||||
{
|
||||
title: '社区/村',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '案件描述',
|
||||
dataIndex: 'case_description',
|
||||
},{
|
||||
title: '所属类型',
|
||||
dataIndex: 'typename',
|
||||
},{
|
||||
title: '处理人',
|
||||
dataIndex: 'deal_username',
|
||||
},{
|
||||
title: '处理时间',
|
||||
dataIndex: 'deal_time',
|
||||
},{
|
||||
title: '审核人',
|
||||
dataIndex: 'verifyuser',
|
||||
},{
|
||||
title: '审核时间',
|
||||
dataIndex: 'verifytime',
|
||||
},{
|
||||
title: '案件状态',
|
||||
dataIndex: 'handle_status_name',
|
||||
},{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
}]});
|
||||
let total = ref(0)
|
||||
|
||||
function viewDetail(record) {
|
||||
console.log(record);
|
||||
caseId.value = record.id;
|
||||
openModal();
|
||||
}
|
||||
|
||||
let pageSize = ref(props.currentListQuery.limit)
|
||||
let current = ref(props.currentListQuery.page)
|
||||
|
||||
console.log("propspropsprops",props.tablist);
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
const [registerModal, { openModal: openRoleModal }] = useModal();
|
||||
const [registerModulesModal, { openModal: openModulesModal }] = useModal();
|
||||
const [registerAccountModal, { openModal: openAccountModal }] = useModal();
|
||||
const searchInfo = reactive<Recordable>({});
|
||||
|
||||
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
// 表格名称
|
||||
title: '',
|
||||
// 获取数据的接口
|
||||
api: getReportList,
|
||||
// 表单列信息 BasicColumn[]
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: false,
|
||||
// 是否显示表格边框
|
||||
bordered: true,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 勾选列
|
||||
rowSelection: false,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
function handleCreate() {
|
||||
openRoleModal(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
function viewAccount(record: Recordable) {
|
||||
openAccountModal(true, {
|
||||
record,
|
||||
});
|
||||
}
|
||||
|
||||
function handlePreViewData(record:Recordable){
|
||||
|
||||
console.log(record)
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
let rows = getSelectRows();
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请勾选一个角色进行编辑');
|
||||
}
|
||||
const record = rows[0];
|
||||
openRoleModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
let rows = getSelectRows();
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请勾选一个角色进行删除');
|
||||
}
|
||||
const query = [rows[0].id];
|
||||
createConfirm({
|
||||
iconType: 'info',
|
||||
title: '删除',
|
||||
content: '确定要删除当前角色吗',
|
||||
onOk: async () => {
|
||||
const data = await deleteRole(query);
|
||||
if (data) {
|
||||
handleSuccess();
|
||||
return createMessage.success('删除成功');
|
||||
} else {
|
||||
return createMessage.error('删除失败');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handlePrint(){
|
||||
|
||||
}
|
||||
|
||||
function handleExport(){
|
||||
createMessage.success("数据导出成功！")
|
||||
}
|
||||
|
||||
watch(()=>props.currentListQuery,(newValue,oldValue)=>{
|
||||
while (searchFormSchema.length > 0) {
|
||||
searchFormSchema.pop();
|
||||
}
|
||||
console.log("EEEEEEE",props.currentListQuery);
|
||||
for(let item in props.currentListQuery){
|
||||
console.log('EEEEEEEEEEEE',item);
|
||||
let obj:any = {
|
||||
field: item,
|
||||
label: item,
|
||||
component: 'Input',
|
||||
defaultValue:props.currentListQuery[item],
|
||||
colProps: { span: 6 },
|
||||
}
|
||||
console.log("OBJ",obj);
|
||||
searchFormSchema.push(obj);
|
||||
function handlePageChange(page,pageSize){
|
||||
props.currentListQuery.page = page;
|
||||
props.currentListQuery.limit = pageSize;
|
||||
pageSize.value = pageSize;
|
||||
current.value = page;
|
||||
handleGetList()
|
||||
}
|
||||
|
||||
let pagination = reactive({
|
||||
pagination: {
|
||||
pageSize:pageSize, // 每页显示的条数
|
||||
showSizeChanger: true, // 是否可以改变每页显示的条数
|
||||
pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
|
||||
showQuickJumper: true, // 是否可以快速跳转到指定页
|
||||
showTotal:total=>`共${total}条`,
|
||||
current: current, // 当前页数
|
||||
total: total, // 总条数
|
||||
onChange:handlePageChange
|
||||
}
|
||||
reload();
|
||||
})
|
||||
|
||||
useTable({
|
||||
// 表格名称
|
||||
title: '',
|
||||
// 获取数据的接口
|
||||
api: getReportList,
|
||||
// 表单列信息 BasicColumn[]
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: false,
|
||||
// 是否显示表格边框
|
||||
bordered: true,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
function handleSuccess() {
|
||||
clearSelectedRowKeys();
|
||||
reload();
|
||||
reloadDataPreview();
|
||||
}
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnAdd':
|
||||
handleCreate();
|
||||
break;
|
||||
case 'btnEdit':
|
||||
handleEdit();
|
||||
break;
|
||||
case 'btnDelete':
|
||||
handleDelete();
|
||||
break;
|
||||
case 'btnModules':
|
||||
let rows = getSelectRows();
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请勾选一个角色进行编辑');
|
||||
}
|
||||
const record = rows[0];
|
||||
openModulesModal(true, {
|
||||
record,
|
||||
});
|
||||
break;
|
||||
case 'btnPrint':
|
||||
handlePrint();
|
||||
break;
|
||||
case 'btnExport':
|
||||
handleExport();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.data-preview-container{
|
||||
width:100%;
|
||||
height: calc( 100% - 50px);
|
||||
position:absolute;
|
||||
background:#fff;
|
||||
padding:30px;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
watch(()=>props.currentListQuery,(newValue,oldValue)=>{
|
||||
handleGetList();
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
|
||||
function handleGetList(){
|
||||
getCaseInfoList(props.currentListQuery).then(res=>{
|
||||
columns.data = res.items;
|
||||
total.value = res.total;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.editable-row-operations a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue