hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-07 23:55:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add modal component

Browse Source
This commit is contained in:
xingyu4j
2022-11-04 16:43:11 +08:00
parent 1c1cafdc7f
commit d79b23c8a2
7 changed files with 386 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
yudao-ui-admin-vue3/src/views/system/post/index.vue
View File

@ -1,3 +1,76 @@
<template>
<ContentWrap>
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<template #toolbar_buttons>
<el-button type="primary" v-hasPermi="['system:post:create']" @click="handleCreate">
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
</el-button>
</template>
<template #status_default="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #action_default="{ row }">
<el-button
link
type="primary"
v-hasPermi="['system:post:update']"
@click="handleUpdate(row.id)"
>
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:post:update']"
@click="handleDetail(row)"
>
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:post:delete']"
@click="handleDelete(row.id)"
>
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
</el-button>
</template>
</vxe-grid>
</ContentWrap>
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
<template #default>
<!-- 对话框(添加 / 修改) -->
<vxe-form
ref="xForm"
v-if="['create', 'update'].includes(actionType)"
:data="formData"
:items="formItems"
:rules="rules"
/>
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailRef"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
</Descriptions>
</template>
<template #footer>
<vxe-button
v-if="['create', 'update'].includes(actionType)"
status="primary"
@click="submitForm"
:content="t('action.save')"
/>
<vxe-button @click="dialogVisible = false" :content="t('dialog.close')" />
</template>
</XModal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
@ -82,89 +155,3 @@ const submitForm: VxeFormEvents.Submit = async () => {
}
}
</script>
<template>
<ContentWrap>
<vxe-grid ref="xGrid" v-bind="gridOptions">
<template #toolbar_buttons>
<el-button type="primary" v-hasPermi="['system:post:create']" @click="handleCreate">
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
</el-button>
</template>
<template #status_default="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #action_default="{ row }">
<el-button
link
type="primary"
v-hasPermi="['system:post:update']"
@click="handleUpdate(row.id)"
>
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:post:update']"
@click="handleDetail(row)"
>
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:post:delete']"
@click="handleDelete(row.id)"
>
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
</el-button>
</template>
</vxe-grid>
</ContentWrap>
<vxe-modal
v-model="dialogVisible"
id="postModel"
:title="dialogTitle"
width="800"
height="400"
min-width="460"
min-height="320"
show-zoom
resize
transfer
show-footer
>
<template #default>
<!-- 对话框(添加 / 修改) -->
<vxe-form
ref="xForm"
v-if="['create', 'update'].includes(actionType)"
:data="formData"
:items="formItems"
:rules="rules"
/>
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailRef"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
</Descriptions>
</template>
<template #footer>
<vxe-button
v-if="['create', 'update'].includes(actionType)"
status="primary"
@click="submitForm"
>
{{ t('action.save') }}
</vxe-button>
<vxe-button @click="dialogVisible = false">{{ t('dialog.close') }}</vxe-button>
</template>
</vxe-modal>
</template>