index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <!-- 采购订单修订—— 列表 -->
  2. <script>
  3. import { TableColumns, SearchColumns, TabColumns, SelectColumns } from "./column";
  4. import orderApi from "@/api/business/purchase/purchase-order";
  5. import {
  6. initPage,
  7. initLayout,
  8. initPageSizes,
  9. initParams,
  10. initColumns,
  11. initDicts,
  12. } from "@/utils/init";
  13. export default {
  14. name: "PuchaseOrder",
  15. dicts: initDicts(SelectColumns),
  16. components: {
  17. AddDrawer: () => import('./add/index.vue'),
  18. SeeDrawer: () => import('./see/index.vue'),
  19. EditDrawer: () => import('./edit/index.vue'),
  20. },
  21. data() {
  22. const initTabColumns = () => TabColumns;
  23. return {
  24. loading: false,
  25. isSimpleSearch: true,
  26. pageSizes: initPageSizes(),
  27. layout: initLayout(),
  28. page: initPage(),
  29. searchColumns: SearchColumns,
  30. params: initParams(SearchColumns),
  31. tableColumns: TableColumns,
  32. tableData: [],
  33. tabColumns: initTabColumns(),
  34. tabName: "puOrderItemList",
  35. tabTableDatas: {
  36. puOrderItemList: [],
  37. puOrderExecuteList: [],
  38. },
  39. checkedList: [],
  40. };
  41. },
  42. computed: {
  43. showSearchColumns() {
  44. return this.isSimpleSearch
  45. ? this.searchColumns.slice(0, 4)
  46. : this.searchColumns;
  47. },
  48. },
  49. created() {
  50. this.fetchList(this.params, this.page);
  51. console.log("Vue", this);
  52. },
  53. methods: {
  54. async fetchList(params, page) {
  55. try {
  56. this.loading = true;
  57. // const { pageNum, pageSize } = page;
  58. const { code, msg, rows, total } = await orderApi.list(params, page);
  59. if (code === 200) {
  60. this.page.total = total;
  61. this.tableData = rows;
  62. }
  63. } catch (err) {
  64. //
  65. } finally {
  66. this.loading = false;
  67. }
  68. },
  69. handleSearchChange() {
  70. this.isSimpleSearch = !this.isSimpleSearch;
  71. // this.$notify.info({
  72. // title: this.isSimpleSearch ? "Simple Search" : "All Search",
  73. // });
  74. },
  75. // 页大小变
  76. handleSizeChange(prop) {
  77. this.page.pageSize = prop;
  78. this.fetchList(this.params, this.page);
  79. },
  80. // 当前页变
  81. handleCurrentChange(prop) {
  82. this.page.pageNum = prop;
  83. this.fetchList(this.params, this.page);
  84. },
  85. // 刷新操作
  86. handleRefreshList() {
  87. this.fetchList(this.params, this.page);
  88. },
  89. // 查询操作
  90. handleQueryList() {
  91. this.fetchList(this.params, this.page);
  92. },
  93. // 重置操作
  94. handleResetList() {
  95. this.page = initPage();
  96. this.params = initParams(SearchColumns);
  97. this.fetchList(this.params, this.page);
  98. },
  99. handleTabClick() { },
  100. // 新增
  101. handleOpenAddDrawer(copyVal) {
  102. const { setVisible, setCopyParams } = this.$refs.addDrawerFef;
  103. setVisible(true);
  104. copyVal.id && copyVal.id != '' && setCopyParams(copyVal.id);
  105. },
  106. // 复制
  107. handleCopy() {
  108. // let rowDetails = {
  109. // ... this.checkedList[0],
  110. // id: '',
  111. // code: '',
  112. // status: '0',
  113. // source: '3',
  114. // };
  115. this.handleOpenAddDrawer(this.checkedList[0]);
  116. },
  117. // 查看
  118. async handleOpenSeeDrawer(row) {
  119. const { id } = row;
  120. const { setVisible, fetchItem } = this.$refs.seeDrawerFef;
  121. await setVisible(true);
  122. await fetchItem(id);
  123. },
  124. // 编辑、修订
  125. async handleOpenEditDrawer(row) {
  126. const { id } = row;
  127. const { setVisible, fetchItem } = this.$refs.editDrawerFef;
  128. await setVisible(true);
  129. await fetchItem(id);
  130. },
  131. // 获取子表信息
  132. async handleDetailsData(row) {
  133. console.log(row, '获取详情信息');
  134. try {
  135. const { code, msg, data } = await orderApi.details(row.id);
  136. if (code === 200) {
  137. // 物料信息:puOrderItemList 执行结果:puOrderExecuteList
  138. for (const key in this.tabTableDatas) {
  139. this.tabTableDatas[key] = data[key];
  140. }
  141. }
  142. } catch (err) {
  143. //
  144. } finally {
  145. // this.loading = false;
  146. }
  147. },
  148. // 删除操作
  149. async handleDeleteList(row) {
  150. try {
  151. this.loading = true;
  152. const { id } = row;
  153. console.log(id, 'id');
  154. const { code, msg } = await orderApi.remove(id);
  155. if (code === 200) {
  156. this.fetchList(this.params, this.page);
  157. }
  158. } catch (err) {
  159. //
  160. } finally {
  161. this.loading = false;
  162. }
  163. },
  164. // 提交
  165. async handleSubmit(row) {
  166. try {
  167. this.loading = true;
  168. let { code } = await orderApi.submit({ puOrderId: row.id });
  169. if (code === 200) {
  170. this.fetchList(this.params, this.page);
  171. }
  172. } catch (error) {
  173. } finally {
  174. this.loading = false;
  175. }
  176. },
  177. // 判断“退回”按钮
  178. judgeIsAllSendBack() {
  179. if (this.checkedList.length == 1) {
  180. // 非手工、状态非审批通过
  181. if (this.checkedList[0].source != 3 && (this.checkedList[0].status == 0 || this.checkedList[0].status == 3)) {
  182. return false
  183. }
  184. }
  185. return true;
  186. },
  187. // 整单退回
  188. handleAllSendBack() {
  189. let data = {
  190. id: this.checkedList[0].id,
  191. documentIds: [],
  192. baskCause: ''
  193. }
  194. console.log(data);
  195. try {
  196. this.loading = true;
  197. let { code, msg } = orderApi.documentsReturn(data);
  198. } catch (error) {
  199. } finally {
  200. this.loading = false;
  201. }
  202. },
  203. // 判断是否满足整单关闭
  204. judgeIsAllClose() {
  205. if (this.checkedList.length == 1) {
  206. if (this.checkedList[0].status == 0) {
  207. // 未审批状态下整单关闭
  208. return false
  209. }
  210. }
  211. return true;
  212. },
  213. // 整单关闭
  214. async handleAllClose() {
  215. // 未审批状态下整单关闭
  216. try {
  217. this.loading = true;
  218. let puOrderIds = this.checkedList.map(order => {
  219. return order.id;
  220. })
  221. let { code } = await orderApi.close({ puOrderIds });
  222. if (code === 200) {
  223. this.fetchList(this.params, this.page);
  224. }
  225. } catch (error) {
  226. } finally {
  227. this.loading = false;
  228. }
  229. },
  230. handleSelect(selection, row) {
  231. this.checkedList = selection;
  232. console.log(this.checkedList, 'this.checkedList');
  233. },
  234. },
  235. };
  236. </script>
  237. <template>
  238. <el-card v-loading="loading" style="width: calc(100% - 24px); height: 100%; margin: 10px" :body-style="{ padding: 0 }">
  239. <SeeDrawer ref="seeDrawerFef"></SeeDrawer>
  240. <AddDrawer ref="addDrawerFef" @close="handleRefreshList"></AddDrawer>
  241. <EditDrawer ref="editDrawerFef" @close="handleRefreshList"></EditDrawer>
  242. <el-form size="mini" label-position="right" label-width="100px" :model="params" style="padding: 20px 0 0 0">
  243. <el-row :gutter="24" style="display:flex; flex-wrap: wrap;">
  244. <el-col :span="20">
  245. <el-row :gutter="20">
  246. <el-col v-for="column in showSearchColumns" :key="column.title" :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
  247. <el-form-item :prop="column.key" :label="column.title">
  248. <el-input v-model="params[column.key]" :placeholder="column.placeholder"></el-input>
  249. </el-form-item>
  250. </el-col>
  251. </el-row>
  252. </el-col>
  253. <el-col :span="4" style="text-align: right; padding-right: 40px">
  254. <el-button type="primary" size="mini" @click="handleQueryList"
  255. v-hasPermi="['material:order:query']">搜索</el-button>
  256. <el-button size="mini" @click="handleResetList">重置</el-button>
  257. </el-col>
  258. </el-row>
  259. </el-form>
  260. <el-divider>
  261. <i :class="isSimpleSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" style="cursor: pointer"
  262. @click="handleSearchChange"></i>
  263. </el-divider>
  264. <!-- 操作 -->
  265. <el-row :gutter="24" style="padding: 0 20px">
  266. <!-- <el-col :span="6">123</el-col> -->
  267. <el-col :span="24" style="text-align: right;margin: 0 10px 0 0">
  268. <!-- <el-button-group style="margin-left: 10px"> -->
  269. <el-button size="mini" type="primary" plain @click="handleOpenAddDrawer"
  270. v-hasPermi="['material:order:add']">新增</el-button>
  271. <!-- </el-button-group> -->
  272. <el-button-group style="margin-left: 10px">
  273. <el-button size="mini" :disabled="checkedList.length != 1" @click="handleCopy">复制</el-button>
  274. </el-button-group>
  275. <el-button-group style="margin-left: 10px" :key="checkedList.length + 1">
  276. <el-button size="mini" @click="handleAllSendBack" :disabled="judgeIsAllSendBack()">整单退回</el-button>
  277. <el-button size="mini" @click="handleAllClose" :disabled="judgeIsAllClose()">整单关闭</el-button>
  278. </el-button-group>
  279. <el-button-group style="margin-left: 10px">
  280. <!-- <el-button size="mini">采购退货</el-button> -->
  281. <!-- <el-button size="mini">附件管理</el-button>
  282. <el-button size="mini">单据追溯</el-button> -->
  283. </el-button-group>
  284. </el-col>
  285. </el-row>
  286. <el-table @row-dblclick="handleOpenSeeDrawer" @row-click="handleDetailsData" :data="tableData" size="mini"
  287. highlight-current-row style="width: 100%; margin: 20px 0 0 0" @select="handleSelect" height="450">
  288. <el-table-column type="selection" width="45"></el-table-column>
  289. <el-table-column type="index" width="50" label="序号"></el-table-column>
  290. <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.key" :label="column.title"
  291. :width="column.width || 180" :show-overflow-tooltip="column.showOverflowTooltip || true">
  292. <template slot-scope="scope">
  293. <dict-tag v-if="column.referName" size="small" :value="scope.row[column.key]"
  294. :options="dict.type[column.referName]" />
  295. <el-checkbox v-else-if="column.inputType === 'Checkbox'" v-model="scope.row[column.key]" disabled true-label="Y"
  296. false-label="N">
  297. </el-checkbox>
  298. <span v-else>{{ scope.row[column.key] }}</span>
  299. </template>
  300. </el-table-column>
  301. <el-table-column fixed="right" label="操作" width="120">
  302. <template slot-scope="scope">
  303. <!-- <el-button @click.stop="handleOpenSeeDrawer(scope.row)" type="text" size="small">查看</el-button> -->
  304. <el-button type="text" size="small" @click.stop="handleOpenEditDrawer(scope.row)"
  305. v-hasPermi="['material:order:edit']">
  306. {{ scope.row.status == '2' ? '修订' : '编辑' }}</el-button>
  307. <!-- 0=自由态,1=审批中,2=已审核,3=已驳回 -->
  308. <el-button type="text" size="small" @click.stop="handleDeleteList(scope.row)"
  309. v-hasPermi="['material:order:remove']">删除</el-button>
  310. <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" type="text" size="mini"
  311. v-hasPermi="['material:order:toOa']" @click.stop="handleSubmit(scope.row)">提交</el-button>
  312. </template>
  313. </el-table-column>
  314. </el-table>
  315. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="page.total"
  316. :page-sizes="pageSizes" :page-size="page.pageSize" :current-page="page.pageNum" hide-on-single-page :layout="layout"
  317. style="text-align: right;margin-top: 10px;">
  318. </el-pagination>
  319. <el-tabs v-model="tabName" @tab-click="handleTabClick" style="width: 100%;padding: 20px 10px">
  320. <el-tab-pane v-for="(column, index) in tabColumns" :key="index" :label="column.title" :name="column.key">
  321. <el-table :data="tabTableDatas[column.key]" style="width: 100%" highlight-current-row
  322. :height="tabTableDatas[column.key].length ? 300 : 100">
  323. <el-table-column type="index" width="50" label="序号"></el-table-column>
  324. <el-table-column v-for="(cColumn, cIndex) in column.tableColumns" :key="cIndex" :prop="cColumn.key"
  325. :label="cColumn.title" :width="cColumn.width || 180"
  326. :show-overflow-tooltip="cColumn.showOverflowTooltip || true">
  327. <template slot-scope="scope">
  328. <dict-tag v-if="cColumn.referName" size="small" :value="scope.row[cColumn.key]"
  329. :options="dict.type[cColumn.referName]" />
  330. <el-checkbox v-else-if="cColumn.inputType === 'Checkbox'" v-model="scope.row[cColumn.key]" disabled
  331. true-label="Y" false-label="N">
  332. </el-checkbox>
  333. <span v-else>{{ scope.row[cColumn.key] }}</span>
  334. </template>
  335. </el-table-column>
  336. </el-table>
  337. </el-tab-pane>
  338. </el-tabs>
  339. </el-card>
  340. </template>