241 lines
10 KiB
Vue
241 lines
10 KiB
Vue
<template>
|
|
<el-form
|
|
:model="_ruleForm"
|
|
:rules="_rules"
|
|
:label-width="labelWidth ? labelWidth : '140px'"
|
|
ref="ruleFormRef"
|
|
:validate-on-rule-change="false"
|
|
>
|
|
<template v-for="item in formData" :key="item.prop">
|
|
<!-- :limit="1" -->
|
|
<el-form-item :label="item.label" :prop="item.prop" style="margin-bottom: 20px">
|
|
<template v-if="item.type === 'input'">
|
|
<el-input
|
|
style="width: 440px"
|
|
:placeholder="item.placeholder"
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
clearable
|
|
:disabled="item.disabled"
|
|
@blur="handleInputBlur"
|
|
/>
|
|
</template>
|
|
<template v-if="item.type === 'inputSelect'">
|
|
<el-input
|
|
:placeholder="item.placeholder"
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
clearable
|
|
:disabled="item.disabled"
|
|
@blur="handleInputBlur"
|
|
>
|
|
<template #append>
|
|
<el-select v-model="_ruleForm[`${item.prop1}`]" :placeholder="item.placeholder1" style="width: 115px">
|
|
<el-option
|
|
:label="option.label"
|
|
:value="option.value"
|
|
v-for="option in item.options"
|
|
:key="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-input>
|
|
</template>
|
|
<template v-if="item.type === 'inputButton'">
|
|
<el-input
|
|
:placeholder="item.placeholder"
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
clearable
|
|
:disabled="item.disabled"
|
|
>
|
|
<template #append>
|
|
<el-button @click="handleInputButtonClick">选择</el-button>
|
|
</template>
|
|
</el-input>
|
|
</template>
|
|
<template v-if="item.type === 'inputNumber'">
|
|
<el-input-number
|
|
:min="1"
|
|
:max="9999"
|
|
:controls="true"
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
:disabled="item.disabled"
|
|
:placeholder="item.placeholder"
|
|
:maxlength="item.maxLength"
|
|
step-strictly
|
|
:step="1"
|
|
controls-position="right"
|
|
></el-input-number>
|
|
</template>
|
|
|
|
<template v-if="item.type === 'textarea'">
|
|
<el-input
|
|
type="textarea"
|
|
:placeholder="item.placeholder"
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
:autosize="{ minRows: 10, maxRows: 20 }"
|
|
:disabled="item.disabled"
|
|
style="width: 440px"
|
|
/>
|
|
</template>
|
|
<template v-if="item.type === 'date'">
|
|
<el-date-picker
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
type="date"
|
|
:placeholder="item.placeholder"
|
|
clearable
|
|
:disabled="item.disabled"
|
|
/>
|
|
</template>
|
|
<template v-if="item.type === 'datetime'">
|
|
<el-date-picker
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
type="datetime"
|
|
:placeholder="item.placeholder"
|
|
clearable
|
|
:disabled="item.disabled"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
date-format="MMM DD, YYYY"
|
|
time-format="HH:mm"
|
|
/>
|
|
</template>
|
|
<template v-if="item.type === 'radio'">
|
|
<el-radio-group v-model="_ruleForm[`${item.prop}`]" @change="handleRadioGroup(_ruleForm[`${item.prop}`])">
|
|
<el-radio
|
|
:value="option.value"
|
|
:label="option.value"
|
|
v-for="(option, optionIndex) in item.options"
|
|
:key="optionIndex"
|
|
>{{ option.label }}</el-radio
|
|
>
|
|
</el-radio-group>
|
|
</template>
|
|
<!-- <template v-if="item.type === 'radio1'">
|
|
<el-radio-group v-model="_ruleForm[`${item.prop}`]">
|
|
<el-radio
|
|
:value="option.value"
|
|
:label="option.value"
|
|
v-for="(option, optionIndex) in item.options"
|
|
:key="optionIndex"
|
|
>{{ option.label }}</el-radio
|
|
>
|
|
</el-radio-group>
|
|
</template> -->
|
|
<template v-if="item.type === 'upImg'">
|
|
<UploadImg v-model:image-url="_ruleForm[`${item.prop}`]">
|
|
<template #tip>
|
|
<div class="el-upload__tip">{{ item.prompt }}</div>
|
|
</template>
|
|
</UploadImg>
|
|
</template>
|
|
<template v-if="item.type === 'table'">
|
|
<slot />
|
|
</template>
|
|
|
|
<template v-if="item.type === 'video'">
|
|
<UploadVideo width="440px" v-model:video-url="_ruleForm[`${item.prop}`]"> </UploadVideo>
|
|
</template>
|
|
<template v-if="item.type === 'select'">
|
|
<el-select
|
|
style="width: 240px"
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
:placeholder="item.placeholder"
|
|
clearable
|
|
@change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
|
|
>
|
|
<el-option
|
|
:label="option.label"
|
|
:value="option.value"
|
|
v-for="option in item.options"
|
|
:key="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
<template v-if="item.type === 'treeSelect'">
|
|
<el-tree-select
|
|
clearable
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
:data="item.options"
|
|
:placeholder="item.placeholder"
|
|
:render-after-expand="false"
|
|
show-checkbox
|
|
check-strictly
|
|
@change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
|
|
/>
|
|
</template>
|
|
<template v-if="item.type === 'treeSelects'">
|
|
<el-tree-select
|
|
v-model="_ruleForm[`${item.prop}`]"
|
|
:data="item.options"
|
|
multiple
|
|
:render-after-expand="false"
|
|
show-checkbox
|
|
check-strictly
|
|
check-on-click-node
|
|
style="width: 240px"
|
|
/>
|
|
</template>
|
|
<template v-if="item.type === 'treeSelectInput'">
|
|
<slot />
|
|
</template>
|
|
<template v-if="item.type === 'WangEditor'">
|
|
<WangEditor v-model:value="_ruleForm[`${item.prop}`]" />
|
|
</template>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { FormInstance, FormRules } from "element-plus";
|
|
import UploadVideo from "@/components/Upload/UploadVideo.vue";
|
|
import UploadImg from "@/components/Upload/UploadImg.vue";
|
|
interface IProps {
|
|
ruleForm: { [key: string]: any };
|
|
formData: any[];
|
|
rules?: FormRules;
|
|
handleInputButton?: () => void;
|
|
isIndeterminate?: boolean;
|
|
labelWidth?: any;
|
|
handleInputBlurEmits?: () => void;
|
|
handleSelectChangeEmits?: () => void;
|
|
handleRadioGroupEmits?: () => void;
|
|
handleTreesSelectChangeEmits?: () => void;
|
|
}
|
|
const emits = defineEmits<{
|
|
(e: "handleInputButton", result?: Record<string, any>): void;
|
|
(e: "handleInputBlurEmits", result?: Record<string, any>): void;
|
|
(e: "handleSelectChangeEmits", result?: Record<string, any>): void;
|
|
(e: "handleRadioGroupEmits", result?: any): void;
|
|
(e: "handleTreesSelectChangeEmits", result?: any): void;
|
|
}>();
|
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
const props = defineProps<IProps>();
|
|
//本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了
|
|
const _ruleForm = computed(() => props.ruleForm);
|
|
// 接收 rules 并设置为响应式,必须要为响应式的,否则失效
|
|
const _rules = computed(() => props.rules);
|
|
//inputButton
|
|
const handleInputButtonClick = () => {
|
|
emits("handleInputButton", {});
|
|
};
|
|
const handleInputBlur = () => {
|
|
emits("handleInputBlurEmits");
|
|
};
|
|
const handleSelectChange = (params: any, prop: any) => {
|
|
emits("handleSelectChangeEmits", { id: params, prop });
|
|
};
|
|
// const handleTreesSelectChange = (params: any) => {
|
|
// emits("handleTreesSelectChangeEmits", params);
|
|
// };
|
|
const handleRadioGroup = (value: any) => {
|
|
emits("handleRadioGroupEmits", value);
|
|
};
|
|
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
|
defineExpose({
|
|
ruleForm: _ruleForm,
|
|
ruleFormRef: ruleFormRef
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|