refactor: 所有业务线的接口调用添加TypeScript类型声明描述
This commit is contained in:
郝先瑞
@@ -1,85 +1,94 @@
|
||||
<template>
|
||||
<div class="component-container">
|
||||
<el-form
|
||||
ref="queryForm"
|
||||
:model="queryParams"
|
||||
:inline="true"
|
||||
>
|
||||
<div class="app-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="queryParams.nickName"
|
||||
placeholder="会员昵称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
v-model="queryParams.nickName"
|
||||
placeholder="会员昵称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="loading"
|
||||
:data="pageList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="memberList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" align="center"/>
|
||||
<el-table-column type="expand" width="80" label="会员地址">
|
||||
<el-table-column type="selection" align="center" />
|
||||
<el-table-column type="expand" width="120" label="会员地址">
|
||||
<template #default="scope">
|
||||
<el-table
|
||||
:data="scope.row.addressList"
|
||||
size="small"
|
||||
border>
|
||||
<el-table-column type="index" label="序号" width="80" align="center"/>
|
||||
<el-table-column align="center" label="收货人" prop="name"/>
|
||||
<el-table-column align="center" label="联系方式" prop="mobile"/>
|
||||
<el-table :data="scope.row.addressList" size="small" border>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
width="100"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column align="center" label="收货人" prop="name" />
|
||||
<el-table-column align="center" label="联系方式" prop="mobile" />
|
||||
<el-table-column align="center" label="收货地址">
|
||||
<template #default="scope">
|
||||
{{ scope.row.province + scope.row.city + scope.row.area + scope.row.address }}
|
||||
{{
|
||||
scope.row.province +
|
||||
scope.row.city +
|
||||
scope.row.area +
|
||||
scope.row.address
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="邮编" prop="zipCode"/>
|
||||
<el-table-column align="center" label="邮编" prop="zipCode" />
|
||||
<el-table-column align="center" label="是否默认">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.defaulted==1" type="success">是</el-tag>
|
||||
<el-tag v-if="scope.row.defaulted==0" type="info">否</el-tag>
|
||||
<el-tag v-if="scope.row.defaulted == 1" type="success"
|
||||
>是</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.defaulted == 0" type="info">否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column type="index" label="序号" width="50" align="center"/>
|
||||
<el-table-column prop="nickName" label="昵称"/>
|
||||
<el-table-column type="index" label="序号" width="100" align="center" />
|
||||
<el-table-column prop="nickName" label="昵称" />
|
||||
<el-table-column label="性别" width="80">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.gender===0">未知</span>
|
||||
<span v-if="scope.row.gender===1">男</span>
|
||||
<span v-if="scope.row.gender===2">女</span>
|
||||
<span v-if="scope.row.gender === 0">未知</span>
|
||||
<span v-if="scope.row.gender === 1">男</span>
|
||||
<span v-if="scope.row.gender === 2">女</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="头像" width="100">
|
||||
<template #default="scope">
|
||||
<el-popover
|
||||
placement="right"
|
||||
:width="400"
|
||||
trigger="hover">
|
||||
<img :src="scope.row.avatarUrl" width="400" height="400"/>
|
||||
<el-popover placement="right" :width="400" trigger="hover">
|
||||
<img :src="scope.row.avatarUrl" width="400" height="400" />
|
||||
<template #reference>
|
||||
<img :src="scope.row.avatarUrl" style="max-height: 60px;max-width: 60px"/>
|
||||
<img
|
||||
:src="scope.row.avatarUrl"
|
||||
style="max-height: 60px; max-width: 60px"
|
||||
/>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobile" label="手机号码"/>
|
||||
<el-table-column prop="birthday" label="出生日期"/>
|
||||
<el-table-column prop="mobile" label="手机号码" />
|
||||
<el-table-column prop="birthday" label="出生日期" />
|
||||
<el-table-column prop="status" width="80" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status===1" type="success" >正常</el-tag>
|
||||
<el-tag v-else type="info" >禁用</el-tag>
|
||||
<el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
|
||||
<el-tag v-else type="info">禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="gmtCreate" label="注册时间"/>
|
||||
<el-table-column prop="gmtCreate" label="注册时间" />
|
||||
|
||||
<el-table-column label="账户余额">
|
||||
<template #default="scope">
|
||||
@@ -90,21 +99,22 @@
|
||||
|
||||
<!-- 分页工具条 -->
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {reactive, onMounted, toRefs} from 'vue'
|
||||
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue'
|
||||
import { reactive, onMounted, toRefs } from "vue";
|
||||
import { ElTable, ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
|
||||
|
||||
import {listMembersWithPage} from '@/api/ums/member'
|
||||
import { listMemeberPages } from "@/api/ums/member";
|
||||
import { MemberQueryParam,MemberItem } from "@/types";
|
||||
|
||||
const state = reactive({
|
||||
// 遮罩层
|
||||
@@ -119,21 +129,20 @@ const state = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nickName: undefined
|
||||
},
|
||||
pageList: []
|
||||
})
|
||||
} as MemberQueryParam,
|
||||
memberList: [] as MemberItem[]
|
||||
});
|
||||
|
||||
const { loading,ids,single, multiple, queryParams, pageList,total} = toRefs(state);
|
||||
const { loading, ids, single, multiple, queryParams, memberList, total } =
|
||||
toRefs(state);
|
||||
|
||||
function handleQuery() {
|
||||
state.loading = true
|
||||
listMembersWithPage(state.queryParams).then(response => {
|
||||
const {data, total} = response as any
|
||||
state.pageList = data
|
||||
state.total = total
|
||||
state.loading = false
|
||||
})
|
||||
state.loading = true;
|
||||
listMemeberPages(state.queryParams).then(({data}) => {
|
||||
state.memberList = data.list;
|
||||
state.total = data.total;
|
||||
state.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
@@ -141,21 +150,19 @@ function resetQuery() {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nickName: undefined,
|
||||
}
|
||||
handleQuery()
|
||||
};
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handleSelectionChange(selection: any) {
|
||||
state.ids = selection.map((item: { id: any }) => item.id)
|
||||
state.single = selection.length != 1
|
||||
state.multiple = !selection.length
|
||||
state.ids = selection.map((item: { id: any }) => item.id);
|
||||
state.single = selection.length != 1;
|
||||
state.multiple = !selection.length;
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery()
|
||||
})
|
||||
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user