index.vue 23 KB

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