邃芒慧影管理端
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

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