index.vue 9.6 KB

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