index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753
  1. <script>
  2. import orderApi from "@/api/business/purchase/purchase-order";
  3. import { initColumns, initDicts, initRules, initParams } from "@/utils/init";
  4. import { async } from "q";
  5. import { Columns, TabColumns } from "./column";
  6. const NewColumns = initColumns(Columns);
  7. const NewTabColumns = TabColumns.map((element) => ({
  8. ...element,
  9. tableColumns: initColumns(element.tableColumns),
  10. }));
  11. const SelectColumns = NewColumns.filter(
  12. (column) => column.inputType === "Select"
  13. );
  14. NewTabColumns.forEach((column) => {
  15. SelectColumns.push(
  16. ...column.tableColumns.filter((cColumn) => cColumn.inputType === "Select")
  17. );
  18. });
  19. export default {
  20. name: "AddPurchaseOrderDrawer",
  21. dicts: initDicts(SelectColumns),
  22. components: {
  23. FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
  24. popDialog: () => import("@/components/PopDialog/index.vue"),
  25. },
  26. data() {
  27. return {
  28. visible: false,
  29. columns: NewColumns,
  30. rules: initRules(NewColumns),
  31. params: {
  32. ...initParams(NewColumns),
  33. puOrderItemList: [],
  34. puOrderExecuteList: [],
  35. },
  36. tabColumns: NewTabColumns,
  37. tabName: "puOrderItemList",
  38. };
  39. },
  40. computed: {},
  41. watch: {
  42. "params.puOrderItemList": {
  43. handler(nVal, oVal) {
  44. this.visible &&
  45. this.handleSynchronousMaterial(
  46. "puOrderItemList",
  47. "puOrderExecuteList"
  48. );
  49. },
  50. deep: true,
  51. },
  52. "params.puOrderExecuteList": {
  53. handler(nVal, oVal) {
  54. this.visible &&
  55. this.handleSynchronousMaterial(
  56. "puOrderExecuteList",
  57. "puOrderItemList"
  58. );
  59. },
  60. deep: true,
  61. },
  62. params: {
  63. handler(nVal, oVal) {
  64. // 组织变化
  65. if (this.visible && nVal.puOrg != oVal.puOrg) {
  66. for (const key in this.params) {
  67. if (Array.isArray(this.params[key])) {
  68. this.params[key] = [];
  69. } else if (
  70. key != "puOrg" &&
  71. key != "puOrgName" &&
  72. key != "buyer" &&
  73. key != "buyerName" &&
  74. key != "puDept" &&
  75. key != "puDeptName" &&
  76. key != "status"
  77. ) {
  78. this.params[key] = "";
  79. } else {
  80. }
  81. }
  82. }
  83. },
  84. deep: true,
  85. },
  86. },
  87. methods: {
  88. beforeOpen() {
  89. const { deptName, deptId, name, nickName, orgName, orgId } = this.$store.state.user;
  90. this.params.puOrg = orgId;
  91. this.params.puOrgName = orgName;
  92. this.params.buyer = name;
  93. this.params.buyerName = nickName;
  94. this.params.puDept = deptId;
  95. this.params.puDeptName = deptName;
  96. this.params.billDate = new Date().Format('yyyy-MM-dd');
  97. this.addTableRow();
  98. },
  99. setVisible(prop) {
  100. this.visible = prop;
  101. if(!this.visible){
  102. this.$refs['orderAddForm'].clearValidate();
  103. }
  104. },
  105. // 复制赋值
  106. async setCopyParams(id) {
  107. try {
  108. const { code, msg, data } = await orderApi.details(id);
  109. if (code === 200) {
  110. this.params = {
  111. ...data,
  112. id: "",
  113. code: "",
  114. status: "0",
  115. source: "3",
  116. };
  117. for (const key in this.params) {
  118. if (Array.isArray(this.params[key])) {
  119. this.params[key].forEach((v) => {
  120. v.id = "";
  121. });
  122. }
  123. }
  124. }
  125. } catch (err) {
  126. //
  127. } finally {
  128. // this.loading = false;
  129. }
  130. },
  131. // 增行
  132. addTableRow(prop) {
  133. for (const key in this.params) {
  134. // if (Array.isArray(this.params[key])) {
  135. if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
  136. const arr = this.tabColumns.find(
  137. (element) => element.key === key
  138. ).tableColumns;
  139. let rowData = initParams(arr, "key", "value");
  140. "rowno" in rowData &&
  141. (rowData["rowno"] = this.params[key].length + 1);
  142. // 物料
  143. if("rowNo" in rowData){
  144. rowData["rowNo"] = this.params[key].length + 1;
  145. // 扣税类别
  146. rowData["taxDeductClassify"] = '1';
  147. // 价格类型
  148. rowData["priceType"] = 'order';
  149. // 币种
  150. rowData["currency"] = '1002Z0100000000001K1';
  151. rowData["currencyName"] = '人民币';
  152. }
  153. // 是否完成询价,新增明细行需默认明细为false
  154. rowData["whetherCompleteInquiry"] = false;
  155. this.params[key].push(rowData);
  156. }
  157. }
  158. // const arr = this.tabColumns.find(
  159. // (element) => element.key === this.tabName
  160. // ).tableColumns;
  161. // prop.push(initParams(arr, "key", "value"));
  162. },
  163. // 删行
  164. delTableRow(prop, index) {
  165. for (const key in this.params) {
  166. if (Array.isArray(this.params[key])) {
  167. this.params[key].splice(index, 1);
  168. }
  169. }
  170. // prop.splice(index, 1);
  171. },
  172. // 同步子表物料
  173. handleSynchronousMaterial(key1, key2) {
  174. let _this = this;
  175. // this.params[key1]-- -> this.params[key2]
  176. this.params[key1] &&
  177. this.params[key1].forEach((item, index) => {
  178. for (const key in item) {
  179. if (key in _this.params[key2][index]) {
  180. if (
  181. key == "material" ||
  182. key == "materialName" ||
  183. key == "materialCode"
  184. ) {
  185. _this.params[key2][index].material = item.material;
  186. _this.params[key2][index].materialName = item.materialName;
  187. _this.params[key2][index].materialCode = item.materialCode;
  188. } else {
  189. _this.params[key2][index][key] = item[key];
  190. }
  191. }
  192. }
  193. });
  194. },
  195. // 取消
  196. handleCancel() {
  197. this.params = {
  198. ...initParams(this.columns),
  199. puOrderItemList: [],
  200. puOrderExecuteList: [],
  201. };
  202. this.setVisible(false);
  203. },
  204. // 判断保存条件
  205. judgeSaveCondition(cb){
  206. this.$refs['orderAddForm'].validate(async (valid) => {
  207. if (valid) {
  208. if(!this.params['puOrderItemList'].length || !this.params['puOrderExecuteList'].length){
  209. this.$message.error('请填写订单行!');
  210. return false;
  211. }
  212. // puOrderItemList
  213. let isPrice = this.params.puOrderItemList.filter(item => !item.whetherCompleteInquiry);
  214. if(isPrice.length){
  215. this.$message.error('询价失败!');
  216. return false
  217. }
  218. console.log(isPrice,'isPrice');
  219. cb();
  220. } else {
  221. this.$message.error('存在必填项未填写');
  222. console.log('error submit!!');
  223. return false;
  224. }
  225. });
  226. },
  227. // 保存
  228. handleSava() {
  229. console.log(this.params,'this.params---------');
  230. this.judgeSaveCondition(async()=>{
  231. try {
  232. this.loading = true;
  233. const { code, msg } = await orderApi.create(this.params);
  234. if (code === 200) {
  235. this.handleCancel();
  236. }
  237. } catch (err) {
  238. //
  239. } finally {
  240. this.loading = false;
  241. }
  242. })
  243. },
  244. // 保存并新增
  245. async handleSubmit() {
  246. this.judgeSaveCondition(async()=>{
  247. try {
  248. const createById = this.params.buyer;
  249. const createByName = this.params.buyerName;
  250. const updateById = this.$store.state.user.id;
  251. const updateByName = this.$store.state.user.name;
  252. const { code, msg } = await orderApi.create({
  253. createById,
  254. createByName,
  255. updateById,
  256. updateByName,
  257. ...this.params,
  258. });
  259. if (code === 200) {
  260. this.setVisible(false);
  261. }
  262. } catch (err) {
  263. this.$notify.error({ title: "error", message: err });
  264. } finally {
  265. // this.setVisible(false);
  266. }
  267. })
  268. },
  269. // 主表参照改变之后
  270. async handleReferChange(val, source, type){
  271. console.log(val,'val-------------------');
  272. // 供应商选择
  273. if( type === 'SUPPLIER_PARAM' ){
  274. let page = { pageNum: 1 , pageSize: 10 };
  275. let relevanceRefer = [
  276. {
  277. // 供应商联系人
  278. key:'supplierContacts',
  279. params:{
  280. type:'SUPPLIERCONTACTS_PARAM',
  281. supplierId:val.id,
  282. }
  283. },
  284. {
  285. // 供应商业务员
  286. key:'supplierPersonal',
  287. params:{
  288. type:'PSNLICENSE_PARAM',
  289. supplierId:val.id,
  290. pkOrg: source.puOrg,
  291. }
  292. }
  293. ]
  294. await relevanceRefer.forEach(async (refer) =>{
  295. try {
  296. const { code, rows} = await orderApi.REFER(
  297. {
  298. ...refer.params,
  299. search: "",
  300. isPage: true,
  301. }, page );
  302. if (code === 200) {
  303. source[refer.key] = rows[0]? rows[0].id :'';
  304. source[`${refer.key}Name`] = rows[0] ? rows[0].name :'';
  305. }
  306. } catch (error) {}
  307. })
  308. }
  309. },
  310. // 下拉框选择改变
  311. handleSelectChange(val,typeName){
  312. if(val === 'billType'){
  313. this.params['billTypeName'] = this.dict.type[typeName].find(item => item.value == this.params[val]).label;
  314. }
  315. },
  316. // 子表参照改变之后
  317. async handleTabReferChange(val, source, type) {
  318. // 触发物料参照询价 && source.qty && source.qty != ""
  319. if (type == "MATERIAL_PARAM" && source.qty && source.qty != "") {
  320. source['qty'] = 0;
  321. source['whetherCompleteInquiry'] = false;
  322. source['taxPrice'] = 0;
  323. source['money'] = 0;
  324. source['taxDeductMoneya'] = 0;
  325. source['price'] = 0;
  326. source['notaxMoney'] = 0;
  327. source['tax'] = 0;
  328. this.params['qty'] = 0;
  329. this.params['originalQty'] = 0;
  330. this.params['money'] = 0;
  331. this.params['originalMoney'] = 0;
  332. this.params['notaxMoney'] = 0;
  333. source.isDrug = val.materialMedcine.isDrug == '0' ? 'Y' : 'N';
  334. await this.handleGetPrice();
  335. }
  336. },
  337. // 子表下拉框改变
  338. async handleTabSelectChange(type,row){
  339. if(type == 'priceType' && row.material && row.qty && row.qty != ""){
  340. row['whetherCompleteInquiry'] = false;
  341. await this.handleGetPrice();
  342. }
  343. },
  344. // 子表inputNumber
  345. handleInputChange(row, type) {
  346. // 物料数量变化----询价
  347. if (type == "qty" && row.material) {
  348. row['whetherCompleteInquiry'] = false;
  349. this.handleGetPrice();
  350. }
  351. },
  352. // 子表多选框改变
  353. handleTabCheckbox(type,source){
  354. // 勾选赠品,价税合计更新为0,含税单价、无税单价更新为0
  355. if(type === 'isGift' && source.material && source.qty && source.qty != ""){
  356. source['whetherCompleteInquiry'] = false;
  357. this.handleGetPrice()
  358. }
  359. },
  360. // 询价 getPrice
  361. async handleGetPrice() {
  362. try {
  363. // let { puOrg, priceType, customer, assignSupplier, material, } = data;
  364. let { code, data } = await orderApi.getPrice({ ...this.params });
  365. if (code == 200) {
  366. this.params = data;
  367. }
  368. } catch (error) {
  369. } finally {
  370. }
  371. },
  372. },
  373. created() {
  374. console.log("ADD CREATED", this.params);
  375. },
  376. mounted() {},
  377. destroyed() {},
  378. };
  379. </script>
  380. <template>
  381. <el-drawer
  382. direction="btt"
  383. size="100%"
  384. :with-header="false"
  385. :visible.sync="visible"
  386. @open="beforeOpen"
  387. @close="$emit('close')"
  388. >
  389. <el-form
  390. size="mini"
  391. label-position="right"
  392. ref="orderAddForm"
  393. label-width="140px"
  394. :model="params"
  395. :rules="rules"
  396. >
  397. <el-card
  398. :body-style="{
  399. padding: '20px',
  400. display: 'flex',
  401. 'flex-wrap': 'wrap',
  402. }"
  403. style="margin: 10px"
  404. >
  405. <div
  406. slot="header"
  407. style="
  408. display: flex;
  409. justify-content: space-between;
  410. align-items: center;
  411. "
  412. >
  413. <h3>新增</h3>
  414. <div style="text-align: right">
  415. <el-button size="mini" @click="handleCancel">取消</el-button>
  416. <el-button
  417. size="mini"
  418. type="danger"
  419. @click="handleSava"
  420. >保存</el-button>
  421. <!-- <el-button size="mini" type="info" @click="handleSubmit">
  422. 保存并新增
  423. </el-button> -->
  424. </div>
  425. </div>
  426. <el-row style="display: flex; flex-wrap: wrap">
  427. <el-col
  428. v-for="(column, index) in columns"
  429. :key="index"
  430. :span="column.span || 6"
  431. >
  432. <el-form-item
  433. :prop="column.key"
  434. :label="column.title"
  435. v-if="column.isShow"
  436. >
  437. <el-input
  438. v-if="column.inputType === 'Input'"
  439. v-model="params[column.key]"
  440. :placeholder="column.placeholder"
  441. :clearable="column.clearable"
  442. :disabled="column.disabled"
  443. style="width: 100%"
  444. >
  445. </el-input>
  446. <dr-popover-select
  447. v-if="column.inputType === 'PopoverSelect'"
  448. v-model="params[column.key]"
  449. :value-key="column.valueKey"
  450. :source.sync="params"
  451. :title="column.title"
  452. :type="column.referName"
  453. :disabled="column.disabled"
  454. :multiple="column.multiple"
  455. :placeholder="column.placeholder"
  456. :data-mapping="column.dataMapping"
  457. :query-params="column.queryParams"
  458. @change="handleReferChange"
  459. ></dr-popover-select>
  460. <el-input
  461. v-if="column.inputType === 'Textarea'"
  462. v-model="params[column.key]"
  463. type="textarea"
  464. :placeholder="column.placeholder"
  465. :clearable="column.clearable"
  466. :disabled="column.disabled"
  467. style="width: 100%"
  468. ></el-input>
  469. <el-input-number
  470. v-if="column.inputType === 'InputNumber'"
  471. v-model="params[column.key]"
  472. :controls-position="column.controlsPosition"
  473. :placeholder="column.placeholder"
  474. :clearable="column.clearable"
  475. :disabled="column.disabled"
  476. style="width: 100%"
  477. >
  478. </el-input-number>
  479. <el-select
  480. v-if="column.inputType === 'Select'"
  481. v-model="params[column.key]"
  482. :disabled="column.disabled"
  483. :clearable="column.clearable"
  484. :placeholder="column.placeholder"
  485. style="width: 100%"
  486. @change="handleSelectChange(column.key,column.referName)"
  487. >
  488. <el-option
  489. v-for="item in dict.type[column.referName]"
  490. :key="item.value"
  491. :label="item.label"
  492. :value="item.value"
  493. ></el-option>
  494. </el-select>
  495. <el-select
  496. v-if="column.inputType === 'TagSelect'"
  497. v-model="params[column.key]"
  498. multiple
  499. clearable
  500. collapse-tags
  501. :placeholder="column.placeholder"
  502. :clearable="column.clearable"
  503. :disabled="column.disabled"
  504. style="width: 100%"
  505. >
  506. <template #prefix>
  507. <el-icon
  508. class="el-icon-view"
  509. style="cursor: pointer"
  510. @click.stop="$message.info(234)"
  511. >
  512. </el-icon>
  513. </template>
  514. <el-option
  515. v-for="item in options"
  516. :key="item.value"
  517. :label="item.label"
  518. :value="item.value"
  519. ></el-option>
  520. </el-select>
  521. <el-date-picker
  522. v-if="column.inputType === 'DatePicker'"
  523. v-model="params[column.key]"
  524. :type="column.type"
  525. :placeholder="column.placeholder"
  526. :clearable="column.clearable"
  527. :disabled="column.disabled"
  528. :picker-options="column.pickerOptions"
  529. style="width: 100%"
  530. ></el-date-picker>
  531. <el-checkbox
  532. v-if="column.inputType === 'Checkbox'"
  533. v-model="params[column.key]"
  534. :disabled="column.disabled"
  535. true-label="Y"
  536. false-label="N"
  537. ></el-checkbox>
  538. <file-upload-center
  539. v-if="column.inputType === 'Upload'"
  540. v-model="params[column.key]"
  541. :file-type="column.fileType"
  542. ></file-upload-center>
  543. </el-form-item>
  544. </el-col>
  545. </el-row>
  546. </el-card>
  547. <el-card
  548. :body-style="{
  549. padding: '20px',
  550. display: 'flex',
  551. 'flex-wrap': 'wrap',
  552. position: 'relative',
  553. }"
  554. style="margin: 10px"
  555. >
  556. <el-tabs v-model="tabName" style="width: 100%">
  557. <el-tab-pane
  558. v-for="(column, index) in tabColumns"
  559. :key="index"
  560. :label="column.title"
  561. :name="column.key"
  562. >
  563. <el-table :data="params[column.key]" style="width: 100%">
  564. <el-table-column
  565. v-for="(cColumn, cIndex) in column.tableColumns"
  566. :key="cIndex"
  567. :label="cColumn.title"
  568. :width="cColumn.width || 80"
  569. >
  570. <template slot-scope="scope">
  571. <el-form-item
  572. label-width="0"
  573. :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
  574. :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }"
  575. >
  576. <el-tag v-if="cColumn.key === 'index'" >
  577. {{ scope.$index + 1 }}
  578. </el-tag>
  579. <el-input
  580. v-if="cColumn.inputType === 'Input'"
  581. v-model="scope.row[cColumn.key]"
  582. :placeholder="cColumn.placeholder"
  583. :clearable="cColumn.clearable"
  584. :disabled="cColumn.disabled"
  585. size="mini"
  586. style="width: 100%"
  587. ></el-input>
  588. <!-- -->
  589. <dr-popover-select
  590. v-if="cColumn.inputType === 'PopoverSelect'"
  591. v-model="scope.row[cColumn.key]"
  592. :source.sync="scope.row"
  593. :title="cColumn.title"
  594. :value-key="cColumn.valueKey"
  595. :type="cColumn.referName"
  596. :disabled="cColumn.disabled"
  597. :multiple="cColumn.multiple"
  598. :placeholder="cColumn.placeholder"
  599. :data-mapping="cColumn.dataMapping"
  600. :query-params="cColumn.queryParams"
  601. @change="handleTabReferChange"
  602. size="mini"
  603. >
  604. </dr-popover-select>
  605. <el-input-number
  606. v-if="cColumn.inputType === 'InputNumber'"
  607. v-model="scope.row[cColumn.key]"
  608. :controls-position="cColumn.controlsPosition"
  609. :placeholder="cColumn.placeholder"
  610. @change="handleInputChange(scope.row, cColumn.key)"
  611. :clearable="cColumn.clearable"
  612. :disabled="cColumn.disabled"
  613. size="mini"
  614. style="width: 100%"
  615. ></el-input-number>
  616. <el-select
  617. v-if="cColumn.inputType === 'Select'"
  618. v-model="scope.row[cColumn.key]"
  619. size="mini"
  620. :disabled="cColumn.disabled"
  621. :clearable="cColumn.clearable"
  622. :placeholder="cColumn.placeholder"
  623. style="width: 100%"
  624. @change="handleTabSelectChange(cColumn.key,scope.row)"
  625. >
  626. <el-option
  627. v-for="item in dict.type[cColumn.referName]"
  628. :key="item.value"
  629. :label="item.label"
  630. :value="item.value"
  631. ></el-option>
  632. </el-select>
  633. <el-checkbox
  634. v-if="cColumn.inputType === 'Checkbox'"
  635. v-model="scope.row[cColumn.key]"
  636. :disabled="cColumn.disabled"
  637. true-label="Y"
  638. false-label="N"
  639. @change="handleTabCheckbox(cColumn.key,scope.row)"
  640. ></el-checkbox>
  641. </el-form-item>
  642. </template>
  643. </el-table-column>
  644. <el-table-column fixed="right" label="操作" width="80">
  645. <template slot-scope="scope">
  646. <el-button
  647. @click.native.prevent="
  648. delTableRow(params[tabName], scope.$index)
  649. "
  650. type="text"
  651. size="small"
  652. >
  653. 删行
  654. </el-button>
  655. </template>
  656. </el-table-column>
  657. </el-table>
  658. </el-tab-pane>
  659. </el-tabs>
  660. <el-row style="position: absolute; top: 20px; right: 20px">
  661. <el-button size="mini" @click="addTableRow(params[tabName])"
  662. >增行</el-button
  663. >
  664. </el-row>
  665. </el-card>
  666. </el-form>
  667. </el-drawer>
  668. </template>