<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import type { CSSProperties } from 'vue';
|
|
import { computed, inject, nextTick, onMounted, reactive, ref, toRefs, unref, watch } from 'vue';
|
|
import { useAttrs } from '@jnpf/hooks';
|
import { ModalClose } from '@jnpf/ui/modal';
|
import { thousandsFormat } from '@jnpf/utils';
|
|
import { RedoOutlined } from '@ant-design/icons-vue';
|
import { Drawer as ADrawer, Modal as AModal, Form } from 'ant-design-vue';
|
import dayjs from 'dayjs';
|
import { cloneDeep, pick } from 'lodash-es';
|
|
import { getGroupByCondition } from '#/api/permission/group';
|
import { getOrgSelectedList } from '#/api/permission/organize';
|
import { getPositionSelectedList } from '#/api/permission/position';
|
import { getRoleByCondition } from '#/api/permission/role';
|
import { getUserInfoList } from '#/api/permission/user';
|
import { getDataInterfaceDataInfoByIds, getDataInterfaceDataSelect, getDataInterfaceRes } from '#/api/systemData/dataInterface';
|
import { $t } from '#/locales';
|
import { useBaseStore, useGeneratorStore } from '#/store';
|
|
import { normalizeTableTreeData } from '../../helpers/tableTree';
|
import ExtraRelationInfo from '../../relationForm/src/ExtraRelationInfo.vue';
|
import { popupSelectProps } from './props';
|
|
interface State {
|
cacheSelectedRowKeys: any[];
|
cacheSelectedRows: any[];
|
extraData: any;
|
list: any[];
|
listQuery: any;
|
loading: boolean;
|
selectedRowKeys: any[];
|
selectedRows: any[];
|
total: number;
|
}
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfPopupSelect' });
|
const props = defineProps(popupSelectProps);
|
const emit = defineEmits(['update:value', 'change']);
|
const attrs: any = useAttrs({ excludeDefaultKeys: false });
|
const formItemContext = Form.useInjectFormItemContext();
|
const generatorStore = useGeneratorStore();
|
const baseStore = useBaseStore();
|
const emitter: any = inject('emitter');
|
const drawerPrefixCls = 'jnpf-basic-drawer';
|
const formPrefixCls = 'jnpf-basic-form';
|
const tablePrefixCls = 'jnpf-basic-table';
|
const drawerFooterPrefixCls = 'jnpf-basic-drawer-footer';
|
const innerValue = ref<any[] | string | undefined>(undefined);
|
const selectRow = ref<any>(null);
|
const visible = ref(false);
|
const options = ref<any[]>([]);
|
const innerColumnOptions = ref<any[]>([]);
|
const formElRef = ref<FormInstance>();
|
const tableElRef = ref<any>(null);
|
const indexColumn = {
|
align: 'center',
|
customRender: ({ index }) => index + 1,
|
dataIndex: 'index',
|
key: 'index',
|
title: $t('component.table.index'),
|
width: 50,
|
};
|
const state = reactive<State>({
|
cacheSelectedRowKeys: [],
|
cacheSelectedRows: [],
|
extraData: {},
|
loading: false,
|
selectedRowKeys: [],
|
selectedRows: [],
|
total: 0,
|
list: [],
|
listQuery: {
|
currentPage: 1,
|
keyword: '',
|
pageSize: 20,
|
},
|
});
|
const { extraData, list, listQuery } = toRefs(state);
|
|
const getFormClass = computed(() => {
|
return [formPrefixCls, `${formPrefixCls}--compact`, 'search-form'];
|
});
|
const getDrawerFooterStyle = computed((): CSSProperties => {
|
const heightStr = `60px`;
|
return {
|
height: heightStr,
|
lineHeight: `calc(${heightStr} - 1px)`,
|
};
|
});
|
const getColumns = computed<any[]>(() => {
|
const columns = innerColumnOptions.value.map((o) => ({ ...o, dataIndex: o.value, ellipsis: true, title: o.label }));
|
return [indexColumn, ...columns];
|
});
|
const searchInfo = computed(() => {
|
const paramList = getParamList();
|
const info: any = {
|
columnOptions: innerColumnOptions.value.map((o) => o.value).join(','),
|
interfaceId: props.interfaceId,
|
paramList,
|
propsValue: props.propsValue,
|
relationField: props.relationField,
|
};
|
return info;
|
});
|
const getPagination = computed<any>(() => {
|
if (!props.hasPage) return false;
|
return {
|
current: state.listQuery.currentPage,
|
defaultPageSize: state.listQuery.pageSize,
|
pageSize: state.listQuery.pageSize,
|
pageSizeOptions: ['20', '50', '80', '100'],
|
showQuickJumper: true,
|
showSizeChanger: true,
|
showTotal: (total) => $t('component.table.total', { total }),
|
size: 'small',
|
total: state.total,
|
};
|
});
|
const getRowSelection = computed<any>(() => ({
|
onChange: setSelectedRowKeys,
|
selectedRowKeys: state.selectedRowKeys,
|
type: props.multiple ? 'checkbox' : 'radio',
|
}));
|
const getScrollY = computed(() => {
|
if (props.popupType === 'popover') return 250;
|
let height = props.popupType === 'drawer' ? window.innerHeight - 120 - 52 - 38 : window.innerHeight * 0.7 - 52 - 38;
|
if (props.hasPage) height -= 44;
|
return height;
|
});
|
const getTableBindValues = computed(() => {
|
return {
|
class: unref(tablePrefixCls),
|
columns: unref(getColumns),
|
loading: state.loading,
|
pagination: unref(getPagination),
|
rowKey: props.propsValue,
|
rowSelection: unref(getRowSelection),
|
customRow,
|
scroll: {
|
y: unref(getScrollY),
|
},
|
size: 'small',
|
};
|
});
|
const getSelectBindValue = computed(() => {
|
const className = unref(attrs).class ? `w-full ${unref(attrs).class}` : 'w-full';
|
return {
|
...pick(props, ['size', 'disabled']),
|
allowClear: props.disabled ? false : props.allowClear,
|
class: className,
|
fieldNames: { label: unref(props).relationField, value: unref(props).propsValue },
|
mode: props.multiple ? 'multiple' : '',
|
open: false,
|
placeholder: unref(props).placeholder,
|
showArrow: true,
|
showSearch: false,
|
style: Reflect.has(unref(attrs), 'style') ? unref(attrs).style : {},
|
};
|
});
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
setValue(val);
|
},
|
{ immediate: true },
|
);
|
|
function customRow(record: Recordable) {
|
return {
|
onClick: (e: Event) => {
|
setSelectedRowByRecord(record, e);
|
},
|
onDblclick: (e: Event) => {
|
if (props.multiple) return;
|
if (!setSelectedRowByRecord(record, e)) return;
|
nextTick(() => handleSubmit());
|
},
|
};
|
}
|
function setSelectedRowByRecord(record: Recordable, e: Event) {
|
e?.stopPropagation();
|
const tr: HTMLElement = (e as MouseEvent).composedPath?.().find((dom: any) => dom.tagName === 'TR') as HTMLElement;
|
if (!tr) return false;
|
const isCheckbox = unref(getTableBindValues).rowSelection.type === 'checkbox';
|
const key = record[unref(getTableBindValues).rowKey];
|
if (isCheckbox) {
|
// 找到Checkbox，检查是否为disabled
|
const checkBox = tr.querySelector('input[type=checkbox]');
|
if (!checkBox || checkBox.hasAttribute('disabled')) return false;
|
if (state.selectedRowKeys.includes(key)) {
|
const keyIndex = state.selectedRowKeys.indexOf(key);
|
state.selectedRowKeys.splice(keyIndex, 1);
|
state.selectedRows = state.selectedRows.filter((o) => o[unref(getTableBindValues).rowKey] !== key);
|
} else {
|
state.selectedRowKeys.push(key);
|
state.selectedRows.push(record);
|
}
|
} else {
|
// 找到radio，检查是否为disabled
|
const radio = tr.querySelector('input[type=radio]');
|
if (!radio || radio.hasAttribute('disabled')) return false;
|
state.selectedRowKeys = [key];
|
state.selectedRows = [record];
|
}
|
return true;
|
}
|
function setValue(value) {
|
const relationData = generatorStore.getRelationData;
|
if ((props.multiple && (!props.value || (props.value as any[]).length === 0)) || (!props.multiple && !props.value && props.value !== 0)) {
|
setNullValue();
|
return;
|
}
|
if (!props.interfaceId) return;
|
const ids: any[] = props.multiple ? (props.value as any[]) : [props.value];
|
if (!Array.isArray(ids)) return;
|
if (ids.length === 0) return;
|
const paramList = getParamList();
|
const query = {
|
ids,
|
interfaceId: props.interfaceId,
|
paramList,
|
propsValue: props.propsValue,
|
relationField: props.relationField,
|
};
|
getDataInterfaceDataInfoByIds(props.interfaceId, query).then((res) => {
|
if ((props.multiple && (!props.value || (props.value as any[]).length === 0)) || (!props.multiple && !props.value && props.value !== 0)) {
|
setNullValue();
|
return;
|
}
|
const data = res.data && res.data.length > 0 ? res.data[0] : {};
|
state.extraData = data;
|
innerValue.value = value;
|
options.value = res.data;
|
selectRow.value = res.data;
|
state.selectedRowKeys = ids;
|
state.selectedRows = res.data;
|
if (!props.field || props.multiple) return;
|
relationData[props.field] = data;
|
generatorStore.setRelationData(relationData);
|
emitter.emit('setRelationData', { jnpfRelationField: props.field, ...data });
|
});
|
}
|
function setNullValue() {
|
const relationData = generatorStore.getRelationData;
|
state.extraData = {};
|
innerValue.value = props.multiple ? [] : undefined;
|
options.value = [];
|
selectRow.value = null;
|
state.selectedRowKeys = [];
|
state.selectedRows = [];
|
if (!props.field || props.multiple) return;
|
relationData[props.field] = {};
|
generatorStore.setRelationData(relationData);
|
emitter.emit('setRelationData', { jnpfRelationField: props.field });
|
}
|
function onChange(val, option) {
|
if (!val || val.length === 0) {
|
options.value = [];
|
emit('update:value', props.multiple ? [] : '');
|
emit('change', '', props.multiple ? [] : {});
|
state.selectedRowKeys = [];
|
state.selectedRows = [];
|
} else {
|
options.value = option;
|
emit('update:value', val);
|
emit('change', '', props.multiple ? options.value : options.value[0]);
|
}
|
const value = props.multiple ? val : [val];
|
state.selectedRowKeys = state.selectedRowKeys.filter((o) => value.some((l) => l == o));
|
state.selectedRows = state.selectedRows.filter((o) => value.some((l) => l == o[props.propsValue]));
|
formItemContext.onFieldChange();
|
}
|
function getForm() {
|
const form = unref(formElRef);
|
if (!form) {
|
throw new Error('form is null!');
|
}
|
return form;
|
}
|
async function openSelectModal() {
|
if (props.disabled) return;
|
visible.value = true;
|
setTimeout(() => {
|
nextTick(() => {
|
handleReset();
|
const tableEl = tableElRef.value?.$el;
|
const bodyEl = tableEl.querySelector('.ant-table-body');
|
bodyEl!.style.height = `${unref(getScrollY)}px`;
|
if ((!props.multiple && innerValue.value) || (props.multiple && innerValue.value?.length)) {
|
state.selectedRowKeys = props.multiple ? (innerValue.value as any[]) : [innerValue.value];
|
} else {
|
state.selectedRowKeys = [];
|
state.selectedRows = [];
|
}
|
state.cacheSelectedRowKeys = cloneDeep(state.selectedRowKeys);
|
state.cacheSelectedRows = cloneDeep(state.selectedRows);
|
});
|
}, 50);
|
}
|
function handleCancel() {
|
visible.value = false;
|
state.selectedRowKeys = cloneDeep(state.cacheSelectedRowKeys);
|
state.selectedRows = cloneDeep(state.cacheSelectedRows);
|
}
|
function handleSubmit() {
|
if (props.multiple) {
|
updateSelectRow();
|
options.value = selectRow.value;
|
innerValue.value = unref(selectRow).map((o) => o[props.propsValue]);
|
} else {
|
if (state.selectedRowKeys.length === 0 && state.selectedRows.length === 0) return;
|
if (state.selectedRows.length === 0) {
|
emit('update:value', innerValue.value);
|
emit('change', innerValue.value, props.multiple ? options.value : options.value[0]);
|
formItemContext.onFieldChange();
|
visible.value = false;
|
return;
|
}
|
options.value = state.selectedRows;
|
selectRow.value = state.selectedRows;
|
innerValue.value = unref(selectRow)[0][props.propsValue];
|
}
|
emit('update:value', unref(innerValue));
|
emit('change', unref(innerValue), props.multiple ? unref(selectRow) : unref(selectRow)[0]);
|
formItemContext.onFieldChange();
|
visible.value = false;
|
}
|
function updateSelectRow() {
|
if (!selectRow.value) selectRow.value = [];
|
const newSelectRow = state.selectedRows;
|
for (const item of newSelectRow) {
|
if (!selectRow.value.some((o) => o[props.propsValue] === item[props.propsValue])) {
|
selectRow.value.push(item);
|
}
|
}
|
selectRow.value = selectRow.value.filter(
|
(o) => !(state.list.some((l) => l[props.propsValue] === o[props.propsValue]) && !newSelectRow.some((l) => l[props.propsValue] === o[props.propsValue])),
|
);
|
}
|
function getParamList() {
|
const templateJson: any[] = props.templateJson;
|
if (!props.formData) return templateJson;
|
for (const element of templateJson) {
|
if (element.sourceType == 4 && element.relationField === '@formId') {
|
element.defaultValue = props.formData.id || '';
|
}
|
if (element.relationField && element.sourceType == 1) {
|
if (element.relationField.includes('-')) {
|
const tableVModel = element.relationField.split('-')[0];
|
const childVModel = element.relationField.split('-')[1];
|
element.defaultValue =
|
(props.formData[tableVModel] &&
|
props.formData[tableVModel][props.rowIndex as unknown as number] &&
|
props.formData[tableVModel][props.rowIndex as unknown as number][childVModel]) ||
|
'';
|
} else {
|
element.defaultValue = props.formData[element.relationField] || '';
|
}
|
}
|
}
|
return templateJson;
|
}
|
async function handleSearch() {
|
state.listQuery.currentPage = 1;
|
state.listQuery.pageSize = props.hasPage ? props.pageSize : 100000;
|
updateSelectRow();
|
await buildColumnOptions();
|
nextTick(() => initData());
|
}
|
function handleReset() {
|
getForm().resetFields();
|
state.listQuery.keyword = '';
|
handleSearch();
|
}
|
function initData() {
|
if (!props.interfaceId) return;
|
state.loading = true;
|
const query = {
|
...state.listQuery,
|
...unref(searchInfo),
|
};
|
getDataInterfaceDataSelect(query)
|
.then((res) => {
|
state.list = normalizeTableTreeData(res.data.list || []);
|
state.total = res.data.pagination.total;
|
fillColumnEchoText(state.list);
|
state.loading = false;
|
})
|
.catch(() => {
|
state.loading = false;
|
});
|
}
|
function handleTableChange(pagination) {
|
state.listQuery.currentPage = pagination.current;
|
state.listQuery.pageSize = pagination.pageSize;
|
updateSelectRow();
|
buildColumnOptions().then(() => nextTick(() => initData()));
|
}
|
function setSelectedRowKeys(selectedRowKeys, selectedRows) {
|
state.selectedRowKeys = selectedRowKeys;
|
state.selectedRows = selectedRows;
|
}
|
async function buildColumnOptions() {
|
const list = cloneDeep((props.columnOptions as any[]) || []).map((o) => ({
|
...o,
|
jnpfKey: o.jnpfKey || o.__config__?.jnpfKey || 'input',
|
__config__: {
|
...o.__config__,
|
jnpfKey: o.jnpfKey || o.__config__?.jnpfKey || 'input',
|
},
|
}));
|
const tasks: Promise<void>[] = [];
|
for (const column of list) {
|
const config = column.__config__;
|
if (column.jnpfKey !== 'select' || !config) continue;
|
if (config.dataType === 'dictionary' && config.dictionaryType) {
|
column.options = [];
|
tasks.push(
|
baseStore.getDicDataSelector(config.dictionaryType).then((res) => {
|
column.options = res;
|
}),
|
);
|
}
|
if (config.dataType === 'dynamic' && config.propsUrl) {
|
column.options = [];
|
const query = { paramList: config.templateJson || [] };
|
tasks.push(
|
getDataInterfaceRes(config.propsUrl, query).then((res) => {
|
column.options = Array.isArray(res.data) ? res.data : [];
|
}),
|
);
|
}
|
}
|
await Promise.all(tasks);
|
innerColumnOptions.value = list;
|
}
|
function fillColumnEchoText(list) {
|
if (!list?.length) return;
|
const echoColumns = innerColumnOptions.value.filter((o) => ['groupSelect', 'organizeSelect', 'posSelect', 'roleSelect', 'userSelect'].includes(o.jnpfKey));
|
if (!echoColumns.length) return;
|
const idsMap = {
|
groupSelect: new Set<string>(),
|
organizeSelect: new Set<string>(),
|
posSelect: new Set<string>(),
|
roleSelect: new Set<string>(),
|
userSelect: new Set<string>(),
|
};
|
for (const row of list) {
|
for (const column of echoColumns) {
|
if (row[`${column.value}_name`]) continue;
|
const valueList = getValueList(row[column.value], column.multiple);
|
valueList.forEach((id) => {
|
if (id && !String(id).startsWith('@') && !String(id).includes('--')) idsMap[column.jnpfKey].add(String(id));
|
});
|
}
|
}
|
const requestList = [
|
{ api: getUserInfoList, ids: [...idsMap.userSelect], keys: ['userSelect'], labelKey: 'fullName' },
|
{ api: getOrgSelectedList, ids: [...idsMap.organizeSelect], keys: ['organizeSelect'], labelKey: 'orgNameTree' },
|
{ api: getPositionSelectedList, ids: [...idsMap.posSelect], keys: ['posSelect'], labelKey: 'orgNameTree' },
|
{ api: getRoleByCondition, ids: [...idsMap.roleSelect], keys: ['roleSelect'], labelKey: 'fullName' },
|
{ api: getGroupByCondition, ids: [...idsMap.groupSelect], keys: ['groupSelect'], labelKey: 'fullName' },
|
].filter((o) => o.ids.length);
|
if (!requestList.length) return;
|
Promise.all(requestList.map((item) => item.api(item.ids).then((res) => ({ ...item, list: res.data.list || [] })))).then((resList) => {
|
const textMap = new Map<string, Map<string, string>>();
|
for (const resItem of resList) {
|
const itemMap = new Map<string, string>(
|
resItem.list.map((item) => [String(item.id), String(item[resItem.labelKey] || item.fullName || item.orgNameTree || '')]),
|
);
|
resItem.keys.forEach((key) => textMap.set(key, itemMap));
|
}
|
for (const row of list) {
|
for (const column of echoColumns) {
|
if (row[`${column.value}_name`]) continue;
|
const valueList = getValueList(row[column.value], column.multiple);
|
const itemMap = textMap.get(column.jnpfKey);
|
const text = valueList.map((id) => itemMap?.get(String(id)) || id).join(',');
|
if (text) row[`${column.value}_name`] = text;
|
}
|
}
|
});
|
}
|
function normalizeDateFormat(format = 'yyyy-MM-dd') {
|
return format.replaceAll('yyyy', 'YYYY').replaceAll('dd', 'DD');
|
}
|
function getValueList(value, multiple = false) {
|
if (Array.isArray(value)) return value;
|
if (value === null || value === undefined || value === '') return [];
|
if (typeof value === 'string') {
|
try {
|
const list = JSON.parse(value);
|
if (Array.isArray(list)) return list;
|
} catch {}
|
if (multiple && value.includes(',')) return value.split(',');
|
}
|
return [value];
|
}
|
function getOptionText(column, value) {
|
const valueList = getValueList(value, column.multiple || column.jnpfKey === 'checkbox');
|
const fieldNames = column.props || {};
|
const valueKey = fieldNames.value || 'id';
|
const labelKey = fieldNames.label || 'fullName';
|
const options: any[] = [];
|
const loop = (list: any[] = []) => {
|
for (const item of list) {
|
options.push(item);
|
if (item.children?.length) loop(item.children);
|
}
|
};
|
loop(column.options || []);
|
return valueList
|
.map((valueItem) => {
|
const option = options.find((item) => String(item[valueKey]) === String(valueItem));
|
return option ? option[labelKey] : valueItem;
|
})
|
.filter((item) => item !== null && item !== undefined && item !== '')
|
.join(',');
|
}
|
function getColumnText(column, record) {
|
if (column.dataIndex === 'index') return '';
|
const nameValue = record[`${column.dataIndex}_name`];
|
const value = nameValue !== null && nameValue !== undefined && nameValue !== '' ? nameValue : record[column.dataIndex];
|
if (value === null || value === undefined || value === '') return '';
|
if (['checkbox', 'radio', 'select'].includes(column.jnpfKey)) return getOptionText(column, value);
|
if (column.jnpfKey === 'inputNumber') {
|
const numberValue = Number(value);
|
if (Number.isNaN(numberValue)) return value;
|
const text = column.precision || column.precision === 0 ? numberValue.toFixed(column.precision) : value;
|
return column.thousands ? thousandsFormat(text) : text;
|
}
|
if (column.jnpfKey === 'datePicker') {
|
const dateValue = typeof value === 'number' || /^\d+$/.test(String(value)) ? Number(value) : value;
|
const date = dayjs(dateValue);
|
return date.isValid() ? date.format(normalizeDateFormat(column.format)) : value;
|
}
|
return Array.isArray(value) ? value.join(',') : value;
|
}
|
|
watch(
|
() => props.columnOptions,
|
() => {
|
buildColumnOptions();
|
},
|
{ deep: true, immediate: true },
|
);
|
|
onMounted(() => {
|
state.listQuery.pageSize = props.hasPage ? props.pageSize : 100000;
|
});
|
</script>
|
|
<template>
|
<div class="common-container">
|
<a-select
|
v-model:value="innerValue"
|
v-bind="getSelectBindValue"
|
v-if="popupType !== 'popover' || (popupType == 'popover' && !!disabled)"
|
:options="options"
|
@change="onChange"
|
@click="openSelectModal" />
|
<template v-if="popupType === 'dialog'">
|
<AModal
|
v-model:open="visible"
|
:mask-closable="false"
|
:title="popupTitle"
|
:width="popupWidth"
|
class="common-container-modal"
|
@cancel="handleCancel"
|
@ok="handleSubmit">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<div class="jnpf-common-search-box jnpf-common-search-box-modal">
|
<a-form ref="formElRef" :class="getFormClass" :colon="false" :model="listQuery" label-align="right">
|
<a-row :gutter="10">
|
<a-col :span="8">
|
<a-form-item :label="$t('common.keyword')" name="keyword">
|
<a-input v-model:value="listQuery.keyword" :placeholder="$t('common.enterKeyword')" allow-clear @press-enter="handleSearch" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label=" ">
|
<a-button class="mr-2" type="primary" @click="handleSearch">{{ $t('common.queryText') }}</a-button>
|
<a-button @click="handleReset">{{ $t('common.resetText') }}</a-button>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
<div class="jnpf-common-search-box-right">
|
<a-tooltip placement="top">
|
<template #title>
|
<span>{{ $t('common.redo') }}</span>
|
</template>
|
<RedoOutlined class="jnpf-common-search-box-right-icon" @click="initData" />
|
</a-tooltip>
|
</div>
|
</div>
|
<a-table :data-source="list" v-bind="getTableBindValues" ref="tableElRef" @change="handleTableChange">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex !== 'index'">{{ getColumnText(column, record) }}</template>
|
</template>
|
</a-table>
|
</AModal>
|
</template>
|
<template v-if="popupType === 'drawer'">
|
<ADrawer v-model:open="visible" :class="`${drawerPrefixCls} common-container-drawer`" :title="popupTitle" :width="popupWidth">
|
<div class="common-container-drawer-body">
|
<div class="jnpf-common-search-box jnpf-common-search-box-modal">
|
<a-form ref="formElRef" :class="getFormClass" :colon="false" :model="listQuery" label-align="right">
|
<a-row :gutter="10">
|
<a-col :span="8">
|
<a-form-item :label="$t('common.keyword')" name="keyword">
|
<a-input v-model:value="listQuery.keyword" :placeholder="$t('common.enterKeyword')" allow-clear @press-enter="handleSearch" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label=" ">
|
<a-button class="mr-2" type="primary" @click="handleSearch">{{ $t('common.queryText') }}</a-button>
|
<a-button @click="handleReset">{{ $t('common.resetText') }}</a-button>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
<div class="jnpf-common-search-box-right">
|
<a-tooltip placement="top">
|
<template #title>
|
<span>{{ $t('common.redo') }}</span>
|
</template>
|
<RedoOutlined class="jnpf-common-search-box-right-icon" @click="initData" />
|
</a-tooltip>
|
</div>
|
</div>
|
<a-table :data-source="list" v-bind="getTableBindValues" ref="tableElRef" @change="handleTableChange">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex !== 'index'">{{ getColumnText(column, record) }}</template>
|
</template>
|
</a-table>
|
</div>
|
<div :class="drawerFooterPrefixCls" :style="getDrawerFooterStyle">
|
<a-button class="mr-[10px]" @click="handleCancel">{{ $t('common.cancelText') }}</a-button>
|
<a-button class="mr-[10px]" type="primary" @click="handleSubmit">{{ $t('common.okText') }}</a-button>
|
</div>
|
</ADrawer>
|
</template>
|
<a-popover v-if="popupType === 'popover' && !disabled" v-model:open="visible" overlay-class-name="popup-select-popover" placement="bottom" trigger="click">
|
<template #content>
|
<div class="jnpf-common-search-box jnpf-common-search-box-modal">
|
<a-form ref="formElRef" :class="getFormClass" :colon="false" :model="listQuery" label-align="right">
|
<a-row :gutter="10">
|
<a-col :span="8">
|
<a-form-item :label="$t('common.keyword')" name="keyword">
|
<a-input v-model:value="listQuery.keyword" :placeholder="$t('common.enterKeyword')" allow-clear @press-enter="handleSearch" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item label=" ">
|
<a-button class="mr-2" type="primary" @click="handleSearch">{{ $t('common.queryText') }}</a-button>
|
<a-button @click="handleReset">{{ $t('common.resetText') }}</a-button>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
<div class="jnpf-common-search-box-right">
|
<a-tooltip placement="top">
|
<template #title>
|
<span>{{ $t('common.redo') }}</span>
|
</template>
|
<RedoOutlined class="jnpf-common-search-box-right-icon" @click="initData" />
|
</a-tooltip>
|
</div>
|
</div>
|
<a-table :data-source="list" v-bind="getTableBindValues" ref="tableElRef" @change="handleTableChange">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex !== 'index'">{{ getColumnText(column, record) }}</template>
|
</template>
|
</a-table>
|
<a-space :size="10" class="popover-bottom-btns">
|
<a-button @click="handleCancel">{{ $t('common.cancelText') }}</a-button>
|
<a-button type="primary" @click="handleSubmit">{{ $t('common.okText') }}</a-button>
|
</a-space>
|
</template>
|
<a-select v-model:value="innerValue" v-bind="getSelectBindValue" :options="options" @change="onChange" @click="openSelectModal" />
|
</a-popover>
|
<ExtraRelationInfo
|
v-if="popupType !== 'popover' && extraOptions.length > 0 && JSON.stringify(extraData) !== '{}'"
|
:data="extraData"
|
:extra-options="extraOptions" />
|
</div>
|
</template>
|
<style lang="scss">
|
.popup-select-popover {
|
.ant-popover-inner-content {
|
width: 700px;
|
padding: 10px;
|
overflow: hidden;
|
|
.popover-bottom-btns {
|
justify-content: flex-end;
|
width: 100%;
|
margin-top: 10px;
|
}
|
}
|
}
|
</style>
|
