HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

hc_zhufu
徐景良 2024-06-05 08:29:59 +08:00
parent 127da0e0ee 719c3edbed
commit 94ad2d3c61
15 changed files with 792 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FormViewer/index.ts
View File

@ -1,2 +1,2 @@
export { default as FormViewer } from './index.vue';
export { default as SubTable } from './subTable.vue';

166
src/components/FormViewer/index.vue
View File

@ -4,6 +4,7 @@
<a-tabs style="width: 100%" @change="tabsChange">
<a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
<BasicForm ref="myDataBaseFormRef" @register="registerForm" />
<subTable :data="subTableColumns[index]" />
</a-tab-pane>
</a-tabs>
</template>
@ -12,6 +13,7 @@
@register="registerForm"
v-if="formModalVisible && tabsColumns.length < 1"
/>
<subTable v-if="formModalVisible && tabsColumns.length < 1" :data="subTableColumns[0]" />
<template v-for="(item, index) in cardLayout" :key="index">
<a-row style="width: 100%">
<a-col :span="item?.colProps?.span || 24" style="padding: 10px">
@ -26,8 +28,8 @@
<a-col :span="childItem?.colProps?.span || 24">
<CallModalCardFormItem
:data="childItem"
:parent="item.field"
:record="cardLayoutData"
:dataKey="item.field"
:values="cardValues"
/>
</a-col>
</a-row>
@ -36,32 +38,6 @@
</a-col>
</a-row>
</template>
<a-table
class="sub-table"
:columns="subTableColumns"
:data-source="subTableList"
:pagination="false"
v-if="subTableId"
:scroll="scrollValue"
>
<template #headerCell="{ column, record }">
<template v-if="column.key === 'setting'">
<PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'setting'">
<DeleteOutlined
class="icon-button"
@click="delListItem(column, record)"
v-if="!isDetail"
/>
</template>
<template v-else>
<FormItem :data="column" :record="record" />
</template>
</template>
</a-table>
<!-- todo 创建/修改 人/时间 -->
<template v-for="(item, index) in createOrModifyList" :key="index">
<CreateOrModifyComponent :data="item" />
@ -74,10 +50,12 @@
import { BasicForm, useForm } from '@/components/Form';
import { functionGetFormDataFormScheme, LoadFormScheme } from '@/api/demo/formScheme';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';
import CallModalCardFormItem from '@/views/demo/onlineform/formCall/CallModalFormItem/index.vue';
import CreateOrModifyComponent from '@/views/demo/onlineform/formCall/CreateOrModifyComponent/index.vue';
import { SubTable } from './index';
import { v4 as uuidv4 } from 'uuid';
import { cardNestStructure } from '@/views/demo/onlineform/util.ts'
let formColumns: FormSchema[] = [];
const props = defineProps({
@ -90,27 +68,31 @@
});
console.log(props);
const subTableId = ref(null);
const subTableColumns: any = ref([
{
dataIndex: 'setting',
key: 'setting',
fixed: 'left',
width: 60,
},
]);
const subTableData = ref([]);
const subTableColumns: any = ref([]);
const sourceData = ref([]);
const subTableList: any = ref([]);
const scrollValue = ref();
const masterData = ref([]);
const subTableDB = ref([]);
const cardLayout = ref([]);
const cardLayoutData = ref([]);
const cardValues = ref({});
const createOrModifyList = ref([]);
const formModalVisible = ref(false);
const tabsColumns: any = ref([]);
const infoUseSubTableData = ref()
const infoUseMainTableData = ref({})
const keyValue = ref('');
const FieldsValue = ref({});
const getCardLayoutKey = (dataList,key) => {
dataList.forEach(item => {
if (item.component === 'Card'){
getCardLayoutKey(item.columns[0].children,key)
}else if(item.type === "subTable"){
cardValues.value[key][item.field] = []
}else{
cardValues.value[key][item.field] = ""
}
})
}
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
useForm({
labelWidth: 100,
@ -126,12 +108,17 @@
});
if (data) {
const scheme = JSON.parse(data.scheme);
console.log(scheme);
console.log(props.formConfig);
console.log("subTableColumns",subTableColumns)
subTableColumns.value = [];
// 将card组件嵌套起来
scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList)
subTableDB.value = scheme.db;
let disDetail = false;
scheme.formInfo.tabList.forEach((tabElement, index) => {
subTableColumns.value.push({
indexValue: index,
parentFileId: '',
child: [],
});
tabElement.schemas.forEach((element) => {
if (element.field == props.formRelationId) {
keyValue.value = element.componentProps.fieldName;
@ -174,43 +161,27 @@
// 卡片布局
if (element.component === 'Card') {
cardLayout.value.push(element);
let obj = {};
element.columns[0].children.forEach((data) => {
obj[data.field] = '';
});
cardLayoutData.value[element.field] = obj;
cardValues.value[element.field] = {}
getCardLayoutKey(element.columns[0].children,element.field)
}
if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(element.type)) {
createOrModifyList.value.push(element);
}
subTableColumns.value = [
{
dataIndex: 'setting',
key: 'setting',
fixed: 'left',
width: 60,
},
];
// 选项卡
if (element.type === 'subTable') {
subTableId.value = element.field;
let tableData = [];
subTableColumns.value[index].parentFileId = element.field;
element.columns.forEach((itemColumn) => {
itemColumn.children.forEach((itemColumnChild) => {
tableData.push(itemColumnChild);
if (itemColumnChild.component != 'InputGuid') {
subTableColumns.value.push({
key: itemColumnChild.field,
title: itemColumnChild.label,
dataIndex: itemColumnChild.field,
...itemColumnChild,
width: 120,
});
}
subTableColumns.value[index].child.push({
key: itemColumnChild.field,
title: itemColumnChild.label,
dataIndex: itemColumnChild.field,
...itemColumnChild,
width: 120,
});
});
});
scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
subTableData.value = tableData;
}
formColumns.push({
parentValue: index,
@ -238,7 +209,6 @@
}
}
}, 10);
scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 400 };
}
}
async function tabsChange(e) {
@ -252,12 +222,9 @@
});
// 切换时保存值
const values = await validate();
console.log(values);
if (Object.keys(FieldsValue.value).length == 0) {
FieldsValue.value = values;
}
console.log(values);
console.log(FieldsValue.value);
for (const key in values) {
for (const fieKey in FieldsValue.value) {
if (key == fieKey) {
@ -270,7 +237,6 @@
setFieldsValue({
...FieldsValue.value,
});
console.log(FieldsValue.value);
}
async function getFormDetail() {
@ -300,19 +266,50 @@
setFieldsValue({
...obj,
});
let childTableName = subTableDB.value.find((item) => item.type === 'chlid').name;
let mainTableName = subTableDB.value.find((item) => item.type === 'main').name;
infoUseSubTableData.value = data[childTableName].map((item) => {
return {
...item,
key: uuidv4(),
};
});
data[mainTableName].forEach(item => {
infoUseMainTableData.value = {...infoUseMainTableData.value, ...item}
})
if(Object.keys(cardValues.value).length > 0){
Object.keys(cardValues.value).forEach(cardItem => {
let cardItemKeyList = Object.keys(cardValues.value[cardItem])
Object.keys(infoUseMainTableData.value).forEach(item => {
if(cardItemKeyList.includes(item)){
cardValues.value[cardItem][item] = infoUseMainTableData.value[item]
}
})
// todo
cardItemKeyList.forEach(item => {
if(item.indexOf('grid') !== -1){
cardValues.value[cardItem][item] = infoUseSubTableData.value
}
})
})
}
}
async function getForm() {
try {
const values = await validate();
let values = await validate();
for (const key in values) {
for (const fieKey in FieldsValue.value) {
if (key == fieKey) {
if (!values[key]) {
if (values[key] == null || values[key] == undefined) {
values[key] = FieldsValue.value[key];
}
}
}
}
let cardValueList = Object.values(cardValues.value)
cardValueList.forEach(item => {
values = {...values, ...item}
})
let saveSubTableList = [];
let query = values;
console.log(query);
@ -344,21 +341,6 @@
getFormHistory();
}
});
const addListItem = () => {
let keyValue = uuidv4();
let emptyItem = { key: keyValue };
subTableData.value.map((item) => {
if (item.component == 'InputGuid') {
emptyItem[item.field] = keyValue;
} else {
emptyItem[item.field] = '';
}
});
subTableList.value.push(emptyItem);
};
const delListItem = (column, record) => {
subTableList.value = subTableList.value.filter((item) => item.key != record.key);
};
</script>
<style lang="less" scoped>

78
src/components/FormViewer/subTable.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div v-if="columns.length > 1">
{{ tableData }}
<a-table
class="sub-table"
:columns="columns"
:data-source="tableData"
:pagination="false"
:scroll="scrollValue"
>
<template #headerCell="{ column, record }">
<template v-if="column.key === 'setting'">
<PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'setting'">
<DeleteOutlined
class="icon-button"
@click="delListItem(column, record)"
v-if="!isDetail"
/>
</template>
<template v-else>
<FormItem :data="column" :record="record" />
</template>
</template>
</a-table>
</div>
</template>
<script lang="ts" setup>
import { v4 as uuidv4 } from 'uuid';
import { ref, watch } from 'vue';
import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
const scrollValue = ref();
const columns: any = ref([
{
dataIndex: 'setting',
key: 'setting',
fixed: 'left',
width: 60,
},
]);
const tableData: any = ref([]);
const props = defineProps({
data: {
type: Object,
default: () => {},
},
});
console.log(props);
props.data.child.forEach((element) => {
if (element.component != 'InputGuid') {
columns.value.push({
...element,
});
}
});
scrollValue.value = { x: (columns.value.length - 1) * 140, y: 300 };
const addListItem = () => {
let keyValue = uuidv4();
let emptyItem = { key: keyValue };
props.data.child.map((item) => {
if (item.component == 'InputGuid') {
emptyItem[item.field] = keyValue;
} else {
emptyItem[item.field] = '';
}
});
tableData.value.push(emptyItem);
};
const delListItem = (column, record) => {
tableData.value = tableData.value.filter((item) => item.key != record.key);
};
</script>

40
src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
View File

@ -129,7 +129,7 @@
<BasicModal
@register="buttonScriptModal"
title="按钮点击脚本"
:height="700"
:height="500"
:width="1000"
@ok="handleSubmit"
>
@ -178,7 +178,7 @@
import { IBaseFormAttrs } from '../config/formItemPropsConfig';
import { getOutKeyList } from '@/api/formdesign/index';
import { BasicModal, useModal } from '@/components/Modal';
import { formItemPropsScript } from '../../VFormDesign/config/formItemPropsScript';
import { formItemPropsScript, addBreakLines } from '../../VFormDesign/config/formItemPropsScript';
export default defineComponent({
name: 'ComponentProps',
@ -432,7 +432,7 @@
});
// 脚本
const formContent: any = ref('');
const description = ref(formItemPropsScript);
const description = addBreakLines(formItemPropsScript);
// 脚本窗口
const [buttonScriptModal, { openModal, closeModal }] = useModal();
// 点击脚本按钮
@ -442,14 +442,42 @@
}
// 脚本窗口提交
function handleSubmit() {
if (formContent.value.indexOf('=>') != -1) {
// 表示是老版本，提示其修改为新的版本
message.warning('脚本没有更新为最新的版本！');
if (!checkChinese(formContent.value)) {
message.warning('脚本的代码部分不能含有中文字符！');
return;
}
formConfig.value.currentItem.componentProps.clickCode = formContent.value;
closeModal();
}
// 检查脚本的运行代码是否含有中文
function checkChinese(str) {
// 分割字符串为多行
const lines = str.split('\n');
let flag = true;
// 遍历每一行
for (const line of lines) {
// 先检查并移除console.log及其后的内容
const consoleIndex = line.indexOf('console.log');
let partToCheck = line;
if (consoleIndex !== -1) {
partToCheck = line.substring(0, consoleIndex).trim(); // 移除console.log及其后的内容，并去掉前导空格
}
// 再检查'//'
const commentIndex = partToCheck.indexOf('//');
// 如果有'//'，检查'//'前的部分并去掉前导空格；如果没有，保留原部分
partToCheck =
commentIndex !== -1 ? partToCheck.substring(0, commentIndex).trim() : partToCheck;
// 代码部分不能含有中文字符
console.log(partToCheck);
if (/[\u4e00-\u9fa5]/.test(partToCheck)) {
flag = false;
}
}
return flag;
}
return {
formConfig,
showControlAttrs,

16
src/views/demo/form-design/components/VFormDesign/components/FormProps.vue
View File

@ -109,7 +109,7 @@
<BasicModal
@register="propsScriptModal"
:title="formTitle"
:height="700"
:height="500"
:width="1000"
@ok="handleSubmit"
>
@ -118,9 +118,9 @@
<a-textarea v-model:value="formContent" :rows="29" />
</div>
<div calss="propsScript" style="width: 50%">
<a-alert message="脚本参数说明,只支持ES5语法（兼容小程序）" type="warning">
<a-alert message="脚本参数说明" type="warning">
<template #description>
<div v-html="formItemPropsScript"></div>
<div v-html="description"></div>
</template>
</a-alert>
</div>
@ -130,8 +130,7 @@
<script lang="ts" setup name="FormProps">
import { ref, computed } from 'vue';
import { BasicModal, useModal } from '@/components/Modal';
import { message } from 'ant-design-vue';
import { formItemPropsScript } from '../../VFormDesign/config/formItemPropsScript';
import { formItemPropsScript, addBreakLines } from '../../VFormDesign/config/formItemPropsScript';
import { useFormDesignState } from '../../../hooks/useFormDesignState';
import {
InputNumber,
@ -143,6 +142,7 @@
FormItem,
RadioButton,
RadioGroup,
message,
} from 'ant-design-vue';
const { formConfig } = useFormDesignState();
@ -169,7 +169,7 @@
let formTitle: any = ref('');
let btnClickEvent_now = '';
let formContent: any = ref('');
let description = ref(formItemPropsScript);
let description = addBreakLines(formItemPropsScript);
// 脚本窗口
const [propsScriptModal, { openModal, closeModal }] = useModal();
// 点击脚本按钮
@ -222,7 +222,7 @@
}
closeModal();
}
// 检查脚本的运行代码是否含有中文
function checkChinese(str) {
// 分割字符串为多行
const lines = str.split('\n');
@ -243,7 +243,7 @@
partToCheck =
commentIndex !== -1 ? partToCheck.substring(0, commentIndex).trim() : partToCheck;
// 代码部分不能含有中文字符
if (!/[\u4e00-\u9fa5]/.test(partToCheck)) {
if (/[\u4e00-\u9fa5]/.test(partToCheck)) {
flag = false;
}
}

147
src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts
View File

@ -1,21 +1,128 @@
export const formItemPropsScript = `
prop:组件id;<br />
data:组件改变数据;<br />
isUpdate:表单状态,新增或更新;<br />
get(path):获取数据方法, 如果想获取某一个组件值就设置path参数值为组件id, 如果是子表的一行数据值就设置子表id.行号, 如果是子表某一行某一列值就设置子表id.行号.子组件id;<br />
set(path,value):设置值方法,path说明和get方法一致;<br />
getLabel(prop):获取组件的显示值,prop为组件id;<br />
setRequired(prop,isRequired):设置组件是否必填,prop为组件id,isRequired 默认值true,如果取消必填就设置成false<br />
setDisabled(prop,isDisabled):设置组件是否只读,prop为组件id,isDisabled 默认值true,如果取消只读就设置成false<br />
setHide(prop,isHide):设置组件是否隐藏,isHide 默认值true,如果取消隐藏就设置成false<br />
httpGet(option):get请求方法<br />
httpPost(option):post请求方法<br />
httpDelete(option):delete请求方法<br />
httpPut(option):put请求方法<br />
option:上面四个请求方法参数描述:url:请求地址,data:提交数据(get方法不支持),params:url参数,errorTips:请求失败错误提示,callback请求回调方法 返回结果为请求数据<br />
loading:显示加载状态<br />
hideLoading:隐藏加载状态<br />
message:显示提示消息<br />
loginUser:当前登录者信息<br />
callback:回调方法,在脚本里使用了http方法后才需要使用';<br />
export const formItemPropsScript_ = `
prop:组件id;
data:组件改变数据;
isUpdate:表单状态,新增或更新;
get(path):获取数据方法, 如果想获取某一个组件值就设置path参数值为组件id, 如果是子表的一行数据值就设置子表id.行号, 如果是子表某一行某一列值就设置子表id.行号.子组件id;
set(path,value):设置值方法,path说明和get方法一致;
getLabel(prop):获取组件的显示值,prop为组件id;
setRequired(prop,isRequired):设置组件是否必填,prop为组件id,isRequired 默认值true,如果取消必填就设置成false
setDisabled(prop,isDisabled):设置组件是否只读,prop为组件id,isDisabled 默认值true,如果取消只读就设置成false
setHide(prop,isHide):设置组件是否隐藏,isHide 默认值true,如果取消隐藏就设置成false
httpGet(option):get请求方法
httpPost(option):post请求方法
httpDelete(option):delete请求方法
httpPut(option):put请求方法
option:上面四个请求方法参数描述:url:请求地址,data:提交数据(get方法不支持),params:url参数,errorTips:请求失败错误提示,callback请求回调方法 返回结果为请求数据
loading:显示加载状态
hideLoading:隐藏加载状态
message:显示提示消息
loginUser:当前登录者信息
callback:回调方法,在脚本里使用了http方法后才需要使用';
`;
export const formItemPropsScript = `
// 示例代码,只支持ES5语法
// 获取表单是新增还是编辑
var isUpdate = utils.isUpdate();
// 组件id
var id = utils.prop
// 组件变更数据
var data = utils.data
// 子组件变更行号 rowIndex
var rowIndex = utils.rowIndex
// 获取主表数据
var value = utils.get('组件id')
// 获取子表行数据
var childRow = utils.get('子表组件id.行号')
// 获取子表单元格数据
var childCell = utils.get('子表组件id.行号.单元格组件id')
// 设置主表数据
utils.set({path:'组件id',value:'xxxx'})
// 添加子表行数据
var row = {}
utils.set({path:'子表组件id',value:row,type:'addTable'})
// 删除子表行数据
utils.set({path:'子表组件id.行号',type:'deleteTable'})
// 设置子表某一个单元格数据
utils.set({path:'子表组件id.行号.单元格组件id',value:'xxxxxx'})
// 获取主表字段显示值（针对下拉框等）
var label = utils.getLabel('组件id')
// 获取子表单元格显示值
var cellLabel = utils.getLabel('子表组件id.行号.单元格组件id')
// 去掉子表某一行删除按钮
utils.set({path:'子表组件id.行号.hasNoDeleteBtn',value:false})
// 让子表某一行变成不可编辑
utils.set({path:'子表组件id.行号.disabled',value:true})
// 让子表某一行除了某一列外不可以编辑
utils.set({path:'子表组件id.行号.disabled',value:true})
utils.set({path:'子表组件id.行号.abledList',value:['编辑列组件id']})
// 显示表单加载动画
utils.loading('数据加载中')
// 关闭表单加载状态
utils.hideLoading('数据加载中')
// get请求
// 需要用到回调方法
var getCallback = function(res){ console.log(res)//请求结果 }
utils.httpGet({url:api地址,params:{},getCallback})
// post请求
// 需要用到回调方法
var postCallback = function(res){ console.log(res)//请求结果 }
utils.httpPost({url:api地址,params:{},data:{},postCallback})
// put请求
// 需要用到回调方法
var putCallback = function(res){ console.log(res)//请求结果 }
utils.httpPut({url:api地址,params:{},data:{},putCallback})
// post请求
// 需要用到回调方法
var deleteCallback = function(res){ console.log(res)//请求结果 }
utils.httpDelete({url:api地址,params:{},data:{},deleteCallback})
// 如果用来上述的请求，用了回掉方法，请最后写
return 'callback'
`;
export function addBreakLines(text: string): string {
// 根据换行符分割文本为行
const lines = text.split(/\r?\n/);
// 在每行后面添加
return lines.map((line) => line + '<br />').join('');
};
export const formItemPropsScript__ = `
// 组件设置
// 设置组件为隐藏
formColumns.value = utils.setHide('组件的字段标识', false);
// 取消组件隐藏
formColumns.value = utils.setHide('组件的字段标识', true);
// 设置组件为禁用
formColumns.value = utils.setDisabled('组件的字段标识', true);
// 取消组件禁用
formColumns.value = utils.setDisabled('组件的字段标识', false);
// 设置组件为必填
formColumns.value = utils.setRequired('组件的字段标识', true);
// 设置组件不为必填
formColumns.value = utils.setRequired('组件的字段标识', false);
// 功能设置
// 提示消息
utils.message('提示信息', '提示类型');
提示类型：success（成功）、error（错误）、warn（警告）、info（默认）\
// 获取登录者信息
var loginUser = utils.loginUser();
loginUser返回值为{ account: 账号, name: 姓名 }
`;

92
src/views/demo/onlineform/formCall/CallModal.vue
View File

@ -43,7 +43,7 @@
<template v-for="(childItem, childIndex) in item.columns[0].children" :key="childIndex">
<a-row style="width: 100%; margin-bottom: 10px">
<a-col :span="childItem?.colProps?.span || 24">
<CallModalFormItem :data="childItem" />
<CallModalFormItem :data="childItem" :dataKey="item.field" :values="cardValues" />
</a-col>
</a-row>
</template>
@ -137,11 +137,24 @@
// 按钮
const buttonLayout = ref([]);
// 脚本
const cardValues = ref({});
const beforeSetData = ref('');
const afterValidateForm = ref('');
const afterSaveEvent = ref('');
const changeDataEvent = ref('');
const getCardLayoutKey = (dataList, key) => {
dataList.forEach((item) => {
if (item.component === 'Card') {
getCardLayoutKey(item.columns[0].children, key);
} else if (item.type === 'subTable') {
cardValues.value[key][item.field] = [];
} else {
cardValues.value[key][item.field] = '';
}
});
};
const [registerModal, { setModalProps, closeModal }] = useModalInner((data: any) => {
cardLayout.value = [];
console.log('daaaaa', data);
// 脚本
beforeSetData.value = data?.beforeSetData;
@ -275,6 +288,10 @@
subTableData.value = tableData;
}
}
if (item.component === 'Card') {
cardValues.value[item.field] = {};
getCardLayoutKey(item.columns[0].children, item.field);
}
});
if (!unref(isUpdate) && !unref(isDetail)) {
@ -292,9 +309,41 @@
flowCode.value = element.wFlowCode;
}
});
if (Object.keys(cardValues.value).length > 0) {
Object.keys(cardValues.value).forEach((cardItem) => {
let cardItemKeyList = Object.keys(cardValues.value[cardItem]);
Object.keys(data.infoUseMainTableData).forEach((item) => {
if (cardItemKeyList.includes(item)) {
cardValues.value[cardItem][item] = data.infoUseMainTableData[item];
}
});
// todo
cardItemKeyList.forEach((item) => {
if (item.indexOf('grid') !== -1) {
cardValues.value[cardItem][item] = data.infoUseSubTableData;
}
});
});
}
}
if (!unref(isUpdate) && unref(isDetail)) {
getTitle.value = '详情';
if (Object.keys(cardValues.value).length > 0) {
Object.keys(cardValues.value).forEach((cardItem) => {
let cardItemKeyList = Object.keys(cardValues.value[cardItem]);
Object.keys(data.infoUseMainTableData).forEach((item) => {
if (cardItemKeyList.includes(item)) {
cardValues.value[cardItem][item] = data.infoUseMainTableData[item];
}
});
// todo
cardItemKeyList.forEach((item) => {
if (item.indexOf('grid') !== -1) {
cardValues.value[cardItem][item] = data.infoUseSubTableData;
}
});
});
}
}
formModalVisible.value = true;
primaryQuery.value = data.query;
@ -389,8 +438,12 @@
//表单填写数据
async function ModalSureClick() {
try {
const values = await validate();
let values = await validate();
// 添加校验后脚本
let cardValueList = Object.values(cardValues.value);
cardValueList.forEach((item) => {
values = { ...values, ...item };
});
codeClickFunction('afterValidateForm', afterValidateForm.value);
console.log('values', values);
let query = values;
@ -403,7 +456,9 @@
}
saveSubTableList.push(emptyObj);
});
query[subTableId.value] = JSON.stringify(saveSubTableList);
if (subTableId.value) {
query[subTableId.value] = JSON.stringify(saveSubTableList);
}
let params: any = {
schemeId: primaryQuery.value.id,
isUpdate: isUpdate.value,
@ -469,9 +524,32 @@
// 脚本执行方法
async function codeClickFunction(code, codeClick) {
try {
// 动态导入utils模块
const { utils } = await import('./utils');
eval(codeClick);
if (codeClick) {
// 动态导入utils模块
const { utils } = await import('./utils');
let callModalData = {
formModalVisible: formModalVisible,
isUpdate: isUpdate,
isDetail: isDetail,
getTitle: getTitle,
primaryQuery: primaryQuery,
addQuery: addQuery,
formColumns: formColumns,
tabsColumns: tabsColumns,
flowCode: flowCode,
formData: formData,
subTableId: subTableId,
subTableColumns: subTableColumns,
subTableData: subTableData,
subTableList: subTableList,
scrollValue: scrollValue,
cardLayout: cardLayout,
createOrModifyList: createOrModifyList,
buttonLayout: buttonLayout,
};
utils.setCallModalData(callModalData);
eval(codeClick);
}
} catch (e) {
switch (code) {
case 'codeClick':
@ -497,7 +575,7 @@
}
const closeFunc = () => {
buttonLayout.value = [];
cardLayout.value = [];
// cardLayout.value = [];
createOrModifyList.value = [];
return true;
};

106
src/views/demo/onlineform/formCall/CallModalFormItem/index.vue
View File

@ -1,18 +1,63 @@
<template>
<div style="display: flex;" v-if="props.data.component !== 'InputGuid'">
<div v-if="props.data.component === 'Card'">
<a-row style="width: 100%">
<a-col :span="props.data?.colProps?.span || 24" style="padding: 10px">
<a-card
:title="props.data.label"
:class="
props.data.shadow === 'always' ? 'card-always' : props.data.shadow === 'hover' ? 'card-hover' : ''
"
>
<template v-for="(childItem, childIndex) in props.data.columns[0].children" :key="childIndex">
<a-row style="width: 100%; margin-bottom: 10px">
<a-col :span="childItem?.colProps?.span || 24">
<CallModalFormItem :data="childItem" :dataKey="props.dataKey" :values="props.values"/>
</a-col>
</a-row>
</template>
</a-card>
</a-col>
</a-row>
</div>
<a-table
class="sub-table"
:columns="subTableColumns"
:data-source="props.values[props.dataKey][props.data.field]"
:pagination="false"
v-else-if="subTableId"
:scroll="scrollValue"
>
<template #headerCell="{ column, record }">
<template v-if="column.key === 'setting'">
<PlusOutlined class="icon-button" @click="addListItem"/>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'setting'">
<DeleteOutlined
class="icon-button"
@click="delListItem(column, record)"
/>
</template>
<template v-else>
<FormItem :data="column" :record="record" />
</template>
</template>
</a-table>
<div style="display: flex;" v-else-if="props.data.component !== 'InputGuid'">
<div style="width: 85px;">
{{ props.data.label }}
</div>
<Comp
v-if="props.data.component === 'Switch'"
:options="props.data.componentProps.options"
v-model:checked="props.record[props.parent][props.data.field]"
v-model:checked="props.values[props.dataKey][props.data.field]"
/>
<Comp
v-else
:style="props.data.component === 'Select' ? 'width:120px' : ''"
:options="props.data.componentProps.options"
v-model:value="props.record[props.parent][props.data.field]"
v-model:value="props.values[props.dataKey][props.data.field]"
/>
</div>
@ -21,9 +66,60 @@
<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue';
import { componentMap } from '@/components/Form/src/componentMap';
const props = defineProps(['data', 'record','parent']);
console.log(props.data,'props.data')
import CallModalFormItem from './index.vue'
import { v4 as uuidv4 } from 'uuid';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue'
const props = defineProps(['data', 'dataKey','values']);
const Comp = componentMap.get(props.data.component);
const subTableId = ref(null);
const scrollValue = ref();
const subTableData = ref([]);
const subTableList = ref([])
const subTableColumns: any = ref([
{
dataIndex: 'setting',
key: 'setting',
fixed: 'left',
width: 60,
},
])
if (props.data.type === 'subTable') {
subTableId.value = props.data.field;
let tableData = [];
props.data.columns.forEach((itemColumn) => {
itemColumn.children.forEach((itemColumnChild) => {
tableData.push(itemColumnChild);
subTableColumns.value.push({
key: itemColumnChild.field,
title: itemColumnChild.label,
dataIndex: itemColumnChild.field,
...itemColumnChild,
width: 120,
});
});
});
scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
subTableData.value = tableData;
}
const addListItem = () => {
let keyValue = uuidv4();
let emptyItem = { key: keyValue };
subTableData.value.map((item) => {
if (item.component == 'InputGuid') {
emptyItem[item.field] = keyValue;
} else {
emptyItem[item.field] = '';
}
});
props.values[props.dataKey][props.data.field].push(emptyItem);
};
const delListItem = (column, record) => {
props.values[props.dataKey][props.data.field] = props.values[props.dataKey][props.data.field].filter((item) => item.key != record.key);
};
</script>
<style lang="scss" scoped></style>

2
src/views/demo/onlineform/formCall/CreateFlow.vue
View File

@ -223,6 +223,7 @@
res[designerData.formCurrentNode.formRelationId] = processId;
querys.pkeyValue = processId;
}
console.log(res);
for (var item in res) {
if (res[item] == undefined) {
res[item] = '';
@ -237,6 +238,7 @@
}
}
}
console.log(res);
querys.data = JSON.stringify(res);
const formValue = await functionsaveForm(querys);
if (formValue) {

19
src/views/demo/onlineform/formCall/index.vue
View File

@ -97,6 +97,7 @@
// import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
import ShowFormModal from './ShowFormModal/index.vue';
import { v4 as uuidv4 } from 'uuid';
import { cardNestStructure } from '@/views/demo/onlineform/util.ts'
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
@ -135,6 +136,8 @@
const flowCode = ref(''); //流程code
const flowFormData = ref({}); //编辑时表单的数据
const isUpdate = ref(false); //是否是编辑
const infoUseSubTableData = ref()
const infoUseMainTableData = ref({})
// 展示的图层列表
const layers = reactive([
{
@ -493,6 +496,8 @@
afterValidateForm: config.afterValidateForm,
afterSaveEvent: config.afterSaveEvent,
changeDataEvent: config.changeDataEvent,
infoUseMainTableData: infoUseMainTableData.value,
infoUseSubTableData: infoUseSubTableData.value,
};
if (haveMap.value) {
showFormModalData.value = toProps;
@ -545,6 +550,8 @@
recordChildren: formData.value,
query: query.value,
btnList: btnList.value,
infoUseMainTableData: infoUseMainTableData.value,
infoUseSubTableData: infoUseSubTableData.value,
};
if (haveMap.value) {
showFormModalData.value = toProps;
@ -578,6 +585,8 @@
let columnObj = JSON.parse(res.entity.scheme);
let formObj = JSON.parse(res.formScheme.scheme);
console.log('formObj', formObj);
// 将card嵌套起来
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList)
if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 1) {
const arr: any = [];
formObj.formInfo.tabList.forEach((item, index) => {
@ -704,6 +713,7 @@
getFormData(params)
.then((res) => {
let childTableName = designData.value.db.find((item) => item.type === 'chlid').name;
let mainTableName = designData.value.db.find((item) => item.type === 'main').name;
let subTableData = res[childTableName].map((item) => {
return {
...item,
@ -712,6 +722,15 @@
};
});
formData.value = [...subTableData];
infoUseSubTableData.value = res[childTableName].map((item) => {
return {
...item,
key: uuidv4(),
};
});
res[mainTableName].forEach(item => {
infoUseMainTableData.value = {...infoUseMainTableData.value, ...item}
})
})
.catch((err) => {
console.log('err', err);

171
src/views/demo/onlineform/formCall/utils.ts
View File

@ -1,9 +1,172 @@
import { useMessage } from '@/hooks/web/useMessage';
import { useUserStore } from '@/store/modules/user';
// utils.ts
let c_formModalVisible: Boolean = false;
let c_isUpdate = true;
let c_isDetail = true;
let c_getTitle = '';
let c_primaryQuery = '';
let c_addQuery: any = [];
let c_formColumns: any = [];
let c_tabsColumns: any = [];
let c_flowCode = '';
let c_formData = {};
let c_subTableId = null;
let c_subTableColumns: any = [];
let c_subTableData: any = [];
let c_subTableList: any = [];
let c_scrollValue = '';
let c_cardLayout: any = [];
let c_createOrModifyList: any = [];
let c_buttonLayout: any = [];
const { createMessage } = useMessage();
const userStore = useUserStore();
const userInfo: any = userStore.getUserInfo;
// 通过field获取组件
function getComponentByFiled(data: string): any {
return c_formColumns.find(item => item.field === data);
};
export const utils = {
add: function add(a: number, b: number): number {
return a + b;
setCallModalData: function setCallModalData(data: any) {
c_formModalVisible = data.formModalVisible.value;
c_isUpdate = data.isUpdate.value;
c_isDetail = data.isDetail.value;
c_getTitle = data.getTitle.value;
c_primaryQuery = data.primaryQuery.value;
c_addQuery = data.addQuery.value;
c_formColumns = data.formColumns.value;
c_tabsColumns = data.tabsColumns.value;
c_flowCode = data.flowCode.value;
c_formData = data.formData;
c_subTableId = data.subTableId.value;
c_subTableColumns = data.subTableColumns.value;
c_subTableData = data.subTableData.value;
c_subTableList = data.subTableList.value;
c_scrollValue = data.scrollValue.value;
c_cardLayout = data.cardLayout.value;
c_createOrModifyList = data.createOrModifyList.value;
c_buttonLayout = data.buttonLayout.value;
},
subtract: function subtract(a: number, b: number): number {
return a - b;
formModalVisible: (): Boolean => {
return c_formModalVisible;
},
isUpdate: (): Boolean => {
return c_isUpdate;
},
isDetail: (): Boolean => {
return c_isDetail;
},
getTitle: (): string => {
return c_getTitle;
},
primaryQuery: (): string => {
return c_primaryQuery;
},
addQuery: (): any => {
return c_addQuery;
},
formColumns: (): any => {
return c_formColumns;
},
tabsColumns: (): any => {
return c_tabsColumns;
},
flowCode: (): string => {
return c_flowCode;
},
formData: (): {} => {
return c_formData;
},
subTableId: (): any => {
return c_subTableId;
},
subTableColumns: (): any => {
return c_subTableColumns;
},
subTableData: (): any => {
return c_subTableData;
},
subTableList: (): any => {
return c_subTableList;
},
scrollValue: (): string => {
return c_scrollValue;
},
cardLayout: (): any => {
return c_cardLayout;
},
createOrModifyList: (): any => {
return c_createOrModifyList;
},
buttonLayout: (): any => {
return c_buttonLayout;
},
// 数据-----------------------------
// 获取数据
// 组件-----------------------------
// 获取组件
getComponent: (field: any): any => {
return getComponentByFiled(field);
},
// 隐藏与否
setHide: (field: any, hideStatus: Boolean): any => {
const componet: any = getComponentByFiled(field);
if (componet) {
componet.ifShow = hideStatus;
c_formColumns.forEach((item, index) => {
if (item.filed == field) {
c_formColumns[index] = componet;
}
});
}
return c_formColumns;
},
// 禁用与否
setDisabled: (field: any, disabledStatus: Boolean): any => {
const componet: any = getComponentByFiled(field);
if (componet) {
componet.dynamicDisabled = disabledStatus;
c_formColumns.forEach((item, index) => {
if (item.filed == field) {
c_formColumns[index] = componet;
}
});
}
return c_formColumns;
},
// 必填与否
setRequired: (field: any, requiredStatus: Boolean): any => {
const componet: any = getComponentByFiled(field);
if (componet) {
componet.required = requiredStatus;
c_formColumns.forEach((item, index) => {
if (item.filed == field) {
c_formColumns[index] = componet;
}
});
}
return c_formColumns;
},
// 功能-----------------------------
// 提示消息
message: (message: string, type: string = 'info') => {
if (type == 'success') {
createMessage.success(message);
} else if (type == 'error') {
createMessage.error(message);
} else if (type == 'warn') {
createMessage.warn(message);
} else {
createMessage.info(message);
}
},
// 获取登录者信息
loginUser: () => {
return { account: userInfo.account, name: userInfo.name };
},
};

10
src/views/demo/onlineform/formModule/modalDesign.vue
View File

@ -100,6 +100,12 @@
'slot',
'Grid',
'StrengthMeter',
'Button',
'Card',
'FileUpload',
'ImageUpload',
'VideoUpload',
'Tabs',
];
const config_backups: any = {
@ -214,7 +220,7 @@
formScheme.value.formInfo.tabList.forEach((item, index) => {
item.schemas.forEach((val) => {
if (val.type == 'subTable' && val.columns) {
console.log('val', val)
console.log('val', val);
val.columns.forEach((col) => {
col.children.forEach((chil) => {
arr.push(chil);
@ -225,7 +231,7 @@
}
});
});
console.log('item.columns', arr)
console.log('item.columns', arr);
formScheme.value.formInfo.schemas = arr;
}
if (formScheme.value.formInfo.tabList && formScheme.value.formInfo.tabList.length == 1) {

59
src/views/demo/onlineform/formdesign/FormModal.vue
View File

@ -116,6 +116,32 @@
}
return arr;
}
const changeCardStructure = (data) => {
let result = []
data.forEach(item => {
if(item.component === "Tabs"){
item.componentProps.options = changeCardStructure(item.componentProps.options)
}else if(item.children){
item.children = changeCardStructure(item.children)
}else{
if(["Grid","Card"].includes(item.component)){
item.columns[0].children= changeCardStructure(item.columns[0].children)
if(item.component === 'Card'){
item.columns[0].children.forEach(childItem => {
if(childItem.pfield){
result.push(childItem)
}else{
result.push({...childItem, ptype: "card", pfield: item.field})
}
})
}
}
}
result.push(item)
})
return result
}
async function designSendGrandson(value) {
let designTab = JSON.parse(value);
let schems = saveFormDatas.value.scheme.scheme
@ -183,7 +209,8 @@
});
}
});
// 将Card的孩子改成和Card同级别
designTab.schemas = changeCardStructure(designTab.schemas)
let tabList: any = [];
if (designTab.schemas.length > 1) {
tabList.push({
@ -401,6 +428,8 @@
} else {
//编辑
let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
// 将Card同级嵌套起来
schems.formInfo.tabList = cardNestStructure(schems.formInfo.tabList)
schems.db = arr;
(schems.rdb = data.connect || []), (saveFormDatas.value.info.category = data.form.category);
saveFormDatas.value.info.description = data.form.description;
@ -415,6 +444,34 @@
}
}
const cardNestStructure = (data) => {
let childList = {}
let result = []
data.forEach(item => {
if(item.schemas){
item.schemas = cardNestStructure(item.schemas)
result.push(item)
}else if(item.ptype){
let pushItem = {}
Object.keys(item).forEach(key => {
if(key !== 'ptype' && key !== 'pfield'){
pushItem[key] = item[key]
}
})
if(childList[item.pfield]){
childList[item.pfield].push(pushItem)
}else{
childList[item.pfield] = [pushItem]
}
}else if(item.component === 'Card'){
item.columns[0].children = childList[item.field]
result.push(item)
}else{
result.push(item)
}
})
return result
}
// 自动建表返回后，保存数据
function automaticFormDataBack(data) {
if (isStageClick.value && stepsCurrent.value === 0) {

28
src/views/demo/onlineform/util.ts Normal file
View File

@ -0,0 +1,28 @@
export const cardNestStructure = (data) => {
let childList = {}
let result = []
data.forEach(item => {
if(item.schemas){
item.schemas = cardNestStructure(item.schemas)
result.push(item)
}else if(item.ptype){
let pushItem = {}
Object.keys(item).forEach(key => {
if(key !== 'ptype' && key !== 'pfield'){
pushItem[key] = item[key]
}
})
if(childList[item.pfield]){
childList[item.pfield].push(pushItem)
}else{
childList[item.pfield] = [pushItem]
}
}else if(item.component === 'Card'){
item.columns[0].children = childList[item.field]
result.push(item)
}else{
result.push(item)
}
})
return result
}

4
src/views/demo/workflow/task/process/audit.vue
View File

@ -512,7 +512,7 @@
.then(async (res) => {
res[designerData.formCurrentNode.formRelationId] = instanceInfo.pkeyValue;
for (var item in res) {
if (!res[item]) {
if (res[item] == undefined) {
res[item] = '';
if (item.search('_input_guid') != -1) {
res[item] = buildGUID();
@ -535,7 +535,7 @@
const funName = btn.code;
const res = await pcForm.value[funName]();
console.log(res);
// handleCreateFlow(processId);
handleCreateFlow(processId);
} else {
handleSubmit(btn);
}