index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <template>
  2. <div class="requisition" v-loading="failLoad">
  3. <div class="applyList" v-if="isList">
  4. <el-card>
  5. <el-super-search
  6. v-model="params"
  7. :size="size"
  8. :dict="dict"
  9. :columns="SearchColumns"
  10. @reset="reset"
  11. @submit="getList"
  12. ></el-super-search>
  13. <el-row :gutter="10" class="mb10" type="flex" justify="end" style="margin-top: 15px;">
  14. <el-col :span="1.5">
  15. <el-button type="primary" :size="size" plain @click="newAdd">新增</el-button>
  16. </el-col>
  17. <el-col :span="1.5">
  18. <el-button :size="size" :disabled="checkedList.length != 1" @click="handleCopy">复制</el-button>
  19. </el-col>
  20. <el-col :span="1.5">
  21. <el-button type="primary" :size="size" plain
  22. @click="download('/system/apply/material/download',{},'申请单模板.xlsx')">模板下载
  23. </el-button>
  24. </el-col>
  25. <el-col :span="1.5">
  26. <el-button :size="size" @click="handleImport">批量导入</el-button>
  27. </el-col>
  28. <el-col :span="1.5">
  29. <el-button :size="size" @click="handleBatchSubmit">批量提交</el-button>
  30. </el-col>
  31. <!-- 导入弹窗 -->
  32. <el-dialog
  33. title="批量导入"
  34. :visible.sync="importData.show"
  35. width="35%"
  36. center
  37. :before-close="handlefileDialogColse"
  38. >
  39. <div class="mb-import">
  40. <el-upload
  41. accept=".xls, .xlsx"
  42. ref="upload"
  43. action="#"
  44. :on-remove="handleFileRemove"
  45. :file-list="importData.list"
  46. :auto-upload="false"
  47. :on-change="handleChangeFile"
  48. :limit="1"
  49. style="text-align: center;"
  50. >
  51. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  52. <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
  53. </el-upload>
  54. </div>
  55. <span slot="footer">
  56. <el-button @click="handleImportData('cancal')">取 消</el-button>
  57. <el-button type="primary" @click="handleImportData('confirm')">确 定</el-button>
  58. </span>
  59. </el-dialog>
  60. </el-row>
  61. <div style="height: 600px;display: flex;">
  62. <el-super-table
  63. v-model="tableList"
  64. :dict="dict"
  65. :columns="TableColumns"
  66. :size="size"
  67. pagination
  68. index
  69. checkbox
  70. convenitentOperation
  71. :page="pageStatus"
  72. @pagination="getList"
  73. @row-dblclick="check"
  74. @selection-change="handleSelectionChange"
  75. @select="handleSelect"
  76. >
  77. <el-table-column
  78. fixed="right"
  79. label="操作"
  80. align="center"
  81. width="180"
  82. >
  83. <template slot-scope="scope">
  84. <el-button
  85. type="text"
  86. :size="size"
  87. @click="check(scope.row)"
  88. >查看</el-button>
  89. <el-button
  90. @click="edit(scope.row)"
  91. v-if="scope.row.status == 0 || scope.row.status == 3"
  92. type="text"
  93. :size="size"
  94. >编辑</el-button>
  95. <el-button
  96. @click="jumpFlow(scope.row)"
  97. v-if="scope.row.oaId && scope.row.oaId !=''"
  98. type="text"
  99. :size="size"
  100. >流程跳转</el-button>
  101. <el-button
  102. type="text"
  103. :size="size"
  104. @click="deleteRow(scope.row)"
  105. v-if="scope.row.status == 0 || scope.row.status == 3"
  106. >删除</el-button>
  107. </template>
  108. </el-table-column>
  109. </el-super-table>
  110. </div>
  111. </el-card>
  112. </div>
  113. <component
  114. :is="isComponent"
  115. v-model="isList"
  116. :pageStu="page"
  117. :disable="disable"
  118. :row="rowDetail"
  119. @refresh="getList"
  120. v-if="!isList
  121. "/>
  122. </div>
  123. </template>
  124. <script>
  125. import addReq from './add.vue';
  126. import {getReqList, delReq, importData, fileImport,betchSubmit,toOA} from '@/api/requisition/basic';
  127. import {saveAs} from "file-saver";
  128. import { blobValidate } from "@/utils/ruoyi";
  129. import { SearchColumns, TableColumns } from './columns';
  130. import { initDicts } from "@/utils/init.js";
  131. export default {
  132. name: 'requisition',
  133. dicts:[...initDicts([...SearchColumns,...TableColumns])],
  134. components: {
  135. addReq,
  136. ElSuperTable: () => import("@/components/super-table/index.vue"),
  137. ElSuperSearch: () => import("@/components/super-search/index.vue"),
  138. },
  139. data() {
  140. const params = this.$init.params(SearchColumns);
  141. return {
  142. failLoad: false,
  143. tableList: [],
  144. size:'mini',
  145. params:params,
  146. SearchColumns:SearchColumns,
  147. TableColumns:TableColumns,
  148. pageStatus: { pageNum: 1, pageSize: 10, total: 0 },
  149. queryParams: {
  150. billCode: '',
  151. name: '',
  152. status: '',
  153. pageNum: 1,
  154. pageSize: 10
  155. },
  156. options: [{
  157. value: 0, label: '未提交'
  158. }, {
  159. value: 1, label: '审批中'
  160. }, {
  161. value: 2, label: '已完成'
  162. }, {
  163. value: 3, label: '已驳回'
  164. },],
  165. total: 0,
  166. // isComponent
  167. isComponent: 'addReq',
  168. isList: true,
  169. // 页面状态
  170. page: '',
  171. rowDetail: {},
  172. disable: false,
  173. checkedList: [],
  174. importData: {
  175. show: false,
  176. list: []
  177. },
  178. }
  179. },
  180. created() {
  181. },
  182. mounted() {
  183. this.getList(this.queryParams)
  184. },
  185. methods: {
  186. // 批量提交
  187. async handleBatchSubmit(){
  188. let filterList = this.checkedList.filter(item => !(item.status == '0' || item.status == '3') )
  189. if(!filterList.length && this.checkedList.length){
  190. try {
  191. this.failLoad = true;
  192. let ids = this.checkedList.map( item => Number(item.id));
  193. let {code,msg} = await betchSubmit(ids);
  194. if(code == 200){
  195. this.reset();
  196. }
  197. this.$notify({
  198. title: code == 200 ? msg : 'error',
  199. type: code == 200 ? 'success' :'error',
  200. message: code == 200 ?'' :msg,
  201. });
  202. // if(code == 200){
  203. // this.$notify.success({
  204. // title: msg,
  205. // });
  206. // }else{
  207. // this.$notify.error({
  208. // title: '错误',
  209. // message: msg,
  210. // });
  211. // }
  212. } catch (error) {
  213. }finally{
  214. this.failLoad = false;
  215. }
  216. }else{
  217. this.$notify.warning({
  218. title: '警告',
  219. message: '存在不符合提交条件数据或未选择数据!',
  220. });
  221. }
  222. },
  223. async jumpFlow (row){
  224. const {name} = this.$store.state.user;
  225. try {
  226. let {code,msg,oaUrl} = await toOA(name,row.id);
  227. if(code == 200){
  228. window.open(oaUrl)
  229. }
  230. } catch (error) {
  231. }finally{
  232. }
  233. },
  234. reset() {
  235. // this.queryParams.billCode = ''
  236. // this.queryParams.name = ''
  237. // this.queryParams.status = ''
  238. // this.queryParams.pageNum = 1
  239. this.pageStatus.pageNum = 1;
  240. this.pageStatus.pageSize = 10;
  241. this.params = this.$init.params(SearchColumns);
  242. this.getList(this.queryParams)
  243. },
  244. newAdd() {
  245. this.isList = false
  246. this.isComponent = 'addReq'
  247. this.page = 'add'
  248. this.disable = false
  249. },
  250. // 复制
  251. handleCopy() {
  252. this.isList = false;
  253. this.isComponent = 'addReq';
  254. this.page = 'copy';
  255. this.rowDetail = this.checkedList[0];
  256. this.disable = false;
  257. },
  258. // 导入
  259. handleImport() {
  260. this.importData.show = true
  261. },
  262. // 删除文件
  263. handleFileRemove(file, fileList) {
  264. console.log('删除文件', file, 'file', fileList, 'fileList');
  265. this.importData.list = fileList;
  266. },
  267. // 文件发生改变
  268. handleChangeFile(file, fileList) {
  269. this.importData.list = fileList;
  270. },
  271. // 导入弹窗操作
  272. handleImportData(type) {
  273. switch (type) {
  274. // 取消
  275. case 'cancal':
  276. this.importData.list = [];
  277. this.importData.show = false;
  278. break;
  279. // 确认
  280. case 'confirm':
  281. if (this.importData.list.length) {
  282. let formData = new FormData();
  283. formData.append('file', this.importData.list[0].raw);
  284. importData(formData).then(res => {
  285. if (res.code == 200) {
  286. this.importData.show = false;
  287. this.importData.list = [];
  288. if (res.data.flag) {
  289. this.failLoad = true;
  290. console.log(res.data.datas)
  291. let param = {failDatas: res.data.datas}
  292. if (null != param) {
  293. fileImport(param).then(res => {
  294. console.log('res',res)
  295. const isBlob = blobValidate(res);
  296. if (isBlob) {
  297. const blob = new Blob([res]);
  298. saveAs(blob, '导入失败的物料申请单数据.xlsx');
  299. }
  300. this.failLoad = false;
  301. })
  302. }
  303. }
  304. this.$message({
  305. message: res.data.msg,
  306. type: res.data.flag ? 'warning' : 'success'
  307. });
  308. } else {
  309. this.$message({
  310. message: res.msg,
  311. type: res.code == 200 ? 'success' : 'warning'
  312. });
  313. }
  314. })
  315. } else {
  316. this.$message({
  317. message: '请上传文件之后在确认!',
  318. type: 'warning'
  319. });
  320. }
  321. break;
  322. }
  323. },
  324. handlefileDialogColse(done){
  325. this.importData.list = [];
  326. done();
  327. },
  328. // Select框
  329. handleSelect(selection, row) {
  330. this.checkedList = selection;
  331. console.log(this.checkedList, 'this.checkedList');
  332. },
  333. getList(val) {
  334. console.log('val', val)
  335. getReqList({...this.params,...this.pageStatus}).then(res => {
  336. if (res.code === 200) {
  337. this.tableList = res.rows;
  338. // this.total = res.total;
  339. this.pageStatus.total = res.total;
  340. }
  341. })
  342. this.checkedList = [];
  343. },
  344. // 表格内状态栏判断值
  345. statusJug(row) {
  346. if (row.status == 0) {
  347. return '未提交'
  348. } else if (row.status == 1) {
  349. return '审批中'
  350. } else if (row.status == 2) {
  351. return '已完成'
  352. } else if (row.status == 3) {
  353. return '已驳回'
  354. }
  355. },
  356. //
  357. handleSelectionChange(selection) {
  358. this.checkedList = selection;
  359. },
  360. check(row) {
  361. console.log('查看详情', row)
  362. this.isList = false
  363. this.isComponent = 'addReq'
  364. this.page = 'check'
  365. this.rowDetail = row
  366. this.disable = true
  367. },
  368. edit(row) {
  369. console.log('修改先加载详情', row)
  370. this.isList = false
  371. this.isComponent = 'addReq'
  372. this.page = 'edit'
  373. this.rowDetail = row
  374. this.disable = false
  375. },
  376. commit(row) {
  377. console.log('row', row)
  378. },
  379. deleteRow(row) {
  380. this.$confirm('是否删除此条数据?', '提示', {
  381. confirmButtonText: '确定',
  382. cancelButtonText: '取消',
  383. type: 'warning'
  384. }).then(() => {
  385. delReq(row.id).then(res => {
  386. if (res.code === 200) {
  387. this.$message({
  388. message: res.msg,
  389. type: 'success'
  390. });
  391. this.getList(this.queryParams)
  392. }
  393. })
  394. }).catch(() => {
  395. })
  396. },
  397. handleSizeChange(val) {
  398. console.log(`每页 ${val} 条`);
  399. this.queryParams.pageSize = val
  400. this.getList(this.queryParams)
  401. },
  402. handleCurrentChange(val) {
  403. console.log(`当前页: ${val}`);
  404. this.queryParams.pageNum = val
  405. this.getList(this.queryParams)
  406. }
  407. }
  408. }
  409. </script>
  410. <style scoped lang="scss">
  411. .requisition {
  412. // height: calc(100vh - 84px);
  413. padding: 12px;
  414. box-sizing: border-box;
  415. }
  416. </style>