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

1.表格页面树按钮修正、2.设计页面的基础控件和控件设置的bug修正

hc_zhufu
滕嵩 2024-05-16 18:00:29 +08:00
parent b8dd060a84
commit fb218fd354
13 changed files with 123 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/demo/formScheme.ts
View File

@ -88,7 +88,7 @@ export function functionLoadFormSort(params: AccountParams) {
export function functionAddFormSort(params: FromSortModel) {
return defHttp.post({
url: Api.AddFormSort,
url: Api.AddFormSort + '?code=FormSort',
params,
});
}

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

@ -171,7 +171,7 @@
});
};
const handleFieldTableChange = (e) => {
console.log('cccccc', e);
// console.log('cccccc', e);
fieldTableValue.value = e;
fetch();
inputOptions.value.forEach((item) => {
@ -289,6 +289,8 @@
if (func) {
func(formConfig.value.currentItem!.componentProps, allOptions.value);
}
fieldTableValue.value = formConfig.value?.currentItem?.componentProps?.dataTable;
handleFieldTableChange(formConfig.value?.currentItem?.componentProps?.dataTable);
},
{
immediate: true,

57
src/views/demo/form-design/components/VFormDesign/index.vue
View File

@ -4,37 +4,39 @@
:class="`left ${prefixCls}-sider`"
collapsible
collapsedWidth="0"
width="270"
width="300"
:zeroWidthTriggerStyle="{
'margin-top': '-70px',
'background-color': 'gray',
}"
breakpoint="md"
>
<CollapseContainer title="基础控件">
<CollapseItem
:list="baseComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="自定义控件">
<CollapseItem
:list="customComponents"
@add-attrs="handleAddAttrs"
:handleListPush="handleListPushDrag"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="布局控件">
<CollapseItem
:list="layoutComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<div class="collapseItem-box">
<CollapseContainer title="基础控件">
<CollapseItem
:list="baseComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="自定义控件">
<CollapseItem
:list="customComponents"
@add-attrs="handleAddAttrs"
:handleListPush="handleListPushDrag"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="布局控件">
<CollapseItem
:list="layoutComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
</div>
</LayoutSider>
<LayoutContent>
<Toolbar
@ -396,4 +398,9 @@
background-color: #fff;
}
}
.collapseItem-box {
height: calc(100vh - 60px);
overflow: auto;
}
</style>

1
src/views/demo/form-design/components/VFormItem/index.vue
View File

@ -23,7 +23,6 @@
v-else-if="schema.component == 'Divider' && schema.label && !formItemProps.hiddenLabel"
>{{ schema.label }}
</Divider>
<div v-if="schema.component == 'Divider'"> 123 </div>
<!-- 部分控件需要一个空div -->
<div>

45
src/views/demo/form-design/core/formItemConfig.ts
View File

@ -8,43 +8,42 @@ import { ComponentType } from '@/components/Form/src/types';
import { componentMap as Cmp } from '../components';
import { Component } from 'vue';
import { getDeptList,getAccountList,getPosGroupList } from '@/api/demo/system';
import { getDeptList, getAccountList, getPosGroupList } from '@/api/demo/system';
//获取部门列表数据
const deptTreeData = await Promise.all([getDeptListData()])
function getDeptListData(){
const deptTreeData = await Promise.all([getDeptListData()]);
function getDeptListData() {
let param = {
page: 1,
limit: 9999
limit: 9999,
};
return getDeptList( param ).then( data => {
return data
})
return getDeptList(param).then((data) => {
return data;
});
}
//获取职级列表数据
const positionTreeData = await Promise.all([getPositionListData()])
function getPositionListData(){
const positionTreeData = await Promise.all([getPositionListData()]);
function getPositionListData() {
let param = {
page: 1,
limit: 9999
limit: 9999,
};
return getPosGroupList( param ).then( data => {
return data
})
return getPosGroupList(param).then((data) => {
return data;
});
}
//获取人员选择列表数据
const userTreeData = await Promise.all([getUserListData()])
function getUserListData(){
const userTreeData = await Promise.all([getUserListData()]);
function getUserListData() {
let param = {
page: 1,
limit: 9999
limit: 9999,
};
return getAccountList( param ).then( data => {
return data.items
})
return getAccountList(param).then((data) => {
return data.items;
});
}
const componentMap = new Map<string, Component>();
//如果有其它控件，可以在这里初始化
@ -98,7 +97,7 @@ export const customComponents: IVFormComponent[] = [
field: '',
colProps: { span: 24 },
componentProps: {
fieldNames:{
fieldNames: {
children: 'children',
label: 'name',
value: 'id',
@ -113,7 +112,7 @@ export const customComponents: IVFormComponent[] = [
field: '',
colProps: { span: 24 },
componentProps: {
fieldNames:{
fieldNames: {
children: 'children',
label: 'name',
value: 'id',

1
src/views/demo/onlineform/formModule/FormModal.vue
View File

@ -181,7 +181,6 @@
let sysModuleElement: any = [];
if (config.table.btns) {
config.table.btns.forEach((t) => {
console.log(t);
let temp: any = {};
temp.id = '';
temp.domId = t.prop;

2
src/views/demo/onlineform/formModule/config/columns.vue
View File

@ -73,7 +73,7 @@
});
// config
const config = inject('formConfig');
const config: any = inject('formConfig');
const columnsData = ref(config.table.columns);
// 展开全部
const columnsTreeRef = ref<Nullable<TreeActionType>>(null);

15
src/views/demo/onlineform/formModule/index.vue
View File

@ -8,7 +8,8 @@
:searchInfo="searchInfo"
>
<template #toolbar>
<a-button type="primary" @click="handleAddForm">新增</a-button>
<PermissionBtn @btn-event="onBtnClicked" />
<!-- <a-button type="primary" @click="handleAddForm">新增</a-button> -->
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'pmoduleId'">
@ -45,7 +46,7 @@
</template>
<script lang="ts" setup>
import { reactive, nextTick, ref, onMounted } from 'vue';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
@ -175,6 +176,16 @@
reload();
}
function onBtnClicked(domId) {
switch (domId) {
case 'btnAdd':
handleAddForm();
break;
default:
break;
}
}
onMounted(() => {
fetch();
});

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

@ -62,22 +62,32 @@
},
]);
// 列表设置Checked
const columnsCheckedKeys = ref([]);
const columnsCheckedKeys: any = ref([]);
// 查询设置tree
const queryTree = ref([
const queryTree: any = ref([
{
label: '全选',
children: [],
},
]);
// 查询设置Checked
const queryCheckedKeys = ref([]);
const queryCheckedKeys: any = ref([]);
// 按钮设置tree
const btnsTree = ref([]);
const btnsTree: any = ref([]);
// 按钮设置Checked
const btnsCheckedKeys = ref([]);
const btnsCheckedKeys: any = ref([]);
const config = ref({
const notInColumns = [
'Divider',
'InputGuid',
'MapGemo',
'Upload',
'slot',
'Grid',
'StrengthMeter',
];
const config: any = ref({
layoutType: 1,
queryType: 1,
left: {
@ -158,7 +168,7 @@
],
});
const formScheme = ref('');
const formScheme: any = ref('');
// 表单验证
async function validateSteps(formVerison) {
@ -167,18 +177,19 @@
}
// 选中的历史记录表单
let keyValue = typeof formVerison === 'string' ? formVerison : formVerison.value;
const scheme = await functionGetPreviewForm({ keyValue: keyValue });
// const scheme = await functionGetPreviewForm({ keyValue: formVerison });
// console.log(scheme);
let query: any = { keyValue: keyValue };
const scheme: any = await functionGetPreviewForm(query);
formScheme.value = JSON.parse(scheme.scheme);
const columns = [];
formScheme.value.formInfo.schemas.forEach((tab) => {
if (!(tab.component in ['Gridtable', 'Divider', 'Password', 'Viewtable', 'Card', 'Btn'])) {
const columns: any = [];
formScheme.value.formInfo.schemas.forEach((tab: any) => {
if (!notInColumns.includes(tab.component)) {
columns.push(tab);
}
});
console.log(columns);
const colunmsMap = {};
columns.forEach((item) => {
colunmsMap[item.field] = item;
@ -192,14 +203,15 @@
// 列表设置-树
columnsTree.value[0].children = [];
columns.map((t) => {
columnsTree.value[0].children.push({
let temp: any = {
key: t.field,
label: t.label,
value: t.label,
width: 120,
align: 'left',
isMinWidth: false,
});
};
columnsTree.value[0].children.push(temp);
});
// 查询设置-树
@ -214,7 +226,8 @@
});
// 常用按钮-树
const schemeInfo = await functionGetSchemeInfoEntity({ id: scheme.schemeInfoId });
let query2: any = { id: scheme.schemeInfoId };
const schemeInfo: any = await functionGetSchemeInfoEntity(query2);
if (schemeInfo.formType === 1) {
// 如果是视图表单就关闭部分按钮
btnsTree.value = config.value.btns.filter((t) =>
@ -251,13 +264,13 @@
}
// 设置预选的单选项
config.value.table.columns.forEach((t) => {
config.value.table.columns.forEach((t: any) => {
columnsCheckedKeys.value.push(t.key);
});
config.value.table.querys.forEach((t) => {
config.value.table.querys.forEach((t: any) => {
queryCheckedKeys.value.push(t.key);
});
config.value.table.btns.forEach((t) => {
config.value.table.btns.forEach((t: any) => {
btnsCheckedKeys.value.push(t.id);
});
}

3
src/views/demo/onlineform/formModule/modalForm-Modal.vue
View File

@ -152,7 +152,8 @@
});
// 预览
async function previewModal(record, Modal: IToolbarMethods) {
const preview = await functionGetPreviewForm({ keyValue: record.schemeId });
let query: any = { keyValue: record.schemeId };
const preview: any = await functionGetPreviewForm(query);
let scheme = JSON.parse(preview.scheme);
formConfig.value.schemas = scheme.formInfo.schemas;
Modal?.showModal(cloneDeep(formConfig.value));

5
src/views/demo/onlineform/formModule/modalForm.vue
View File

@ -190,7 +190,8 @@
formData.value.formCode = row.id;
formData.value.formCodeName = row.name;
// 表单选择回传数据变化后，版本变化
const historyData = await functionGetSchemePageList({ schemeInfoId: row.id });
let query: any = { schemeInfoId: row.id };
const historyData = await functionGetSchemePageList(query);
historyData.items.forEach((t) => {
formVerisons_temp.push({ label: t.createDate, value: t.id });
});
@ -221,7 +222,7 @@
async function setFormData(record) {
// info和scheme
let query: any = { id: record.formCode };
const result = await functionGetForm(query);
const result: any = await functionGetForm(query);
record.isSys = true;
formData.value = record;
formData.value.formVerison = result.info.schemeId;

15
src/views/demo/onlineform/formdesign/index.vue
View File

@ -14,8 +14,7 @@
:searchInfo="searchInfo"
>
<template #toolbar>
<!-- <PermissionBtn @btn-event="onBtnClicked" /> -->
<a-button type="primary" @click="handleAddForm">新增</a-button>
<PermissionBtn @btn-event="onBtnClicked" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'category'">
@ -65,7 +64,7 @@
</template>
<script lang="ts" setup>
import { reactive, nextTick, ref, onMounted } from 'vue';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { TreeItem } from '@/components/Tree';
import { PageWrapper } from '@/components/Page';
@ -262,6 +261,16 @@
treeData.value = await functionLoadFormSort();
}
function onBtnClicked(domId) {
switch (domId) {
case 'btnAdd':
handleAddForm();
break;
default:
break;
}
}
onMounted(() => {
fetch();
});

3
src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue
View File

@ -114,7 +114,8 @@
// 异步传参
const [automaticModal, { closeModal }] = useModalInner(async (data) => {
if (!props.isAddVisible) {
let result = await functionGetForm({ id: data.saveFormDatas.info.id });
let query: any = { id: data.saveFormDatas.info.id };
let result = await functionGetForm(query);
let result_json = JSON.parse(result.scheme.scheme);
let data_json = JSON.parse(data.saveFormDatas.scheme.scheme);
data_json.db = result_json.db;