243 lines
6.4 KiB
Vue
243 lines
6.4 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"
|
||
/>
|
||
<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)"
|
||
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 } 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>
|