优化

src/views/demo/form-design/components/VFormCreate/components/FormRender.vue

@@ -43,23 +43,51 @@
       </Col>
     </Row>
   </template>
-  <VFormItem
+  <template v-else-if="['Card'].includes(schema.component)">
-    v-else
+    <a-row class="grid-row" style="width:100%">
-    :formConfig="formConfig"
+      <a-col class="grid-col" :span="schema.colProps.span">
-    :schema="schema"
+        <a-card :title="schema.label">
-    :formData="formData"
+          <a-row class="grid-row">
-    :setFormModel="setFormModel"
+            <a-col
-    @change="emit('change', { schema: schema, value: $event, subTableList: subTableList })"
+              class="grid-col"
-    @submit="emit('submit', schema)"
+              v-for="(colItem, index) in schema.columns"
-    @reset="emit('reset')"
+              :key="index"
-  >
+              :span="colItem.span"
-    <template
+            >
-      v-if="schema.componentProps && schema.componentProps.slotName"
+              <template  v-for="(item, k) in colItem.children" :key="k">
-      #[schema.componentProps!.slotName]
+                <FormRender
+                  :schema="item"
+                  :formData="formData"
+                  :formConfig="formConfig"
+                  :setFormModel="setFormModel"
+                />
+              </template>
+              
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+  </template>
+  <template v-else>
+    <VFormItem
+      v-if="(isCreateOrModifyComponent && schema.display) || !isCreateOrModifyComponent"
+      :formConfig="formConfig"
+      :schema="schema"
+      :formData="formData"
+      :setFormModel="setFormModel"
+      @change="emit('change', { schema: schema, value: $event, subTableList: subTableList })"
+      @submit="emit('submit', schema)"
+      @reset="emit('reset')"
     >
-      <slot :name="schema.componentProps!.slotName"></slot>
+      <template
-    </template>
+        v-if="schema.componentProps && schema.componentProps.slotName"
-  </VFormItem>
+        #[schema.componentProps!.slotName]
+      >
+        <slot :name="schema.componentProps!.slotName"></slot>
+      </template>
+    </VFormItem>
+  </template>
 </template>
 <script setup lang="ts">
   import { ref, PropType } from 'vue';
@@ -90,7 +118,7 @@
   });
   const emit = defineEmits(['change', 'submit', 'reset']);
   const scrollValue = ref();
-
+  const isCreateOrModifyComponent = ['createuser','createtime','modifyuser','modifytime'].includes(props.schema.type)
   let subTableColumns = ref([
     {
       dataIndex: 'setting',

src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue

@@ -87,6 +87,51 @@
           <a-input v-model:value="formConfig.currentItem.field" placeholder="请输入" />
         </FormItem>
       </Form>
+      <Form
+        label-align="left"
+        layout="vertical"
+        v-else-if="
+          formConfig.currentItem.component == 'Card'
+        "
+      >
+        <FormItem label="标签">
+          <a-input v-model:value="formConfig.currentItem.label" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="字段标识">
+          <a-input v-model:value="formConfig.currentItem.field" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="显示阴影">
+          <a-select
+            ref="select"
+            v-model:value="formConfig.currentItem.shadow"
+            style="width: 100%"
+          >
+            <a-select-option value="always">总是</a-select-option>
+            <a-select-option value="hover">悬浮显示</a-select-option>
+            <a-select-option value="never">不显示</a-select-option>
+          </a-select>
+        </FormItem>
+        <FormItem label="自定义类">
+          <a-input v-model:value="formConfig.currentItem.myclass" placeholder="请输入" />
+        </FormItem>
+      </Form>
+      <Form
+        label-align="left"
+        layout="vertical"
+        v-else-if="
+        ['CreateUser','ModifyUser','CreateTime','ModifyTime'].includes(formConfig.currentItem.component)
+        "
+      >
+        <FormItem label="标签">
+          <a-input v-model:value="formConfig.currentItem.label" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="字段标识">
+          <a-input v-model:value="formConfig.currentItem.field" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="是否可见">
+          <a-switch v-model:checked="formConfig.currentItem.display" />
+        </FormItem>
+      </Form>
       <Form v-else label-align="left" layout="vertical">
         <div v-for="item of baseFormItemProps" :key="item.name">
           <FormItem :label="item.label" v-if="showProps(item.exclude)">

src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue

@@ -5,7 +5,7 @@
 
 <template>
   <Col v-bind="colPropsComputed">
-    <template v-if="['Grid'].includes(schema.component)">
+    <template v-if="['Grid','Card'].includes(schema.component)">
       <div
         class="grid-box"
         :class="{ active: schema.key === currentItem.key }"

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

@@ -52,6 +52,21 @@
         >
           {{ schema.label }}
         </a-button>
+        <div v-else-if="['CreateUser','ModifyUser'].includes(schema.component)">
+          <a-input v-model:value="loginUserName" readOnly>
+          <template #prefix>
+            <user-outlined />
+          </template>
+        </a-input>
+        </div>
+        <div v-else-if="['CreateTime','ModifyTime'].includes(schema.component)">
+          <a-input v-model:value="nowTime" readOnly>
+          <template #prefix>
+            <user-outlined />
+          </template>
+        </a-input>
+        </div>
+
         <component
           v-else
           class="v-form-item-wrapper"
@@ -78,6 +93,8 @@
   import { Tooltip, FormItem, Divider, Col } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { useFormModelState } from '../../hooks/useFormDesignState';
+  import { UserOutlined } from '@ant-design/icons-vue'
+  import dayjs from 'dayjs';
 
   export default defineComponent({
     name: 'VFormItem',
@@ -107,6 +124,8 @@
     setup(props, { emit }) {
       const state = reactive({
         componentMap,
+        loginUserName: localStorage.getItem('fireUserLoginName'),
+        nowTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
       });
       const { formModel: formData1, setFormModel } = useFormModelState();
       const colPropsComputed = computed(() => {

src/views/demo/form-design/core/formItemConfig.ts

@@ -475,6 +475,42 @@ export const baseComponents: IVFormComponent[] = [
       slotName: 'slotName',
     },
   },
+  {
+    component:'CreateUser',
+    type: 'createuser',
+    label: '创建人员',
+    icon: 'mdi:account-check',
+    colProps: { span: 24 },
+    field: '',
+    componentProps: {},
+  },
+  {
+    component:'ModifyUser',
+    type: 'modifyuser',
+    label: '修改人员',
+    icon: 'mdi:account-edit',
+    colProps: { span: 24 },
+    field: '',
+    componentProps: {},
+  },
+  {
+    component:'CreateTime',
+    type: 'createtime',
+    label: '创建时间',
+    icon: 'ic:outline-event-available',
+    colProps: { span: 24 },
+    field: '',
+    componentProps: {},
+  },
+  {
+    component:'ModifyTime',
+    type: 'modifytime',
+    label: '修改时间',
+    icon: 'ic:outline-event',
+    colProps: { span: 24 },
+    field: '',
+    componentProps: {},
+  },
 ];
 
 // https://next.antdv.com/components/transfer-cn
@@ -531,4 +567,21 @@ export const layoutComponents: IVFormComponent[] = [
       gutter: 0,
     },
   },
+  {
+    field: '',
+    component: 'Card',
+    label: '卡片布局',
+    icon: 'ant-design:tags-outlined',
+    componentProps: {},
+    columns: [
+      {
+        span: 24,
+        children: [],
+      },
+    ],
+    colProps: { span: 24 },
+    options: {
+      gutter: 0,
+    },
+  },
 ];