index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <script>
  2. import useColumns from "./columns";
  3. import {EXIST} from "@/api/business/purchase/catalogue";
  4. import {ITEM, SAVE} from "@/api/business/purchase/apply";
  5. import {tax, unit, currency} from "@/components/popover-select-v2/fetch";
  6. const fetchExist = async (prop) => {
  7. try {
  8. // try
  9. const {code, data} = await EXIST(prop);
  10. if (code === 200) return data;
  11. } catch (err) {
  12. // catch
  13. console.error(err);
  14. } finally {
  15. // finally
  16. }
  17. };
  18. export default {
  19. name: "EditDrawer",
  20. props: {
  21. dict: {
  22. type: Object,
  23. },
  24. selectData: {
  25. type: [Array],
  26. require: true,
  27. },
  28. },
  29. components: {
  30. ElSuperForm: () => import("@/components/super-form/index.vue"),
  31. ElSuperTable: () => import("@/components/super-table/index.vue"),
  32. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  33. },
  34. data() {
  35. const {
  36. TabColumns,
  37. TableColumns,
  38. TabColumns: [
  39. {
  40. item: {key: tabName},
  41. },
  42. ],
  43. } = useColumns();
  44. const rules = this.$init.rules([...TabColumns, ...TableColumns]);
  45. const params = this.$init.params([...TabColumns, ...TableColumns]);
  46. return {
  47. title: "编 辑",
  48. width: "100%",
  49. visible: false,
  50. loading: false,
  51. rules: rules,
  52. params: params,
  53. tabName: tabName,
  54. TabColumns: TabColumns,
  55. TableColumns: TableColumns,
  56. };
  57. },
  58. computed: {
  59. disabled: {
  60. get() {
  61. const {
  62. selectData,
  63. selectData: [{status} = {}],
  64. } = this.$props;
  65. if (selectData.length !== 1) {
  66. return true;
  67. }
  68. if (selectData.length === 1 && status === "1") {
  69. return true;
  70. }
  71. if (selectData.length === 1 && status === "2") {
  72. return true;
  73. }
  74. },
  75. set() {
  76. },
  77. },
  78. priceApply: {
  79. get() {
  80. this.params.priceApplyItems = this.params.priceApplyItems.map(
  81. (item, index) => ({
  82. ...item,
  83. $index: index,
  84. })
  85. );
  86. return {
  87. priceApplyItems: this.params.priceApplyItems.filter(
  88. ({delFlag}) => delFlag !== "2"
  89. ),
  90. };
  91. },
  92. set() {
  93. },
  94. },
  95. },
  96. watch: {},
  97. methods: {
  98. //
  99. async changeMaterialName(prop) {
  100. console.log('prop', prop);
  101. const {selectData} = prop;
  102. const {
  103. puOrg,
  104. customer,
  105. customerName,
  106. supplier,
  107. currency,
  108. currencyCode,
  109. currencyName,
  110. } = this.params;
  111. console.log('selectData', selectData)
  112. const {nickName: createByName} = this.$store.state.user;
  113. if (selectData.length) {
  114. this.params[this.tabName].splice(-1);
  115. }
  116. for (const item of selectData) {
  117. console.log('item', item)
  118. this.loading = true;
  119. const {tax: taxName, unitName, code: materialCode} = item;
  120. // task 1
  121. const {ntaxrate} = await tax(taxName);
  122. // task 2
  123. const {
  124. id: puUnit,
  125. code: puUnitCode,
  126. name: puUnitName,
  127. } = await unit(unitName);
  128. // task 3
  129. const {
  130. recentlyPrice = "0",
  131. isApprovalFirst = "N",
  132. purchasequantity
  133. } = await fetchExist({puOrg, customer, supplier, materialCode, customerName: "",priceType: prop.row.priceType});
  134. this.loading = false;
  135. await this.onRowAdd(this.tabName, {
  136. ...item,
  137. currency: currency,
  138. currencyCode: currencyCode,
  139. currencyName: currencyName,
  140. unit: puUnit,
  141. unitCode: puUnitCode,
  142. unitName: puUnitName,
  143. puUnit: puUnit,
  144. puUnitCode: puUnitCode,
  145. puUnitName: puUnitName,
  146. recentlyPrice,
  147. isApprovalFirst,
  148. yPurchaseQuantity: purchasequantity,
  149. tax: Number(ntaxrate === "0E-8" ? 0 : ntaxrate),
  150. createByName: createByName,
  151. updateByName: createByName,
  152. id: null,
  153. });
  154. }
  155. },
  156. //
  157. async changeCustomerName(prop) {
  158. console.log("prop", prop)
  159. const {
  160. puOrg,
  161. supplier,
  162. currency,
  163. currencyCode,
  164. currencyName,
  165. } = this.params;
  166. const {
  167. recentlyPrice,
  168. isApprovalFirst,
  169. purchasequantity
  170. } = await fetchExist({puOrg, supplier, materialCode: prop.row.materialCode, customer:prop.row.customer,customerName: prop.row.customerName, priceType: prop.row.priceType});
  171. prop.row.yPurchaseQuantity = purchasequantity
  172. prop.row.recentlyPrice = recentlyPrice
  173. prop.row.isApprovalFirst = isApprovalFirst
  174. },
  175. //
  176. async fetchItem(prop) {
  177. try {
  178. // try
  179. this.loading = true;
  180. const {tabName, TabColumns} = this;
  181. const {TableColumns} = TabColumns.find(
  182. ({item: {key}}) => key === tabName
  183. );
  184. const {code, data} = await ITEM(prop, false);
  185. if (code === 200) {
  186. this.params = data;
  187. this.params.priceApplyItems = data.priceApplyItems.map((item) => ({
  188. ...this.$init.params(TableColumns),
  189. ...item,
  190. }));
  191. return true;
  192. } else {
  193. return false;
  194. }
  195. } catch (err) {
  196. // catch
  197. console.error(err);
  198. } finally {
  199. // finally
  200. this.loading = false;
  201. }
  202. },
  203. //
  204. async onOpen() {
  205. const {
  206. selectData: [{id}],
  207. } = this.$props;
  208. this.visible = await this.fetchItem(id);
  209. },
  210. //
  211. async onHide() {
  212. const {TabColumns, TableColumns} = useColumns();
  213. this.visible = false;
  214. this.params = this.$init.params([...TabColumns, ...TableColumns]);
  215. this.$emit("success");
  216. },
  217. //
  218. async onRowAdd(prop, pushParams = {}) {
  219. this.$refs.superForm.validate(async (valid) => {
  220. if (valid) {
  221. const {TabColumns} = this;
  222. const {TableColumns} = TabColumns.find(
  223. ({item: {key}}) => key === prop
  224. );
  225. this.params[prop].push({
  226. delFlag: "0",
  227. ...this.$init.params(TableColumns),
  228. ...pushParams,
  229. });
  230. }
  231. });
  232. },
  233. //
  234. async onRowRemove(prop, scope) {
  235. const {
  236. row: {$index},
  237. } = scope;
  238. this.params[prop] = this.params[prop].map((item, index) => ({
  239. ...item,
  240. delFlag: index === $index ? "2" : item.delFlag,
  241. }));
  242. },
  243. //
  244. async useSubmit(prop) {
  245. this.$refs[prop].validate(async (valid) => {
  246. console.log(this.params);
  247. if (valid) {
  248. try {
  249. this.loading = true;
  250. this.params.priceApplyItems = this.params.priceApplyItems.filter(
  251. (item) => item.materialName
  252. );
  253. const {msg, code} = await SAVE(this.params);
  254. if (code === 200) {
  255. this.onHide();
  256. this.$emit("success");
  257. this.$notify.success(msg);
  258. }
  259. } catch (err) {
  260. // catch
  261. console.error(err);
  262. } finally {
  263. // finally
  264. this.loading = false;
  265. }
  266. } else {
  267. return false;
  268. }
  269. });
  270. },
  271. },
  272. created() {
  273. },
  274. mounted() {
  275. },
  276. destroyed() {
  277. },
  278. };
  279. </script>
  280. <template>
  281. <el-button
  282. v-bind="$attrs"
  283. v-on="$listeners"
  284. :disabled="disabled"
  285. @click="onOpen"
  286. >
  287. {{ title }}
  288. <el-drawer
  289. :show-close="false"
  290. :size="width"
  291. :title="title"
  292. :visible.sync="visible"
  293. append-to-body
  294. destroy-on-close
  295. @close="onHide"
  296. >
  297. <template slot="title">
  298. <span>{{ title }}</span>
  299. <el-button
  300. type="primary"
  301. :size="$attrs.size"
  302. :loading="loading"
  303. @click="useSubmit('superForm')"
  304. >
  305. 确 认
  306. </el-button>
  307. <el-button :size="$attrs.size" :loading="loading" @click="onHide">
  308. 取 消
  309. </el-button>
  310. </template>
  311. <el-super-form
  312. v-model="params"
  313. :dict="dict"
  314. :rules="rules"
  315. :size="$attrs.size"
  316. :columns="TableColumns"
  317. ref="superForm"
  318. label-width="auto"
  319. label-position="right"
  320. style="padding: 18px"
  321. >
  322. </el-super-form>
  323. <el-tabs v-model="tabName" style="padding: 0 18px 18px">
  324. <el-tab-pane
  325. v-for="({ item, TableColumns: columns }, index) in TabColumns"
  326. :key="index"
  327. :label="item.title"
  328. :name="item.key"
  329. lazy
  330. >
  331. <div v-loading="loading" style="height: 250px; display: flex">
  332. <el-super-table
  333. v-model="priceApply[item.key]"
  334. :dict="dict"
  335. :ref="tabName"
  336. :columns="columns"
  337. :size="$attrs.size"
  338. >
  339. <template slot="materialName" slot-scope="scope">
  340. <component
  341. v-bind="scope.attr"
  342. v-model="scope.row[scope.item.key]"
  343. :size="$attrs.size"
  344. :source.sync="scope.row"
  345. @change="changeMaterialName({ ...scope, selectData: $event })"
  346. >
  347. </component>
  348. </template>
  349. <template slot="customerName" slot-scope="scope">
  350. <component
  351. v-bind="scope.attr"
  352. v-model="scope.row[scope.item.key]"
  353. :size="$attrs.size"
  354. :source.sync="scope.row"
  355. @change="changeCustomerName({ ...scope, selectData: $event })"
  356. >
  357. </component>
  358. </template>
  359. <el-table-column fixed="right" label="操作" width="100">
  360. <template slot="header" slot-scope="scope">
  361. <el-button :size="$attrs.size" @click="onRowAdd(tabName)">
  362. 新增
  363. </el-button>
  364. </template>
  365. <template slot-scope="scope">
  366. <el-button
  367. :size="$attrs.size"
  368. @click.native.prevent="onRowRemove(tabName, scope)"
  369. >
  370. 删除
  371. </el-button>
  372. </template>
  373. </el-table-column>
  374. </el-super-table>
  375. </div>
  376. </el-tab-pane>
  377. </el-tabs>
  378. </el-drawer>
  379. </el-button>
  380. </template>
  381. <style scoped>
  382. ::v-deep .el-table__row.is-hidden {
  383. display: none;
  384. }
  385. </style>