提交 a778de0b 编写于 作者: RedPig97's avatar RedPig97

update:更新

上级 cb9b1ac6
<script setup lang="ts">
import { onBeforeMount, Ref, ref } from "vue";
import { handleEditorNavParams, deepCopy, IParam, IActionParam } from "@ibiz-core";
interface AutoCompleteProps {
/**
* @description 表单数据或表格行数据
*/
data: IParam;
/**
* @description 编辑器值
*/
value: IParam;
/**
* @description 编辑器名称
*/
name: string;
/**
* @description 值项
*/
valueItem: string;
/**
* @description 占位提示信息
*/
placeholder: string;
/**
* @description 上下文
*/
contextProp?: IParam;
/**
* @description 视图参数
*/
viewParamsProp?: IParam;
/**
* @description 局部上下文
*/
localContext?: IParam;
/**
* @description 局部视图参数
*/
localParam?: IParam;
/**
* @description 主信息属性
*/
deMajorField?: string;
/**
* @description 主键属性
*/
deKeyField?: string;
/**
* @description 选择视图
*/
pickUpView?: IParam;
/**
* @description 链接视图
*/
linkView?: IParam;
/**
* @description ac参数
*/
acParams?: IParam;
/**
* @description 排序
*/
sort?: string;
/**
* @description 是否展开下拉框
*/
open: boolean;
/**
* @description 外键值附加数据
*/
pickUpData?: string;
/**
* @description 禁用
*/
disabled: boolean;
/**
* @description 禁用
*/
readonly: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<AutoCompleteProps>(), {
deMajorField: "srfmajortext",
deKeyField: "srfkey",
disabled: false,
readonly: false,
showButton: true,
open: true,
});
const emit = defineEmits<EditorEmit>();
const { navContext, navViewParam } = handleEditorNavParams(props);
let items: Ref<any[]> = ref([]);
/**
* @description 搜索
* @param value 搜索值
*/
const onSearch = (value: string) => {
let _navContext = deepCopy(navContext);
let _navViewParam = deepCopy(navViewParam);
Object.assign(_navViewParam, { query: value, size: 1000 });
if (props.sort) {
Object.assign(_navViewParam, { sort: props.sort });
}
// TODO数据服务请求数据
items.value = [
{
srfkey: "4646",
srfmajortext: "Jack",
},
{
srfkey: "49897",
srfmajortext: "Lucy",
},
{
srfkey: "164646",
srfmajortext: "Disabled",
},
{
srfkey: "4646",
srfmajortext: "Yiminghe",
},
];
};
const filterOption= (inputValue: string,option: IParam) => {
return option[props.deMajorField].includes(inputValue);
}
const onSelect = (value: any) => {
const selectItem = items.value.find((item: IParam) =>
Object.is(item[props.deKeyField], value)
);
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: selectItem[props.deMajorField],
});
emit("editorEvent", {
tag: props.valueItem,
action: "valueChange",
data: selectItem[props.deKeyField],
});
}
</script>
<template>
<a-auto-complete
:class="['app-editor-container', `app-auto-complete-${name}`]"
:allowClear="true"
:value="value"
:placeholder="placeholder"
:options="items"
:filterOption="filterOption"
:disabled="disabled || readonly"
@search="onSearch"
>
<template #option="{ srfmajortext: caption,srfkey: value }">
<div @click="onSelect(value)">{{caption}}</div>
</template>
</a-auto-complete>
</template>
<style scoped></style>
<script setup lang="ts">
import { IActionParam } from "@ibiz-core";
import { computed, Ref } from "vue";
interface CheckboxProps {
/**
* @description 编辑器名称
*/
name: string;
/**
* 传入值
* @type {any}
* @memberof checkbox
*/
value: number;
/**
* 是否禁用
* @type {boolean}
* @memberof checkbox
*/
disabled?: boolean;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<CheckboxProps>(), {
disabled: false,
readonly: false,
});
const emit = defineEmits<EditorEmit>();
const curValue: Ref<boolean> = computed(() => {
if (props.value == 0) {
return false;
} else {
return true;
}
});
const onChange = ($event: any) => {
const value = $event.target.checked ? 1 : 0;
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value,
});
};
</script>
<template>
<div :class="['app-editor-container', `app-checkbox-${name}`]">
<a-checkbox
@change="onChange"
:checked="curValue"
:disabled="disabled || readonly"
></a-checkbox>
</div>
</template>
<style scoped>
.app-editor-container {
width: fit-content;
}
</style>
<script setup lang="ts">
import {
handleEditorNavParams,
handleLevelCodeList,
loadCodeListData,
IActionParam,
IParam
} from "@ibiz-core";
import { computed, onBeforeMount, ref, Ref } from "vue";
interface CheckboxListProps {
/**
* 值
*
* @type {*}
* @memberof AppCheckBox
*/
value: any;
/**
* 属性名称
*
* @type {*}
* @memberof AppCheckBox
*/
name: string;
/**
* 传入表单数据
*
* @type {*}
* @memberof AppCheckBox
*/
data: IParam;
/**
* 模式(数字或者字符串)
*
* @type {*}
* @memberof AppCheckBox
*/
mode: "string" | "number";
/**
* 代码表值分隔符
*
* @type {string}
* @memberof AppCheckBox
*/
valueSeparator: string;
/**
* 属性类型
*
* @type {'string' | 'number'}
* @memberof AppCheckBox
*/
valueType: "string" | "number";
/**
* 代码表标识
*
* @type {string}
* @memberof AppCheckBox
*/
codeListTag: string;
/**
* 代码表类型
*
* @type {string}
* @memberof AppCheckBox
*/
codeListType: string;
/**
* 视图上下文
*
* @type {*}
* @memberof AppCheckBox
*/
contextProp: IParam;
/**
* 视图参数
*
* @type {*}
* @memberof AppCheckBox
*/
viewParamsProp: IParam;
/**
* 局部上下文导航参数
*
* @type {any}
* @memberof AppCheckBox
*/
localContext: IParam;
/**
* 局部导航参数
*
* @type {any}
* @memberof AppCheckBox
*/
localParam: IParam;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppCheckBox
*/
disabled?: boolean;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<CheckboxListProps>(), {
disabled: false,
readonly: false,
valueType: "string",
valueSeparator: ",",
mode: "string",
});
const emit = defineEmits<EditorEmit>();
const { navContext, navViewParam } = handleEditorNavParams(props);
let items: Ref<IParam[]> = ref([]);
const selectArray: Ref<boolean> = computed(() => {
if (props.value) {
let selects = props.value.split(props.valueSeparator);
return selects;
} else {
return [];
}
});
const onChange = ($event: any[]) => {
let value: null | string | number = null;
let _datas: string[] = [];
items.value.forEach((item: any) => {
const index = $event.findIndex((_key: any) => Object.is(item.value, _key));
if (index === -1) {
return;
}
_datas.push(item.value);
});
value = _datas.join(props.valueSeparator);
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value,
});
};
onBeforeMount(() => {
loadCodeListData(
props.codeListTag,
props.codeListType,
navContext,
navViewParam
).then((codeListData: IParam[]) => {
items.value = handleLevelCodeList(codeListData);
});
});
</script>
<template>
<div :class="['app-editor-container', `app-checkbox-list-${name}`]">
<a-checkbox-group
@change="onChange"
:value="selectArray"
:options="items"
:disabled="disabled || readonly"
></a-checkbox-group>
</div>
</template>
<style scoped>
.app-editor-container {
width: fit-content;
}
</style>
<script setup lang="ts">
import { onBeforeMount, Ref, ref } from "vue";
import { handleEditorNavParams, deepCopy, openLinkView, openPickUpView, IParam, IActionParam } from "@ibiz-core";
interface DataPickerProps {
/**
* @description 编辑器名称
*/
name: string;
/**
* @description 值项
*/
valueItem: string;
/**
* @description 编辑器值
*/
value: any;
/**
* @description 禁用
*/
disabled?: boolean;
/**
* @description 占位提示信息
*/
placeholder?: string;
/**
* @description 表单数据或表格行数据
*/
data?: any;
/**
* @description 上下文
*/
contextProp?: any;
/**
* @description 视图参数
*/
viewParamsProp?: any;
/**
* @description 局部上下文
*/
localContext?: any;
/**
* @description 局部视图参数
*/
localParam?: any;
/**
* @description 主信息属性
*/
deMajorField?: string;
/**
* @description 主键属性
*/
deKeyField?: string;
/**
* @description 选择视图
*/
pickUpView?: any;
/**
* @description 链接视图
*/
linkView?: any;
/**
* @description ac参数
*/
acParams?: any;
/**
* @description 排序
*/
sort?: string;
/**
* @description 外键值附加数据
*/
pickUpData?: string;
}
interface EditorEmit{
(name: 'editorEvent', value: IActionParam): void
}
const props = withDefaults(defineProps<DataPickerProps>(), {
deMajorField: 'srfmajortext',
deKeyField: 'srfkey',
});
const emit = defineEmits<EditorEmit>();
const { navContext, navViewParam } = handleEditorNavParams(props);
let items: Ref<any[]> = ref([]);
/**
* @description 初始化items
*/
const initItems = () => {
if (props.valueItem && props.data) {
items.value.push({
[props.deMajorField]: props.value,
[props.deKeyField]: props.data[props.valueItem]
})
}
}
/**
* @description 填充外键值附加数据
* @param item 选中数据
*/
const fillPickUpData = (item: IParam) => {
if(props.pickUpData){
let pickUpDataArray: string[] = props.pickUpData.split(";")
if(pickUpDataArray && pickUpDataArray.length >0){
for(let i=0; i<pickUpDataArray.length; i++){
if(item){
emit("editorEvent", {
tag: pickUpDataArray[i], action: "valueChange", data: item[pickUpDataArray[i]]
});
}else{
emit("editorEvent", {
tag: pickUpDataArray[i], action: "valueChange", data: null
});
}
}
}
}
}
/**
* @description 选中项改变
* @param select 选中项值
* @param option 选中项数据
*/
const onChange = (select: any, option:any) => {
const selectItem = items.value.find(
(item: IParam) => Object.is(item[props.deKeyField], select)
);
emit('editorEvent', { tag: props.name, action: "valueChange", data: selectItem[props.deMajorField]});
emit('editorEvent', { tag: props.valueItem, action: "valueChange", data: selectItem[props.deKeyField]});
fillPickUpData(selectItem);
}
/**
* @description 搜索
* @param value 搜索值
*/
const onSearch = (value: string) => {
let _navContext = deepCopy(navContext);
let _navViewParam= deepCopy(navViewParam);
Object.assign(_navViewParam, { query: value, size: 1000 });
if (props.sort) {
Object.assign(_navViewParam, { sort: props.sort});
}
// TODO数据服务请求数据
items.value = [ {
srfkey: '4646',
srfmajortext: 'Jack',
},
{
srfkey: '49897',
srfmajortext: 'Lucy',
},
{
srfkey: '164646',
srfmajortext: 'Disabled',
},
{
srfkey: '4646',
srfmajortext: 'Yiminghe',
}];
}
onBeforeMount(() => {
initItems();
})
</script>
<template>
<a-select
:class="['app-editor-container', `app-data-picker-${name}`]"
allowClear
showSearch
v-model:value="value"
:disabled="disabled"
:filterOption="false"
@change="onChange"
@search="onSearch"
:placeholder="placeholder">
<template #suffixIcon>
<search-outlined v-if="pickUpView" @click="openPickUpView"/>
<select-outlined v-if="linkView" @click="openLinkView"/>
</template>
<a-select-option v-for="(item, index) in items" :key="index" :value="item[deKeyField]">
{{item[deMajorField]}}
</a-select-option>
</a-select>
</template>
<style scoped>
</style>
\ No newline at end of file
<script setup lang="ts">
import { IActionParam } from "@ibiz-core";
import { computed, Ref } from "vue";
interface DatePickerProps {
/**
* checked选中状态
*
* @type {number}
* @memberof DatePickerProps
*/
value: number;
/**
* checked选中状态
*
* @type {string}
* @memberof DatePickerProps
*/
name: string;
/**
* 日期面板的状态
*
* @type {string}
* @memberof DatePickerProps
*/
mode: 'time' | 'date' | 'month' | 'year' | 'decade';
/**
* 设置选择器类型
*
* @type {string}
* @memberof DatePickerProps
*/
picker: 'date' | 'week' | 'month' | 'quarter' | 'year';
/**
* 提示信息
*
* @type {string}
* @memberof DatePickerProps
*/
placeholder: string;
/**
* 禁用
*
* @type {boolean}
* @memberof DatePickerProps
*/
disabled?: boolean;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<DatePickerProps>(), {
disabled: false,
readonly: false,
picker: 'date',
});
const emit = defineEmits<EditorEmit>();
const onChange = (value: number) => {
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value ? 1 : 0,
});
};
</script>
<template>
<a-date-picker
:class="['app-editor-container', `app-date-picker-${name}`]"
:mode="mode"
:picker="picker"
:placeholder="placeholder"
:inputReadOnly="readonly"
:disabled="disabled"/>
</template>
<style scoped>
</style>
<script setup lang="ts">
import { IActionParam } from "@ibiz-core";
import { onBeforeMount, ref, Ref } from "vue";
interface InputIpProps{
/**
* @description 编辑器名称
*/
name: string;
/**
* @description 编辑器值
*/
value: string;
/**
* @description 禁用
*/
disabled?: boolean;
/**
* @description 只读
*/
readonly: boolean;
}
interface EditorEmit{
(name: 'editorEvent', value: IActionParam): void
}
const props = withDefaults(defineProps<InputIpProps>(), {
disabled: false,
readonly: false
})
const emit = defineEmits<EditorEmit>()
const ipData: Ref<any> = ref([]);
const onChange = () => {
if (ipData.value.length == 4) {
emit('editorEvent', { tag: props.name, action: "valueChange", data: ipData.value.join('.')});
}
}
onBeforeMount(() => {
if (props.value) {
ipData.value = props.value.split('.');
}
})
</script>
<template>
<div :class="['app-editor-container',`app-input-ip-${name}`]">
<a-input-group size="large">
<a-row :gutter="8">
<a-col :span="5">
<a-input @change="onChange" v-model:value="ipData[0]" />
</a-col>
<a-col :span="5">
<a-input @change="onChange" v-model:value="ipData[1]" />
</a-col>
<a-col :span="5">
<a-input @change="onChange" v-model:value="ipData[2]" />
</a-col>
<a-col :span="5">
<a-input @change="onChange" v-model:value="ipData[3]" />
</a-col>
</a-row>
</a-input-group>
</div>
</template>
<style scoped>
</style>
\ No newline at end of file
<script setup lang="ts">
import {
handleEditorNavParams,
handleLevelCodeList,
loadCodeListData,
IActionParam,
IParam
} from "@ibiz-core";
import { onBeforeMount, ref, Ref } from "vue";
interface RadioGroupProps {
/**
* 值
*
* @type {*}
* @memberof AppCheckBox
*/
value: any;
/**
* 属性名称
*
* @type {*}
* @memberof AppCheckBox
*/
name: string;
/**
* 传入表单数据
*
* @type {*}
* @memberof AppCheckBox
*/
data: IParam;
/**
* 代码表标识
*
* @type {string}
* @memberof AppCheckBox
*/
codeListTag: string;
/**
* 代码表类型
*
* @type {string}
* @memberof AppCheckBox
*/
codeListType: string;
/**
* 视图上下文
*
* @type {*}
* @memberof AppCheckBox
*/
contextProp: IParam;
/**
* 视图参数
*
* @type {*}
* @memberof AppCheckBox
*/
viewParamsProp: IParam;
/**
* 局部上下文导航参数
*
* @type {any}
* @memberof AppCheckBox
*/
localContext: IParam;
/**
* 局部导航参数
*
* @type {any}
* @memberof AppCheckBox
*/
localParam: IParam;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppCheckBox
*/
disabled?: boolean;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<RadioGroupProps>(), {
disabled: false,
readonly: false,
});
const emit = defineEmits<EditorEmit>();
const { navContext, navViewParam } = handleEditorNavParams(props);
let items: Ref<IParam[]> = ref([]);
const onChange = ($event: any) => {
const value = $event.target.value
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value,
});
};
onBeforeMount(() => {
loadCodeListData(
props.codeListTag,
props.codeListType,
navContext,
navViewParam
).then((codeListData: IParam[]) => {
items.value = handleLevelCodeList(codeListData);
});
});
</script>
<template>
<div :class="['app-editor-container', `app-radio-group-${name}`]">
<a-radio-group
@change="onChange"
:value="value"
:options="items"
:disabled="disabled || readonly"
>
</a-radio-group>
</div>
</template>
<style scoped>
.app-editor-container {
width: fit-content;
}
</style>
<script setup lang="ts">
import { IActionParam, IParam } from "@ibiz-core";
interface RatingProps {
/**
* 传入值
* @type {any}
* @memberof AppRating
*/
value: number;
/**
* 数据名称
* @type {*}
* @memberof AppRating
*/
name: string;
/**
* 是否禁用
* @type {boolean}
* @memberof AppRating
*/
disabled?: boolean;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
/**
* 下发数据
* @type {number}
* @memberof AppRating
*/
data?: IParam;
/**
* 传递最大值
* @type {*}
* @memberof AppRating
*/
max: number;
/**
* 是否半星
* @type {boolean}
* @memberof AppRating
*/
allowHalf: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<RatingProps>(), {
max: 5,
allowHalf: false,
disabled: false,
readonly: false,
});
const emit = defineEmits<EditorEmit>();
const onChange = (value: number) => {
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value,
});
};
</script>
<template>
<div :class="['app-editor-container', `app-rating-${name}`]">
<a-rate
:value="value"
:allowHalf="allowHalf"
:count="max"
:disabled="disabled || readonly"
@change="onChange"
/>
</div>
</template>
<style scoped>
.app-editor-container {
width: fit-content;
}
</style>
<script setup lang="ts">
import { handleEditorNavParams, IActionParam } from "@ibiz-core";
import { onBeforeMount, ref, Ref } from "vue";
interface RawProps {
/**
* @description 编辑器名称
*/
name: string;
/**
* @description 编辑器值
*/
value: string;
/**
* @description 输入框类型
*/
contentType: "RAW" | "HTML" | "IMAGE" | "MARKDOWN";
/**
* @description 上下文
*/
contextProp?: any;
/**
* @description 视图参数
*/
viewParamsProp?: any;
/**
* 图标
*
* @type {string}
* @memberof AppRawItem
*/
imageClass?: string;
/**
* 图片
*
* @type {string}
* @memberof AppRawItem
*/
imgUrl?: string;
/**
* 标题
*
* @type {string}
* @memberof AppRawItem
*/
caption?: string;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<RawProps>(), {
contentType: "RAW",
});
const emit = defineEmits<EditorEmit>();
const content: Ref<string> = ref("");
const { navContext, navViewParam } = handleEditorNavParams(props);
const initContent = () => {
const data = navContext;
if (props.value) {
const items = props.value.match(/\{{(.+?)\}}/g);
if (items) {
items.forEach((item: string) => {
content.value = props.value.replace(
/\{{(.+?)\}}/,
eval(item.substring(2, item.length - 2))
);
});
}
content.value = props.value.replaceAll("&lt;", "<");
content.value = props.value.replaceAll("&gt;", ">");
content.value = props.value.replaceAll("&amp;nbsp;", " ");
content.value = props.value.replaceAll("&nbsp;", " ");
}
return content;
};
onBeforeMount(() => {
initContent();
});
</script>
<template>
<div :class="['app-editor-container', `app-raw-${name}`]">
<div class="raw-caption" v-if="caption">{{ caption }}</div>
<div v-if="Object.is(contentType, 'RAW')">
{{ content }}
</div>
<div v-else-if="Object.is(contentType, 'HTML')" v-html="content" />
<div v-else-if="Object.is(contentType, 'IMAGE')">
<img v-if="imgUrl" :src="imgUrl" />
<a-icon v-else :type="imageClass || ''" />
</div>
</div>
</template>
<style scoped>
.app-editor-container {
text-align: left;
}
</style>
<script setup lang="ts">
import { IActionParam } from "@ibiz-core";
interface sliderProps {
/**
* 传入值
* @type {any}
* @memberof AppSlider
*/
value: number;
/**
* 属性项名称
*
* @type {string}
* @memberof AppPicker
*/
name: string;
/**
* 步长
* @type {number}
* @memberof AppSlider
*/
step?: number;
/**
* 最小值
* @type {number}
* @memberof AppSlider
*/
min?: number;
/**
* 最大值
* @type {number}
* @memberof AppSlider
*/
max?: number;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
/**
* 是否禁用
* @type {boolean}
* @memberof AppSlider
*/
disabled?: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<sliderProps>(), {
min: 0,
max: 100,
step: 1,
disabled: false,
readonly: false,
});
const emit = defineEmits<EditorEmit>();
const onChange = (value: number) => {
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value,
});
};
</script>
<template>
<div :class="['app-editor-container', `app-slider-${name}`]">
<a-slider
:defaultValue="value"
:min="min"
:max="max"
:step="step"
:disabled="disabled || readonly"
@afterChange="onChange"
/>
</div>
</template>
<style scoped>
.app-editor-container {
width: 100%;
height: 100%;
}
</style>
<script setup lang="ts">
import { IActionParam } from "@ibiz-core";
interface StepperProps {
/**
* 传入值
* @type {any}
* @memberof AppSlider
*/
value: number;
/**
* 属性项名称
*
* @type {string}
* @memberof AppPicker
*/
name: string;
/**
* 数值精度
* @type {number}
* @memberof AppSlider
*/
precision: number;
/**
* 步长
* @type {number}
* @memberof AppSlider
*/
step: number;
/**
* 最小值
* @type {number}
* @memberof AppSlider
*/
min?: number;
/**
* 最大值
* @type {number}
* @memberof AppSlider
*/
max?: number;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
/**
* 是否禁用
* @type {boolean}
* @memberof AppSlider
*/
disabled?: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<StepperProps>(), {
step: 1,
disabled: false,
readonly: false,
precision: 0
});
const emit = defineEmits<EditorEmit>();
const onChange = (value: number) => {
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value,
});
};
</script>
<template>
<div :class="['app-editor-container', `app-stepper-${name}`]">
<a-input-number
:value="value"
:min="min"
:max="max"
:step="step"
:precision="precision"
:disabled="disabled || readonly"
@change="onChange"
/>
</div>
</template>
<style scoped>
.app-editor-container {
width: 100%;
height: 100%;
}
.app-editor-container .ant-input-number {
width: 100%;
}
</style>
<script setup lang="ts">
import { IActionParam } from "@ibiz-core";
import { computed, Ref } from "vue";
interface SwitchProps {
/**
* checked选中状态
*
* @type {number}
* @memberof Appswitch
*/
value: number;
/**
* checked选中状态
*
* @type {string}
* @memberof Appswitch
*/
name: string;
/**
* 禁用
*
* @type {boolean}
* @memberof Appswitch
*/
disabled?: boolean;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
/**
* 大小
*
* @type {boolean}
*/
size: string;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<SwitchProps>(), {
disabled: false,
readonly: false,
size: 'default',
});
const emit = defineEmits<EditorEmit>();
const curValue: Ref<boolean> = computed(() => {
if (props.value == 0) {
return false;
} else {
return true;
}
});
const onChange = (value: number) => {
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value ? 1 : 0,
});
};
</script>
<template>
<div :class="['app-editor-container', `app-switch-${name}`]">
<a-switch
:checked="curValue"
:size="size"
:disabled="disabled || readonly"
@change="onChange"
/>
</div>
</template>
<style scoped>
.app-editor-container {
width: fit-content;
}
</style>
<script setup lang="ts">
import { getDownloadUrl, getRequestingHeader, getUploadUrl, IActionParam, IParam } from "@ibiz-core";
import { ref, Ref } from "vue";
interface UploadProps {
/**
* 传入值
* @type {any}
* @memberof UploadProps
*/
value: number;
/**
* 属性项名称
*
* @type {string}
* @memberof UploadProps
*/
name: string;
/**
* 接收文件类型
*
* @type {boolean}
*/
accept: string;
/**
* 上传请求的 http 方法
*
* @type {boolean}
*/
method: string;
/**
* 文件是否多选
*
* @type {boolean}
*/
multiple: boolean;
/**
* 是否展示文件列表
*
* @type {boolean}
*/
showUploadList: boolean;
/**
* 按钮提示信息
*
* @type {boolean}
*/
Tooltip: string;
/**
* 只读模式
*
* @type {boolean}
*/
readonly?: boolean;
/**
* 是否禁用
* @type {boolean}
* @memberof AppUpload
*/
disabled?: boolean;
}
interface EditorEmit {
(name: "editorEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<UploadProps>(), {
disabled: false,
readonly: false,
method: 'post',
multiple: true,
showUploadList: true,
Tooltip: '点击上传'
});
const emit = defineEmits<EditorEmit>();
const uploadUrl = getUploadUrl();
const downloadUrl = getDownloadUrl();
const headers = getRequestingHeader();
const fileList: Ref<IParam[]> = ref([])
const previewFile = (file: IParam) => {
//todo
}
const onChange = (value: number) => {
emit("editorEvent", {
tag: props.name,
action: "valueChange",
data: value,
});
};
</script>
<template>
<div :class="['app-editor-container', `app-upload-${name}`]">
<a-upload
:action="uploadUrl"
:method="method"
v-model:fileList="fileList"
:headers="headers"
:multiple="multiple"
:previewFile="previewFile"
:showUploadList="showUploadList"
:disabled="disabled || readonly"
@change="onChange">
<a-button>
<upload-outlined></upload-outlined>
{{Tooltip}}
</a-button>
</a-upload>
</div>
</template>
<style scoped>
.app-editor-container {
width: 100%;
height: 100%;
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册