herenshan112
4 weeks ago
13 changed files with 2340 additions and 52 deletions
File diff suppressed because it is too large
@ -0,0 +1,257 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-02-24 13:22:18 |
||||
|
@ 备注: 控件库 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import controlListData from "@/components/DesignForm/assembly"; |
||||
|
import { jsonParseStringify } from "@/utils/DesignForm"; |
||||
|
import Draggable from "vuedraggable-es"; |
||||
|
import "@/assets/iconfont/iconfont.css"; |
||||
|
|
||||
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
||||
|
import FormVersion from "@/components/DesignForm/formVersion.vue"; |
||||
|
const props = defineProps({ |
||||
|
tableKey: { |
||||
|
type: String, |
||||
|
default: "" |
||||
|
}, |
||||
|
signCode: { |
||||
|
type: String, |
||||
|
default: "" |
||||
|
} |
||||
|
}) |
||||
|
// const props = withDefaults( |
||||
|
// defineProps<{ |
||||
|
// tableKey?: number | string; |
||||
|
// signCode?: number | string; |
||||
|
// }>(), |
||||
|
// {} |
||||
|
// ); |
||||
|
const emits = defineEmits<{ |
||||
|
(e: "versionUpdateForm", value: string): void; |
||||
|
(e: "versionPreviewPage", value: string): void; |
||||
|
}>(); |
||||
|
|
||||
|
const designType = inject("formDesignType") as string; //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。 |
||||
|
const versionActiveTab = ref(false); |
||||
|
const tableVersion = ref(); //版本显示器 |
||||
|
const isSearch = computed(() => { |
||||
|
return designType === "search"; |
||||
|
}); |
||||
|
// 默认搜索允许显示的字段 |
||||
|
const searchField = [ |
||||
|
"input", |
||||
|
"radio", |
||||
|
"checkbox", |
||||
|
"select", |
||||
|
"datePicker", |
||||
|
"timePicker", |
||||
|
"inputNumber", |
||||
|
"cascader", |
||||
|
"component", |
||||
|
"button", |
||||
|
]; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-09 11:36:59 |
||||
|
@ 功能: 启用和禁用版本 |
||||
|
*/ |
||||
|
const enableOrDisable = (val?: any) => { |
||||
|
// console.log("启用和禁用版本",val) |
||||
|
emits("versionUpdateForm", val); |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-21 09:05:20 |
||||
|
@ 功能: 预览版本 |
||||
|
*/ |
||||
|
const previewPage = (val?: any) => { |
||||
|
emits("versionPreviewPage", val); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-02-24 13:45:38 |
||||
|
@ 功能: 表单组件数据 |
||||
|
*/ |
||||
|
const controlList = computed(() => { |
||||
|
if (designType === "search") { |
||||
|
// 只返回基础字段 |
||||
|
const temp: any = []; |
||||
|
controlListData.forEach((item: any) => { |
||||
|
if (item.children) { |
||||
|
const filter = item.children.filter((ch: any) => { |
||||
|
return searchField.includes(ch.type); |
||||
|
}); |
||||
|
if (filter && filter.length) { |
||||
|
temp.push({ title: item.title, children: filter }); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
return temp; |
||||
|
} else { |
||||
|
return controlListData; |
||||
|
} |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-09 11:40:15 |
||||
|
@ 功能: 打开版本选择页面 |
||||
|
*/ |
||||
|
const useVersionClick = () => { |
||||
|
tableVersion.value.open(); |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-15 10:15:14 |
||||
|
@ 功能: 克隆选中的组件数据结构 |
||||
|
*/ |
||||
|
const clone = (origin: any) => { |
||||
|
// console.log("克隆选中的组件数据结构",origin) |
||||
|
return jsonParseStringify(origin); |
||||
|
}; |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always"> |
||||
|
<template #header> |
||||
|
<div class="cardHeader"> |
||||
|
<div class="card-header">控件库</div> |
||||
|
<div v-if="!isSearch" class="card-headerRight" @click="useVersionClick">版本管理</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<el-scrollbar ref="scrollbarRef" class="scroBox "> |
||||
|
<div v-for="(list, index) in controlList" :key="index" v-memo="[index]" class="unitBox"> |
||||
|
<el-text class="category-title">{{ list.title }}</el-text> |
||||
|
<el-divider style="margin: 5px 0 10px 0;" /> |
||||
|
<div class="unitBody"> |
||||
|
<Draggable |
||||
|
v-model="list.children" |
||||
|
tag="ul" |
||||
|
:group="{ name: 'form', pull: 'clone', put: false }" |
||||
|
ghost-class="ghost" |
||||
|
:sort="false" |
||||
|
:clone="clone" |
||||
|
itemKey="unitListKey" |
||||
|
> |
||||
|
<template #item="{ element }"> |
||||
|
<div class="unitItem"> |
||||
|
<SvgIcon v-if="element.iconFont == ''" icon-class="caogaoxiang" class="control-icon" /> |
||||
|
<i v-if="element.iconFont != ''" :class="`fa ${element.iconFont} `"></i> |
||||
|
<el-text class="control-name">{{element.label}}</el-text> |
||||
|
</div> |
||||
|
</template> |
||||
|
</Draggable> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
<FormVersion |
||||
|
ref="tableVersion" |
||||
|
:table-key="props.tableKey" |
||||
|
:sign-code="props.signCode" |
||||
|
@enable-or-disable="enableOrDisable" |
||||
|
@preview-page="previewPage" |
||||
|
/> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.form-content { |
||||
|
width: 100%; |
||||
|
display: grid; |
||||
|
grid-template-columns: 300px 1fr 300px; |
||||
|
grid-template-rows: auto; |
||||
|
gap: 10px; |
||||
|
padding: 10px 10px 0 10px; |
||||
|
:deep .el-tabs--border-card{ |
||||
|
border: 0; |
||||
|
} |
||||
|
:deep .el-card__header{ |
||||
|
padding: 10px 15px; |
||||
|
background-color: #f5f7fa; |
||||
|
} |
||||
|
:deep .el-card__body{ |
||||
|
padding: 0; |
||||
|
|
||||
|
} |
||||
|
:deep .el-tabs__header{ |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
} |
||||
|
:deep .is-active{ |
||||
|
border-bottom: 1px solid var(--el-color-primary); |
||||
|
} |
||||
|
} |
||||
|
.cardHeader{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.card-header{ |
||||
|
font-size: 1.4rem; |
||||
|
font-weight: 700; |
||||
|
color: #0020C2; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
.category-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
color: #165DFF; |
||||
|
margin-bottom: 10px; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
} |
||||
|
|
||||
|
.scroBox{ |
||||
|
height: calc(100vh - 110px); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
// 布局区域 |
||||
|
|
||||
|
.unitBox{ |
||||
|
padding: 10px 15px; |
||||
|
} |
||||
|
.unitBody ul{ |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
grid-gap: 10px; |
||||
|
} |
||||
|
.unitItem{ |
||||
|
background: #f5f7fa; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
border-radius: 4px; |
||||
|
padding: 10px 5px; /* 减小内边距以适应3列布局 */ |
||||
|
text-align: center; |
||||
|
cursor: grab; |
||||
|
transition: all 0.2s; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
&:hover{ |
||||
|
background: #ecf5ff; |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 2px 12px 0 rgba(22, 93, 255, 0.1); |
||||
|
border-color: #b3d8ff; |
||||
|
color: #165DFF; |
||||
|
} |
||||
|
i{ |
||||
|
font-size: 20px; /* 减小图标大小以适应3列布局 */ |
||||
|
color: #165DFF; |
||||
|
margin: 5px 0; /* 减小间距以适应3列布局 */ |
||||
|
} |
||||
|
} |
||||
|
.control-icon { |
||||
|
font-size: 25px; /* 减小图标大小以适应3列布局 */ |
||||
|
color: #165DFF; |
||||
|
margin-bottom: 3px; /* 减小间距以适应3列布局 */ |
||||
|
} |
||||
|
|
||||
|
.control-name { |
||||
|
font-size: 12px; /* 减小字体大小以适应3列布局 */ |
||||
|
color: #606266; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,241 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-02-24 13:23:08 |
||||
|
@ 备注: 设计区域 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import "@/assets/scss/element-var.scss"; |
||||
|
import "@/assets/scss/index.scss"; |
||||
|
import { FormData, FormList, FormDataStyle } from "@/api/DesignForm/types"; |
||||
|
import { |
||||
|
constGetControlByName, |
||||
|
constSetFormOptions, |
||||
|
constFormBtnEvent, |
||||
|
constControlChange, |
||||
|
constFormProps, |
||||
|
appendOrRemoveStyle, |
||||
|
constAiEffect, |
||||
|
} from "@/api/DesignForm/utils"; |
||||
|
|
||||
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
||||
|
import { useRoute } from "vue-router"; |
||||
|
|
||||
|
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
formData: FormData; |
||||
|
type?: number; // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
||||
|
numrun?: number; //1：获取；非1：不变 |
||||
|
disabled?: boolean; // 禁用表单提交 |
||||
|
requestUrl?: string; // 编辑数据请求url |
||||
|
beforeRequest?: Function; // 请求编辑数据前参数处理方法，可对请求参数处理 |
||||
|
afterResponse?: Function | string; // 请求数据加载完成后数据处理方法，可对返回数据处理 |
||||
|
addUrl?: string; // 表单数据新增提交保存url |
||||
|
editUrl?: string; // 表单数据修改保存提交url |
||||
|
beforeSubmit?: Function | string; // 表单提交前数据处理，可对提交数据处理，新增和保存都会触发 |
||||
|
afterSubmit?: Function; // 表单提交后，默认提示提交结果，可return false阻止提示 |
||||
|
closeAppSubmit?: Function; //关闭拉窗 |
||||
|
changeKeyVal?: Function; //监听表单值该表 |
||||
|
anewSubmit?: Function; //重新提交表单 |
||||
|
saveDraftPage?: Function; //保存草稿 |
||||
|
saveEditFormInfo?: Function; //保存草稿 只改表单不操作流程 |
||||
|
sendDraftSubmit?: Function; //草稿提交审批 |
||||
|
submitEdit?: Function; //提交修改数据申请 |
||||
|
value?: { [key: string]: any }; // 表单初始值，同setValue |
||||
|
options?: { [key: string]: any }; // 表单组件选项，同setOptions |
||||
|
dict?: object; // 固定匹配的字典 |
||||
|
isSearch?: boolean; // 列表里作为筛选使用 |
||||
|
isWorkFlow?: number; // |
||||
|
flowkey?: string; // |
||||
|
groupid?: string; // |
||||
|
signCode?: string; // |
||||
|
versionId?: string; // |
||||
|
mastesformjson?: string; // |
||||
|
isWeb: boolean; // |
||||
|
nodeKey?: string; |
||||
|
purview?: any[]; |
||||
|
}>(), |
||||
|
{ |
||||
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
||||
|
numrun: 2, |
||||
|
formData: () => { |
||||
|
return { |
||||
|
list: [], |
||||
|
form: {}, |
||||
|
config: { |
||||
|
groupKey: '', |
||||
|
style: "", |
||||
|
}, |
||||
|
styles: { |
||||
|
divStyle: {}, |
||||
|
labelStyle: {}, |
||||
|
inputStyle: {}, |
||||
|
}, |
||||
|
aiConfig: [], |
||||
|
}; |
||||
|
}, |
||||
|
dict: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
isSearch: false, |
||||
|
issave: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
key: 1, |
||||
|
isWorkFlow: 2, |
||||
|
flowkey: "", |
||||
|
groupid: "", |
||||
|
signCode: "", |
||||
|
mastesformjson: "", |
||||
|
} |
||||
|
); |
||||
|
const emits = defineEmits<{ |
||||
|
(e: "btnClick", type: string): void; |
||||
|
(e: "change", val: any): void; // 表单组件值发生变化时 |
||||
|
(e: "update:issave", type: boolean): void; |
||||
|
(e: "refresh"): void; |
||||
|
(e: "optionsValue3Get3", val: any, fieldName: string): void; |
||||
|
(e: 'click', value: string): void; |
||||
|
}>(); |
||||
|
const route = useRoute(); |
||||
|
const rangedUserTrees1= ref([]); |
||||
|
// 处理表单值开始 |
||||
|
const model = ref<any>({}); |
||||
|
// 设置全局事件结束 |
||||
|
const resultDict = ref({}); |
||||
|
|
||||
|
const dictForm = computed(() => { |
||||
|
const storage = window.localStorage.getItem("akFormDict"); |
||||
|
let storageDict = {}; |
||||
|
if (storage) { |
||||
|
storageDict = JSON.parse(storage); |
||||
|
} |
||||
|
// 全局的、当前表单配置的以及接口返回的 |
||||
|
return Object.assign({}, storageDict, props.dict, resultDict.value); |
||||
|
}); |
||||
|
// 表单参数 |
||||
|
const formProps = computed(() => { |
||||
|
return { |
||||
|
model: model.value, |
||||
|
type: props.type, |
||||
|
hideField: props.formData.config?.hideField as [], |
||||
|
showColon: props.formData.form.showColon, |
||||
|
dict: dictForm.value, |
||||
|
}; |
||||
|
}); |
||||
|
provide(constFormProps, formProps); |
||||
|
|
||||
|
const pickPageType = ref("PC"); |
||||
|
|
||||
|
|
||||
|
function optionsValue3Get2(data: any, fieldName: string) { |
||||
|
//console.log("form.vue","optionsValue3Get2") |
||||
|
emits("optionsValue3Get3", data, fieldName); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-02-25 10:51:00 |
||||
|
@ 功能: 执行哪个按钮的操作3579.76 2509.81 |
||||
|
2162.87 2783.09 |
||||
|
*/ |
||||
|
const btnClick = (type: string) => { |
||||
|
if(type === 'monitor'){ |
||||
|
pickPageType.value = 'PC' |
||||
|
}else if(type === 'iphone'){ |
||||
|
pickPageType.value = 'WEB' |
||||
|
} |
||||
|
emits('click', type) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always"> |
||||
|
<template #header> |
||||
|
<div class="card-header">设计区域</div> |
||||
|
</template> |
||||
|
<div class="design-toolbar"> |
||||
|
<el-button-group> |
||||
|
<el-button class="fa fa-television" :type="pickPageType === 'PC' ? 'primary' : ''" size="small" @click="btnClick('monitor')">电脑端</el-button> |
||||
|
<el-button class="fa fa-mobile" :type="pickPageType === 'WEB' ? 'primary' : ''" size="small" @click="btnClick('iphone')">移动端</el-button> |
||||
|
</el-button-group> |
||||
|
<el-button-group> |
||||
|
<el-button class="fa fa-trash-o" size="small" @click="btnClick('del')">清空</el-button> |
||||
|
<el-button class="fa fa-eye" size="small" @click="btnClick('eye')">预览</el-button> |
||||
|
<el-button class="fa fa-file-code-o" size="small" @click="btnClick('json')">脚本预览</el-button> |
||||
|
<el-button class="fa fa-save" type="success" size="small" @click="btnClick('save')">保存</el-button> |
||||
|
<el-button class="fa fa-code-fork" type="warning" size="small" @click="btnClick('branch')">另存未新版本</el-button> |
||||
|
</el-button-group> |
||||
|
</div> |
||||
|
<div class="design-area" id="designArea"> |
||||
|
<div v-if="formData.list.length === 0" class="placeholder" id="emptyPlaceholder"> |
||||
|
<i class="fa fa-magic"></i> |
||||
|
<p>从左侧拖拽控件到此处开始设计表单</p> |
||||
|
</div> |
||||
|
<el-form |
||||
|
v-bind="formData.form" |
||||
|
ref="ruleForm" |
||||
|
|
||||
|
:disabled="disabled || type === 3" |
||||
|
class="add-form" |
||||
|
:class="{ |
||||
|
'design-form': type === 5, |
||||
|
'detail-form': type === 3 || type === 4 || type === 1, |
||||
|
}" |
||||
|
> |
||||
|
|
||||
|
<FormGroup |
||||
|
:tableinfo="formData.form" |
||||
|
:numrun="numrun" |
||||
|
:data="formData.list" |
||||
|
:alldata="formData" |
||||
|
:node-key="nodeKey" |
||||
|
:purview="purview" |
||||
|
:org-and-man-tree="rangedUserTrees1" |
||||
|
@options-value3-get2="optionsValue3Get2" |
||||
|
/> |
||||
|
|
||||
|
<slot></slot> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.design-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 10px 10px; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
background: #f5f7fa; |
||||
|
:deep .el-button>span{ |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
.toolbar-right { |
||||
|
display: flex; |
||||
|
gap: 0px; |
||||
|
} |
||||
|
|
||||
|
.design-area { |
||||
|
flex: 1; |
||||
|
background: #fafafa; |
||||
|
border: 2px dashed #c0c4cc; |
||||
|
border-radius: 4px; |
||||
|
padding: 20px; |
||||
|
margin: 10px; |
||||
|
height: calc(100vh - 170px); |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.placeholder { |
||||
|
text-align: center; |
||||
|
color: #909399; |
||||
|
padding: 40px 20px; |
||||
|
} |
||||
|
|
||||
|
.placeholder i { |
||||
|
font-size: 48px; |
||||
|
margin-bottom: 15px; |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue