index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. <!-- 物料信息基础档案 -->
  2. <template>
  3. <div class="material-basic">
  4. <!-- 操作栏 -->
  5. <el-row :gutter="10" class="mb10">
  6. <!-- 新增、修改、删除、复制 -->
  7. <el-col :span="1.5">
  8. <el-button-group>
  9. <!-- <el-button size="small" @click="handleInster">新增</el-button> -->
  10. <el-button size="small" @click="handleEdit">修改</el-button>
  11. <!-- <el-button size="small" @click="handleDel">删除</el-button> -->
  12. <!-- <el-button size="small" @click="handleCopy">复制</el-button> -->
  13. </el-button-group>
  14. </el-col>
  15. <!-- 查询、刷新、过滤 -->
  16. <el-col :span="1.5">
  17. <el-button-group>
  18. <!-- <el-dropdown size="small" @command="handleFilter">
  19. <el-button size="small">
  20. 过滤<i class="el-icon-arrow-down el-icon--right"></i>
  21. </el-button>
  22. <el-dropdown-menu slot="dropdown">
  23. <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item>
  24. <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item>
  25. </el-dropdown-menu>
  26. </el-dropdown> -->
  27. <!-- <el-button size="small" @click="handleQuery">查询</el-button> -->
  28. <el-button size="small" @click="handleRefresh">刷新</el-button>
  29. </el-button-group>
  30. </el-col>
  31. <!-- 启用 -->
  32. <!-- <el-col :span="1.5">
  33. <el-button-group>
  34. <el-dropdown split-button size="small" @click="handleIsInvoke(true)" @command="handleIsInvoke">
  35. 启用
  36. <el-dropdown-menu slot="dropdown">
  37. <el-dropdown-item :command="isInvoke(true)">启用</el-dropdown-item>
  38. <el-dropdown-item :command="isInvoke(false)">停用</el-dropdown-item>
  39. </el-dropdown-menu>
  40. </el-dropdown>
  41. </el-button-group>
  42. </el-col> -->
  43. <!-- 申请单查询 -->
  44. <!-- <el-col :span="1.5">
  45. <el-button-group>
  46. <el-button size="small" @click="handleQueryForm">申请单查询</el-button>
  47. </el-button-group>
  48. </el-col> -->
  49. <!-- 导入导出 -->
  50. <el-col :span="1.5">
  51. <el-button-group>
  52. <el-button size="small" @click="handleImport" v-hasPermi="['system:material:import']">批量导入</el-button>
  53. <el-button size="small" @click="handleExport" v-hasPermi="['system:material:export']">批量导出</el-button>
  54. </el-button-group>
  55. </el-col>
  56. <el-col :span="1.5">
  57. <!-- 查询框 -->
  58. <el-form :inline="true" :model="queryForm" class="mb-query" @submit.native.prevent>
  59. <el-form-item label="物料名称">
  60. <el-input size="small" v-model="queryForm.name" placeholder="物料名称" clearable></el-input>
  61. </el-form-item>
  62. <el-form-item label="物料编码">
  63. <el-input size="small" v-model="queryForm.code" placeholder="物料编码" clearable></el-input>
  64. </el-form-item>
  65. <el-form-item>
  66. <el-button size="small" type="primary" @click="handleQuery">查询</el-button>
  67. </el-form-item>
  68. </el-form>
  69. </el-col>
  70. </el-row>
  71. <!-- 主体列表 -->
  72. <el-card class="material-list" v-loading="loading">
  73. <el-table :data="taskList" @cell-dblclick="handledbClick" @selection-change="handleSelectionChange">
  74. <el-table-column type="selection" width="20" />
  75. <el-table-column type="index" label="序号" width="55" align="center" />
  76. <el-table-column width="150" v-for="h in tableHeader" v-if="h.show" :label="h.name" align="center"
  77. :prop="h.attribute == 'select' ? `${h.prop}Name` : h.prop" show-overflow-tooltip />
  78. </el-table>
  79. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  80. :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]"
  81. layout="total, sizes, prev, pager, next, jumper" :total="total">
  82. </el-pagination>
  83. </el-card>
  84. <!-- 操作提示 -->
  85. <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center>
  86. <span>是否确认{{ optionDialog.op }}?</span>
  87. <span slot="footer" class="dialog-footer">
  88. <el-button @click="handleOptionShow('option', false)">取 消</el-button>
  89. <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button>
  90. </span>
  91. </el-dialog>
  92. <!-- 导入弹窗 -->
  93. <el-dialog title="批量导入" :visible.sync="importData.show" width="30%" center @before-close="handlefileDialogColse">
  94. <div class="mb-import">
  95. <el-upload class="upload-demo" accept=".xls, .xlsx" ref="upload" action="#" :on-remove="handleFileRemove"
  96. :file-list="importData.list" :auto-upload="false" :on-change="handleChangeFile" :limit="1">
  97. <el-button slot="trigger" type="primary">选取文件</el-button>
  98. <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="handleSubmitUpload">上传到服务器</el-button> -->
  99. <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
  100. </el-upload>
  101. <el-button type="success" @click="handleDownTemplate">下载模板</el-button>
  102. </div>
  103. <span slot="footer">
  104. <el-button @click="handleImportData('cancal')">取 消</el-button>
  105. <el-button type="primary" @click="handleImportData('confirm')">确 定</el-button>
  106. </span>
  107. </el-dialog>
  108. </div>
  109. </template>
  110. <script>
  111. import './style/index.scss';
  112. import materialApi from '@/api/material/basic';
  113. export default {
  114. name: "material-basic",
  115. data() {
  116. return {
  117. // 物料基本信息数据
  118. taskList: [],
  119. // 查询表单字段
  120. queryForm: {
  121. name: '',
  122. },
  123. // 总条数
  124. total: 1,
  125. loading: false,
  126. importData: {
  127. show: false,
  128. list: []
  129. },
  130. // 查询参数
  131. queryParams: {
  132. pageNum: 1,
  133. pageSize: 10,
  134. code: null,
  135. name: null
  136. },
  137. // 表头
  138. tableHeader: [],
  139. // 多选数组
  140. checkedList: [],
  141. // 列表选中数据
  142. checkedList: [],
  143. // 操作弹窗
  144. optionDialog: {
  145. show: false,
  146. op: ''
  147. },
  148. }
  149. },
  150. methods: {
  151. // 改变分页大小
  152. handleSizeChange(e) {
  153. this.queryParams.pageSize = e;
  154. this.handleQuery();
  155. },
  156. // 改变当前页
  157. handleCurrentChange(e) {
  158. this.queryParams.pageNum = e;
  159. this.handleQuery();
  160. },
  161. // 新增
  162. handleInster() {
  163. this.$message({
  164. message: '物料只能通过申请审批增加,不能在节点直接录入!',
  165. type: 'warning'
  166. });
  167. },
  168. // 修改
  169. handleEdit() {
  170. console.log(this.checkedList, 'this.checkedList');
  171. if (this.checkedList.length == 1) {
  172. this.$router.push({
  173. path: `/material/basicFile/detail/${this.checkedList[0].id}`,
  174. query: {
  175. isEdit: true
  176. }
  177. });
  178. } else if (this.checkedList.length > 1) {
  179. this.$message({
  180. message: '修改只能选择单个数据!',
  181. type: 'warning'
  182. });
  183. } else {
  184. this.$message({
  185. message: '请选择需要修改的信息!',
  186. type: 'warning'
  187. });
  188. }
  189. },
  190. // 删除
  191. handleDel() {
  192. console.log('删除', this.checkedList);
  193. // delMaterial
  194. if (this.checkedList.length) {
  195. let ids = this.checkedList.map(i => i.id);
  196. materialApi.delMaterial(ids).then(res => {
  197. if (res.code == 200) this.handleRefresh();
  198. })
  199. } else {
  200. this.$message({
  201. message: '请选择需要删除的数据!',
  202. type: 'warning'
  203. });
  204. }
  205. },
  206. // 复制
  207. handleCopy() {
  208. console.log('复制');
  209. },
  210. //查询
  211. handleQuery() {
  212. console.log('查询');
  213. this.getMaterialList('material', this.queryForm);
  214. },
  215. // 刷新
  216. handleRefresh() {
  217. console.log('刷新');
  218. this.getMaterialList('material');
  219. for (const key in this.queryForm) {
  220. this.queryForm[key] = '';
  221. }
  222. },
  223. // 过滤
  224. handleFilter(e) {
  225. console.log(e, '过滤');
  226. },
  227. filterCondition(type) {
  228. return {
  229. type
  230. }
  231. },
  232. // 启用
  233. handleIsInvoke(e) {
  234. console.log('启用', e);
  235. },
  236. isInvoke(val) {
  237. return val;
  238. },
  239. // 申请单查询
  240. handleQueryForm() {
  241. console.log('申请单查询');
  242. },
  243. // 批量导入
  244. handleImport() {
  245. console.log('批量导入');
  246. this.importData.show = true
  247. },
  248. // 导入弹窗关闭前
  249. handlefileDialogColse(done) {
  250. this.importData.list = [];
  251. done();
  252. },
  253. // 导入弹窗操作
  254. handleImportData(type) {
  255. console.log('导入弹窗操作');
  256. switch (type) {
  257. // 取消
  258. case 'cancal':
  259. this.importData.list = [];
  260. this.importData.show = false;
  261. break;
  262. // 确认
  263. case 'confirm':
  264. console.log(this.importData.list, 'this.fileList');
  265. if (this.importData.list.length) {
  266. let formData = new FormData();
  267. formData.append('file', this.importData.list[0].raw);
  268. materialApi.fileImport(formData).then(res => {
  269. if (res.code == 200) this.importData.show = false;
  270. })
  271. } else {
  272. this.$message({
  273. message: '请上传文件之后在确认!',
  274. type: 'warning'
  275. });
  276. }
  277. break;
  278. }
  279. },
  280. // 删除文件
  281. handleFileRemove(file, fileList) {
  282. console.log('删除文件', file, 'file', fileList, 'fileList');
  283. this.importData.list = fileList;
  284. },
  285. // 文件发生改变
  286. handleChangeFile(file, fileList) {
  287. this.importData.list = fileList;
  288. console.log(this.importData.list, '文件发生改变');
  289. },
  290. // 批量导出
  291. handleExport() {
  292. console.log('批量导出', this.checkedList);
  293. let ids = this.checkedList.length ? this.checkedList.map(i => i.id) : [];
  294. let params = {
  295. // orgId: '1',
  296. ids,
  297. }
  298. this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`)
  299. },
  300. // 下载模板
  301. handleDownTemplate() {
  302. console.log('下载模板');
  303. this.download('/system/material/download', {}, `物料基本信息模板.xlsx`)
  304. },
  305. // 操作弹窗显隐
  306. handleOptionShow(type, val) {
  307. switch (type) {
  308. case 'option':
  309. this.optionDialog.show = val;
  310. break;
  311. }
  312. },
  313. // 操作弹窗确认按钮
  314. handleComfirmOption(op) {
  315. switch (op) {
  316. case 'cancal':
  317. this.handleOptionShow('option', false);
  318. break;
  319. }
  320. },
  321. // 双击行
  322. handledbClick(e) {
  323. console.log(e, '双击行');
  324. this.$router.push({
  325. path: `/material/basicFile/detail/${e.id}`,
  326. });
  327. },
  328. // 选中数据改变
  329. handleSelectionChange(list) {
  330. this.checkedList = list;
  331. this.$emit('headerOption', JSON.stringify({ checkedList: [...list] }))
  332. },
  333. // 获取物料列表信息
  334. getMaterialList(templateCode, query) {
  335. let _this = this;
  336. this.loading = true;
  337. let page = {
  338. pageNum: this.queryParams.pageNum,
  339. pageSize: this.queryParams.pageSize,
  340. }
  341. let param = {
  342. templateCode,
  343. ...query
  344. }
  345. console.log(param, 'param');
  346. materialApi.materialList(param, page).then((res) => {
  347. _this.loading = false;
  348. console.log(res, '获取物料列表信息以及表头字段');
  349. let { code, data } = res;
  350. if (code == 200) {
  351. _this.taskList = data.tableBody.rows;
  352. _this.total = data.tableBody.total;
  353. }
  354. })
  355. },
  356. // 获取物料列表表头
  357. getTagList(templateCode) {
  358. materialApi.tagList({ templateCode }).then(res => {
  359. console.log(res, '获取物料列表表头');
  360. if (res.code == 200) {
  361. this.tableHeader = res.data;
  362. }
  363. })
  364. },
  365. },
  366. created() {
  367. this.getMaterialList('material');
  368. this.getTagList('material');
  369. },
  370. };
  371. </script>
  372. <style lang="scss">
  373. .material-list {
  374. // height: calc(100% - 100px);
  375. height: calc(100% - 70px);
  376. .el-card__body {
  377. height: 100%;
  378. box-sizing: border-box;
  379. .el-table {
  380. height: calc(100% - 35px);
  381. overflow: auto;
  382. .el-table__body-wrapper {
  383. // height: calc(100% - 150px);
  384. height: calc(100% - 70px);
  385. overflow-y: auto !important;
  386. overflow-x: auto !important;
  387. // .el-table__body {
  388. // height: 100%;
  389. // }
  390. }
  391. }
  392. }
  393. .el-pagination {
  394. margin-top: 8px;
  395. text-align: right;
  396. }
  397. }
  398. .mb-import {
  399. padding: 0 20%;
  400. text-align: center;
  401. display: flex;
  402. align-items: flex-start;
  403. justify-content: space-around;
  404. }
  405. </style>
  406. <style scoped>
  407. .el-dialog__header {
  408. background-color: rgb(244, 244, 244);
  409. }
  410. .mb-query>>>.el-form-item__label {
  411. font-weight: normal;
  412. font-size: 12px;
  413. }
  414. .mb-query>>>.el-form-item {
  415. margin-bottom: 8px;
  416. }
  417. </style>