对接接口和更新新增表单组件
This commit is contained in:
@ -1,127 +1,82 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:label-width="140"
|
||||
:rules="props.rules"
|
||||
:inline="true"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item v-for="item in props.formData" :style="{ width: item.width }" :prop="item.prop" :label="item.text" :label-width="item.labelWidth" :key="item">
|
||||
<!-- input表单 -->
|
||||
<MOSTY.Other v-if="item.type == 'input'" width="100%" clearable v-model="listQuery[item.prop]" :placeholder="`请输入${item.text}`"/>
|
||||
<el-input v-model="listQuery[item.prop]" v-else-if="item.type == 'textarea'" :placeholder="`请输入${item.text}`" />
|
||||
<!-- Select选择 -->
|
||||
<MOSTY.Select
|
||||
v-else-if="item.type == 'select'"
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery[item.prop]"
|
||||
:dictEnum="item.optionList"
|
||||
:placeholder="`请选择${item.text}`"
|
||||
/>
|
||||
<el-form ref="elform" :model="listQuery" :label-width="140" :rules="props.rules" :inline="true" label-position="right">
|
||||
<el-form-item v-for="item in props.formData" :style="{ width: item.width }" :prop="item.prop" :label="item.label" :label-width="item.labelWidth" :key="item">
|
||||
<!-- 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'" :placeholder="`请输入${item.label}`" />
|
||||
<!-- Select选择 -->
|
||||
<MOSTY.Select
|
||||
v-else-if="item.type == 'select'"
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery[item.prop]"
|
||||
:dictEnum="item.options"
|
||||
:placeholder="`请选择${item.label}`"/>
|
||||
<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}`"/>
|
||||
|
||||
<template v-else-if="item.showType === 'department'">
|
||||
<MOSTY.Department clearable v-model="listQuery[item.prop]" />
|
||||
</template>
|
||||
<!-- 单选 -->
|
||||
<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>
|
||||
|
||||
<!-- 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.optionList"
|
||||
:placeholder="`请选择${item.text}`"
|
||||
/>
|
||||
<el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
|
||||
<el-radio
|
||||
v-for="obj in item.optionList"
|
||||
:key="obj.value"
|
||||
:label="obj.value"
|
||||
>{{ obj.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-else-if="item.type == 'date'"
|
||||
v-model="listQuery[item.prop]"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="请选择时间"
|
||||
/>
|
||||
<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="请选择时间"
|
||||
/>
|
||||
<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="选择结束时间"
|
||||
/>
|
||||
<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="选择开始日期"
|
||||
/>
|
||||
<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>
|
||||
<!-- 时间选择 -->
|
||||
<el-time-picker v-else-if="item.type == 'time'" v-model="listQuery[item.prop]" placeholder="选择时间"/>
|
||||
<el-date-picker v-else-if="item.type == 'date'" v-model="listQuery[item.prop]" type="date" value-format="YYYY-MM-DD" :placeholder="请选择时间"/>
|
||||
<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="请选择时间"/>
|
||||
<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="选择结束时间"/>
|
||||
<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="选择开始日期" />
|
||||
|
||||
<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 { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, defineProps, defineEmits, defineExpose } from "vue";
|
||||
const props = defineProps({
|
||||
//循环的值
|
||||
formData: {
|
||||
default: [],
|
||||
type: Array
|
||||
},
|
||||
propName: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
rules: {
|
||||
default: {},
|
||||
type: Object
|
||||
}
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
|
||||
const props = defineProps({
|
||||
//循环的值
|
||||
formData: {
|
||||
default: [],
|
||||
type: Array
|
||||
},
|
||||
propName: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
rules: {
|
||||
default: {},
|
||||
type: Object
|
||||
},
|
||||
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);
|
||||
});
|
||||
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);
|
||||
});
|
||||
};
|
||||
defineExpose({ submit });
|
||||
</script>
|
||||
};
|
||||
|
||||
watch(() => listQuery.value,(newVal) => {
|
||||
emits('update:modelValue', newVal)
|
||||
},{ immediate: true, deep: true }
|
||||
);
|
||||
defineExpose({ submit });
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user