|
|
@@ -0,0 +1,103 @@
|
|
|
+<template>
|
|
|
+ <el-form :model="form" ref="form" label-width="100px" size="small">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col
|
|
|
+ v-for="(item, index) in formLayout"
|
|
|
+ :key="index"
|
|
|
+ :span="item.span"
|
|
|
+ >
|
|
|
+ <el-form-item :label="item.title" :rules="[{ required: item.required, message: `${item.title}不正确`,pattern:regex(item.regex),trigger:'change'}]" :prop="item.columnname">
|
|
|
+ <el-input
|
|
|
+ v-if="item.type === 'Input'"
|
|
|
+ v-model="form[item.columnname]"
|
|
|
+ :placeholder="`请输入${item.title}`"
|
|
|
+ @change="onChange"
|
|
|
+ ></el-input>
|
|
|
+ <el-select
|
|
|
+ v-else-if="item.type === 'Select' && item.isselect"
|
|
|
+ style="width: 100%;"
|
|
|
+ v-model="form[item.columnname]"
|
|
|
+ :placeholder="`请选择${item.title}`"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="option in item.options"
|
|
|
+ :key="option.value"
|
|
|
+ :label="option.label"
|
|
|
+ :value="option.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%;"
|
|
|
+ v-else-if="item.type === 'DatePicker'"
|
|
|
+ v-model="form[item.columnname]"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "customForm",
|
|
|
+ props: ["formname"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ formLayout: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取表单数据
|
|
|
+ getFormLayoutData() {
|
|
|
+ const app = JSON.parse(sessionStorage.getItem("activeApp"));
|
|
|
+ app.meta.forms[this.formname].formcols.forEach(async e=>{
|
|
|
+ if (e.request.id) {
|
|
|
+ e.isselect = false
|
|
|
+ const res = await this.$api.requested(e.request)
|
|
|
+
|
|
|
+ e.options = res.data.map(rs=>{
|
|
|
+ return {
|
|
|
+ label:rs.remarks,
|
|
|
+ value:rs.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ e.isselect = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.formLayout = app.meta.forms[this.formname].formcols
|
|
|
+ },
|
|
|
+ onChange () {
|
|
|
+ console.log(this.form)
|
|
|
+ },
|
|
|
+ restForm () {
|
|
|
+ this.$refs['form'].resetFields();
|
|
|
+ },
|
|
|
+ validateFields (fn) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ fn()
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ regex (str) {
|
|
|
+ let st = atob(str)
|
|
|
+ return eval(st)
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getFormLayoutData();
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|
