自动填充组件api搜索

代码生成路径大小写修正
折叠组件样式修改
信息体组件可带出部门
详情页子表样式调整:按钮下移
栅格字段栅格数配置不生效
自动编号页面样式修正、增加编号配置可排序用于修改编号配置生成规则、修正自动编号编辑缺陷
列表页样式修正
详情页按钮间距修正
This commit is contained in:
yaoyn
2024-05-17 17:05:14 +08:00
parent 21eb71d35d
commit 5fa642dc64
19 changed files with 162 additions and 76 deletions

View File

@ -55,7 +55,7 @@
&-normal {
font-size: 14px;
font-weight: 500;
font-weight: bold;
}
&-show-span::before {

View File

@ -93,7 +93,7 @@
height: 32px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid @border-color-light;
//border-bottom: 1px solid @border-color-light;
}
&__footer {

View File

@ -1,6 +1,6 @@
<template>
<div :class="[`${prefixCls}__header pr-2 py-5`, $attrs.class]">
<BasicTitle :helpMessage="helpMessage" normal>
<BasicTitle :helpMessage="helpMessage" normal @click="$emit('expand')" >
<template v-if="title">
<div :class="{ 'header-title': hasLeftBorder }">
{{ title }}
@ -44,6 +44,6 @@
font-size: 14px;
line-height: 18px;
padding-left: 6px;
border-left: 6px solid #5e95ff;
//border-left: 6px solid #5e95ff;
}
</style>

View File

@ -8,18 +8,22 @@
/>
</template>
<script lang="ts" setup>
import { ref, unref, watch } from 'vue';
import {inject, ref, unref, watch, watchEffect} from 'vue';
import { propTypes } from '/@/utils/propTypes';
import { isFunction } from '/@/utils/is';
import { get } from 'lodash-es';
import { getDicDetailList } from '/@/api/system/dic';
import { getDatasourceData } from '/@/api/system/datasource';
import {apiConfigFunc, camelCaseString, isValidJSON} from "/@/utils/event/design";
const options = ref<{ value: string; label: string }[]>([]);
const loading = ref(false);
const isFirstLoad = ref(true);
const formModel = inject<any>('formModel', null);
const isCamelCase = inject<boolean>('isCamelCase', false);
const emit = defineEmits(['update:value']);
const props = defineProps({
@ -28,6 +32,7 @@
type: Function as PropType<(arg?: Recordable) => Promise<{ value: string; text: string }[]>>,
default: null,
},
apiConfig: Object,
// api params
params: {
type: [Array, Object, String, Number],
@ -42,8 +47,33 @@
alwaysLoad: propTypes.bool.def(false),
//数据来源 默认为空 如果不为空 则参数 api
datasourceType: String,
index: Number,
});
watchEffect(() => {
if (props.datasourceType === 'api' && props.apiConfig?.apiParams) {
props.apiConfig.apiParams.forEach((params) => {
params.tableInfo?.forEach((o) => {
if (o.bindType == 'data') {
let val = isValidJSON(o.value);
let field = '';
if (val && val.bindTable) {
let table = !isCamelCase
? val.bindTable + 'List'
: camelCaseString(val.bindTable + '_List');
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
formModel &&
formModel[table!][props.index || 0] &&
formModel[table!][props.index || 0][field];
} else if (val && val.bindField) {
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
formModel && formModel[field];
}
}
});
});
}
});
watch(
() => props.value,
(val) => {
@ -57,9 +87,12 @@
if (props.datasourceType) {
if (props.datasourceType === 'dic') {
api = getDicDetailList;
}
if (props.datasourceType === 'datasource') {
}else if (props.datasourceType === 'datasource') {
api = getDatasourceData;
}else if(props.datasourceType === 'api' && props.apiConfig?.path) {
props.apiConfig.input=_value;
options.value = await apiConfigFunc(props.apiConfig, isCamelCase, formModel, props.index);
return;
}
} else {
api = props.api;

View File

@ -4,7 +4,7 @@
</div>
</template>
<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
import {inject, ref, watchEffect} from 'vue';
import { getDepartment } from '/@/api/system/department';
import { getUser } from '/@/api/system/user';
import { useUserStore } from '/@/store/modules/user';
@ -15,6 +15,10 @@
value: String,
size: String,
infoType: Number,
deptField: {
type: String,
default: 'deptId'
},
bordered: {
type: Boolean,
default: true,
@ -23,8 +27,12 @@
type: Boolean,
default: false,
},
userNameWithDepartment:{
type: Boolean,
default: true
}
});
const formModel = inject<Recordable>('formModel');
const emit = defineEmits(['update:value']);
const name = ref<string>();
@ -33,9 +41,11 @@
if (props && props.value) {
//当前用户
if (props.infoType === 0) {
let deptId=formModel![props.deptField];
let deptName=deptId?await getDepartment(deptId):"";
//判断传入的值 是不是当前登录人 或需要二次加载 就不需要发请求获取用户信息了
if (props.value === userStore.getUserInfo.id || props.loadAgain) {
name.value = userStore.getUserInfo.name;
name.value = userStore.getUserInfo.name+(props.userNameWithDepartment&&(deptName||userStore.getUserInfo.departmentName)?("/"+(deptName||userStore.getUserInfo.departmentName)):"");
emit('update:value', userStore.getUserInfo.id);
} else {
//如果不是当前登陆人 需要用户id 查询当前用户信息
@ -68,8 +78,10 @@
} else {
//当前用户
if (props.infoType === 0) {
let deptId=formModel![props.deptField];
let deptName=deptId?await getDepartment(deptId):"";
//判断传入的值 是不是当前登录人 就不需要发请求获取用户信息了
name.value = userStore.getUserInfo.name;
name.value = userStore.getUserInfo.name+(props.userNameWithDepartment&&(deptName||userStore.getUserInfo.departmentName)?("/"+(deptName||userStore.getUserInfo.departmentName)):"");
emit('update:value', userStore.getUserInfo.id);
}

View File

@ -1,14 +1,6 @@
<template>
<div>
<div class="tbl-toolbar">
<a-button v-if="useSelectButton && !disableAddRow" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
{{ buttonName }}
</a-button>
<a-button v-if="!disabled && !disableAddRow" type="primary" @click="add">
<PlusOutlined />
{{ t('新增') }}
</a-button>
</div>
<a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
<template #summary>
<a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
@ -80,6 +72,17 @@
</template>
</template>
</a-table>
<div class="tbl-toolbar">
<a-button v-if="useSelectButton && !disableAddRow" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
{{ buttonName }}
</a-button>
<a-button v-if="!disabled && !disableAddRow && useAddButton" type="primary" @click="add">
<PlusOutlined />
{{ t('新增') }}
</a-button>
</div>
<FormItemRest>
<MultipleSelect
ref="MultipleSelectRef"
@ -173,6 +176,10 @@
* 是否使用按钮选数据
*/
useSelectButton: Boolean,
useAddButton: {
type: Boolean,
default: true
},
// 是否开启分页
showPagination: Boolean,
/**
@ -637,6 +644,6 @@
}
.tbl-toolbar {
margin-bottom: 10px;
margin-top: 10px;
}
</style>

View File

@ -344,10 +344,10 @@
// 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽
const commonLabelCol = unref(itemLabelWidthProp).labelCol;
const itemLabelCol = unref(getComponentsProps).labelCol;
const { labelWidthMode, labelFixWidth } = props.schema.componentProps as any;
const { labelWidthMode, labelFixWidth, span } = props.schema.componentProps as any;
let labelCol: any = {};
if (labelWidthMode !== 'fix') {
labelCol.span = itemLabelCol?.span || commonLabelCol?.span;
labelCol.span = span || itemLabelCol?.span || commonLabelCol?.span;
} else {
labelCol.style = {
width: `${labelFixWidth || 120}px`

View File

@ -4,12 +4,12 @@
<Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
<PopConfirmButton v-bind="action">
<Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
<template v-if="action.label">{{ action.label }}</template>
<template v-if="action.label"><span :style="action.style">{{ action.label }}</span></template>
</PopConfirmButton>
</Tooltip>
<PopConfirmButton v-else placement="leftBottom" v-bind="action">
<Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
<template v-if="action.label">{{ action.label }}</template>
<template v-if="action.label"><span :style="action.style">{{ action.label }}</span></template>
</PopConfirmButton>
<Divider
type="vertical"

View File

@ -1,17 +1,32 @@
<template>
<div style="width: 100%" :class="{ flex: toolBarWidth + formWidth + 200 < tableWidth }">
<div style="width: 100%;margin:20px;" :class="{ flex: toolBarWidth + formWidth + 200 < tableWidth }">
<div v-if="$slots.headerTop" style="margin: 5px">
<slot name="headerTop"></slot>
</div>
<div
:class="`${prefixCls}__toolbar float-left`"
:style="[toolBarWidth + formWidth + 200 < tableWidth ? 'flex: none' : 'margin: 0']"
>
<Divider type="vertical" v-if="false&&$slots.toolbar" class="!ml-2 !mr-4" />
<slot name="toolbar"></slot>
<Divider type="vertical" v-if="false&&$slots.toolbar && showTableSetting" class="!mx-3" />
<TableSetting
:setting="tableSetting"
v-if="showTableSetting"
@columns-change="handleColumnChange"
/>
</div>
<div
class="flex items-center justify-between"
:style="[toolBarWidth + formWidth + 200 < tableWidth ? 'flex:auto' : '']"
>
<slot name="tableTitle" v-if="$slots.tableTitle"></slot>
<slot name="tableTitle" v-if="false&&$slots.tableTitle"></slot>
<TableTitle
:helpMessage="titleHelpMessage"
:title="title"
v-if="!$slots.tableTitle && title"
v-if="false&&!$slots.tableTitle && title"
/>
<div :class="['flex', advanceRight ? 'w-full' : '']">
<BasicForm
@ -36,19 +51,7 @@
</BasicForm>
</div>
</div>
<div
:class="`${prefixCls}__toolbar float-right`"
:style="[toolBarWidth + formWidth + 200 < tableWidth ? 'flex: none' : 'margin: -5px 0 8px']"
>
<Divider type="vertical" v-if="$slots.toolbar" class="!ml-2 !mr-4" />
<slot name="toolbar"></slot>
<Divider type="vertical" v-if="$slots.toolbar && showTableSetting" class="!mx-3" />
<TableSetting
:setting="tableSetting"
v-if="showTableSetting"
@columns-change="handleColumnChange"
/>
</div>
<div v-if="$slots.headerContent">
<slot name="headerContent"></slot>
</div>

View File

@ -42,7 +42,7 @@
const getSetting = computed((): TableSetting => {
return {
redo: true,
redo: false,
size: true,
setting: true,
fullScreen: false,