chore update

src/modules/metadata/event/components/FormDialog.vue

+<script setup lang="ts">
+import type { EventProp } from '../types'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+interface Props {
+  data?: EventProp
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+  (e: 'update:modelValue', visible: boolean): void
+}>()
+
+const isUpdate = $computed(() => {
+  return !!props.data?.id
+})
+const title = $computed(() => {
+  return isUpdate ? '修改事件属性' : '新建事件属性'
+})
+
+const formRef = $ref<FormInstance>()
+const form = reactive({
+  id: '',
+  name: '',
+  type: '',
+  status: ''
+})
+
+const rules = ref<FormRules>({
+  id: [{ required: true, message: '请输入事件ID' }],
+  name: [{ required: true, message: '请输入事件名称' }],
+  type: [{ required: true, message: '请选择属性字段类型' }]
+})
+
+// 提交
+function handleSubmit() {
+  formRef?.validate().then(() => {
+    isUpdate ? handleUpdate() : handleCreate()
+  })
+}
+
+// 新建
+function handleCreate() {
+  ElMessage({ message: '创建成功', type: 'success' })
+  emit('update')
+  emit('update:modelValue', false)
+}
+// 修改
+function handleUpdate() {
+  ElMessage({ message: '修改成功', type: 'success' })
+  emit('update')
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @update:modelValue="$emit('update:modelValue')">
+    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：" label-width="122px">
+      <el-form-item label="事件ID" prop="id">
+        <el-input v-model="form.id" />
+      </el-form-item>
+      <el-form-item label="事件名称" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="所属连接" prop="type">
+        <el-select v-model="form.type" style="width: 100%"></el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="form.status" active-text="生效" inactive-text="失效" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-row justify="center">
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>

src/modules/metadata/event/components/ViewDialog.vue

+<script setup lang="ts">
+import type { EventProp } from '../types'
+interface Props {
+  data: EventProp
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <el-dialog title="查看事件属性" :close-on-click-modal="false" width="600px">
+    <el-form label-suffix="：" label-width="90px">
+      <el-form-item label="事件ID">
+        {{ data.id }}
+      </el-form-item>
+      <el-form-item label="事件名称">
+        {{ data.id }}
+      </el-form-item>
+      <el-form-item label="所属连接">
+        {{ data.id }}
+      </el-form-item>
+      <el-form-item label="状态">
+        {{ data.id }}
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-row justify="center">
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>

src/modules/metadata/event/types.ts

+export interface EventProp {
+  id: string
+  name: string
+}

src/modules/metadata/event/views/Index.vue

 <script setup lang="ts">
+import type { EventProp } from '../types'
+import { Plus } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+import AppList from '@/components/base/AppList.vue'
+
+const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
+const ViewDialog = defineAsyncComponent(() => import('../components/ViewDialog.vue'))
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
 // 列表配置
 const listOptions = computed(() => {
   return {
@@ -21,20 +30,61 @@ const listOptions = computed(() => {
       { label: '更新时间', prop: 'name' },
       { label: '操作', slots: 'table-x', width: 300 }
     ],
-    data: [{}, {}]
+    data: [{ id: 1 }, { id: 2 }]
   }
 })
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+
+let formVisible = $ref(false)
+let currentRow = $ref<EventProp>()
+
+// 新建
+function handleAdd() {
+  currentRow = undefined
+  formVisible = true
+}
+
+// 修改
+function handleUpdate(row: EventProp) {
+  currentRow = row
+  formVisible = true
+}
+
+let viewVisible = $ref(false)
+// 查看
+function handleView(row: EventProp) {
+  currentRow = row
+  viewVisible = true
+}
+
+// 删除
+function handleRemove(row: EventProp) {
+  ElMessageBox.confirm('确定要删除该属性吗？', '提示').then(() => {})
+}
 </script>
 
 <template>
   <AppCard>
     <AppList v-bind="listOptions">
-      <template #table-x>
-        <el-button type="primary" plain>查看</el-button>
-        <el-button type="primary" plain>编辑</el-button>
-        <el-button type="primary" plain>删除</el-button>
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
+        </el-space>
+      </template>
+      <template #table-x="{ row }">
+        <el-button type="primary" plain @click="handleView(row)">查看</el-button>
+        <el-button type="primary" plain @click="handleUpdate(row)">编辑</el-button>
+        <el-button type="primary" plain @click="handleRemove(row)">删除</el-button>
         <el-button type="primary" plain>字段</el-button>
       </template>
     </AppList>
   </AppCard>
+  <!-- 新建/修改 -->
+  <FormDialog v-model="formVisible" :data="currentRow" @update="handleRefresh" v-if="formVisible" />
+  <!-- 查看 -->
+  <ViewDialog v-model="viewVisible" :data="currentRow" v-if="viewVisible && currentRow" />
 </template>

src/modules/metadata/user/components/FormDialog.vue

+<script setup lang="ts">
+import type { UserProp } from '../types'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+interface Props {
+  data?: UserProp
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+  (e: 'update:modelValue', visible: boolean): void
+}>()
+
+const isUpdate = $computed(() => {
+  return !!props.data?.id
+})
+const title = $computed(() => {
+  return isUpdate ? '修改用户属性' : '新建用户属性'
+})
+
+const formRef = $ref<FormInstance>()
+const form = reactive({
+  id: '',
+  name: '',
+  type: '',
+  value: '',
+  status: ''
+})
+
+const rules = ref<FormRules>({
+  id: [{ required: true, message: '请输入属性ID' }],
+  name: [{ required: true, message: '请输入属性名称' }],
+  type: [{ required: true, message: '请选择属性字段类型' }],
+  value: [{ required: true, message: '请输入属性ID' }]
+})
+
+// 提交
+function handleSubmit() {
+  formRef?.validate().then(() => {
+    isUpdate ? handleUpdate() : handleCreate()
+  })
+}
+
+// 新建
+function handleCreate() {
+  ElMessage({ message: '创建成功', type: 'success' })
+  emit('update')
+  emit('update:modelValue', false)
+}
+// 修改
+function handleUpdate() {
+  ElMessage({ message: '修改成功', type: 'success' })
+  emit('update')
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @update:modelValue="$emit('update:modelValue')">
+    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：" label-width="122px">
+      <el-form-item label="属性ID" prop="id">
+        <el-input v-model="form.id" />
+      </el-form-item>
+      <el-form-item label="属性名称" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="属性字段类型" prop="type">
+        <el-select v-model="form.type" style="width: 100%"></el-select>
+      </el-form-item>
+      <el-form-item label="属性字段格式" prop="type">
+        <el-input v-model="form.value" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="form.status" active-text="生效" inactive-text="失效" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-row justify="center">
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>

src/modules/metadata/user/components/ViewDialog.vue

+<script setup lang="ts">
+import type { UserProp } from '../types'
+interface Props {
+  data: UserProp
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <el-dialog title="查看用户属性" :close-on-click-modal="false" width="600px">
+    <el-form label-suffix="：" label-width="110px">
+      <el-form-item label="属性ID">
+        {{ data.id }}
+      </el-form-item>
+      <el-form-item label="属性名称">
+        {{ data.id }}
+      </el-form-item>
+      <el-form-item label="属性字段类型">
+        {{ data.id }}
+      </el-form-item>
+      <el-form-item label="属性字段格式">
+        {{ data.id }}
+      </el-form-item>
+      <el-form-item label="状态">
+        {{ data.id }}
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-row justify="center">
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>

src/modules/metadata/user/types.ts

+export interface UserProp {
+  id: string
+  name: string
+}

src/modules/metadata/user/views/Index.vue

 <script setup lang="ts">
+import type { UserProp } from '../types'
+import { Plus } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+import AppList from '@/components/base/AppList.vue'
+
+const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
+const ViewDialog = defineAsyncComponent(() => import('../components/ViewDialog.vue'))
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
 // 列表配置
 const listOptions = computed(() => {
   return {
@@ -20,19 +29,60 @@ const listOptions = computed(() => {
       { label: '更新时间', prop: 'name' },
       { label: '操作', slots: 'table-x', width: 240 }
     ],
-    data: [{}, {}]
+    data: [{ id: 1 }, { id: 2 }]
   }
 })
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+
+let formVisible = $ref(false)
+let currentRow = $ref<UserProp>()
+
+// 新建
+function handleAdd() {
+  currentRow = undefined
+  formVisible = true
+}
+
+// 修改
+function handleUpdate(row: UserProp) {
+  currentRow = row
+  formVisible = true
+}
+
+let viewVisible = $ref(false)
+// 查看
+function handleView(row: UserProp) {
+  currentRow = row
+  viewVisible = true
+}
+
+// 删除
+function handleRemove(row: UserProp) {
+  ElMessageBox.confirm('确定要删除该属性吗？', '提示').then(() => {})
+}
 </script>
 
 <template>
   <AppCard>
-    <AppList v-bind="listOptions">
-      <template #table-x>
-        <el-button type="primary" plain>查看</el-button>
-        <el-button type="primary" plain>编辑</el-button>
-        <el-button type="primary" plain>删除</el-button>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
+        </el-space>
+      </template>
+      <template #table-x="{ row }">
+        <el-button type="primary" plain @click="handleView(row)">查看</el-button>
+        <el-button type="primary" plain @click="handleUpdate(row)">编辑</el-button>
+        <el-button type="primary" plain @click="handleRemove(row)">删除</el-button>
       </template>
     </AppList>
   </AppCard>
+  <!-- 新建/修改 -->
+  <FormDialog v-model="formVisible" :data="currentRow" @update="handleRefresh" v-if="formVisible" />
+  <!-- 查看 -->
+  <ViewDialog v-model="viewVisible" :data="currentRow" v-if="viewVisible && currentRow" />
 </template>

src/modules/trip/template/views/Index.vue

+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入旅程模板名称' }],
+    columns: [
+      { label: '序号', type: 'index', width: 60 },
+      { label: '模板名称', prop: 'id' },
+      { label: '模板类型', prop: 'name' },
+      { label: '用户旅程分值', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 300 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
 <template>
-  <AppCard></AppCard>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>配置</el-button>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
 </template>

tsconfig.json

@@ -6,7 +6,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["element-plus/global"]
   },
 
   "references": [