indexExtend.vue 11 KB

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