diff --git a/src/api/flow/index.js b/src/api/flow/index.js
new file mode 100644
index 0000000..b7ceace
--- /dev/null
+++ b/src/api/flow/index.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function flow(isLoading=false) {
+  return request({
+    method: 'get',
+    url: '/api/oa/flow',
+    isLoading
+  })
+}
+
+export function preConfig(custom_model_id,isLoading=false) {
+  return request({
+    method: 'get',
+    url: `/api/oa/flow/create-pre/${custom_model_id}`,
+    isLoading
+  })
+}
diff --git a/src/main.js b/src/main.js
index 803b1a7..72bc58c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,6 +47,7 @@ Vue.config.productionTip = false
 
 //vant
 import Vant from 'vant'
+import 'vant/lib/index.css';
 Vue.use(Vant)
 
 //moment
diff --git a/src/router/index.js b/src/router/index.js
index 12d6498..7a0e6e0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -61,10 +61,15 @@ export const constantRoutes = [
     redirect: '/flow/create',
     meta: { title: '流程', icon: 'tree' },
     children: [{
+      path: 'index',
+      name: 'flowIndex',
+      component: () => import('@/views/flow/index.vue'),
+      meta: { title: '流程创建', icon: 'tree' }
+    },{
       path: 'create',
       name: 'create',
       component: () => import('@/views/flow/create'),
-      meta: { title: '流程创建', icon: 'tree' }
+      hidden: true
     }]
   }
 
@@ -78,7 +83,7 @@ export const asyncRoutes = [
 const createRouter = () => new Router({
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
+  routes: constantRoutes,
 })
 
 const router = createRouter()
diff --git a/src/utils/formBuilder.js b/src/utils/formBuilder.js
index 77f3722..4c1fcee 100644
--- a/src/utils/formBuilder.js
+++ b/src/utils/formBuilder.js
@@ -2,19 +2,21 @@ import formBuilderMap from './formBuilderMap'
 import { CreateElement } from 'vue'
 import moment from 'moment'
 import { getToken } from "@/utils/auth";
+import {deepCopy} from "@/utils/index";
 /**
  * @param {String} device 'desktop' or 'mobile'
  * @param {Object} info field参数
  * @param {CreateElement} h
+ * @param {Object} pForm 父级表单对象
 **/
-export default function (device, info,h ) {
+export default function formBuilder (device, info,h,pForm) {
   let formItem;
   if (device === 'desktop') {
     switch (info.type) {
       case 'text':
         formItem = h(formBuilderMap(device).get(info.type),{
           props: {
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
             clearable: true,
             placeholder: info.help_text
           },
@@ -23,7 +25,7 @@ export default function (device, info,h ) {
           },
           on: {
             input: e => {
-              this.form[info.name] = e
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         })
@@ -35,7 +37,7 @@ export default function (device, info,h ) {
             autosize: {
               minRows: 2
             },
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
             clearable: true,
             placeholder: info.help_text
           },
@@ -44,7 +46,7 @@ export default function (device, info,h ) {
           },
           on: {
             input: e => {
-              this.form[info.name] = e
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         })
@@ -55,7 +57,7 @@ export default function (device, info,h ) {
             type: 'date',
             'value-format': 'yyyy-MM-dd',
             format: 'yyyy年MM月dd日',
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
             clearable: true,
             placeholder: info.help_text,
             'picker-options': {
@@ -114,7 +116,7 @@ export default function (device, info,h ) {
           },
           on: {
             input: e => {
-              this.$set(this.form,info.name,e)
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         })
@@ -125,7 +127,7 @@ export default function (device, info,h ) {
             type: 'datetime',
             'value-format': 'yyyy-MM-dd',
             format: 'yyyy年MM月dd日',
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
             clearable: true,
             placeholder: info.help_text,
             'picker-options': {
@@ -184,7 +186,7 @@ export default function (device, info,h ) {
           },
           on: {
             input: e => {
-              this.$set(this.form,info.name,e)
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         })
@@ -192,7 +194,7 @@ export default function (device, info,h ) {
       case 'select':
         formItem = h(formBuilderMap(device).get(info.type),{
           props: {
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
             clearable: true,
             placeholder: info.help_text
           },
@@ -201,7 +203,7 @@ export default function (device, info,h ) {
           },
           on: {
             input: e => {
-              this.$set(this.form,info.name,e)
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         },[1,2,3].map(option => (
@@ -216,14 +218,14 @@ export default function (device, info,h ) {
       case 'radio':
         formItem = h(formBuilderMap(device).get(info.type),{
           props: {
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
           },
           attrs: {
             placeholder: info.help_text
           },
           on: {
             input: e => {
-              this.$set(this.form,info.name,e)
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         },[1,2,3].map(option => (
@@ -354,7 +356,7 @@ export default function (device, info,h ) {
             type: 'primary'
           },
           attrs: {
-            href: this.form[info.name],
+            href: pForm ? pForm[info.name] : this.form[info.name],
             target: "_blank"
           }
         },info.label)
@@ -366,7 +368,7 @@ export default function (device, info,h ) {
       case 'choice':
         formItem = h(formBuilderMap(device).get(info.type),{
           props: {
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
             clearable: true,
             placeholder: info.help_text
           },
@@ -375,7 +377,7 @@ export default function (device, info,h ) {
           },
           on: {
             input: e => {
-              this.$set(this.form,info.name,e)
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         },[1,2,3].map(option => (
@@ -390,7 +392,7 @@ export default function (device, info,h ) {
       case 'choices':
         formItem = h(formBuilderMap(device).get(info.type),{
           props: {
-            value: this.form[info.name],
+            value: pForm ? pForm[info.name] : this.form[info.name],
             clearable: true,
             placeholder: info.help_text,
             multiple: true
@@ -400,7 +402,7 @@ export default function (device, info,h ) {
           },
           on: {
             input: e => {
-              this.$set(this.form,info.name,e)
+              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
             }
           }
         },[1,2,3].map(option => (
@@ -412,6 +414,78 @@ export default function (device, info,h ) {
           })
         )))
         break;
+      case 'relation':
+        formItem = h('div',{
+
+        },[
+          h('vxe-toolbar',[
+            h('el-button',{
+              slot: 'buttons',
+              props: {
+                type: 'primary',
+                size: 'small',
+                icon: "el-icon-plus"
+              },
+              on: {
+                click: _ => {
+                  this.form[info.name].push(deepCopy(pForm))
+                }
+              }
+            },'增加')
+          ]),
+          h('vxe-table',{
+            style: {
+              'margin-top': '10px'
+            },
+            props: {
+              stripe: true,
+              data: this.form[info.name]
+            }
+          },this.subForm.get(info.sub_custom_model_id)?.customModel?.fields?.map((subField,subIndex) => h('vxe-column',{
+            props: {
+              field: subField.name,
+              title: subField.label,
+              align: 'center'
+            }
+          },formBuilder.bind(this)(device, subField, h, this.form[info.name][subIndex]))))
+        ])
+        // formItem = h('div', [
+        //   h('div',[
+        //     h('el-button',{
+        //       props: {
+        //         size: "small",
+        //         type: "primary",
+        //         icon: "el-icon-plus"
+        //       },
+        //       on: {
+        //         click: _ => {
+        //           this.form[info.name].push(deepCopy(pForm))
+        //         }
+        //       }
+        //     },'增加')
+        //   ]),
+        //   ...this.form[info.name]?.map((i,subIndex) => h('el-card',[
+        //     h('el-button',{
+        //       props: {
+        //         size: 'small',
+        //         type: 'primary'
+        //       },
+        //       on: {
+        //         click: _ => {
+        //           this.form[info.name].splice(subIndex,1)
+        //         }
+        //       }
+        //     },'删除'),
+        //     h('el-form', {
+        //       class: 'form',
+        //       props: {
+        //         model: this.form[info.name][subIndex],
+        //         'label-position': 'top'
+        //       }
+        //     },this.subForm.get(info.sub_custom_model_id)?.customModel?.fields.map(subField => formBuilder.bind(this)(device, subField, h, this.form[info.name][subIndex])))
+        //   ]))
+        // ])
+        break;
     }
     return h('el-form-item',{
       props: {
@@ -419,11 +493,116 @@ export default function (device, info,h ) {
         label: info.label
       },
       style: {
-        'grid-column-start': info.gs_x,
-        'grid-column-end': info.gs_x + info.gs_width,
-        'grid-row-start': info.gs_y,
-        'grid-row-end': info.gs_y + info.gs_height
+        'grid-column-start': info.gs_x+1,
+        'grid-column-end': info.gs_x+1 + info.gs_width,
+        'grid-row-start': info.gs_y+1,
+        'grid-row-end': info.gs_y+1 + info.gs_height
       }
     },[formItem])
   }
+  if(device === 'mobile') {
+    switch (info.type) {
+      case 'text':
+        formItem = h(formBuilderMap(device).get(info.type),{
+          props: {
+            name: info.name,
+            label: info.label,
+            value: this.form[info.name],
+            clearable: true,
+            placeholder: info.help_text
+          },
+          attrs: {
+            placeholder: info.help_text
+          },
+          on: {
+            input: e => {
+              this.$set(this.form,info.name,e)
+            }
+          }
+        })
+        break;
+      case 'textarea':
+        formItem = h(formBuilderMap(device).get(info.type),{
+          props: {
+            name: info.name,
+            label: info.label,
+            type: 'textarea',
+            value: this.form[info.name],
+            clearable: true,
+            placeholder: info.help_text
+          },
+          attrs: {
+            placeholder: info.help_text
+          },
+          on: {
+            input: e => {
+              this.$set(this.form,info.name,e)
+            }
+          }
+        })
+        break;
+      case 'date':
+        formItem = h('van-field',{
+          props: {
+            readonly: true,
+            clickable: true,
+            name: info.name,
+            label: info.label,
+            value: this.form[info.name],
+            clearable: true,
+            placeholder: info.help_text,
+          },
+          attrs: {
+            placeholder: info.help_text
+          },
+          on: {
+            click: _ => {
+              this.vanCalendarOption.forFormName = info.name;
+              this.$set(this.vanCalendarOption,'isShow',true);
+            }
+          }
+        })
+        break;
+      case 'datetime':
+        formItem = h('van-field',{
+          props: {
+            readonly: true,
+            clickable: true,
+            name: info.name,
+            label: info.label,
+            value: this.form[info.name],
+            clearable: true,
+            placeholder: info.help_text,
+          },
+          on: {
+            click:_ => {
+              this.vanTimePickerOption.forFormName = info.name;
+              this.$set(this.vanTimePickerOption,'isShow',true);
+            }
+          }
+        })
+        break;
+      case 'select':
+        formItem = h('van-field',{
+          props: {
+            readonly: true,
+            clickable: true,
+            name: info.name,
+            label: info.label,
+            value: this.form[info.name],
+            clearable: true,
+            placeholder: info.help_text,
+          },
+          on: {
+            click:_ => {
+              this.vanPopupOption.forFormName = info.name;
+              this.$set(this.vanPopupOption,'columns',['杭州', '宁波', '温州', '嘉兴', '湖州']);
+              this.$set(this.vanPopupOption,'isShow',true);
+            }
+          }
+        })
+        break;
+    }
+    return formItem
+  }
 }
diff --git a/src/views/flow/DesktopForm.vue b/src/views/flow/DesktopForm.vue
index c19f774..d510d11 100644
--- a/src/views/flow/DesktopForm.vue
+++ b/src/views/flow/DesktopForm.vue
@@ -1,148 +1,31 @@
 <script>
+import { deepCopy } from "@/utils"
 import formBuilder from '@/utils/formBuilder'
 export default {
   props: {
+    originalForm: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    },
+    subForm: {
+      type: Map,
+      default: () => new Map()
+    },
     device: {
       type: String,
       default: 'desktop',
       required: true
+    },
+    info: {
+      type: Array,
+      default: () => [],
+      required: true
     }
   },
   data() {
     return {
-      info: [
-        {
-          id: 1,
-          type: "text",
-          gs_x: 1,
-          gs_y: 1,
-          gs_height: 1,
-          gs_width: 6,
-          name: "aaa",
-          label: "aaa",
-          help_text: 'write aaa'
-        },
-        {
-          id: 2,
-          type: "textarea",
-          gs_x: 7,
-          gs_y: 1,
-          gs_height: 1,
-          gs_width: 6,
-          name: "bbb",
-          label: "bbb",
-          help_text: 'write bbb'
-        },
-        {
-          id: 3,
-          type: "date",
-          gs_x: 1,
-          gs_y: 2,
-          gs_height: 1,
-          gs_width: 4,
-          name: "ccc",
-          label: "ccc",
-          help_text: 'write ccc'
-        },
-        {
-          id: 4,
-          type: "datetime",
-          gs_x: 5,
-          gs_y: 2,
-          gs_height: 1,
-          gs_width: 4,
-          name: "ddd",
-          label: "ddd",
-          help_text: 'write ddd'
-        },
-        {
-          id: 5,
-          type: "select",
-          gs_x: 1,
-          gs_y: 3,
-          gs_height: 1,
-          gs_width: 6,
-          name: "eee",
-          label: "eee",
-          help_text: 'write eee'
-        },
-        {
-          id: 6,
-          type: "radio",
-          gs_x: 1,
-          gs_y: 4,
-          gs_height: 1,
-          gs_width: 6,
-          name: "fff",
-          label: "fff",
-          help_text: 'write fff'
-        },
-        {
-          id: 7,
-          type: "file",
-          gs_x: 1,
-          gs_y: 5,
-          gs_height: 1,
-          gs_width: 6,
-          name: "ggg",
-          label: "ggg",
-          help_text: 'write ggg'
-        },
-        {
-          id: 8,
-          type: "label",
-          gs_x: 1,
-          gs_y: 6,
-          gs_height: 1,
-          gs_width: 6,
-          name: "hhh",
-          label: "hhh",
-        },
-        {
-          id: 9,
-          type: "static",
-          gs_x: 1,
-          gs_y: 7,
-          gs_height: 1,
-          gs_width: 6,
-          name: "iii",
-          label: "iii",
-        },
-        {
-          id: 10,
-          type: "hr",
-          gs_x: 1,
-          gs_y: 8,
-          gs_height: 1,
-          gs_width: 6,
-          name: "jjj",
-          label: "jjj",
-        },
-        {
-          id: 11,
-          type: "choice",
-          gs_x: 1,
-          gs_y: 9,
-          gs_height: 1,
-          gs_width: 6,
-          name: "kkk",
-          label: "kkk",
-        },
-        {
-          id: 12,
-          type: "choices",
-          gs_x: 1,
-          gs_y: 10,
-          gs_height: 1,
-          gs_width: 6,
-          name: "lll",
-          label: "lll",
-        },
-      ],
-      form: {
-        aaa: "",
-        bbb: ""
-      },
+      form: {},
       file: {
         ggg: []
       }
@@ -152,6 +35,17 @@ export default {
   },
   computed: {
 
+  },
+  watch: {
+    info(newVal) {
+      let keys = newVal.map(i => i.name)
+      keys.forEach(key => {
+        this.form[key] = ''
+      })
+    },
+    originalForm(newVal) {
+      this.form = deepCopy(newVal)
+    }
   },
   render(h) {
     return h('el-form', {
diff --git a/src/views/flow/MobileForm.vue b/src/views/flow/MobileForm.vue
index 98b6b2f..1dc7c95 100644
--- a/src/views/flow/MobileForm.vue
+++ b/src/views/flow/MobileForm.vue
@@ -1,15 +1,137 @@
-<template>
-  <div>
-  </div>
-</template>
-
 <script>
+import formBuilder from '@/utils/formBuilder'
+import moment from "moment/moment";
 export default {
+  props: {
+    device: {
+      type: String,
+      default: 'desktop',
+      required: true
+    },
+    info: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  },
   data() {
-    return {}
+    return {
+      form: {},
+      file: {
+        ggg: []
+      },
+      showControl: {},
+      vanCalendarOption: {
+        isShow: false,
+        forFormName: ""
+      },
+      vanTimePickerOption: {
+        isShow: false,
+        forFormName: ""
+      },
+      vanPopupOption: {
+        isShow: false,
+        forFormName: "",
+        columns: []
+      }
+    }
   },
   methods: {},
   computed: {},
+  watch: {
+    info(newVal) {
+      let keys = newVal.map(i => i.name)
+      keys.forEach(key => {
+        this.form[key] = ''
+      })
+    }
+  },
+  render(h) {
+    return h('div',[
+      h('van-form',{
+        props: {
+          'scroll-to-error': true
+        }
+      },this.info.map(field => formBuilder.bind(this)(this.device, field, h))),
+      //calendar
+      this.info.findIndex(i => i.type === 'date') !== -1 ?
+        h('van-calendar',{
+          ref: `vanCalendar`,
+          props: {
+            value: this.vanCalendarOption.isShow,
+            'min-date': this.$moment().subtract('years',10).toDate(),
+            'max-date': this.$moment().add('years',10).toDate(),
+          },
+          on: {
+            input: e => {
+              this.$set(this.vanCalendarOption,'isShow',e)
+            },
+            confirm: date => {
+              this.$set(this.form,this.vanCalendarOption.forFormName,moment(date).format('YYYY-MM-DD'))
+              this.$set(this.vanCalendarOption,'isShow',false)
+            }
+          }
+        }) : '',
+      //datetimepicker
+      this.info.findIndex(i => i.type === 'datetime') !== -1 ?
+        h('van-popup',{
+          props: {
+            value: this.vanTimePickerOption.isShow,
+            position: 'bottom',
+          },
+          on: {
+            input: e => {
+              this.$set(this.vanTimePickerOption,'isShow',e)
+            },
+          }
+        },[
+          h('van-datetime-picker',{
+            props: {
+              type: 'datetime'
+            },
+            on: {
+              confirm: time => {
+                this.$set(this.form,this.vanTimePickerOption.forFormName,moment(time).format('YYYY-MM-DD HH:mm:ss'))
+
+              },
+              cancel: _ => {
+                this.$set(this.vanTimePickerOption,'isShow',false)
+              }
+            }
+          })
+        ]) : '',
+      //popup
+      this.info.findIndex(i => i.type === 'datetime') !== -1 ?
+        h('van-popup',{
+          props: {
+            value: this.vanPopupOption.isShow,
+            position: 'bottom',
+          },
+          on: {
+            input: e => {
+              this.$set(this.vanPopupOption,'isShow',e)
+            },
+          }
+        },[
+          h('van-picker',{
+            props: {
+              'show-toolbar': true,
+              columns: this.vanPopupOption.columns,
+            },
+            on: {
+              confirm: value => {
+                console.log(value)
+                this.$set(this.form,this.vanPopupOption.forFormName,value)
+
+              },
+              cancel: _ => {
+                this.$set(this.vanPopupOption,'isShow',false)
+              }
+            }
+          })
+        ]) : '',
+    ])
+  }
 }
 </script>
 
diff --git a/src/views/flow/create.vue b/src/views/flow/create.vue
index e445fe0..e6c65d0 100644
--- a/src/views/flow/create.vue
+++ b/src/views/flow/create.vue
@@ -2,16 +2,16 @@
   <div class="container">
     <el-card shadow="always">
       <template #header>
-        <p>流程</p>
+        <p>{{ config.customModel ? config.customModel.name : '办理' }}</p>
       </template>
 
       <template>
         <div class="form-container">
           <template v-if="device === 'desktop'">
-            <DesktopForm :device="device"></DesktopForm>
+            <DesktopForm :device="device" :sub-form="subConfig" :info="fields" :original-form="form"></DesktopForm>
           </template>
           <template v-else>
-            <MobileForm></MobileForm>
+            <MobileForm :device="device" :info="fields"></MobileForm>
           </template>
         </div>
       </template>
@@ -22,20 +22,81 @@
 <script>
 import DesktopForm from "./DesktopForm.vue";
 import MobileForm from "./MobileForm.vue";
+import { preConfig } from "@/api/flow"
 export default {
   components: {
     DesktopForm,
     MobileForm
   },
   data() {
-    return {}
+    return {
+      info: [],
+      config: {},
+      subConfig: new Map(),
+
+      form: {},
+      fileList: {}
+    }
+  },
+  methods: {
+    generateForm(object,fields) {
+      fields.forEach(field => {
+        if(field.type === 'relation') {
+          object[field.name] = [{}]
+
+          this.generateForm(object[field.name][0], this.subConfig.get(field.sub_custom_model_id)?.customModel?.fields)
+        } else {
+          object[field.name] = ""
+        }
+      })
+    },
+    async getConfig() {
+      const loading = this.$loading({
+        lock: true,
+        text: '拼命加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.8)'
+      });
+      try {
+        const res = await preConfig(this.$route.query.id)
+        const { fields } = res?.customModel;
+        let subFormRequest = []
+        const getSubForm = (id) => {
+          subFormRequest.push(preConfig(id))
+        }
+        fields.forEach(field => {
+          if(field.sub_custom_model_id) {
+            getSubForm(field.sub_custom_model_id)
+          }
+        })
+        const subConfigs = await Promise.all(subFormRequest)
+        subConfigs.forEach(sub => {
+          if(sub.customModel?.id) {
+            this.subConfig.set(sub.customModel?.id, sub)
+          }
+        })
+        this.config = res;
+        this.generateForm(this.form, fields)
+        this.form = Object.assign({},this.form)
+        loading.close()
+      } catch (err) {
+        console.error(err)
+        this.$message.error("配置失败")
+        loading.close()
+      }
+    }
   },
-  methods: {},
   computed: {
     device() {
       return this.$store.state.app.device
+    },
+    fields() {
+      return this.config?.customModel?.fields || []
     }
   },
+  created() {
+    this.getConfig()
+  }
 }
 </script>
 
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index 98b6b2f..14eed47 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -1,17 +1,311 @@
 <template>
-  <div>
+  <div class="create-flow-container">
+    <div class="create-flow-card" v-for="(cate, i1) in cates" :key="cate.id">
+      <div class="create-flow-card__header">
+        <div class="create-flow-card__header--icon">
+          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M885.4 665.6H624.3c-16.7 0-31.8 10.3-37.5 26-10.7 29.7-39.1 51-72.5 51s-61.8-21.3-72.5-51c-5.6-15.7-20.8-26-37.5-26h-267c-22.1 0-40 17.9-40 40v211.3c0 22.1 17.9 40 40 40h748.1c22.1 0 40-17.9 40-40V705.6c0-22.1-17.9-40-40-40zM139.3 623.6V166.8c0-22.1 17.9-40 40-40h88v496.8h-128z" fill="#ffffff"></path><path d="M844.2 65.5H350.3c-22.1 0-40 17.9-40 40v518.6h110.3c19.3 0 51.9 25.5 61.8 52.9 4.8 13.5 17.7 22.5 32 22.5s27.2-9 32-22.5c11.7-32.6 43-54.5 77.9-54.5h251.1c3 0 5.9 0.2 8.8 0.5V105.5c0-22.1-17.9-40-40-40zM663.6 444.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z m0-110.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.6 21.6 21.5z m0-110.7c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z" fill="#ffffff"></path></svg>
+        </div>
+        <div class="create-flow-card__header--text">
+          {{ cate.name }}
+        </div>
+      </div>
+
+      <div class="create-flow-card__body">
+        <template v-for="(flow,i2) in cate.customer_models">
+          <template v-if="flow.flow_lock_remark">
+            <el-tooltip effect="dark" :content="flow.flow_lock_remark" placement="top">
+              <div class="create-flow-card__body-item" style="cursor: not-allowed;">
+                <div class="create-flow-card__body-item-left">
+                  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+                    <path d="M993.371558 489.73913c-19.080745-19.080745-44.521739-25.440994-69.962733-25.440993-25.440994 0-50.881988 12.720497-69.962733 31.801242l-356.173913 356.173913c-6.360248 6.360248-6.360248 12.720497-12.720497 19.080745 0 0 0 6.360248-6.360248 12.720497l-19.080746 69.962733c0 19.080745 0 31.801242 12.720497 50.881988 12.720497 12.720497 31.801242 19.080745 44.521739 19.080745h6.360249l76.322981-19.080745c6.360248 0 25.440994-6.360248 31.801242-12.720497l356.173913-356.173913c38.161491-44.521739 38.161491-108.124224 6.360249-146.285715z m-394.335404 451.57764l-63.602484 12.720497 12.720496-69.962733 292.571429-292.571428 50.881988 57.242236-292.571429 292.571428z m349.813665-349.813664l-12.720497 12.720496-50.881988-50.881987 12.720497-12.720497c6.360248-6.360248 12.720497-12.720497 25.440994-12.720497s25.440994 0 31.801242 6.360249c6.360248 6.360248 6.360248 12.720497 6.360249 25.440993s-6.360248 25.440994-12.720497 31.801243zM344.626216 941.31677h-228.968944c-19.080745 0-44.521739-19.080745-44.521739-44.521739v-788.670807c0-19.080745 19.080745-44.521739 44.521739-44.52174h750.509317c19.080745 0 44.521739 19.080745 44.521739 44.52174v133.565217c0 12.720497 12.720497 25.440994 31.801242 25.440994s31.801242-12.720497 31.801242-25.440994v-133.565217c0-63.602484-50.881988-108.124224-108.124223-108.124224h-750.509317c-57.242236 0-108.124224 44.521739-108.124224 101.763975V890.434783c0 57.242236 44.521739 101.763975 108.124224 101.763975h228.968944c19.080745 0 31.801242-12.720497 31.801242-31.801242 6.360248-19.080745-19.080745-19.080745-31.801242-19.080746z" fill="#bdbdbd"></path>
+                    <path d="M815.284601 190.807453c-6.360248-6.360248-12.720497-6.360248-25.440994-6.360248h-578.782608c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c19.080745 0 31.801242-12.720497 31.801243-31.801242 0-12.720497 0-25.440994-6.360249-25.440994zM211.060999 591.503106c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h337.093167c19.080745 0 31.801242-12.720497 31.801243-31.801242s-12.720497-31.801242-31.801243-31.801242h-337.093167zM815.284601 400.695652c0-19.080745-6.360248-31.801242-31.801242-31.801242h-572.42236c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c12.720497 0 25.440994-19.080745 25.440994-31.801242zM942.48957 286.21118c-19.080745 0-31.801242 12.720497-31.801242 25.440994v25.440994c0 12.720497 12.720497 25.440994 31.801242 25.440993s31.801242-12.720497 31.801242-25.440993v-25.440994c0-12.720497-19.080745-25.440994-31.801242-25.440994z" fill="#bdbdbd"></path>
+                  </svg>
+                </div>
+
+                <div class="create-flow-card__body-item-right">
+                  <div class="create-flow-card__body-item-right--title" style="color: #bdbdbd;">{{ flow.name }}</div>
+
+                  <div class="create-flow-card__body-item-right--value">
+                    <div class="done">
+                      <span :style="{ color: flow.my_apply_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_apply_total }}</span>
+                      <span>已申请</span>
+                    </div>
+                    <div class="todo">
+                      <span :style="{ color: flow.my_wait_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_wait_total }}</span>
+                      <span>待办</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tooltip>
+          </template>
+          <template v-else>
+            <div class="create-flow-card__body-item" @click="toCreate(flow,cate)">
+              <div class="create-flow-card__body-item-left">
+                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M993.371558 489.73913c-19.080745-19.080745-44.521739-25.440994-69.962733-25.440993-25.440994 0-50.881988 12.720497-69.962733 31.801242l-356.173913 356.173913c-6.360248 6.360248-6.360248 12.720497-12.720497 19.080745 0 0 0 6.360248-6.360248 12.720497l-19.080746 69.962733c0 19.080745 0 31.801242 12.720497 50.881988 12.720497 12.720497 31.801242 19.080745 44.521739 19.080745h6.360249l76.322981-19.080745c6.360248 0 25.440994-6.360248 31.801242-12.720497l356.173913-356.173913c38.161491-44.521739 38.161491-108.124224 6.360249-146.285715z m-394.335404 451.57764l-63.602484 12.720497 12.720496-69.962733 292.571429-292.571428 50.881988 57.242236-292.571429 292.571428z m349.813665-349.813664l-12.720497 12.720496-50.881988-50.881987 12.720497-12.720497c6.360248-6.360248 12.720497-12.720497 25.440994-12.720497s25.440994 0 31.801242 6.360249c6.360248 6.360248 6.360248 12.720497 6.360249 25.440993s-6.360248 25.440994-12.720497 31.801243zM344.626216 941.31677h-228.968944c-19.080745 0-44.521739-19.080745-44.521739-44.521739v-788.670807c0-19.080745 19.080745-44.521739 44.521739-44.52174h750.509317c19.080745 0 44.521739 19.080745 44.521739 44.52174v133.565217c0 12.720497 12.720497 25.440994 31.801242 25.440994s31.801242-12.720497 31.801242-25.440994v-133.565217c0-63.602484-50.881988-108.124224-108.124223-108.124224h-750.509317c-57.242236 0-108.124224 44.521739-108.124224 101.763975V890.434783c0 57.242236 44.521739 101.763975 108.124224 101.763975h228.968944c19.080745 0 31.801242-12.720497 31.801242-31.801242 6.360248-19.080745-19.080745-19.080745-31.801242-19.080746z" fill="#535353"></path><path d="M815.284601 190.807453c-6.360248-6.360248-12.720497-6.360248-25.440994-6.360248h-578.782608c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c19.080745 0 31.801242-12.720497 31.801243-31.801242 0-12.720497 0-25.440994-6.360249-25.440994zM211.060999 591.503106c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h337.093167c19.080745 0 31.801242-12.720497 31.801243-31.801242s-12.720497-31.801242-31.801243-31.801242h-337.093167zM815.284601 400.695652c0-19.080745-6.360248-31.801242-31.801242-31.801242h-572.42236c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c12.720497 0 25.440994-19.080745 25.440994-31.801242zM942.48957 286.21118c-19.080745 0-31.801242 12.720497-31.801242 25.440994v25.440994c0 12.720497 12.720497 25.440994 31.801242 25.440993s31.801242-12.720497 31.801242-25.440993v-25.440994c0-12.720497-19.080745-25.440994-31.801242-25.440994z" fill="#535353"></path></svg>
+              </div>
+
+              <div class="create-flow-card__body-item-right">
+                <div class="create-flow-card__body-item-right--title">{{ flow.name }}</div>
+
+                <div class="create-flow-card__body-item-right--value">
+                  <div class="done">
+                    <span :style="{ color: flow.my_apply_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_apply_total }}</span>
+                    <span>已申请</span>
+                  </div>
+                  <div class="todo">
+                    <span :style="{ color: flow.my_wait_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_wait_total }}</span>
+                    <span>待办</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { flow } from "@/api/flow"
 export default {
   data() {
-    return {}
+    return {
+      cates: []
+    }
+  },
+  methods: {
+    async getFlow() {
+      try {
+        const res = await flow()
+        this.cates = res.cates || [];
+        console.log(res)
+      } catch (err) {
+        console.error(err)
+      }
+    },
+
+    toCreate(flow,cate) {
+      if(flow.url) {
+        window.open(flow.url,'_blank')
+      } else {
+        this.$router.push({
+          path: '/flow/create',
+          query: {
+            id: flow.id
+          }
+        })
+      }
+    }
   },
-  methods: {},
   computed: {},
+  created() {
+    this.getFlow()
+  }
 }
 </script>
 
 <style scoped lang="scss">
+.create-flow-container {
+  column-count: 2;
+  column-gap: 10px;
+  padding: 20px;
+}
+
+.create-flow-container .create-flow-card {
+  border-radius: 10px;
+  filter: drop-shadow(0.5px 0.866px 14.5px rgba(59,66,82,0.11));
+  background-color: #ffffff;
+  break-inside: avoid;
+  grid-row-start: auto;
+}
+.create-flow-card + .create-flow-card {
+  margin-top: 10px;
+}
+.create-flow-card__header {
+  display: flex;
+  align-items: center;
+  padding: 16px 0 16px 16px;
+}
+.create-flow-card:nth-child(5n+1) .create-flow-card__header--icon {
+  filter: drop-shadow(0 0 5px rgba(254,102,94,0.35));
+  background-image: linear-gradient(90deg, #ffa175 0%, #fd635d 99%, #fd635d 100%);
+}
+.create-flow-card:nth-child(5n+2) .create-flow-card__header--icon {
+  filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
+  background-color: #0279fd;
+}
+.create-flow-card:nth-child(5n+3) .create-flow-card__header--icon {
+  filter: drop-shadow(1.462px 4.782px 10px rgba(11,196,208,0.35));
+  background-image: linear-gradient(90deg, #4bcbf1 0%, #3ba7ef 99%, #3ba7ef 100%);
+}
+.create-flow-card:nth-child(5n+4) .create-flow-card__header--icon {
+  filter: drop-shadow(1.462px 4.782px 10px rgba(255,159,60,0.35));
+  background-image: linear-gradient(90deg, #ffb737 0%, #ff9f3b 100%);
+}
+.create-flow-card:nth-child(5n) .create-flow-card__header--icon {
+  filter: drop-shadow(1.462px 4.782px 10px rgba(195,89,251,0.35));
+  background-image: linear-gradient(90deg, #d38ff3 0%, #c359fb 99%, #c359fb 100%);
+}
+.create-flow-card__header--icon {
+  flex-shrink: 0;
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.create-flow-card__header--text {
+  flex: 1;
+  font-size: 18px;
+  letter-spacing: 1px;
+  color: #3b4252;
+  white-space: nowrap;
+  margin-left: 15px;
+  padding-bottom: 8px;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.create-flow-card:nth-child(5n+1) .create-flow-card__header--text::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #ffa175 0%, #fd635d 34%, #fd635d 37%,#dbdbdd 37%,#dbdbdd 100%);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.create-flow-card:nth-child(5n+2) .create-flow-card__header--text::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #0279fd 0%, #0279fd 37%,#dbdbdd 37%,#dbdbdd 100%);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.create-flow-card:nth-child(5n+3) .create-flow-card__header--text::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #4bcbf1 0%, #3ba7ef 34%,#3ba7ef 37%,#dbdbdd 37%,#dbdbdd 100%);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.create-flow-card:nth-child(5n+4) .create-flow-card__header--text::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #ffb737 0%, #ff9f3b 34%,#ff9f3b 37%,#dbdbdd 37%,#dbdbdd 100%);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.create-flow-card:nth-child(5n) .create-flow-card__header--text::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #d38ff3 0%, #c359fb 34%,#c359fb 37%,#dbdbdd 37%,#dbdbdd 100%);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.create-flow-card__body {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+  padding: 0 16px 20px 16px;
+}
+.create-flow-card__body-item {
+  border-radius: 10px;
+  background-color: #f5f7fa;
+  border: 1px solid rgba(227,234,240,0.5);
+  padding: 10px;
+  display: flex;
+  align-items: center;
+}
+.create-flow-card__body-item-left {
+  background: #fff;
+  border-radius: 100%;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.create-flow-card__body-item-right {
+  flex: 1;
+}
+.create-flow-card__body-item-right--title {
+  color: #000000;
+}
+.create-flow-card__body-item-right--value {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 18px;
+  position: relative;
+}
+.create-flow-card__body-item-right--value:has(.todo)::after {
+  content: "";
+  width: 1px;
+  background: #ededee;
+  left: calc(50%);
+  position: absolute;
+  top: 10%;
+  bottom: 10%;
+}
+.create-flow-card__body-item-right--value .done,.create-flow-card__body-item-right--value .todo {
+  flex-basis: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+.create-flow-card__body-item-right--value .done > span:nth-child(1),.create-flow-card__body-item-right--value .todo > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 600;
+}
+.create-flow-card__body-item-right--value .done > span:nth-child(2),.create-flow-card__body-item-right--value .todo > span:nth-child(2) {
+  font-size: 11px;
+  color: #999999;
+  word-break: keep-all;
+}
+
+@media (max-width: 992px) {
+  .create-flow-container {
+    display: flex;
+    flex-direction: column;
+  }
+  .create-flow-card__body {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .create-flow-card__header--icon {
+    width: 40px;
+    height: 40px;
+  }
+  .create-flow-card__header--text {
+    font-size: 16px;
+  }
+  .create-flow-card__body-item-right--title {
+    font-size: 14px;
+  }
+  .create-flow-card__body-item-left {
+    margin-right: 6px;
+  }
+  .create-flow-card__body-item-left {
+    width: 30px;
+    height: 30px;
+  }
+  .create-flow-card__body-item {
+    padding: 10px 8px;
+  }
+}
 </style>