<template>
|
<div class="form-config-container">
|
<el-form label-position="top">
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="Model路径" required>
|
<el-input v-model="dataOptions.folder"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="tableView" required>
|
<el-input v-model="dataOptions.tableView"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="12">
|
<el-form-item label="tableName">
|
<el-input v-model="dataOptions.tableName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="编辑开启tab分组">
|
<el-switch v-model="dataOptions.openTabGroup" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="固定条件">
|
<el-input v-model="currentFixedWhere" :rows="3" type="textarea"></el-input>
|
</el-form-item>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="idField" required>
|
<el-input v-model="dataOptions.idField"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="自动编码字段">
|
<el-input v-model="dataOptions.codeRegular"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="连接字段" required>
|
<el-input v-model="dataOptions.linkColumn"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="menu_Id" required>
|
<el-input v-model.number="dataOptions.menu_Id"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="24">
|
<el-form-item label="路由" required>
|
<el-input v-model="dataOptions.router"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="6">
|
<el-form-item label="分页大小">
|
<el-input v-model.number="dataOptions.pageSize"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="18">
|
<el-form-item label="列表排序方式">
|
<el-input v-model="orderBy"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="列表显示操作列">
|
<el-switch v-model="dataOptions.showActionField" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="列表显示求和行">
|
<el-switch v-model="dataOptions.showSumField" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="行内表单">
|
<el-switch v-model="dataOptions.formInline" :active-value="false" :inactive-value="true" active-text="单独行" inactive-text="行内">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="查询独立行">
|
<el-switch v-model="dataOptions.searchOnlyLine" :active-value="true" :inactive-value="false">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="标签对齐方式">
|
<el-radio-group v-model="editorConfig.labelPosition">
|
<el-radio-button label="left">左对齐</el-radio-button>
|
<el-radio-button label="right">右对齐</el-radio-button>
|
<el-radio-button label="top">顶部对齐</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="表单字段宽度">
|
<el-input-number v-model="labelWidth" :min="0" :max="200" :step="10" controls-position="right" style="width:110px;"></el-input-number> px
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="表单宽度">
|
<el-input-number v-model="formWidth" :min="0" :max="1000" :step="10" controls-position="right" style="width:110px;"></el-input-number> px
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="对话框宽度">
|
<el-input v-model="editorConfig.width"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="对话框顶部距离">
|
<el-input v-model="editorConfig.top"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="对话框标题">
|
<el-input v-model="editorConfig.title"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="提交按钮名称">
|
<el-input v-model="editorConfig.saveButtonText"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
editorConfig: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
dataOptions: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
computed: {
|
labelWidth: {
|
get: function() {
|
return parseInt(this.editorConfig.labelWidth);
|
},
|
set: function(val) {
|
this.editorConfig.labelWidth = val + "px";
|
}
|
},
|
formWidth: {
|
get: function() {
|
return parseInt(this.editorConfig.formWidth);
|
},
|
set: function(val) {
|
if (val) {
|
this.editorConfig.formWidth = val + "px";
|
} else {
|
this.editorConfig.formWidth = null;
|
}
|
}
|
},
|
// 排序方式
|
orderBy: {
|
get: function() {
|
return JSON.stringify(this.dataOptions.orderBy || this.dataOptions.sortName);
|
},
|
set: function(val) {
|
try {
|
if (!val) {
|
this.$set(this.dataOptions, "orderBy", null);
|
return;
|
}
|
const orderBy = JSON.parse(val);
|
this.$set(this.dataOptions, "orderBy", orderBy);
|
this.$message.success("列表排序方式格式正确");
|
} catch (error) {
|
this.$message.error("列表排序方式不是有效的JSON格式");
|
}
|
}
|
},
|
// fixedWhere JSON加载属性
|
currentFixedWhere: {
|
get: function() {
|
debugger;
|
var params = this.dataOptions.fixedWhere;
|
if (params) {
|
return JSON.stringify(params, 0, 2);
|
} else {
|
return "";
|
}
|
},
|
set: function(val) {
|
try {
|
this.dataOptions.fixedWhere = JSON.parse(val);
|
this.$message.success("json格式正确");
|
} catch (error) {
|
this.$message.error("数据结构不正确，不是有效的json格式，" + error.message);
|
}
|
}
|
}
|
}
|
};
|
</script>
|
