BaseTemplatesList.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <div>
  3. <!--引用表格-->
  4. <BasicTable @register="registerTable" :rowSelection="rowSelection">
  5. <!--插槽:table标题-->
  6. <template #tableTitle>
  7. </template>
  8. <template #templateFile="{ record }">
  9. <a :href="baseUrl+record.templateFile">{{record.templateFile}}</a>
  10. </template>
  11. <!--操作栏-->
  12. <template #action="{ record }">
  13. <!-- <TableAction :actions="getTableAction(record)" /> -->
  14. <span slot="upload" >
  15. <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="uploadUrl" @change="value => handleImportExcel(value, record)">
  16. <a>上传</a>
  17. </a-upload>
  18. </span>
  19. </template>
  20. <!--字段回显插槽-->
  21. <template v-slot:bodyCell="{ column, record, index, text }">
  22. </template>
  23. </BasicTable>
  24. <!-- 表单区域 -->
  25. <BaseTemplatesModal @register="registerModal" @success="handleSuccess"></BaseTemplatesModal>
  26. </div>
  27. </template>
  28. <script lang="ts" name="baseCode-baseTemplates" setup>
  29. import {ref, reactive, computed, unref} from 'vue';
  30. import {BasicTable, useTable, TableAction} from '/@/components/Table';
  31. import {useModal} from '/@/components/Modal';
  32. import { useListPage } from '/@/hooks/system/useListPage'
  33. import BaseTemplatesModal from './components/BaseTemplatesModal.vue'
  34. import {columns, searchFormSchema,} from './BaseTemplates.data';
  35. import {list, getImportUrl,getExportUrl} from './BaseTemplates.api';
  36. import { getToken } from '/@/utils/auth';
  37. import { message } from 'ant-design-vue';
  38. import { useGlobSetting } from '/@/hooks/setting';
  39. import { defHttp } from '/@/utils/http/axios';
  40. const queryParam = reactive<any>({});
  41. const { domainUrl } = useGlobSetting();
  42. const baseUrl = domainUrl + '/sys/common/static/';
  43. //注册model
  44. const [registerModal] = useModal();
  45. const tokenHeader = { 'X-Access-Token': getToken() };
  46. //注册table数据
  47. const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
  48. tableProps:{
  49. title: '模板',
  50. api: list,
  51. columns,
  52. canResize:false,
  53. formConfig: {
  54. //labelWidth: 120,
  55. schemas: searchFormSchema,
  56. autoSubmitOnEnter:true,
  57. showAdvancedButton:true,
  58. fieldMapToNumber: [
  59. ],
  60. fieldMapToTime: [
  61. ],
  62. },
  63. actionColumn: {
  64. width: 120,
  65. fixed:'right'
  66. },
  67. beforeFetch: (params) => {
  68. return Object.assign(params, queryParam);
  69. },
  70. },
  71. exportConfig: {
  72. name:"模板",
  73. url: getExportUrl,
  74. params: queryParam,
  75. },
  76. importConfig: {
  77. url: getImportUrl,
  78. success: handleSuccess
  79. },
  80. })
  81. const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
  82. /**
  83. * 成功回调
  84. */
  85. function handleSuccess() {
  86. (selectedRowKeys.value = []) && reload();
  87. }
  88. /**
  89. * 操作栏
  90. */
  91. function getTableAction(record){
  92. return [
  93. {
  94. label: '上传',
  95. scopedSlots: { customRender: 'upload' }
  96. // auth: 'baseCode:base_templates:edit'
  97. }
  98. ]
  99. }
  100. function handleImportExcel(info,record){
  101. if (info.file.status !== 'uploading') {
  102. // console.log(info.file, info.fileList);
  103. }
  104. if (info.file.status === 'done') {
  105. if (info.file.response.success) {
  106. var row = JSON.parse(JSON.stringify(record))
  107. row.templateFile = info.file.response.message
  108. editData(row)
  109. } else {
  110. message.error(`${info.file.name} ${info.file.response.message}.`);
  111. }
  112. } else if (info.file.status === 'error') {
  113. message.error(`文件上传失败: ${info.file.msg} `);
  114. }
  115. }
  116. function editData(record){
  117. let params = record,
  118. url = '/baseCode/baseTemplates/edit'
  119. defHttp.post({url,params}, { isTransformResponse: false })
  120. .then((res) => {
  121. if (res.success) {
  122. reload()
  123. message.success('上传成功');
  124. } else {
  125. message.error(res.message);
  126. }
  127. })
  128. .finally(() => {
  129. });
  130. }
  131. </script>
  132. <style lang="less" scoped>
  133. :deep(.ant-picker),:deep(.ant-input-number){
  134. width: 100%;
  135. }
  136. </style>