2 changed files with 891 additions and 3 deletions
@ -0,0 +1,872 @@ |
|||
import html, { getProp } from "html"; |
|||
import request, { getUrl } from "../../request/index.js"; |
|||
import { defineAsyncComponent, ref, reactive, onMounted, watch, nextTick } from "vue"; |
|||
import { useRoute, useRouter } from "vue-router"; |
|||
import { useI18n } from "vue-i18n"; |
|||
import { listToTree, schemaToModel, importFunction, format } from "../../utils/index.js"; |
|||
import { camelCase, capitalize } from "lodash"; |
|||
import { ElMessage, ElMessageBox } from "element-plus"; |
|||
|
|||
export default { |
|||
name: "AppList", |
|||
components: { |
|||
AppForm: defineAsyncComponent(() => import("../form/index.js")), |
|||
AppFormInput: defineAsyncComponent(() => import("../../components/form/form-input.js")), |
|||
SvgIcon: defineAsyncComponent(() => import("../../components/icon/index.js")), |
|||
AppFormInput: defineAsyncComponent(() => import("../form/form-input.js")), |
|||
}, |
|||
template: html` |
|||
<div class="c-list" v-loading="tableLoading" style="height:100%;"> |
|||
<div style="height:calc(100% - 52px);"> |
|||
<el-scrollbar ref="listScrollbarRef" :always="true" style="height:100%;"> |
|||
<el-row style="padding-bottom:20px;"> |
|||
<el-col> |
|||
<app-form inline mode="query" label-position="left" :schema="config.query.schema" v-model="queryModel" @submit="load" :hideButton="true" :isQueryForm="true"> |
|||
<template v-for="item in filterList.filter(o=>!o.hidden&&o.readOnly)"> |
|||
<template v-if="config.edit.schema.properties[item.column]?.title"> |
|||
<el-form-item :label="item.title??config.edit.schema.properties[item.column].title"> |
|||
<app-form-input v-model="item" :schema="config.edit.schema.properties[item.column]" prop="value" mode="query" /> |
|||
</el-form-item> |
|||
</template> |
|||
<div v-else>{{item.column}}</div> |
|||
</template> |
|||
</app-form> |
|||
<template v-for="item in buttons"> |
|||
<el-button |
|||
v-if="item.meta.isTop" |
|||
@click="click(item,selectedRows)" |
|||
:class="item.meta.htmlClass??'el-button--primary'" |
|||
v-show="!item.meta.show||item.meta.show(selectedRows,queryModel)" |
|||
:disabled="item.meta.disabled && item.meta.disabled.constructor === Function && item.meta.disabled(selectedRows,queryModel)" |
|||
> |
|||
<el-icon v-if="item.meta.icon"><svg-icon :name="item.meta.icon" /></el-icon> |
|||
<span>{{item.meta.title}}</span> |
|||
</el-button> |
|||
</template> |
|||
<el-button @click="click('filter',selectedRows)" v-if="config.query.hasFilter"> |
|||
<el-icon><ep-filter /></el-icon> |
|||
<span>{{$t('筛选')}}</span> |
|||
</el-button> |
|||
<slot name="tableButtons" :rows="selectedRows"></slot> |
|||
</el-col> |
|||
</el-row> |
|||
<el-table |
|||
:key="tableKey" |
|||
ref="tableRef" |
|||
:tree-props="treeProps" |
|||
:data="tableData" |
|||
@selection-change="handleSelectionChange" |
|||
@sort-change="sortChange" |
|||
:header-cell-class-name="getClass" |
|||
row-key="id" |
|||
table-layout="auto" |
|||
border |
|||
fit |
|||
style="width:calc(100% - 26px);" |
|||
> |
|||
<el-table-column v-if="!config.table.schema.disableSelection" fixed="left" type="selection" :selectable="config.table.selectable" /> |
|||
<el-table-column type="index" :label="$t('rowIndex')"> |
|||
<template #default="scope"> {{ (pageModel.pageIndex - 1) * pageModel.pageSize + scope.$index + 1 }} </template> |
|||
</el-table-column> |
|||
<template v-for="(item,key) in config.table.schema.properties"> |
|||
<template v-if="item.navigation"> |
|||
<el-table-column :prop="key" :label="item.title"> |
|||
<template #default="scope">{{getProp(scope.row,item.navigation)}}</template> |
|||
</el-table-column> |
|||
</template> |
|||
<template v-else-if="item.oneToMany"> |
|||
<el-table-column :prop="key" :label="item.title"> |
|||
<template #default="scope"> |
|||
<el-link type="primary" @click="showList({[key]:scope.row[key]},item.oneToMany,item.config)"> |
|||
<app-form-input mode="details" :schema="item" :prop="key" v-model="scope.row" /> |
|||
</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
<template v-else-if="item.link"> |
|||
<el-table-column :prop="key" :label="item.title"> |
|||
<template #default="scope"> |
|||
<el-link type="primary" @click="click({path:key},[scope.row])"> {{scope.row[key]}} </el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
<template v-else-if="item.type!=='object'"> |
|||
<template v-if="!item.hideForList&&showColumn(item,key)"> |
|||
<el-table-column :prop="key" sortable="custom" :sort-orders="['descending', 'ascending', null]"> |
|||
<template #header="scope">{{item.title}}</template> |
|||
<template #default="scope"> |
|||
<app-form-input mode="details" :schema="item" :prop="key" v-model="scope.row" /> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</template> |
|||
<template v-if="item.type==='object'"> |
|||
<template v-for="(item2,key2) in item['properties']"> |
|||
<el-table-column :prop="key+'.'+key2"> |
|||
<template #header="scope">{{item2.title}}</template> |
|||
<template #default="scope"> |
|||
<template v-if="scope.row[key]"> |
|||
<app-form-input mode="details" :schema="item2" :prop="key2" v-model="scope.row[key]" /> |
|||
</template> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</template> |
|||
</template> |
|||
<slot name="columns"></slot> |
|||
<el-table-column fixed="right"> |
|||
<template #header> |
|||
<el-button @click="filterDrawer = true"> |
|||
{{$t('operations')}} |
|||
<el-icon class="el-icon--right"><ep-filter /></el-icon> |
|||
</el-button> |
|||
</template> |
|||
<template #default="scope"> |
|||
<div class="flex"> |
|||
<template v-for="item in buttons"> |
|||
<el-button |
|||
:class="item.meta.htmlClass??'el-button--primary'" |
|||
v-if="!item.meta.isTop" |
|||
v-show="!item.meta.show||item.meta.show(scope.row,queryModel)" |
|||
@click="click(item,[scope.row])" |
|||
:disabled="item.meta.disabled && item.meta.disabled(scope.row)" |
|||
> |
|||
<el-icon v-if="item.meta.icon"><svg-icon :name="item.meta.icon" /></el-icon> |
|||
<span>{{item.meta.title}}</span> |
|||
</el-button> |
|||
</template> |
|||
<slot name="rowButtons" :rows="[scope.row]"></slot> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-scrollbar> |
|||
</div> |
|||
<div style="height:52px;padding-top:20px;"> |
|||
<el-scrollbar> |
|||
<el-pagination |
|||
small |
|||
v-model:currentPage="pageModel.pageIndex" |
|||
v-model:page-size="pageModel.pageSize" |
|||
:total="pageModel.total" |
|||
:page-sizes="pageModel.sizeList" |
|||
:background="true" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="onPageSizeChange" |
|||
@current-change="onPageIndexChange" |
|||
/> |
|||
</el-scrollbar> |
|||
</div> |
|||
</div> |
|||
<el-drawer v-model="filterDrawer" :close-on-click-modal="false" destroy-on-close @close="tableRef.doLayout()"> |
|||
<template #header> <span class="el-dialog__title"> {{$t('filter')}} </span> </template> |
|||
<el-scrollbar> |
|||
<el-row> |
|||
<el-col style="max-height:calc(100% - 180px);"> |
|||
<el-form inline> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="columns.forEach(o=>o.checked=true)"> {{$t('selectAll')}} </el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="columns.forEach(o=>o.checked=!o.checked)"> {{$t('selectInverse')}} </el-button> |
|||
</el-form-item> |
|||
<el-form-item v-for="item in columns"> |
|||
<el-checkbox v-model="item.checked" :label="item.title" size="large" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button type="primary" @click="filterDrawer=false"> {{$t('confirm')}} </el-button> |
|||
</span> |
|||
</template> |
|||
</el-drawer> |
|||
<el-drawer :close-on-click-modal="false" v-model="subDrawer" destroy-on-close size="50%"> |
|||
<el-scrollbar> |
|||
<app-list v-if="subDrawer" :query="subListQuery" :buttons="subListQuery.buttons" :config="subListQuery.config" /> |
|||
</el-scrollbar> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button type="primary" @click="subDrawer=false"> {{$t('confirm')}} </el-button> |
|||
</span> |
|||
</template> |
|||
</el-drawer> |
|||
<el-dialog v-model="dialogVisible" align-center destroy-on-close :close-on-click-modal="false" style="width:auto;width:700px;"> |
|||
<template #header> <span class="el-dialog__title"> {{editFormTitle}} </span> </template> |
|||
<el-row v-loading="editFormloading"> |
|||
<el-col style="max-height:calc(100% - 180px );min-height:100%;"> |
|||
<el-scrollbar> |
|||
<template v-if="editFormMode==='create'||editFormMode==='update'||editFormMode==='details'"> |
|||
<app-form |
|||
:disabled="editFormMode==='details'" |
|||
:mode="editFormMode" |
|||
ref="editFormRef" |
|||
inline |
|||
label-position="left" |
|||
:hideButton="true" |
|||
:schema="config.edit.schema" |
|||
v-model="editFormModel" |
|||
style="height:100%;" |
|||
/> |
|||
</template> |
|||
<template v-else-if="editFormMode==='import'"> |
|||
<app-form |
|||
ref="importFormRef" |
|||
mode="update" |
|||
label-position="left" |
|||
:schema="config.import?.schema" |
|||
v-model="importModel" |
|||
:hideButton="true" |
|||
:isQueryForm="true" |
|||
style="height:100%;" |
|||
> |
|||
</app-form> |
|||
</template> |
|||
<template v-else-if="editFormMode==='filter'"> |
|||
<el-form :model="filterList" inline class="filter"> |
|||
<el-row v-for="(item,index) in filterList.filter(o=>!o.hidden)"> |
|||
<el-col :span="6"> |
|||
<el-select clearable :disabled="item.readOnly" v-model="item.column" :placeholder="$t('字段')"> |
|||
<template v-for="(value, prop) in config.edit.schema.properties"> |
|||
<el-option v-if="value.type!=='object'&&value.type!=='array'" :value="prop" :label="value.title" /> |
|||
</template> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="6" v-if="item.column"> |
|||
<el-select clearable :disabled="item.readOnly" v-model="item.action" :placeholder="$t('操作符')"> |
|||
<el-option v-for="item in getOperators(config.edit.schema.properties[item.column])" :value="item.value" :label="item.label" /> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="8" v-if="item.column"> |
|||
<app-form-input v-model="item" :schema="config.edit.schema.properties[item.column]" prop="value" /> |
|||
</el-col> |
|||
<el-col :span="2" v-if="!item.readOnly&&item.action"> |
|||
<el-button circle @click="filterList.splice(index, 1)"> |
|||
<template #icon> |
|||
<ep-close /> |
|||
</template> |
|||
</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-button circle @click="pushfilterList"> |
|||
<template #icon> |
|||
<ep-plus /> |
|||
</template> |
|||
</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</template> |
|||
<template v-else> |
|||
<slot :name="editFormMode"></slot> |
|||
</template> |
|||
</el-scrollbar> |
|||
</el-col> |
|||
</el-row> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button type="primary" @click="submit"> {{$t('confirm')}} </el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
`,
|
|||
styles: html`<style>
|
|||
.el-form.filter .el-col { |
|||
padding: 5px; |
|||
} |
|||
dl.upload { |
|||
min-height: 100%; |
|||
} |
|||
dl.upload dt { |
|||
font-weight: bold; |
|||
line-height: 3em; |
|||
} |
|||
dl.upload dd { |
|||
line-height: 2em; |
|||
} |
|||
dl.upload .el-form-item { |
|||
width: 300px; |
|||
} |
|||
div.upload { |
|||
width: 100%; |
|||
} |
|||
</style>`, |
|||
props: ["modelValue", "config", "querySchema", "query", "buttons"], |
|||
emits: ["command"], |
|||
setup(props, context) { |
|||
const listScrollbarRef = ref(null); |
|||
/*变量定义*/ |
|||
// 配置
|
|||
const config = reactive(props.config); |
|||
// 分页
|
|||
const pageModel = reactive({ |
|||
sizeList: [10, 100, 1000, 10000], |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}); |
|||
const treeProps = reactive({ |
|||
children: "children", |
|||
}); |
|||
const tableKey = ref(false); |
|||
const tableRef = ref(null); |
|||
const uploadRef = ref(null); |
|||
const columns = ref([]); |
|||
const filterDrawer = ref(false); |
|||
const subDrawer = ref(false); |
|||
const subListQuery = ref(props.query ?? {}); |
|||
const tableLoading = ref(false); |
|||
const selectedRows = ref([]); |
|||
const dialogVisible = ref(false); |
|||
const route = useRoute(); |
|||
const router = useRouter(); |
|||
const { t } = useI18n(); |
|||
// 注释一下代码暂停权限验证
|
|||
// const buttons = ref(props.buttons ?? route.meta.children.filter((o) => o.meta.hasPermission));
|
|||
// 添加下行代码暂停权限验证
|
|||
const buttons = ref(props.buttons ?? route.meta.children); |
|||
const queryModel = ref(schemaToModel(config.query.schema)); |
|||
watch(queryModel.value, async (value, oldValue, a) => { |
|||
if (config.query.autoSubmit) { |
|||
await load(); |
|||
} |
|||
}); |
|||
const sortColumns = ref(new Map()); |
|||
const querySchema = ref(props.querySchema); |
|||
const filterList = ref([]); |
|||
const tableSchema = ref({}); |
|||
const tableData = ref([]); |
|||
const editFormRef = ref(null); |
|||
const importFormRef = ref(null); |
|||
const editFormloading = ref(false); |
|||
const editFormMode = ref(null); |
|||
const editFormTitle = ref(""); |
|||
const editFormSchema = ref(null); |
|||
const editFormModel = ref(null); |
|||
//
|
|||
config.import ??= { schema: { type: "object", properties: {} } }; |
|||
config.import.schema.properties.files ??= { |
|||
title: "文件", |
|||
type: "array", |
|||
multiple: true, |
|||
input: "file", |
|||
accept: ".xlsx", |
|||
default: [], |
|||
limit: 10, |
|||
size: 100 * 1024 * 1024, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
trigger: "change", |
|||
}, |
|||
], |
|||
}; |
|||
const defaultImportModel = schemaToModel(config.import.schema); |
|||
const importModel = ref(null); |
|||
const versions = ref([]); |
|||
const onClick = async (method, confirMmessage = "确认操作吗？", reload = true) => { |
|||
try { |
|||
if (confirMmessage) { |
|||
await ElMessageBox.confirm(confirMmessage, "提示", { |
|||
type: "warning", |
|||
}); |
|||
} |
|||
tableLoading.value = true; |
|||
let result = null; |
|||
if (method.constructor.name == "AsyncFunction") { |
|||
result = await method(); |
|||
} else { |
|||
result = method(); |
|||
} |
|||
if (!result.errors && reload) { |
|||
pageModel.pageIndex = 1; |
|||
await load(); |
|||
} |
|||
} catch (error) { |
|||
if (error === "cancel") { |
|||
ElMessage({ |
|||
type: "info", |
|||
message: "操作取消", |
|||
}); |
|||
} |
|||
} finally { |
|||
tableLoading.value = false; |
|||
} |
|||
}; |
|||
const getSortModel = (model) => { |
|||
(model.sorting ?? "") |
|||
.split(",") |
|||
.map((o) => o.trim()) |
|||
.filter((o) => o) |
|||
.map((o) => ({ |
|||
prop: camelCase(o.split(" ")[0]), |
|||
order: (o.split(" ").filter((o) => o)[1] ?? "asc") + "ending", |
|||
})) |
|||
.forEach((o) => sortColumns.value.set(o.prop, o.order)); |
|||
}; |
|||
const getColumns = (schema) => { |
|||
Object.keys(schema.properties).forEach((propertyName) => { |
|||
const property = schema.properties[propertyName]; |
|||
if (!property.hideForList || (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 = async ({ column, prop, order }) => { |
|||
if (order === null) { |
|||
sortColumns.value.delete(prop); |
|||
} else { |
|||
sortColumns.value.set(prop, order); |
|||
} |
|||
queryModel.value.sorting = Array.from(sortColumns.value) |
|||
.map((o) => capitalize(o[0]) + (o[1] === "ascending" ? "" : ` DESC`)) |
|||
.join(","); |
|||
await load(); |
|||
}; |
|||
const showColumn = (item, prop) => { |
|||
return columns.value.some((o) => o.name === prop && o.checked); |
|||
}; |
|||
const getFilters = (item, prop) => { |
|||
if (item.input === "select" && item.options) { |
|||
return item.options.map((o) => ({ text: o.label, value: o.value })); |
|||
} |
|||
return null; |
|||
}; |
|||
const filterHandler = (value, row, column) => { |
|||
return row[column.property] === value; |
|||
}; |
|||
const handleSelectionChange = (rows) => (selectedRows.value = rows); |
|||
const load = async () => { |
|||
tableLoading.value = true; |
|||
try { |
|||
const url = config.query.url; |
|||
const method = config.query.method; |
|||
const postData = buildQuery(); |
|||
const listData = (await request(url, postData, { method })).data; |
|||
const items = listData.items; |
|||
if (tableSchema.value.isTree) { |
|||
items = listToTree(listData.items); |
|||
} |
|||
tableData.value = items; |
|||
pageModel.total = listData.totalCount; |
|||
//data.value = listData;
|
|||
tableKey.value = !tableKey.value; |
|||
nextTick(() => { |
|||
tableRef.value.doLayout(); |
|||
nextTick(() => listScrollbarRef.value.update()); |
|||
}); |
|||
} catch (error) { |
|||
console.log(error); |
|||
} finally { |
|||
tableLoading.value = false; |
|||
} |
|||
}; |
|||
const reload = async () => { |
|||
pageModel.pageIndex = 1; |
|||
await load(); |
|||
}; |
|||
const onPageIndexChange = async () => await load(); |
|||
const onPageSizeChange = async () => { |
|||
await reload(); |
|||
}; |
|||
const click = async (item, rows) => { |
|||
editFormloading.value = true; |
|||
editFormMode.value = item.path ?? item; |
|||
if (item.path === "query") { |
|||
//list
|
|||
await load(); |
|||
} else if (item.path === "create" || item.path === "update") { |
|||
//create
|
|||
if (item.path === "create") { |
|||
editFormModel.value = schemaToModel(config.edit.schema); |
|||
} else { |
|||
const url = format(config.edit.detailsUrl, rows[0].id); |
|||
editFormModel.value = (await request(url, null, { method: config.edit.detailsMethod })).data; |
|||
editFormModel.value.id = rows[0].id; |
|||
} |
|||
editFormTitle.value = `${t(item.path)}${config.edit.schema.title}`; |
|||
dialogVisible.value = true; |
|||
} else if (item.path === "delete") { |
|||
if (!rows.length) { |
|||
return; |
|||
} |
|||
//delete
|
|||
const url = format(config.edit.deleteUrl, rows[0].id); |
|||
if (item.meta.isTop) { |
|||
// 批量删除
|
|||
try { |
|||
await ElMessageBox.confirm(format("确认删除选中的%s行数据吗？", rows.length), "提示", { |
|||
type: "warning", |
|||
}); |
|||
tableLoading.value = true; |
|||
const result = await request( |
|||
url, |
|||
rows.map((o) => o.id), |
|||
{ method: config.edit.deleteMethod }, |
|||
true |
|||
); |
|||
if (!result.errors) { |
|||
pageModel.pageIndex = 1; |
|||
await reload(); |
|||
} |
|||
} catch (error) { |
|||
if (error === "cancel") { |
|||
ElMessage({ |
|||
type: "info", |
|||
message: "操作取消", |
|||
}); |
|||
} |
|||
} finally { |
|||
tableLoading.value = false; |
|||
} |
|||
} else { |
|||
// 单个删除
|
|||
try { |
|||
await ElMessageBox.confirm(format("确认删除当前行数据吗？", rows[0]), "提示", { |
|||
type: "warning", |
|||
}); |
|||
await request(url, null, { method: config.edit.deleteMethod }, true); |
|||
await reload(); |
|||
} catch (error) { |
|||
if (error === "cancel") { |
|||
ElMessage({ |
|||
type: "info", |
|||
message: "操作取消", |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
await load(); |
|||
} else if (item.path === "export") { |
|||
if (item.meta.pattern === "paged") { |
|||
const url = config.edit.exportUrl; |
|||
const method = config.edit.exportMethod; |
|||
const postData = buildQuery(); |
|||
await onClick(async () => { |
|||
const response = await request(url, postData, { method }); |
|||
if (!response.errors) { |
|||
window.open(getUrl(`settleaccount/getblobfile/download/${response.data}`)); |
|||
} |
|||
}, "确认导出?"); |
|||
} else if (item.meta.pattern === "file") { |
|||
window.open(getUrl(`settleaccount/getblobfile/download/${rows[0]["downFileName"]}`)); |
|||
} else if ((item.meta.pattern = "row")) { |
|||
const url = config.edit.exportUrl; |
|||
const method = config.edit.exportMethod ?? "POST"; |
|||
const postData = { |
|||
[item.meta.key]: rows[0][item.meta.key], |
|||
}; |
|||
const response = await request(url, postData, { method }); |
|||
if (!response.errors) { |
|||
window.open(getUrl(`settleaccount/getblobfile/download/${response.data}`)); |
|||
} |
|||
} else { |
|||
console.log(item); |
|||
} |
|||
} else if (item.path === "import") { |
|||
//import
|
|||
try { |
|||
importModel.value = Object.assign({}, defaultImportModel); |
|||
editFormloading.value = true; |
|||
editFormTitle.value = `${t(item.path)}${config.query.schema.title}`; |
|||
dialogVisible.value = true; |
|||
} catch (e) { |
|||
console.log(e); |
|||
} finally { |
|||
editFormloading.value = false; |
|||
} |
|||
} else if (item === "filter") { |
|||
editFormTitle.value = t("自定义查询"); |
|||
dialogVisible.value = true; |
|||
} else { |
|||
context.emit("command", item, rows, load, showList); |
|||
} |
|||
editFormloading.value = false; |
|||
}; |
|||
const submit = async () => { |
|||
if (editFormMode.value === "create" || editFormMode.value === "update") { |
|||
try { |
|||
const valid = await editFormRef.value.validate(); |
|||
if (valid) { |
|||
await onClick( |
|||
async () => { |
|||
let url = (editFormMode.value === "create" ? config.edit.createUrl : config.edit.updateUrl) ?? config.query.url; |
|||
if (editFormMode.value === "update") { |
|||
url = format(url, editFormModel.value.id); |
|||
} |
|||
const method = editFormMode.value === "create" ? config.edit.createMethod : config.edit.updateMethod; |
|||
const result = await request(url, editFormModel.value, { method }, true); |
|||
if (!result.errors) { |
|||
dialogVisible.value = false; |
|||
editFormMode.value = null; |
|||
await reload(); |
|||
} |
|||
}, |
|||
null, |
|||
true |
|||
); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} finally { |
|||
editFormloading.value = false; |
|||
} |
|||
} else if (editFormMode.value === "details") { |
|||
dialogVisible.value = false; |
|||
editFormMode.value = null; |
|||
} else if (editFormMode.value === "import") { |
|||
try { |
|||
const valid = await importFormRef.value.validate(); |
|||
if (valid) { |
|||
editFormloading.value = true; |
|||
const url = config.edit.importUrl; |
|||
const formData = new FormData(); |
|||
//
|
|||
if (route.meta.businessType) { |
|||
formData.append("businessType", route.meta.businessType); |
|||
} |
|||
Object.keys(importModel.value).forEach((propertyName) => { |
|||
if (importModel.value[propertyName]) { |
|||
const schema = config.import.schema.properties[propertyName]; |
|||
const value = importModel.value[propertyName]; |
|||
if (schema?.type === "array") { |
|||
importModel.value[propertyName].forEach((item) => { |
|||
formData.append(propertyName, schema.input === "file" ? item.raw : item); |
|||
}); |
|||
} else { |
|||
formData.append(propertyName, schema.input === "file" ? value.raw : value); |
|||
} |
|||
} |
|||
}); |
|||
const result = await request(url, formData); |
|||
if (!result.errors) { |
|||
editFormloading.value = false; |
|||
dialogVisible.value = false; |
|||
await load(); |
|||
} else if (result.data?.code === 400 && result.data.fileName) { |
|||
window.open(getUrl(`settleaccount/getblobfile/download/${result.data.fileName}`)); |
|||
} |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} finally { |
|||
editFormloading.value = false; |
|||
} |
|||
} else if (editFormMode.value === "filter") { |
|||
await load(); |
|||
dialogVisible.value = false; |
|||
} |
|||
}; |
|||
const showList = async (value, nav, config) => { |
|||
if (!subDrawer.value) { |
|||
const targetRoute = router.getRoutes().find((o) => o.path === nav); |
|||
if (config.constructor === String) { |
|||
const value = (await import(config)).default; |
|||
config = value.constructor === Function ? value(route.meta.businessType) : value; |
|||
} |
|||
subListQuery.value = { |
|||
query: value, |
|||
buttons: targetRoute.meta.children, |
|||
config, |
|||
}; |
|||
subDrawer.value = true; |
|||
} |
|||
}; |
|||
const download = (url, filename) => { |
|||
const downloadUrl = window.URL.createObjectURL(url); |
|||
let link = document.createElement("a"); |
|||
link.href = downloadUrl; |
|||
link.download = filename; |
|||
link.click(); |
|||
window.URL.revokeObjectURL(downloadUrl); |
|||
}; |
|||
const getButtonDisabled = async (src, row) => { |
|||
if (src) { |
|||
const method = await importFunction(src); |
|||
return src.startsWith("async") ? await method(row) : method(row); |
|||
} |
|||
return false; |
|||
}; |
|||
const pushfilterList = () => { |
|||
filterList.value.push({ |
|||
logic: "and", |
|||
column: "", |
|||
action: "equal", |
|||
value: null, |
|||
}); |
|||
}; |
|||
const operators = [ |
|||
{ |
|||
value: "equal", |
|||
label: "等于", |
|||
}, |
|||
{ |
|||
value: "notEqual", |
|||
label: "不等于", |
|||
}, |
|||
{ |
|||
value: "biggerThan", |
|||
label: "大于", |
|||
}, |
|||
{ |
|||
value: "smallThan", |
|||
label: "小于", |
|||
}, |
|||
{ |
|||
value: "biggerThanOrEqual", |
|||
label: "大于等于", |
|||
}, |
|||
{ |
|||
value: "smallThanOrEqual", |
|||
label: "小于等于", |
|||
}, |
|||
{ |
|||
value: "like", |
|||
label: "类似于", |
|||
}, |
|||
{ |
|||
value: "notLike", |
|||
label: "不类似于", |
|||
}, |
|||
{ |
|||
value: "in", |
|||
label: "包含于", |
|||
}, |
|||
{ |
|||
value: "notIn", |
|||
label: "不包含于", |
|||
}, |
|||
]; |
|||
const getOperators = (schema) => { |
|||
const values = ["equal", "notEqual"]; |
|||
if (schema.type === "string") { |
|||
values.push("like", "notLike"); |
|||
if (schema.input && ["year", "month", "date", "datetime"].includes(schema.input)) { |
|||
values.push("biggerThan", "smallThan", "biggerThanOrEqual", "smallThanOrEqual"); |
|||
} |
|||
} else if (schema.type === "boolean") { |
|||
} else { |
|||
values.push("biggerThan", "smallThan", "biggerThanOrEqual", "smallThanOrEqual"); |
|||
} |
|||
return operators.filter((o) => values.includes(o.value)); |
|||
}; |
|||
function buildQuery() { |
|||
queryModel.value.maxResultCount = pageModel.pageSize; |
|||
queryModel.value.skipCount = (pageModel.pageIndex - 1) * pageModel.pageSize; |
|||
//
|
|||
const postData = JSON.parse(JSON.stringify(queryModel.value)); |
|||
//Object.assign(postData, subListQuery.value.query);//注释掉子表DTO查询
|
|||
postData.filters = filterList.value.filter((o) => o.column && o.action && (o.value || o.value === false)); |
|||
if (subListQuery.value.query) { |
|||
Object.keys(subListQuery.value.query).forEach((o) => { |
|||
postData.filters.push({ |
|||
logic: "and", |
|||
column: o, |
|||
action: "equal", |
|||
value: subListQuery.value.query[o], |
|||
}); |
|||
}); |
|||
} |
|||
//添加子表filter查询
|
|||
if (route.meta.businessType && route.meta.path !== "/jis-bbac/settlement/bbac_can_sa_service") { |
|||
postData.filters.push({ |
|||
logic: "and", |
|||
column: "businessType", |
|||
action: "equal", |
|||
value: route.meta.businessType, |
|||
}); |
|||
} |
|||
if (postData.items) { |
|||
delete postData["items"]; |
|||
} |
|||
if (postData.query?.id) { |
|||
delete postData.query["id"]; |
|||
} |
|||
return postData; |
|||
} |
|||
onMounted(async () => { |
|||
if (route.meta.children?.length) { |
|||
for (const item of route.meta.children) { |
|||
if (item.meta.disabled?.constructor === String) { |
|||
item.meta.disabled = await importFunction(item.meta.disabled); |
|||
} |
|||
} |
|||
} |
|||
//
|
|||
getSortModel(queryModel.value); |
|||
filterList.value = queryModel.value?.filters ?? []; |
|||
filterList.value.forEach((o) => { |
|||
if (o.default) { |
|||
o.value = o.default.constructor === Function ? o.default() : o.default; |
|||
} |
|||
}); |
|||
getColumns(config.table.schema); |
|||
// if (props.query) {
|
|||
// Object.assign(queryModel.value.query, props.query);
|
|||
// }
|
|||
if (!config.query.disableQueryOnLoad) { |
|||
await load(); |
|||
} |
|||
}); |
|||
return { |
|||
listScrollbarRef, |
|||
load, |
|||
reload, |
|||
onClick, |
|||
config, |
|||
queryModel, |
|||
buildQuery, |
|||
pageModel, |
|||
treeProps, |
|||
tableKey, |
|||
tableRef, |
|||
uploadRef, |
|||
tableLoading, |
|||
columns, |
|||
showColumn, |
|||
filterDrawer, |
|||
subDrawer, |
|||
dialogVisible, |
|||
selectedRows, |
|||
querySchema, |
|||
filterList, |
|||
tableSchema, |
|||
buttons, |
|||
tableData, |
|||
getClass, |
|||
sortChange, |
|||
getProp, |
|||
importFormRef, |
|||
editFormRef, |
|||
editFormloading, |
|||
editFormMode, |
|||
editFormTitle, |
|||
editFormSchema, |
|||
editFormModel, |
|||
importModel, |
|||
onPageSizeChange, |
|||
onPageIndexChange, |
|||
handleSelectionChange, |
|||
load, |
|||
click, |
|||
submit, |
|||
showList, |
|||
subListQuery, |
|||
getButtonDisabled, |
|||
versions, |
|||
pushfilterList, |
|||
getOperators, |
|||
getFilters, |
|||
filterHandler, |
|||
}; |
|||
}, |
|||
}; |
|||
Loading…
Reference in new issue