@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
79 lines (78 loc) • 3.34 kB
TypeScript
/**
* QuerySolution 组件用来筛选过滤数据。
*
* @example
* ```tsx
* import { defineComponent, ref } from 'vue';
* import { FQuerySolution } from '../../components/query-solution';
* import { fieldConfigs, solutions } from './solutions';
*
* export default defineComponent({
* name: 'QuerySolutionBasic',
* setup() {
* const querySolutionRef = ref<any>();
* const defaultValues = ref<any>({ readonly: false, data: [], scope: 'none' });
* const queryInfos = ref('');
* const conditionInfo = ref('');
*
* function changeDefault() {
* defaultValues.value = {
* readonly: false,
* scope: 'all',
* data: [
* { id: '34557581-8e38-41eb-ac6f-678545f0a7e0', value: { value: '2025/03/05' } },
* { id: 'e8d85679-ab4e-4382-ae5f-dba65befa027', value: { value: 4 } }
* ]
* };
* }
*
* function changeVisible() {
* querySolutionRef.value?.updateConditions?.([
* { id: '34557581-8e38-41eb-ac6f-678545f0a7e0', visible: false },
* { id: 'e8d85679-ab4e-4382-ae5f-dba65befa027', visible: false }
* ]);
* }
*
* function getConditionHandler() {
* const conditions = querySolutionRef.value?.getConditions?.();
* conditionInfo.value = !conditions?.length ? '' : JSON.stringify(conditions);
* }
*
* function queryHandler(eventInfo: unknown) {
* queryInfos.value = JSON.stringify(eventInfo);
* }
*
* return () => (
* <div class="f-form-layout farris-form farris-form-controls-inline f-form-label-xl farris-form-auto">
* <div class="col-6"><button class="btn btn-secondary mx-3 mb-2" onClick={changeDefault}>默认值赋值</button></div>
* <div class="col-6"><button class="btn btn-secondary mx-3 mb-2" onClick={changeVisible}>指定字段隐藏</button></div>
* <div class="col-6"><button class="btn btn-secondary mx-3 mb-2" onClick={getConditionHandler}>getConditions方法</button></div>
* <div class="col-12">
* <FQuerySolution
* ref={querySolutionRef}
* fields={fieldConfigs}
* solutions={solutions}
* presetFields={fieldConfigs}
* defaultValues={defaultValues.value}
* changeQuery={true}
* onQuery={queryHandler}
* />
* </div>
* <div class="col-12"><code>{queryInfos.value}</code></div>
* <div class="col-12"><code>{conditionInfo.value}</code></div>
* </div>
* );
* }
* });
* ```
*
* @public
*/
declare const _default: import("vue").DefineComponent<{
[x: string]: any;
}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
[x: string]: any;
}> & Readonly<{}>, {
[x: string]: any;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;