|
|
|
@ -1,19 +1,21 @@ |
|
|
|
import html, { getProp } from "html"; |
|
|
|
import AppForm from "../form/index.js"; |
|
|
|
import { get, post } from "../../request/index.js"; |
|
|
|
import { ref, reactive } from "vue"; |
|
|
|
import { defineAsyncComponent, ref, reactive, onMounted } from "vue"; |
|
|
|
import { useRoute, useRouter } from "vue-router"; |
|
|
|
import { useI18n } from "vue-i18n"; |
|
|
|
import SvgIcon from "../../components/icon/index.js"; |
|
|
|
import { schemaToModel } from "../../utils/index.js"; |
|
|
|
import { listToTree, schemaToModel } from "../../utils/index.js"; |
|
|
|
import qs from "../../lib/qs/shim.js"; |
|
|
|
import AppFormInput from "../form/form-input.js"; |
|
|
|
import VueOfficeExcel from "@vue-office/excel"; |
|
|
|
import { camelCase, capitalize } from "lodash"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "AppList", |
|
|
|
components: { AppForm, SvgIcon, AppFormInput, VueOfficeExcel }, |
|
|
|
components: { |
|
|
|
AppForm: defineAsyncComponent(() => import("../form/index.js")), |
|
|
|
SvgIcon: defineAsyncComponent(() => import("../../components/icon/index.js")), |
|
|
|
AppFormInput: defineAsyncComponent(() => import("../form/form-input.js")), |
|
|
|
VueOfficeExcel, |
|
|
|
}, |
|
|
|
template: html` |
|
|
|
<el-row> |
|
|
|
<el-col> |
|
|
|
@ -49,22 +51,22 @@ export default { |
|
|
|
<el-scrollbar> |
|
|
|
<el-table |
|
|
|
ref="tableRef" |
|
|
|
v-loading="tableLoading" |
|
|
|
:v-loading="tableLoading" |
|
|
|
:tree-props="treeProps" |
|
|
|
:data="tableData" |
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
@sort-change="sortChange" |
|
|
|
:header-cell-class-name="getClass" |
|
|
|
row-key="id" |
|
|
|
table-layout="auto" |
|
|
|
border |
|
|
|
fit |
|
|
|
:data="data.items" |
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
@sort-change="sortChange" |
|
|
|
:header-cell-class-name="getClass" |
|
|
|
v-if="data.items" |
|
|
|
> |
|
|
|
<el-table-column fixed="left" type="selection" /> |
|
|
|
<el-table-column type="index" :label="$t('rowIndex')"> |
|
|
|
<template #default="scope"> {{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }} </template> |
|
|
|
</el-table-column> |
|
|
|
<template v-for="(item,key) in tableSchema.items.properties"> |
|
|
|
<template v-for="(item,key) in tableSchema.properties"> |
|
|
|
<template v-if="key==='properties'"> |
|
|
|
<el-table-column :label="subKey" v-for="(subItem,subKey) in item.properties"> |
|
|
|
<template #default="scope">{{ scope.row[key][subKey] }} </template> |
|
|
|
@ -126,7 +128,7 @@ export default { |
|
|
|
<el-row> |
|
|
|
<el-col> |
|
|
|
<el-pagination |
|
|
|
v-if="data.items&&data.pageSize<data.totalCount" |
|
|
|
v-if="tableData.length&&data.pageSize<data.totalCount" |
|
|
|
v-model:currentPage="data.pageIndex" |
|
|
|
v-model:page-size="data.pageSize" |
|
|
|
:total="data.totalCount" |
|
|
|
@ -216,6 +218,9 @@ export default { |
|
|
|
props: ["modelValue", "controller", "buttons"], |
|
|
|
emits: ["command"], |
|
|
|
async setup(props, context) { |
|
|
|
const treeProps = reactive({ |
|
|
|
children: "children", |
|
|
|
}); |
|
|
|
const tableRef = ref(null); |
|
|
|
const columns = ref([]); |
|
|
|
const filterDrawer = ref(false); |
|
|
|
@ -230,13 +235,23 @@ export default { |
|
|
|
const buttons = ref(props.buttons ?? route.meta.buttons); |
|
|
|
const baseUrl = props.controller ?? `${route.meta.controller}`; |
|
|
|
const indexUrl = `${baseUrl}/index`; |
|
|
|
const vm = (await get(indexUrl)).data; |
|
|
|
const schema = vm.schema; |
|
|
|
const data = reactive(vm.model ?? schemaToModel(schema)); |
|
|
|
//Object.assign(data,prop.)
|
|
|
|
const data = ref({}); |
|
|
|
const sortColumns = ref(new Map()); |
|
|
|
const queryFromSchema = ref({}); |
|
|
|
const tableSchema = ref({}); |
|
|
|
const tableData = ref([]); |
|
|
|
const editFormRef = ref(null); |
|
|
|
const editFormloading = ref(false); |
|
|
|
const editFormMode = ref(null); |
|
|
|
const editFormTitle = ref(""); |
|
|
|
const editFormSchema = reactive({}); |
|
|
|
const editFormModel = reactive({}); |
|
|
|
const exportModel = reactive({ |
|
|
|
includeAll: false, |
|
|
|
includeDeleted: false, |
|
|
|
}); |
|
|
|
const getSortModel = (model) => { |
|
|
|
const orderBy = model.orderBy |
|
|
|
model.orderBy |
|
|
|
.split(",") |
|
|
|
.map((o) => o.trim()) |
|
|
|
.filter((o) => o) |
|
|
|
@ -245,32 +260,30 @@ export default { |
|
|
|
order: (o.split(" ").filter((o) => o)[1] ?? "asc") + "ending", |
|
|
|
})) |
|
|
|
.forEach((o) => sortColumns.value.set(o.prop, o.order)); |
|
|
|
return orderBy; |
|
|
|
}; |
|
|
|
const sortModel = reactive(getSortModel(data)); |
|
|
|
const getColumns = (schema) => { |
|
|
|
Object.keys(schema.properties).forEach((propertyName) => { |
|
|
|
const property = schema.properties[propertyName]; |
|
|
|
if (property.type !== "object" && property.type !== "array" && !property.hidden) { |
|
|
|
columns.value.push({ name: propertyName, title: property.title, checked: true }); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
const getClass = ({ row, column }) => { |
|
|
|
if (column.property) { |
|
|
|
column.order = sortColumns.value.get(column.property); |
|
|
|
} |
|
|
|
}; |
|
|
|
const sortChange = ({ column, prop, order }) => { |
|
|
|
const sortChange = async ({ column, prop, order }) => { |
|
|
|
if (order === null) { |
|
|
|
sortColumns.value.delete(prop); |
|
|
|
} else { |
|
|
|
sortColumns.value.set(prop, order); |
|
|
|
} |
|
|
|
data.orderBy = Array.from(sortColumns.value) |
|
|
|
data.value.orderBy = Array.from(sortColumns.value) |
|
|
|
.map((o) => capitalize(o[0]) + (o[1] === "ascending" ? "" : ` DESC`)) |
|
|
|
.join(","); |
|
|
|
load(indexUrl); |
|
|
|
}; |
|
|
|
const getColumns = (schema) => { |
|
|
|
Object.keys(schema.properties).forEach((propertyName) => { |
|
|
|
const property = schema.properties[propertyName]; |
|
|
|
if (property.type !== "object" && property.type !== "array" && !property.hidden) { |
|
|
|
columns.value.push({ name: propertyName, title: property.title, checked: true }); |
|
|
|
} |
|
|
|
}); |
|
|
|
await load(indexUrl); |
|
|
|
}; |
|
|
|
const showColumn = (item, prop) => { |
|
|
|
return ( |
|
|
|
@ -280,35 +293,29 @@ export default { |
|
|
|
columns.value.findIndex((o) => o.name === prop && o.checked) >= 0 |
|
|
|
); |
|
|
|
}; |
|
|
|
getColumns(schema.properties.query); |
|
|
|
const queryFromSchema = schema.properties.query; |
|
|
|
const tableSchema = schema.properties.items; |
|
|
|
const editFormRef = ref(null); |
|
|
|
const editFormloading = ref(false); |
|
|
|
const editFormMode = ref(null); |
|
|
|
const editFormTitle = ref(""); |
|
|
|
const editFormSchema = reactive({}); |
|
|
|
const editFormModel = reactive({}); |
|
|
|
const exportModel = reactive({ |
|
|
|
includeAll: false, |
|
|
|
includeDeleted: false, |
|
|
|
}); |
|
|
|
|
|
|
|
const handleSelectionChange = (rows) => (selectedRows.value = rows); |
|
|
|
const load = async (url) => { |
|
|
|
tableLoading.value = true; |
|
|
|
try { |
|
|
|
const postData = JSON.parse(JSON.stringify(data)); |
|
|
|
delete postData["Id"]; |
|
|
|
delete postData["items"]; |
|
|
|
Object.assign(data, (await post(url, postData)).data); |
|
|
|
const postData = JSON.parse(JSON.stringify(data.value)); |
|
|
|
// delete postData["Id"];
|
|
|
|
// delete postData["items"];
|
|
|
|
const listData = (await post(url, postData)).data; |
|
|
|
if (tableSchema.value.isTree) { |
|
|
|
listData.items = listToTree(listData.items); |
|
|
|
} |
|
|
|
tableData.value = listData.items; |
|
|
|
delete listData["items"]; |
|
|
|
data.value = listData; |
|
|
|
} catch (error) { |
|
|
|
console.log(error); |
|
|
|
} finally { |
|
|
|
tableLoading.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
const onPageIndexChange = () => load(indexUrl); |
|
|
|
const onPageSizeChange = () => load(indexUrl); |
|
|
|
const onPageIndexChange = async () => await load(indexUrl); |
|
|
|
const onPageSizeChange = async () => await load(indexUrl); |
|
|
|
const click = async (item, rows) => { |
|
|
|
editFormMode.value = item.path; |
|
|
|
context.emit("command", item, rows); |
|
|
|
@ -383,7 +390,7 @@ export default { |
|
|
|
editFormloading.value = false; |
|
|
|
} |
|
|
|
} else if (editFormMode.value === "details") { |
|
|
|
load(indexUrl); |
|
|
|
await load(indexUrl); |
|
|
|
editFormMode.value = null; |
|
|
|
dialogVisible.value = false; |
|
|
|
} |
|
|
|
@ -410,8 +417,18 @@ export default { |
|
|
|
subDrawer.value = true; |
|
|
|
} |
|
|
|
}; |
|
|
|
await load(indexUrl); |
|
|
|
onMounted(async () => { |
|
|
|
const vm = (await get(indexUrl)).data; |
|
|
|
const schema = vm.schema; |
|
|
|
queryFromSchema.value = schema.properties.query; |
|
|
|
tableSchema.value = schema.properties.items.items; |
|
|
|
data.value = vm.model ?? schemaToModel(schema); |
|
|
|
getSortModel(data.value); |
|
|
|
getColumns(schema.properties.query); |
|
|
|
await load(indexUrl); |
|
|
|
}); |
|
|
|
return { |
|
|
|
treeProps, |
|
|
|
tableRef, |
|
|
|
tableLoading, |
|
|
|
columns, |
|
|
|
@ -420,12 +437,11 @@ export default { |
|
|
|
subDrawer, |
|
|
|
dialogVisible, |
|
|
|
selectedRows, |
|
|
|
schema, |
|
|
|
queryFromSchema, |
|
|
|
tableSchema, |
|
|
|
buttons, |
|
|
|
data, |
|
|
|
sortModel, |
|
|
|
tableData, |
|
|
|
getClass, |
|
|
|
sortChange, |
|
|
|
getProp, |
|
|
|
|
wanggang
1 year ago