DataTable.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <script lang="ts" setup>
  2. /**
  3. * @Name: Table.vue
  4. * @Description: 公司SKU表格
  5. * @Author: Cheney
  6. */
  7. import { InfoFilled, Plus, Position, Refresh } from '@element-plus/icons-vue';
  8. import { usePagination } from '/@/utils/usePagination';
  9. import { useTableData } from '/@/utils/useTableData';
  10. import { useResponse } from '/@/utils/useResponse';
  11. import { CompanySkuColumns } from '/@/views/sku-manage/Columns';
  12. import PermissionButton from '/@/components/PermissionButton/index.vue';
  13. import DataTableSlot from './DataTableSlot.vue';
  14. import * as api from '../api';
  15. import ShowSkuDrawer from '/@/views/sku-manage/company-sku/component/ShowSkuDrawer.vue';
  16. import SkuBuilder from '/@/views/sku-manage/company-sku/component/SkuBuilder.vue';
  17. import { ElMessage } from 'element-plus';
  18. import { hasPermission } from '/@/utils/hasPermission';
  19. interface Parameter {
  20. brandName: string;
  21. status: string;
  22. kind: string;
  23. sku: string;
  24. }
  25. const queryParameter: Parameter | undefined = inject('query-parameter');
  26. const { tableOptions, handlePageChange } = usePagination(fetchList);
  27. const gridRef = ref();
  28. const gridOptions: any = reactive({
  29. id: 'product-attribute-table',
  30. keepSource: true,
  31. size: 'small',
  32. border: false,
  33. round: true,
  34. stripe: true,
  35. currentRowHighLight: true,
  36. height: '100%',
  37. customConfig: {
  38. // mode: 'drawer',
  39. // immediate: true,
  40. storage: true
  41. },
  42. toolbarConfig: {
  43. size: 'large',
  44. // custom: true,
  45. slots: {
  46. tools: 'toolbar_tools',
  47. buttons: 'toolbar_buttons'
  48. }
  49. },
  50. rowConfig: {
  51. isHover: true
  52. },
  53. columnConfig: {
  54. // resizable: true
  55. },
  56. pagerConfig: {
  57. total: tableOptions.value.total,
  58. page: tableOptions.value.page,
  59. limit: tableOptions.value.limit
  60. },
  61. loading: false,
  62. loadingConfig: {
  63. icon: 'vxe-icon-indicator roll',
  64. text: '正在拼命加载中...'
  65. },
  66. columns: '',
  67. data: ''
  68. });
  69. const showSkuBuilder = ref(false);
  70. const createOpen = ref(false);
  71. const showOpen = ref(false);
  72. const rowData = ref<any | undefined>(undefined);
  73. const skuData = ref({});
  74. const checkedList = ref<Set<number>>(new Set());
  75. const btnLoading = ref(false);
  76. onBeforeMount(() => {
  77. gridOptions.pagerConfig.limit = 20;
  78. });
  79. onMounted(() => {
  80. fetchList();
  81. });
  82. async function fetchList(isQuery = false) {
  83. if (isQuery) {
  84. gridOptions.pagerConfig.page = 1;
  85. }
  86. gridOptions.data = [];
  87. gridOptions.columns = [];
  88. const query = {
  89. brand: queryParameter?.brandName,
  90. kind: queryParameter?.kind,
  91. status: queryParameter?.status,
  92. sku__contains: queryParameter?.sku
  93. };
  94. await useTableData(api.getTableData, query, gridOptions);
  95. if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(CompanySkuColumns);
  96. gridOptions.showHeader = Boolean(gridOptions.data?.length);
  97. }
  98. function handleRefresh() {
  99. fetchList();
  100. }
  101. async function handleEdit(row: any) {
  102. rowData.value = row;
  103. await fetchSkuDetail(row);
  104. if (Object.keys(skuData.value).length > 0) {
  105. showSkuBuilder.value = true;
  106. }
  107. }
  108. function handleCreate() {
  109. rowData.value = undefined;
  110. skuData.value = {};
  111. showSkuBuilder.value = true;
  112. }
  113. async function singleDelete(row: any) {
  114. const res = await useResponse(api.deleteRow, row.id);
  115. if (res.code === 2000) {
  116. ElMessage.error({ message: '已删除!', plain: true, icon: 'Delete' });
  117. handleRefresh();
  118. }
  119. }
  120. async function handleReleaseSku(row: any) {
  121. const res = await useResponse(api.releaseSku, { id: row.id, status: 3, kind: row.kind.id });
  122. if (res.code === 2000) {
  123. ElMessage.success({ message: '发布成功', plain: true, icon: 'Position' });
  124. handleRefresh();
  125. }
  126. }
  127. async function handleShowSku(row: any) {
  128. rowData.value = row;
  129. await fetchSkuDetail(row);
  130. if (Object.keys(skuData.value).length > 0) {
  131. showOpen.value = true;
  132. }
  133. }
  134. async function fetchSkuDetail(row: any) {
  135. const res = await useResponse(api.getSkuDetail, { id: row.id });
  136. if (res.code === 2000) {
  137. skuData.value = res.data;
  138. }
  139. }
  140. function selectChangeEvent({ checked, row }: any) {
  141. if (checked) {
  142. checkedList.value.add(row.id); // 获取单个数据
  143. } else {
  144. checkedList.value.delete(row.id);
  145. }
  146. }
  147. function selectAllChangeEvent({ checked }: any) {
  148. const $grid = gridRef.value;
  149. if ($grid) {
  150. const records = $grid.getData(); // 获取所有数据
  151. if (checked) {
  152. records.forEach((item: any) => {
  153. checkedList.value.add(item.id);
  154. });
  155. } else {
  156. checkedList.value.clear();
  157. }
  158. }
  159. }
  160. async function batchRelease() {
  161. const ids = Array.from(checkedList.value);
  162. const res = await useResponse(api.postRelease, { ids, status: 3 }, btnLoading);
  163. if (res && res.code === 2000) {
  164. ElMessage.success({ message: '已发布!', plain: true });
  165. }
  166. checkedList.value.clear();
  167. await fetchList();
  168. }
  169. const gridEvents = {
  170. custom({ type }: any) {
  171. // console.log(`点击 ${type}`)
  172. if (type == 'confirm') {
  173. fetchList();
  174. }
  175. }
  176. };
  177. const isBatchReleaseDisabled = computed(() => {
  178. const ids = Array.from(checkedList.value);
  179. return ids.some(id => {
  180. const item = gridOptions.data.find((row: any) => row.id === id);
  181. return item && item.status === 3;
  182. });
  183. });
  184. defineExpose({ fetchList });
  185. </script>
  186. <template>
  187. <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents"
  188. @checkbox-change="selectChangeEvent"
  189. @checkbox-all="selectAllChangeEvent">
  190. <template #toolbar_buttons>
  191. <div class="flex gap-2">
  192. <div>
  193. <PermissionButton v-if="hasPermission('SkuCreate')" :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
  194. </div>
  195. <div v-if="hasPermission('SkuBulkPublish')">
  196. <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="此操作将会把所有选中的SKU全部发布, 是否继续?"
  197. width="360" @confirm="batchRelease">
  198. <template #reference>
  199. <PermissionButton :color="'#6466F1'" :disabled="!checkedList.size || isBatchReleaseDisabled" :icon="Position"
  200. plain round>
  201. 批量发布
  202. </PermissionButton>
  203. </template>
  204. <template #actions="{ confirm, cancel }">
  205. <el-button size="small" @click="cancel">No!</el-button>
  206. <el-button :color="'#6466F1'" size="small" @click="confirm">Yes?</el-button>
  207. </template>
  208. </el-popconfirm>
  209. </div>
  210. </div>
  211. </template>
  212. <!-- 工具栏右侧 -->
  213. <template #toolbar_tools>
  214. <el-button circle class="toolbar-btn" @click="handleRefresh">
  215. <el-icon>
  216. <Refresh />
  217. </el-icon>
  218. </el-button>
  219. </template>
  220. <template #pager>
  221. <vxe-pager
  222. v-model:currentPage="gridOptions.pagerConfig.page"
  223. v-model:pageSize="gridOptions.pagerConfig.limit"
  224. :total="gridOptions.pagerConfig.total"
  225. class="mt-1.5"
  226. @page-change="handlePageChange"
  227. />
  228. </template>
  229. <template #empty>
  230. <el-empty description="暂无数据" />
  231. </template>
  232. <!-- 自定义列插槽 -->
  233. <template v-for="col in CompanySkuColumns" #[`${col.field}`]="{ row }">
  234. <DataTableSlot
  235. :key="row.id"
  236. :field="col.field"
  237. :row="row"
  238. @edit-row="handleEdit"
  239. @handle-delete="singleDelete"
  240. @release-sku="handleReleaseSku"
  241. @show-sku="handleShowSku"
  242. />
  243. </template>
  244. </vxe-grid>
  245. <SkuBuilder v-if="showSkuBuilder" v-model="showSkuBuilder" :row-data="rowData" :skuData="skuData"
  246. @refresh="handleRefresh" />
  247. <ShowSkuDrawer v-if="showOpen" v-model="showOpen" :row-data="rowData" :skuData="skuData" />
  248. </template>
  249. <style scoped>
  250. .toolbar-btn {
  251. width: 34px;
  252. height: 34px;
  253. font-size: 18px;
  254. }
  255. :deep(.custom-el-input .el-select__wrapper) {
  256. border-radius: 20px;
  257. }
  258. </style>