提交 76254a2f authored 作者: 王鹏飞's avatar 王鹏飞

chore update

上级 e670503f
<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>
<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>
export interface EventProp {
id: string
name: string
}
<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>
<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>
<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>
export interface UserProp {
id: string
name: string
}
<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>
<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>
......@@ -6,7 +6,8 @@
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"types": ["element-plus/global"]
},
"references": [
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论