yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

租户列表使用element plus完成改写

pull/35/head
东方白 2023-03-19 10:49:28 +08:00
parent 710c369c57
commit b95196ed9a
2 changed files with 199 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
src/views/system/tenant/form.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Dialog :title="modelTitle" v-model="modelVisible"> <Dialog :title="modelTitle" v-model="modelVisible" width="50%">
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
@ -7,32 +7,96 @@
label-width="80px" label-width="80px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="参数分类" prop="category"> <el-row>
<el-input v-model="formData.category" placeholder="请输入参数分类" /> <el-col :span="10">
</el-form-item> <el-form-item label="租户名" prop="name">
<el-form-item label="参数名称" prop="name"> <el-input v-model="formData.name" placeholder="请输入租户名" />
<el-input v-model="formData.name" placeholder="请输入参数名称" /> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="参数键名" prop="key"> <el-col :span="10" :offset="2">
<el-input v-model="formData.key" placeholder="请输入参数键名" /> <el-form-item label="租户套餐" prop="packageId">
</el-form-item> <el-select v-model="formData.packageId" placeholder="请选择租户套餐" clearable>
<el-form-item label="参数键值" prop="value"> <el-option
<el-input v-model="formData.value" placeholder="请输入参数键值" /> v-for="item in props.packageList"
</el-form-item> :key="item.id"
<el-form-item label="是否可见" prop="visible"> :label="item.name"
<el-radio-group v-model="formData.visible"> :value="item.id"
<el-radio />
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" </el-select>
:key="dict.value" </el-form-item>
:label="dict.value" </el-col>
> </el-row>
{{ dict.label }} <el-row>
</el-radio> <el-col :span="10">
</el-radio-group> <el-form-item label="联系人" prop="contactName">
</el-form-item> <el-input v-model="formData.contactName" placeholder="请输入联系人" />
<el-form-item label="备注" prop="remark"> </el-form-item>
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" /> </el-col>
</el-form-item> <el-col :span="10" :offset="2">
<el-form-item label="联系手机" prop="contactMobile">
<el-input v-model="formData.contactMobile" placeholder="请输入联系手机" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
<el-input v-model="formData.username" placeholder="请输入用户名称" />
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
<el-input
v-model="formData.password"
placeholder="请输入用户密码"
type="password"
show-password
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="账号额度" prop="accountCount">
<el-input-number
v-model="formData.accountCount"
placeholder="请输入账号额度"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item label="过期时间" prop="expireTime">
<el-date-picker
clearable
v-model="formData.expireTime"
type="date"
value-format="x"
placeholder="请选择过期时间"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="绑定域名" prop="domain">
<el-input v-model="formData.domain" placeholder="请输入绑定域名" />
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item label="租户状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
@ -43,34 +107,45 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as TenantApi from '@/api/system/tenant' import * as TenantApi from '@/api/system/tenant'
import { CommonStatusEnum } from '@/utils/constants'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const props = defineProps({
packageList: {
type: Array,
// eslint-disable-next-line vue/require-valid-default-prop
default: []
}
})
// console.log(props.packageList)
const modelVisible = ref(false) // 弹窗的是否展示 const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题 const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
category: '', name: undefined,
name: '', packageId: undefined,
key: '', contactName: undefined,
value: '', contactMobile: undefined,
visible: true, accountCount: undefined,
remark: '' expireTime: undefined,
domain: undefined,
status: CommonStatusEnum.ENABLE
}) })
const formRules = reactive({ const formRules = reactive({
category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }], name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }], packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }], contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }], status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }] accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
/** 打开弹窗 */ /** 打开弹窗 */
const openModal = async (type: string, id?: number) => { const openModal = async (type: string, id?: number) => {
modelVisible.value = true modelVisible.value = true
@ -119,12 +194,14 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
category: '', name: undefined,
name: '', packageId: undefined,
key: '', contactName: undefined,
value: '', contactMobile: undefined,
visible: true, accountCount: undefined,
remark: '' expireTime: undefined,
domain: undefined,
status: CommonStatusEnum.ENABLE
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }

153
src/views/system/tenant/index.vue
View File

@ -2,83 +2,80 @@
<!-- 搜索 --> <!-- 搜索 -->
<content-wrap> <content-wrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"> <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-row> <el-form-item label="租户名" prop="name">
<el-form-item label="租户名" prop="name"> <el-input
<el-input v-model="queryParams.name"
v-model="queryParams.name" placeholder="请输入租户名"
placeholder="请输入租户名" clearable
clearable @keyup.enter="handleQuery"
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="联系人" prop="contactName">
<el-input
v-model="queryParams.contactName"
placeholder="请输入联系人"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="联系手机" prop="contactMobile">
<el-input
v-model="queryParams.contactMobile"
placeholder="请输入联系手机"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="租户状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择租户状态" clearable>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/> />
</el-form-item> </el-select>
<el-form-item label="联系人" prop="contactName"> </el-form-item>
<el-input <el-form-item label="创建时间" prop="createTime">
v-model="queryParams.contactName" <el-date-picker
placeholder="请输入联系人" v-model="queryParams.createTime"
clearable value-format="YYYY-MM-DD HH:mm:ss"
@keyup.enter="handleQuery" type="daterange"
/> range-separator="-"
</el-form-item> start-placeholder="开始日期"
<el-form-item label="联系手机" prop="contactMobile"> end-placeholder="结束日期"
<el-input :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
v-model="queryParams.contactMobile" />
placeholder="请输入联系手机" </el-form-item>
clearable
@keyup.enter="handleQuery" <el-form-item>
/> <el-button @click="handleQuery">
</el-form-item> <Icon icon="ep:search" class="mr-5px" />
<el-form-item label="租户状态" prop="status"> 搜索
<el-select v-model="queryParams.status" placeholder="请选择租户状态" clearable> </el-button>
<el-option <el-button @click="resetQuery">
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)" <Icon icon="ep:refresh" class="mr-5px" />
:key="dict.value" 重置
:label="dict.label" </el-button>
:value="dict.value" <el-button
/> type="primary"
</el-select> @click="openModal('create')"
</el-form-item> v-hasPermi="['system:tenant:create']"
<el-form-item label="创建时间" prop="createTime"> >
<el-date-picker <Icon icon="ep:plus" class="mr-5px" />
v-model="queryParams.createTime" 新增
value-format="YYYY-MM-DD HH:mm:ss" </el-button>
type="daterange" <el-button
range-separator="-" type="success"
start-placeholder="开始日期" plain
end-placeholder="结束日期" @click="handleExport"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" :loading="exportLoading"
/> v-hasPermi="['system:tenant:export']"
</el-form-item> >
</el-row> <Icon icon="ep:download" class="mr-5px" />
<el-row> 导出
<el-form-item> </el-button>
<el-button @click="handleQuery"> </el-form-item>
<Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
<el-button
type="primary"
@click="openModal('create')"
v-hasPermi="['system:tenant:create']"
>
<Icon icon="ep:plus" class="mr-5px" />
新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:tenant:export']"
>
<Icon icon="ep:download" class="mr-5px" />
导出
</el-button>
</el-form-item>
</el-row>
</el-form> </el-form>
</content-wrap> </content-wrap>
@ -120,7 +117,7 @@
width="180" width="180"
:formatter="dateFormatter" :formatter="dateFormatter"
/> />
<el-table-column label="操作" align="center" min-width="110"> <el-table-column label="操作" align="center" min-width="110" fixed="right">
<template #default="scope"> <template #default="scope">
<el-button <el-button
link link
@ -151,7 +148,7 @@
</content-wrap> </content-wrap>
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<tenant-form ref="modalRef" @success="getList" /> <tenant-form ref="modalRef" @success="getList" :packageList="packageList" />
</template> </template>
<script setup lang="ts" name="Tenant"> <script setup lang="ts" name="Tenant">
import { DICT_TYPE, getDictOptions } from '@/utils/dict' import { DICT_TYPE, getDictOptions } from '@/utils/dict'