This commit is contained in:
qsh
2024-06-11 20:29:30 +08:00
parent 5b3e02b447
commit e35a32e985
12 changed files with 233 additions and 141 deletions

View File

@@ -181,11 +181,7 @@ export default defineComponent({
const slotsMap: Recordable = {
...setItemComponentSlots(slots, item?.componentProps?.slots, item.field)
}
if (
item?.component !== 'SelectV2' &&
item?.component !== 'Cascader' &&
item?.componentProps?.options
) {
if (item?.component !== 'SelectV2' && item?.component !== 'Cascader' && item?.options) {
slotsMap.default = () => renderOptions(item)
}
@@ -236,6 +232,8 @@ export default defineComponent({
vModel={formModel.value[item.field]}
{...(autoSetPlaceholder && setTextPlaceholder(item))}
{...setComponentProps(item)}
format={item.component == 'DatePicker' ? 'YYYY-MM-DD' : null}
value-format={item.component == 'DatePicker' ? 'YYYY-MM-DD' : null}
style={baseSty + item.componentProps?.style}
// eslint-disable-next-line prettier/prettier
{...(notRenderOptions.includes(item?.component as string) && item?.componentProps?.options

View File

@@ -5,12 +5,12 @@ import { defineComponent } from 'vue'
export const useRenderCheckbox = () => {
const renderCheckboxOptions = (item: FormSchema) => {
// 如果有别名,就取别名
const labelAlias = item?.componentProps?.optionsAlias?.labelField
const valueAlias = item?.componentProps?.optionsAlias?.valueField
const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id'
const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name'
const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType<
typeof defineComponent
>
return item?.componentProps?.options?.map((option) => {
return item?.options?.map((option) => {
const { ...other } = option
return (
<Com {...other} label={option[valueAlias || 'value']}>

View File

@@ -5,12 +5,12 @@ import { defineComponent } from 'vue'
export const useRenderRadio = () => {
const renderRadioOptions = (item: FormSchema) => {
// 如果有别名,就取别名
const labelAlias = item?.componentProps?.optionsAlias?.labelField
const valueAlias = item?.componentProps?.optionsAlias?.valueField
const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id'
const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name'
const Com = (item.component === 'Radio' ? ElRadio : ElRadioButton) as ReturnType<
typeof defineComponent
>
return item?.componentProps?.options?.map((option) => {
return item?.options?.map((option) => {
const { ...other } = option
return (
<Com {...other} label={option[valueAlias || 'value']}>

View File

@@ -9,12 +9,12 @@ export const useRenderSelect = (slots: Slots) => {
const renderSelectOptions = (item: FormSchema) => {
// 如果有别名,就取别名
const labelAlias = item?.componentProps?.optionsAlias?.labelField
return item?.componentProps?.options?.map((option) => {
if (option?.options?.length) {
return item?.options?.map((option) => {
if (option?.length) {
return (
<ElOptionGroup label={option[labelAlias || 'label']}>
{() => {
return option?.options?.map((v) => {
return option?.map((v) => {
return renderSelectOptionItem(item, v)
})
}}
@@ -29,8 +29,8 @@ export const useRenderSelect = (slots: Slots) => {
// 渲染 select option item
const renderSelectOptionItem = (item: FormSchema, option: ComponentOptions) => {
// 如果有别名,就取别名
const labelAlias = item?.componentProps?.optionsAlias?.labelField
const valueAlias = item?.componentProps?.optionsAlias?.valueField
const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id'
const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name'
const { label, value, ...other } = option

View File

@@ -28,7 +28,7 @@
@end="onDragEnd"
>
<template #item="{ element: item }">
<el-checkbox :key="item.field" :label="item.field">
<el-checkbox :key="item.id" :label="item.id">
{{ item.label }}
</el-checkbox>
</template>
@@ -48,9 +48,8 @@
<script setup>
import draggable from 'vuedraggable'
import { useUserStore } from '@/store/modules/user'
import * as ClueCacheApi from '@/api/clue/clueCache'
import { useRoute } from 'vue-router'
import cache from '@/plugins/cache'
const props = defineProps({
tableObject: { type: Object, default: () => ({ tableList: [] }) },
@@ -59,7 +58,6 @@ const props = defineProps({
const emit = defineEmits(['update:tableObject', 'getList', 'getCheckedColumns'])
const route = useRoute()
const { id: userId } = useUserStore().user //取用户ID
const pageNo = ref(props.tableObject?.pageNo || 1)
@@ -68,7 +66,7 @@ const pageSize = ref(props.tableObject?.pageSize || 20)
const ColumnSetting = ref()
const TableColumnPop = ref()
// 展示在设置里的所有表格列,由于会排序,所以使用新属性,不直接修改原值
const allColumns = ref({})
const allColumns = ref([...props.tableColumns])
// 已勾选的选项
const checkedColumns = ref([])
@@ -85,67 +83,50 @@ const clickSetting = () => {
unref(TableColumnPop).TableColumnPop?.delayHide?.()
}
// 获取所有的表格列,注意如果本地有缓存使用缓存数据,因为用户可能已对表格列排序,并且不依赖网络请求,可更快渲染表头
function getAllColumns() {
// 1. 先获取缓存表头
const localData = getColumn('TableColumnAll')[route.name] || []
// 2. 如果有缓存的表头,直接使用,并将新增的标题加入,如果没有缓存,那就得用获取到的表头
if (localData && localData) {
const newColumns = props.tableColumns.filter(
(item) => !localData.some((it) => it.field == item.field)
)
allColumns.value = [...localData, ...newColumns]
} else {
allColumns.value = [...props.tableColumns]
}
}
// 获取缓存的表头
function getColumn(name = 'shitTable') {
return cache.local.get(`${name}-${userId}`) || {}
}
// 设置表头缓存
function setColumn(val, name = 'shitTable') {
cache.local.set(`${name}-${userId}`, val)
const routeMap = {
CluePool: 1,
ClueOrder: 2
}
// 获取用户已勾选的表头
function getUserCheckedColumns() {
// 1. 先获取缓存
const localData = getColumn('shitTable')[route.name]
// 2. 如果有缓存,使用缓存表头,否则使用默认的所有表头
if (localData && localData.length) {
checkedColumns.value = localData
} else {
checkedColumns.value = allColumns.value.map((it) => it.field)
}
// 3. 回显到表格中
async function getUserCheckedColumns() {
checkedColumns.value = await ClueCacheApi.getClueCache({
settingType: 2,
model: routeMap[route.name]
})
// 回显到表格中
emitColumns()
}
// 表格列排序
function onDragEnd() {
const obj = getColumn('TableColumnAll')
obj[route.name] = allColumns.value
// 1. 设置缓存
setColumn(obj, 'TableColumnAll')
// 2. 表格回显
ClueCacheApi.setClueCache({
settingType: 2,
model: routeMap[route.name],
clueParamId: checkedColumns.value
})
// 表格回显
emitColumns()
}
// 勾选确认
function confirm() {
const obj = getColumn()
obj[route.name] = checkedColumns.value
setColumn(obj, 'shitTable')
ClueCacheApi.setClueCache({
settingType: 2,
model: routeMap[route.name],
clueParamId: checkedColumns.value
})
// usedSchema.value = allColumns.value.filter((it) => checkedColumns.value.includes(it.id))
emitColumns()
}
// 将表头数据返回至父组件
function emitColumns() {
const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.field))
const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.id))
emit('getCheckedColumns', arr)
}
getAllColumns()
getUserCheckedColumns()
defineExpose({ getUserCheckedColumns })

View File

@@ -7,12 +7,10 @@ import { findIndex } from '@/utils'
import { cloneDeep } from 'lodash-es'
import { FormSchema } from '@/types/form'
import { useUserStore } from '@/store/modules/user'
import { useRoute } from 'vue-router'
import cache from '@/plugins/cache'
import * as ClueCacheApi from '@/api/clue/clueCache'
const route = useRoute()
const { id: userId } = useUserStore().user //取用户ID
const { t } = useI18n()
@@ -46,7 +44,7 @@ const props = defineProps({
}
})
const emit = defineEmits(['search', 'reset'])
// const emit = defineEmits(['search', 'reset'])
const visible = ref(true)
@@ -80,37 +78,26 @@ const newSchema = computed(() => {
return schema
})
function initSearch() {
const routeMap = {
CluePool: 1,
ClueOrder: 2
}
async function initSearch() {
reset()
// 1. 先获取缓存
const localData = getColumn('Schema')[route.name]
// 2. 如果有缓存,使用缓存表头,否则使用默认的所有表头
if (localData && localData.length) {
usedSchema.value = localData
} else {
const obj = getColumn('Schema')
obj[route.name] = [props.schema[0]]
setSchema(obj)
usedSchema.value = [props.schema[0]]
}
checkedSchema.value = usedSchema.value.map((it) => it.field)
checkedSchema.value = await ClueCacheApi.getClueCache({
settingType: 1,
model: routeMap[route.name]
})
usedSchema.value = props.schema.filter((it) => checkedSchema.value.includes(it.id))
}
function changeSearch() {
const obj = getColumn('Schema')
obj[route.name] = props.schema.filter((item) => checkedSchema.value.includes(item.field))
setSchema(obj)
initSearch()
}
// 获取缓存的查询条件
function getColumn(name = 'Schema') {
return cache.local.get(`${name}-${userId}`) || {}
}
// 设置查询条件缓存
function setSchema(val: Array<Object>, name = 'Schema') {
cache.local.set(`${name}-${userId}`, val)
ClueCacheApi.setClueCache({
settingType: 1,
model: routeMap[route.name],
clueParamId: checkedSchema.value
})
usedSchema.value = props.schema.filter((it) => checkedSchema.value.includes(it.id))
}
function setSearch() {
@@ -121,23 +108,34 @@ const { register, elFormRef, methods } = useForm({
model: props.model || {}
})
const search = async () => {
await unref(elFormRef)?.validate(async (isValid) => {
if (isValid) {
const { getFormData } = methods
const model = await getFormData()
emit('search', model)
}
})
}
// const search = async () => {
// await unref(elFormRef)?.validate(async (isValid) => {
// if (isValid) {
// const { getFormData } = methods
// const model = await getFormData()
// emit('search', model)
// }
// })
// }
const reset = async () => {
unref(elFormRef)?.resetFields()
// const { getFormData } = methods
// const model = await getFormData()
// emit('reset', model)
}
async function getFormModel() {
const { getFormData } = methods
const model = await getFormData()
emit('reset', model)
return model
}
defineExpose({
getFormModel,
reset
})
const bottonButtonStyle = computed(() => {
return {
textAlign: props.buttomPosition as unknown as 'left' | 'center' | 'right'
@@ -168,10 +166,7 @@ initSearch()
>
<template #action>
<div v-if="layout === 'inline'">
<ElButton ref="SchemaSetting" @click="setSearch">
<!-- <Icon class="mr-5px" icon="ep:setting" /> -->
查询设置
</ElButton>
<ElButton ref="SchemaSetting" @click="setSearch"> 查询设置 </ElButton>
<el-popover
ref="SettingPop"
:virtual-ref="SchemaSetting"
@@ -181,7 +176,7 @@ initSearch()
virtual-triggering
>
<el-checkbox-group v-model="checkedSchema" @change="changeSearch">
<el-checkbox v-for="item in schema" :key="item.field" :label="item.field">
<el-checkbox v-for="item in schema" :key="item.id" :label="item.id">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>