index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720
  1. <!-- 物料信息基础档案 -->
  2. <script src="../../../main.js"></script>
  3. <template>
  4. <div class="material-basic" v-loading="failLoad">
  5. <!-- 主体列表 -->
  6. <el-card class="material-list" v-loading="loading">
  7. <div style="margin: 0 0 10px 0;">
  8. <!-- 查询条件 -->
  9. <el-super-search
  10. v-model="params"
  11. :size="size"
  12. :dict="dict"
  13. :columns="SearchColumns"
  14. @reset="handleResetQuery"
  15. @submit="handleQuery"
  16. ></el-super-search>
  17. <!-- <el-row :gutter="10">
  18. <el-col :span="1.5">
  19. <el-form :inline="true" :model="queryForm" class="mb-query" @submit.native.prevent>
  20. <el-form-item label="物料编码">
  21. <el-input size="small" v-model="queryForm.code" placeholder="物料编码" clearable></el-input>
  22. </el-form-item>
  23. <el-form-item label="物料名称">
  24. <el-input size="small" v-model="queryForm.name" placeholder="物料名称" clearable></el-input>
  25. </el-form-item>
  26. <el-form-item label="启用状态">
  27. <el-select size="small" v-model="queryForm.isEnable" placeholder="请选择" clearable>
  28. <el-option key="0" label="已启用" value="0"></el-option>
  29. <el-option key="2" label="已停用" value="2"></el-option>
  30. </el-select>
  31. </el-form-item>
  32. <el-form-item label="是否同步NC">
  33. <el-select size="small" v-model="queryForm.isSync" placeholder="请选择" clearable>
  34. <el-option key="0" label="是" value="0"></el-option>
  35. <el-option key="2" label="否" value="2"></el-option>
  36. </el-select>
  37. </el-form-item>
  38. <el-form-item>
  39. <el-button size="small" type="primary" @click="handleQuery">搜 索</el-button>
  40. <el-button size="small" @click="handleResetQuery">重 置</el-button>
  41. </el-form-item>
  42. </el-form>
  43. </el-col>
  44. </el-row> -->
  45. </div>
  46. <!-- 操作栏 -->
  47. <el-row
  48. :gutter="10"
  49. class="mb10"
  50. type="flex"
  51. justify="end"
  52. >
  53. <!-- 新增、修改、删除、复制 -->
  54. <el-col :span="1.5">
  55. <el-button-group>
  56. <!-- <el-button size="small" @click="handleInster">新增</el-button> -->
  57. <el-button size="small" @click="handleEdit">修改</el-button>
  58. <!-- <el-button size="small" @click="handleDel">删除</el-button> -->
  59. <!-- <el-button size="small" @click="handleCopy">复制</el-button> -->
  60. </el-button-group>
  61. </el-col>
  62. <!-- 查询、刷新、过滤 -->
  63. <el-col :span="1.5">
  64. <el-button-group>
  65. <!-- <el-dropdown size="small" @command="handleFilter">
  66. <el-button size="small">
  67. 过滤<i class="el-icon-arrow-down el-icon--right"></i>
  68. </el-button>
  69. <el-dropdown-menu slot="dropdown">
  70. <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item>
  71. <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item>
  72. </el-dropdown-menu>
  73. </el-dropdown> -->
  74. <!-- <el-button size="small" @click="handleQuery">查询</el-button> -->
  75. <el-button size="small" @click="handleRefresh">刷新</el-button>
  76. </el-button-group>
  77. </el-col>
  78. <!-- 启用 -->
  79. <el-col :span="1.5">
  80. <el-button-group>
  81. <el-button size="small" @click="handleIsInvoke" :disabled="checkedList.length != 1"
  82. v-hasPermi="['system:material:add']">
  83. <!-- 0:启用 2:停用 -->
  84. {{ handleJudgeIsUsing() ? '停用' : '启用' }}
  85. </el-button>
  86. </el-button-group>
  87. </el-col>
  88. <!-- 导入导出 -->
  89. <el-col :span="1.5">
  90. <el-button-group>
  91. <el-button size="small" @click="handleImport" v-hasPermi="['system:material:import']">批量导入</el-button>
  92. <el-button size="small" @click="handleExport" v-hasPermi="['system:material:export']">批量导出</el-button>
  93. </el-button-group>
  94. </el-col>
  95. </el-row>
  96. <el-table
  97. v-if="tableHeader.length"
  98. border
  99. :data="taskList"
  100. ref="materialTable"
  101. max-height="525"
  102. @cell-dblclick="handledbClick"
  103. :row-key="getRowKey"
  104. @selection-change="handleSelectionChange"
  105. @select="handleSelect"
  106. @select-all="handleSelectAll"
  107. >
  108. <!-- -->
  109. <el-table-column type="selection" width="45" :reserve-selection="true" fixed/>
  110. <el-table-column type="index" label="序号" width="55" align="center"/>
  111. <el-table-column
  112. width="150"
  113. v-for="h in tableHeader" v-if="h.show"
  114. :label="h.name"
  115. align="center"
  116. show-overflow-tooltip
  117. >
  118. <template slot-scope="scope">
  119. <span v-if="h.apiUrl">{{scope.row[`${h.prop}Name`]}}</span>
  120. <el-checkbox
  121. v-else-if="h.attribute == 'checkbox'"
  122. v-model="scope.row[h.prop]"
  123. disabled
  124. true-label="0"
  125. false-label="2"
  126. ></el-checkbox>
  127. <el-dict-tag
  128. v-else-if="h.dictId"
  129. :value="scope.row[h.prop]"
  130. :options="dict.type[h.dictId]"
  131. ></el-dict-tag>
  132. <span v-else>{{ scope.row[h.prop] || '--' }}</span>
  133. <!-- {{ h.attribute == 'select' ? scope.row[`${h.prop}Name`] :
  134. (h.attribute == 'checkbox' ?
  135. (scope.row[h.prop] == '0' ? '√' : '')
  136. : scope.row[h.prop])
  137. }} -->
  138. </template>
  139. </el-table-column>
  140. </el-table>
  141. <pagination
  142. :total="total"
  143. :page.sync="queryParams.pageNum"
  144. :limit.sync="queryParams.pageSize"
  145. @pagination="handleQuery"
  146. style="height: 32px; padding: 0 !important; "
  147. />
  148. <!-- <el-pagination
  149. @size-change="handleSizeChange"
  150. @current-change="handleCurrentChange"
  151. :current-page="queryParams.pageNum"
  152. :page-sizes="[10, 20, 50, 100,200,500]"
  153. layout="total, sizes, prev, pager, next, jumper"
  154. :total="total"
  155. >
  156. </el-pagination> -->
  157. </el-card>
  158. <!-- 操作提示 -->
  159. <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center>
  160. <span>是否确认{{ optionDialog.op }}?</span>
  161. <span slot="footer">
  162. <el-button @click="handleOptionShow('option', false)">取 消</el-button>
  163. <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button>
  164. </span>
  165. </el-dialog>
  166. <!-- 导入弹窗 -->
  167. <el-dialog title="批量导入" :visible.sync="importData.show" width="35%" center :before-close="handlefileDialogColse">
  168. <div class="mb-import">
  169. <el-upload class="upload-demo" accept=".xls, .xlsx" ref="upload" action="#" :on-remove="handleFileRemove"
  170. :file-list="importData.list" :auto-upload="false" :on-change="handleChangeFile" :limit="1">
  171. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  172. <el-button style="margin-left: 10px;" size="small" type="success" @click="handleDownTemplate">下载模板</el-button>
  173. <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
  174. </el-upload>
  175. </div>
  176. <span slot="footer">
  177. <el-button @click="handleImportData('cancal')">取 消</el-button>
  178. <el-button type="primary" @click="handleImportData('confirm')">确 定</el-button>
  179. </span>
  180. </el-dialog>
  181. </div>
  182. </template>
  183. <script>
  184. import './style/index.scss';
  185. import materialApi from '@/api/material/basic';
  186. import { SearchColumns,OtherDictColumns } from './columns';
  187. import { initDicts } from "@/utils/init.js";
  188. export default {
  189. name: "material-basic",
  190. dicts:[...initDicts([...SearchColumns,...OtherDictColumns])],
  191. // dicts:[],
  192. components: {
  193. ElSuperSearch: () => import("@/components/super-search/index.vue"),
  194. ElDictTag: () => import("@/components/DictTag/index.vue"),
  195. },
  196. data() {
  197. const params = this.$init.params(SearchColumns);
  198. return {
  199. failLoad: false,
  200. params:params,
  201. SearchColumns:SearchColumns,
  202. size:'mini',
  203. // 物料基本信息数据
  204. taskList: [],
  205. // 查询表单字段
  206. queryForm: {
  207. name: '',
  208. code: '',
  209. isEnable: '',
  210. },
  211. // 总条数
  212. total: 1,
  213. loading: false,
  214. importData: {
  215. show: false,
  216. list: []
  217. },
  218. // 查询参数
  219. queryParams: {
  220. pageNum: 1,
  221. pageSize: 50,
  222. code: null,
  223. name: null
  224. },
  225. // 表头
  226. tableHeader: [],
  227. // 多选数组
  228. checkedList: [],
  229. // 列表选中数据
  230. // checkedList: [],
  231. // 操作弹窗
  232. optionDialog: {
  233. show: false,
  234. op: ''
  235. },
  236. }
  237. },
  238. methods: {
  239. // 判读是否启用
  240. handleJudgeIsUsing() {
  241. return this.checkedList.length == 1 && this.checkedList[0].isEnable == '已启用';
  242. },
  243. // 改变分页大小
  244. handleSizeChange(e) {
  245. this.queryParams.pageSize = e;
  246. this.handleQuery();
  247. },
  248. // 改变当前页
  249. handleCurrentChange(e) {
  250. this.queryParams.pageNum = e;
  251. this.handleQuery();
  252. },
  253. // 新增
  254. handleInster() {
  255. this.$notify({
  256. title: '警告',
  257. message: '物料只能通过申请审批增加,不能在节点直接录入!',
  258. type: 'warning'
  259. });
  260. },
  261. // 修改
  262. handleEdit() {
  263. if (this.checkedList.length == 1) {
  264. this.$router.push({
  265. path: `/material/basicFile/detail/${this.checkedList[0].id}`,
  266. query: {
  267. isEdit: true
  268. }
  269. });
  270. } else {
  271. this.$notify({
  272. title: '警告',
  273. message: `${this.checkedList.length > 1 ? '修改只能选择单个数据!' : '请选择需要修改的信息!'}`,
  274. type: 'warning'
  275. });
  276. }
  277. },
  278. // 删除
  279. handleDel() {
  280. console.log('删除', this.checkedList);
  281. // delMaterial
  282. if (this.checkedList.length) {
  283. let ids = this.checkedList.map(i => i.id);
  284. materialApi.delMaterial(ids).then(res => {
  285. if (res.code == 200) {
  286. this.handleRefresh();
  287. // 清空选中数据
  288. this.checkedList = [];
  289. this.$refs.materialTable.clearSelection();
  290. }
  291. })
  292. } else {
  293. this.$notify({
  294. title: '警告',
  295. message: `请选择需要删除的数据!`,
  296. type: 'warning'
  297. });
  298. }
  299. },
  300. // 复制
  301. handleCopy() {
  302. console.log('复制');
  303. },
  304. //查询
  305. handleQuery() {
  306. // 重新查询后需要清空列表选中的数据
  307. this.checkedList = [];
  308. this.$refs.materialTable.clearSelection();
  309. this.getMaterialList('material');
  310. },
  311. // 重置查询条件
  312. handleResetQuery() {
  313. // for (const key in this.queryForm) {
  314. // this.queryForm[key] = '';
  315. // }
  316. this.queryParams.pageNum = 1;
  317. this.queryParams.pageSize = 100;
  318. this.params = this.$init.params(SearchColumns);
  319. this.handleQuery();
  320. },
  321. // 刷新
  322. handleRefresh() {
  323. this.getMaterialList('material');
  324. // for (const key in this.queryForm) {
  325. // this.queryForm[key] = '';
  326. // }
  327. },
  328. // 过滤
  329. handleFilter(e) {
  330. console.log(e, '过滤');
  331. },
  332. filterCondition(type) {
  333. return {
  334. type
  335. }
  336. },
  337. // 启用/停用
  338. handleIsInvoke() {
  339. // true 当前状态为启用,需要改为停用
  340. // 0:启用 2:停用
  341. let param = {
  342. isEnable: this.handleJudgeIsUsing() ? '2' : '0',
  343. id: this.checkedList[0].id
  344. };
  345. materialApi.updateEnableMaterial(param).then(res => {
  346. if (res.code == 200) {
  347. this.handleRefresh();
  348. // 清空选中数据
  349. this.checkedList = [];
  350. this.$refs.materialTable.clearSelection();
  351. }
  352. })
  353. },
  354. isInvoke(val) {
  355. return val;
  356. },
  357. // 申请单查询
  358. handleQueryForm() {
  359. console.log('申请单查询');
  360. },
  361. // 批量导入
  362. handleImport() {
  363. this.importData.show = true
  364. },
  365. // 导入弹窗关闭前
  366. handlefileDialogColse(done) {
  367. this.importData.list = [];
  368. done();
  369. },
  370. // 导入弹窗操作
  371. handleImportData(type) {
  372. switch (type) {
  373. // 取消
  374. case 'cancal':
  375. this.importData.list = [];
  376. this.importData.show = false;
  377. break;
  378. // 确认
  379. case 'confirm':
  380. if (this.importData.list.length) {
  381. let formData = new FormData();
  382. formData.append('file', this.importData.list[0].raw);
  383. materialApi.fileImport(formData).then(res => {
  384. if (res.code == 200) {
  385. this.importData.show = false;
  386. this.importData.list = [];
  387. if (res.data.flag) {
  388. this.failLoad = true;
  389. console.log(res.data.datas)
  390. let param = {failDatas: res.data.datas}
  391. if (null != param) {
  392. materialApi.exportMartial(param).then(res => {
  393. const blob = new Blob([res], {
  394. type: "application/vnd.ms-excel;charset=UTF-8",
  395. });// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
  396. const downloadElement = document.createElement("a"); //创建a标签
  397. const href = window.URL.createObjectURL(blob); // 创建下载的链接
  398. downloadElement.href = href; //下载地址
  399. downloadElement.download = '导入失败的物料基础档案数据.xlsx'; // 下载后文件名
  400. document.body.appendChild(downloadElement);
  401. downloadElement.click(); // 点击下载
  402. document.body.removeChild(downloadElement); // 下载完成移除元素
  403. window.URL.revokeObjectURL(href); // 释放blob对象
  404. this.failLoad = false;
  405. })
  406. }
  407. }
  408. this.$notify({
  409. message: res.data.msg,
  410. type: res.data.flag ? 'warning' : 'success'
  411. });
  412. } else {
  413. this.$notify({
  414. message: res.msg,
  415. type: res.code == 200 ? 'success' : 'warning'
  416. });
  417. }
  418. })
  419. } else {
  420. this.$notify({
  421. title:'警告',
  422. message: '请上传文件之后在确认!',
  423. type: 'warning',
  424. });
  425. }
  426. break;
  427. }
  428. },
  429. // 删除文件
  430. handleFileRemove(file, fileList) {
  431. // console.log('删除文件', file, 'file', fileList, 'fileList');
  432. this.importData.list = fileList;
  433. },
  434. // 文件发生改变
  435. handleChangeFile(file, fileList) {
  436. this.importData.list = fileList;
  437. },
  438. // 批量导出
  439. handleExport() {
  440. let ids = this.checkedList.length ? this.checkedList.map(i => i.id) : [];
  441. if (ids.length) {
  442. let params = {
  443. // orgId: '1',
  444. ids,
  445. }
  446. this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`);
  447. } else {
  448. let params = {
  449. templateCode:'material',
  450. ...this.params,
  451. createTimeBegin: (this.params.createTimeQueue && this.params.createTimeQueue[0]) || '',
  452. createTimeEnd:(this.params.createTimeQueue && this.params.createTimeQueue[1]) || '',
  453. updateTimeBegin:(this.params.updateTimeQueue && this.params.updateTimeQueue[0]) || '',
  454. updateTimeEnd:(this.params.updateTimeQueue && this.params.updateTimeQueue[1]) || ''
  455. }
  456. this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`);
  457. }
  458. },
  459. // 下载模板
  460. handleDownTemplate() {
  461. this.download('/system/material/download', {}, `物料基本信息模板.xlsx`)
  462. },
  463. // 操作弹窗显隐
  464. handleOptionShow(type, val) {
  465. switch (type) {
  466. case 'option':
  467. this.optionDialog.show = val;
  468. break;
  469. }
  470. },
  471. // 操作弹窗确认按钮
  472. handleComfirmOption(op) {
  473. switch (op) {
  474. case 'cancal':
  475. this.handleOptionShow('option', false);
  476. break;
  477. }
  478. },
  479. // 双击行
  480. handledbClick(e) {
  481. this.$router.push({
  482. path: `/material/basicFile/detail/${e.id}`,
  483. });
  484. },
  485. // 绑定row-key
  486. getRowKey(row) {
  487. return row.id;
  488. },
  489. // 对象数组去重
  490. handleUnique(arr, key) {
  491. // arr 需要去重的数组 type:作为去重依据的key
  492. const res = new Map();
  493. return arr.filter((arr) => !res.has(arr[key]) && res.set(arr[key], 1))
  494. },
  495. // 选中数据改变
  496. handleSelectionChange(list) {
  497. // this.checkedList = this.handleUnique([...this.checkedList, ...list], 'id');
  498. // this.$emit('headerOption', JSON.stringify({ checkedList: [... this.checkedList] }))
  499. },
  500. // 行数据勾选操作
  501. handleSelect(selection, row) {
  502. this.checkedList = selection;
  503. // // true就是选中,0或者false是取消选中
  504. // let selected = selection.length && selection.indexOf(row) !== -1
  505. },
  506. //手动勾选全选
  507. handleSelectAll(selection) {
  508. this.checkedList = selection;
  509. },
  510. // 获取物料列表信息
  511. async getMaterialList(templateCode, query) {
  512. try {
  513. this.loading = true;
  514. let page = {
  515. pageNum: this.queryParams.pageNum,
  516. pageSize: this.queryParams.pageSize,
  517. }
  518. let param = {
  519. templateCode,
  520. ...this.params,
  521. createTimeBegin: (this.params.createTimeQueue && this.params.createTimeQueue[0]) || '',
  522. createTimeEnd:(this.params.createTimeQueue && this.params.createTimeQueue[1]) || '',
  523. updateTimeBegin:(this.params.updateTimeQueue && this.params.updateTimeQueue[0]) || '',
  524. updateTimeEnd:(this.params.updateTimeQueue && this.params.updateTimeQueue[1]) || ''
  525. }
  526. console.log(param,'param--------------');
  527. let {code,data} = await materialApi.materialList(param, page);
  528. if (code == 200) {
  529. this.taskList = data.tableBody.rows;
  530. this.total = data.tableBody.total;
  531. }
  532. } catch (error) {
  533. }finally{
  534. this.loading = false;
  535. }
  536. // materialApi.materialList(param, page).then((res) => {
  537. // _this.loading = false;
  538. // console.log(res, '获取物料列表信息以及表头字段');
  539. // let {code, data} = res;
  540. // if (code == 200) {
  541. // _this.taskList = data.tableBody.rows;
  542. // _this.total = data.tableBody.total;
  543. // }
  544. // })
  545. },
  546. // 获取物料列表表头
  547. getTagList(templateCode) {
  548. materialApi.tagList({templateCode}).then(res => {
  549. console.log(res, '获取物料列表表头');
  550. if (res.code == 200) {
  551. // let dictList = []
  552. // res.data.forEach(item =>{
  553. // if(item.dictId){
  554. // // 字典
  555. // dictList.push({
  556. // item:{...item},
  557. // attr:{
  558. // dictName:item.dictId
  559. // }
  560. // });
  561. // }
  562. // })
  563. // console.log(dictList,'dictList');
  564. // console.log(this,'this');
  565. // this.dict =[...initDicts([...SearchColumns,...dictList])]
  566. this.tableHeader = res.data;
  567. }
  568. })
  569. },
  570. },
  571. created() {
  572. // this.getMaterialList('material');
  573. // this.getTagList('material');
  574. },
  575. beforeRouteEnter(to, from, next) {
  576. next((vm) => {
  577. if (from.name == 'materialDetail') {
  578. // this.$store.getQuery(this.queryForm);
  579. console.log(vm, 'queryValue', vm.$store);
  580. vm.queryForm = vm.$store.state.query.queryVlue;
  581. // 清空选中数据
  582. vm.checkedList = [];
  583. vm.$refs.materialTable &&vm.$refs.materialTable.clearSelection();
  584. }
  585. vm.getTagList('material');
  586. vm.getMaterialList('material');
  587. });
  588. },
  589. // 进入详情,保留查询条件
  590. beforeRouteLeave(to, from, next) {
  591. if (to.name == 'materialDetail') {
  592. this.$store.commit('SET_QUERY', this.queryForm);
  593. } else {
  594. this.$store.commit('SET_QUERY', {name: '', code: ''});
  595. }
  596. next();
  597. }
  598. };
  599. </script>
  600. <style lang="scss">
  601. .material-list {
  602. // height: calc(100vh - 70px);
  603. .el-card__body {
  604. height: 100%;
  605. box-sizing: border-box;
  606. padding: 10px;
  607. .el-table {
  608. // overflow: auto;
  609. .el-table__body-wrapper {
  610. overflow-y: auto !important;
  611. overflow-x: auto !important;
  612. }
  613. }
  614. }
  615. .el-pagination {
  616. margin-top: 8px;
  617. text-align: right;
  618. }
  619. }
  620. .mb-import {
  621. padding: 0 20%;
  622. text-align: center;
  623. display: flex;
  624. align-items: flex-start;
  625. justify-content: space-around;
  626. }
  627. </style>
  628. <style scoped>
  629. .el-dialog__header {
  630. background-color: rgb(244, 244, 244);
  631. }
  632. .mb-query >>> .el-form-item__label {
  633. font-weight: normal;
  634. font-size: 12px;
  635. }
  636. .mb-query >>> .el-form-item {
  637. margin-bottom: 8px;
  638. }
  639. .mb-query >>> .el-select {
  640. width: 90px;
  641. }
  642. .mb-query >>> .el-scrollbar__wrap {
  643. margin-bottom: -18px;
  644. }
  645. </style>