考试
This commit is contained in:
13684185576
200
src/components/aboutTable/FormMessage.vue
Normal file
200
src/components/aboutTable/FormMessage.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<el-form ref="elform" :model="listQuery" :disabled="disabled" :label-width="props.labelWidth" :rules="props.rules"
|
||||
:inline="true" label-position="right">
|
||||
<div class="form-row" v-for="(child, idx) in props.formList" :key="idx"
|
||||
:style="{ width: Object.prototype.toString.call(child) === '[object Object]' ? child.width : '' }">
|
||||
<template v-if="Array.isArray(child)">
|
||||
<el-form-item v-for="(item, childIdx) in child" :key="childIdx" :prop="item.prop" :label="item.label"
|
||||
:label-width="item.labelWidth" :style="{ width: child.width }">
|
||||
<!-- input表单 input lx:textarea || number-->
|
||||
<MOSTY.Other v-if="item.type == 'input'" :type="item.lx" :rows="item.rows || 4" width="100%" clearable
|
||||
v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`" />
|
||||
<!-- 数值 number-->
|
||||
<el-input-number v-else-if="item.type == 'number'" @change="handleNum" v-model="listQuery[item.prop]"
|
||||
style="width:100%" :min="item.min || 0" :max="item.max || 1000" />
|
||||
<!--选择 select-->
|
||||
<MOSTY.Select v-else-if="item.type == 'select'" @change="handleNum" filterable :multiple="item.multiple"
|
||||
v-model="listQuery[item.prop]" :dictEnum="item.options" width="100%" clearable
|
||||
:placeholder="`请选择${item.label}`" />
|
||||
<!-- 选择性别 -->
|
||||
<MOSTY.Sex v-else-if="item.type == 'Sex'" v-model:sex="listQuery[item.prop]" width="100%" clearable
|
||||
:placeholder="`请选择${item.label}`" />
|
||||
<!--其他类型other： lx：EDUCATION（文化程度），NATION（民族）-->
|
||||
<MOSTY.PackageSelect v-else-if="item.type == 'other'" :dictEnum="item.lx" width="100%"
|
||||
v-model="listQuery[item.prop]" clearable filterable />
|
||||
<!-- 部门department -->
|
||||
<MOSTY.Department style="width:100%" v-else-if="item.type === 'department'" clearable :placeholder="listQuery.ssbm ? listQuery.ssbm : `请选择${item.label}`"
|
||||
v-model="listQuery[item.prop]" />
|
||||
<!-- 时间选择 type: date/time/datetime/datetimerange/daterange-->
|
||||
<MOSTY.Date v-else-if="item.type == 'date'" :type="item.lx ? item.lx : 'date'" width="100%" clearable
|
||||
v-model="listQuery[item.prop]" />
|
||||
<!-- 上传 upload limit:'限制张数'-->
|
||||
<MOSTY.Upload v-else-if="item.type == 'upload'" :isImg="item.isImg" :limit="item.limit" 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-else-if="item.type == 'radio'" v-model="listQuery[item.prop]">
|
||||
<el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 开关 switch -->
|
||||
<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" />
|
||||
<!-- 日期段选择器 -->
|
||||
<el-date-picker v-else-if="item.type === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
|
||||
unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
|
||||
:end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-else-if="item.type == 'datetime'" v-model="searchObj[item.prop]" type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" />
|
||||
<el-date-picker v-else-if="item.type === 'date'" v-model="searchObj[item.prop]" type="date"
|
||||
:placeholder="item.placeholder" :shortcuts="item.shortcuts" value-format="YYYY-MM-DD">
|
||||
</el-date-picker>
|
||||
<!-- 插槽 slot -->
|
||||
<template v-else-if="item.type === 'slot'">
|
||||
<slot :name="item.prop"></slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item v-if="child.type != 'slot'" :prop="child.prop" :label="child.label"
|
||||
:style="{ width: child.width }">
|
||||
<!-- input表单 input lx:textarea || number-->
|
||||
<MOSTY.Other v-if="child.type == 'input'" :type="child.lx" :rows="child.rows || 4" width="100%" clearable
|
||||
v-model="listQuery[child.prop]" :placeholder="`请输入${child.label}`" />
|
||||
<!-- 数值 number-->
|
||||
<el-input-number v-else-if="child.type == 'number'" @change="handleNum" v-model="listQuery[child.prop]"
|
||||
style="width:100%" :min="child.min || 0" :max="child.max || 1000" />
|
||||
<!--选择 select-->
|
||||
<MOSTY.Select v-else-if="child.type == 'select'" @change="handleNum" filterable :multiple="child.multiple"
|
||||
v-model="listQuery[child.prop]" :dictEnum="child.options" width="100%" clearable
|
||||
:placeholder="`请选择${child.label}`" />
|
||||
<!-- 部门department -->
|
||||
<MOSTY.Department style="width:100%" v-else-if="child.type === 'department'" clearable
|
||||
v-model="listQuery[child.prop]" />
|
||||
<!-- 时间选择 type: date/time/datetime/datetimerange/daterange-->
|
||||
<MOSTY.Date v-else-if="child.type == 'date'" :type="child.lx ? child.lx : 'date'" width="100%" clearable
|
||||
v-model="listQuery[child.prop]" />
|
||||
<!-- 上传 upload limit:'限制张数'-->
|
||||
<MOSTY.Upload v-else-if="child.type == 'upload'" :isImg="child.isImg" :limit="child.limit" width="100%"
|
||||
v-model="listQuery[child.prop]" />
|
||||
<!--选择checkbox -->
|
||||
<MOSTY.CheckBox v-else-if="child.type == 'checkbox'" width="100%" clearable v-model="listQuery[child.prop]"
|
||||
:checkList="child.options" :placeholder="`请选择${child.label}`" />
|
||||
<!-- 单选radio -->
|
||||
<el-radio-group v-else-if="child.type == 'radio'" v-model="listQuery[child.prop]">
|
||||
<el-radio v-for="obj in child.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 开关 switch -->
|
||||
<el-switch v-else-if="child.type == 'switch'" v-model="listQuery[child.prop]" class="ml-2"
|
||||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
|
||||
</el-form-item>
|
||||
<!-- 插槽 slot -->
|
||||
<template v-if="child.type === 'slot'">
|
||||
<slot></slot>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</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: "100px",
|
||||
type: String
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
});
|
||||
const elform = ref();
|
||||
const listQuery = ref({});
|
||||
const emits = defineEmits(["update:modelValue", 'change']);
|
||||
|
||||
// 提交
|
||||
const submit = (resfun) => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
resfun(listQuery.value);
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
listQuery.value = {};
|
||||
elform.value.resetFields();
|
||||
};
|
||||
|
||||
// // 处理表单数据变化
|
||||
const handleNum = (val) => {
|
||||
emits('change', listQuery.value);
|
||||
};
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
listQuery.value = newVal; //赋值
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
watch(() => listQuery.value, (newVal) => {
|
||||
emits('update:modelValue', newVal)
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
defineExpose({ submit, reset });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-form-item__label) {
|
||||
// background-color: #F7FAFB;
|
||||
// padding: 0px 8px;
|
||||
// color: #000;
|
||||
// font-weight: 500;
|
||||
// border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
color: #333;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-form-item--default {
|
||||
// margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user