index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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="selectionChange"
  18. >
  19. <template #menu="{ row, index, type }">
  20. <el-button @click="binding(row)" icon="el-icon-link" text type="primary"
  21. >技能</el-button
  22. >
  23. </template>
  24. <template #menu-left="{ size }">
  25. <el-button
  26. :disabled="toDeleteIds.length < 1"
  27. type="danger"
  28. icon="el-icon-delete"
  29. :size="size"
  30. @click="multipleDelete"
  31. >删除</el-button
  32. >
  33. </template>
  34. </avue-crud>
  35. <el-dialog
  36. v-model="dialog.visible"
  37. :title="dialog.title"
  38. width="800px"
  39. @close="dialog.visible = false"
  40. :destroy-on-close="true"
  41. >
  42. <post-skill :postId="post.id" :dialog="dialog" />
  43. </el-dialog>
  44. <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  45. </div>
  46. </template>
  47. <script setup>
  48. import { ref, getCurrentInstance } from "vue";
  49. import { useCrud } from "@/hooks/userCrud";
  50. import ButtonPermKeys from "@/common/configs/buttonPermission";
  51. import { useCommonStoreHook } from "@/store";
  52. import dictDataUtil from "@/common/configs/dictDataUtil";
  53. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  54. const test = () => {
  55. isShowTable.value = true;
  56. tableType.value = tableType.value == 1 ? 2 : 1;
  57. };
  58. const post = ref(null);
  59. const binding = (row) => {
  60. post.value = row;
  61. dialog.visible = true;
  62. };
  63. // 传入一个url,后面不带/
  64. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  65. useCrud({
  66. src: "/api/v1/sys/post",
  67. });
  68. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  69. Methords; //增删改查
  70. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  71. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  72. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  73. const dialog = reactive({
  74. title: "技能",
  75. visible: false,
  76. });
  77. // 设置表格列或者其他自定义的option
  78. option.value = Object.assign(option.value, {
  79. delBtn: false,
  80. selection: true,
  81. column: [
  82. {
  83. label: "岗位组",
  84. prop: "postGroup",
  85. type: "select",
  86. search: true,
  87. dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.post_group,
  88. props: {
  89. label: "dictLabel",
  90. value: "dictValue",
  91. },
  92. rules: [
  93. {
  94. required: true,
  95. message: "岗位组不能为空",
  96. trigger: "trigger",
  97. },
  98. ],
  99. },
  100. {
  101. label: "岗位类别",
  102. prop: "postType",
  103. type: "select",
  104. search: true,
  105. dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.post_type,
  106. props: {
  107. label: "dictLabel",
  108. value: "dictValue",
  109. },
  110. rules: [
  111. {
  112. required: true,
  113. message: "岗位类别不能为空",
  114. trigger: "trigger",
  115. },
  116. ],
  117. },
  118. {
  119. label: "岗位编码",
  120. prop: "postCode",
  121. search: true,
  122. display: false,
  123. },
  124. {
  125. label: "岗位名称",
  126. prop: "postName",
  127. rules: [
  128. {
  129. required: true,
  130. message: "岗位名称不能为空",
  131. trigger: "trigger",
  132. },
  133. ],
  134. },
  135. {
  136. label: "状态",
  137. prop: "state",
  138. type: "select",
  139. dicData: [
  140. { label: "正常", value: 0 },
  141. { label: "禁用", value: 1 },
  142. ],
  143. html: true,
  144. formatter: (val) => {
  145. if (val.state === 0) {
  146. return '<b class="el-tag el-tag--success el-tag--light">正常</b>';
  147. }
  148. return '<b class="el-tag el-tag--danger el-tag--light">禁用</b>';
  149. },
  150. addDisplay: true,
  151. rules: [
  152. {
  153. required: true,
  154. message: "状态不能为空",
  155. trigger: "trigger",
  156. },
  157. ],
  158. },
  159. {
  160. label: "备注",
  161. prop: "remark",
  162. width: "100",
  163. showOverflowTooltip: true,
  164. minRows: 2, //最小行/最小值
  165. type: "textarea", //类型为多行文本域框
  166. maxlength: 512, //最大输入长度
  167. },
  168. {
  169. label: "创建时间",
  170. prop: "created",
  171. display: false,
  172. },
  173. ],
  174. });
  175. onMounted(() => {
  176. // console.log("crudRef", crudRef)
  177. dataList();
  178. });
  179. /**
  180. * 上传excel相关
  181. */
  182. const uploadRef = ref(null);
  183. const uploadFinished = () => {
  184. // 上传完成后的刷新操作
  185. page.currentPage = 1;
  186. dataList();
  187. };
  188. const importExcelData = () => {
  189. if (uploadRef.value) {
  190. uploadRef.value.show("/api/v1/device/import");
  191. }
  192. };
  193. </script>