consummate form design module

sunhao1256 · Apr 11, 2023 · 11975b0 · 11975b0
1 parent f31f46a
commit 11975b0
Show file tree

Hide file tree

Showing 26 changed files with 1,053 additions and 64 deletions.
diff --git a/mock/api/management.ts b/mock/api/management.ts
@@ -73,7 +73,34 @@ const apis: MockMethod[] = [
         data: data
       };
     }
-  }
+  },
+
+
+  {
+    url: '/mock/getAllFormList',
+    method: 'post',
+    timeout: 1000,
+    response: (): Service.MockServiceResult<ApiCommon.PageResult<ApiForm.Form[]>> => {
+      const data = mock({
+        pageNo: 1,
+        pageSize: 10,
+        total: 20,
+        'list|10': [
+          {
+            id: '@id',
+            name: '@name',
+            'created': mock('@datetime()'),
+            'status|1': ['1', '0'],
+          }
+        ],
+      });
+      return {
+        code: 200,
+        message: 'ok',
+        data: data
+      };
+    }
+  },
 ];
 
 export default apis;
diff --git a/mock/model/route.ts b/mock/model/route.ts
@@ -222,15 +222,32 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
           component: 'self',
           meta: {
             title: 'menu.flowable-design',
-            icon: "mdi-waves-arrow-right"
+            icon: "mdi-pencil"
           }
-        }
+        },
+
+        {
+          name: 'form_list',
+          path: '/form/list',
+          component: 'self',
+          meta: {
+            title: 'menu.form-list',
+          }
+        },
+        {
+          name: 'form_design',
+          path: '/form/design',
+          component: 'self',
+          meta: {
+            title: 'menu.form-design',
+          }
+        },
       ],
       meta: {
         title: "menu.flowable",
         icon: "mdi-waves-arrow-right"
       }
-    }
+    },
 
   ],
   user: [

diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
@@ -9,10 +9,14 @@
   cursor: pointer;
 }
 
+.cursor-move {
+  cursor: move;
+}
+
 .v-field-flat div {
   box-shadow: none;
 }
 
-.top-z-index{
+.top-z-index {
   z-index: 1006 !important;
 }
diff --git a/src/components/provider/DialogProvider.tsx b/src/components/provider/DialogProvider.tsx
@@ -44,10 +44,10 @@ export default defineComponent({
       show(content: ContentType): DialogReactive {
         return create(content)
       },
-      closeAll(){
+      closeAll() {
 
-        dialogListRef.value=[]
-        dialogRefs.value={}
+        dialogListRef.value = []
+        dialogRefs.value = {}
       }
     }
     provide(DialogInjectKey, api)
@@ -120,13 +120,17 @@ export default defineComponent({
                     </VCardText>
                     <VCardActions>
                       <VSpacer></VSpacer>
-                      <VBtn onClick={() => {
-                        msg.close()
-                        msg.content.cancel?.()
-                      }}>{msg.content.cancelText ?? this.$t('common.cancel')}</VBtn>
-                      <VBtn loading={msg._confirmLoading} color={msg.content?.confirmColor ?? 'error'} onClick={() => {
-                        msg.content.confirm ? msg.content.confirm() : msg.close()
-                      }}>{msg.content.confirmText ?? this.$t('common.confirm')}</VBtn>
+                      <VBtn {...{
+                        'onClick': () => {
+                          msg.close()
+                          msg.content.cancel?.()
+                        }
+                      }} >{msg.content.cancelText ?? this.$t('common.cancel')}</VBtn>
+                      <VBtn loading={msg._confirmLoading} color={msg.content?.confirmColor ?? 'error'}{...{
+                        'onClick': () => {
+                          msg.content.confirm ? msg.content.confirm() : msg.close()
+                        }
+                      }} >{msg.content.confirmText ?? this.$t('common.confirm')}</VBtn>
                     </VCardActions>
                   </VCard>
 

diff --git a/src/constants/business.ts b/src/constants/business.ts
@@ -23,3 +23,14 @@ export const userStatusOptions: { value: UserManagement.UserStatusKey; label: st
   {value: '2', label: userStatusLabels['2']},
   {value: '4', label: userStatusLabels['4']}
 ];
+
+/** 用户状态 */
+export const formStatusLabels: Record<FormManagement.FormStatusKey, string> = {
+  1: 'active',
+  0: 'disabled',
+};
+
+export const formStatusOptions: { value: FormManagement.FormStatusKey; label: string }[] = [
+  {value: '1', label: formStatusLabels['1']},
+  {value: '0', label: formStatusLabels['0']},
+];
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
@@ -29,7 +29,7 @@ export default createVuetify({
     },
     VBtn: {
       variant: 'elevated',
-    }
+    },
   },
   theme: {
     themes: {

diff --git a/src/service/api/management.adapter.ts b/src/service/api/management.adapter.ts
@@ -29,3 +29,23 @@ export function adapterOfFetchUser(data: ApiUserManagement.User | null): UserMan
   };
   return user
 }
+
+export function deriveFetchListAdapter<T, Y extends T>(transfer: (t: T) => Y) {
+  return (data: ApiCommon.PageResult<T[]> | null): ApiCommon.PageResult<Y[]> => {
+    if (!data) return {
+      pageNo: 1,
+      pageSize: 20,
+      list: [],
+      total: 0,
+    };
+    return {
+      total: data.total,
+      pageNo: data.pageNo,
+      pageSize: data.pageSize,
+      list: data.list.map((item, index) => {
+        const user: Y = transfer(item)
+        return user;
+      })
+    }
+  }
+}
diff --git a/src/service/api/management.ts b/src/service/api/management.ts
@@ -1,6 +1,6 @@
 import {adapter} from '@/utils';
 import {mockRequest} from '../request';
-import {adapterOfFetchUserList, adapterOfFetchUser} from './management.adapter';
+import {adapterOfFetchUserList, adapterOfFetchUser, deriveFetchListAdapter} from './management.adapter';
 
 export const fetchUserList = async () => {
   const data = await mockRequest.post<ApiCommon.PageResult<ApiUserManagement.User[]> | null>('/getAllUserList');
@@ -10,3 +10,13 @@ export const fetchUser = async (id: string) => {
   const data = await mockRequest.post<ApiUserManagement.User | null>(`/getUser/${id}`);
   return adapter(adapterOfFetchUser, data);
 };
+
+export const fetchFormList = async () => {
+  const data = await mockRequest.post<ApiCommon.PageResult<ApiForm.Form[]> | null>(`/getAllFormList`);
+  return adapter(deriveFetchListAdapter<ApiForm.Form, FormManagement.Form>(apiFrom => {
+    const form: FormManagement.Form = {
+      ...apiFrom
+    }
+    return form;
+  }), data);
+};
diff --git a/src/translations/en.ts b/src/translations/en.ts
@@ -197,6 +197,8 @@ export default {
     pricingPage: 'Pricing Page',
     'flowable': 'Flowable',
     'flowable-design': 'Flowable Design',
+    'form-list': 'Forms',
+    'form-design': 'Form Design'
   },
   // Vuetify components translations
   $vuetify: {

diff --git a/src/translations/zh.ts b/src/translations/zh.ts
@@ -197,6 +197,8 @@ export default {
     'pricingPage': '定价页面',
     'flowable': '流程管理',
     'flowable-design': '流程设计',
+    'form-list':'表单',
+    'form-design':'表单设计'
   },
   '$vuetify': {
     'badge': '徽章',

diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
@@ -23,6 +23,16 @@ declare namespace ApiRoute {
   }
 }
 
+declare namespace ApiForm {
+  interface Form {
+    config: string;
+    id: string;
+    name: string;
+    status: '1' | '0';
+    created: string;
+  }
+}
+
 declare namespace ApiUserManagement {
 
   interface Address {
@@ -54,7 +64,7 @@ declare namespace ApiChatManagement {
     id: string,
     text: string,
     timestamp: string,
-    image?:string,
+    image?: string,
     user: {
       avatar: string,
       id: string
@@ -67,7 +77,7 @@ declare namespace ApiChatManagement {
     id: string,
     text: string,
     timestamp: string,
-    image?:string,
+    image?: string,
     user: {
       avatar: string,
       id: string
@@ -80,7 +90,7 @@ declare namespace ApiChatManagement {
     id: string,
     text: string,
     timestamp: string,
-    image?:string,
+    image?: string,
     user: {
       avatar: string,
       id: string

diff --git a/src/typings/business.d.ts b/src/typings/business.d.ts
@@ -30,3 +30,10 @@ declare namespace UserManagement {
    */
   type UserStatusKey = NonNullable<User['userStatus']>;
 }
+
+declare namespace FormManagement {
+  interface Form extends ApiForm.Form {
+
+  }
+  type FormStatusKey = NonNullable<Form['status']>;
+}
diff --git a/src/typings/page-route.d.ts b/src/typings/page-route.d.ts
@@ -47,6 +47,9 @@ declare namespace PageRoute {
     | 'other_menu-levels-3-2'
     | 'flowable'
     | 'flowable_design'
+    | 'form'
+    | 'form_list'
+    | 'form_design'
     ;
   /**
    * last degree route key, which has the page file
@@ -72,5 +75,7 @@ declare namespace PageRoute {
     | 'other_menu-levels-3-1'
     | 'other_menu-levels-3-2'
     | 'flowable_design'
+    | 'form_list'
+    | 'form_design'
     >;
 }
diff --git a/src/typings/vuetify.d.ts b/src/typings/vuetify.d.ts
@@ -2,7 +2,12 @@
 
 type BreadcrumbItem = import('vuetify/components').VBreadcrumbsItem['$props']
 type DataTableHeader = import('vuetify/labs/VDataTable').VDataTable['headers']
-type Snackbar= import('vuetify/components').VSnackbar['$props']
-type Dialog= import('vuetify/components').VDialog['$props']
-type VCardTitle= import('vuetify/components').VCardTitle
+type Snackbar = import('vuetify/components').VSnackbar['$props']
+type Dialog = import('vuetify/components').VDialog['$props']
+type VCardTitle = import('vuetify/components').VCardTitle
+type VTextField = import('vuetify/components').VTextField
+type VSelect = import('vuetify/components').VSelect
+type VRadio= import('vuetify/components').VRadio
+type VCheckbox= import('vuetify/components').VCheckbox
+type VBtn = import('vuetify/components').VBtn
 
diff --git a/...gn/propertiesPanel/components/opinion.vue → ...gn/propertiesPanel/components/actions.vue b/...gn/propertiesPanel/components/opinion.vue → ...gn/propertiesPanel/components/actions.vue
@@ -1,10 +1,12 @@
 <template>
   <v-expansion-panel
-    title="Opinions"
+    title="Actions"
   >
     <v-expansion-panel-text>
-      <v-text-field variant="outlined" label="Condition Express" density="comfortable" hide-details
-                    :model-value="conditionExpress" @change="updateElementConditionExpress"></v-text-field>
+      <v-select variant="outlined" label="Action" density="comfortable" hide-details
+                multiple
+                :items="actionOption"
+                v-model="actions" @update:modelValue="updateElementActions"></v-select>
     </v-expansion-panel-text>
   </v-expansion-panel>
 
@@ -15,24 +17,25 @@ import {ref} from 'vue'
 import {useModelStore} from '@/store'
 import {getBusinessObject} from "bpmn-js/lib/util/ModelUtil";
 
-const conditionExpress = ref<String>("")
+const actionOption = ref(['approve', 'disapprove'])
+const actions = ref<Array<String>>([])
 const modelStore = useModelStore()
 const element = modelStore.getActive
 const businessObject = getBusinessObject(element);
 
-const camundaPropertyName = "camunda:conditionExpress"
+const camundaPropertyName = "camunda:userActions"
 
-const getConditionExpress: () => String = () => {
+const getActions: () => Array<String> = () => {
   return businessObject.get(camundaPropertyName);
 };
 
-if (getConditionExpress()) {
-  conditionExpress.value = getConditionExpress()
+if (getActions()) {
+  actions.value = getActions()
 }
 
-const updateElementConditionExpress = (value: any) => {
+const updateElementActions = (value: Array<String>) => {
   const properties: Record<string, any> = {}
-  properties[camundaPropertyName] = value.target.value
+  properties[camundaPropertyName] = value
   modelStore.getCommandStack.execute('element.updateModdleProperties', {
     element,
     moddleElement: getBusinessObject(element),
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ export default createVuetify({ @@
         },
         VBtn: {
           variant: 'elevated',
-        }
+        },
       },
       theme: {
         themes: {
@@ Expand Down @@