kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore: reBreak

master
wangxiang 2 years ago
parent
46d70c9ea3
commit
8a945dab2c
3 changed files with 121 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      index.html
  2. 101
      src/views/common/workflow/extension/form/helper/WorkflowFormDesign.vue
  3. 22
      src/views/common/workflow/extension/form/index.vue

6
index.html
Unescape View File

@ -10,10 +10,16 @@
/> />
<title><%= title %></title> <title><%= title %></title>
<link rel="icon" href="/favicon.ico"/> <link rel="icon" href="/favicon.ico"/>
<!-- 外置:todo 待排除 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js" charset="utf-8"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.1"></script> <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.1"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/loquat-form-design@1.2.6/lib/loquat-form-design.css">
<script src="https://cdn.jsdelivr.net/npm/loquat-form-design@1.2.6/lib/loquat-form-design.umd.min.js"></script>
</head> </head>
<body> <body>
<script> <script>

101
src/views/common/workflow/extension/form/helper/WorkflowFormDesign.vue
Unescape View File

@ -0,0 +1,101 @@
<template>
<BasicModal v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<loquat-form-design ref="loquat-form-design"
style="height:calc(100vh - 133px)"
:toolbar="['clear', 'preview']"
:options="state.options"
:custom-fields="state.customFields"
/>
</BasicModal>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
interface TableState {
tag: string;
options: Recordable;
customFields: Recordable[];
}
const state = reactive<TableState>({
tag: '',
options: {},
customFields: [{
title: '自定义字段',
list: [
{
title: '分割线',
type: 'custom',
component: 'el-divider',
icon: 'iconfont icon-divider',
label: '',
propExclude: true,
labelWidth: 0,
params: {
html: '<h3 style="color:red">分割线标题</h3>',
contentPosition: 'left'
}
},
{
title: '警告',
type: 'custom',
component: 'el-alert',
icon: 'el-icon-warning',
label: '',
propExclude: true,
labelWidth: 0,
params: {
title: '警告警告警告警告',
type: 'success'
},
events: {
close () {
console.log('alert关闭事件');
}
}
}
]
}],
});
const emit = defineEmits(['success', 'register']);
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
state.tag = data._tag;
const id = data.record?.id;
const props: Partial<ModalProps> = { confirmLoading: false };
switch (state.tag) {
case 'add':
props.title = '新增流程表单';
break;
case 'edit':
props.title = '编辑流程表单';
break;
}
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (state.tag) {
case 'add':
break;
case 'edit':
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

22
src/views/common/workflow/extension/form/index.vue
Unescape View File

@ -76,7 +76,7 @@
{ {
label: '设计', label: '设计',
icon: 'fa-solid:mortar-pestle', icon: 'fa-solid:mortar-pestle',
onClick: handleEdit.bind(null, record) onClick: handleWorkFlowFormDesign.bind(null, record)
}, },
{ {
label: '修改', label: '修改',
@ -101,21 +101,19 @@
</template> </template>
</BasicTable> </BasicTable>
<FormModal @register="registerModal" @success="handleRefreshTable"/> <FormModal @register="registerModal" @success="handleRefreshTable"/>
<WorkflowFormDesign @register="registerWorkflowFormModal" @success="handleRefreshTable"/>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, toRaw, onMounted } from 'vue'; import { defineComponent, reactive, toRaw, onMounted } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { import { listFormDefinition, delFormDefinition, } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
listFormDefinition,
delFormDefinition,
getFormDefinition,
} from '/@/api/platform/common/workflow/extension/controller/formDefinition';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { BasicTree, TreeItem } from '/@/components/Tree'; import { BasicTree, TreeItem } from '/@/components/Tree';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import FormModal from './FormModal.vue'; import FormModal from './FormModal.vue';
import WorkflowFormDesign from './helper/WorkflowFormDesign.vue';
import { columns, searchFormSchema } from './form.data'; import { columns, searchFormSchema } from './form.data';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { listToTree } from '/@/utils/helper/treeHelper'; import { listToTree } from '/@/utils/helper/treeHelper';
@ -142,6 +140,7 @@
PlusOutlined, PlusOutlined,
FormOutlined, FormOutlined,
DeleteOutlined, DeleteOutlined,
WorkflowFormDesign,
}, },
setup() { setup() {
@ -160,7 +159,7 @@
const { createConfirm, createMessage } = useMessage(); const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal(); const [registerWorkflowFormModal , { openModal: openWorkflowFormModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getForm }] = useTable({ const [registerTable, { reload, clearSelectedRowKeys, getForm }] = useTable({
title: '流程表单列表', title: '流程表单列表',
api: listFormDefinition, api: listFormDefinition,
@ -234,6 +233,12 @@
reload(); reload();
} }
/** 处理工作流表单设计 */
function handleWorkFlowFormDesign (row) {
const record = row.formDefinitionJson || {};
openWorkflowFormModal(true, { _tag: 'add', record });
}
function handleSelect(selectedKeys: string[]) { function handleSelect(selectedKeys: string[]) {
getForm().setFieldsValue({ getForm().setFieldsValue({
categoryId: selectedKeys[0] categoryId: selectedKeys[0]
@ -244,13 +249,14 @@
state, state,
registerTable, registerTable,
registerModal, registerModal,
registerResetPwdModal, registerWorkflowFormModal,
handleAdd, handleAdd,
handleEdit, handleEdit,
handleDel, handleDel,
handleSelectionChange, handleSelectionChange,
handleRefreshTable, handleRefreshTable,
handleSelect, handleSelect,
handleWorkFlowFormDesign
}; };
} }
}); });

Write Preview
Loading…
Cancel
Save