crud.code-snippets 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. {
  2. "cl-crud": {
  3. "prefix": "cl-crud",
  4. "scope": "vue",
  5. "body": [
  6. "<template>",
  7. " <cl-crud ref=\"Crud\">",
  8. " <cl-row>",
  9. " <!-- 刷新按钮 -->",
  10. " <cl-refresh-btn />",
  11. " <!-- 新增按钮 -->",
  12. " <cl-add-btn />",
  13. " <!-- 删除按钮 -->",
  14. " <cl-multi-delete-btn />",
  15. " <cl-flex1 />",
  16. " <!-- 条件搜索 -->",
  17. " <cl-search ref=\"Search\" />",
  18. " </cl-row>",
  19. "",
  20. " <cl-row>",
  21. " <!-- 数据表格 -->",
  22. " <cl-table ref=\"Table\" />",
  23. " </cl-row>",
  24. "",
  25. " <cl-row>",
  26. " <cl-flex1 />",
  27. " <!-- 分页控件 -->",
  28. " <cl-pagination />",
  29. " </cl-row>",
  30. "",
  31. " <!-- 新增、编辑 -->",
  32. " <cl-upsert ref=\"Upsert\" />",
  33. " </cl-crud>",
  34. "</template>",
  35. "",
  36. "<script lang=\"ts\" setup>",
  37. "defineOptions({",
  38. " name: \"$1\"",
  39. "});",
  40. "",
  41. "import { useCrud, useTable, useUpsert, useSearch } from \"@cool-vue/crud\";",
  42. "import { useCool } from \"/@/cool\";",
  43. "",
  44. "const { service } = useCool();",
  45. "",
  46. "// cl-upsert",
  47. "const Upsert = useUpsert({",
  48. " items: []",
  49. "});",
  50. "",
  51. "// cl-table",
  52. "const Table = useTable({",
  53. " columns: []",
  54. "});",
  55. "",
  56. "// cl-search",
  57. "const Search = useSearch();",
  58. "",
  59. "// cl-crud",
  60. "const Crud = useCrud(",
  61. " {",
  62. " service: service$2",
  63. " },",
  64. " (app) => {",
  65. " app.refresh();",
  66. " }",
  67. ");",
  68. "",
  69. "// 刷新",
  70. "function refresh(params?: any) {",
  71. " Crud.value?.refresh(params);",
  72. "}",
  73. "</script>",
  74. ""
  75. ],
  76. "description": "cl-crud snippets"
  77. },
  78. "cl-filter": {
  79. "prefix": "cl-filter",
  80. "scope": "html",
  81. "body": [
  82. "<cl-filter label=\"\">",
  83. " <cl-select :options=\"[$1]\" prop=\"\" />",
  84. "</cl-filter>"
  85. ],
  86. "description": "cl-filter snippets"
  87. },
  88. "slot-item": {
  89. "prefix": "slot item",
  90. "scope": "html",
  91. "body": ["<template #slot-$1=\"{ scope }\">", "</template>", ""],
  92. "description": "slot snippets"
  93. },
  94. "slot-column": {
  95. "prefix": "slot column",
  96. "scope": "html",
  97. "body": ["<template #column-$1=\"{ scope }\">", " ", "</template>", ""],
  98. "description": "column slot snippets"
  99. }
  100. }