merge
commit
396bde0c03
|
|
@ -9,6 +9,8 @@ enum Api {
|
|||
GETDATABASEDETAIL = '/api/SysDatabaseLink/GetDataBaseForm', //编辑时获取详情数据
|
||||
TEStCONNECTTION = '/api/SysDatabaseLink/TestConnection', //测试连接串是否正确
|
||||
createPicTable = '/api/createTable/createTable', //图形化建表
|
||||
updateTable = '/api/CreateTable/UpdateTable', //图形化建表-修改
|
||||
loadTableRecordInfo = '/api/CreateTable/LoadTableRecordInfo', //图形化建表记录
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -38,3 +40,9 @@ export const delDataBaseInfo = (params: AccountListItem) =>
|
|||
|
||||
export const createPicTable = (params: AccountListItem) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.createPicTable, params });
|
||||
|
||||
export const updateTable = (params: AccountParams) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.updateTable, params });
|
||||
|
||||
export const loadTableRecordInfo = (params: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.loadTableRecordInfo, params });
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-card
|
||||
style="width: 100%"
|
||||
:tab-list="tabListNoTitle"
|
||||
:active-tab-key="noTitleKey"
|
||||
@tabChange="(key) => onTabChange(key)"
|
||||
>
|
||||
<BasicForm ref="cardRef" @register="registerForm" @change="changeForm" />
|
||||
<template v-if="Object.keys(childItem).length > 0">
|
||||
<CardGourp
|
||||
:data="childItem"
|
||||
:parentValue="props.parentValue"
|
||||
:formData="props.formData"
|
||||
v-if="childItem"
|
||||
/>
|
||||
</template>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { CardGourp } from './index';
|
||||
import { ref, watch } from 'vue';
|
||||
import { subTableStore } from '@/store/modules/subTable';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const subTableDataStore = subTableStore();
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
parentValue: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const noTitleKey = ref(0);
|
||||
const formColumns = [];
|
||||
const tabListNoTitle: any = ref([]);
|
||||
const tableData = props.data;
|
||||
const childGourp = ref([]);
|
||||
const childItem = ref({});
|
||||
let cardFormData = props.formData;
|
||||
const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
||||
const userName = localStorage.getItem('fireUserLoginName');
|
||||
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
|
||||
useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formColumns,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 24, md: 24 },
|
||||
});
|
||||
console.log(props);
|
||||
watch(
|
||||
() => props.formData,
|
||||
(newVal) => {
|
||||
cardFormData = newVal;
|
||||
formColumns.forEach((element) => {
|
||||
for (const key in cardFormData) {
|
||||
if (element.field == key) {
|
||||
var obj = {};
|
||||
obj[key] = cardFormData[key];
|
||||
subTableDataStore.setGroupData(obj);
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
setFieldsValue(subTableDataStore.getGroupData);
|
||||
}, 10);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
if (tableData.componentProps) {
|
||||
tableData.componentProps.options.forEach((element, index) => {
|
||||
tabListNoTitle.value.push({
|
||||
key: index,
|
||||
tab: element.label,
|
||||
...element,
|
||||
index: index,
|
||||
});
|
||||
element.children.forEach((childElement) => {
|
||||
formColumns.push({
|
||||
parentValue: element.field,
|
||||
...childElement,
|
||||
show: index == 0 ? true : false,
|
||||
index: index,
|
||||
});
|
||||
if (childElement.component == 'CardGroup') {
|
||||
childGourp.value.push({
|
||||
...childElement,
|
||||
index: index,
|
||||
});
|
||||
}
|
||||
if (['createuser', 'modifyuser'].includes(childElement.type)) {
|
||||
var obj = {};
|
||||
obj[childElement.field] = userName;
|
||||
console.log(obj);
|
||||
subTableDataStore.setGroupData(obj);
|
||||
}
|
||||
if (['createtime', 'modifytime'].includes(childElement.type)) {
|
||||
var obj = {};
|
||||
obj[childElement.field] = nowTime.value;
|
||||
console.log(obj);
|
||||
subTableDataStore.setGroupData(obj);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
resetFields();
|
||||
}, 10);
|
||||
|
||||
const onTabChange = (value: string) => {
|
||||
noTitleKey.value = value;
|
||||
var currentIndex = (childGourp.value || []).findIndex((element) => element.index === value);
|
||||
console.log(currentIndex);
|
||||
if (currentIndex == -1) {
|
||||
childItem.value = {};
|
||||
} else {
|
||||
childItem.value = childGourp.value[currentIndex];
|
||||
}
|
||||
formColumns.forEach((element) => {
|
||||
element.show = false;
|
||||
updateSchema([{ field: element.field, show: false }]);
|
||||
if (element.index == value) {
|
||||
element.show = true;
|
||||
updateSchema([{ field: element.field, show: true }]);
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
resetFields();
|
||||
setFieldsValue(subTableDataStore.getGroupData);
|
||||
}, 10);
|
||||
};
|
||||
function changeForm() {
|
||||
subTableDataStore.setGroupData(getFieldsValue());
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
export { default as FormViewer } from './index.vue';
|
||||
export { default as SubTable } from './subTable.vue';
|
||||
export { default as CardGourp } from './cardGourp.vue';
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
<a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
|
||||
<BasicForm ref="myDataBaseFormRef" @register="registerForm" />
|
||||
<subTable ref="subTableRef" :data="subTableColumns[index]" :tabsKey="tabsKey" />
|
||||
<CardGourp
|
||||
v-if="cardGroupData.length > 0"
|
||||
:data="cardGroupData[index]"
|
||||
:formData="cardGourpFormData"
|
||||
:parentValue="cardGroupData[index].field"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
|
|
@ -13,7 +19,9 @@
|
|||
@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">
|
||||
|
|
@ -38,6 +46,15 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<!-- 卡片组 -->
|
||||
<template v-if="formModalVisible && tabsColumns.length < 1">
|
||||
<CardGourp
|
||||
v-if="cardGroupData.length > 0"
|
||||
:data="cardGroupData[0]"
|
||||
:formData="cardGourpFormData"
|
||||
:parentValue="cardGroupData[0].field"
|
||||
/>
|
||||
</template>
|
||||
<!-- todo 创建/修改 人/时间 -->
|
||||
<template v-for="(item, index) in createOrModifyList" :key="index">
|
||||
<CreateOrModifyComponent :data="item" />
|
||||
|
|
@ -52,10 +69,11 @@
|
|||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-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 { SubTable, CardGourp } from './index';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
|
||||
import { subTableStore } from '@/store/modules/subTable';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const subTableDataStore = subTableStore();
|
||||
|
||||
|
|
@ -83,6 +101,11 @@
|
|||
const keyValue = ref('');
|
||||
const FieldsValue = ref({});
|
||||
const subTableRef = ref<any>();
|
||||
const cardGroupData = ref([]);
|
||||
const cardGourpFormData = ref({});
|
||||
subTableDataStore.clearGoupData();
|
||||
const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
||||
const userName = localStorage.getItem('fireUserLoginName');
|
||||
const getCardLayoutKey = (dataList, key) => {
|
||||
dataList.forEach((item) => {
|
||||
if (item.component === 'Card') {
|
||||
|
|
@ -109,9 +132,11 @@
|
|||
});
|
||||
if (data) {
|
||||
const scheme = JSON.parse(data.scheme);
|
||||
console.log(scheme);
|
||||
subTableColumns.value = [];
|
||||
// 将card组件嵌套起来
|
||||
scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
|
||||
console.log(scheme.formInfo.tabList);
|
||||
subTableDB.value = scheme.db;
|
||||
let disDetail = false;
|
||||
let tableColumns = [];
|
||||
|
|
@ -123,6 +148,7 @@
|
|||
multiterm: '',
|
||||
});
|
||||
tabElement.schemas.forEach((element) => {
|
||||
console.log(element);
|
||||
if (element.field == props.formRelationId) {
|
||||
keyValue.value = element.componentProps.fieldName;
|
||||
getFormDetail();
|
||||
|
|
@ -192,6 +218,13 @@
|
|||
});
|
||||
});
|
||||
}
|
||||
// 卡片组布局
|
||||
if (element.component === 'CardGroup') {
|
||||
console.log(element);
|
||||
cardGroupData.value.push({
|
||||
...element,
|
||||
});
|
||||
}
|
||||
formColumns.push({
|
||||
parentValue: index,
|
||||
...element,
|
||||
|
|
@ -208,10 +241,10 @@
|
|||
}
|
||||
});
|
||||
formModalVisible.value = true;
|
||||
console.log(formColumns);
|
||||
setTimeout(() => {
|
||||
subTableDataStore.setTableData(tableColumns);
|
||||
resetFields();
|
||||
console.log(props.flowFormData);
|
||||
if (!disDetail) {
|
||||
console.log('赋值赋值');
|
||||
if (props.flowFormData) {
|
||||
|
|
@ -230,6 +263,7 @@
|
|||
element.show = true;
|
||||
}
|
||||
});
|
||||
console.log(formColumns);
|
||||
// 切换时保存值
|
||||
const values = await validate();
|
||||
if (Object.keys(FieldsValue.value).length == 0) {
|
||||
|
|
@ -258,16 +292,11 @@
|
|||
keyValue: instance.pkeyValue,
|
||||
};
|
||||
const data = await functionGetFormDataFormScheme(querys);
|
||||
console.log(data);
|
||||
console.log(subTableDB.value);
|
||||
console.log(subTableDataStore.getTableData);
|
||||
let obj = new Object();
|
||||
for (var i in data) {
|
||||
subTableDB.value.forEach((element) => {
|
||||
if (element.type == 'chlid') {
|
||||
subTableDataStore.getTableData.forEach((element) => {
|
||||
console.log(element);
|
||||
console.log(data[i]);
|
||||
if (element.dataTable == i) {
|
||||
subTableDataStore.setSingleData(element.parentFileId, data[i]);
|
||||
}
|
||||
|
|
@ -280,21 +309,24 @@
|
|||
});
|
||||
}
|
||||
console.log(obj);
|
||||
cardGourpFormData.value = obj;
|
||||
FieldsValue.value = obj;
|
||||
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 (subTableDB.value.length > 1) {
|
||||
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]);
|
||||
|
|
@ -313,7 +345,6 @@
|
|||
}
|
||||
}
|
||||
async function getForm() {
|
||||
console.log(subTableDataStore.getTableData);
|
||||
try {
|
||||
let values = await validate();
|
||||
for (const key in values) {
|
||||
|
|
@ -339,6 +370,23 @@
|
|||
query[item.parentFileId] = JSON.stringify(item.child);
|
||||
});
|
||||
}
|
||||
// 储存卡片组信息
|
||||
if (Object.keys(subTableDataStore.getGroupData).length > 0) {
|
||||
for (const key in subTableDataStore.getGroupData) {
|
||||
query[key] = subTableDataStore.getGroupData[key];
|
||||
}
|
||||
}
|
||||
console.log(query);
|
||||
// 存储创建人、创建时间等内容
|
||||
if (createOrModifyList.value.length > 0) {
|
||||
createOrModifyList.value.forEach((item) => {
|
||||
if (item.type == 'createuser' || item.type == 'modifyuser') {
|
||||
query[item.field] = userName;
|
||||
} else if (item.type == 'createtime' || item.type == 'modifytime') {
|
||||
query[item.field] = nowTime.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
console.log(query);
|
||||
return query;
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
:data-source="tableData"
|
||||
:pagination="false"
|
||||
:scroll="scrollValue"
|
||||
>
|
||||
>
|
||||
<!-- v-if="props.data.multiterm" -->
|
||||
<template #headerCell="{ column, record }">
|
||||
<template v-if="column.key === 'setting'">
|
||||
<PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- <BasicForm ref="subTableRef" @register="registerForm" @change="changeData" v-else /> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -34,10 +36,10 @@
|
|||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { subTableStore } from '@/store/modules/subTable';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const subTableDataStore = subTableStore();
|
||||
|
||||
const scrollValue = ref();
|
||||
const columns: any = ref([
|
||||
{
|
||||
|
|
@ -58,18 +60,23 @@
|
|||
default: '',
|
||||
},
|
||||
});
|
||||
console.log(props);
|
||||
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
|
||||
useForm({
|
||||
labelWidth: 100,
|
||||
schemas: columns,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 24, md: 24 },
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
console.log(subTableDataStore.getTableData);
|
||||
subTableDataStore.getTableData.forEach((element) => {
|
||||
if (element.parentFileId == props.data.parentFileId) {
|
||||
console.log(element);
|
||||
tableData.value = element.child;
|
||||
}
|
||||
});
|
||||
});
|
||||
props.data.child.forEach((element) => {
|
||||
console.log(element);
|
||||
if (element.component != 'InputGuid') {
|
||||
columns.value.push({
|
||||
...element,
|
||||
|
|
@ -79,7 +86,6 @@
|
|||
watch(
|
||||
() => tableData.value,
|
||||
(newVal) => {
|
||||
console.log(newVal);
|
||||
subTableDataStore.setSingleData(props.data.parentFileId, newVal);
|
||||
},
|
||||
{ deep: true },
|
||||
|
|
@ -113,4 +119,7 @@
|
|||
defineExpose({
|
||||
getData,
|
||||
});
|
||||
function changeData(){
|
||||
console.log(tableData.value)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@
|
|||
await process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
const json = JSON.parse(convert.xml2json(xml, { spaces: 2 }));
|
||||
const flowElements = json.elements[0].elements[0].elements;
|
||||
console.log(flowElements)
|
||||
console.log(flowElements);
|
||||
for (var j = 0; j < flowElements.length; j++) {
|
||||
if (flowElements[j].attributes.name) {
|
||||
flowWfDataStore.setWfDataName(
|
||||
|
|
@ -236,6 +236,21 @@
|
|||
flowElements[j].attributes.name,
|
||||
);
|
||||
}
|
||||
if (flowElements[j].name == 'bpmn2:sequenceFlow') {
|
||||
const currentNode = flowWfDataStore.getWfDataNode(flowElements[j].attributes.id);
|
||||
if (currentNode) {
|
||||
flowWfDataStore.updataWfDataNode(
|
||||
flowElements[j].attributes.id,
|
||||
'from',
|
||||
flowElements[j].attributes.sourceRef,
|
||||
);
|
||||
flowWfDataStore.updataWfDataNode(
|
||||
flowElements[j].attributes.id,
|
||||
'to',
|
||||
flowElements[j].attributes.targetRef,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// try {
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@
|
|||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
|
||||
if (currentNode) {
|
||||
node.value = currentNode;
|
||||
node.value.from = newVal.from;
|
||||
node.value.to = newVal.to;
|
||||
} else {
|
||||
node.value = newVal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -163,6 +163,7 @@
|
|||
import { flowStore } from '@/store/modules/flow';
|
||||
import { SelectForm } from '@/components/SelectForm/index';
|
||||
import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';
|
||||
import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
|
|
@ -339,6 +340,7 @@
|
|||
label?: string;
|
||||
value?: string;
|
||||
}[] = [];
|
||||
scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
|
||||
scheme.formInfo.tabList.forEach((tabElement) => {
|
||||
tabElement.schemas.forEach(
|
||||
(element: { label?: string; field?: string; component: any; itemProps: any }) => {
|
||||
|
|
@ -360,6 +362,7 @@
|
|||
'CreateTime',
|
||||
'ModifyUser',
|
||||
'ModifyTime',
|
||||
'CardGroup',
|
||||
].includes(element.component) &&
|
||||
!element.itemProps.hidden
|
||||
) {
|
||||
|
|
@ -436,6 +439,18 @@
|
|||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
} else if (['CardGroup'].includes(element.component)) {
|
||||
element.componentProps.options.forEach((optionsElement) => {
|
||||
optionsElement.children.forEach((childrenElement) => {
|
||||
let obj: any = childrenElement;
|
||||
obj.required = childrenElement.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = childrenElement.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -512,6 +512,7 @@
|
|||
import { flowStore } from '@/store/modules/flow';
|
||||
import { SelectForm } from '@/components/SelectForm/index';
|
||||
import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';
|
||||
import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
|
|
@ -894,6 +895,7 @@
|
|||
label?: string;
|
||||
value?: string;
|
||||
}[] = [];
|
||||
scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
|
||||
scheme.formInfo.tabList.forEach((tabElement) => {
|
||||
tabElement.schemas.forEach(
|
||||
(element: { label?: string; field?: string; component: any; itemProps: any }) => {
|
||||
|
|
@ -914,6 +916,7 @@
|
|||
'CreateTime',
|
||||
'ModifyUser',
|
||||
'ModifyTime',
|
||||
'CardGroup',
|
||||
].includes(element.component) &&
|
||||
!element.itemProps.hidden
|
||||
) {
|
||||
|
|
@ -990,6 +993,18 @@
|
|||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
} else if (['CardGroup'].includes(element.component)) {
|
||||
element.componentProps.options.forEach((optionsElement) => {
|
||||
optionsElement.children.forEach((childrenElement) => {
|
||||
let obj: any = childrenElement;
|
||||
obj.required = childrenElement.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = childrenElement.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,24 +4,36 @@ export const subTableStore = defineStore({
|
|||
id: 'subTable',
|
||||
state: () => ({
|
||||
tableDta: [],
|
||||
groupData: {},
|
||||
}),
|
||||
getters: {
|
||||
getTableData(state) {
|
||||
return state.tableDta;
|
||||
},
|
||||
getGroupData(state) {
|
||||
return state.groupData;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
setTableData(data) {
|
||||
this.tableDta = data;
|
||||
},
|
||||
setSingleData(parentFileId, data) {
|
||||
console.log(parentFileId);
|
||||
console.log(data);
|
||||
this.tableDta.forEach((item, i) => {
|
||||
if (item.parentFileId == parentFileId) {
|
||||
item.child = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
setGroupData(data) {
|
||||
for (const key2 in data) {
|
||||
if (data[key2] != undefined) {
|
||||
this.groupData[key2] = data[key2];
|
||||
}
|
||||
}
|
||||
},
|
||||
clearGoupData() {
|
||||
this.groupData = {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@
|
|||
'Cascader',
|
||||
'AutoComplete',
|
||||
'Tabs',
|
||||
'CardGroup'
|
||||
].includes(formConfig.currentItem.component)
|
||||
"
|
||||
>
|
||||
|
|
@ -246,7 +247,7 @@
|
|||
if (data && data[0]) {
|
||||
data[0].db_codecolumnsList.forEach((item) => {
|
||||
arr.push({
|
||||
label: item.dbColumnName,
|
||||
label: item.dbColumnName + '(' + item.description + ')',
|
||||
value: item.dbColumnName,
|
||||
csType: item.csType,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -137,7 +137,6 @@
|
|||
v-bind="item.componentProps"
|
||||
:is="item.component"
|
||||
v-model:value="formConfig.currentItem[item.name]"
|
||||
:key="formConfig.currentItem.component + '===' + formConfig.currentItem.label"
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
-->
|
||||
<template>
|
||||
<div
|
||||
class="drag-move-box"
|
||||
class="drag-move-box component-border"
|
||||
@click.stop="handleSelectItem"
|
||||
:class="{ active: schema.key === formConfig.currentItem?.key }"
|
||||
>
|
||||
|
|
@ -51,3 +51,8 @@
|
|||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.component-border{
|
||||
border: 1px solid #d9d9d9
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,8 +47,21 @@
|
|||
schemas.some((formItem, index) => {
|
||||
const { component, key } = formItem;
|
||||
// 处理栅格和标签页布局
|
||||
['Grid', 'Tabs'].includes(component) &&
|
||||
formItem.columns?.forEach((item) => traverse(item.children));
|
||||
if(['Grid', 'Tabs','Card', 'CardGroup'].includes(component)){
|
||||
switch(component){
|
||||
case 'Grid':
|
||||
case 'Card':
|
||||
formItem.columns?.forEach((item) => traverse(item.children))
|
||||
break;
|
||||
case 'Tabs':
|
||||
case 'CardGroup':
|
||||
console.log(formItem,'formItem')
|
||||
formItem?.componentProps?.options?.forEach(optionItem => {
|
||||
traverse(optionItem.children)
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (key === props.currentItem.key) {
|
||||
let params: IVFormComponent =
|
||||
schemas.length === 1
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
import message from '../../../utils/message';
|
||||
import { Input } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FormOptions',
|
||||
|
|
@ -59,6 +60,13 @@
|
|||
value: '' + len,
|
||||
children: [],
|
||||
});
|
||||
}else if (['CardGroup'].includes(formConfig.value.currentItem!.component)) {
|
||||
formConfig.value.currentItem!.componentProps![key].push({
|
||||
label: `卡片${len}`,
|
||||
value: '' + len,
|
||||
field: `use_card_${uuidv4()}`,
|
||||
children: [],
|
||||
});
|
||||
} else {
|
||||
formConfig.value.currentItem!.componentProps![key].push({
|
||||
label: `选项${len}`,
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@
|
|||
<Col v-bind="colPropsComputed">
|
||||
<template v-if="['Grid','Card'].includes(schema.component)">
|
||||
<div
|
||||
class="grid-box"
|
||||
class="grid-box component-border"
|
||||
:class="{ active: schema.key === currentItem.key }"
|
||||
@click.stop="handleSetSelectItem(schema)"
|
||||
>
|
||||
{{ schema.label }}
|
||||
<Row class="grid-row" v-bind="schema.componentProps">
|
||||
<Col
|
||||
class="grid-col"
|
||||
|
|
@ -49,7 +50,7 @@
|
|||
</template>
|
||||
<template v-else-if="['Tabs'].includes(schema.component)">
|
||||
<div
|
||||
class="grid-box"
|
||||
class="grid-box component-border"
|
||||
:class="{ active: schema.key === currentItem.key }"
|
||||
@click.stop="handleSetSelectItem(schema)"
|
||||
>
|
||||
|
|
@ -84,6 +85,45 @@
|
|||
<FormNodeOperate :schema="schema" :currentItem="currentItem" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['CardGroup'].includes(schema.component)">
|
||||
<div
|
||||
class="grid-box component-border"
|
||||
:class="{ active: schema.key === currentItem.key }"
|
||||
@click.stop="handleSetSelectItem(schema)"
|
||||
>
|
||||
{{ schema.label }}
|
||||
<a-radio-group v-model:value="cardGroupRadio" :options="schema.componentProps.options" />
|
||||
<div class="list-main draggable-box" v-for="(colItem, index) in schema.componentProps.options" :tab="colItem.label" :key="index">
|
||||
<draggable
|
||||
v-show="cardGroupRadio == colItem.value"
|
||||
class="list-main draggable-box"
|
||||
style="min-height: 50px"
|
||||
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
|
||||
v-bind="{
|
||||
group: 'form-draggable',
|
||||
ghostClass: 'moving',
|
||||
animation: 180,
|
||||
handle: '.drag-move',
|
||||
}"
|
||||
item-key="key"
|
||||
v-model="colItem.children"
|
||||
@start="$emit('dragStart', $event, colItem.children)"
|
||||
@add="$emit('handleColAdd', $event, colItem.children)"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<LayoutItem
|
||||
class="drag-move"
|
||||
:schema="element"
|
||||
:current-item="currentItem"
|
||||
@handle-copy="$emit('handle-copy')"
|
||||
@handle-delete="$emit('handle-delete')"
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<FormNodeOperate :schema="schema" :currentItem="currentItem" />
|
||||
</div>
|
||||
</template>
|
||||
<FormNode
|
||||
v-else
|
||||
:key="schema.key"
|
||||
|
|
@ -95,13 +135,14 @@
|
|||
</Col>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, reactive, toRefs } from 'vue';
|
||||
import { computed, defineComponent, PropType, reactive, toRefs, ref } from 'vue';
|
||||
import draggable from 'vuedraggable';
|
||||
import FormNode from './FormNode.vue';
|
||||
import FormNodeOperate from './FormNodeOperate.vue';
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
||||
import { IVFormComponent } from '../../../typings/v-form-component';
|
||||
import { Row, Col } from 'ant-design-vue';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutItem',
|
||||
|
|
@ -140,13 +181,24 @@
|
|||
const layoutTag = computed(() => {
|
||||
return formConfig.value.layout === 'horizontal' ? 'Col' : 'div';
|
||||
});
|
||||
|
||||
// 控制卡片组
|
||||
const cardGroupRadio = ref()
|
||||
if(props.schema.component === 'CardGroup'){
|
||||
// 为卡片组的孩子卡片分配field
|
||||
props.schema.componentProps.options = props.schema.componentProps.options?.map(item => {
|
||||
return {...item,field:`use_card_${uuidv4()}`}
|
||||
})
|
||||
if(props.schema.componentProps.options.length > 0){
|
||||
cardGroupRadio.value = props.schema.componentProps.options[0].value
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
colPropsComputed,
|
||||
handleSetSelectItem,
|
||||
layoutTag,
|
||||
list1,
|
||||
cardGroupRadio,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -162,3 +214,8 @@
|
|||
background-color: rgb(240 191 195);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.component-border{
|
||||
border: 1px solid #d9d9d9
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
|
|||
label: '控件-FormItem',
|
||||
component: Select,
|
||||
componentProps: {
|
||||
options: baseComponents.concat(customComponents[0]).map((item) => ({
|
||||
options: baseComponents.concat(customComponents[1]).map((item) => ({
|
||||
value: item.component,
|
||||
label: item.label,
|
||||
key: item.component + '===' + item.label,
|
||||
|
|
|
|||
|
|
@ -20,27 +20,14 @@ loginUser:当前登录者信息
|
|||
callback:回调方法,在脚本里使用了http方法后才需要使用';
|
||||
`;
|
||||
|
||||
export const formItemPropsScript = `
|
||||
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'})
|
||||
|
|
@ -48,13 +35,6 @@ 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})
|
||||
// 让子表某一行变成不可编辑
|
||||
|
|
@ -62,47 +42,20 @@ 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 = `
|
||||
// 获取表单是新增还是编辑
|
||||
var isUpdate = utils.isUpdate();
|
||||
// 组件变更数据
|
||||
var data = utils.data();
|
||||
|
||||
// 数据设置
|
||||
// 获取主表数据
|
||||
utils.getValue('组件的字段标识');
|
||||
// 设置主表数据
|
||||
setFieldsValue(utils.setValue('组件的字段标识', '设置的值'));
|
||||
|
||||
export const formItemPropsScript__ = `
|
||||
// 组件设置
|
||||
// 设置组件为隐藏
|
||||
formColumns.value = utils.setHide('组件的字段标识', false);
|
||||
|
|
@ -125,4 +78,26 @@ utils.message('提示信息', '提示类型');
|
|||
var loginUser = utils.loginUser();
|
||||
loginUser返回值为{ account: 账号, name: 姓名 }
|
||||
|
||||
// 回调方法
|
||||
// get请求
|
||||
// 需要用到回调方法
|
||||
// 例子：let resGet = await utils.httpGet('/api/FormScheme/LoadFormPage', { page: 1, limit: 10 });
|
||||
let resGet = await utils.httpGet(url, params);
|
||||
url:api地址, params:参数
|
||||
|
||||
// post请求
|
||||
let resPost = await utils.httpPost(url, params);
|
||||
url:api地址, params:参数
|
||||
|
||||
// put请求
|
||||
// 需要用到回调方法
|
||||
let resPut = await utils.httpPut(url, params);
|
||||
url:api地址, params:参数
|
||||
`;
|
||||
|
||||
export function addBreakLines(text: string): string {
|
||||
// 根据换行符分割文本为行
|
||||
const lines = text.split(/\r?\n/);
|
||||
// 在每行后面添加
|
||||
return lines.map((line) => line + '<br />').join('');
|
||||
};
|
||||
|
|
@ -140,6 +140,8 @@
|
|||
}
|
||||
|
||||
.list-main {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
// 列表动画
|
||||
.list-enter-active {
|
||||
transition: all 0.5s;
|
||||
|
|
|
|||
|
|
@ -426,16 +426,16 @@ export const baseComponents: IVFormComponent[] = [
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Upload',
|
||||
label: '上传',
|
||||
icon: 'ant-design:upload-outlined',
|
||||
field: '',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
api: () => 1,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// component: 'Upload',
|
||||
// label: '上传',
|
||||
// icon: 'ant-design:upload-outlined',
|
||||
// field: '',
|
||||
// colProps: { span: 24 },
|
||||
// componentProps: {
|
||||
// api: () => 1,
|
||||
// },
|
||||
// },
|
||||
{
|
||||
component: 'Cascader',
|
||||
label: '级联选择',
|
||||
|
|
@ -662,4 +662,27 @@ export const layoutComponents: IVFormComponent[] = [
|
|||
gutter: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'CardGroup',
|
||||
label: '卡片组',
|
||||
icon: 'ic:round-auto-awesome-motion',
|
||||
colProps: { span: 24 },
|
||||
field: '',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '卡片1',
|
||||
value: '1',
|
||||
field:`use_card_1`,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: '卡片2',
|
||||
field:`use_card_2`,
|
||||
value: '2',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -90,14 +90,16 @@ export function toLine(str: string) {
|
|||
export function formItemsForEach(array: IVFormComponent[], cb: (item: IVFormComponent) => void) {
|
||||
if (!isArray(array)) return;
|
||||
const traverse = (schemas: IVFormComponent[]) => {
|
||||
schemas.forEach((formItem: IVFormComponent) => {
|
||||
if (['Grid'].includes(formItem.component)) {
|
||||
// 栅格布局
|
||||
formItem.columns?.forEach((item) => traverse(item.children));
|
||||
} else {
|
||||
cb(formItem);
|
||||
}
|
||||
});
|
||||
if (schemas) {
|
||||
schemas.forEach((formItem: IVFormComponent) => {
|
||||
if (['Grid'].includes(formItem.component)) {
|
||||
// 栅格布局
|
||||
formItem.columns?.forEach((item) => traverse(item.children));
|
||||
} else {
|
||||
cb(formItem);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
traverse(array);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,279 +1,184 @@
|
|||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:canFullscreen="false"
|
||||
:draggable="false"
|
||||
:showCancelBtn="!isDetail"
|
||||
:showOkBtn="!isDetail"
|
||||
:title="getTitle"
|
||||
@ok="ModalSureClick"
|
||||
width="80%"
|
||||
:closeFunc="closeFunc"
|
||||
>
|
||||
<template v-if="tabsColumns.length > 1">
|
||||
<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"
|
||||
@click="codeClickFunction('beforeSetData', beforeSetData)"
|
||||
@change="codeClickFunction('changeDataEvent', changeDataEvent)"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
|
||||
<BasicForm
|
||||
ref="myDataBaseFormRef"
|
||||
@register="registerForm"
|
||||
v-if="formModalVisible && tabsColumns.length < 1"
|
||||
@click="codeClickFunction('beforeSetData', beforeSetData)"
|
||||
@change="codeClickFunction('changeDataEvent', changeDataEvent)"
|
||||
/>
|
||||
<template v-for="(item, index) in cardLayout" :key="index">
|
||||
<a-row style="width: 100%">
|
||||
<a-col :span="item?.colProps?.span || 24" style="padding: 10px">
|
||||
<a-card
|
||||
:title="item.label"
|
||||
:class="
|
||||
item.shadow === 'always' ? 'card-always' : item.shadow === 'hover' ? 'card-hover' : ''
|
||||
"
|
||||
>
|
||||
<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" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template v-for="(item, index) in buttonLayout" :key="index">
|
||||
<a-row style="width: 100%">
|
||||
<a-col :span="item?.colProps?.span || 24" style="padding: 10px">
|
||||
<a-button
|
||||
:type="item.componentProps.type"
|
||||
:shape="item.componentProps.shape"
|
||||
:size="item.componentProps.size"
|
||||
@click="codeClickFunction('codeClick', item.componentProps.clickCode)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-button>
|
||||
</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" />
|
||||
<div class="show-form-modal" style="width: 100%">
|
||||
<div class="title">
|
||||
<div class="close-button"><ArrowLeftOutlined @click="closeModal" /></div>
|
||||
<div style="margin-right: 30px; font-size: 25px">{{ getTitle }}</div>
|
||||
</div>
|
||||
<div class="form-content">
|
||||
<BasicForm ref="myDataBaseFormRef" @register="registerForm" v-if="formModalVisible" />
|
||||
<a-table
|
||||
class="sub-table"
|
||||
:columns="subTableColumns"
|
||||
:data-source="subTableList"
|
||||
:pagination="false"
|
||||
:customRow="customRow"
|
||||
v-if="subTableId"
|
||||
:scroll="scrollValue"
|
||||
>
|
||||
<template #headerCell="{ column, record }">
|
||||
<template v-if="column.key === 'setting'">
|
||||
<PlusOutlined class="icon-button" @click="insertListItem()" />
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'setting'">
|
||||
<DeleteOutlined
|
||||
class="icon-button"
|
||||
@click="delListItem(column, record)"
|
||||
v-if="!isDetail"
|
||||
/>
|
||||
<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>
|
||||
<template v-else>
|
||||
<FormItem :data="column" :record="record" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- todo 创建/修改 人/时间 -->
|
||||
</BasicModal>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="footer-button" v-if="!isDetail">
|
||||
<a-button style="margin-right: 20px" @click="closeModal">取消</a-button>
|
||||
<a-button type="primary" @click="ModalSureClick">确认</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { unref, ref, reactive } from 'vue';
|
||||
import { FormSchema } from '@/components/Table';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { defineEmits, defineProps, ref, onMounted, unref, reactive, toRaw, h } from 'vue';
|
||||
import { ArrowLeftOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { FormSchema } from '@/components/Table';
|
||||
import { create, saveDraft } from '@/api/sys/WFProcess';
|
||||
import { saveFormsData } from '@/api/formrender/index';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { create, saveDraft } from '@/api/sys/WFProcess';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import FormItem from './FormItem/index.vue';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import FormItem from './ShowFormModal/FormItem/index.vue';
|
||||
import CallModalFormItem from './CallModalFormItem/index.vue';
|
||||
|
||||
// import FormRender from '@/views/demo/form-design/components/VFormCreate/components/FormRender.vue';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const { createMessage } = useMessage();
|
||||
const formModalVisible = ref(false);
|
||||
const isUpdate = ref(true);
|
||||
const isDetail = ref(true);
|
||||
const getTitle = ref();
|
||||
const primaryQuery = ref();
|
||||
const addQuery: any = ref([]);
|
||||
const formColumns: any = ref([]);
|
||||
const tabsColumns: any = ref([]);
|
||||
const myDataBaseFormRef = ref();
|
||||
const props = defineProps([
|
||||
'open',
|
||||
'showFormModalData',
|
||||
'mapgemoList',
|
||||
'formData',
|
||||
'MapboxComponent',
|
||||
'mapSetData',
|
||||
'haveMap',
|
||||
]);
|
||||
const emits = defineEmits(['closeShowFormModal', 'setSelectedSubTableDataId']);
|
||||
const subTableList = ref();
|
||||
const subTableId = ref(null);
|
||||
const isUpdate = ref(false);
|
||||
const isDetail = ref(false);
|
||||
const flowCode = ref('');
|
||||
const getTitle = ref('');
|
||||
const formColumns: FormSchema[] = [];
|
||||
const addQuery: any = ref([]);
|
||||
const formModalVisible = ref(false);
|
||||
const primaryQuery = ref();
|
||||
const userStore = useUserStore();
|
||||
const userInfo: any = userStore.getUserInfo;
|
||||
const formData = reactive({
|
||||
userId: userInfo.id,
|
||||
title: '',
|
||||
});
|
||||
const subTableId = ref(null);
|
||||
const subTableColumns: any = ref([]);
|
||||
const subTableData = ref([]);
|
||||
const subTableList: any = ref([]);
|
||||
const scrollValue = ref();
|
||||
const cardLayout = ref([]);
|
||||
const createOrModifyList = ref([]);
|
||||
// 按钮
|
||||
const buttonLayout = ref([]);
|
||||
// 脚本
|
||||
const beforeSetData = ref('');
|
||||
const afterValidateForm = ref('');
|
||||
const afterSaveEvent = ref('');
|
||||
const changeDataEvent = ref('');
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner((data: any) => {
|
||||
console.log('daaaaa', data);
|
||||
// 脚本
|
||||
beforeSetData.value = data?.beforeSetData;
|
||||
afterValidateForm.value = data?.afterValidateForm;
|
||||
afterSaveEvent.value = data?.afterSaveEvent;
|
||||
changeDataEvent.value = data?.changeDataEvent;
|
||||
const subTableColumns = ref([
|
||||
{
|
||||
dataIndex: 'setting',
|
||||
key: 'setting',
|
||||
fixed: 'left',
|
||||
width: 60,
|
||||
},
|
||||
]);
|
||||
const subTableData = ref([]);
|
||||
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
isDetail.value = !!data?.isDetail;
|
||||
const arr: FormSchema[] = [];
|
||||
data.tab.forEach((item) => {
|
||||
if (item.field == 'Tabs') {
|
||||
item.componentProps.options.forEach((val, index) => {
|
||||
val.children.forEach((opt) => {
|
||||
if (opt.rules !== undefined) {
|
||||
let myString = opt.rules[0].pattern;
|
||||
const lastCharacter = myString.charAt(myString.length - 1);
|
||||
if (lastCharacter === 'i' || lastCharacter === 's') {
|
||||
opt.rules[0].pattern = new RegExp(opt.rules[0].pattern.slice(1, -2), lastCharacter);
|
||||
} else {
|
||||
opt.rules[0].pattern = new RegExp(opt.rules[0].pattern.slice(1, -1));
|
||||
}
|
||||
}
|
||||
if (opt.component === 'Card') {
|
||||
cardLayout.value.push(opt);
|
||||
}
|
||||
if (opt.component === 'Button') {
|
||||
buttonLayout.value.push(opt);
|
||||
}
|
||||
if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(opt.type)) {
|
||||
createOrModifyList.value.push(opt);
|
||||
}
|
||||
subTableColumns.value = [
|
||||
{
|
||||
dataIndex: 'setting',
|
||||
key: 'setting',
|
||||
fixed: 'left',
|
||||
width: 60,
|
||||
},
|
||||
];
|
||||
|
||||
if (opt.type === 'subTable') {
|
||||
subTableId.value = opt.field;
|
||||
let tableData = [];
|
||||
opt.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;
|
||||
}
|
||||
if (opt.columns) {
|
||||
opt.columns.forEach((itemColumn) => {
|
||||
itemColumn.children.forEach((itemColumnChild) => {
|
||||
console.log('itemColumnChild', itemColumnChild);
|
||||
itemColumnChild.itemProps.hidden = true;
|
||||
if (index == 0) {
|
||||
itemColumnChild.itemProps.hidden = false;
|
||||
}
|
||||
arr.push(itemColumnChild);
|
||||
val.children.push(itemColumnChild);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
opt.itemProps.hidden = true;
|
||||
if (index == 0) {
|
||||
opt.itemProps.hidden = false;
|
||||
}
|
||||
arr.push(opt);
|
||||
formColumns.value = arr;
|
||||
});
|
||||
});
|
||||
tabsColumns.value = item.componentProps.options;
|
||||
console.log('tabsColumns', tabsColumns.value);
|
||||
console.log('formColumns', formColumns.value);
|
||||
} else {
|
||||
if (item.rules !== undefined) {
|
||||
let myString = item.rules[0].pattern;
|
||||
const lastCharacter = myString.charAt(myString.length - 1);
|
||||
if (lastCharacter === 'i' || lastCharacter === 's') {
|
||||
item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -2), lastCharacter);
|
||||
} else {
|
||||
item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -1));
|
||||
}
|
||||
}
|
||||
arr.push(item);
|
||||
formColumns.value = arr;
|
||||
if (item.component === 'Card') {
|
||||
cardLayout.value.push(item);
|
||||
}
|
||||
if (item.component === 'Button') {
|
||||
buttonLayout.value.push(item);
|
||||
}
|
||||
if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(item.type)) {
|
||||
createOrModifyList.value.push(item);
|
||||
}
|
||||
subTableColumns.value = [
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formColumns,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 24, md: 24 },
|
||||
});
|
||||
const customRow = (record) => {
|
||||
return {
|
||||
onClick: (event) => {
|
||||
if (!props.haveMap) return;
|
||||
let mapDataList = [
|
||||
{
|
||||
dataIndex: 'setting',
|
||||
key: 'setting',
|
||||
fixed: 'left',
|
||||
width: 60,
|
||||
columnName: 'mapgeom',
|
||||
value: record.MapGeom || null,
|
||||
},
|
||||
];
|
||||
if (unref(isDetail)) {
|
||||
props.MapboxComponent.handlerDraw(mapDataList, false);
|
||||
return;
|
||||
}
|
||||
emits('setSelectedSubTableDataId', record.key);
|
||||
if (record.isInsert) {
|
||||
props.mapSetData.isAllowAddPolygon &&
|
||||
props.MapboxComponent.handlerDraw(mapDataList, true);
|
||||
} else {
|
||||
props.MapboxComponent.handlerDraw(mapDataList, props.mapSetData.isAllowEditPolygon);
|
||||
}
|
||||
if (record.MapGeom.length > 0 && props.mapSetData.isEnablePostionJump) {
|
||||
let jumpDataString = record.MapGeom;
|
||||
let jumpDataList = jumpDataString.replace(/[A-Z|(|)]/g, '').split(' ');
|
||||
|
||||
if (item.type === 'subTable') {
|
||||
subTableId.value = item.field;
|
||||
let tableData = [];
|
||||
item.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,
|
||||
});
|
||||
if (jumpDataString.slice(0, 5) === 'POINT') {
|
||||
let jumpData =
|
||||
jumpDataList[0].length > 0
|
||||
? [jumpDataList[0], jumpDataList[1]]
|
||||
: [jumpDataList[1], jumpDataList[2]];
|
||||
props.MapboxComponent.handlerLocation(jumpData);
|
||||
} else {
|
||||
let jumpData =
|
||||
jumpDataList[0].length > 0
|
||||
? [jumpDataList[0], jumpDataList[1].split(',')[0]]
|
||||
: [jumpDataList[1], jumpDataList[2].split(',')[0]];
|
||||
props.MapboxComponent.handlerLocation(jumpData);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
const closeModal = () => {
|
||||
emits('closeShowFormModal', false);
|
||||
};
|
||||
function generateUniqueDigits(length: number): number[] {
|
||||
const digits = new Set<number>();
|
||||
while (digits.size < length) {
|
||||
const randomDigit = Math.floor(Math.random() * 20);
|
||||
digits.add(randomDigit);
|
||||
}
|
||||
return Array.from(digits);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const data = props.showFormModalData;
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
isDetail.value = !!data?.isDetail;
|
||||
data.tab.forEach((item) => {
|
||||
if (item.rules !== undefined) {
|
||||
let myString = item.rules[0].pattern;
|
||||
const lastCharacter = myString.charAt(myString.length - 1);
|
||||
if (lastCharacter === 'i' || lastCharacter === 's') {
|
||||
item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -2), lastCharacter);
|
||||
} else {
|
||||
item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -1));
|
||||
}
|
||||
}
|
||||
formColumns.push(item);
|
||||
if (item.type === 'subTable') {
|
||||
subTableId.value = item.field;
|
||||
let tableData = [];
|
||||
item.columns.forEach((itemColumn) => {
|
||||
itemColumn.children.forEach((itemColumnChild) => {
|
||||
tableData.push(itemColumnChild);
|
||||
subTableColumns.value.push({
|
||||
key: itemColumnChild.field,
|
||||
title: itemColumnChild.label,
|
||||
dataIndex: itemColumnChild.field,
|
||||
width: 120,
|
||||
...itemColumnChild,
|
||||
});
|
||||
});
|
||||
scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
|
||||
subTableData.value = tableData;
|
||||
}
|
||||
});
|
||||
scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
|
||||
subTableData.value = tableData;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -281,9 +186,11 @@
|
|||
getTitle.value = '新增';
|
||||
data.btnList.forEach((element) => {
|
||||
if (element.prop === 'Add' && element.isWFlow) {
|
||||
alert("Add");
|
||||
flowCode.value = element.wFlowCode;
|
||||
}
|
||||
});
|
||||
subTableList.value = toRaw(props.formData);
|
||||
}
|
||||
if (unref(isUpdate) && !unref(isDetail)) {
|
||||
getTitle.value = '编辑';
|
||||
|
|
@ -292,9 +199,11 @@
|
|||
flowCode.value = element.wFlowCode;
|
||||
}
|
||||
});
|
||||
subTableList.value = toRaw(props.formData);
|
||||
}
|
||||
if (!unref(isUpdate) && unref(isDetail)) {
|
||||
getTitle.value = '详情';
|
||||
subTableList.value = toRaw(props.formData);
|
||||
}
|
||||
formModalVisible.value = true;
|
||||
primaryQuery.value = data.query;
|
||||
|
|
@ -304,12 +213,8 @@
|
|||
...data.record,
|
||||
});
|
||||
}, 100);
|
||||
subTableList.value = data.recordChildren;
|
||||
} else {
|
||||
if (tabsColumns.value.length < 1) {
|
||||
resetFields();
|
||||
}
|
||||
subTableList.value = [];
|
||||
myDataBaseFormRef.value && resetFields();
|
||||
}
|
||||
addQuery.value = [];
|
||||
if (data.addParams) {
|
||||
|
|
@ -320,96 +225,40 @@
|
|||
value: generateUniqueDigits(20).join(''),
|
||||
});
|
||||
});
|
||||
console.log('addQuery', addQuery);
|
||||
}
|
||||
});
|
||||
|
||||
function tabsChange(e) {
|
||||
console.log('eee', e);
|
||||
console.log('tabsColumns', tabsColumns);
|
||||
const columns: FormSchema[] = [];
|
||||
tabsColumns.value.forEach((item) => {
|
||||
item.children.forEach((val) => {
|
||||
val.itemProps.hidden = true;
|
||||
});
|
||||
});
|
||||
tabsColumns.value[e].children.forEach((item) => {
|
||||
item.itemProps.hidden = false;
|
||||
});
|
||||
tabsColumns.value.forEach((item) => {
|
||||
item.children.forEach((val) => {
|
||||
columns.push(val);
|
||||
});
|
||||
});
|
||||
console.log('columns', columns);
|
||||
console.log('formColumns', formColumns);
|
||||
const obj = getFieldsValue();
|
||||
console.log('values', getFieldsValue());
|
||||
// resetFields();
|
||||
setTimeout(() => {
|
||||
updateSchema(columns);
|
||||
resetFields();
|
||||
}, 100);
|
||||
setTimeout(() => {
|
||||
setFieldsValue(obj);
|
||||
}, 500);
|
||||
}
|
||||
function generateUniqueDigits(length: number): number[] {
|
||||
const digits = new Set<number>();
|
||||
while (digits.size < length) {
|
||||
const randomDigit = Math.floor(Math.random() * 20);
|
||||
digits.add(randomDigit);
|
||||
}
|
||||
return Array.from(digits);
|
||||
}
|
||||
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);
|
||||
};
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, getFieldsValue }] =
|
||||
useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formColumns,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 24, md: 24 },
|
||||
});
|
||||
//表单填写数据
|
||||
async function ModalSureClick() {
|
||||
try {
|
||||
const values = await validate();
|
||||
// 添加校验后脚本
|
||||
codeClickFunction('afterValidateForm', afterValidateForm.value);
|
||||
console.log('values', values);
|
||||
let query = values;
|
||||
let mapGeomList = toRaw(props.mapgemoList).map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
let saveSubTableList = [];
|
||||
subTableList.value.forEach((item) => {
|
||||
let emptyObj = {};
|
||||
for (const key in item) {
|
||||
if (key.indexOf('guid') !== -1 && item[key] == '') {
|
||||
let guid = generateUniqueDigits(20).join('');
|
||||
item[key] = guid;
|
||||
emptyObj[key] = guid;
|
||||
}
|
||||
if (key === 'key') continue;
|
||||
if (key === 'isInsert') continue;
|
||||
emptyObj[key] = item[key];
|
||||
}
|
||||
saveSubTableList.push(emptyObj);
|
||||
});
|
||||
query[subTableId.value] = JSON.stringify(saveSubTableList);
|
||||
query.MapGeom = mapGeomList.join(';');
|
||||
let params: any = {
|
||||
schemeId: primaryQuery.value.id,
|
||||
isUpdate: isUpdate.value,
|
||||
pkey: primaryQuery.value.key,
|
||||
};
|
||||
console.log('params', params);
|
||||
if (unref(isUpdate)) {
|
||||
params.pkeyValue = primaryQuery.value.keyValue;
|
||||
} else {
|
||||
|
|
@ -423,12 +272,9 @@
|
|||
});
|
||||
}
|
||||
params.data = JSON.stringify(query);
|
||||
console.log('query222', query);
|
||||
console.log('params222', params);
|
||||
const data = await saveFormsData(params);
|
||||
if (data) {
|
||||
setModalProps({ confirmLoading: true });
|
||||
emit('success');
|
||||
emits('success');
|
||||
if (flowCode.value == '') {
|
||||
closeModal();
|
||||
} else {
|
||||
|
|
@ -438,11 +284,8 @@
|
|||
} else {
|
||||
return createMessage.error('操作失败');
|
||||
}
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
// 添加保存后脚本
|
||||
codeClickFunction('afterSaveEvent', afterSaveEvent.value);
|
||||
closeFunc();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
async function handleCreateFlow(processId) {
|
||||
|
|
@ -466,39 +309,80 @@
|
|||
return createMessage.error('保存草稿失败');
|
||||
}
|
||||
}
|
||||
// 脚本执行方法
|
||||
async function codeClickFunction(code, codeClick) {
|
||||
try {
|
||||
// 动态导入utils模块
|
||||
const { utils } = await import('./utils');
|
||||
eval(codeClick);
|
||||
} catch (e) {
|
||||
switch (code) {
|
||||
case 'codeClick':
|
||||
createMessage.success('【按钮组件脚本】错误：' + e);
|
||||
break;
|
||||
case 'beforeSetData':
|
||||
createMessage.success('【添加赋值前脚本】错误：' + e);
|
||||
break;
|
||||
case 'afterValidateForm':
|
||||
createMessage.success('【添加校验后脚本】错误：' + e);
|
||||
break;
|
||||
case 'afterSaveEvent':
|
||||
createMessage.success('【添加保存后脚本】错误：' + e);
|
||||
break;
|
||||
case 'changeDataEvent':
|
||||
createMessage.success('【添加数据改变脚本】错误：' + e);
|
||||
break;
|
||||
default:
|
||||
createMessage.success('【未知脚本】错误：' + e);
|
||||
break;
|
||||
const insertListItem = () => {
|
||||
let keyList = subTableData.value.map((item) => {
|
||||
return item.field;
|
||||
});
|
||||
let emptyItem = { key: uuidv4(), isInsert: true };
|
||||
keyList.forEach((item) => {
|
||||
emptyItem[item] = '';
|
||||
});
|
||||
subTableList.value.push(emptyItem);
|
||||
};
|
||||
const delListItem = (column, record) => {
|
||||
subTableList.value = subTableList.value.filter((item) => item.key != record.key);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.show-form-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
z-index: 4;
|
||||
padding: 30px;
|
||||
.title {
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
.close-button {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.close-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.form-content {
|
||||
padding: 25px 25px 0px 25px;
|
||||
height: calc(100% - 97px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
overflow: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.footer-button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.show-form-modal {
|
||||
.form-content {
|
||||
.sub-table {
|
||||
.ant-table-tbody {
|
||||
.ant-table-cell {
|
||||
.anticon-delete {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.ant-table-cell-row-hover {
|
||||
.anticon-delete {
|
||||
opacity: 1;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const closeFunc = () => {
|
||||
buttonLayout.value = [];
|
||||
cardLayout.value = [];
|
||||
createOrModifyList.value = [];
|
||||
return true;
|
||||
};
|
||||
</script>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
class="table-container form-call-table"
|
||||
:style="`${haveMap ? `width:${100 - mapSetData.width}%;` : 'width:100%'}`"
|
||||
>
|
||||
<BasicTable @register="registerTable" @row-click="handRowClick">
|
||||
<BasicTable @register="registerTable" @row-click="handRowClick" :searchInfo="searchInfo">
|
||||
<template #toolbar>
|
||||
<div v-for="(item, index) in btnArr" :key="index">
|
||||
<a-button :type="item.class" @click="handleClickForm(item.prop)">{{
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
:style="`width:${mapSetData.width}%;height:calc(100vh - 78px) `"
|
||||
>
|
||||
<MapboxMap
|
||||
:mapConfig="mapSetData"
|
||||
|
||||
:layers="layers"
|
||||
:location="location"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
|
|
@ -98,7 +98,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'
|
||||
import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
|
||||
|
||||
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
||||
|
||||
|
|
@ -118,17 +118,17 @@
|
|||
const mapgemoList = ref([]);
|
||||
const MapboxComponent = ref();
|
||||
const openShowFormModal = ref(false);
|
||||
const haveMap = ref(false);
|
||||
const haveMap = ref(true);
|
||||
const showFormModalData = ref({});
|
||||
const treeTitle: any = ref('树形');
|
||||
const treeVisible: any = ref(false);
|
||||
const paramsId: any = ref();
|
||||
const designData: any = ref();
|
||||
const searchValue: any = ref();
|
||||
const searchInfo: any = ref({});
|
||||
const addParamsArr: any = ref([]);
|
||||
const paramsCode = route.query.code;
|
||||
const callColumns: BasicColumn[] = [];
|
||||
const searchFormSchema: FormSchema[] = ref([]);
|
||||
const searchFormSchema: FormSchema[] = [];
|
||||
const btnList: any = ref([]);
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
|
|
@ -137,15 +137,52 @@
|
|||
const flowCode = ref(''); //流程code
|
||||
const flowFormData = ref({}); //编辑时表单的数据
|
||||
const isUpdate = ref(false); //是否是编辑
|
||||
const infoUseSubTableData = ref()
|
||||
const infoUseMainTableData = ref({})
|
||||
const infoUseSubTableData = ref();
|
||||
const infoUseMainTableData = ref({});
|
||||
// 展示的图层列表
|
||||
const layers = reactive();
|
||||
const layers = reactive([
|
||||
{
|
||||
id: 1,
|
||||
name: '沂水县道路中心线1',
|
||||
checked: false,
|
||||
layer: {
|
||||
id: 'roadnetLine1',
|
||||
type: 'line',
|
||||
source: {
|
||||
type: 'vector',
|
||||
tiles: [
|
||||
'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7',
|
||||
],
|
||||
minzoom: 1,
|
||||
maxzoom: 20,
|
||||
},
|
||||
'source-layer': 'yishuixian',
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': [
|
||||
'case',
|
||||
['==', ['get', 'handle_status_id'], 0],
|
||||
'#E6A23C',
|
||||
['==', ['get', 'handle_status_id'], 1],
|
||||
'#409EFF',
|
||||
['==', ['get', 'handle_status_id'], 2],
|
||||
'#67C23A',
|
||||
// 默认
|
||||
'#67C23A',
|
||||
],
|
||||
'line-width': 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
// 图层定位数据
|
||||
const location = reactive([118.556717, 35.80391]);
|
||||
if (paramsCode == '数据统计') {
|
||||
searchFormSchema.value = [
|
||||
searchFormSchema = [
|
||||
{
|
||||
field: 'typeid',
|
||||
component: 'ApiSelect',
|
||||
|
|
@ -194,7 +231,7 @@
|
|||
},
|
||||
];
|
||||
} else if (paramsCode == '数据审核') {
|
||||
searchFormSchema.value = [
|
||||
searchFormSchema = [
|
||||
{
|
||||
field: 'typeid',
|
||||
component: 'ApiSelect',
|
||||
|
|
@ -262,15 +299,20 @@
|
|||
showTableSetting: true,
|
||||
bordered: true,
|
||||
beforeFetch: (data) => {
|
||||
console.log('item.key', data)
|
||||
// 接口请求前 参数处理
|
||||
const querys = JSON.parse(JSON.stringify(data));
|
||||
console.log('1111', querys)
|
||||
delete querys.page;
|
||||
delete querys.limit;
|
||||
console.log('querys', querys)
|
||||
var temp = {
|
||||
id: paramsId.value,
|
||||
paginationInputDto: {
|
||||
page: data.page,
|
||||
rows: data.limit,
|
||||
keyWord: data.key,
|
||||
},
|
||||
queryJson: searchValue.value,
|
||||
queryJson: JSON.stringify(querys),
|
||||
};
|
||||
return temp;
|
||||
},
|
||||
|
|
@ -442,8 +484,6 @@
|
|||
if (rows.length == 0) {
|
||||
return createMessage.warn('请选择一条数据进行编辑');
|
||||
}
|
||||
|
||||
console.log("rowsrows",rows);
|
||||
btnList.value.forEach((element) => {
|
||||
if (element.prop === 'Edit' && element.isWFlow) {
|
||||
flowCode.value = element.wFlowCode;
|
||||
|
|
@ -469,7 +509,7 @@
|
|||
showFormModalData.value = toProps;
|
||||
openShowFormModal.value = true;
|
||||
console.log("mapgemoList",mapgemoList);
|
||||
console.log("mapSetData",mapSetData);
|
||||
console.log("mapgemoList2",mapSetData);
|
||||
MapboxComponent.value.handlerDraw(
|
||||
mapgemoList.value,
|
||||
mapSetData.value.isAllowEditPolygon,
|
||||
|
|
@ -524,7 +564,7 @@
|
|||
if (haveMap.value) {
|
||||
showFormModalData.value = toProps;
|
||||
openShowFormModal.value = true;
|
||||
MapboxComponent.value.handlerDraw(mapgemoList.value, false);
|
||||
// MapboxComponent.value.handlerDraw(mapgemoList.value, false);
|
||||
} else {
|
||||
openModal(true, toProps);
|
||||
}
|
||||
|
|
@ -541,7 +581,7 @@
|
|||
const rel = selected.node.dataRef;
|
||||
const obj: any = {};
|
||||
obj[rel.key] = rel.value;
|
||||
searchValue.value = JSON.stringify(obj);
|
||||
searchInfo.value = JSON.stringify(obj);
|
||||
reload();
|
||||
}
|
||||
|
||||
|
|
@ -554,8 +594,8 @@
|
|||
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) {
|
||||
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
|
||||
const arr: any = [];
|
||||
formObj.formInfo.tabList.forEach((item, index) => {
|
||||
arr.push({
|
||||
|
|
@ -598,7 +638,7 @@
|
|||
layerFields: {},
|
||||
};
|
||||
}
|
||||
console.log('columnObj', columnObj)
|
||||
console.log('columnObj', columnObj);
|
||||
paramsId.value = res.formScheme.id;
|
||||
btnList.value = columnObj.table.btns;
|
||||
if (columnObj.table.columns) {
|
||||
|
|
@ -609,6 +649,16 @@
|
|||
});
|
||||
});
|
||||
}
|
||||
if (columnObj.table.querys) {
|
||||
columnObj.table.querys.forEach((item) => {
|
||||
searchFormSchema.push({
|
||||
field: item.key,
|
||||
component: item.type || 'Input',
|
||||
label: item.label,
|
||||
colProps: { span: 6 },
|
||||
});
|
||||
});
|
||||
}
|
||||
callColumns.forEach((item) => {
|
||||
formObj.formInfo.schemas.forEach((val) => {
|
||||
if (item.dataIndex == val.field && val.componentProps.options) {
|
||||
|
|
@ -678,8 +728,8 @@
|
|||
key: designData.value.primaryKey,
|
||||
keyValue,
|
||||
};
|
||||
getFormData(params).then((res) => {
|
||||
console.log("res111",res);
|
||||
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) => {
|
||||
|
|
@ -689,20 +739,16 @@
|
|||
MapGeom: item.mapgeom,
|
||||
};
|
||||
});
|
||||
|
||||
formData.value = [...subTableData];
|
||||
|
||||
infoUseSubTableData.value = res[childTableName].map((item) => {
|
||||
return {
|
||||
...item,
|
||||
key: uuidv4(),
|
||||
};
|
||||
});
|
||||
|
||||
res[mainTableName].forEach(item => {
|
||||
infoUseMainTableData.value = {...infoUseMainTableData.value, ...item}
|
||||
})
|
||||
mapgemoList.value = formData.value
|
||||
res[mainTableName].forEach((item) => {
|
||||
infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err);
|
||||
|
|
@ -717,24 +763,24 @@
|
|||
item.MapGeom = geom[0].value;
|
||||
}
|
||||
});
|
||||
mapgemoList.value = [...geom];
|
||||
// mapgemoList.value = [...geom];
|
||||
};
|
||||
const mapOnLoad = (map) => {
|
||||
// const test_url =
|
||||
// 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&field="gid","objectid",';
|
||||
// map.addSource('street-border-source', {
|
||||
// type: 'vector',
|
||||
// tiles: [test_url],
|
||||
// });
|
||||
// map.addLayer({
|
||||
// id: 'street-border',
|
||||
// type: 'line',
|
||||
// source: 'street-border-source',
|
||||
// 'source-layer': 'yishuixian',
|
||||
// layout: {
|
||||
// visibility: 'visible',
|
||||
// },
|
||||
// });
|
||||
const test_url =
|
||||
'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&field="gid","objectid",';
|
||||
map.addSource('street-border-source', {
|
||||
type: 'vector',
|
||||
tiles: [test_url],
|
||||
});
|
||||
map.addLayer({
|
||||
id: 'street-border',
|
||||
type: 'line',
|
||||
source: 'street-border-source',
|
||||
'source-layer': 'yishuixian',
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
});
|
||||
};
|
||||
const setSelectedSubTableDataId = (value) => {
|
||||
selectedSubTableDataId.value = value;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
|
||||
// utils.ts
|
||||
let c_formModalVisible: Boolean = false;
|
||||
|
|
@ -20,6 +21,8 @@ let c_scrollValue = '';
|
|||
let c_cardLayout: any = [];
|
||||
let c_createOrModifyList: any = [];
|
||||
let c_buttonLayout: any = [];
|
||||
let c_record: any = {};
|
||||
let c_cardValues: any = {};
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const userStore = useUserStore();
|
||||
|
|
@ -28,8 +31,21 @@ const userInfo: any = userStore.getUserInfo;
|
|||
// 通过field获取组件
|
||||
function getComponentByFiled(data: string): any {
|
||||
return c_formColumns.find(item => item.field === data);
|
||||
};
|
||||
|
||||
}
|
||||
function getChildComponentByFiled(data: string): any {
|
||||
return c_subTableData.find(item => item.field === data);
|
||||
}
|
||||
function setChildComponentByFiled(childComponet: any, field: string): any {
|
||||
c_formColumns.forEach((item, index1) => {
|
||||
if (item.columns) {
|
||||
item.columns[0].children.forEach((i, index2) => {
|
||||
if (i.field == field) {
|
||||
c_formColumns[index1].columns[0].children[index2] = childComponet;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
export const utils = {
|
||||
setCallModalData: function setCallModalData(data: any) {
|
||||
c_formModalVisible = data.formModalVisible.value;
|
||||
|
|
@ -50,6 +66,8 @@ export const utils = {
|
|||
c_cardLayout = data.cardLayout.value;
|
||||
c_createOrModifyList = data.createOrModifyList.value;
|
||||
c_buttonLayout = data.buttonLayout.value;
|
||||
c_record = data.record;
|
||||
c_cardValues = data.cardValues.value;
|
||||
},
|
||||
formModalVisible: (): Boolean => {
|
||||
return c_formModalVisible;
|
||||
|
|
@ -105,13 +123,35 @@ export const utils = {
|
|||
buttonLayout: (): any => {
|
||||
return c_buttonLayout;
|
||||
},
|
||||
record: (): any => {
|
||||
return c_record;
|
||||
},
|
||||
cardValues: (): any => {
|
||||
return c_cardValues;
|
||||
},
|
||||
// 数据-----------------------------
|
||||
// 获取数据
|
||||
|
||||
// 获取主表数据
|
||||
getValue: (field: any): any => {
|
||||
return c_record[field];
|
||||
},
|
||||
// 设置主表数据
|
||||
setValue: (field: any, value: any): any => {
|
||||
c_record[field] = value;
|
||||
return c_record;
|
||||
},
|
||||
// 获取子表数据
|
||||
getChildValue: (field: any): any => {
|
||||
return c_record[field];
|
||||
},
|
||||
// 设置子表数据
|
||||
setChildValue: (field: any, value: any): any => {
|
||||
c_record[field] = value;
|
||||
return c_record;
|
||||
},
|
||||
// 组件-----------------------------
|
||||
// 获取组件
|
||||
getComponent: (field: any): any => {
|
||||
return getComponentByFiled(field);
|
||||
return getComponentByFiled(field) || getChildComponentByFiled(field);
|
||||
},
|
||||
// 隐藏与否
|
||||
setHide: (field: any, hideStatus: Boolean): any => {
|
||||
|
|
@ -123,6 +163,12 @@ export const utils = {
|
|||
c_formColumns[index] = componet;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const childComponet: any = getChildComponentByFiled(field);
|
||||
if (childComponet) {
|
||||
childComponet.ifShow = hideStatus;
|
||||
setChildComponentByFiled(childComponet, field);
|
||||
}
|
||||
}
|
||||
return c_formColumns;
|
||||
},
|
||||
|
|
@ -136,6 +182,12 @@ export const utils = {
|
|||
c_formColumns[index] = componet;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const childComponet: any = getChildComponentByFiled(field);
|
||||
if (childComponet) {
|
||||
childComponet.dynamicDisabled = disabledStatus;
|
||||
setChildComponentByFiled(childComponet, field);
|
||||
}
|
||||
}
|
||||
return c_formColumns;
|
||||
},
|
||||
|
|
@ -149,6 +201,12 @@ export const utils = {
|
|||
c_formColumns[index] = componet;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const childComponet: any = getChildComponentByFiled(field);
|
||||
if (childComponet) {
|
||||
childComponet.required = requiredStatus;
|
||||
setChildComponentByFiled(childComponet, field);
|
||||
}
|
||||
}
|
||||
return c_formColumns;
|
||||
},
|
||||
|
|
@ -169,4 +227,26 @@ export const utils = {
|
|||
loginUser: () => {
|
||||
return { account: userInfo.account, name: userInfo.name };
|
||||
},
|
||||
// 回调方法-----------------------------
|
||||
// get请求
|
||||
httpGet: (api: string, params: any) => {
|
||||
return defHttp.get<any>({
|
||||
url: api,
|
||||
params,
|
||||
});
|
||||
},
|
||||
// post请求
|
||||
httpPost: (api: string, params: any) => {
|
||||
return defHttp.post<any>({
|
||||
url: api,
|
||||
params,
|
||||
});
|
||||
},
|
||||
// put请求
|
||||
httpPut: (api: string, params: any) => {
|
||||
return defHttp.put<any>({
|
||||
url: api,
|
||||
params,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@
|
|||
const arr: any = [];
|
||||
formScheme.value.formInfo.tabList.forEach((item, index) => {
|
||||
item.schemas.forEach((val) => {
|
||||
if (val.type == 'subTable' && val.columns) {
|
||||
if (val.columns) {
|
||||
console.log('val', val);
|
||||
val.columns.forEach((col) => {
|
||||
col.children.forEach((chil) => {
|
||||
|
|
@ -235,9 +235,21 @@
|
|||
formScheme.value.formInfo.schemas = arr;
|
||||
}
|
||||
if (formScheme.value.formInfo.tabList && formScheme.value.formInfo.tabList.length == 1) {
|
||||
formScheme.value.formInfo.schemas = formScheme.value.formInfo.tabList[0].schemas;
|
||||
const arr: any = [];
|
||||
formScheme.value.formInfo.tabList[0].schemas.forEach((item) => {
|
||||
if (item.columns) {
|
||||
item.columns.forEach((col) => {
|
||||
col.children.forEach((chil) => {
|
||||
arr.push(chil);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
formScheme.value.formInfo.schemas = arr;
|
||||
}
|
||||
delete formScheme.value.formInfo.tabList;
|
||||
// delete formScheme.value.formInfo.tabList;
|
||||
formScheme.value.formInfo.schemas.forEach((tab: any) => {
|
||||
if (!notInColumns.includes(tab.component)) {
|
||||
columns.push(tab);
|
||||
|
|
@ -271,7 +283,7 @@
|
|||
!['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
|
||||
)
|
||||
.map((t) => {
|
||||
return { key: t.field, label: t.label };
|
||||
return { key: t.field, label: t.label, type: t.component };
|
||||
});
|
||||
|
||||
// 常用按钮-树
|
||||
|
|
|
|||
|
|
@ -117,31 +117,61 @@
|
|||
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})
|
||||
let result = [];
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item) => {
|
||||
if (item.component === 'Tabs') {
|
||||
item.componentProps.options = changeCardStructure(item.componentProps.options);
|
||||
} else if (item.component === 'CardGroup') {
|
||||
item.componentProps.options = changeCardStructure(item.componentProps.options);
|
||||
item.componentProps.options.forEach((childItem) => {
|
||||
if (childItem.pfield) {
|
||||
result.push(childItem);
|
||||
} else {
|
||||
result.push({ ...childItem, ptype: 'card', pfield: item.field });
|
||||
}
|
||||
});
|
||||
item.componentProps.options = [];
|
||||
} else if (item.children && !item.field) {
|
||||
item.children = changeCardStructure(item.children);
|
||||
} else if (item.children && item.field.indexOf('use_card') === -1) {
|
||||
item.children = changeCardStructure(item.children);
|
||||
item.children = [];
|
||||
} else {
|
||||
if (['Grid', 'Card'].includes(item.component)) {
|
||||
item.columns[0].children = changeCardStructure(item.columns[0].children);
|
||||
if (
|
||||
(item.component === 'Card' || item.component === 'Grid') &&
|
||||
item.columns[0].children
|
||||
) {
|
||||
item.columns[0].children.forEach((childItem) => {
|
||||
if (childItem.pfield) {
|
||||
result.push(childItem);
|
||||
} else {
|
||||
result.push({ ...childItem, ptype: 'card', pfield: item.field });
|
||||
}
|
||||
});
|
||||
item.columns[0].children = [];
|
||||
}
|
||||
} else if (item.field && item.field.indexOf('use_card') !== -1) {
|
||||
item.children = changeCardStructure(item.children);
|
||||
item.children.forEach((childItem) => {
|
||||
if (childItem.pfield) {
|
||||
result.push(childItem);
|
||||
} else {
|
||||
result.push({ ...childItem, ptype: 'card', pfield: item.field });
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
item.children = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
result.push(item)
|
||||
})
|
||||
return result
|
||||
}
|
||||
result.push(item);
|
||||
});
|
||||
return result;
|
||||
}else{
|
||||
return data
|
||||
}
|
||||
};
|
||||
async function designSendGrandson(value) {
|
||||
let designTab = JSON.parse(value);
|
||||
let schems = saveFormDatas.value.scheme.scheme
|
||||
|
|
@ -177,9 +207,19 @@
|
|||
if (item.type == 'subTable') {
|
||||
item.columns = changeCloums(item.columns, tableData);
|
||||
}
|
||||
tabArr.push(item.componentProps.fieldName);
|
||||
if (!item.componentProps.fieldName) {
|
||||
tabLabelArr.push(item.label);
|
||||
if (
|
||||
item.component != 'CardGroup' &&
|
||||
item.component != 'Grid' &&
|
||||
item.component != 'MapGeom' &&
|
||||
item.component != 'Divider' &&
|
||||
item.component != 'Slider' &&
|
||||
item.component != 'Card' &&
|
||||
item.component != 'Location'
|
||||
) {
|
||||
tabArr.push(item.componentProps.fieldName);
|
||||
if (!item.componentProps.fieldName) {
|
||||
tabLabelArr.push(item.label);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
item.componentProps.options.forEach((val) => {
|
||||
|
|
@ -201,16 +241,26 @@
|
|||
if (list.type == 'subTable') {
|
||||
list.columns = changeCloums(list.columns, tableData);
|
||||
}
|
||||
tabArr.push(list.componentProps.fieldName);
|
||||
if (!list.componentProps.fieldName) {
|
||||
tabLabelArr.push(list.label);
|
||||
if (
|
||||
list.component != 'CardGroup' &&
|
||||
list.component != 'Grid' &&
|
||||
list.component != 'MapGeom' &&
|
||||
list.component != 'Divider' &&
|
||||
list.component != 'Slider' &&
|
||||
list.component != 'Card' &&
|
||||
list.component != 'Location'
|
||||
) {
|
||||
tabArr.push(list.componentProps.fieldName);
|
||||
if (!list.componentProps.fieldName) {
|
||||
tabLabelArr.push(list.label);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
// 将Card的孩子改成和Card同级别
|
||||
designTab.schemas = changeCardStructure(designTab.schemas)
|
||||
designTab.schemas = changeCardStructure(designTab.schemas);
|
||||
let tabList: any = [];
|
||||
if (designTab.schemas.length > 1) {
|
||||
tabList.push({
|
||||
|
|
@ -428,8 +478,8 @@
|
|||
} else {
|
||||
//编辑
|
||||
let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
|
||||
// 将Card同级嵌套起来
|
||||
schems.formInfo.tabList = cardNestStructure(schems.formInfo.tabList)
|
||||
// 将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;
|
||||
|
|
@ -445,33 +495,45 @@
|
|||
}
|
||||
|
||||
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]
|
||||
let childList = {};
|
||||
let result = [];
|
||||
data.forEach((item) => {
|
||||
if (item.schemas) {
|
||||
item.schemas = cardNestStructure(item.schemas);
|
||||
result.push(item);
|
||||
} else if (item.ptype) {
|
||||
if (Object.keys(item).includes('children')) {
|
||||
item.children = childList[item.field] || [];
|
||||
}
|
||||
}else if(item.component === 'Card'){
|
||||
item.columns[0].children = childList[item.field]
|
||||
result.push(item)
|
||||
}else{
|
||||
result.push(item)
|
||||
if (item.component === 'CardGroup' && Object.keys(item).includes('componentProps')) {
|
||||
item.componentProps.options = childList[item.field] || [];
|
||||
}
|
||||
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 === 'CardGroup') {
|
||||
item.componentProps.options = childList[item.field] || [];
|
||||
result.push(item);
|
||||
} else if (item.component === 'Card' || item.component === 'Grid') {
|
||||
item.columns[0].children = childList[item.field] || [];
|
||||
result.push(item);
|
||||
} else if (item.field.indexOf('use_card') !== -1) {
|
||||
item.children = childList[item.field] || [];
|
||||
result.push(item);
|
||||
} else {
|
||||
result.push(item);
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
});
|
||||
return result;
|
||||
};
|
||||
// 自动建表返回后，保存数据
|
||||
function automaticFormDataBack(data) {
|
||||
if (isStageClick.value && stepsCurrent.value === 0) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ export const cardNestStructure = (data) => {
|
|||
item.schemas = cardNestStructure(item.schemas)
|
||||
result.push(item)
|
||||
}else if(item.ptype){
|
||||
if(Object.keys(item).includes('children')){
|
||||
item.children = childList[item.field] || []
|
||||
}
|
||||
if(item.component === 'CardGroup' && Object.keys(item).includes('componentProps')){
|
||||
item.componentProps.options = childList[item.field] || []
|
||||
}
|
||||
let pushItem = {}
|
||||
Object.keys(item).forEach(key => {
|
||||
if(key !== 'ptype' && key !== 'pfield'){
|
||||
|
|
@ -17,8 +23,15 @@ export const cardNestStructure = (data) => {
|
|||
}else{
|
||||
childList[item.pfield] = [pushItem]
|
||||
}
|
||||
|
||||
}else if(item.component === 'CardGroup'){
|
||||
item.componentProps.options = childList[item.field] || []
|
||||
result.push(item)
|
||||
}else if(item.component === 'Card'){
|
||||
item.columns[0].children = childList[item.field]
|
||||
item.columns[0].children = childList[item.field] || []
|
||||
result.push(item)
|
||||
}else if(item.field && item.field.indexOf('use_card') !== -1){
|
||||
item.children = childList[item.field] || []
|
||||
result.push(item)
|
||||
}else{
|
||||
result.push(item)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,34 @@
|
|||
import { BasicColumn } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
// 图形化建表table
|
||||
export const graphicaltableColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '字段名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
title: '表名',
|
||||
dataIndex: 'tableName',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '行数据',
|
||||
dataIndex: 'columnJson',
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'createUser',
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
// 图形化建表-搜索
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'keyword',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,38 +1,31 @@
|
|||
<template>
|
||||
<div class="box-container">
|
||||
<div class="flex mb-3">
|
||||
<div class="tab-label"><span class="red">*</span>表名：</div>
|
||||
<a-input v-model:value="tableName" placeholder="请输入表名" />
|
||||
</div>
|
||||
<BasicTable class="w-3/4 xl:w-5/5" @register="registerTable">
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<BasicTable
|
||||
class="w-4/4 xl:w-5/5"
|
||||
@register="registerTable"
|
||||
@fetch-success="onFetchSuccess"
|
||||
:searchInfo="searchInfo"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleAdd"> 新增 </a-button>
|
||||
<a-button type="success" @click="handleSubmit"> 保存 </a-button>
|
||||
<a-button type="primary" @click="handleAdd">新增</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-input v-model:value="record.name" placeholder="请输入字段名" />
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
ref="select"
|
||||
placeholder="请选择"
|
||||
v-model:value="record.type"
|
||||
:options="codesTypeArr"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'length'">
|
||||
<a-input v-model:value="record.length" placeholder="请输入长度" />
|
||||
{{ record.type ? '空间类型' : '非空间类型' }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
label: '查看',
|
||||
onClick: () => {
|
||||
handleDelete(record);
|
||||
handleView(record);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: () => {
|
||||
handleEdit(record);
|
||||
},
|
||||
},
|
||||
]"
|
||||
|
|
@ -40,95 +33,86 @@
|
|||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<Modal @register="registerModal" @submit="submit" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns } from './index.data';
|
||||
import { createPicTable } from '@/api/database/index';
|
||||
import { useModal } from '@/components/Modal';
|
||||
// 子组件
|
||||
import Modal from './modal/index.vue';
|
||||
// ts
|
||||
import { searchFormSchema, graphicaltableColumns } from './index.data';
|
||||
// api
|
||||
import { loadTableRecordInfo } from '@/api/database/index';
|
||||
|
||||
const tableName: any = ref('');
|
||||
const codesTypeArr: any = ref([
|
||||
{ label: 'varchar', value: 'varchar' },
|
||||
{ label: 'int', value: 'int' },
|
||||
{ label: 'date', value: 'date' },
|
||||
]);
|
||||
const [registerTable, { reload, setTableData, getDataSource }] = useTable({
|
||||
rowKey: '',
|
||||
columns,
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否是详情
|
||||
const isDetail = ref(false);
|
||||
|
||||
// 窗口
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
// 表格
|
||||
const searchInfo = reactive<Recordable>({});
|
||||
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
|
||||
api: loadTableRecordInfo,
|
||||
columns: graphicaltableColumns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
// 序号列
|
||||
showIndexColumn: true,
|
||||
striped: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
actionColumn: {
|
||||
width: 200,
|
||||
width: 180,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
function handleAdd() {
|
||||
let viesObj: any = getDataSource() || [];
|
||||
viesObj.push({ name: '', type: '', length: 255, id: new Date().getTime() });
|
||||
setTableData(viesObj);
|
||||
reload();
|
||||
}
|
||||
function handleDelete(record: Recordable) {
|
||||
let arr = getDataSource();
|
||||
let newArr: any = [];
|
||||
arr.forEach((item) => {
|
||||
if (item.id !== record.id) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
setTableData(newArr);
|
||||
// 新增-打开窗口
|
||||
function handleAdd() {
|
||||
isUpdate.value = false;
|
||||
isDetail.value = false;
|
||||
openModal(true, {
|
||||
isUpdate,
|
||||
isDetail,
|
||||
});
|
||||
}
|
||||
// 查看-打开窗口
|
||||
function handleView(record) {
|
||||
isUpdate.value = true;
|
||||
isDetail.value = true;
|
||||
openModal(true, {
|
||||
isUpdate,
|
||||
isDetail,
|
||||
record,
|
||||
});
|
||||
}
|
||||
// 编辑-打开窗口
|
||||
function handleEdit(record) {
|
||||
isUpdate.value = true;
|
||||
isDetail.value = false;
|
||||
openModal(true, {
|
||||
isUpdate,
|
||||
isDetail,
|
||||
record,
|
||||
});
|
||||
}
|
||||
|
||||
// 新增、编辑、删除-提交后刷新
|
||||
function submit() {
|
||||
clearSelectedRowKeys();
|
||||
reload();
|
||||
}
|
||||
function handleSubmit() {
|
||||
let arr = getDataSource();
|
||||
console.log('record', arr);
|
||||
let newArr: any = [];
|
||||
arr.forEach((item) => {
|
||||
newArr.push({
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
});
|
||||
});
|
||||
const param: any = {
|
||||
tableName: tableName.value,
|
||||
tableInfos: newArr,
|
||||
};
|
||||
console.log('param', param);
|
||||
createPicTable(param).then((res: Recordable) => {
|
||||
console.log('res', res);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
const arr: any = [{ name: '', type: '', length: 255, id: new Date().getTime() }];
|
||||
setTableData(arr);
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.box-container {
|
||||
width: 80%;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
.tab-label {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,248 @@
|
|||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:centered="true"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="false"
|
||||
:showCancelBtn="!isDetail"
|
||||
:showOkBtn="!isDetail"
|
||||
:draggable="false"
|
||||
:title="getTitle"
|
||||
:useWrapper="true"
|
||||
:width="700"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<div class="box-container">
|
||||
<div class="flex mb-3">
|
||||
<div class="tab-label"><span class="red">*</span>表名：</div>
|
||||
<a-input v-model:value="tableName" placeholder="请输入表名" :disabled="isUpdate" />
|
||||
</div>
|
||||
</div>
|
||||
<BasicTable class="w-3/4 xl:w-5/5" @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleAdd" v-if="!isDetail"> 新增 </a-button>
|
||||
<!-- <a-button type="success" @click="handleSubmit"> 保存 </a-button> -->
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name' && !isDetail">
|
||||
<a-input v-model:value="record.name" placeholder="请输入字段名" />
|
||||
</template>
|
||||
<template v-if="column.key === 'type' && !isDetail">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
ref="select"
|
||||
placeholder="请选择"
|
||||
v-model:value="record.type"
|
||||
:options="codesTypeArr"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'type' && isDetail">
|
||||
{{ getCodesTypeArrByType(record.type) }}
|
||||
</template>
|
||||
<template v-if="column.key === 'explanation' && !isDetail">
|
||||
<a-input
|
||||
v-model:value="record.explanation"
|
||||
placeholder="请输入备注，备注内不能含有英文字符的,和:"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'action' && (!record.isOldColumn || !isUpdate)">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
onClick: () => {
|
||||
handleDelete(record);
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineEmits } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns, columns_isDetail } from './modal.data';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
// api
|
||||
import { createPicTable, updateTable } from '@/api/database/index';
|
||||
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否是详情
|
||||
const isDetail = ref(false);
|
||||
const tableName: any = ref('');
|
||||
const tableColumns: any = ref([]);
|
||||
const codesTypeArr: any = ref([
|
||||
{ label: 'varchar', value: 'varchar' },
|
||||
{ label: 'int', value: 'int' },
|
||||
{ label: 'date', value: 'date' },
|
||||
]);
|
||||
|
||||
// 窗口
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
isUpdate.value = data.isUpdate;
|
||||
isDetail.value = data.isDetail;
|
||||
|
||||
// 新增
|
||||
if (!data.record) {
|
||||
tableName.value = null;
|
||||
setTableData([]);
|
||||
handleAdd();
|
||||
reload();
|
||||
} else {
|
||||
// 编辑、详情
|
||||
tableName.value = data.record.tableName;
|
||||
const lines = data.record.columnJson.split(':');
|
||||
let arr: any = [];
|
||||
for (const line of lines) {
|
||||
const i = line.split(',');
|
||||
arr.push({
|
||||
name: i[0],
|
||||
type: i[1],
|
||||
explanation: i[2],
|
||||
length: 255,
|
||||
id: new Date().getTime(),
|
||||
isOldColumn: true,
|
||||
});
|
||||
}
|
||||
setTableData(arr);
|
||||
reload();
|
||||
}
|
||||
// 详情隐藏按钮
|
||||
if (isDetail.value) {
|
||||
tableColumns.value = columns_isDetail;
|
||||
} else {
|
||||
tableColumns.value = columns;
|
||||
}
|
||||
});
|
||||
|
||||
// 表格
|
||||
const [registerTable, { reload, setTableData, getDataSource }] = useTable({
|
||||
rowKey: '',
|
||||
columns: tableColumns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
},
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
showIndexColumn: true,
|
||||
bordered: true,
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
let viesObj: any = getDataSource() || [];
|
||||
viesObj.push({ name: '', type: '', explanation: '', length: 255, id: new Date().getTime() });
|
||||
setTableData(viesObj);
|
||||
reload();
|
||||
}
|
||||
// 删除
|
||||
function handleDelete(record: Recordable) {
|
||||
let arr = getDataSource();
|
||||
let newArr: any = [];
|
||||
arr.forEach((item) => {
|
||||
if (item.id !== record.id) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
setTableData(newArr);
|
||||
reload();
|
||||
}
|
||||
// 提交
|
||||
function handleOk() {
|
||||
let arr = getDataSource();
|
||||
// console.log('record', arr);
|
||||
let newArr: any = [];
|
||||
let flag = true;
|
||||
arr.forEach((item) => {
|
||||
if (
|
||||
item.explanation &&
|
||||
(item.explanation.indexOf(':') > -1 || item.explanation.indexOf(',') > -1)
|
||||
) {
|
||||
createMessage.warn('备注内不能含有英文字符的,和:');
|
||||
flag = false;
|
||||
}
|
||||
newArr.push({
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
explanation: item.explanation,
|
||||
});
|
||||
});
|
||||
if (flag) {
|
||||
const param: any = {
|
||||
tableName: tableName.value,
|
||||
tableInfos: newArr,
|
||||
};
|
||||
console.log('param', param);
|
||||
if (isUpdate.value) {
|
||||
updateTable(param).then((res: Recordable) => {
|
||||
console.log('res', res);
|
||||
setTableData([]);
|
||||
tableName.value = null;
|
||||
emit('submit');
|
||||
closeModal();
|
||||
});
|
||||
} else {
|
||||
createPicTable(param).then((res: Recordable) => {
|
||||
console.log('res', res);
|
||||
setTableData([]);
|
||||
tableName.value = null;
|
||||
emit('submit');
|
||||
closeModal();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// 字典类型
|
||||
async function getCodesTypeArr() {
|
||||
getLoad({ code: 'clounm_type' }).then((res) => {
|
||||
if (res) {
|
||||
codesTypeArr.value = [];
|
||||
res.forEach((item) => {
|
||||
codesTypeArr.value.push({ label: item.itemName, value: item.itemValue });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 详情情况下的类型
|
||||
function getCodesTypeArrByType(type) {
|
||||
for (const codesType of codesTypeArr.value) {
|
||||
if (codesType.value === type) {
|
||||
return codesType.label;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
onMounted(() => {
|
||||
getCodesTypeArr();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.box-container {
|
||||
width: 80%;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
.tab-label {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import { BasicColumn } from '@/components/Table';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '字段名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'explanation',
|
||||
key: 'explanation',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
},
|
||||
];
|
||||
|
||||
export const columns_isDetail: BasicColumn[] = [
|
||||
{
|
||||
title: '字段名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'explanation',
|
||||
key: 'explanation',
|
||||
},
|
||||
];
|
||||
|
|
@ -35,7 +35,9 @@
|
|||
import { postAdd, update } from '@/api/sys/WFSchemeInfo';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage } = useMessage();
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
const props = defineProps({
|
||||
code: String,
|
||||
});
|
||||
|
|
@ -81,9 +83,7 @@
|
|||
// tabStore.closeTabByKey('/dashboard/scheme_preview/add?code=' + schemeCode, router);
|
||||
// }
|
||||
}
|
||||
function onSaveDesigner(){
|
||||
|
||||
}
|
||||
function onSaveDesigner() {}
|
||||
</script>
|
||||
<style scoped>
|
||||
.preview-box {
|
||||
|
|
|
|||
Loading…
Reference in New Issue