低代码平台

This commit is contained in:
aixianling
2022-06-20 18:31:30 +08:00
parent 5f208c4510
commit d3aa3eef94
5 changed files with 1620 additions and 0 deletions

View File

@@ -0,0 +1,36 @@
<template>
<section class="AppAiCode">
<component :is="currentPage" v-bind="$props"/>
</section>
</template>
<script>
import AcList from "./acList";
import AcAdd from "./acAdd";
export default {
name: "AppAiCode",
components: {AcAdd, AcList},
label: "低代码生成平台",
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
currentPage() {
let {hash} = this.$route
return hash == "#add" ? AcAdd : AcList
}
},
created() {
this.dict.load("detailType")
}
}
</script>
<style lang="scss" scoped>
.AppAiCode {
height: 100%;
}
</style>

View File

@@ -0,0 +1,149 @@
<template>
<section class="acAdd">
<ai-detail list>
<ai-title slot="title" :title="pageTitle"/>
<template #content>
<el-form ref="AcForm" :model="form" size="small" label-width="120px" :rules="rules">
<el-tabs tab-position="left">
<el-tab-pane label="基本信息" lazy>
<ai-card title="基本信息">
<template #content>
<el-row type="flex">
<div class="fill">
<el-form-item label="应用名称" prop="name">
<el-input v-model="form.name" clearable placeholder="请输入"/>
</el-form-item>
<el-form-item label="应用模块" prop="appName">
<el-input v-model="form.appName" clearable placeholder="请输入"/>
</el-form-item>
</div>
<div class="fill">
<el-form-item label="核心码" prop="rightCode">
<el-input v-model="form.rightCode" clearable placeholder="请输入"/>
</el-form-item>
<el-form-item label="详情方式" prop="detailType">
<el-radio-group v-model="form.detailType">
<el-radio v-for="op in dict.getDict('detailType')" :key="op.dictValue" :label="op.dictValue">{{ op.dictName }}</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-row>
<el-form-item label="按钮配置" prop="btns">
<el-checkbox-group v-model="form.btns">
<el-checkbox label="insertEnable">添加</el-checkbox>
<el-checkbox label="importEnable">导入</el-checkbox>
<el-checkbox label="exportEnalbe">导出</el-checkbox>
<el-checkbox label="editEnable">编辑</el-checkbox>
<el-checkbox label="deleteEnable">删除</el-checkbox>
<el-checkbox label="batchDelEnable">批量删除</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
</ai-card>
<ai-card title="字段设置">
<template #right>
<el-button type="text" @click="form.props.push({})">添加</el-button>
</template>
<template #content>
<ai-table :tableData="form.props" :isShowPagination="false" :colConfigs="colConfigs">
<el-table-column v-for="col in colConfigs" :key="col.slot" v-bind="col">
<template slot-scope="{row}">
<el-checkbox v-if="col.type=='checkBox'" v-model="row[col.slot]"/>
<span v-else-if="col.type=='chbShow'" v-text="row[col.slot]==1?'√':''"/>
<el-input v-else size="small" v-model="row[col.slot]" placeholder="请输入" clearable/>
</template>
</el-table-column>
<el-table-column label="操作" slot="options" align="center">
<template slot-scope="{row,$index}">
<el-button type="text" @click="form.props.splice($index,1)">删除</el-button>
</template>
</el-table-column>
</ai-table>
</template>
</ai-card>
</el-tab-pane>
<el-tab-pane label="详情设计" lazy>
<detail-layout v-bind="$props" :form="form" v-model="form.props"/>
</el-tab-pane>
</el-tabs>
</el-form>
</template>
<template #footer>
<el-button @click="back">取消</el-button>
<el-button type="primary" @click="submit">提交</el-button>
</template>
</ai-detail>
</section>
</template>
<script>
import DetailLayout from "./detailLayout";
export default {
name: "acAdd",
components: {DetailLayout},
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
isEdit: v => !!v.$route.query.id,
pageTitle: v => v.isEdit ? "编辑应用" : "新增应用"
},
data() {
return {
form: {detailType: "0", props: [], btns: []},
rules: {
name: {required: true, message: "请输入应用名称"},
appName: {required: true, message: "请输入应用模块"},
btns: {required: true, message: '请输入按钮配置', trigger: 'change'}
},
colConfigs: [
{slot: 'prop', label: "字段"},
{slot: 'label', label: "名称"},
{slot: 'isSearch', label: "搜索字段", align: 'center', type: 'checkBox'},
{slot: 'isTable', label: "表格字段", align: 'center', type: 'checkBox'},
{slot: 'isDetail', label: "详情字段", align: 'center', type: 'chbShow'},
]
}
},
methods: {
getDetail() {
let {id} = this.$route.query
id && this.instance.post("/node/aicode/detail", null, {
params: {id}
}).then(res => {
if (res?.data) {
this.form = res.data
this.form.props.map(e => ({...e, isDetail: !!e.groupName}))
}
})
},
back() {
this.$router.push({})
},
submit() {
this.$refs.AcForm.validate(v => {
if (v) {
this.instance.post("/node/aicode/addOrUpdate", this.form).then(res => {
if (res?.code == 0) {
this.$message.success("提交成功!")
this.back()
}
})
}
})
},
},
created() {
this.getDetail()
}
}
</script>
<style lang="scss" scoped>
.acAdd {
height: 100%;
}
</style>

View File

@@ -0,0 +1,87 @@
<template>
<section class="acList">
<ai-list>
<ai-title slot="title" title="低代码生成平台" isShowBottomBorder/>
<template #content>
<ai-search-bar>
<template #left>
<el-button type="primary" icon="iconfont iconAdd" @click="handleAdd()">添加</el-button>
</template>
<template #right>
<el-input size="small" placeholder="搜索应用" v-model="search.name" clearable
@change="page.current=1,getTableData()"/>
</template>
</ai-search-bar>
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
<el-table-column slot="options" label="操作" fixed="right" align="center" width="300">
<template slot-scope="{row}">
<el-button type="text" @click="handleAdd(row.id)">编辑</el-button>
<el-button type="text" @click="handleDelete(row.id)">删除</el-button>
<el-button type="text" v-if="row.download&&row.target" @click="handleDownload(row)">下载</el-button>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</section>
</template>
<script>
export default {
name: "acList",
props: {
instance: Function,
dict: Object,
permissions: Function
},
data() {
return {
search: {name: ""},
page: {current: 1, size: 10, total: 0},
tableData: [],
colConfigs: [
{label: "应用名称", prop: "name", width: 200},
{label: "应用模块", prop: "appName"},
{label: "权限码", prop: "target"},
{label: "详情展示方式", prop: "detailType", dict: "detailType"},
],
}
},
methods: {
getTableData() {
this.instance.post("/node/aicode/list", null, {
params: {...this.page, ...this.search}
}).then(res => {
if (res?.data) {
this.tableData = res.data.records
this.page.total = res.data.total
}
})
},
handleAdd(id) {
this.$router.push({hash: "#add", query: {id}})
},
handleDelete(ids) {
this.$confirm("是否要删除该应用?").then(() => {
this.instance.post("/node/aicode/delete", null, {
params: {ids}
}).then(res => {
if (res?.code == 0) {
this.$message.success("删除成功")
this.getTableData()
}
})
}).catch(() => 0)
}
},
created() {
this.getTableData()
}
}
</script>
<style lang="scss" scoped>
.acList {
}
</style>

View File

@@ -0,0 +1,274 @@
{
"config": [
{
"type": "info",
"tips": "(不能重复添加同一元素)",
"label": "信息",
"children": [
{
"type": "name",
"fieldName": "姓名",
"fieldTips": "请输入姓名",
"fixedLabel": "姓名",
"disable": "0",
"grid": 0.5,
"defaultValue": "",
"icon": "icontext_box",
"mustFill": "1",
"maxLength": 20
},
{
"type": "idNumber",
"fieldName": "身份证号",
"fixedLabel": "身份证号",
"fieldTips": "请输入身份证号",
"defaultValue": "",
"icon": "icontext_area",
"mustFill": "1",
"maxLength": 20,
"disable": "0",
"grid": 0.5
},
{
"type": "phone",
"fieldName": "联系方式",
"fixedLabel": "联系方式",
"fieldTips": "请输入联系方式",
"defaultValue": "",
"icon": "icontext_area",
"mustFill": "1",
"maxLength": 20,
"disable": "0",
"grid": 0.5
},
{
"type": "area",
"fieldName": "地区",
"fixedLabel": "地区",
"fieldTips": "请选择地区",
"defaultValue": "",
"icon": "icontext_area",
"mustFill": "1",
"areaPattern": "",
"disable": "0",
"grid": 0.5
}
]
},
{
"type": "options",
"tips": "(可重复添加)",
"label": "选项",
"children": [
{
"type": "radio",
"fieldName": "单选",
"fixedLabel": "单选",
"fieldTips": "请选择",
"grid": 0.5,
"icon": "iconradio",
"mustFill": "1",
"disable": "0",
"defaultValue": "",
"options": [
{
"label": "选项1",
"value": ""
},
{
"label": "选项2",
"value": ""
}
],
"title": ""
},
{
"type": "checkbox",
"fieldName": "多选",
"fixedLabel": "多选",
"fieldTips": "请选择",
"icon": "iconcheck_box",
"mustFill": "1",
"grid": 0.5,
"disable": "0",
"defaultValue": [],
"options": [
{
"label": "选项1",
"value": ""
},
{
"label": "选项2",
"value": ""
}
],
"title": ""
},
{
"type": "select",
"fieldName": "单下拉框",
"fixedLabel": "单下拉框",
"grid": 0.5,
"fieldTips": "请选择",
"icon": "iconSelect",
"mustFill": "1",
"defaultValue": "",
"disable": "0",
"options": [
{
"label": "选项1",
"value": ""
},
{
"label": "选项2",
"value": ""
}
],
"title": ""
},
{
"type": "onOff",
"fieldName": "开关",
"fixedLabel": "开关",
"grid": 0.5,
"fieldTips": "请选择开关",
"icon": "iconSelect",
"mustFill": "1",
"defaultValue": "0",
"disable": "0",
"title": ""
},
{
"type": "date",
"fieldName": "日期",
"fixedLabel": "日期",
"grid": 0.5,
"datetimePattern": "yyyy-MM-dd",
"fieldTips": "请选择日期",
"icon": "iconSelect",
"mustFill": "1",
"disable": "0",
"title": ""
},
{
"type": "time",
"fieldName": "时间",
"fixedLabel": "时间",
"grid": 0.5,
"datetimePattern": "HH:mm:ss",
"fieldTips": "请选择时间",
"icon": "iconSelect",
"mustFill": "1",
"disable": "0",
"title": ""
},
{
"type": "datetime",
"fieldName": "日期时间",
"fixedLabel": "日期时间",
"grid": 0.5,
"datetimePattern": "yyyy-MM-dd HH:mm:ss",
"fieldTips": "请选择日期时间",
"icon": "iconSelect",
"mustFill": "1",
"disable": "0",
"title": ""
}
]
},
{
"type": "input",
"tips": "(可重复添加)",
"label": "填空",
"children": [
{
"type": "input",
"fieldName": "单行填空",
"fieldTips": "请输入",
"fixedLabel": "单行填空",
"disable": "0",
"grid": 0.5,
"defaultValue": "",
"icon": "icontext_box",
"mustFill": "1",
"maxLength": 50
},
{
"type": "textarea",
"fieldName": "多行填空",
"fixedLabel": "多行填空",
"fieldTips": "请输入",
"lineNumber": 4,
"defaultValue": "",
"icon": "icontext_area",
"mustFill": "1",
"maxLength": 500,
"disable": "0",
"grid": 1
},
{
"type": "number",
"fieldName": "数字输入",
"fixedLabel": "数字输入",
"fieldTips": "请输入数字",
"defaultValue": "",
"icon": "icontext_area",
"mustFill": "1",
"maxValue": 10000,
"decimalPlaces": 0,
"minValue": 0,
"maxLength": 500,
"disable": "0",
"grid": 0.5
},
{
"type": "rtf",
"fieldName": "富文本",
"fixedLabel": "富文本",
"fieldTips": "请输入",
"defaultValue": "",
"icon": "icontext_area",
"mustFill": "1",
"maxLength": 5000,
"disable": "0",
"grid": 1
}
]
},
{
"type": "annex",
"tips": "(可重复添加)",
"label": "附件",
"children": [
{
"type": "upload",
"fieldTips": "请上传",
"fieldName": "上传附件",
"fixedLabel": "上传附件",
"disable": "0",
"fileChoseSize": 10,
"fileMaxCount": 9,
"defaultValue": "",
"icon": "iconpic",
"mustFill": "1",
"grid": 1
}
]
},
{
"type": "layout",
"tips": "(可重复添加)",
"label": "分组",
"children": [
{
"type": "group",
"fieldName": "卡片",
"fixedLabel": "卡片",
"icon": "iconpic",
"groupName": "分组标题",
"column": []
}
]
}
]
}

File diff suppressed because it is too large Load Diff