88 lines
4.2 KiB
Vue
88 lines
4.2 KiB
Vue
<template>
|
|
<el-form ref="elform" :model="listQuery" :label-width="props.labelWidth" :rules="props.rules" :inline="true" label-position="right">
|
|
<el-form-item v-for="item in props.formList" :style="{ width: item.width }" :prop="item.prop" :label="item.label" :label-width="item.labelWidth" :key="item">
|
|
<!-- input表单 input-->
|
|
<MOSTY.Other v-if="item.type == 'input'" width="100%" clearable v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`"/>
|
|
<el-input v-model="listQuery[item.prop]" v-else-if="item.type == 'textarea'" type="textarea" :rows="3" :placeholder="`请输入${item.label}`" />
|
|
<!-- 数值 inputNumber-->
|
|
<el-input type="number" v-model="listQuery[item.prop]" v-else-if="item.type == 'inputNumber'" :placeholder="`请输入${item.label}`" />
|
|
<!-- 数值 number-->
|
|
<el-input-number v-model="listQuery[item.prop]" v-else-if="item.type == 'number'" style="width:100%" :min="0" :max="1000" />
|
|
<!--选择 select-->
|
|
<MOSTY.Select v-else-if="item.type == 'select'" :multiple="item.multiple" v-model="listQuery[item.prop]" :dictEnum="item.options" width="100%" clearable :placeholder="`请选择${item.label}`"/>
|
|
<!-- 部门department -->
|
|
<template v-else-if="item.showType === 'department'">
|
|
<MOSTY.Department clearable v-model="listQuery[item.prop]" />
|
|
</template>
|
|
|
|
<!-- 上传 upload -->
|
|
<MOSTY.Upload v-else-if="item.type == 'upload'" width="100%" v-model="listQuery[item.prop]"/>
|
|
<!--选择checkbox -->
|
|
<MOSTY.CheckBox v-else-if="item.type == 'checkbox'" width="100%" clearable v-model="listQuery[item.prop]" :checkList="item.options" :placeholder="`请选择${item.label}`"/>
|
|
|
|
<!-- 单选radio -->
|
|
<el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
|
|
<el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value" >{{ obj.label }}</el-radio>
|
|
</el-radio-group>
|
|
|
|
<!-- 时间选择 -->
|
|
<el-time-picker v-else-if="item.type == 'time'" v-model="listQuery[item.prop]" placeholder="选择时间" style="width:100%;" />
|
|
<el-date-picker v-else-if="item.type == 'date'" v-model="listQuery[item.prop]" type="date" value-format="YYYY-MM-DD" :placeholder="请选择时间" style="width:100%;" />
|
|
<el-date-picker v-else-if="item.type == 'datetime'" v-model="listQuery[item.prop]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="请选择时间" style="width:100%;" />
|
|
<el-date-picker v-else-if="item.type == 'datetimerange'" v-model="listQuery[item.prop]" type="datetimerange" :shortcuts="shortcuts" range-separator="To" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="选择开始时间" end-placeholder="选择结束时间" style="width:100%;" />
|
|
<el-date-picker v-else-if="item.type == 'daterange'" v-model="listQuery[item.prop]" type="daterange" range-separator="To" value-format="YYYY-MM-DD" start-placeholder="选择开始日期" end-placeholder="选择开始日期" style="width:100%;" />
|
|
|
|
<el-switch v-else-if="item.type == 'switch'" v-model="listQuery[item.prop]" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
|
|
|
|
<template v-else-if="item.type === 'slot'">
|
|
<slot :name="item.prop"></slot>
|
|
</template>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<script setup>
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
|
|
const props = defineProps({
|
|
//循环的值
|
|
formList: {
|
|
default: [],
|
|
type: Array
|
|
},
|
|
rules: {
|
|
default: {},
|
|
type: Object
|
|
},
|
|
labelWidth: {
|
|
default: "140px",
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
});
|
|
const elform = ref();
|
|
const listQuery = ref({});
|
|
const emits = defineEmits(["update:modelValue"]);
|
|
// 提交
|
|
const submit = (resfun) => {
|
|
elform.value.validate((valid) => {
|
|
if (!valid) return false;
|
|
resfun(listQuery.value);
|
|
});
|
|
};
|
|
|
|
watch(() => listQuery.value,(newVal) => {
|
|
emits('update:modelValue', newVal)
|
|
},{ immediate: true, deep: true }
|
|
);
|
|
|
|
watch(() => props.modelValue,(newVal) => {
|
|
listQuery.value = newVal; //赋值
|
|
},{ immediate: true, deep: true }
|
|
);
|
|
|
|
defineExpose({ submit });
|
|
</script>
|
|
|