From 482600d5e4134145441b57d9891833c6810942d1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-CUI7KST\\HXGK" <1501216501@qq.com>
Date: Mon, 18 Mar 2024 14:09:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/components.d.ts                     |  33 +-
 .../basicinformation/appraisalrecord.vue      |   0
 src/views/sysworkflow/codepage/cardadd.vue    | 177 ++++++
 src/views/sysworkflow/codepage/cardedit.vue   | 152 +++++
 src/views/sysworkflow/codepage/page.vue       | 552 ++++++++++--------
 .../codepage/page_black20240318.vue           | 241 ++++++++
 6 files changed, 896 insertions(+), 259 deletions(-)
 create mode 100644 src/views/hr/archives/basicinformation/appraisalrecord.vue
 create mode 100644 src/views/sysworkflow/codepage/cardadd.vue
 create mode 100644 src/views/sysworkflow/codepage/cardedit.vue
 create mode 100644 src/views/sysworkflow/codepage/page_black20240318.vue

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index e160723dd..fed5fbc77 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -21,12 +21,6 @@ declare module '@vue/runtime-core' {
     DesignLayoutPage: typeof import('./../components/DesignForm/designLayout/designLayoutPage.vue')['default']
     DiyIconfont: typeof import('./../components/DesignForm/public/expand/diy-iconfont.vue')['default']
     DragControl: typeof import('./../components/DesignForm/dragControl.vue')['default']
-    ElAffix: typeof import('element-plus/es')['ElAffix']
-<<<<<<< HEAD
-    ElAlert: typeof import('element-plus/es')['ElAlert']
-    ElAside: typeof import('element-plus/es')['ElAside']
-=======
->>>>>>> v7_master
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -53,7 +47,6 @@ declare module '@vue/runtime-core' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
-    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -64,14 +57,10 @@ declare module '@vue/runtime-core' {
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
+    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
@@ -80,11 +69,8 @@ declare module '@vue/runtime-core' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
@@ -108,29 +94,14 @@ declare module '@vue/runtime-core' {
     HeadToolsNew: typeof import('./../components/DesignForm/public/headToolsNew.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
-<<<<<<< HEAD
-    IEpCollection: typeof import('~icons/ep/collection')['default']
     IEpDelete: typeof import('~icons/ep/delete')['default']
-    IEpDownload: typeof import('~icons/ep/download')['default']
     IEpEdit: typeof import('~icons/ep/edit')['default']
-    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
-    IEpMinus: typeof import('~icons/ep/minus')['default']
-    IEpOperation: typeof import('~icons/ep/operation')['default']
-    IEpPicture: typeof import('~icons/ep/picture')['default']
     IEpPlus: typeof import('~icons/ep/plus')['default']
-    IEpPosition: typeof import('~icons/ep/position')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
-    IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
-    IEpTop: typeof import('~icons/ep/top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
-    IEpUser: typeof import('~icons/ep/user')['default']
-    IEpView: typeof import('~icons/ep/view')['default']
-=======
-    IEpSetting: typeof import('~icons/ep/setting')['default']
->>>>>>> v7_master
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
     List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']
diff --git a/src/views/hr/archives/basicinformation/appraisalrecord.vue b/src/views/hr/archives/basicinformation/appraisalrecord.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/views/sysworkflow/codepage/cardadd.vue b/src/views/sysworkflow/codepage/cardadd.vue
new file mode 100644
index 000000000..f504c4cf7
--- /dev/null
+++ b/src/views/sysworkflow/codepage/cardadd.vue
@@ -0,0 +1,177 @@
+<!-- 添加卡片 -->
+<script setup>
+import { ref,computed,reactive,watch,defineProps,toRef} from 'vue';
+import { ElDrawer, ElMessageBox } from 'element-plus'
+const props = defineProps({
+  visible:Boolean
+});
+const emits = defineEmits(["update:visible", "data"]);
+
+const formLabelWidth = '80px'
+let timer
+const dialog = ref(false)
+const loading = ref(false)
+
+const form = reactive({
+  data:{
+    name: '',
+    details:'',
+    region: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    type: [],
+    resource: '',
+    desc: ''
+  },
+  visible: computed({
+    get(){
+      return props.visible
+    },
+    set(val) {
+      emits('update:visible', val)
+    }
+  })
+})
+const drawerRefadd = ref();
+
+// 原element表单提交
+const onClick = () => {
+  if (drawerRefadd.value && typeof drawerRefadd.value.close === 'function') {
+    drawerRefadd.value.close();
+  } else {
+    console.error('drawerRef.value值为空、未定义或没有close方法');
+  }
+}
+// 修改表单提交
+// const onSubmit = () => {
+//   // 验证表单数据...
+//   if (!form.data.name) {
+//     ElMessage.error("标题不能为空");
+//     return;
+//   }
+//   // 模拟向本地数据添加新的卡片数据
+//   const newCard = { ...form.data };
+//   // 关闭添加卡片的抽屉
+//   drawerRefadd.value.close();
+//   // 将新卡片数据发送回父组件
+//   emits('data', newCard);
+//   // 清空表单以便下次使用
+//   form.data.name = '';
+//   // 提交成功后，关闭loading状态
+//   loading.value = false;
+// };
+  
+// };
+// 关闭
+const handleClose = () => {
+  if (loading.value) {
+    return
+  }
+  ElMessageBox.confirm(
+    '你是否要提交数据?',
+    "温馨提示",
+     {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      loading.value = true
+      timer = setTimeout(() => {
+        // done() 不能用done
+        // 动画关闭需要一定的时间
+        setTimeout(() => {
+          loading.value = false
+          emits('update:visible', false)
+        }, 400)
+      }, 2000)
+    })
+    .catch(() => {
+      // catch error
+      cancelForm();
+    })
+}
+// 取消
+const cancelForm = () => {
+  loading.value = false
+  dialog.value = false
+  emits('update:visible', false)
+  clearTimeout(timer)
+
+}
+
+</script>
+
+<template>
+    <el-drawer
+    ref="drawerRefadd"
+    :modelValue="visible"
+    title="添加"
+    :before-close="handleClose"
+    direction="ltr"
+    class="demo-drawer"
+    size="400px"
+    >
+    <div class="demo-drawer__content">
+      <el-form :model="form">
+        <el-form-item label="标题" :label-width="formLabelWidth">
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item>
+          <div class="picture">
+            <el-image :src></el-image>
+            <div>
+              <input
+              type="file"
+              class="upinput"
+              ref="file"
+              />
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="demo-drawer__footer">
+        <el-button @click="cancelForm">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="onClick">
+        {{loading ? '正在提交 ...' : '提交'}}
+        </el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped>
+.el-form {
+  margin: 30px 15px 10px 0;
+  .el-image {
+    width: 120px;
+    height: 120px;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+  }
+}
+.picture {
+  display: flex;
+  justify-content: space-around;
+  .uppicture {
+    flex: 1;
+    position: relative;
+    border: 1px solid #ccc;
+    input {
+      width: 100%;
+      height: 100%;
+      vertical-align: middle;
+      opacity: 0;
+    }
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 30px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sysworkflow/codepage/cardedit.vue b/src/views/sysworkflow/codepage/cardedit.vue
new file mode 100644
index 000000000..e09c0bc29
--- /dev/null
+++ b/src/views/sysworkflow/codepage/cardedit.vue
@@ -0,0 +1,152 @@
+<!-- 编辑卡片 -->
+<script setup>
+import { ref,computed,reactive} from 'vue';
+import { ElDrawer, ElMessageBox } from 'element-plus'
+const props = defineProps({
+  visible:Boolean
+});
+const emits = defineEmits(["update:visible", "data"]);
+
+const formLabelWidth = '80px'
+let timer
+const dialog = ref(false)
+const loading = ref(false)
+
+const form = reactive({
+  data:{
+    name: '',
+    details:'',
+    region: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    type: [],
+    resource: '',
+    desc: ''
+  },
+  visible: computed({
+    get(){
+      return props.visible
+    },
+    set(val) {
+      emits('update:visible', val)
+    }
+  })
+})
+const drawerRefedit = ref();
+const onClick = () => {
+  if (drawerRefedit.value && typeof drawerRefedit.value.close === 'function') {
+    drawerRefedit.value.close();
+  } else {
+    console.error('drawerRefedit.value值为空、未定义或没有close方法');
+  }
+}
+
+const handleClose = () => {
+  if (loading.value) {
+    return
+  }
+  ElMessageBox.confirm(
+    '你是否要提交数据?',
+    "温馨提示",
+     {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      loading.value = true
+      timer = setTimeout(() => {
+        // done()
+        // 动画关闭需要一定的时间
+        setTimeout(() => {
+          loading.value = false
+          emits('update:visible', false)
+        }, 400)
+      }, 2000)
+    })
+    .catch(() => {
+      // catch error
+      cancelForm();
+    })
+}
+// 取消
+const cancelForm = () => {
+  loading.value = false
+  dialog.value = false
+  emits('update:visible', false)
+  clearTimeout(timer)
+}
+</script>
+<template>
+     <el-drawer
+    ref="drawerRefedit"
+    :modelValue="visible"
+    title="编辑"
+    :before-close="handleClose"
+    direction="ltr"
+    class="demo-drawer"
+    size="400px"
+    >
+    <div class="demo-drawer__content">
+      <el-form :model="form">
+        <el-form-item label="标题" :label-width="formLabelWidth">
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item>
+          <div class="picture">
+            <el-image :src></el-image>
+            <div>
+              <input
+              type="file"
+              class="upinput"
+              ref="file"
+              />
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="demo-drawer__footer">
+        <el-button @click="cancelForm">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="onClick">
+        {{loading ? '正在提交 ...' : '提交'}}
+        </el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped>
+ .el-form {
+  margin: 30px 15px 10px 0;
+  .el-image {
+    width: 120px;
+    height: 120px;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+  }
+}
+.picture {
+  display: flex;
+  justify-content: space-around;
+  .uppicture {
+    flex: 1;
+    position: relative;
+    border: 1px solid #ccc;
+    input {
+      width: 100%;
+      height: 100%;
+      vertical-align: middle;
+      opacity: 0;
+    }
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 30px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sysworkflow/codepage/page.vue b/src/views/sysworkflow/codepage/page.vue
index b47deb9b1..bdaccd91e 100644
--- a/src/views/sysworkflow/codepage/page.vue
+++ b/src/views/sysworkflow/codepage/page.vue
@@ -3,239 +3,335 @@
 @ 时间: 2024-02-20 08:59:00
 @ 备注: 实验表单
 -->
-<script lang='ts' setup>
+<!-- 应用管理父组件 -->
+<script setup>
+import cardedit from './cardedit.vue';
+import cardadd from './cardadd.vue';
+import {ref,onMounted,onUnmounted,watch} from 'vue';
+import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
 
-const size = ref('default')
-const labelPosition = ref('right')
+const props = defineProps({
+  visible:Boolean
+});
+// 弹窗状态
+const drawerRefadd = ref();
+const drawerRefedit = ref(false)
+// 卡片数据
+const cardData = ref([]);
+const emits = defineEmits(["update:visible", "data"]);
 
-const ruleForm = reactive<any>({
-	name: 'Hello',
-  region: '',
-  count: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  type: [],
-  resource: '',
-  desc: '',
-})
-
-const editMycontRules = reactive({
-	name: [{ required: true, message: "请输入姓名", trigger: "blur" }],	
-})
-const editPostFormRef = ref(ElForm);	//编辑表单
-const submitForm = async (formEl: FormInstance | undefined) => {
-	editPostFormRef.value.validate((isValid: boolean) => {
-		if (isValid) {
-
-		}
-	})
+//添加
+const opencardadd = () => {
+  drawerRefadd.value = true;
+};
+//编辑
+const opencardedit = (index) => {
+	drawerRefedit.value = true;
 }
-const options = Array.from({ length: 10000 }).map((_, idx) => ({
-  value: `${idx + 1}`,
-  label: `${idx + 1}`,
-}))
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-}
-const inline = ref(false)
-const labelWidth = ref<any>("")
-const labelSuffix = ref<any>("")
-const hideRequiredAsterisk = ref(false)
-const requireAsteriskPosition  = ref('right')
-const showMessage =  ref(true)
-const inlineMessage = ref(false)
-const statusIcon = ref(false)
+//删除
+const deleteCard = (index) => {
+  cardData.value.splice(index, 1);
+  emits('data', cardData.value);
+};
 </script>
 <template>
-	<el-row>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">对齐方式：</el-col>
-				<el-col :span="16">
-					<el-radio-group v-model="labelPosition" label="label position">
-						<el-radio-button label="left">Left</el-radio-button>
-						<el-radio-button label="right">Right</el-radio-button>
-						<el-radio-button label="top">Top</el-radio-button>
-					</el-radio-group>	
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">尺寸控制：</el-col>
-				<el-col :span="16">
-					<el-radio-group v-model="size" label="size control">
-						<el-radio-button label="large">large</el-radio-button>
-						<el-radio-button label="default">default</el-radio-button>
-						<el-radio-button label="small">small</el-radio-button>
-					</el-radio-group>
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">行内表单模式：</el-col>
-				<el-col :span="16">
-					<el-switch v-model="inline" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">标签宽度：</el-col>
-				<el-col :span="16">
-					<el-input v-model="labelWidth" placeholder="Please input">
-						<template #append>PX</template>
-					</el-input>
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">标签后缀：</el-col>
-				<el-col :span="16">
-					<el-input v-model="labelSuffix" placeholder="Please input">
-					</el-input>
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">是否隐藏必填字段标签旁边的红色星号。：</el-col>
-				<el-col :span="16">
-					<el-switch v-model="hideRequiredAsterisk" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
-		
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">星号的位置</el-col>
-				<el-col :span="16">
-					<el-radio-group v-model="requireAsteriskPosition" label="label position">
-						<el-radio-button label="left">Left</el-radio-button>
-						<el-radio-button label="right">Right</el-radio-button>
-					</el-radio-group>	
-				</el-col>
-			</el-row>
-		
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">是否显示校验错误信息:</el-col>
-				<el-col :span="16">
-					<el-switch v-model="showMessage" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">是否以行内形式展示校验信息:</el-col>
-				<el-col :span="16">
-					<el-switch v-model="inlineMessage" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">是否在输入框中显示校验结果反馈图标:</el-col>
-				<el-col :span="16">
-					<el-switch v-model="statusIcon" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-		
-			<el-form
-				ref="editPostFormRef"
-				:model="ruleForm"
-				:label-width="labelWidth"
-				:label-position="labelPosition"
-				:size="size"
-				:rules="editMycontRules"
-				:inline="inline"
-				:label-suffix="labelSuffix"
-				:hide-required-asterisk="hideRequiredAsterisk"
-				:require-asterisk-position="requireAsteriskPosition"
-				:show-message="showMessage"
-				:inline-message="inlineMessage"
-				:status-icon="statusIcon"
-				form-row-2
-			>
-				<el-form-item label="Activity name" prop="name">
-					<el-input v-model="ruleForm.name" />
-				</el-form-item>
-				<el-form-item label="Activity zone" prop="region">
-					<el-select v-model="ruleForm.region" placeholder="Activity zone">
-						<el-option label="Zone one" value="shanghai" />
-						<el-option label="Zone two" value="beijing" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="Activity count" prop="count">
-					<el-select-v2
-						v-model="ruleForm.count"
-						placeholder="Activity count"
-						:options="options"
-					/>
-				</el-form-item>
-				<el-form-item label="Activity time" required>
-					<el-col :span="11">
-						<el-form-item prop="date1">
-						<el-date-picker
-							v-model="ruleForm.date1"
-							type="date"
-							label="Pick a date"
-							placeholder="Pick a date"
-							style="width: 100%"
-						/>
-						</el-form-item>
-					</el-col>
-					<el-col class="text-center" :span="2">
-						<span class="text-gray-500">-</span>
-					</el-col>
-					<el-col :span="11">
-						<el-form-item prop="date2">
-							<el-time-picker
-								v-model="ruleForm.date2"
-								label="Pick a time"
-								placeholder="Pick a time"
-								style="width: 100%"
-							/>
-						</el-form-item>
-					</el-col>
-				</el-form-item>
-				<el-form-item label="Instant delivery" prop="delivery">
-					<el-switch v-model="ruleForm.delivery" />
-				</el-form-item>
-				<el-form-item label="Activity type" prop="type">
-					<el-checkbox-group v-model="ruleForm.type">
-						<el-checkbox label="Online activities" name="type" />
-						<el-checkbox label="Promotion activities" name="type" />
-						<el-checkbox label="Offline activities" name="type" />
-						<el-checkbox label="Simple brand exposure" name="type" />
-					</el-checkbox-group>
-				</el-form-item>
-				<el-form-item label="Resources" prop="resource">
-					<el-radio-group v-model="ruleForm.resource">
-						<el-radio label="Sponsorship" />
-						<el-radio label="Venue" />
-					</el-radio-group>
-				</el-form-item>
-				<el-form-item label="Activity form" prop="desc">
-					<el-input v-model="ruleForm.desc" type="textarea" />
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="submitForm(ruleFormRef)">
-						Create
-					</el-button>
-					<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
-				</el-form-item>
-			</el-form>
-		</el-col>
-	</el-row>
+  <cardadd v-model:visible="drawerRefadd" :keyval="props.visible"/>
+  <cardedit v-model:visible="drawerRefedit" :keyval="props.visible" />
+  <el-row :gutter="10">
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple" >
+          <el-card class="cardlarge">
+            <template #header>
+              <div class="cardhead-large">
+                  <el-row class="block-col-2">
+                    <el-col style="text-align: right;">
+                      <el-dropdown>
+                        <span class="el-dropdown-link">
+                          <el-icon><MoreFilled /></el-icon>
+                        </span>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item @click="opencardadd" >添加</el-dropdown-item>
+                            <el-dropdown-item >编辑</el-dropdown-item>
+                            <el-dropdown-item @click="deleteCard(index)">删除</el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </el-col>
+                    <el-col style="text-align: left;">
+                      <span>标题一</span>
+                    </el-col>
+                  </el-row>
+              </div>
+            </template>
+            <div class="grid-content ep-bg-purple" >
+              <el-row :gutter="10" >
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片1</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit(index)"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button>
+                          </div>
+                        
+                      </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片2</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                  
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片3</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片4</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片5</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片6</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片7</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片8</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../assets/image/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片9</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+              </el-row>
+
+            </div>
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> 
+        <div class="grid-content ep-bg-purple-light">
+          <el-card class="cardlarge">
+            
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple">
+          <el-card class="cardlarge">
+            
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple-light">
+          <el-card class="cardlarge">
+
+          </el-card>
+        </div>
+    </el-col>
+  </el-row>
+
+<!-- 分页 -->
+  <div class="example-pagination-block">
+    <div class="example-demonstration"></div>
+    <el-pagination layout="prev, pager, next" :total="50" />
+  </div>
+
 </template>
-<style  lang='scss' scoped>
+<style scoped>
+/* 小卡片 */
+.cardpattern{
+  padding-bottom: 0px;
+  margin-bottom: 10px;
+  min-width: 100px;
+}
+/* 小卡片标题 */
+.cardhead{
+  padding: 10px;
+  font-size: 15px;
+}
+/* 大卡片 */
+.cardlarge{
+  max-width: 480px;
+}
+/* 大卡片标题 */
+.cardhead-large{
+  font-size: 20px;
+}
+
+/* 按钮整体 */
+.bottom {
+  margin-top: 20px;
+  line-height: 10px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  
+}
+/* 单个按钮 */
+.button {
+  padding: 0px;
+  min-height: auto;
+  margin-bottom: 1px;
+}
+/* 图片 */
+.picture {
+  height: 100%;
+  min-height: 50px;
+  max-height: 100px;
+  display: block;
+  width: 100%;
+  min-width: 50px;
+}
+
+.el-col {
+  border-radius: 4px;
+}
 
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+
+.app_box{
+	margin: 15px 0 0 0px;
+}
+
+.block-col-2 .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.block-col-2 .el-dropdown-link {
+  display: flex;
+  align-items: center;
+}
+/* 分页 */
+.example-pagination-block + .example-pagination-block {
+  margin-top: 10px;
+}
+.example-pagination-block .example-demonstration {
+  margin-bottom: 16px;
+}
 </style>
diff --git a/src/views/sysworkflow/codepage/page_black20240318.vue b/src/views/sysworkflow/codepage/page_black20240318.vue
new file mode 100644
index 000000000..b47deb9b1
--- /dev/null
+++ b/src/views/sysworkflow/codepage/page_black20240318.vue
@@ -0,0 +1,241 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-02-20 08:59:00
+@ 备注: 实验表单
+-->
+<script lang='ts' setup>
+
+const size = ref('default')
+const labelPosition = ref('right')
+
+const ruleForm = reactive<any>({
+	name: 'Hello',
+  region: '',
+  count: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const editMycontRules = reactive({
+	name: [{ required: true, message: "请输入姓名", trigger: "blur" }],	
+})
+const editPostFormRef = ref(ElForm);	//编辑表单
+const submitForm = async (formEl: FormInstance | undefined) => {
+	editPostFormRef.value.validate((isValid: boolean) => {
+		if (isValid) {
+
+		}
+	})
+}
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+  value: `${idx + 1}`,
+  label: `${idx + 1}`,
+}))
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+const inline = ref(false)
+const labelWidth = ref<any>("")
+const labelSuffix = ref<any>("")
+const hideRequiredAsterisk = ref(false)
+const requireAsteriskPosition  = ref('right')
+const showMessage =  ref(true)
+const inlineMessage = ref(false)
+const statusIcon = ref(false)
+</script>
+<template>
+	<el-row>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">对齐方式：</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="labelPosition" label="label position">
+						<el-radio-button label="left">Left</el-radio-button>
+						<el-radio-button label="right">Right</el-radio-button>
+						<el-radio-button label="top">Top</el-radio-button>
+					</el-radio-group>	
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">尺寸控制：</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="size" label="size control">
+						<el-radio-button label="large">large</el-radio-button>
+						<el-radio-button label="default">default</el-radio-button>
+						<el-radio-button label="small">small</el-radio-button>
+					</el-radio-group>
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">行内表单模式：</el-col>
+				<el-col :span="16">
+					<el-switch v-model="inline" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">标签宽度：</el-col>
+				<el-col :span="16">
+					<el-input v-model="labelWidth" placeholder="Please input">
+						<template #append>PX</template>
+					</el-input>
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">标签后缀：</el-col>
+				<el-col :span="16">
+					<el-input v-model="labelSuffix" placeholder="Please input">
+					</el-input>
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否隐藏必填字段标签旁边的红色星号。：</el-col>
+				<el-col :span="16">
+					<el-switch v-model="hideRequiredAsterisk" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">星号的位置</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="requireAsteriskPosition" label="label position">
+						<el-radio-button label="left">Left</el-radio-button>
+						<el-radio-button label="right">Right</el-radio-button>
+					</el-radio-group>	
+				</el-col>
+			</el-row>
+		
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否显示校验错误信息:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="showMessage" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否以行内形式展示校验信息:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="inlineMessage" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否在输入框中显示校验结果反馈图标:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="statusIcon" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+		
+			<el-form
+				ref="editPostFormRef"
+				:model="ruleForm"
+				:label-width="labelWidth"
+				:label-position="labelPosition"
+				:size="size"
+				:rules="editMycontRules"
+				:inline="inline"
+				:label-suffix="labelSuffix"
+				:hide-required-asterisk="hideRequiredAsterisk"
+				:require-asterisk-position="requireAsteriskPosition"
+				:show-message="showMessage"
+				:inline-message="inlineMessage"
+				:status-icon="statusIcon"
+				form-row-2
+			>
+				<el-form-item label="Activity name" prop="name">
+					<el-input v-model="ruleForm.name" />
+				</el-form-item>
+				<el-form-item label="Activity zone" prop="region">
+					<el-select v-model="ruleForm.region" placeholder="Activity zone">
+						<el-option label="Zone one" value="shanghai" />
+						<el-option label="Zone two" value="beijing" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="Activity count" prop="count">
+					<el-select-v2
+						v-model="ruleForm.count"
+						placeholder="Activity count"
+						:options="options"
+					/>
+				</el-form-item>
+				<el-form-item label="Activity time" required>
+					<el-col :span="11">
+						<el-form-item prop="date1">
+						<el-date-picker
+							v-model="ruleForm.date1"
+							type="date"
+							label="Pick a date"
+							placeholder="Pick a date"
+							style="width: 100%"
+						/>
+						</el-form-item>
+					</el-col>
+					<el-col class="text-center" :span="2">
+						<span class="text-gray-500">-</span>
+					</el-col>
+					<el-col :span="11">
+						<el-form-item prop="date2">
+							<el-time-picker
+								v-model="ruleForm.date2"
+								label="Pick a time"
+								placeholder="Pick a time"
+								style="width: 100%"
+							/>
+						</el-form-item>
+					</el-col>
+				</el-form-item>
+				<el-form-item label="Instant delivery" prop="delivery">
+					<el-switch v-model="ruleForm.delivery" />
+				</el-form-item>
+				<el-form-item label="Activity type" prop="type">
+					<el-checkbox-group v-model="ruleForm.type">
+						<el-checkbox label="Online activities" name="type" />
+						<el-checkbox label="Promotion activities" name="type" />
+						<el-checkbox label="Offline activities" name="type" />
+						<el-checkbox label="Simple brand exposure" name="type" />
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="Resources" prop="resource">
+					<el-radio-group v-model="ruleForm.resource">
+						<el-radio label="Sponsorship" />
+						<el-radio label="Venue" />
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item label="Activity form" prop="desc">
+					<el-input v-model="ruleForm.desc" type="textarea" />
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm(ruleFormRef)">
+						Create
+					</el-button>
+					<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+				</el-form-item>
+			</el-form>
+		</el-col>
+	</el-row>
+</template>
+<style  lang='scss' scoped>
+
+</style>