更新歌曲列表

src/views/newuser/singerUser/detailView.tsx

@@ -0,0 +1,84 @@
+import { ref } from "vue";
+import {
+  querySingerSongList
+} from "@/api/modules/newuserList";
+export function useData() {
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const userId = ref(0)
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "Id",
+      prop: "id"
+    },
+    {
+      label: "歌曲名称",
+      prop: "song_name"
+    },
+    {
+      label: "演唱者",
+      prop: "nickname"
+    },
+    {
+      label: "演唱者ID",
+      prop: "user_code"
+    },
+    {
+      label: "礼物名称",
+      prop: "gift_name"
+    },
+    {
+      label: "礼物价格",
+      prop: "gift_price"
+    },
+    {
+      label: "礼物数量",
+      prop: "gift_num"
+    }
+  ]);
+  const detailData = ref(null)
+  const onSearch = async (id) => {
+    userId.value = id
+    loading.value = true;
+    const { data, code } = await querySingerSongList({
+      page: pagination.value.currentPage,
+      page_limit: pagination.value.pageSize,
+      user_id: userId.value
+    });
+    if (code) {
+      detailData.value = data;
+      tableList.value = data.lists;
+      pagination.value.total = data.count;
+      pagination.value.currentPage = data.page;
+    }
+    loading.value = false;
+  };
+  const handleSizeChange = (val: number) => {
+    pagination.value.pageSize = val;
+    onSearch(userId.value);
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch(userId.value);
+  };
+  return {
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading,
+    userId,
+    detailData
+  };
+}

src/views/newuser/singerUser/detailView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./detailView";
+const props = defineProps(["rowData"]);
+const {
+  onSearch,
+  userId,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  loading
+} = useData();
+onMounted(() => {
+  userId.value = props.rowData.user_id
+  onSearch(props.rowData.user_id);
+});
+defineOptions({
+  name: "backpackList"
+});
+</script>
+
+<template>
+  <div class="main">
+    <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all
+      :loading="loading" row-key="id" adaptive :adaptiveConfig="{ offsetBottom: 108 }" :data="tableList"
+      :columns="tableLabel" :pagination="{ ...pagination }" :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
+    </pure-table>
+  </div>
+</template>
+<style scoped lang="scss"></style>

src/views/newuser/singerUser/hook.tsx

@@ -1,10 +1,9 @@
 import { ref, h } from "vue";
 import editForm from "./form.vue";
+import detailView from './detailView.vue';
 import {
   querySingerUser,
   editSingerUser
-  // banUserByIpData,
-  // unbanUserByIp
 } from "@/api/modules/newuserList";
 import { message } from "@/utils/message";
 import { addDialog } from "@/components/ReDialog";
@@ -58,7 +57,10 @@ export function useData() {
     },
     {
       label: "性别",
-      prop: "sex"
+      prop: "sex",
+      cellRenderer: ({ row }) => (
+        <div>{row.sex === 1 ? '男' : '女'}</div>
+      )
     },
     {
       label: "歌手试音地址",
@@ -111,6 +113,18 @@ export function useData() {
     pagination.value.currentPage = val;
     onSearch(searchForm.value);
   };
+  const viewSongList = (rowData) => {
+    addDialog({
+      title: `查看歌曲列表`,
+      props: {
+        rowData: rowData
+      },
+      width: "60%",
+      hideFooter: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(detailView)
+    });
+  }
   const openDialog = (title = "新增", rowData: any) => {
     addDialog({
       title: `${title}歌手认证信息`,
@@ -157,6 +171,7 @@ export function useData() {
     handleCurrentChange,
     loading,
     openDialog,
+    viewSongList,
     detailData
   };
 }

src/views/newuser/singerUser/index.vue

@@ -13,6 +13,7 @@ const {
 	pagination,
 	tableLabel,
 	openDialog,
+	viewSongList,
 	handleSizeChange,
 	handleCurrentChange,
 	loading
@@ -42,7 +43,8 @@ defineOptions({
 						<template #operation="{ row }">
 							<el-button v-if="row.status === 0" link type="primary" @click="openDialog('审核', row)"
 								:size="size">审核</el-button>
-							<el-button v-if="row.status === 1" link type="primary" :size="size">查看歌曲列表</el-button>
+							<el-button v-if="row.status === 1" link type="primary" :size="size"
+								@click="viewSongList(row)">查看歌曲列表</el-button>
 						</template>
 					</pure-table>
 				</template>