herenshan112
/
hxgksystemapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

自定义表单版本管理

v1
超级管理员 2 years ago
parent
2a96bd6819
commit
a7288f857c
10 changed files with 598 additions and 178 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/api/DesignForm/index.ts
  2. 40
      src/api/DesignForm/requestapi.ts
  3. 38
      src/api/DesignForm/type.ts
  4. 53
      src/components/DesignForm/dragControl.vue
  5. 13
      src/components/DesignForm/formControlAttr.vue
  6. 38
      src/components/DesignForm/public/headTools.vue
  7. 122
      src/components/DesignForm/public/headToolsNew.vue
  8. 161
      src/views/sysworkflow/codepage/createform.vue
  9. 126
      src/views/sysworkflow/codepage/index.vue
  10. 181
      src/views/sysworkflow/codepage/page.vue

4
src/api/DesignForm/index.ts
View File

@ -22,7 +22,7 @@ export const getRequest = (apiKey: string, data?: any, options: any = {}) => {
options
)
// github演示时使用下面地址
if (window.location.host.indexOf('github') !== -1) {
if (window.location.host.indexOf('github') === -1) {
let id = ''
if (url.indexOf('/id') !== -1 && data.id) {
id = data.id + ''
@ -51,7 +51,7 @@ export const getRequest = (apiKey: string, data?: any, options: any = {}) => {
}
obj = Object.assign(
{
url: `./mock/${url}${id}.json`,
url: `./docs/mock/${url}${id}.json`,
method: 'GET',
params: data
},

40
src/api/DesignForm/requestapi.ts
View File

@ -7,7 +7,12 @@ import {
customerFormConfig,
getContForId,
editFormStatus,
setupCustomerFormCont
setupCustomerFormCont,
customerFormLogo,
customerFormVersionCont,
editFormInfo,
customerFromCont,
enableVersionId
} from './type';
//自定义表单列表
export function getCustomerFormList(queryParams: SearchForm): AxiosPromise<CustomerFormPageResult> {
@ -57,3 +62,36 @@ export function saveSetupCont(data: setupCustomerFormCont) {
data: data
});
}
//获取自定义表单版本列表
export function haveCustomerFormVersion(data: customerFormLogo):AxiosPromise<customerFormVersionCont[]> {
return request({
url: '/systemapi/customer_form/have_customer_form_version',
method: 'post',
data: data
});
}
//编辑自定义表单内容
export function editCustomerFormInfo(data: editFormInfo) {
return request({
url: '/systemapi/customer_form/edit_customer_form_info',
method: 'post',
data: data
});
}
//另存为新版
export function saveAsNewVersion(data: customerFromCont) {
return request({
url: '/systemapi/customer_form/save_as_new_version',
method: 'post',
data: data
});
}
//启用版本
export function enableVersion(data: enableVersionId) {
return request({
url: '/systemapi/customer_form/enable_version',
method: 'post',
data: data
});
}

38
src/api/DesignForm/type.ts
View File

@ -40,3 +40,41 @@ export interface setupCustomerFormCont{
states:number;
status:boolean;
}
//自定义表单标识符
export interface customerFormLogo{
id:string
}
//自定义表单版本内容
export interface customerFormVersionCont{
id:number;
tablekey:string;
version:number;
status:number;
mastesform:string;
mastesformjson:string;
creater:number;
time:number;
editTime:number;
table_structure:string;
dict:string;
}
//编辑自定义表单内容
export interface editFormInfo extends customerFromCont{
id:string;
version:string;
}
export interface customerFromCont{
type:number;
name:string;
source:string;
dict:string;
data:string;
jsondata:string;
classify:number;
}
//启用新版本
export interface enableVersionId{
id:string;
}

53
src/components/DesignForm/dragControl.vue
View File

@ -4,7 +4,7 @@
@ 备注: 快速选择表单字段
-->
<script lang='ts' setup>
import type { TabsPaneContext } from 'element-plus'
import { FormData,FormList } from '@/api/DesignForm/types'
import { stringToObj } from '@/utils/DesignForm/form'
@ -13,9 +13,16 @@ import controlListData from '@/components/DesignForm/assembly'
import { getRequest } from '@/api/DesignForm'
import Draggable from 'vuedraggable-es'
import UseTemplate from './template.vue'
import { customerFormVersionCont } from '@/api/DesignForm/type'
const props = withDefaults(
defineProps<{
formId?: number | string
// eslint-disable-next-line vue/require-default-prop
formId?: number | string,
// eslint-disable-next-line vue/require-default-prop
versioncont?:customerFormVersionCont[],
versionid:number | string,
}>(),
{}
)
@ -37,7 +44,7 @@ const formDataList = ref<any[]>([])
const isSearch = computed(() => {
return designType === 'search'
})
const emits = defineEmits(["clickCheck","click"]);
const emits = defineEmits(["clickCheck","click","update:versionid","editversionstaus"]);
// 筛选设计时左则勾选已有表单字段
const selectChange = (val: any,obj: FormList) => {
if (val) {
@ -87,6 +94,7 @@ watch(
}
}
)
// 加载当前列表所属的表单，从表单中提取可用于搜索的字段
const getFormField = (formId: number) => {
getRequest('designById', { id: formId }).then((res: any) => {
@ -109,6 +117,32 @@ const forEachGetData = (data: FormList[]) => {
}
})
}
//当前版本
const activeName = ref<any>(6)
//切换版本
const handleTabsClick = (val:any) =>{
console.log("切换版本",val)
emits("update:versionid",val)
}
watch(()=>props.versioncont,(val: any)=>{
console.log("versioncont---版本-->",val)
if(val.length>0){
val.forEach((item:any,index:number) => {
if(item.status == 1){
activeName.value = item.id
}
});
}
console.log("选定版本------->",activeName.value)
})
//编辑状态
const setupStatus = (val:any) =>{
emits("editversionstaus",val.id)
}
</script>
<template>
<div class="components-list">
@ -152,15 +186,26 @@ const forEachGetData = (data: FormList[]) => {
</li>
</template>
</draggable>
</div>
<use-template
v-if="!isSearch"
ref="useTemplateEl"
@click="useTemplateSelect"
/>
<div>版本</div>
<el-tabs v-model="activeName" :stretch="true" class="demo-tabs" @tab-change="handleTabsClick" >
<el-tab-pane v-for="(item,index) in props.versioncont" :key="index" :label="'V'+item.version" :name="item.id" class="tab_pane_body">
<el-button v-if="item.status!=1" type="primary" round @click="setupStatus(item)">启用</el-button>
<el-button v-if="item.status==1" type="warning" round @click="setupStatus(item)">使用中</el-button>
</el-tab-pane>
</el-tabs>
</div>
</template>
<style lang='scss' scoped>
.tab_pane_body{
text-align: center;
}
</style>

13
src/components/DesignForm/formControlAttr.vue
View File

@ -17,6 +17,7 @@ const props = withDefaults( //接收父级参数
formData: any
formConfig: any
formOtherData: any
customerformid: number | string,
}>(),
{
formConfig: () => {
@ -748,6 +749,7 @@ watch(
}
}
)
const fileSignAry = reactive<any>([])
const controlChange = (obj: any, val: any) => {
console.log("字段编辑----》",obj,val,controlData.value)
// select多选属性，
@ -796,6 +798,8 @@ const controlChange = (obj: any, val: any) => {
break
case 'labelNameVal':
controlData.value.name = val
fileSignAry.push(val)
console.log("字段编辑--fileSignAry--》",fileSignAry)
break
}
if (obj.path) {
@ -1093,6 +1097,14 @@ const eventClick = (type: string, tooltip?: string) => {
}
getDataSource()
defineExpose({ getFormFieldBySource })
//判断输入框是否可写
const isNotWrite = (val:any) =>{
console.log("判断输入框是否可写--->",val)
if(val.key === "name" && props.customerformid != ""){
return true
}
return false
}
</script>
<template>
<div class="sidebar-tools">
@ -1461,6 +1473,7 @@ defineExpose({ getFormFieldBySource })
v-else
v-model="item.value"
:placeholder="item.placeholder"
:disabled="isNotWrite(item)"
@input="formAttrChange(item)"
/>
</el-form-item>

38
src/components/DesignForm/public/headTools.vue
View File

@ -10,6 +10,7 @@ const props = withDefaults(
defineProps<{
showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
hideKey?: string[] // 设置了showKey时，hideKey无效
customerformid?: number | string,
}>(),
{
showKey: () => {
@ -33,6 +34,7 @@ const btnList = computed(() => {
{ icon: 'json', label: '生成脚本预览', key: 3 },
// { icon: 'vue', label: '导出vue文件', key: 4 },
{ icon: 'save', label: '保存', key: 5 },
{ icon: 'branch', label: '另存为新版', key: 4 },
{ icon: 'close', label: '关闭', key: 6 }
]
if (props.showKey?.length) {
@ -49,22 +51,36 @@ const btnList = computed(() => {
return list // 否则显示全部
}
})
watch(()=>props.customerformid,(val: any)=>{
console.log("选定版本----表单--->",val)
})
</script>
<template>
<div class="main-tools">
<slot></slot>
<el-button
link
@click="btnClick(item.icon)"
v-for="item in btnList"
:key="item.icon"
:type="item.key==6?'danger':item.key==5?'success':'primary'"
>
<i :class="['icon-' + item.icon]"></i>{{ item.label }}
</el-button>
<span v-for="item in btnList">
<el-button
link
v-if="(item.icon != 'branch') || (item.icon == 'branch' && (props.customerformid!=''))"
@click="btnClick(item.icon)"
:key="item.icon"
:type="item.key==6?'danger':item.key==5?'success':item.key==4?'warning':'primary'"
>
<i :class="['icon-' + item.icon]" ></i>{{ item.label }}
</el-button>
</span>
</div>
</template>
<style lang='scss' scoped>
.main-head-tools{
line-height: 26px;
border-bottom: 2px solid #e4e7ed;
margin-right: 10px;
padding: 8px 0;
display: flex;
align-items: center;
justify-content:space-between;
}
</style>

122
src/components/DesignForm/public/headToolsNew.vue
View File

@ -0,0 +1,122 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-08 08:39:33
@ 备注: 画表单头部
-->
<script lang='ts' setup>
import { computed } from 'vue'
const props = withDefaults(
defineProps<{
showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
hideKey?: string[] // 设置了showKey时，hideKey无效
}>(),
{
showKey: () => {
return []
},
hideKey: () => {
return []
}
}
);
const emits = defineEmits<{(e: 'click', value: string): void}>();
const btnClick = (type: string) => {
emits('click', type)
}
const btnList = computed(() => {
const list = [
{ icon: 'del', label: '清空', key: 1 },
{ icon: 'eye', label: '预览', key: 2 },
{ icon: 'json', label: '生成脚本预览', key: 3 },
// { icon: 'vue', label: '导出vue文件', key: 4 },
{ icon: 'save', label: '保存', key: 5 },
{ icon: 'save', label: '另存为', key: 5 },
{ icon: 'close', label: '关闭', key: 6 }
]
if (props.showKey?.length) {
// 按照指定的key显示
return list.filter((item: any) => {
return props.showKey.includes(item.key)
})
} else if (props.hideKey?.length) {
// 按照指定的key隐藏
return list.filter((item: any) => {
return !props.hideKey.includes(item.key)
})
} else {
return list // 否则显示全部
}
})
//当前版本
const activeName = ref<string>("1")
//切换版本
const handleTabsClick = () =>{
}
</script>
<template>
<div class="main-head-tools">
<div class="main-head-version">
<el-link icon="Share" :underline="false">版本</el-link>
<el-tabs
v-model="activeName"
type="card"
class="tabs_version"
@tab-click="handleTabsClick"
>
<el-tab-pane label="V1" name="1"></el-tab-pane>
<el-tab-pane label="V2" name="2"></el-tab-pane>
<el-tab-pane label="V3" name="3"></el-tab-pane>
<el-tab-pane label="V3" name="4"></el-tab-pane>
<el-tab-pane label="V3" name="5"></el-tab-pane>
<el-tab-pane label="V3" name="6"></el-tab-pane>
<el-tab-pane label="V3" name="7"></el-tab-pane>
<el-tab-pane label="V3" name="8"></el-tab-pane>
<el-tab-pane label="V3" name="9"></el-tab-pane>
<el-tab-pane label="V3" name="10"></el-tab-pane>
<el-tab-pane label="V3" name="11"></el-tab-pane>
<el-tab-pane label="V3" name="12"></el-tab-pane>
<el-tab-pane label="V3" name="13"></el-tab-pane>
<el-tab-pane label="V3" name="14"></el-tab-pane>
<el-tab-pane label="V3" name="15"></el-tab-pane>
<el-tab-pane label="V3" name="16"></el-tab-pane>
<el-tab-pane label="V3" name="17"></el-tab-pane>
<el-tab-pane label="V3" name="18"></el-tab-pane>
</el-tabs>
</div>
<div>
<el-button
link
@click="btnClick(item.icon)"
v-for="item in btnList"
:key="item.icon"
:type="item.key==6?'danger':item.key==5?'success':'primary'"
>
<i :class="['icon-' + item.icon]"></i>{{ item.label }}
</el-button>
</div>
</div>
</template>
<style lang='scss' scoped>
.main-head-tools{
line-height: 26px;
border-bottom: 2px solid #e4e7ed;
margin-right: 10px;
padding: 8px 0;
display: flex;
align-items: center;
justify-content:space-between;
}
.main-head-version{
display: flex;
align-items: center;
justify-content:space-between;
overflow: hidden;
}
.tabs_version{
max-width: 340px;
margin-top: -5px;
height: 30px;
}
</style>

161
src/views/sysworkflow/codepage/createform.vue
View File

@ -23,6 +23,7 @@ import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils'
//引入页面
import DragControl from '@/components/DesignForm/dragControl.vue';
import HeadTools from '@/components/DesignForm/public/headTools.vue';
// import HeadTools from '@/components/DesignForm/public/headToolsNew.vue';
import FormDesign from '@/components/DesignForm/public/form/form.vue'
import FormControlAttr from '@/components/DesignForm/formControlAttr.vue';
import VueFile from '@/components/DesignForm/vueFile.vue'
@ -32,10 +33,12 @@ import { ref, reactive, provide, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useLayoutStore } from '@/store/DesignForm/layout'
import { FormData,formStruct,DrawerStruct } from '@/api/DesignForm/types'
import { saveProductionForm,getOneProductionForm } from '@/api/DesignForm/requestapi'
import { customerFormVersionCont } from '@/api/DesignForm/type'
import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCustomerFormInfo,saveAsNewVersion,enableVersion } from '@/api/DesignForm/requestapi'
const isSave = ref(false)
const versionCont = ref<customerFormVersionCont[]>([])
const versionId = ref<string>("")
const props = defineProps({
draweropenclose:{
@ -126,7 +129,7 @@ const getInitData = () => {
state.formOtherData.formName = result.name
state.formOtherData.formName = result.name
state.formData.form.name = result.tablename
state.formData.form.name = result.tablekey
state.formData.form.formName = result.name
if (result.source && state.designType !== 'search') {
// 加载属性侧边栏的字段标识，搜索时不需要请求
@ -138,6 +141,18 @@ const getInitData = () => {
})
.finally(()=>{
isSave.value = true
haveCustomerFormVersion({id:state.formData.form.name})
.then(({data})=>{
console.log("加载异常-------------->",data)
versionCont.value = data
if(data.length > 0){
data.forEach((item:any) => {
if(item.status == 1){
versionId.value = item.id.toString()
}
});
}
})
})
.catch((res: any) => {
// console.log(res)
@ -203,8 +218,16 @@ const getInitData = () => {
break
case 'save':
// saveData();
saveDataNew();
if(props.formid != ""){
editSaveData();
}else{
saveDataNew();
}
break
case 'branch':
saveOtherData();
break
case 'vue':
vueFileEl.value.open(state.formData)
emits("update:draweropenclose", false);
@ -286,6 +309,90 @@ const getInitData = () => {
//ElMessage.error(res.message)
}
}
//另存为
const saveOtherData = () =>{
isSave.value = true
let params: any = {
jsondata:JSON.stringify(state.formData),
data: objToStringify(state.formData),
source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的
name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
type: 1, // 1表单 2列表
dict: json2string(state.formDict)
}
state.loading = true
saveAsNewVersion(params)
.then((res: any) => {
console.log("数据保存", res)
if(res.code == 0){
ElMessage({
message: res.message || '保存成功！',
type: 'success'
})
emits("handlequery");
emits("update:draweropenclose", false);
// 清空右侧栏信息
store.setActiveKey('')
store.setControlAttr({})
}else{
ElMessage({
message: res.msg || '保存失败！',
type: 'error'
})
}
})
.finally(() => {
state.loading=false;
})
.catch((res: any) => {
ElMessage.error(res.message || '保存异常')
state.loading = false
})
}
//编辑
const editSaveData = () =>{
// console.log("保存异常---------->",versionId.value)
let params: any = {
jsondata:JSON.stringify(state.formData),
data: objToStringify(state.formData),
source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的
name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
type: 1, // 1表单 2列表
dict: json2string(state.formDict),
id:props.formid.toString(),
version:versionId.value.toString(),
}
state.loading = true
editCustomerFormInfo(params)
.then((res: any) => {
if(res.code == 0){
ElMessage({
message: res.message || '保存成功！',
type: 'success'
})
emits("handlequery");
emits("update:draweropenclose", false);
// 清空右侧栏信息
store.setActiveKey('')
store.setControlAttr({})
}else{
ElMessage({
message: res.msg || '保存失败！',
type: 'error'
})
}
})
.finally(() => {
state.loading=false;
})
.catch((res: any) => {
ElMessage.error(res.message || '保存异常')
state.loading = false
})
}
//讲数据保存到服务端(新版)
const saveDataNew = () => {
isSave.value = true
@ -542,18 +649,61 @@ watch(() => props.draweropenclose,() => {
}
});
//监听版本变化
watch(() => versionId.value,()=>{
console.log("经停版本变化----》",versionId.value,versionCont.value)
if(versionCont.value.length > 0){
versionCont.value.forEach(item=>{
let versionIdStr = item.id.toString()
if(versionIdStr == versionId.value){
console.log("经停版本变化--1--》",item)
if (item.mastesform) {
state.formData = stringToObj(item.mastesform)
}
state.formDict = string2json(item.dict)
}
})
}
// if (result.mastesform) {
// state.formData = stringToObj(result.mastesform)
// }
// state.formDict = string2json(result.dict)
})
//编辑版本状态
const editversionstaus = (id:string) =>{
console.log("编辑版本状态--1--》",id)
enableVersion({id:id.toString()})
.then(() =>{
haveCustomerFormVersion({id:state.formData.form.name})
.then(({data})=>{
console.log("加载异常-------------->",data)
versionCont.value = data
if(data.length > 0){
data.forEach((item:any) => {
if(item.status == 1){
versionId.value = item.id.toString()
}
});
}
})
})
}
</script>
<template>
<div class="design-container">
<DragControl
v-model:versionid="versionId"
:formid="state.formOtherData.source"
:versioncont="versionCont"
@click-check="searchCheckField"
@click="selectTemplate"
@editversionstaus="editversionstaus"
/>
<div class="main-body">
<HeadTools @click="headToolClick" />
<HeadTools :customerformid="props.formid" @click="headToolClick" />
<div v-loading="state.loading" class="main-form">
<div v-if="state.formData.list.length === 0" class="empty-tips">
从左侧拖拽来添加组件
@ -573,6 +723,7 @@ watch(() => props.draweropenclose,() => {
v-model:formOtherData="state.formOtherData"
:form-data="state.formData.form"
:form-config="state.formData.config"
:customerformid="props.formid"
@open-dialog="openAceEditDrawer"
/>
<ace-drawer

126
src/views/sysworkflow/codepage/index.vue
View File

@ -156,22 +156,22 @@ function editCustomerForm(cont:customerFormCont){
</div>
<el-card shadow="never">
<template #header>
<el-button type="success" @click="openDialog()"><i-ep-plus />新增表单</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
>
<el-button type="success" @click="openDialog()"><i-ep-plus />新增表单</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
>
<i-ep-delete />删除表单
</el-button>
</template>
</template>
<el-table
v-loading="loading"
highlight-current-row
:data="contList"
border
@selection-change="handleSelectionChange"
>
v-loading="loading"
highlight-current-row
:data="contList"
border
@selection-change="handleSelectionChange"
>
<el-table-column fixed type="selection" width="55" align="center" />
<el-table-column fixed label="表单名称" prop="name" />
<el-table-column label="分类" align="center" width="150">
@ -181,60 +181,68 @@ function editCustomerForm(cont:customerFormCont){
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.states === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<template #default="scope">
<el-tag v-if="scope.row.states === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="创建人" prop="creatername" width="140" />
<el-table-column label="创建时间" prop="creatertime" />
<el-table-column fixed="right" label="操作" align="center" width="280">
<template #default="scope">
<el-button
type="success"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
><i-ep-Setting />设置</el-button
>
<el-table-column fixed="right" label="操作" align="center" width="350">
<template #default="scope">
<!-- <el-button
type="success"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
><i-ep-Share />版本</el-button> -->
<el-button
type="warning"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
><i-ep-MessageBox />数据结构</el-button
>
<el-button
type="primary"
link
size="small"
@click.stop="editCustomerForm(scope.row)"
><i-ep-edit />编辑</el-button
>
<el-button
type="danger"
link
size="small"
@click.stop="editCustomerFormState(scope.row)"
><i-ep-delete />删除</el-button
>
</template>
</el-table-column>
type="success"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
>
<i-ep-Setting />设置
</el-button>
<el-button
type="warning"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
>
<i-ep-MessageBox />数据结构
</el-button>
<el-button
type="primary"
link
size="small"
@click.stop="editCustomerForm(scope.row)"
>
<i-ep-edit />编辑
</el-button>
<el-button
type="danger"
link
size="small"
@click.stop="editCustomerFormState(scope.row)"
>
<i-ep-delete />删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.pagesize"
@pagination="handleQuery"
/>
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.pagesize"
@pagination="handleQuery"
/>
</el-card>
</div>
<el-drawer v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass">
<CreateForm v-model:draweropenclose="drawerOpenOrClose" :formid="formId" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
</el-drawer>
<CreateForm v-model:draweropenclose="drawerOpenOrClose" :formid="formId" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
</el-drawer>
<SetupConfig v-model:show="show" :editid="editid" @handle_query="handleQuery" />
</template>
<style lang='scss' scoped>

181
src/views/sysworkflow/codepage/page.vue
View File

@ -4,6 +4,19 @@
@ 备注:
-->
<script lang='ts' setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
json2string,
objToStringify,
string2json,
stringToObj
} from '@/utils/DesignForm/form'
import { useLayoutStore } from '@/store/DesignForm/layout'
import { getRequest } from '@/api/DesignForm'
import '@/assets/scss/element-var.scss'
import '@/assets/scss/index.scss'
import '@/assets/iconfont/iconfont.css'
@ -16,107 +29,83 @@ import {
constFormProps,
appendOrRemoveStyle
} from '@/api/DesignForm/utils'
const formData = {
list: [
{
type: "radio",
control:
{
modelValue: ""
},
options: [],
config:
{
optionsType: 0
},
name: "radio1693383929154",
item:
{
label: "单选框组"
}
},
{
type: "select",
control:
{
modelValue: "",
appendToBody: true
},
options: [],
config:
{
optionsType: 0
},
name: "select1693383931223",
item:
{
label: "下拉选择框"
}
},
{
type: "inputNumber",
control:
{
modelValue: 0
},
config:
{},
name: "inputNumber1693383932808",
item:
{
label: "计数器"
}
},
{
type: "button",
control:
{
label: "保存",
type: "success",
key: "submit"
},
config:
{
span: 6,
textAlign: "center"
}
},
{
type: "button",
control:
{
label: "取消",
type: "danger",
key: "reset"
const layoutStore = useLayoutStore()
const router = useRouter()
const formEl = ref()
const state = reactive({
formData: {
list: [],
form: {},
config: {}
},
config:
{
span: 6,
textAlign: "center"
dict: {},
formId: 25,
id: 1,
loading: true
})
const formType = computed(() => {
// 带有参数id为编辑状态
if (true) {
return 2
} else {
return 1
}
}],
form:
{
size: "default",
name: "customer_form_157524328231997440",
formName: "未命名表单_157524328231997440"
},
config:
{}
})
const getFormData = () => {
if (!state.formId) {
ElMessage.error('非法操作.')
return false
}
const params = {
id: state.formId
}
getRequest('designById', params)
.then((res: any) => {
const result = res.data
state.formData = stringToObj(result.data)
state.dict = string2json(result.dict)
formEl.value.getData({ formId: state.formId, id: 1})
console.log("res----------->", res.data)
nextTick(() => {
state.loading = false
})
})
.catch((res: any) => {
state.loading = false
ElMessage.error(res.message || '非法操作..')
})
}
const formProps = computed(() => {
return {
type: 3
}
})
provide(constFormProps, formProps)
const beforeSubmit = (params: any) => {
params.formId = state.formId
params.id = 1
return params
}
const afterSubmit = (type: string) => {
if (type === 'success') {
router.go(-1)
}
}
onMounted(() => {
getFormData()
})
</script>
<template>
<el-card shadow="never">
<ak-form :formData="formData"></ak-form>
</el-card>
<el-card v-loading="state.loading" shadow="never" style="min-height: 300px">
<ak-form
ref="formEl"
:formData="state.formData"
:type="formType"
:dict="state.dict"
requestUrl="getFormContent"
addUrl="saveFormContent"
editUrl="editFormContent"
:beforeSubmit="beforeSubmit"
:afterSubmit="afterSubmit"
/>
</el-card>
</template>
<style lang='scss' scoped>

Write Preview
Loading…
Cancel
Save