index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <div>
  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-right="{}">
  20. <el-button
  21. class="ml-3"
  22. @click="exportData('/api/v1/plan/order/export')"
  23. >
  24. <template #icon> <i-ep-download /> </template>导出
  25. </el-button>
  26. </template> -->
  27. <template #menu-left="{}">
  28. <el-button
  29. type="primary"
  30. @click="editDialog.visible = true"
  31. style="margin-bottom: 15px"
  32. >新增 / 编辑</el-button
  33. >
  34. </template>
  35. <template #menu="{ row, index, type }">
  36. <el-button @click="deleteTep(row.id)" text type="primary"
  37. >删除</el-button
  38. >
  39. </template>
  40. </avue-crud>
  41. <el-dialog
  42. v-model="editDialog.visible"
  43. :title="editDialog.title"
  44. width="1200px"
  45. @close="handleClose"
  46. >
  47. <div class="dialog">
  48. <div>
  49. 请选择Excel模板:
  50. <el-select v-model="value1" multiple placeholder="Select">
  51. <el-option
  52. v-for="item in options"
  53. :key="item.value"
  54. :label="item.label"
  55. :value="item.value"
  56. />
  57. </el-select>
  58. </div>
  59. <div class="btns">
  60. <el-button @click="handleClose">取消</el-button>
  61. <el-button type="primary" @click="onSelected"> 确定 </el-button>
  62. </div>
  63. </div>
  64. </el-dialog>
  65. </div>
  66. </template>
  67. <script setup>
  68. import { ref } from "vue";
  69. import { useCrud } from "@/hooks/userCrud";
  70. import { useDictionaryStore } from "@/store";
  71. import { useRoute } from "vue-router";
  72. import { getForm, add, deleteTemp } from "@/api/excel";
  73. const value1 = ref([]);
  74. const options = ref([]);
  75. const route = useRoute();
  76. //删除
  77. const deleteTep = async (id) => {
  78. const { data, code } = await deleteTemp({
  79. id,
  80. });
  81. if (code == "200") {
  82. ElMessage.success("删除成功!");
  83. dataList();
  84. setValue1();
  85. }
  86. };
  87. //新增
  88. const onSelected = async () => {
  89. const { data, code } = await add({
  90. baseFormIds: value1.value,
  91. operationId: route.params.id,
  92. });
  93. if (code == "200") {
  94. ElMessage.success("添加成功!");
  95. dataList();
  96. handleClose();
  97. }
  98. };
  99. //关闭弹窗
  100. const handleClose = () => {
  101. editDialog.value.visible = false;
  102. value1.value = [];
  103. };
  104. // 数据字典相关
  105. const { dicts } = useDictionaryStore();
  106. // 传入一个url,后面不带/
  107. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  108. useCrud({
  109. src: "/api/v1/opExcelForm",
  110. });
  111. // const setValue1 = () => {
  112. // value1.value = [];
  113. // data.value.forEach((el) => {
  114. // value1.value.push(el.id);
  115. // });
  116. // };
  117. search.value = { ...search.value, operationId: route.params.id };
  118. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  119. Methords; //增删改查
  120. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  121. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  122. const editDialog = ref({ visible: false, title: "绑定模版" });
  123. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  124. //获取Excel模版列表
  125. const getTemplate = async () => {
  126. const { data } = await getForm({
  127. pageNo: 1,
  128. pageSize: 9999999,
  129. formType: 0
  130. });
  131. options.value = [];
  132. data.records.forEach((element) => {
  133. options.value.push({
  134. value: element.id,
  135. label: element.formName,
  136. });
  137. });
  138. };
  139. onMounted(() => {
  140. getTemplate();
  141. dataList();
  142. });
  143. // watch(
  144. // () => data.value,
  145. // (val) => {
  146. // setValue1();
  147. // },
  148. // {
  149. // immediately: true,
  150. // }
  151. // );
  152. option.value = Object.assign(option.value, {
  153. selection: false,
  154. addBtn: false,
  155. menu: true,
  156. viewBtn: false,
  157. editBtn: false,
  158. delBtn: false,
  159. addBtn: false,
  160. searchMenuSpan: 8,
  161. column: [
  162. {
  163. label: "工序id",
  164. prop: "operationId",
  165. display: false,
  166. hide: true,
  167. },
  168. {
  169. label: "模版名称",
  170. prop: "formName",
  171. addDisabled: true,
  172. editDisabled: true,
  173. },
  174. {
  175. label: "模版类型",
  176. prop: "formType",
  177. addDisabled: true,
  178. editDisabled: true,
  179. dicData: dicts.excel_type,
  180. props: { label: "dictLabel", value: "dictValue" },
  181. },
  182. {
  183. label: "修改时间",
  184. prop: "updated",
  185. addDisabled: true,
  186. editDisabled: true,
  187. },
  188. {
  189. label: "操作人",
  190. prop: "updator",
  191. addDisabled: true,
  192. editDisabled: true,
  193. },
  194. ],
  195. });
  196. </script>
  197. <style lang="scss" scoped>
  198. .dialog {
  199. width: 100%;
  200. height: 120px;
  201. position: relative;
  202. .btns {
  203. position: absolute;
  204. right: 0;
  205. bottom: 0;
  206. }
  207. }
  208. </style>