index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. <script>
  2. import materialApi from "@/api/material/basic";
  3. import { SearchColumns, OtherDictColumns } from "./columns";
  4. import { initDicts } from "@/utils/init.js";
  5. export default {
  6. name: "material-basic",
  7. dicts: [...initDicts([...SearchColumns, ...OtherDictColumns])],
  8. components: {
  9. ElSuperSearch: () => import("@/components/super-search/index.vue"),
  10. ElDictTag: () => import("@/components/DictTag/index.vue"),
  11. IsUsing: () => import("./isUsing/index.vue"),
  12. detailDrawer: () => import("./details.vue"),
  13. whlbButton: () => import("./wei-hu-lei-bie/index.vue"),
  14. BatchImport: () => import("@/components/BatchImport/index.vue"),
  15. },
  16. data() {
  17. const params = this.$init.params(SearchColumns);
  18. const page = this.$init.page();
  19. return {
  20. loading: false,
  21. params: params,
  22. SearchColumns: SearchColumns,
  23. rowKey: "id",
  24. size: "mini",
  25. page: page,
  26. taskList: [],
  27. checkedList: [],
  28. resizeHeight: 0,
  29. tableHeader: [],
  30. };
  31. },
  32. computed: {
  33. tableHeight: {
  34. get() {
  35. return this.resizeHeight;
  36. },
  37. set() {},
  38. },
  39. },
  40. directives: {
  41. // 使用局部注册指令的方式
  42. resize: {
  43. // 指令的名称
  44. bind(el, binding) {
  45. // el为绑定的元素,binding为绑定给指令的对象
  46. let width = "",
  47. height = "";
  48. function isReize() {
  49. const style = document.defaultView.getComputedStyle(el);
  50. if (width !== style.width || height !== style.height) {
  51. binding.value(); // 关键
  52. }
  53. width = style.width;
  54. height = style.height;
  55. }
  56. el.__vueSetInterval__ = setInterval(isReize, 300);
  57. },
  58. unbind(el) {
  59. clearInterval(el.__vueSetInterval__);
  60. },
  61. },
  62. },
  63. methods: {
  64. resize() {
  65. this.resizeHeight =
  66. document.getElementsByClassName("el-super-ux-table")[0].offsetHeight -
  67. 55;
  68. },
  69. // 列表
  70. async useList() {
  71. try {
  72. this.loading = true;
  73. this.checkedList = [];
  74. let param = {
  75. templateCode: "material",
  76. ...this.params,
  77. createTimeBegin:
  78. (this.params.createTimeQueue && this.params.createTimeQueue[0]) ||
  79. "",
  80. createTimeEnd:
  81. (this.params.createTimeQueue && this.params.createTimeQueue[1]) ||
  82. "",
  83. updateTimeBegin:
  84. (this.params.updateTimeQueue && this.params.updateTimeQueue[0]) ||
  85. "",
  86. updateTimeEnd:
  87. (this.params.updateTimeQueue && this.params.updateTimeQueue[1]) ||
  88. "",
  89. };
  90. let {
  91. code,
  92. data: {
  93. tableBody: { rows, total },
  94. },
  95. } = await materialApi.materialList(param, this.page);
  96. if (code == 200) {
  97. this.taskList = rows;
  98. this.page.total = total;
  99. }
  100. } catch (error) {
  101. } finally {
  102. this.loading = false;
  103. }
  104. },
  105. // 获取物料列表表头
  106. async getTagList(templateCode) {
  107. try {
  108. let { code, data } = await materialApi.tagList({ templateCode });
  109. if (code == 200) {
  110. this.tableHeader = data;
  111. }
  112. } catch (error) {}
  113. },
  114. // 重置
  115. useReset() {
  116. this.params = this.$init.params(SearchColumns);
  117. this.page = this.$init.page();
  118. this.useList();
  119. },
  120. handleEdit() {
  121. let { setVisible } = this.$refs.detailDrawer;
  122. setVisible(true);
  123. // this.$router.push({
  124. // path: `/material/basicFile/detail/${this.checkedList[0].id}`,
  125. // query: {
  126. // isEdit: true,
  127. // },
  128. // });
  129. },
  130. // 确认导入
  131. handelImport(fileList) {
  132. let formData = new FormData();
  133. formData.append("file", fileList[0].raw);
  134. materialApi.fileImport(formData).then((res) => {
  135. if (res.code == 200) {
  136. if (res.data.flag) {
  137. this.$modal.loading("加载中...");
  138. console.log(res.data.datas);
  139. let param = { failDatas: res.data.datas };
  140. if (null != param) {
  141. materialApi.exportMartial(param).then((res) => {
  142. const blob = new Blob([res], {
  143. type: "application/vnd.ms-excel;charset=UTF-8",
  144. }); // 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
  145. const downloadElement = document.createElement("a"); //创建a标签
  146. const href = window.URL.createObjectURL(blob); // 创建下载的链接
  147. downloadElement.href = href; //下载地址
  148. downloadElement.download = "导入失败的物料基础档案数据.xlsx"; // 下载后文件名
  149. document.body.appendChild(downloadElement);
  150. downloadElement.click(); // 点击下载
  151. document.body.removeChild(downloadElement); // 下载完成移除元素
  152. window.URL.revokeObjectURL(href); // 释放blob对象
  153. this.$modal.closeLoading();
  154. let { setVisible } = this.$refs.batchImport;
  155. setVisible(false);
  156. });
  157. }
  158. }
  159. this.$notify({
  160. message: res.data.msg,
  161. type: res.data.flag ? "warning" : "success",
  162. });
  163. } else {
  164. this.$notify({
  165. message: res.msg,
  166. type: res.code == 200 ? "success" : "warning",
  167. });
  168. }
  169. });
  170. },
  171. // 模板下载
  172. handleTemDownload() {
  173. this.download("/system/material/download", {}, `物料基本信息模板.xlsx`);
  174. },
  175. // 批量导出
  176. useExport() {
  177. let ids = this.checkedList.length
  178. ? this.checkedList.map((i) => i.id)
  179. : [];
  180. if (ids.length) {
  181. let params = {
  182. // orgId: '1',
  183. ids,
  184. };
  185. this.download(
  186. "/system/material/export",
  187. params,
  188. `物料基本信息${new Date().getTime()}.xlsx`
  189. );
  190. } else {
  191. let params = {
  192. templateCode: "material",
  193. ...this.params,
  194. createTimeBegin:
  195. (this.params.createTimeQueue && this.params.createTimeQueue[0]) ||
  196. "",
  197. createTimeEnd:
  198. (this.params.createTimeQueue && this.params.createTimeQueue[1]) ||
  199. "",
  200. updateTimeBegin:
  201. (this.params.updateTimeQueue && this.params.updateTimeQueue[0]) ||
  202. "",
  203. updateTimeEnd:
  204. (this.params.updateTimeQueue && this.params.updateTimeQueue[1]) ||
  205. "",
  206. };
  207. this.download(
  208. "/system/material/export",
  209. params,
  210. `物料基本信息${new Date().getTime()}.xlsx`
  211. );
  212. }
  213. },
  214. useDbClick(e) {
  215. this.checkedList = [{ ...e }];
  216. let { setVisible } = this.$refs.detailDrawer;
  217. setVisible(true);
  218. // this.$router.push({
  219. // path: `/material/basicFile/detail/${e.id}`,
  220. // });
  221. },
  222. // 行数据勾选操作
  223. handleSelect(selection, row) {
  224. this.checkedList = selection;
  225. },
  226. //手动勾选全选
  227. handleSelectAll(selection) {
  228. this.checkedList = selection;
  229. },
  230. },
  231. created() {
  232. this.getTagList("material");
  233. this.useList();
  234. },
  235. };
  236. </script>
  237. <template>
  238. <el-card
  239. v-loading="loading"
  240. :body-style="{
  241. height: '100%',
  242. padding: 0,
  243. display: 'flex',
  244. 'flex-direction': 'column',
  245. }"
  246. >
  247. <!-- 查询条件 -->
  248. <el-super-search
  249. v-model="params"
  250. :size="size"
  251. :dict="dict"
  252. :columns="SearchColumns"
  253. @reset="useReset"
  254. @submit="useList"
  255. ></el-super-search>
  256. <!-- 操作栏 -->
  257. <el-row
  258. :gutter="10"
  259. class="mb10"
  260. type="flex"
  261. justify="end"
  262. style="margin: 10px 0"
  263. >
  264. <!-- 新增、修改、删除、复制 -->
  265. <el-col :span="1.5">
  266. <el-button-group>
  267. <el-button
  268. type="primary"
  269. :size="size"
  270. @click="handleEdit"
  271. :disabled="checkedList.length !== 1"
  272. >修改</el-button
  273. >
  274. <el-button :size="size" @click="useList">刷新</el-button>
  275. </el-button-group>
  276. </el-col>
  277. <!-- 启用 -->
  278. <el-col :span="1.5">
  279. <is-using
  280. :size="size"
  281. :select-data="checkedList"
  282. @success="useList"
  283. ></is-using>
  284. </el-col>
  285. <!-- 导入导出 -->
  286. <el-col :span="1.5">
  287. <el-button-group>
  288. <BatchImport
  289. ref="batchImport"
  290. @import="handelImport"
  291. @temDownload="handleTemDownload"
  292. :fileSize="2"
  293. v-hasPermi="['system:material:import']"
  294. ></BatchImport>
  295. <!-- <el-button
  296. :size="size"
  297. @click="useImport"
  298. v-hasPermi="['system:material:import']"
  299. >批量导入</el-button
  300. > -->
  301. <el-button
  302. :size="size"
  303. @click="useExport"
  304. v-hasPermi="['system:material:export']"
  305. >批量导出</el-button
  306. >
  307. </el-button-group>
  308. </el-col>
  309. <el-col :span="1.5">
  310. <whlbButton :data="checkedList" :size="size"></whlbButton>
  311. </el-col>
  312. </el-row>
  313. <div
  314. class="el-super-ux-table"
  315. v-resize="resize"
  316. style="
  317. position: relative;
  318. display: flex;
  319. flex: 1;
  320. flex-direction: column;
  321. overflow: auto;
  322. "
  323. >
  324. <ux-grid
  325. v-if="tableHeader.length"
  326. border
  327. use-virtual
  328. keep-source
  329. beautify-table
  330. :size="size"
  331. :data="taskList"
  332. :height="tableHeight"
  333. ref="materialTable"
  334. @cell-dblclick="useDbClick"
  335. @select="handleSelect"
  336. @select-all="handleSelectAll"
  337. :header-row-style="{
  338. color: '#515a6e',
  339. }"
  340. style="flex: 1"
  341. >
  342. <
  343. <!-- 多选 -->
  344. <ux-table-column
  345. fixed="left"
  346. width="60"
  347. align="center"
  348. type="checkbox"
  349. resizable
  350. reserve-selection
  351. :column-key="rowKey"
  352. ></ux-table-column>
  353. <!-- 序号 -->
  354. <ux-table-column
  355. fixed="left"
  356. width="50"
  357. title="序号"
  358. type="index"
  359. align="center"
  360. class="is-index"
  361. resizable
  362. ></ux-table-column>
  363. <ux-table-column
  364. width="150"
  365. v-for="h in tableHeader"
  366. v-if="h.show"
  367. :title="h.name"
  368. align="center"
  369. resizable
  370. show-overflow-tooltip
  371. >
  372. <template slot-scope="scope">
  373. <span v-if="h.apiUrl">{{ scope.row[`${h.prop}Name`] }}</span>
  374. <el-checkbox
  375. v-else-if="h.attribute == 'checkbox'"
  376. v-model="scope.row[h.prop]"
  377. disabled
  378. :size="size"
  379. true-label="0"
  380. false-label="2"
  381. ></el-checkbox>
  382. <el-dict-tag
  383. v-else-if="h.dictId"
  384. :size="size"
  385. :value="scope.row[h.prop]"
  386. :options="dict.type[h.dictId]"
  387. ></el-dict-tag>
  388. <!-- <span v-else>{{ scope.row[h.prop] || "--" }}</span> -->
  389. <span v-else>{{ scope.row[h.prop] }}</span>
  390. </template>
  391. </ux-table-column>
  392. </ux-grid>
  393. <div
  394. style="
  395. height: 50px;
  396. display: flex;
  397. justify-content: space-between;
  398. align-items: center;
  399. "
  400. :style="{
  401. height: '50px',
  402. }"
  403. >
  404. <pagination
  405. :total="page.total"
  406. :page.sync="page.pageNum"
  407. :limit.sync="page.pageSize"
  408. @pagination="useList"
  409. style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
  410. />
  411. </div>
  412. </div>
  413. <detailDrawer
  414. ref="detailDrawer"
  415. :select-data.sync="checkedList"
  416. @success="useList"
  417. ></detailDrawer>
  418. </el-card>
  419. </template>
  420. <style scoped lang="scss">
  421. .el-card {
  422. width: calc(100% - 32px);
  423. height: calc(100vh - 32px);
  424. margin: 16px;
  425. padding: 16px;
  426. border-radius: 8px;
  427. }
  428. </style>