normalBtnTable.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <div>
  3. <BasicTable @register="registerTable">
  4. <template #tableTitle>
  5. <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
  6. <!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
  7. <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
  8. <a-dropdown v-if="selectedRowKeys.length > 0">
  9. <template #overlay>
  10. <a-menu>
  11. <a-menu-item key="1" @click="batchHandleDelete">
  12. <Icon icon="ant-design:delete-outlined" />
  13. 删除
  14. </a-menu-item>
  15. </a-menu>
  16. </template>
  17. <a-button
  18. >批量操作
  19. <Icon style="fontsize: 12px" icon="ant-design:down-outlined" />
  20. </a-button>
  21. </a-dropdown> -->
  22. </template>
  23. <template #action="{ record }">
  24. <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
  25. </template>
  26. <template #bodyCell="{ column, record }">
  27. <slot name="filterCell" v-bind="{ column, record }"></slot>
  28. </template>
  29. </BasicTable>
  30. <DeviceModal @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :showTab="showTab" :deviceType="deviceType" />
  31. </div>
  32. </template>
  33. <script lang="ts" name="system-user" setup>
  34. //ts语法
  35. import { ref, provide, reactive, toRaw, defineExpose } from 'vue';
  36. import { BasicTable, TableAction } from '/@/components/Table';
  37. import { useModal } from '/@/components/Modal';
  38. import DeviceModal from './DeviceModal.vue';
  39. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  40. import { useListPage } from '/@/hooks/system/useListPage';
  41. const props = defineProps({
  42. columnsType: {
  43. type: String,
  44. // required: true,
  45. },
  46. columns: {
  47. type: Array,
  48. // required: true,
  49. default: () => [],
  50. },
  51. searchFormSchema: {
  52. type: Array,
  53. required: true,
  54. default: () => [],
  55. },
  56. formSchema: {
  57. type: Array,
  58. required: true,
  59. },
  60. list: {
  61. type: Function,
  62. required: true,
  63. },
  64. getImportUrl: {
  65. type: String,
  66. required: true,
  67. },
  68. getExportUrl: {
  69. type: String,
  70. required: true,
  71. },
  72. deleteById: {
  73. type: Function,
  74. required: true,
  75. },
  76. batchDelete: {
  77. type: Function,
  78. // required: true,
  79. },
  80. saveOrUpdate: {
  81. type: Function,
  82. required: true,
  83. },
  84. pointList: {
  85. type: Function,
  86. // required: true,
  87. },
  88. showTab: {
  89. type: Boolean,
  90. default: false,
  91. },
  92. designScope: {
  93. type: String,
  94. },
  95. title: {
  96. type: String,
  97. },
  98. deviceType: {
  99. type: String,
  100. },
  101. });
  102. const isUpdate = ref(false);
  103. //lxh
  104. let dictId = ref(null);
  105. const record = reactive({});
  106. provide('formSchema', props.formSchema);
  107. provide('isUpdate', isUpdate);
  108. provide('formData', record);
  109. provide('deviceType', props.deviceType);
  110. // const glob = useGlobSetting();
  111. const [registerModal, { openModal, closeModal }] = useModal();
  112. const columnList = getTableHeaderColumns(props.columnsType);
  113. // 列表页面公共参数、方法
  114. const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
  115. designScope: props.designScope,
  116. tableProps: {
  117. title: props.title, //table标题
  118. api: props.list, //api请求
  119. columns: props.columns.length > 0 ? (props.columns as any[]) : columnList, //列信息
  120. // size: 'small',
  121. // bordered: false,
  122. formConfig: {
  123. //表单配置
  124. // labelWidth: 100,
  125. labelAlign: 'left',
  126. labelCol: {
  127. xs: 24,
  128. sm: 24,
  129. md: 24,
  130. lg: 9,
  131. xl: 7,
  132. xxl: 5,
  133. },
  134. schemas: props.searchFormSchema as any[],
  135. showActionButtonGroup: false,
  136. },
  137. striped: true, //斑马纹
  138. showIndexColumn: false, //是否显示序号列
  139. actionColumn: {
  140. //操作列配置
  141. width: 180,
  142. },
  143. beforeFetch: (params) => {
  144. return Object.assign({ column: 'createTime', order: 'desc' }, params);
  145. },
  146. },
  147. exportConfig: {
  148. name: props.title,
  149. url: props.getExportUrl,
  150. },
  151. importConfig: {
  152. url: props.getImportUrl,
  153. },
  154. });
  155. //注册table数据
  156. const [registerTable, { reload }] = tableContext;
  157. const saveOrUpdateHandler = async (params) => {
  158. Object.assign(params, { dictId: dictId.value });
  159. try {
  160. await props.saveOrUpdate(params, isUpdate.value);
  161. !props.showTab ? closeModal() : '';
  162. await doRequest(props.list, { confirm: false });
  163. } catch (error) {
  164. message.error('保存失败,请联系管理员');
  165. }
  166. };
  167. /**
  168. * 新增事件
  169. */
  170. function handleAdd() {
  171. dictId.value = null;
  172. for (let key in record) {
  173. delete record[key];
  174. }
  175. isUpdate.value = false;
  176. openModal(true);
  177. }
  178. /**
  179. * 新增下级
  180. */
  181. function handleAdds(data) {
  182. dictId.value = data.dictId;
  183. for (let key in record) {
  184. delete record[key];
  185. }
  186. isUpdate.value = false;
  187. openModal(true);
  188. }
  189. /**
  190. * 编辑事件
  191. */
  192. function handleEdit(data) {
  193. isUpdate.value = true;
  194. Object.assign(record, toRaw(data));
  195. openModal(true, {
  196. record,
  197. });
  198. }
  199. /**
  200. * 删除事件
  201. */
  202. async function handleDelete(record) {
  203. await props.deleteById({ id: record }, reload);
  204. }
  205. /**
  206. * 批量删除事件
  207. */
  208. async function batchHandleDelete() {
  209. doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
  210. }
  211. /**
  212. * 查看
  213. */
  214. // function handleDetail(record) {
  215. // iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
  216. // openDetail(true);
  217. // }
  218. /**
  219. * 操作列定义
  220. * @param record
  221. */
  222. function getActions(record) {
  223. return [
  224. {
  225. label: '编辑',
  226. onClick: handleEdit.bind(null, record),
  227. },
  228. {
  229. label: '新增下级',
  230. onClick: handleAdds.bind(null, record),
  231. },
  232. {
  233. label: '删除',
  234. popConfirm: {
  235. title: '是否确认删除',
  236. confirm: handleDelete.bind(null, record),
  237. },
  238. },
  239. // {
  240. // label: '查看',
  241. // onClick: handleDetail.bind(null, record),
  242. // },
  243. ];
  244. }
  245. /**
  246. * 下拉操作栏
  247. */
  248. function getDropDownAction(record) {
  249. return [
  250. // {
  251. // label: '删除',
  252. // popConfirm: {
  253. // title: '是否确认删除',
  254. // confirm: handleDelete.bind(null, record),
  255. // },
  256. // },
  257. // {
  258. // label: '查看',
  259. // onClick: handleDetail.bind(null, record),
  260. // },
  261. ];
  262. }
  263. defineExpose({
  264. doRequest,
  265. });
  266. </script>
  267. <style scoped lang="less">
  268. @ventSpace: zxm;
  269. @vent-table-no-hover: #00bfff10;
  270. :deep(.@{ventSpace}-table-cell-row-hover) {
  271. background: #264d8833 !important;
  272. }
  273. :deep(.@{ventSpace}-table-row-selected) {
  274. background: #268bc522 !important;
  275. }
  276. :deep(.@{ventSpace}-table-tbody > tr > td) {
  277. background-color: #0dc3ff05;
  278. }
  279. :deep(.jeecg-basic-table-row__striped) {
  280. td {
  281. background-color: @vent-table-no-hover !important;
  282. }
  283. }
  284. </style>