表单设计页面
parent
e54b264bd4
commit
f8d0ea1966
|
|
@ -11,8 +11,6 @@
|
|||
<title><%= VITE_GLOB_APP_TITLE %></title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="learunui/learunui.css">
|
||||
<link rel="stylesheet" href="learunForm/lformdesign.css">
|
||||
<link rel="stylesheet" href="learunQuickBI/learun.bi.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
|
@ -158,9 +156,6 @@
|
|||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
|
||||
|
||||
<script type="module" src="/public/learunui/learunui.umd.min.js" ></script>
|
||||
<script type="module" src="/public/learunForm/lformdesign.umd.min.js"></script>
|
||||
<script type="module" src="/public/learunQuickBI/learun.bi.umd.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<meta charset="utf-8">
|
||||
<title>lformdesign demo</title>
|
||||
<script src="./lformdesign.umd.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="./lformdesign.css">
|
||||
|
||||
|
||||
<script>
|
||||
console.log(lformdesign)
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,10 +0,0 @@
|
|||
<meta charset="utf-8">
|
||||
<title>learun.bi demo</title>
|
||||
<script src="./learun.bi.umd.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="./learun.bi.css">
|
||||
|
||||
|
||||
<script>
|
||||
console.log(learun.bi)
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.l-quick-bi-design{background-color:#dcdfe6}.l-quick-bi-design__main .l-panel--title{border-bottom:0}.l-quick-bi-design__app-bar{box-sizing:border-box;background-color:#fff;position:absolute;top:8px;left:0;height:40px;width:100%;display:flex;align-items:center;padding-left:8px}.l-quick-bi-design__app-content{width:381px;height:100%;border:3px solid #000;margin:auto;background-size:contain!important;border-radius:10px;overflow:hidden auto;background-color:"#dcdfe6"}.l-quick-bi-design__main-content{background-color:#dcdfe6!important;overflow:hidden auto;background-size:480px 381px!important}.l-quick-bi-design .myComponent-title{padding:8px 2px;font-size:14px;color:#606266}.l-quick-bi-design .myComponent-item{display:inline-block;width:46%;margin:2%;transition:transform 0ms}.l-quick-bi-design .myComponent-item-body{padding:8px 10px;background:#f3f9ff;font-size:12px;cursor:move;border:1px dashed #f3f9ff;border-radius:3px;color:#043254;line-height:16px}.l-quick-bi-design .myComponent-item-icon{padding-left:8px;width:16px;color:#043254;display:inline-block}.l-quick-bi-design .myComponent-item-body:hover{border:1px dashed #409eff;color:#409eff}.l-quick-bi-design .myComponent-item-body:hover .myComponent-item-icon{color:#409eff}.l-quick-bi-design .mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.l-quick-bi-design .vue-grid-item{touch-action:none;box-sizing:border-box;border:1px solid #fff}.l-quick-bi-design .vue-grid-item.active-item{border:1px solid #409eff}.l-quick-bi-design__app-content .vue-grid-item{border-radius:8px}.l-quick-bi-design .vue-grid-item>.vue-resizable-handle{z-index:11}.l-quick-bi-design .action-clone,.l-quick-bi-design .action-delete{position:absolute;top:-10px;padding:4px;z-index:20}.l-quick-bi-design .action-clone{right:48px}.l-quick-bi-design .action-delete{right:16px}.l-quick-bi-design .component-config{box-sizing:border-box;position:relative;height:100%;width:100%;overflow:hidden auto;padding:16px;padding-bottom:8px}.l-quick-bi-viewer{background-color:#f0f2f5}.l-quick-bi-app-viewer-inner{overflow:hidden auto}.l-quick-bi-app-viewer{width:381px;padding:16px 0;margin:auto}.l-quick-bi-app-viewer .l-quick-bi-app-viewer-inner{border:3px solid #000;border-radius:8px;background-color:#dcdfe6}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,10 +0,0 @@
|
|||
<meta charset="utf-8">
|
||||
<title>learunui demo</title>
|
||||
<script src="./learunui.umd.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="./learunui.css">
|
||||
|
||||
|
||||
<script>
|
||||
console.log(learunui)
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -52,7 +52,6 @@ const transform: AxiosTransform = {
|
|||
}
|
||||
// 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
|
||||
const { code, result, message } = data;
|
||||
console.log('result',result)
|
||||
// 这里逻辑可以根据项目进行修改
|
||||
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
|
||||
if (hasSuccess) {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@ const transform: AxiosTransform = {
|
|||
}
|
||||
// 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
|
||||
const { code, result, message } = data;
|
||||
console.log('res',res)
|
||||
// 这里逻辑可以根据项目进行修改
|
||||
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
|
||||
if (hasSuccess) {
|
||||
|
|
@ -66,7 +65,12 @@ const transform: AxiosTransform = {
|
|||
} else if (options.successMessageMode === 'message') {
|
||||
createMessage.success(successMsg);
|
||||
}
|
||||
return data.data;
|
||||
if(data.data.rows){
|
||||
return data.data.rows
|
||||
}else{
|
||||
return data.data;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
|
||||
|
|
@ -237,7 +241,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
|
|||
headers: {
|
||||
'Content-Type': ContentTypeEnum.JSON,
|
||||
// 'T-Token':getToken()
|
||||
'Token':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDkzMzk5OTksImV4cCI6MTcwOTM4MzE5OSwiVXNlcklkIjoiU3lzdGVtIiwiVXNlck5hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJBY2NvdW50IjoiU3lzdGVtIn0.u53w_dpsFsmLA6Vq714Am-eu4yoXZC0KitExQ8X8arw'
|
||||
'Token':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDk2MDI3OTUsImV4cCI6MTcwOTY0NTk5NSwiVXNlcklkIjoiU3lzdGVtIiwiVXNlck5hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJBY2NvdW50IjoiU3lzdGVtIn0.v9iUN5rjkBIr6i4sJJnLdvICrLpzE5M1KhtOEHRugN4'
|
||||
},
|
||||
// 如果是form-data格式
|
||||
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="true"
|
||||
:showCancelBtn="false"
|
||||
:showOkBtn="false"
|
||||
:draggable="false"
|
||||
title="慧创 表单设计"
|
||||
>
|
||||
<div style="width: 100%;height:200px;">
|
||||
<a-steps
|
||||
:current="1"
|
||||
:items="[
|
||||
{
|
||||
title: '基本配置',
|
||||
},
|
||||
{
|
||||
title: '表单设计',
|
||||
}
|
||||
]"
|
||||
></a-steps>
|
||||
</div>
|
||||
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
|
||||
|
||||
|
||||
|
||||
defineOptions({ name: 'FormModal' });
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const [registerModal, { closeModal, setModalProps }] = useModalInner();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="50%" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { formSchema } from './menu.data';
|
||||
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
|
||||
|
||||
import { getMenuList, addMenu, editMenu, addButton, editButton } from '@/api/demo/system';
|
||||
|
||||
defineOptions({ name: 'MenuDrawer' });
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const isUpdate = ref(true);
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 12, md: 24 },
|
||||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
resetFields();
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
|
||||
if (unref(isUpdate)) {
|
||||
setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
const treeData = await getMenuList();
|
||||
updateSchema({
|
||||
field: 'parentId',
|
||||
componentProps: { treeData },
|
||||
});
|
||||
updateSchema({
|
||||
field: 'moduleId',
|
||||
componentProps: { treeData },
|
||||
});
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
console.log(values)
|
||||
if (values.type == '1') {
|
||||
console.log("新增菜单")
|
||||
delete values.type
|
||||
// 新增菜单
|
||||
if (!unref(isUpdate)) {
|
||||
const data = await addMenu(values);
|
||||
} else {
|
||||
const data = await editMenu(values);
|
||||
}
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
} else {
|
||||
console.log("新增按钮")
|
||||
// 新增按钮
|
||||
delete values.type
|
||||
if (!unref(isUpdate)) {
|
||||
const data = await addButton(values);
|
||||
} else {
|
||||
const data = await editButton(values);
|
||||
}
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,34 +1,36 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import { getFormGroupList } from '@/api/formdesign/index';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'name',
|
||||
title: '名称',
|
||||
dataIndex: 'f_Name',
|
||||
},
|
||||
// {
|
||||
// title: '排序',
|
||||
// dataIndex: 'sortNo',
|
||||
// width: 50,
|
||||
// },
|
||||
{
|
||||
title: '状态',
|
||||
title: '分类',
|
||||
dataIndex: 'f_Category_Name',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'status',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
const status = record.status;
|
||||
const status = record.f_FormType;
|
||||
const enable = ~~status === 0;
|
||||
const color = enable ? 'green' : 'red';
|
||||
const text = enable ? '启用' : '停用';
|
||||
const color = enable ? '#67c23a' : '#e6a23c';
|
||||
const text = enable ? '常规表单' : '视图表单';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'f_CreateUserName'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 180,
|
||||
dataIndex: 'f_CreateDate'
|
||||
},
|
||||
// {
|
||||
// title: '备注',
|
||||
|
|
@ -44,76 +46,4 @@ export const searchFormSchema: FormSchema[] = [
|
|||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
export const formGroupSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'posGroupId',
|
||||
component: 'ApiSelect',
|
||||
label: '职级组',
|
||||
required: true,
|
||||
componentProps: ({ formActionType, formModel }) => {
|
||||
return {
|
||||
api: getFormGroupList, // 接口
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
ifShow:false
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '部门名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'parentId',
|
||||
label: '上级部门',
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
key: 'id',
|
||||
value: 'id',
|
||||
},
|
||||
onChange:(value)=>{
|
||||
console.log(value)
|
||||
},
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
// required: true,
|
||||
},
|
||||
// {
|
||||
// field: 'orderNo',
|
||||
// label: '排序',
|
||||
// component: 'InputNumber',
|
||||
// required: true,
|
||||
// },
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '启用', value: 0 },
|
||||
{ label: '停用', value: 1 },
|
||||
],
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
// {
|
||||
// label: '备注',
|
||||
// field: 'remark',
|
||||
// component: 'InputTextArea',
|
||||
// },
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -18,13 +18,32 @@
|
|||
</template>
|
||||
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction :actions="[
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否删除该数据',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
}
|
||||
]" />
|
||||
</template>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate"> 新增 </a-button>
|
||||
<a-button type="primary" @click="handleAddForm"> 新增 </a-button>
|
||||
|
||||
<!-- <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn> -->
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<FormModal @register="registerModal" />
|
||||
|
||||
</lrlayout>
|
||||
|
||||
|
||||
|
|
@ -35,8 +54,8 @@
|
|||
import { onMounted, ref, nextTick, unref,reactive } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
|
||||
|
||||
import { getMenuList, getOrgList } from '@/api/demo/system';
|
||||
import { getFormGroupList } from '@/api/formdesign/index';
|
||||
import { optionsListApi } from '@/api/formdesign/index';
|
||||
|
||||
|
|
@ -44,27 +63,80 @@
|
|||
import { SettingOutlined } from '@ant-design/icons-vue';
|
||||
import lrlayout from '@/components/lrLayout';
|
||||
import lrPanel from '@/components/lrPanel';
|
||||
|
||||
|
||||
import FormModal from './FormModal.vue';
|
||||
|
||||
import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
|
||||
|
||||
import PermissionBtn from '@/components/PermissionBtn/index.vue'
|
||||
import { useModal } from '/@/components/Modal';
|
||||
|
||||
import { columns, searchFormSchema } from './form.data';
|
||||
|
||||
|
||||
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
|
||||
|
||||
const [registerTable, { reload, getSelectRows }] = useTable({
|
||||
title: '表单列表',
|
||||
api: getFormGroupList,
|
||||
rowKey: 'id',
|
||||
// columns,
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
// schemas: searchFormSchema,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
beforeFetch: (data) => {
|
||||
console.log('aaa',data)
|
||||
// 接口请求前 参数处理
|
||||
var temp = {
|
||||
page: data.page,
|
||||
rows: data.limit,
|
||||
keyword: data.key,
|
||||
category: data.f_Category
|
||||
};
|
||||
return temp;
|
||||
},
|
||||
afterFetch: (data) => {
|
||||
data.forEach(item =>{
|
||||
let d = item.f_CreateDate ? new Date(item.f_CreateDate) : new Date(),
|
||||
obj = {
|
||||
year: d.getFullYear(),
|
||||
month: d.getMonth() + 1,
|
||||
day: d.getDate(),
|
||||
hours: d.getHours(),
|
||||
min: d.getMinutes(),
|
||||
seconds: d.getSeconds()
|
||||
}
|
||||
Object.keys(obj).forEach(key => {
|
||||
if (obj[key] < 10) obj[key] = `0${obj[key]}`
|
||||
})
|
||||
|
||||
item.f_CreateDate = `${obj.year}-${obj.month}-${obj.day} ${obj.hours}:${obj.min}:${obj.seconds}`
|
||||
item.f_CreateDate = item.f_CreateDate.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')
|
||||
treeData.value.forEach(val =>{
|
||||
if(item.f_Category == val.f_ItemValue){
|
||||
item.f_Category_Name = val.f_ItemName
|
||||
}
|
||||
})
|
||||
})
|
||||
//请求之后对返回值进行处理
|
||||
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 180,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const searchInfo = reactive < Recordable > ({});
|
||||
|
|
@ -80,9 +152,30 @@
|
|||
});
|
||||
}
|
||||
function handleSelect(keys) {
|
||||
// searchInfo.GroupId = keys[0];
|
||||
// reload();
|
||||
treeData.value.forEach(item =>{
|
||||
if(keys[0] == item.f_ItemId){
|
||||
searchInfo.f_Category = item.f_Category;
|
||||
}
|
||||
})
|
||||
|
||||
reload();
|
||||
}
|
||||
function handleEdit(record: Recordable) {
|
||||
// openAccountModal(true, {
|
||||
// record,
|
||||
// });
|
||||
}
|
||||
function handleDelete(record: Recordable) {
|
||||
// openAccountModal(true, {
|
||||
// record,
|
||||
// });
|
||||
}
|
||||
|
||||
function handleAddForm() {
|
||||
console.log('add')
|
||||
openModal(true, {});
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@
|
|||
const values = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
console.log(values)
|
||||
if (values.type == '1') {
|
||||
console.log("新增菜单")
|
||||
delete values.type
|
||||
|
|
|
|||
|
|
@ -117,7 +117,6 @@
|
|||
nextTick(expandAll);
|
||||
}
|
||||
function onBtnClicked(domId) {
|
||||
console.log(domId)
|
||||
switch (domId) {
|
||||
case 'btnAdd':
|
||||
handleCreate()
|
||||
|
|
|
|||
Loading…
Reference in New Issue