118 lines
5.5 KiB
Vue
118 lines
5.5 KiB
Vue
<template>
|
||
<el-form ref="elform" :model="listQuery" :label-width="props.labelWidth" :rules="props.rules" :inline="props.inline" label-position="right" :disabled="props.disabled">
|
||
|
||
<el-form-item v-for="(item, idx) in props.formList" :style="item.width && { width: item.width }" :prop="item.prop" :label="item.label" :label-width="item.labelWidth" :key="idx">
|
||
<!-- input表单 input-->
|
||
<MOSTY.Other v-if="item.type == 'input'" width="100%" clearable v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`" :disabled="item.disabled" :readonly="item.readonly" />
|
||
|
||
<el-input v-model="listQuery[item.prop]" v-else-if="item.type == 'textarea'" type="textarea" :rows="3" :placeholder="`请输入${item.label}`" :disabled="item.disabled" />
|
||
<!-- 数值 inputNumber-->
|
||
<el-input type="number" v-model="listQuery[item.prop]" v-else-if="item.type == 'inputNumber'" :placeholder="`请输入${item.label}`" :disabled="item.disabled" />
|
||
<!-- 数值 number-->
|
||
<el-input-number v-model="listQuery[item.prop]" v-else-if="item.type == 'number'" style="width: 100%" :min="item.min || 0" :max="item.max || 1000" :disabled="item.disabled" />
|
||
|
||
<!--选择 select-->
|
||
<MOSTY.Select v-else-if="item.type == 'select'" filterable :multiple="item.multiple" v-model="listQuery[item.prop]" :dictEnum="item.options" width="100%" clearable :placeholder="`请选择${item.label}`" :disabled="item.disabled" />
|
||
|
||
<!-- 部门department -->
|
||
<template v-else-if="item.type === 'department'">
|
||
<MOSTY.Department style="width: 100%;" clearable :isAll="item.isAll" @getDepValue="getdep($event, item.depMc)" :multiple="item.multiple" v-model="listQuery[item.prop]" :placeholder="listQuery[item.depMc] ? listQuery[item.depMc] : '请选择'" />
|
||
</template>
|
||
|
||
<!-- 上传 upload -->
|
||
<MOSTY.Upload v-else-if="item.type == 'upload'" width="100%" v-model="listQuery[item.prop]" :isImg="item.isImg" :disabled="item.disabled" />
|
||
|
||
<!--选择checkbox -->
|
||
<MOSTY.CheckBox v-else-if="item.type == 'checkbox'" width="100%" clearable v-model="listQuery[item.prop]" :checkList="item.options" :placeholder="`请选择${item.label}`" :disabled="item.disabled" />
|
||
|
||
<!-- 单选radio -->
|
||
<el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'" :disabled="item.disabled">
|
||
<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%" :disabled="item.disabled" />
|
||
<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%" :disabled="item.disabled" />
|
||
<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%" :disabled="item.disabled" />
|
||
<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%" :disabled="item.disabled" />
|
||
<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%" :disabled="item.disabled" />
|
||
|
||
<el-switch v-else-if="item.type == 'switch'" v-model="listQuery[item.prop]" class="ml-2" :disabled="item.disabled" 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, watchEffect, readonly } from "vue";
|
||
const props = defineProps({
|
||
//循环的值
|
||
formList: {
|
||
default: [],
|
||
type: Array
|
||
},
|
||
rules: {
|
||
default: {},
|
||
type: Object
|
||
},
|
||
labelWidth: {
|
||
default: "140px",
|
||
type: String
|
||
},
|
||
modelValue: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
inline: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
});
|
||
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);
|
||
});
|
||
};
|
||
|
||
const getdep = (e, val) => {
|
||
if (val) listQuery.value[val] = e ? e.orgName : '';
|
||
}
|
||
const reset = () => {
|
||
elform.value.resetFields()
|
||
}
|
||
|
||
// 修改这里的watch逻辑，避免无限循环
|
||
let isUpdatingFromProps = false;
|
||
|
||
watch(() => listQuery.value, (newVal) => {
|
||
if (newVal && !isUpdatingFromProps) {
|
||
emits("update:modelValue", newVal);
|
||
}
|
||
}, { deep: true });
|
||
|
||
watch(() => props.modelValue, (newVal) => {
|
||
// 只有在新值确实变化时才更新（避免空值覆盖）
|
||
if (newVal && Object.keys(newVal).length > 0) {
|
||
isUpdatingFromProps = true;
|
||
listQuery.value = { ...newVal };
|
||
setTimeout(() => {
|
||
isUpdatingFromProps = false;
|
||
}, 0);
|
||
}
|
||
}, { immediate: true, deep: true });
|
||
|
||
defineExpose({ submit, reset });
|
||
</script>
|