crud.tsx 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. import * as api from './api';
  2. import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
  3. import tableSelector from '/@/components/tableSelector/index.vue';
  4. import { shallowRef, computed } from 'vue';
  5. import manyToMany from '/@/components/manyToMany/index.vue';
  6. import { auth } from '/@/utils/authFunction';
  7. const { compute } = useCompute();
  8. export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  9. const { tabActivted } = context; //从context中获取tabActivted
  10. const pageRequest = async (query: PageQuery) => {
  11. if (tabActivted.value === 'receive') {
  12. return await api.GetSelfReceive(query);
  13. }
  14. return await api.GetList(query);
  15. };
  16. const editRequest = async ({ form, row }: EditReq) => {
  17. form.id = row.id;
  18. return await api.UpdateObj(form);
  19. };
  20. const delRequest = async ({ row }: DelReq) => {
  21. return await api.DelObj(row.id);
  22. };
  23. const addRequest = async ({ form }: AddReq) => {
  24. return await api.AddObj(form);
  25. };
  26. const viewRequest = async ({ row }: { row: any }) => {
  27. return await api.GetObj(row.id);
  28. };
  29. const IsReadFunc = computed(() => {
  30. return tabActivted.value === 'receive';
  31. });
  32. return {
  33. crudOptions: {
  34. toolbar:{
  35. buttons:{
  36. search:{show:true},
  37. // 刷新按钮
  38. refresh:{
  39. show:true},
  40. // 紧凑模式
  41. compact:{show:false},
  42. // 导出按钮
  43. /* export:{
  44. text: '导出',
  45. type: 'primary',
  46. size: 'small',
  47. icon: 'upload',
  48. circle: false,
  49. display: true
  50. }, */
  51. // 列设置按钮
  52. columns:{
  53. show:false
  54. },
  55. }
  56. },
  57. request: {
  58. pageRequest,
  59. addRequest,
  60. editRequest,
  61. delRequest,
  62. },
  63. actionbar: {
  64. buttons: {
  65. add: {
  66. show:false,
  67. // show: computed(() => {
  68. // return tabActivted.value !== 'receive' && auth('messageCenter:Create');
  69. // }),
  70. },
  71. },
  72. },
  73. form:{
  74. wrapper: {
  75. buttons: {
  76. ok:{
  77. text:'提交',
  78. show:compute((row) => {
  79. return row.mode !=='view'
  80. })
  81. }
  82. }
  83. }
  84. },
  85. rowHandle: {
  86. fixed: 'right',
  87. width: 200,
  88. buttons: {
  89. edit: {
  90. show: false,
  91. },
  92. view: {
  93. text: '查看',
  94. type: 'primary',
  95. // iconRight: 'View',
  96. show: auth('messageCenter:Search'),
  97. click({ index, row }) {
  98. crudExpose.openView({ index, row });
  99. if (tabActivted.value === 'receive') {
  100. viewRequest({ row });
  101. crudExpose.doRefresh();
  102. }
  103. },
  104. },
  105. remove: {
  106. // iconRight: 'Delete',
  107. type: 'danger',
  108. show: auth('messageCenter:Delete'),
  109. },
  110. },
  111. },
  112. columns: {
  113. /* id: {
  114. title: 'id',
  115. form: {
  116. show: false,
  117. },
  118. }, */
  119. _index: {
  120. title: '序号',
  121. form: { show: false },
  122. column: {
  123. align: 'center',
  124. width: '70px',
  125. columnSetDisabled: true,
  126. formatter: (context: any) => {
  127. let index = context.index ?? 1;
  128. let pagination = crudExpose!.crudBinding.value.pagination;
  129. return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
  130. },
  131. },
  132. },
  133. search:{
  134. title: '关键字搜索',
  135. search: { show: true,type: 'input', },
  136. type: 'input',
  137. form: {
  138. component: { placeholder: '请输入' },
  139. show:false},
  140. column: {show:false}
  141. },
  142. title: {
  143. title: '标题',
  144. search: {
  145. show: true,
  146. },
  147. type: ['text', 'colspan'],
  148. column: {
  149. minWidth: 120,
  150. },
  151. form: {
  152. rules: [
  153. // 表单校验规则
  154. {
  155. required: true,
  156. message: '必填项',
  157. },
  158. ],
  159. component: { span: 24, placeholder: '请输入标题' },
  160. },
  161. },
  162. is_read: {
  163. title: '是否已读',
  164. type: 'dict-select',
  165. column: {
  166. show: IsReadFunc.value,
  167. },
  168. dict: dict({
  169. data: [
  170. { label: '已读', value: true, color: 'success' },
  171. { label: '未读', value: false, color: 'danger' },
  172. ],
  173. }),
  174. form: {
  175. show: false,
  176. },
  177. },
  178. target_type: {
  179. title: '目标类型',
  180. type: ['dict-radio', 'colspan'],
  181. column: {
  182. minWidth: 120,
  183. },
  184. dict: dict({
  185. data: [
  186. { value: 0, label: '按用户' },
  187. { value: 1, label: '按角色' },
  188. {
  189. value: 2,
  190. label: '按部门',
  191. },
  192. { value: 3, label: '通知公告' },
  193. ],
  194. }),
  195. form: {
  196. component: {
  197. optionName: 'el-radio-button',
  198. },
  199. rules: [
  200. {
  201. required: true,
  202. message: '必选项',
  203. // @ts-ignore
  204. trigger: ['blur', 'change'],
  205. },
  206. ],
  207. },
  208. },
  209. target_user: {
  210. title: '目标用户',
  211. search: {
  212. disabled: true,
  213. },
  214. form: {
  215. component: {
  216. name: shallowRef(tableSelector),
  217. vModel: 'modelValue',
  218. displayLabel: compute(({ row }) => {
  219. if (row) {
  220. return row.user_info;
  221. }
  222. return null;
  223. }),
  224. tableConfig: {
  225. url: '/api/system/user/',
  226. label: 'name',
  227. value: 'id',
  228. isMultiple: true,
  229. columns: [
  230. {
  231. prop: 'name',
  232. label: '用户名称',
  233. width: 120,
  234. },
  235. {
  236. prop: 'phone',
  237. label: '用户电话',
  238. width: 120,
  239. },
  240. ],
  241. },
  242. },
  243. show: compute(({ form }) => {
  244. return form.target_type === 0;
  245. }),
  246. rules: [
  247. // 表单校验规则
  248. {
  249. required: true,
  250. message: '必填项',
  251. },
  252. ],
  253. },
  254. column: {
  255. show: false,
  256. component: {
  257. name: shallowRef(manyToMany),
  258. vModel: 'modelValue',
  259. bindValue: compute(({ row }) => {
  260. return row.user_info;
  261. }),
  262. displayLabel: 'name',
  263. },
  264. },
  265. },
  266. target_role: {
  267. title: '目标角色',
  268. search: {
  269. disabled: true,
  270. },
  271. width: 130,
  272. form: {
  273. component: {
  274. name: shallowRef(tableSelector),
  275. vModel: 'modelValue',
  276. displayLabel: compute(({ row }) => {
  277. if (row) {
  278. return row.role_info;
  279. }
  280. return null;
  281. }),
  282. tableConfig: {
  283. url: '/api/system/role/',
  284. label: 'name',
  285. value: 'id',
  286. isMultiple: true,
  287. columns: [
  288. {
  289. prop: 'name',
  290. label: '角色名称',
  291. },
  292. {
  293. prop: 'key',
  294. label: '权限标识',
  295. },
  296. ],
  297. },
  298. },
  299. show: compute(({ form }) => {
  300. return form.target_type === 1;
  301. }),
  302. rules: [
  303. // 表单校验规则
  304. {
  305. required: true,
  306. message: '必填项',
  307. },
  308. ],
  309. },
  310. column: {
  311. show: false,
  312. component: {
  313. name: shallowRef(manyToMany),
  314. vModel: 'modelValue',
  315. bindValue: compute(({ row }) => {
  316. return row.role_info;
  317. }),
  318. displayLabel: 'name',
  319. },
  320. },
  321. },
  322. target_dept: {
  323. title: '目标部门',
  324. search: {
  325. disabled: true,
  326. },
  327. width: 130,
  328. type: 'table-selector',
  329. form: {
  330. component: {
  331. name: shallowRef(tableSelector),
  332. vModel: 'modelValue',
  333. displayLabel: compute(({ form }) => {
  334. return form.dept_info;
  335. }),
  336. tableConfig: {
  337. url: '/api/system/dept/all_dept/',
  338. label: 'name',
  339. value: 'id',
  340. isTree: true,
  341. isMultiple: true,
  342. columns: [
  343. {
  344. prop: 'name',
  345. label: '部门名称',
  346. width: 150,
  347. },
  348. {
  349. prop: 'status_label',
  350. label: '状态',
  351. },
  352. {
  353. prop: 'parent_name',
  354. label: '父级部门',
  355. },
  356. ],
  357. },
  358. },
  359. show: compute(({ form }) => {
  360. return form.target_type === 2;
  361. }),
  362. rules: [
  363. // 表单校验规则
  364. {
  365. required: true,
  366. message: '必填项',
  367. },
  368. ],
  369. },
  370. column: {
  371. show: false,
  372. component: {
  373. name: shallowRef(manyToMany),
  374. vModel: 'modelValue',
  375. bindValue: compute(({ row }) => {
  376. return row.dept_info;
  377. }),
  378. displayLabel: 'name',
  379. },
  380. },
  381. },
  382. content: {
  383. title: '内容',
  384. column: {
  385. width: 300,
  386. show: false,
  387. },
  388. type: ['editor-wang5', 'colspan'],
  389. form: {
  390. rules: [
  391. // 表单校验规则
  392. {
  393. required: true,
  394. message: '必填项',
  395. },
  396. ],
  397. component: {
  398. disabled: false,
  399. id: '1', // 当同一个页面有多个editor时,需要配置不同的id
  400. editorConfig: {
  401. // 是否只读
  402. readOnly: compute((context) => {
  403. const { mode } = context;
  404. if (mode === 'add') {
  405. return false;
  406. }
  407. return true;
  408. }),
  409. },
  410. uploader: {
  411. type: 'form',
  412. buildUrl(res: any) {
  413. return res.url;
  414. },
  415. },
  416. },
  417. },
  418. },
  419. },
  420. },
  421. };
  422. }