index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. <script>
  2. // import { Columns, TabColumns } from "../add/column";
  3. import { editColumns, editTabColumns, forbidden, SelectColumns } from "./initColumn";
  4. import orderApi from "@/api/business/purchase/purchase-order";
  5. import { initColumns, initDicts, initRules, initParams } from "@/utils/init";
  6. export default {
  7. name: "EditPurchaseOrderDrawer",
  8. dicts: initDicts(SelectColumns),
  9. components: {
  10. FileUploadCenter: () => import('../components/FileUploadCenter/index.vue'),
  11. },
  12. data() {
  13. return {
  14. size: "mini",
  15. visible: false,
  16. loading: false,
  17. columns: editColumns,
  18. rules: initRules(editColumns),
  19. params: {
  20. ...initParams(editColumns),
  21. puOrderItemList: [],
  22. puOrderExecuteList: [],
  23. },
  24. tabColumns: editTabColumns,
  25. tabName: "puOrderItemList",
  26. count:1
  27. };
  28. },
  29. computed: {},
  30. watch: {
  31. "params.contractType": function (newProp) {
  32. this.tabColumns = editTabColumns.filter((element) =>
  33. newProp === "1" ? element.key !== "puOrderItemList" : element
  34. );
  35. this.tabName = this.tabColumns[0].key;
  36. },
  37. tabName: function (newProp) {
  38. const { id } = this.params;
  39. // this.fetchTable(id, newProp);
  40. },
  41. 'params.puOrderItemList': {
  42. handler(nVal, oVal) {
  43. this.params.source == 3 &&
  44. this.handleSynchronousMaterial('puOrderItemList', 'puOrderExecuteList');
  45. },
  46. deep: true,
  47. immediate: true
  48. },
  49. 'params.puOrderExecuteList': {
  50. handler(nVal, oVal) {
  51. this.params.source == 3 &&
  52. this.handleSynchronousMaterial('puOrderExecuteList', 'puOrderItemList');
  53. },
  54. deep: true,
  55. immediate: true
  56. },
  57. },
  58. methods: {
  59. setVisible(prop) {
  60. this.visible = prop;
  61. if(!this.visible){
  62. this.$refs['orderEditForm'].clearValidate();
  63. }
  64. },
  65. // 同步子表物料
  66. handleSynchronousMaterial(key1, key2) {
  67. // this.params[key1]-- -> this.params[key2]
  68. this.params[key1] && this.params[key1].forEach((item, index) => {
  69. this.params[key2][index].material = item.material;
  70. this.params[key2][index].materialName = item.materialName;
  71. this.params[key2][index].materialCode = item.materialCode;
  72. })
  73. },
  74. // 判断属性是否禁用
  75. async handleIsForbidden(status) {
  76. let { updateColumns, updateTabColumns } = await forbidden(status != '2');
  77. this.columns = updateColumns;
  78. this.tabColumns = updateTabColumns;
  79. this.count++;
  80. },
  81. // 查询详细
  82. async fetchItem(prop) {
  83. try {
  84. this.loading = true;
  85. const { code, msg, data } = await orderApi.details(prop);
  86. if (code === 200) {
  87. this.params = { ...this.params, ...data };
  88. this.handleIsForbidden(this.params.status);
  89. }
  90. } catch (err) {
  91. //
  92. } finally {
  93. this.loading = false;
  94. }
  95. },
  96. // 新增行
  97. addTableRow(prop) {
  98. for (const key in this.params) {
  99. // if (Array.isArray(this.params[key])) {
  100. if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
  101. const arr = this.tabColumns.find(
  102. (element) => element['key'] === key
  103. ).tableColumns;
  104. let rowData = initParams(arr, "key", "value");
  105. "rowno" in rowData &&
  106. (rowData["rowno"] = this.params[key].length + 1);
  107. // 物料
  108. if("rowNo" in rowData){
  109. rowData["rowNo"] = this.params[key].length + 1;
  110. // 扣税类别
  111. rowData["taxDeductClassify"] = '1';
  112. // 价格类型
  113. rowData["priceType"] = 'order';
  114. // 币种
  115. rowData["currency"] = '1002Z0100000000001K1';
  116. rowData["currencyName"] = '人民币';
  117. }
  118. // 是否完成询价,新增明细行需默认明细为false
  119. rowData['whetherCompleteInquiry'] = false;
  120. this.params[key].push(rowData);
  121. }
  122. }
  123. // const arr = this.tabColumns.find(
  124. // (element) => element.key === this.tabName
  125. // ).tableColumns;
  126. // prop.push(initParams(arr, "key", "value"));
  127. },
  128. // 删除行
  129. delTableRow(prop, index) {
  130. // prop.splice(index, 1);
  131. for (const key in this.params) {
  132. if (Array.isArray(this.params[key])) {
  133. this.params[key].splice(index, 1);
  134. }
  135. }
  136. },
  137. // 取消
  138. handleCancel() {
  139. this.params = {
  140. ...initParams(this.columns),
  141. puOrderItemList: [],
  142. puOrderExecuteList: [],
  143. }
  144. this.setVisible(false);
  145. },
  146. // 判断保存条件
  147. judgeSaveCondition(cb){
  148. this.$refs['orderEditForm'].validate(async (valid) => {
  149. if (valid) {
  150. // 执行结果在审批之后出现 !this.params['puOrderExecuteList'].length
  151. if(!this.params['puOrderItemList'].length ){
  152. this.$message.error('请填写订单行!');
  153. return false;
  154. }
  155. let isPrice = this.params.puOrderItemList.filter(item => !item.whetherCompleteInquiry);
  156. if(isPrice.length){
  157. this.$message.error('询价失败!');
  158. return false
  159. }
  160. console.log(isPrice,'isPrice');
  161. cb();
  162. } else {
  163. console.log('error submit!!');
  164. return false;
  165. }
  166. });
  167. },
  168. // 保存
  169. handleSava() {
  170. this.judgeSaveCondition(async()=>{
  171. try {
  172. this.loading = true;
  173. const { code, msg } = await (this.handleIsRevise(this.params.status) ?
  174. orderApi.revision(this.params)
  175. : orderApi.edit(this.params)
  176. )
  177. if (code === 200) {
  178. this.handleCancel();
  179. }
  180. } catch (err) {
  181. //
  182. } finally {
  183. this.loading = false;
  184. }
  185. })
  186. },
  187. beforeOpen() {
  188. },
  189. // 子表参照改变之后
  190. handleReferChange(val, source, type) {
  191. // 触发物料参照
  192. if (type == 'MATERIAL_PARAM' && source.qty && source.qty != '') {
  193. this.handleGetPrice();
  194. }
  195. if(type == "MATERIAL_PARAM"){
  196. source.isDrug = val.materialMedcine.isDrug == '0' ? 'Y' : 'N';
  197. // return source;
  198. }
  199. },
  200. // 子表Select改变之后
  201. handleSelectChange(val,typeName){
  202. if(val === 'billType'){
  203. this.params['billTypeName'] = this.dict.type[typeName].find(item => item.value == this.params[val]).label;
  204. }
  205. },
  206. // 子表下拉框改变
  207. handleTabSelectChange(type,row){
  208. if(type == 'priceType' && row.material && row.qty && row.qty != ""){
  209. this.handleGetPrice();
  210. }
  211. },
  212. // 子表inputNumber
  213. handleInputChange(row, type) {
  214. // 物料数量变化----询价
  215. if (type == 'qty' && row.material) {
  216. this.handleGetPrice();
  217. }
  218. },
  219. // 子表多选框改变
  220. handleTabCheckbox(type,source){
  221. // 勾选赠品,价税合计更新为0,含税单价、无税单价更新为0
  222. if(type === 'isGift' && source.material && source.qty && source.qty != ""){
  223. source['whetherCompleteInquiry'] = false;
  224. this.handleGetPrice()
  225. }
  226. },
  227. // 询价 getPrice
  228. async handleGetPrice() {
  229. try {
  230. // let { puOrg, priceType, customer, assignSupplier, material, } = data;
  231. let { code, data } = await orderApi.getPrice({ ...this.params })
  232. if (code == 200) {
  233. this.params = data;
  234. }
  235. } catch (error) {
  236. } finally {
  237. }
  238. },
  239. // 判断修订还是编辑
  240. handleIsRevise(status) {
  241. return status == '2';
  242. },
  243. },
  244. created() {},
  245. mounted() { },
  246. destroyed() { },
  247. };
  248. </script>
  249. <template>
  250. <el-drawer
  251. direction="btt"
  252. size="100%"
  253. :with-header="false"
  254. :visible.sync="visible"
  255. @open="beforeOpen"
  256. @close="$emit('close')"
  257. >
  258. <el-form
  259. :key="count"
  260. v-loading="loading"
  261. :size="size"
  262. ref="orderEditForm"
  263. label-position="right"
  264. label-width="140px"
  265. :model="params"
  266. :rules="rules"
  267. >
  268. <el-card :body-style="{
  269. padding: '20px',
  270. display: 'flex',
  271. 'flex-wrap': 'wrap',
  272. }" style="margin: 10px">
  273. <div slot="header" style="
  274. display: flex;
  275. justify-content: space-between;
  276. align-items: center;
  277. ">
  278. <h3>{{ handleIsRevise(params.status) ? '修订' : '编辑' }}</h3>
  279. <div style="text-align: right">
  280. <el-button :size="size" @click="handleCancel">取 消</el-button>
  281. <el-button :size="size" type="danger" @click="handleSava">更 新</el-button>
  282. </div>
  283. </div>
  284. <el-row style="display:flex; flex-wrap: wrap;">
  285. <el-col
  286. v-for="(column, index) in columns"
  287. :key="index"
  288. :span="column.span || 6"
  289. >
  290. <el-form-item :prop="column.key" :label="column.title" v-if="column.isShow">
  291. <el-input v-if="column.inputType === 'Input'"
  292. v-model="params[column.key]"
  293. :placeholder="column.placeholder"
  294. :clearable="column.clearable"
  295. :disabled="column.disabled"
  296. style="width: 100%"
  297. ></el-input>
  298. <dr-popover-select v-if="column.inputType === 'PopoverSelect'"
  299. v-model="params[column.key]"
  300. size="mini"
  301. :value-key="column.valueKey"
  302. :source.sync="params"
  303. :title="column.title"
  304. :type="column.referName"
  305. :multiple="column.multiple"
  306. :placeholder="column.placeholder"
  307. :data-mapping="column.dataMapping"
  308. :disabled="column.disabled"
  309. :query-params="column.queryParams"
  310. ></dr-popover-select>
  311. <el-input v-if="column.inputType === 'Textarea'"
  312. v-model="params[column.key]"
  313. type="textarea"
  314. :placeholder="column.placeholder"
  315. :clearable="column.clearable"
  316. :disabled="column.disabled"
  317. style="width: 100%"
  318. ></el-input>
  319. <el-input-number v-if="column.inputType === 'InputNumber'"
  320. v-model="params[column.key]"
  321. :max="handleIsRevise(params.status) ? params[column.key] : Infinity"
  322. :controls-position="column.controlsPosition"
  323. :placeholder="column.placeholder"
  324. :clearable="column.clearable"
  325. :disabled="column.disabled"
  326. style="width: 100%"
  327. ></el-input-number>
  328. <el-select v-if="column.inputType === 'Select'"
  329. v-model="params[column.key]"
  330. :disabled="column.disabled"
  331. :clearable="column.clearable"
  332. :placeholder="column.placeholder"
  333. style="width: 100%"
  334. @change="handleSelectChange(column.key,column.referName)"
  335. >
  336. <el-option
  337. v-for="item in dict.type[column.referName]"
  338. :key="item.value"
  339. :label="item.label"
  340. :value="item.value"
  341. ></el-option>
  342. </el-select>
  343. <el-select v-if="column.inputType === 'TagSelect'"
  344. v-model="params[column.key]"
  345. multiple
  346. clearable
  347. collapse-tags
  348. :placeholder="column.placeholder"
  349. :clearable="column.clearable"
  350. :disabled="column.disabled"
  351. style="width: 100%"
  352. >
  353. <template #prefix>
  354. <el-icon class="el-icon-view" style="cursor: pointer" @click.stop="$message.info(234)"></el-icon>
  355. </template>
  356. <el-option
  357. v-for="item in options"
  358. :key="item.value"
  359. :label="item.label"
  360. :value="item.value"
  361. ></el-option>
  362. </el-select>
  363. <el-date-picker v-if="column.inputType === 'DatePicker'"
  364. v-model="params[column.key]"
  365. :type="column.type"
  366. :placeholder="column.placeholder"
  367. :clearable="column.clearable"
  368. :disabled="column.disabled"
  369. :picker-options="column.pickerOptions"
  370. style="width: 100%"
  371. ></el-date-picker>
  372. <el-checkbox v-if="column.inputType === 'Checkbox'"
  373. v-model="params[column.key]"
  374. :disabled="column.disabled"
  375. true-label="Y"
  376. false-label="N"
  377. > </el-checkbox>
  378. <file-upload-center v-if="column.inputType === 'Upload'"
  379. v-model="params[column.key]"
  380. :file-type="column.fileType"
  381. :disabled="handleIsRevise(params.status)"
  382. ></file-upload-center>
  383. </el-form-item>
  384. </el-col>
  385. </el-row>
  386. </el-card>
  387. <el-card :body-style="{
  388. padding: '20px',
  389. display: 'flex',
  390. 'flex-wrap': 'wrap',
  391. position: 'relative',
  392. }" style="margin: 10px">
  393. <el-tabs v-model="tabName" style="width: 100%">
  394. <el-tab-pane
  395. v-for="(column, index) in tabColumns"
  396. :key="index"
  397. :label="column.title"
  398. :name="column.key"
  399. >
  400. <el-table :data="params[column.key]" style="width: 100%">
  401. <el-table-column label="序号">
  402. <template slot-scope="scope">
  403. {{ scope.$index + 1 }}
  404. </template>
  405. </el-table-column>
  406. <el-table-column
  407. v-for="(cColumn, cIndex) in column.tableColumns"
  408. :key="cIndex"
  409. :prop="cColumn.key"
  410. :label="cColumn.title"
  411. :width="cColumn.width"
  412. >
  413. <template slot-scope="scope">
  414. <el-form-item
  415. label-width="0"
  416. :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
  417. :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }"
  418. >
  419. <span v-if="!cColumn.inputType">
  420. {{ scope.row[cColumn.key] }}
  421. </span>
  422. <el-input v-if="cColumn.inputType === 'Input'"
  423. v-model="scope.row[cColumn.key]"
  424. :placeholder="cColumn.placeholder"
  425. :clearable="cColumn.clearable"
  426. :disabled="cColumn.disabled"
  427. :size="size"
  428. style="width: 100%"
  429. ></el-input>
  430. <dr-popover-select v-if="cColumn.inputType === 'PopoverSelect'"
  431. v-model="scope.row[cColumn.key]"
  432. :source.sync="scope.row"
  433. :title="cColumn.title"
  434. :value-key="cColumn.valueKey"
  435. :disabled="cColumn.disabled"
  436. :type="cColumn.referName"
  437. :multiple="cColumn.multiple"
  438. :placeholder="cColumn.placeholder"
  439. :data-mapping="cColumn.dataMapping"
  440. :query-params="cColumn.queryParams"
  441. size="mini"
  442. @change="handleReferChange"
  443. ></dr-popover-select>
  444. <el-select v-if="cColumn.inputType === 'Select'"
  445. v-model="scope.row[cColumn.key]" size="mini"
  446. :disabled="cColumn.disabled"
  447. :clearable="cColumn.clearable"
  448. :placeholder="cColumn.placeholder"
  449. style="width: 100%"
  450. @change="handleTabSelectChange(cColumn.key,scope.row)"
  451. >
  452. <el-option
  453. v-for="item in dict.type[cColumn.referName]"
  454. :key="item.value"
  455. :label="item.label"
  456. :value="item.value"
  457. ></el-option>
  458. </el-select>
  459. <el-checkbox v-if="cColumn.inputType === 'Checkbox'"
  460. v-model="scope.row[cColumn.key]"
  461. :disabled="cColumn.disabled"
  462. true-label="Y"
  463. false-label="N"
  464. @change="handleTabCheckbox(cColumn.key,scope.row)"
  465. ></el-checkbox>
  466. <el-input-number v-if="cColumn.inputType === 'InputNumber'"
  467. v-model="scope.row[cColumn.key]"
  468. :controls-position="cColumn.controlsPosition"
  469. :max="handleIsRevise(params.status) ? scope.row[cColumn.key] : Infinity"
  470. @change="handleInputChange(scope.row, cColumn.key)"
  471. :placeholder="cColumn.placeholder"
  472. :clearable="cColumn.clearable"
  473. :disabled="cColumn.disabled"
  474. :size="size"
  475. style="width: 100%"
  476. ></el-input-number>
  477. </el-form-item>
  478. </template>
  479. </el-table-column>
  480. <!-- 修订:不可删除、增行
  481. 编辑:自制:可删可增 -->
  482. <el-table-column fixed="right" label="操作" width="120">
  483. <template slot-scope="scope">
  484. <el-button
  485. v-if="params.source == '3' && !handleIsRevise(params.status)"
  486. @click.native.prevent="delTableRow(params[tabName], scope.$index)"
  487. type="text"
  488. size="small"
  489. > 删行
  490. </el-button>
  491. </template>
  492. </el-table-column>
  493. </el-table>
  494. </el-tab-pane>
  495. </el-tabs>
  496. <el-row style="position: absolute; top: 20px; right: 20px">
  497. <el-button v-if="params.source == '3' && !handleIsRevise(params.status)" :size="size"
  498. @click="addTableRow(params[tabName])">增行</el-button>
  499. </el-row>
  500. </el-card>
  501. </el-form>
  502. </el-drawer>
  503. </template>