自动填充组件api搜索
代码生成路径大小写修正 折叠组件样式修改 信息体组件可带出部门 详情页子表样式调整:按钮下移 栅格字段栅格数配置不生效 自动编号页面样式修正、增加编号配置可排序用于修改编号配置生成规则、修正自动编号编辑缺陷 列表页样式修正 详情页按钮间距修正
This commit is contained in:
@ -55,7 +55,7 @@
|
||||
|
||||
&-normal {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-show-span::before {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
const getSetting = computed((): TableSetting => {
|
||||
return {
|
||||
redo: true,
|
||||
redo: false,
|
||||
size: true,
|
||||
setting: true,
|
||||
fullScreen: false,
|
||||
|
||||
Reference in New Issue
Block a user