index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. <template>
  2. <div id="PurchaseDemandList">
  3. <div v-if="isList">
  4. <el-form class="search_area" label-width="120px">
  5. <el-row :gutter="10">
  6. <el-col :span="1.5">
  7. <el-form-item label="单据编码">
  8. <el-select v-model="queryParams.code" size="small" style="width: 200px" clearable placeholder="请选择">
  9. <el-option
  10. v-for="item in options"
  11. :key="item.value"
  12. :label="item.label"
  13. :value="item.value">
  14. </el-option>
  15. </el-select>
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="1.5">
  19. <el-form-item label="供应仓库">
  20. <el-select v-model="queryParams.warehouse" size="small" style="width: 200px" clearable placeholder="请选择">
  21. <el-option
  22. v-for="item in options"
  23. :key="item.value"
  24. :label="item.label"
  25. :value="item.value">
  26. </el-option>
  27. </el-select>
  28. </el-form-item>
  29. </el-col>
  30. <el-col :span="1.5">
  31. <el-form-item label="需求客户">
  32. <el-select v-model="queryParams.customer" size="small" style="width: 200px" clearable placeholder="请选择">
  33. <el-option
  34. v-for="item in options"
  35. :key="item.value"
  36. :label="item.label"
  37. :value="item.value">
  38. </el-option>
  39. </el-select>
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="1.5">
  43. <el-form-item label="是否客户指定">
  44. <el-select v-model="queryParams.isProcess" size="small" style="width: 200px" clearable placeholder="请选择">
  45. <el-option
  46. v-for="item in options"
  47. :key="item.value"
  48. :label="item.label"
  49. :value="item.value">
  50. </el-option>
  51. </el-select>
  52. </el-form-item>
  53. </el-col>
  54. <el-col :span="1.5">
  55. <el-form-item label="" label-width="20px">
  56. <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
  57. <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
  58. </el-form-item>
  59. </el-col>
  60. </el-row>
  61. <CollapseTransition>
  62. <div v-show="expanded">
  63. <el-row :gutter="10">
  64. <el-col :span="1.5">
  65. <el-form-item label="单据类型">
  66. <el-select v-model="queryParams.threeName" size="small" style="width: 200px" clearable placeholder="请选择">
  67. <el-option
  68. v-for="item in options"
  69. :key="item.value"
  70. :label="item.label"
  71. :value="item.value">
  72. </el-option>
  73. </el-select>
  74. </el-form-item>
  75. </el-col>
  76. <el-col :span="1.5">
  77. <el-form-item label="需求人员">
  78. <el-select v-model="queryParams.demandPersonal" size="small" style="width: 200px" clearable placeholder="请选择">
  79. <el-option
  80. v-for="item in options"
  81. :key="item.value"
  82. :label="item.label"
  83. :value="item.value">
  84. </el-option>
  85. </el-select>
  86. </el-form-item>
  87. </el-col>
  88. <el-col :span="1.5">
  89. <el-form-item label="供应货位">
  90. <el-select v-model="queryParams.goodsAllocation" size="small" style="width: 200px" clearable placeholder="请选择">
  91. <el-option
  92. v-for="item in options"
  93. :key="item.value"
  94. :label="item.label"
  95. :value="item.value">
  96. </el-option>
  97. </el-select>
  98. </el-form-item>
  99. </el-col>
  100. <el-col :span="1.5">
  101. <el-form-item label="单据来源">
  102. <el-select v-model="queryParams.source" size="small" style="width: 200px" clearable placeholder="请选择">
  103. <el-option
  104. v-for="item in options"
  105. :key="item.value"
  106. :label="item.label"
  107. :value="item.value">
  108. </el-option>
  109. </el-select>
  110. </el-form-item>
  111. </el-col>
  112. </el-row>
  113. <el-row :gutter="10">
  114. <el-col :span="1.5">
  115. <el-form-item label="业务类型">
  116. <el-select v-model="queryParams.billType" size="small" style="width: 200px" clearable placeholder="请选择">
  117. <el-option
  118. v-for="item in options"
  119. :key="item.value"
  120. :label="item.label"
  121. :value="item.value">
  122. </el-option>
  123. </el-select>
  124. </el-form-item>
  125. </el-col>
  126. <el-col :span="1.5">
  127. <el-form-item label="需求部门">
  128. <el-select v-model="queryParams.demandDept" size="small" style="width: 200px" clearable placeholder="请选择">
  129. <el-option
  130. v-for="item in options"
  131. :key="item.value"
  132. :label="item.label"
  133. :value="item.value">
  134. </el-option>
  135. </el-select>
  136. </el-form-item>
  137. </el-col>
  138. <el-col :span="1.5">
  139. <el-form-item label="需求日期">
  140. <el-input
  141. v-model="queryParams.demandDate"
  142. size="small"
  143. placeholder=""
  144. clearable
  145. style="width: 200px"
  146. />
  147. </el-form-item>
  148. </el-col>
  149. <el-col :span="1.5">
  150. <el-form-item label="备注">
  151. <el-input
  152. v-model="queryParams.remark"
  153. size="small"
  154. placeholder=""
  155. clearable
  156. style="width: 200px"
  157. />
  158. </el-form-item>
  159. </el-col>
  160. </el-row>
  161. </div>
  162. </CollapseTransition>
  163. </el-form>
  164. <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
  165. <el-card>
  166. <div class="btn_grooup">
  167. <el-button type="primary" size="small" @click="addDivision">新增</el-button>
  168. <el-dropdown size="small" @command="handleCommand">
  169. <el-button size="small" type="primary" style="margin-left: 10px;">
  170. 导入<i class="el-icon-arrow-down el-icon--right"></i>
  171. </el-button>
  172. <el-dropdown-menu slot="dropdown">
  173. <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
  174. <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
  175. </el-dropdown-menu>
  176. </el-dropdown>
  177. <el-dropdown size="small" @command="handleCommand">
  178. <el-button size="small" type="primary" style="margin: 0 10px;">
  179. 导出<i class="el-icon-arrow-down el-icon--right"></i>
  180. </el-button>
  181. <el-dropdown-menu slot="dropdown">
  182. <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
  183. <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
  184. </el-dropdown-menu>
  185. </el-dropdown>
  186. <el-button type="primary" size="small" @click="delItems">删除</el-button>
  187. <el-button type="primary" size="small">打印</el-button>
  188. </div>
  189. <el-table
  190. :data="tableList"
  191. fit
  192. max-height="350"
  193. @selection-change="handleSelectionChange"
  194. >
  195. <el-table-column type="selection" width="55" />
  196. <el-table-column label="编码" align="center" prop="code"/>
  197. <el-table-column label="需求日期" align="center" width="200" prop="demandDate" />
  198. <el-table-column label="单据状态" align="center" prop="status" />
  199. <!-- <el-table-column label="是否已处理需求" align="center" width="150" prop="isProcess" /> -->
  200. <el-table-column label="业务类型" align="center" width="150" prop="billType"/>
  201. <!-- <el-table-column label="是否特殊需求" align="center" width="150" prop="isSpeical" /> -->
  202. <el-table-column label="需求人员" align="center" width="150" prop="demandPersonalName" />
  203. <el-table-column label="需求客户" align="center" prop="customerName" />
  204. <el-table-column label="需求部门" align="center" width="150" prop="demandDeptName" />
  205. <!-- <el-table-column label="供应仓库" align="center" width="120" prop="warehouseName" /> -->
  206. <!-- <el-table-column label="供应货位" align="center" width="150" prop="goodsAllocationName" /> -->
  207. <el-table-column label="单据来源" align="center" width="150" prop="source" />
  208. <el-table-column label="组织" align="center" width="150" prop="orgName" />
  209. <el-table-column label="备注" align="center" width="150" prop="remark" />
  210. <el-table-column
  211. fixed="right"
  212. label="操作"
  213. align="center"
  214. width="150"
  215. >
  216. <template slot-scope="scope">
  217. <el-button type="text" size="small" @click="check(scope.row)">查看</el-button>
  218. <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
  219. <el-button type="text" size="small" @click="deleteids(scope.row)">删除</el-button>
  220. </template>
  221. </el-table-column>
  222. </el-table>
  223. <el-pagination
  224. @size-change="handleSizeChange"
  225. @current-change="handleCurrentChange"
  226. :current-page="1"
  227. :page-sizes="[5, 10, 15, 20]"
  228. :page-size="100"
  229. layout="total, sizes, prev, pager, next, jumper"
  230. :total=total>
  231. </el-pagination>
  232. </el-card>
  233. </div>
  234. <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
  235. </div>
  236. </template>
  237. <script>
  238. import Add from './add.vue'
  239. import CollapseTransition from '@/components/MyCollapse/collapse.vue'
  240. import {getDemandList, delDemand, downLoadDemand} from '@/api/purchase/purchaseDemand.js'
  241. export default {
  242. name: 'PurchaseDemandList',
  243. components: {
  244. Add,
  245. CollapseTransition
  246. },
  247. data() {
  248. return {
  249. expanded: false,
  250. // 页面配置
  251. isList: true,
  252. // 页面状态
  253. page: '',
  254. queryParams: {
  255. code: '',
  256. warehouse: '',
  257. customer: '',
  258. isProcess: '',
  259. threeName: '',
  260. demandPersonal: '',
  261. goodsAllocation: '',
  262. source: '',
  263. billType: '',
  264. demandDept: '',
  265. demandDate: '',
  266. remark: '',
  267. pageNum: 1,
  268. pageSize: 10
  269. },
  270. options: [{
  271. value: '1', label: '是',
  272. }, {
  273. value: '0', label: '否'
  274. }],
  275. tableList: [],
  276. total: 0,
  277. rowDetail: {},
  278. disable: false,
  279. ids: []
  280. }
  281. },
  282. created() {
  283. this.getList(this.queryParams)
  284. },
  285. methods: {
  286. getList(params){
  287. getDemandList(params).then(res => {
  288. if (res.code === 200) {
  289. this.tableList = res.rows
  290. this.total = res.total
  291. }
  292. })
  293. },
  294. handleSelectionChange(selection) {
  295. console.log('选中', selection)
  296. this.ids = selection.map(item => item.id)
  297. console.log('选中数组', this.ids.join())
  298. },
  299. handleCommand(command) {
  300. // alert(command)
  301. if(command == '模板下载') {
  302. downLoadDemand({}).then(res => {
  303. console.log('下载的文件流', res)
  304. const blob = new Blob([res], {
  305. type: "application/vnd.ms-excel;charset=UTF-8",
  306. });// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
  307. const downloadElement = document.createElement("a"); //创建a标签
  308. const href = window.URL.createObjectURL(blob); // 创建下载的链接
  309. // var temp = res.headers["content-disposition"];
  310. // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码)
  311. // var name = fileName.split(";")[0]; //切割成文件名
  312. downloadElement.href = href; //下载地址
  313. downloadElement.download = '模板'; // 下载后文件名
  314. document.body.appendChild(downloadElement);
  315. downloadElement.click(); // 点击下载
  316. document.body.removeChild(downloadElement); // 下载完成移除元素
  317. window.URL.revokeObjectURL(href); // 释放blob对象
  318. })
  319. }
  320. },
  321. addDivision() {
  322. this.isList = false
  323. this.page = 'add'
  324. this.disable = false
  325. },
  326. check(row) {
  327. this.isList = false
  328. this.page = 'check'
  329. this.rowDetail = row
  330. this.disable = true
  331. },
  332. edit(row) {
  333. this.isList = false
  334. this.page = 'edit'
  335. this.rowDetail = row
  336. this.disable = false
  337. },
  338. // 行内删除
  339. deleteids(row) {
  340. console.log('row', row)
  341. this.$modal.confirm('确认信息').then(() => {
  342. delDemand(row.id).then(res => {
  343. if (res.code === 200) {
  344. this.$modal.msgSuccess("删除成功");
  345. this.getList(this.queryParams)
  346. }
  347. })
  348. }).catch(() => {})
  349. },
  350. // 批量删除按钮
  351. delItems() {
  352. if(this.ids.length == 0) {
  353. this.$modal.msgWarning("请选中至少一条数据");
  354. } else {
  355. let param = this.ids.join()
  356. this.$modal.confirm('确认信息').then(() => {
  357. delDemand(param).then(res => {
  358. if (res.code === 200) {
  359. this.$modal.msgSuccess("删除成功");
  360. this.getList(this.queryParams)
  361. }
  362. })
  363. }).catch(() => {})
  364. }
  365. },
  366. handleSizeChange(val) {
  367. console.log(`每页 ${val} 条`);
  368. this.queryParams.pageSize = val
  369. this.getList(this.queryParams)
  370. },
  371. handleCurrentChange(val) {
  372. console.log(`当前页: ${val}`);
  373. this.queryParams.pageNum = val
  374. this.getList(this.queryParams)
  375. },
  376. drop() {
  377. this.expanded = !this.expanded
  378. }
  379. }
  380. }
  381. </script>
  382. <style lang="scss" scoped>
  383. #PurchaseDemandList {
  384. height: calc(100vh - 84px);
  385. padding: 12px;
  386. box-sizing: border-box;
  387. }
  388. .btn_grooup {
  389. margin-bottom: 10px;
  390. display: flex;
  391. justify-content: flex-end;
  392. }
  393. .lines {
  394. margin-top: 0;
  395. }
  396. </style>