邃芒慧影管理端
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 

144 satır
3.8 KiB

  1. <template>
  2. <el-table
  3. ref="multipleTableRef"
  4. :data="tableData"
  5. style="width: 100%"
  6. border
  7. @selection-change="handleSelectionChange"
  8. >
  9. <el-table-column type="selection" width="55" align="center"/>
  10. <el-table-column property="language" label="语言" align="center"/>
  11. <el-table-column property="country" label="国家" align="center"/>
  12. <el-table-column property="name" label="英文名称" align="center"/>
  13. <el-table-column property="chineseName" label="中文名称" align="center"/>
  14. <el-table-column
  15. prop="createTime"
  16. :label="$t('businessMangage.createTime')"
  17. align="center">
  18. <template #default="scope">
  19. {{ getDate(scope.row.createDate) }}
  20. </template>
  21. </el-table-column>
  22. </el-table>
  23. <div class="pagination">
  24. <el-pagination
  25. v-model:current-page="pageNum"
  26. v-model:page-size="pageSize"
  27. :page-sizes="[10, 50, 100]"
  28. :small="false"
  29. :disabled="false"
  30. :background="true"
  31. layout="total, sizes, prev, pager, next, jumper"
  32. :total="total"
  33. @size-change="handleSizeChange"
  34. @current-change="handleCurrentChange"
  35. />
  36. </div>
  37. <div style="margin-top: 20px">
  38. <el-button @click="handleClose"
  39. >取消</el-button
  40. >
  41. <el-button type="primary" @click="addModel()">确认关联</el-button>
  42. </div>
  43. </template>
  44. <script setup>
  45. import { voiceMouldListApi, userVoiceIdListApi, associatedUserVoicesApi } from '@/apis/userManage.js'
  46. import dayjs from "dayjs";
  47. const emit = defineEmits(["close"]);
  48. const props = defineProps({
  49. cUserId: {
  50. required: true,
  51. }
  52. });
  53. const getDate = (val) => {
  54. return dayjs(val).format("YYYY-MM-DD");
  55. };
  56. const multipleTableRef = ref()
  57. const multipleSelection = ref([])
  58. const toggleSelection = (rows) => {
  59. if (rows) {
  60. rows.forEach((row) => {
  61. // TODO: improvement typing when refactor table
  62. // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  63. // @ts-expect-error
  64. multipleTableRef.value.toggleRowSelection(row, undefined)
  65. })
  66. } else {
  67. multipleTableRef.value.clearSelection()
  68. }
  69. }
  70. const handleSelectionChange = (val) => {
  71. multipleSelection.value = val
  72. }
  73. const pageNum = ref(1);
  74. const pageSize = ref(10);
  75. const total = ref(0);
  76. const tableData = ref([]);
  77. const handleSizeChange = (val) => {
  78. pageSize.value = val;
  79. modelAllListFunc(pageNum.value, pageSize.value);
  80. };
  81. const handleCurrentChange = (val) => {
  82. pageNum.value = val;
  83. modelAllListFunc(pageNum.value, pageSize.value);
  84. };
  85. const modelAllListFunc = async (PageNum, PageSize) => {
  86. try {
  87. const res = await voiceMouldListApi(PageNum, 10000);
  88. const modelIds = await userVoiceIdListApi(props.cUserId);
  89. let idIndx = []
  90. if(modelIds.data && modelIds.data.length > 0) {
  91. res.data.list.forEach((ele, idx) => {
  92. modelIds.data.forEach((item) => {
  93. if (ele.id === item) {
  94. idIndx.push(idx)
  95. }
  96. })
  97. })
  98. }
  99. tableData.value = res.data.list;
  100. total.value = res.data.total * 1;
  101. // 选中关联模版
  102. if(idIndx.length) {
  103. setTimeout(()=> {
  104. let list = []
  105. idIndx.forEach(d => {
  106. list.push(tableData.value[d])
  107. })
  108. toggleSelection(list)
  109. }, 500)
  110. }
  111. } catch (error) {
  112. console.log(error, "err");
  113. }
  114. };
  115. const addModel = async () => {
  116. console.log(multipleSelection.value)
  117. let mouldIds = []
  118. multipleSelection.value.forEach(res => {
  119. mouldIds.push(res.id)
  120. })
  121. const data = {
  122. voiceLanguageIdList: mouldIds,
  123. userId: props.cUserId
  124. }
  125. const res = await associatedUserVoicesApi(data);
  126. if(res.code === 200) {
  127. ElMessage.success("关联成功!");
  128. handleClose()
  129. }
  130. };
  131. function handleClose() {
  132. emit("close");
  133. }
  134. onMounted(() => {
  135. modelAllListFunc(1, 10);
  136. });
  137. </script>