excelCom.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!-- 表格数据 -->
  2. <template>
  3. <div class="mainContentBox">
  4. <avue-crud
  5. ref="crudRef2"
  6. v-model:search="search"
  7. v-model="form"
  8. @row-update="createRow"
  9. :data="data"
  10. :option="option"
  11. v-model:page="page"
  12. >
  13. <template #menu="{ size, row, index }">
  14. <el-button
  15. v-if="row.excelData != '' && row.excelData != null"
  16. link
  17. size="small"
  18. type="primary"
  19. @click="opView(row)"
  20. style="margin: 0"
  21. ><i-ep-view />查看
  22. </el-button>
  23. <el-button
  24. v-if="row.excelData != '' && row.excelData != null"
  25. type="warning"
  26. link
  27. size="small"
  28. @click="opUpdate(row)"
  29. style="margin: 0"
  30. ><i-ep-edit />修改表格数据
  31. </el-button>
  32. </template>
  33. </avue-crud>
  34. <el-dialog
  35. v-model="updataShow"
  36. :title="updateTitle"
  37. @close="updataShow = false"
  38. width="1600"
  39. >
  40. <updateExcel
  41. @refresh="refreshDatalist"
  42. :data="ExData"
  43. @close="closeShow"
  44. />
  45. </el-dialog>
  46. </div>
  47. </template>
  48. <script setup>
  49. import { ref, getCurrentInstance } from "vue";
  50. import { useCrud } from "@/hooks/userCrud";
  51. import dictDataUtil from "@/common/configs/dictDataUtil";
  52. import ButtonPermKeys from "@/common/configs/buttonPermission";
  53. import {
  54. useCommonStoreHook,
  55. useDictionaryStore,
  56. useUserStoreHook,
  57. } from "@/store";
  58. import updateExcel from "./updateExcel.vue";
  59. // 数据字典相关
  60. const { dicts } = useDictionaryStore();
  61. const updataShow = ref(false);
  62. const updateTitle = ref("修改表格数据");
  63. const crudRef2 = ref({});
  64. const lookStatus = ref(false);
  65. const opUpdate = (row) => {
  66. ExData.value = row;
  67. ExData.value.lookStatus = false;
  68. updataShow.value = true;
  69. };
  70. const opView = (row) => {
  71. ExData.value = row;
  72. ExData.value.lookStatus = true;
  73. updataShow.value = true;
  74. };
  75. const closeShow = () => {
  76. updataShow.value = false;
  77. };
  78. const ExData = ref("");
  79. // 传入一个url,后面不带/
  80. const {
  81. form,
  82. data,
  83. option,
  84. search,
  85. page,
  86. toDeleteIds,
  87. Methords,
  88. Utils,
  89. commonConfig,
  90. } = useCrud({
  91. src: "/api/v1/ProcessFormData",
  92. });
  93. const ctableRef = ref(null);
  94. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  95. Methords; //增删改查
  96. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  97. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  98. const userStore = useUserStoreHook();
  99. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  100. const doEdit = (row, index) => {
  101. crudRef2.value && crudRef2.value.rowEdit(row, index);
  102. };
  103. const refreshTra = (row) => {
  104. commonConfig.value.params = { seqNo: row.seqNo };
  105. dataList();
  106. };
  107. const refreshDatalist = () => {
  108. dataList();
  109. };
  110. defineExpose({ refreshTra });
  111. onMounted(() => {
  112. if (userStore.user.userId === 10000) {
  113. option.value.menu = true;
  114. }
  115. });
  116. option.value = Object.assign(option.value, {
  117. selection: false,
  118. border: true,
  119. index: false,
  120. expandLevel: 3,
  121. headerAlign: "center",
  122. align: "center",
  123. labelWidth: 100,
  124. addBtn: false,
  125. delBtn: false,
  126. viewBtn: false,
  127. menu: false,
  128. header: false,
  129. editBtn: false,
  130. rowKey: "operationId",
  131. column: [
  132. {
  133. label: "工序Id",
  134. prop: "operationId",
  135. display: false,
  136. hide: true,
  137. },
  138. {
  139. label: "工序名称",
  140. prop: "operationName",
  141. disabled: true,
  142. search: false,
  143. display: false,
  144. },
  145. {
  146. label: "表格名称",
  147. disabled: true,
  148. prop: "formName",
  149. search: false,
  150. },
  151. {
  152. label: "表格类型",
  153. prop: "formType",
  154. type: "select",
  155. disabled: true,
  156. search: false,
  157. dicData: dicts.excel_type,
  158. props: {
  159. label: "dictLabel",
  160. value: "dictValue",
  161. },
  162. },
  163. ],
  164. });
  165. </script>