shizhongming
2 years ago
6 changed files with 887 additions and 437 deletions
@ -0,0 +1,380 @@ |
|||
<template> |
|||
<div class="full-height"> |
|||
<vxe-grid |
|||
ref="tableRef" |
|||
row-key |
|||
:size="tableSizeConfig" |
|||
:columns="columns" |
|||
:data="data" |
|||
align="center" |
|||
highlight-hover-row |
|||
stripe |
|||
v-bind="$attrs" |
|||
> |
|||
<template #table-drop="{ rowIndex }"> |
|||
<div class="table-drop" :data-id="rowIndex"> |
|||
<MenuOutlined /> |
|||
</div> |
|||
</template> |
|||
<template #table-title="{ row }"> |
|||
<a-input v-model:value="row.title" :disabled="!row.visible" :size="formSizeConfig" /> |
|||
</template> |
|||
<template #table-visible="{ row }"> |
|||
<a-checkbox v-model:checked="row.visible" :size="formSizeConfig" /> |
|||
</template> |
|||
<template #table-hidden="{ row }"> |
|||
<a-checkbox v-model:checked="row.hidden" :disabled="!row.visible" :size="formSizeConfig" /> |
|||
</template> |
|||
<template #table-readonly="{ row }"> |
|||
<a-checkbox |
|||
v-model:checked="row.readonly" |
|||
:disabled="!row.visible" |
|||
:size="formSizeConfig" |
|||
/> |
|||
</template> |
|||
<template #table-used="{ row }"> |
|||
<a-checkbox v-model:checked="row.used" :disabled="!row.visible" :size="formSizeConfig" /> |
|||
</template> |
|||
<template #table-searchSymbol="{ row }"> |
|||
<a-select |
|||
v-model:value="row.searchSymbol" |
|||
:disabled="!row.visible" |
|||
:size="formSizeConfig" |
|||
style="width: 100px" |
|||
> |
|||
<a-select-option v-for="item in searchSymbolList" :key="item" :value="item"> |
|||
{{ item }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</template> |
|||
<template #table-useTableSearch="{ row }"> |
|||
<a-checkbox |
|||
v-model:checked="row.useTableSearch" |
|||
:disabled="!row.visible" |
|||
:size="formSizeConfig" |
|||
/> |
|||
</template> |
|||
<template #table-tableName="{ row }"> |
|||
<a-input |
|||
v-model:value="row.tableName" |
|||
:disabled="!(row.useTableSearch && row.visible)" |
|||
:size="formSizeConfig" |
|||
/> |
|||
</template> |
|||
<template #table-keyColumnName="{ row }"> |
|||
<a-input |
|||
v-model:value="row.keyColumnName" |
|||
:disabled="!(row.useTableSearch && row.visible)" |
|||
:size="formSizeConfig" |
|||
/> |
|||
</template> |
|||
<template #table-valueColumnName="{ row }"> |
|||
<a-input |
|||
v-model:value="row.valueColumnName" |
|||
:disabled="!(row.useTableSearch && row.visible)" |
|||
:size="formSizeConfig" |
|||
/> |
|||
</template> |
|||
<template #table-tableWhere="{ row }"> |
|||
<a-input v-model:value="row.tableWhere" :size="formSizeConfig" /> |
|||
</template> |
|||
<template #table-controlType="{ row }"> |
|||
<a-select |
|||
v-model:value="row.controlType" |
|||
:disabled="!row.visible" |
|||
style="width: 100px" |
|||
:size="formSizeConfig" |
|||
> |
|||
<a-select-option v-for="item in controlList" :key="item.key" :value="item.key"> |
|||
{{ $t(item.value) }} |
|||
</a-select-option> |
|||
</a-select> |
|||
<a-tooltip v-if="row.controlType === 'selectTable'" placement="top"> |
|||
<template #title> |
|||
<span>选择表格</span> |
|||
</template> |
|||
<PlusOutlined |
|||
:style="{ cursor: 'pointer', 'margin-left': '5px' }" |
|||
@click="() => handleShowChoseSelectTable(row)" |
|||
/> |
|||
</a-tooltip> |
|||
</template> |
|||
<template #table-rules="{ row }"> |
|||
<a-select |
|||
v-model:value="row.rules" |
|||
:disabled="!row.visible" |
|||
mode="multiple" |
|||
:size="formSizeConfig" |
|||
style="width: 160px" |
|||
> |
|||
<a-select-option v-for="item in ruleList" :key="item.key" :value="item.key"> |
|||
{{ item.value }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</template> |
|||
<template #table-visible-header="{ column }"> |
|||
<a-checkbox v-model:checked="headerVisibleCheckboxChecked" :size="formSizeConfig" /> |
|||
{{ $t(column.title.replace('{', '').replace('}', '')) }} |
|||
</template> |
|||
<template #table-hidden-header="{ column }"> |
|||
<a-checkbox v-model:checked="headerHiddenCheckboxChecked" :size="formSizeConfig" /> |
|||
{{ $t(column.title.replace('{', '').replace('}', '')) }} |
|||
</template> |
|||
<template #table-readonly-header="{ column }"> |
|||
<a-checkbox v-model:checked="headerReadonlyCheckboxChecked" :size="formSizeConfig" /> |
|||
{{ $t(column.title.replace('{', '').replace('}', '')) }} |
|||
</template> |
|||
<template #table-used-header="{ column }"> |
|||
<a-checkbox v-model:checked="headerUseCheckboxChecked" :size="formSizeConfig" /> |
|||
{{ $t(column.title.replace('{', '').replace('}', '')) }} |
|||
</template> |
|||
</vxe-grid> |
|||
<PageAddendumTableChoseModal |
|||
@ok="handleChoseTable" |
|||
:select-table-list="currentRow.selectTableList == null ? [] : currentRow.selectTableList" |
|||
@register="registerSelectTableModal" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'; |
|||
import type { Ref, PropType } from 'vue'; |
|||
|
|||
import { MenuOutlined, PlusOutlined } from '@ant-design/icons-vue'; |
|||
import PageAddendumTableChoseModal from '../PageAddendumTableChoseModal.vue'; |
|||
import { useSizeSetting } from '@/hooks/setting/UseSizeSetting'; |
|||
import { useVxeTableSortable } from '@/components/SmartTable'; |
|||
|
|||
import { |
|||
controlList, |
|||
getRuleList, |
|||
searchSymbolList, |
|||
vueTableHeaderCheckboxSupport, |
|||
vueChoseSelectTableSupport, |
|||
} from '../PageSettingSupport'; |
|||
import { useI18n } from '@/hooks/web/useI18n'; |
|||
|
|||
const copyField = [ |
|||
'columnName', |
|||
'remarks', |
|||
'nullable', |
|||
'javaProperty', |
|||
'extType', |
|||
'javaType', |
|||
'simpleJavaType', |
|||
]; |
|||
|
|||
/** |
|||
* 创建数据 |
|||
*/ |
|||
const createDataFromTableData = (tableData: Array<any>, editData: Ref | undefined) => { |
|||
if (editData && editData.value) { |
|||
return editData.value; |
|||
} |
|||
return tableData.map((item) => { |
|||
const data: any = {}; |
|||
copyField.forEach((field) => { |
|||
data[field] = item[field]; |
|||
}); |
|||
return Object.assign(data, { |
|||
title: data.remarks || data.javaProperty, |
|||
readonly: false, |
|||
visible: true, |
|||
hidden: false, |
|||
used: true, |
|||
controlType: 'INPUT', |
|||
searchSymbol: '=', |
|||
rules: [], |
|||
useTableSearch: false, |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* 搜索配置页面 |
|||
*/ |
|||
export default defineComponent({ |
|||
name: 'PageSearchSetting', |
|||
components: { |
|||
MenuOutlined, |
|||
PlusOutlined, |
|||
PageAddendumTableChoseModal, |
|||
}, |
|||
props: { |
|||
tableData: { |
|||
type: Array as PropType<Array<any>>, |
|||
default: () => [], |
|||
}, |
|||
editData: { |
|||
type: Array as PropType<Array<any>>, |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const { t } = useI18n(); |
|||
const { tableData, editData } = toRefs(props); |
|||
const sizeConfigHoops = useSizeSetting(); |
|||
const tableRef = ref(); |
|||
const data = ref<Array<any>>([]); |
|||
const currentRow = ref<any>({}); |
|||
watch(tableData, () => { |
|||
data.value = createDataFromTableData(tableData.value, editData); |
|||
}); |
|||
onMounted(() => { |
|||
data.value = createDataFromTableData(tableData.value, editData); |
|||
}); |
|||
const getData = () => { |
|||
return data.value; |
|||
}; |
|||
return { |
|||
...sizeConfigHoops, |
|||
data, |
|||
getData, |
|||
tableRef, |
|||
currentRow, |
|||
...vueChoseSelectTableSupport(currentRow), |
|||
...useVxeTableSortable(tableRef, '.table-drop', data), |
|||
ruleList: ref(getRuleList(t)), |
|||
controlList: ref(controlList), |
|||
searchSymbolList: ref(searchSymbolList), |
|||
headerVisibleCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'visible').checked, |
|||
headerHiddenCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'hidden', false).checked, |
|||
headerReadonlyCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'readonly', false) |
|||
.checked, |
|||
headerUseCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'used', true).checked, |
|||
}; |
|||
}, |
|||
data() { |
|||
return { |
|||
columns: [ |
|||
{ |
|||
title: '#', |
|||
field: 'drop', |
|||
width: 80, |
|||
slots: { |
|||
default: 'table-drop', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.tableField.title.columnName}', |
|||
field: 'columnName', |
|||
width: 160, |
|||
align: 'left', |
|||
headerAlign: 'center', |
|||
}, |
|||
{ |
|||
title: '{generator.views.tableSetting.title.title}', |
|||
field: 'title', |
|||
width: 160, |
|||
align: 'left', |
|||
headerAlign: 'center', |
|||
slots: { |
|||
default: 'table-title', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.formSetting.title.controlType}', |
|||
field: 'controlType', |
|||
width: 150, |
|||
slots: { |
|||
default: 'table-controlType', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.formSetting.title.readonly}', |
|||
field: 'readonly', |
|||
width: 110, |
|||
slots: { |
|||
default: 'table-readonly', |
|||
header: 'table-readonly-header', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.tableSetting.title.visible}', |
|||
field: 'visible', |
|||
width: 110, |
|||
slots: { |
|||
default: 'table-visible', |
|||
header: 'table-visible-header', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.tableSetting.title.hidden}', |
|||
field: 'hidden', |
|||
width: 110, |
|||
slots: { |
|||
default: 'table-hidden', |
|||
header: 'table-hidden-header', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.formSetting.title.used}', |
|||
field: 'used', |
|||
width: 120, |
|||
slots: { |
|||
default: 'table-used', |
|||
header: 'table-used-header', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.searchSetting.title.searchSymbol}', |
|||
field: 'searchSymbol', |
|||
width: 120, |
|||
slots: { |
|||
default: 'table-searchSymbol', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.formSetting.title.useTableSearch}', |
|||
field: 'useTableSearch', |
|||
width: 110, |
|||
slots: { |
|||
default: 'table-useTableSearch', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.code.table.tableName}', |
|||
field: 'tableName', |
|||
width: 120, |
|||
slots: { |
|||
default: 'table-tableName', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.formSetting.title.keyColumnName}', |
|||
field: 'keyColumnName', |
|||
width: 120, |
|||
slots: { |
|||
default: 'table-keyColumnName', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.formSetting.title.valueColumnName}', |
|||
field: 'valueColumnName', |
|||
width: 120, |
|||
slots: { |
|||
default: 'table-valueColumnName', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.formSetting.title.tableWhere}', |
|||
field: 'tableWhere', |
|||
minWidth: 180, |
|||
slots: { |
|||
default: 'table-tableWhere', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '{generator.views.code.table.remarks}', |
|||
field: 'remarks', |
|||
minWidth: 160, |
|||
align: 'left', |
|||
headerAlign: 'center', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue