index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <script>
  2. import { LIST } from "@/api/business/purchase/task";
  3. import { TableColumns, SearchColumns } from "./column";
  4. const initParams = (prop, key = "key", value = "value") => {
  5. // get params
  6. const object1 = Object.fromEntries(
  7. prop.map(({ item, attr }) => [item[key], attr[value]])
  8. );
  9. // get mapping params
  10. const object2 = {};
  11. prop
  12. .filter((item) => item.attr.dataMapping)
  13. .map(({ attr: { dataMapping } }) => {
  14. for (let key in dataMapping) {
  15. object2[key] = null;
  16. }
  17. });
  18. return { ...object1, ...object2 };
  19. };
  20. // 初始化字典
  21. const initDicts = (prop) =>
  22. Array.from(
  23. new Set(
  24. prop
  25. .filter((item) => item.attr.dictName)
  26. .map((item) => item.attr.dictName)
  27. )
  28. );
  29. export default {
  30. name: "PuchaseTask",
  31. dicts: [...initDicts([...TableColumns, ...SearchColumns])],
  32. components: {
  33. SeeModel: () => import("./see/index.vue"),
  34. CloseModel: () => import("./close/index.vue"),
  35. ExportModel: () => import("./export/index.vue"),
  36. ShiftModel: () => import("./modify-buyer/index.vue"),
  37. DirectModel: () => import("./first-direct/index.vue"),
  38. ReturnModel: () => import("./documents-return/index.vue"),
  39. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  40. ElPopoverMultipleSelectV2: () =>
  41. import("@/components/popover-select-v2/multiple.vue"),
  42. },
  43. data() {
  44. return {
  45. size: "mini",
  46. loading: false,
  47. searchColumns: SearchColumns,
  48. params: initParams(SearchColumns),
  49. tableData: [],
  50. selectData: [],
  51. tableColumns: TableColumns,
  52. page: { pageNum: 1, pageSize: 10, total: 0 },
  53. };
  54. },
  55. computed: {},
  56. watch: {},
  57. provide() {
  58. return {
  59. initParams,
  60. $dicts: () => this.dict.type,
  61. };
  62. },
  63. created() {
  64. this.params.status = "0";
  65. this.useQuery(this.params, this.page);
  66. },
  67. methods: {
  68. //
  69. setSelectable(row) {
  70. const { status } = row;
  71. if (status === "1") {
  72. // 已执行协议直采
  73. return false;
  74. } else {
  75. return true;
  76. }
  77. },
  78. //
  79. async fetchList(prop, page) {
  80. try {
  81. this.loading = true;
  82. const { code, rows, total } = await LIST(prop, page);
  83. if (code === 200) {
  84. this.tableData = rows;
  85. this.page.total = total;
  86. }
  87. } catch (err) {
  88. // catch
  89. } finally {
  90. // finally
  91. this.loading = false;
  92. }
  93. },
  94. // 查 询
  95. async useQuery(prop, page) {
  96. const { pageNum, pageSize } = page;
  97. const { date, documentsCodes: code } = prop;
  98. const [startDate, endDate] = date || [];
  99. const documentsCodes = code
  100. ? code.replace(/\s*/g, "").replaceAll(",", ",")
  101. : undefined;
  102. await this.fetchList(
  103. {
  104. ...prop,
  105. endDate,
  106. startDate,
  107. documentsCodes,
  108. date: undefined,
  109. },
  110. { pageNum, pageSize, isAsc: "desc", orderByColumn: "updateTime" }
  111. );
  112. },
  113. // 重 置
  114. useReset() {
  115. this.page.pageNum = 1;
  116. this.page.pageSize = 10;
  117. this.params = initParams(SearchColumns);
  118. this.useQuery(this.params, this.page);
  119. },
  120. // 选 择
  121. useSelect(prop) {
  122. this.selectData = prop;
  123. },
  124. // 行 关
  125. async useClose(prop) {
  126. const { open } = this.$refs.CloseModel;
  127. await open(prop);
  128. },
  129. // 退 回
  130. async useReturn(prop) {
  131. const { open } = this.$refs.ReturnModel;
  132. await open(prop);
  133. },
  134. hasPowerReturn(prop) {
  135. return !!prop.length;
  136. },
  137. // 转 派
  138. async useShift(prop) {
  139. const { id } = prop;
  140. const { open } = this.$refs.ShiftModel;
  141. await open(id);
  142. },
  143. hasPowerShift(prop) {
  144. return prop.length === 1;
  145. },
  146. // 明 细
  147. async useSee(prop) {
  148. const { id } = prop;
  149. const { open } = this.$refs.SeeModel;
  150. await open(id);
  151. },
  152. // 直 采
  153. async useDirect(prop) {
  154. console.log(this);
  155. const { open } = this.$refs.DirectModel;
  156. await open(prop);
  157. },
  158. hasPowerDirect(prop) {
  159. if (prop.length === 1) {
  160. const [{ status }] = prop;
  161. if (status === "1") return false;
  162. else return true;
  163. } else {
  164. return !!prop.length;
  165. }
  166. },
  167. // 导 出
  168. async useExport(prop, page) {
  169. const { open } = this.$refs.ExportModel;
  170. await open(prop, page);
  171. },
  172. },
  173. };
  174. </script>
  175. <template>
  176. <el-card v-loading="loading" :body-style="{ padding: 0 }">
  177. <see-model ref="SeeModel"></see-model>
  178. <export-model ref="ExportModel"></export-model>
  179. <close-model
  180. ref="CloseModel"
  181. @success="useQuery(params, page)"
  182. ></close-model>
  183. <shift-model
  184. ref="ShiftModel"
  185. @success="useQuery(params, page)"
  186. ></shift-model>
  187. <direct-model
  188. ref="DirectModel"
  189. @success="useQuery(params, page)"
  190. ></direct-model>
  191. <return-model
  192. ref="ReturnModel"
  193. @success="useQuery(params, page)"
  194. ></return-model>
  195. <el-form
  196. :size="size"
  197. :model="params"
  198. label-width="auto"
  199. label-position="right"
  200. @submit.native.prevent
  201. >
  202. <el-row :gutter="20">
  203. <el-col
  204. v-for="column in searchColumns"
  205. :key="column.item.title"
  206. :span="column.item.span || 6"
  207. >
  208. <el-form-item :prop="column.item.key" :label="column.item.title">
  209. <component
  210. v-if="column.attr.referName"
  211. v-bind="column.attr"
  212. v-model="params[column.item.key]"
  213. :source.sync="params"
  214. :is="column.attr.component"
  215. @change="useQuery(params, page)"
  216. ></component>
  217. <component
  218. v-else-if="column.attr.dictName"
  219. v-bind="column.attr"
  220. v-model="params[column.item.key]"
  221. :is="column.attr.component"
  222. @change="useQuery(params, page)"
  223. style="width: 100%"
  224. >
  225. <el-option
  226. v-for="item in dict.type[column.attr.dictName]"
  227. :key="item.value"
  228. :label="item.label"
  229. :value="item.value"
  230. >
  231. </el-option
  232. ></component>
  233. <component
  234. v-else
  235. v-bind="column.attr"
  236. v-model="params[column.item.key]"
  237. :is="column.attr.component"
  238. @change="useQuery(params, page)"
  239. @keyup.enter.native="useQuery(params, page)"
  240. ></component>
  241. </el-form-item>
  242. </el-col>
  243. </el-row>
  244. </el-form>
  245. <el-row>
  246. <el-button :size="size" @click="useQuery(params, page)">
  247. 查 询
  248. </el-button>
  249. <el-button :size="size" @click="useReset"> 重 置 </el-button>
  250. <!-- <el-button :size="size" @click="useExport(params, page)">
  251. 导 出
  252. </el-button> -->
  253. <el-button
  254. v-show="hasPowerShift(selectData)"
  255. :size="size"
  256. @click="useShift(selectData[0])"
  257. >
  258. 转 派
  259. </el-button>
  260. <el-button
  261. v-show="hasPowerReturn(selectData)"
  262. :size="size"
  263. @click="useReturn(selectData)"
  264. >
  265. 退回需求
  266. </el-button>
  267. <!-- <el-button
  268. :size="size"
  269. :disabled="selectData.length !== 1"
  270. @click="useClose(selectData[0])"
  271. >
  272. 行关闭
  273. </el-button> -->
  274. <el-button
  275. v-show="hasPowerDirect(selectData)"
  276. :size="size"
  277. @click="useDirect(selectData)"
  278. >
  279. 协议直采
  280. </el-button>
  281. </el-row>
  282. <el-table
  283. :data="tableData"
  284. size="mini"
  285. highlight-current-row
  286. @row-dblclick="useSee"
  287. @selection-change="useSelect"
  288. @row-click="useSelect([$event])"
  289. >
  290. <el-table-column
  291. fixed
  292. width="55"
  293. align="center"
  294. type="selection"
  295. :selectable="setSelectable"
  296. >
  297. </el-table-column>
  298. <el-table-column
  299. v-for="(column, index) in tableColumns"
  300. :key="index"
  301. :prop="column.item.key"
  302. :label="column.item.title"
  303. :width="column.item.width || 200"
  304. show-overflow-tooltip
  305. >
  306. <template slot-scope="scope">
  307. <dict-tag
  308. v-if="column.attr.dictName"
  309. :size="size"
  310. :value="scope.row[column.item.key]"
  311. :options="dict.type[column.attr.dictName]"
  312. />
  313. <component is="span" v-else>{{
  314. scope.row[column.item.key]
  315. }}</component>
  316. </template>
  317. </el-table-column>
  318. </el-table>
  319. <pagination
  320. :total="page.total"
  321. :page.sync="page.pageNum"
  322. :limit.sync="page.pageSize"
  323. @pagination="useQuery(params, page)"
  324. />
  325. </el-card>
  326. </template>
  327. <style scoped lang="scss">
  328. .el-card {
  329. width: calc(100% - 20px);
  330. height: 100%;
  331. margin: 10px;
  332. padding: 0 0 20px 0;
  333. .el-form {
  334. padding: 20px 0 0;
  335. }
  336. .el-row {
  337. display: flex;
  338. flex-wrap: wrap;
  339. padding: 0 20px;
  340. }
  341. ::v-deep .el-table--mini {
  342. width: 100%;
  343. margin: 20px 0 0 0;
  344. .el-table__cell {
  345. height: 50px;
  346. }
  347. }
  348. }
  349. </style>