index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-crud
  4. ref="crudRef"
  5. v-model:search="search"
  6. v-model="form"
  7. :data="data"
  8. :option="option"
  9. v-model:page="page"
  10. @row-save="createRow"
  11. @row-update="updateRow"
  12. @row-del="deleteRow"
  13. @search-change="searchChange"
  14. @search-reset="resetChange"
  15. @size-change="dataList"
  16. @current-change="dataList"
  17. @selection-change="selectionChange1"
  18. >
  19. <template #menu="{ size, row }">
  20. <!-- <el-button icon="el-icon-setting" text type="primary" :size="size"-->
  21. <!-- >编辑</el-button-->
  22. <!-- >-->
  23. <el-button
  24. icon="el-icon-setting"
  25. text
  26. type="primary"
  27. :size="size"
  28. @click="defineFlow(row)"
  29. >定义</el-button
  30. >
  31. </template>
  32. </avue-crud>
  33. </div>
  34. </template>
  35. <script setup>
  36. import { ref, getCurrentInstance } from "vue";
  37. import { useCrud } from "@/hooks/userCrud";
  38. import { useCommonStoreHook } from "@/store/index";
  39. import dictDataUtil from "@/common/configs/dictDataUtil";
  40. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  41. const test = () => {
  42. isShowTable.value = true;
  43. tableType.value = tableType.value == 1 ? 2 : 1;
  44. };
  45. const clickRows = ref([]);
  46. // 传入一个url,后面不带/
  47. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  48. useCrud({
  49. src: "/api/v1/definition",
  50. });
  51. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  52. Methords; //增删改查
  53. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  54. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  55. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  56. // 设置表格列或者其他自定义的option
  57. option.value = Object.assign(option.value, {
  58. searchEnter: true,
  59. delBtn: false,
  60. selection: false,
  61. addBtn: true,
  62. editBtn: true,
  63. viewBtn: false,
  64. column: [
  65. /*{
  66. label: "流程编码",
  67. prop: "flowCode",
  68. },*/
  69. {
  70. label: "流程名称",
  71. prop: "flowName",
  72. search: true,
  73. },
  74. {
  75. label: "流程类型",
  76. prop: "flowType",
  77. type: "select",
  78. search: true,
  79. dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.flow_type,
  80. props: {
  81. label: "dictLabel",
  82. value: "dictValue",
  83. },
  84. },
  85. {
  86. label: "流程版本",
  87. prop: "flowVersion",
  88. hide: true,
  89. type: 'number',
  90. value: 1.0,
  91. precision: 1,
  92. },
  93. {
  94. label: "流程版本",
  95. html: true,
  96. addDisplay: false,
  97. editDisplay: false,
  98. formatter: (val) => {
  99. return (
  100. '<b class="el-tag el-tag--success el-tag--light">V' +
  101. val.flowVersion +
  102. "</b>"
  103. );
  104. },
  105. },
  106. {
  107. label: "状态",
  108. prop: "enable",
  109. type: "select",
  110. search: true,
  111. dicData: [
  112. { label: "启用", value: "0" },
  113. { label: "禁用", value: "1" },
  114. ],
  115. },
  116. {
  117. label: "创建时间",
  118. prop: "created",
  119. display: false,
  120. },
  121. {
  122. label: "创建人",
  123. prop: "creator",
  124. display: false,
  125. },
  126. ],
  127. });
  128. onMounted(() => {
  129. // console.log("crudRef", crudRef)
  130. dataList();
  131. });
  132. const router = useRouter();
  133. // 定义流程
  134. const defineFlow = (row) => {
  135. console.log("row", row.id);
  136. router.push({
  137. path: `/flow/definition-edit/${row.id}`,
  138. });
  139. };
  140. </script>