|
|
<template>
|
|
|
<!-- 页面根容器 -->
|
|
|
<div>
|
|
|
<!-- 表单组件 -->
|
|
|
<el-form
|
|
|
class="detail-form-content"
|
|
|
ref="ruleForm"
|
|
|
:model="ruleForm"
|
|
|
:rules="rules"
|
|
|
label-width="80px"
|
|
|
>
|
|
|
|
|
|
<!-- 遍历字段列表生成表单项 -->
|
|
|
#foreach($column in $columns)
|
|
|
|
|
|
<!-- 如果字段类型是“日”（日期） -->
|
|
|
#if($column.type == "日")
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<el-date-picker
|
|
|
format="yyyy 年 MM 月 dd 日"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
v-model="ruleForm.${column.columnName}"
|
|
|
type="date"
|
|
|
placeholder="${column.comments}">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 如果字段类型是“下”（下拉选择） -->
|
|
|
#elseif( $column.type == "下" )
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<el-select v-model="ruleForm.${column.columnName}" placeholder="请选择${column.comments}">
|
|
|
<el-option
|
|
|
v-for="(item,index) in ${column.columnName}Options"
|
|
|
v-bind:key="index"
|
|
|
:label="item"
|
|
|
:value="item">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 如果字段类型是“图”（图片上传） -->
|
|
|
#elseif($column.type=="图")
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<file-upload
|
|
|
tip="点击上传${column.comments}"
|
|
|
action="file/upload"
|
|
|
:limit="3"
|
|
|
:multiple="true"
|
|
|
:fileUrls="ruleForm.${column.columnName}?ruleForm.${column.columnName}:''"
|
|
|
@change="${column.columnName}UploadChange"
|
|
|
></file-upload>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 如果字段类型是“视”（视频或文件上传） -->
|
|
|
#elseif($column.type=="视")
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<file-upload
|
|
|
tip="点击上传${column.comments}"
|
|
|
action="file/upload"
|
|
|
:limit="1"
|
|
|
:multiple="true"
|
|
|
:fileUrls="ruleForm.${column.columnName}?ruleForm.${column.columnName}:''"
|
|
|
@change="${column.columnName}UploadChange"
|
|
|
></file-upload>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 如果字段类型是“多”（富文本编辑器） -->
|
|
|
#elseif($column.type=="多")
|
|
|
|
|
|
<!-- 如果字段名为 sfsh（审核状态） -->
|
|
|
#elseif($column.columnName=="sfsh")
|
|
|
|
|
|
<!-- 如果字段为两步联动字段 -->
|
|
|
#elseif($column.towStep=="是")
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<el-select v-model="ruleForm.${column.columnName}" placeholder="请选择${column.comments}">
|
|
|
<el-option key="是" label="是" value="是"></el-option>
|
|
|
<el-option key="否" label="否" value="否"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 如果字段为一级联动字段 -->
|
|
|
#elseif($column.type=="联" && $column.level==1)
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<el-select @change="oneChange" v-model="ruleForm.${column.columnName}" placeholder="请选择${column.comments}">
|
|
|
<el-option v-bind:key="index" v-for="(item,index) in oneOptions" :label="item" :value="item"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 如果字段为二级联动字段 -->
|
|
|
#elseif($column.type=="联" && $column.level==2)
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<el-select @change="towChange" v-model="ruleForm.${column.columnName}" placeholder="请选择${column.comments}">
|
|
|
<el-option v-bind:key="index" v-for="(item,index) in towOptions" :label="item" :value="item"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 如果字段为三级联动字段 -->
|
|
|
#elseif($column.type=="联" && $column.level==3)
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<el-select v-model="ruleForm.${column.columnName}" placeholder="请选择${column.comments}">
|
|
|
<el-option v-bind:key="index" v-for="(item,index) in threeOptions" :label="item" :value="item"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 特殊处理：倒计时结束时间字段 -->
|
|
|
#elseif($column.columnName=='reversetime')
|
|
|
<el-form-item label="倒计结束" prop="reversetime">
|
|
|
<el-date-picker
|
|
|
format="yyyy 年 MM 月 dd 日"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
v-model="ruleForm.reversetime"
|
|
|
type="date"
|
|
|
placeholder="倒计结束">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 默认情况：普通输入框 -->
|
|
|
#else
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<el-input v-model="ruleForm.${column.columnName}"
|
|
|
placeholder="${column.comments}" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
#end
|
|
|
#end
|
|
|
|
|
|
<!-- 富文本字段单独遍历处理 -->
|
|
|
#foreach($column in $columns)
|
|
|
#if($column.columnName != $pk.columnName)
|
|
|
#if($column.type=="多")
|
|
|
<el-form-item label="${column.comments}" prop="${column.columnName}">
|
|
|
<editor
|
|
|
v-model="ruleForm.${column.columnName}"
|
|
|
class="editor"
|
|
|
action="file/upload">
|
|
|
</editor>
|
|
|
</el-form-item>
|
|
|
#end
|
|
|
#end
|
|
|
#end
|
|
|
|
|
|
<!-- 提交与取消按钮 -->
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="onSubmit">提交</el-button>
|
|
|
<el-button @click="back()">取消</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// 导入数字和整数验证函数
|
|
|
import { isNumber, isIntNumer } from "@/utils/validate";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
// 数字格式校验函数
|
|
|
var validateNumber = (rule, value, callback) => {
|
|
|
if (!value) {
|
|
|
callback();
|
|
|
} else if (!isNumber(value)) {
|
|
|
callback(new Error("请输入数字"));
|
|
|
} else {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 整数格式校验函数
|
|
|
var validateIntNumber = (rule, value, callback) => {
|
|
|
if (!value) {
|
|
|
callback();
|
|
|
} else if (!isIntNumer(value)) {
|
|
|
callback(new Error("请输入整数"));
|
|
|
} else {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
// 表单数据对象
|
|
|
ruleForm: {},
|
|
|
|
|
|
// 初始化下拉选项和联动数据结构
|
|
|
#foreach($column in $columns)
|
|
|
#if($column.type=="联" && $column.level==1)
|
|
|
oneOptions:[], // 一级联动选项
|
|
|
#elseif($column.type=="联" && $column.level==2)
|
|
|
towOptions:[], // 二级联动选项
|
|
|
#elseif($column.type=="联" && $column.level==3)
|
|
|
threeOptions:[], // 三级联动选项
|
|
|
#elseif( $column.type == "下" )
|
|
|
${column.columnName}Options: [], // 下拉选项数组
|
|
|
#end
|
|
|
#end
|
|
|
|
|
|
// 表单验证规则集合
|
|
|
rules: {
|
|
|
#foreach($column in $columns)
|
|
|
${column.columnName}: [
|
|
|
#if($column.isNullable == "否")
|
|
|
{ required: true, message: '${column.comments}不能为空', trigger: 'blur' },
|
|
|
#end
|
|
|
#if($column.formatValidation=="数")
|
|
|
{ validator: validateIntNumber, trigger: 'blur' },
|
|
|
#end
|
|
|
#if($column.formatValidation=="浮")
|
|
|
{ validator: validateNumber, trigger: 'blur' },
|
|
|
#end
|
|
|
],
|
|
|
#end
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
|
|
|
// 接收父组件传递的 props
|
|
|
props: ["parent"],
|
|
|
|
|
|
methods: {
|
|
|
// 初始化方法，根据 ID 获取详情信息
|
|
|
init(id) {
|
|
|
if (id) {
|
|
|
this.info(id);
|
|
|
}
|
|
|
|
|
|
// 如果不是默认用户表，则请求下拉或联动数据
|
|
|
#if($tableName!='defaultuser')
|
|
|
#foreach($column in $columns)
|
|
|
#if($column.type=="联" && $column.level==1)
|
|
|
#[[this.$http({]]#
|
|
|
url: `option/${tableName}/${column.columnName}?level=1`,
|
|
|
method: "get"
|
|
|
}).then(({ data }) => {
|
|
|
if (data && data.code === 0) {
|
|
|
this.oneOptions = data.data;
|
|
|
this.towOptions = [];
|
|
|
this.threeOptions = [];
|
|
|
} else {
|
|
|
#[[this.$message.error(data.msg);]]#
|
|
|
}
|
|
|
});
|
|
|
#elseif( $column.type == "下" )
|
|
|
#[[this.$http({]]#
|
|
|
url: `option/${column.refTable}/${column.refColumn}`,
|
|
|
method: "get"
|
|
|
}).then(({ data }) => {
|
|
|
if (data && data.code === 0) {
|
|
|
this. ${column.columnName}Options = data.data;
|
|
|
} else {
|
|
|
#[[this.$message.error(data.msg);]]#
|
|
|
}
|
|
|
});
|
|
|
#end
|
|
|
#end
|
|
|
#end
|
|
|
},
|
|
|
|
|
|
// 联动字段相关逻辑
|
|
|
#foreach($column in $columns)
|
|
|
#if($column.type=="联" && $column.level==1)
|
|
|
#set($oneColumn = $column.columnName)
|
|
|
#end
|
|
|
#if($column.type=="联" && $column.level==2)
|
|
|
#set($twoColumn = $column.columnName)
|
|
|
// 一级联动变化时触发
|
|
|
oneChange(){
|
|
|
#[[this.$http({]]#
|
|
|
url: `option/${tableName}/${column.columnName}?level=2&parent=` + this.ruleForm.${oneColumn},
|
|
|
method: "get"
|
|
|
}).then(({ data }) => {
|
|
|
if (data && data.code === 0) {
|
|
|
this.twoOptions = data.data;
|
|
|
this.threeOptions = [];
|
|
|
} else {
|
|
|
#[[this.$message.error(data.msg);]]#
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
#end
|
|
|
#if($column.type=="联" && $column.level==3)
|
|
|
// 二级联动变化时触发
|
|
|
twoChange(){
|
|
|
#[[this.$http({]]#
|
|
|
url: `option/${tableName}/${column.columnName}?level=3&parent=` + this.ruleForm.${twoColumn},
|
|
|
method: "get"
|
|
|
}).then(({ data }) => {
|
|
|
if (data && data.code === 0) {
|
|
|
this.twoOptions = data.data;
|
|
|
this.threeOptions = [];
|
|
|
} else {
|
|
|
#[[this.$message.error(data.msg);]]#
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
#end
|
|
|
#end
|
|
|
|
|
|
// 获取详情数据
|
|
|
info(id) {
|
|
|
#[[this.$http({]]#
|
|
|
url: `${tableName}/info/#[[${id}]]#`,
|
|
|
method: "get"
|
|
|
}).then(({ data }) => {
|
|
|
if (data && data.code === 0) {
|
|
|
this.ruleForm = data.data;
|
|
|
} else {
|
|
|
#[[this.$message.error(data.msg);]]#
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 表单提交方法
|
|
|
onSubmit() {
|
|
|
#[[this.$refs["ruleForm"].validate(valid => {]]#
|
|
|
if (valid) {
|
|
|
#[[this.$http({]]#
|
|
|
url: `${tableName}/#[[${!this.ruleForm.id]]# ? "save" : "update"}`,
|
|
|
method: "post",
|
|
|
data: this.ruleForm
|
|
|
}).then(({ data }) => {
|
|
|
if (data && data.code === 0) {
|
|
|
#[[this.$message({]]#
|
|
|
message: "操作成功",
|
|
|
type: "success",
|
|
|
duration: 1500,
|
|
|
onClose: () => {
|
|
|
this.parent.showFlag = false;
|
|
|
this.parent.search();
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
#[[this.$message.error(data.msg);]]#
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 返回上一页
|
|
|
back() {
|
|
|
this.parent.showFlag = false;
|
|
|
},
|
|
|
|
|
|
// 图片或视频上传回调
|
|
|
#foreach($column in $columns)
|
|
|
#if($column.type=="图" || $column.type=="视")
|
|
|
${column.columnName}UploadChange(fileUrls) {
|
|
|
this.ruleForm.${column.columnName} = fileUrls;
|
|
|
},
|
|
|
#end
|
|
|
#end
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.editor{
|
|
|
height: 500px; /* 设置富文本编辑器高度 */
|
|
|
}
|
|
|
</style>
|
