index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <!-- 采购订单修订—— 查看 -->
  2. <script>
  3. import {
  4. initColumns,
  5. initDicts,
  6. initRules,
  7. initParams,
  8. } from "@/utils/init/index.js";
  9. // import { Columns, TabColumns } from "../add/column";
  10. import orderApi from "@/api/business/purchase/purchase-order";
  11. import { PRINT } from "@/api/business/purchase/task";
  12. import judgeColumns from "../add/column";
  13. import VirtualScroll from 'el-table-virtual-scroll';
  14. import { VirtualColumn } from 'el-table-virtual-scroll';
  15. const { Columns, TabColumns } = judgeColumns();
  16. const NewColumns = initColumns(Columns);
  17. const NewTabColumns = TabColumns.map((element) => ({
  18. ...element,
  19. tableColumns: initColumns(element.tableColumns),
  20. }));
  21. //
  22. const SelectColumns = NewColumns.filter(column => column.inputType === 'Select')
  23. NewTabColumns.forEach(column => {
  24. SelectColumns.push(...column.tableColumns.filter(cColumn => cColumn.inputType === 'Select'))
  25. });
  26. export default {
  27. name: "SeePurchaseOrderDrawer",
  28. dicts: initDicts(SelectColumns),
  29. components: {
  30. 'virtual-scroll':VirtualScroll,VirtualColumn,
  31. FileUploadCenter: () => import('../components/FileUploadCenter/index.vue'),
  32. FilePrint:() => import('../print/index.vue'),
  33. },
  34. data() {
  35. return {
  36. visible: false,
  37. loading: false,
  38. columns: NewColumns,
  39. printData:{},
  40. rules: initRules(NewColumns),
  41. params: {
  42. ...initParams(NewColumns),
  43. puOrderItemList: [],
  44. puOrderExecuteList: [],
  45. },
  46. tabColumns: NewTabColumns,
  47. tabName: "puOrderItemList",
  48. tableData:[], //虚拟滚动加载显示的数据
  49. };
  50. },
  51. computed: {
  52. tabHeight:{
  53. get(){
  54. let length = this.params['puOrderItemList'].filter(item => item.delFlag === '0').length;
  55. return `${length ?
  56. (length > 8 ? 500 :
  57. (length *60) +100)
  58. : 120}px`
  59. },
  60. set(){}
  61. },
  62. },
  63. watch: {},
  64. methods: {
  65. setVisible(prop) {
  66. this.visible = prop;
  67. if(!this.visible){
  68. this.$refs['orderSeeForm'].clearValidate();
  69. }
  70. },
  71. //查询详情
  72. async fetchItem(prop) {
  73. try {
  74. this.loading = true;
  75. const { code, msg, data } = await orderApi.details(prop);
  76. if (code === 200) {
  77. this.params = data;
  78. }
  79. } catch (err) {
  80. //
  81. } finally {
  82. this.loading = false;
  83. }
  84. try {
  85. this.loading = true;
  86. const { data, code } = await PRINT({ id: this.params.id || 628 });
  87. if (code === 200) {
  88. this.printData = data;
  89. this.loading = false;
  90. }
  91. } catch (err) {
  92. alert(err);
  93. } finally {
  94. }
  95. },
  96. // 取 消
  97. handleCancel() {
  98. // this.params = initParams(Columns);
  99. this.params = {
  100. ...initParams(this.columns),
  101. puOrderItemList: [],
  102. puOrderExecuteList: [],
  103. }
  104. this.setVisible(false);
  105. },
  106. handleRefresh(){
  107. let {id} = this.params;
  108. this.fetchItem(id);
  109. },
  110. // 发送NC
  111. async handleSendNC(){
  112. console.log('发送NC');
  113. try {
  114. let {code} = await orderApi.toNc({ puOrderId:this.params.id});
  115. if(code == 200){
  116. this.handleRefresh();
  117. }
  118. } catch (error) {
  119. }finally{
  120. }
  121. },
  122. // 判断是否能发送NC
  123. judgeIsToNC(){
  124. let {source,status,deliveryStatus} = this.params;
  125. // 自制 & 状态为:自由态、驳回
  126. // if(source === '3' &&(status === '0' || status === '3')){
  127. if(status === '2'){
  128. // 发送NC之后展示 SUCCESS("0","成功"),SEND_IN("1","发送中"),FAILURE("2","失败");
  129. // 未发送 发送过但未成功
  130. if(!deliveryStatus || (deliveryStatus && deliveryStatus !== '0')){
  131. return true;
  132. }
  133. return false;
  134. }
  135. return false;
  136. },
  137. beforeOpen() {
  138. },
  139. },
  140. created() {
  141. },
  142. mounted() { },
  143. destroyed() { },
  144. };
  145. </script>
  146. <template>
  147. <el-drawer
  148. direction="btt"
  149. size="100%"
  150. :with-header="false"
  151. :visible.sync="visible"
  152. @open="beforeOpen"
  153. @close="$emit('close')"
  154. v-loading="loading"
  155. >
  156. <el-form
  157. size="mini"
  158. label-position="right"
  159. label-width="140px"
  160. :model="params"
  161. :rules="rules"
  162. ref="orderSeeForm"
  163. >
  164. <el-card :body-style="{
  165. padding: '20px',
  166. display: 'flex',
  167. 'flex-wrap': 'wrap',
  168. }" style="margin: 10px">
  169. <div slot="header" style="
  170. display: flex;
  171. justify-content: space-between;
  172. align-items: center;
  173. ">
  174. <h3>查看</h3>
  175. <div style="text-align: right">
  176. <!-- <FilePrint :id="params.id"></FilePrint> -->
  177. <FilePrint v-model="printData"></FilePrint>
  178. <el-button size="mini" @click="handleRefresh">刷新</el-button>
  179. <template v-if="judgeIsToNC()">
  180. <el-tooltip
  181. class="box-item"
  182. effect="dark"
  183. :key="params.deliveryStatus"
  184. :content="params.deliveryMsg"
  185. placement="bottom-end"
  186. >
  187. <el-button
  188. :key="params.deliveryStatus"
  189. :disabled="params.deliveryStatus === '1' "
  190. size="mini"
  191. type="primary"
  192. @click="handleSendNC"
  193. >{{ params.deliveryStatus === '1' ? '发送中' :
  194. (params.deliveryStatus === '2'? '重新发送NC' : '发送NC')
  195. }}</el-button>
  196. </el-tooltip>
  197. </template>
  198. <el-button size="mini" @click="handleCancel">取 消</el-button>
  199. </div>
  200. </div>
  201. <el-row style="display:flex; flex-wrap: wrap;">
  202. <el-col v-for="(column, index) in columns" :key="index" :span="column.span || 6">
  203. <el-form-item :prop="column.key" :label="column.title">
  204. <el-input v-if="column.inputType === 'Input'"
  205. v-model="params[column.key]"
  206. :placeholder="column.placeholder"
  207. :clearable="column.clearable"
  208. readonly
  209. style="width: 100%"
  210. ></el-input>
  211. <dr-popover-select v-if="column.inputType === 'PopoverSelect'"
  212. v-model="params[column.key]"
  213. disabled
  214. :value-key="column.valueKey"
  215. :source.sync="params"
  216. :title="column.title"
  217. :type="column.referName"
  218. :multiple="column.multiple"
  219. :placeholder="column.placeholder"
  220. :data-mapping="column.dataMapping"
  221. :query-params="column.queryParams"
  222. ></dr-popover-select>
  223. <el-input v-if="column.inputType === 'Textarea'"
  224. v-model="params[column.key]"
  225. type="textarea"
  226. :placeholder="column.placeholder"
  227. :clearable="column.clearable"
  228. readonly
  229. style="width: 100%"
  230. ></el-input>
  231. <el-input-number v-if="column.inputType === 'InputNumber'"
  232. v-model="params[column.key]"
  233. :controls-position="column.controlsPosition"
  234. :placeholder="column.placeholder"
  235. :clearable="column.clearable"
  236. :precision="column.precision"
  237. disabled
  238. style="width: 100%"
  239. ></el-input-number>
  240. <el-select v-if="column.inputType === 'Select'"
  241. v-model="params[column.key]"
  242. disabled
  243. size="mini"
  244. :clearable="column.clearable"
  245. :placeholder="column.placeholder"
  246. style="width: 100%">
  247. <el-option
  248. v-for="item in dict.type[column.referName]"
  249. :key="item.value"
  250. :label="item.label"
  251. :value="item.value"
  252. >
  253. </el-option>
  254. </el-select>
  255. <el-select v-if="column.inputType === 'TagSelect'"
  256. v-model="params[column.key]"
  257. multiple
  258. clearable
  259. collapse-tags
  260. :placeholder="column.placeholder"
  261. :clearable="column.clearable"
  262. disabled
  263. style="width: 100%">
  264. <template #prefix>
  265. <el-icon class="el-icon-view"
  266. style="cursor: pointer"
  267. @click.stop="$message.info(234)">
  268. </el-icon>
  269. </template>
  270. <el-option
  271. v-for="item in options"
  272. :key="item.value"
  273. :label="item.label"
  274. :value="item.value"
  275. >
  276. </el-option>
  277. </el-select>
  278. <el-date-picker v-if="column.inputType === 'DatePicker'"
  279. v-model="params[column.key]"
  280. :type="column.type"
  281. :placeholder="column.placeholder"
  282. :clearable="column.clearable"
  283. readonly
  284. :picker-options="column.pickerOptions"
  285. style="width: 100%"
  286. ></el-date-picker>
  287. <el-checkbox v-if="column.inputType === 'Checkbox'"
  288. v-model="params[column.key]"
  289. disabled
  290. true-label="Y"
  291. false-label="N"
  292. ></el-checkbox>
  293. <file-upload-center v-if="column.inputType === 'Upload'"
  294. v-model="params[column.key]"
  295. :file-type="column.fileType"
  296. :disabled="true"
  297. ></file-upload-center>
  298. </el-form-item>
  299. </el-col>
  300. </el-row>
  301. </el-card>
  302. <el-card :body-style="{
  303. padding: '20px',
  304. display: 'flex',
  305. 'flex-wrap': 'wrap',
  306. position: 'relative',
  307. }" style="margin: 10px">
  308. <el-tabs v-model="tabName" style="width: 100%">
  309. <el-tab-pane
  310. v-for="(column, index) in tabColumns"
  311. :key="index"
  312. :label="column.title"
  313. :name="column.key"
  314. >
  315. <virtual-scroll
  316. :data="params[column.key].filter(item => item.delFlag === '0')"
  317. :item-size="53"
  318. :key-prop="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'"
  319. @change="(virtualList) => tableData = virtualList"
  320. :virtualized="true"
  321. >
  322. <!-- row-key绑定列唯一值,height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板-->
  323. <el-table
  324. :data="tableData"
  325. style="width: 100%"
  326. :height="tabHeight"
  327. border
  328. >
  329. <el-table-column label="序号">
  330. <template slot-scope="scope">
  331. {{ scope.$index + 1 }}
  332. </template>
  333. </el-table-column>
  334. <el-table-column
  335. v-for="(cColumn, cIndex) in column.tableColumns"
  336. :key="cIndex"
  337. :prop="cColumn.key"
  338. :label="cColumn.title"
  339. :width="cColumn.width"
  340. >
  341. <template slot="header" slot-scope="scope">
  342. <span v-if="cColumn.require" style="color: #ff4949">*</span>
  343. <span>
  344. {{ cColumn.title }}
  345. </span>
  346. </template>
  347. <template slot-scope="scope">
  348. <el-form-item label-width="0">
  349. <span v-if="!cColumn.inputType">
  350. {{ scope.row[cColumn.key] }}
  351. </span>
  352. <el-input v-if="cColumn.inputType === 'Input'"
  353. v-model="scope.row[cColumn.key]"
  354. :placeholder="cColumn.placeholder"
  355. :clearable="cColumn.clearable"
  356. readonly
  357. size="mini"
  358. style="width: 100%"
  359. ></el-input>
  360. <!-- -->
  361. <dr-popover-select v-if="cColumn.inputType === 'PopoverSelect'"
  362. v-model="scope.row[cColumn.key]"
  363. :source.sync="scope.row"
  364. :title="cColumn.title"
  365. :value-key="cColumn.valueKey"
  366. disabled
  367. :type="cColumn.referName"
  368. :multiple="cColumn.multiple"
  369. :placeholder="cColumn.placeholder"
  370. :data-mapping="cColumn.dataMapping"
  371. :query-params="cColumn.queryParams"
  372. size="mini"
  373. ></dr-popover-select>
  374. <el-input-number v-if="cColumn.inputType === 'InputNumber'"
  375. v-model="scope.row[cColumn.key]"
  376. :precision="cColumn.precision"
  377. :controls-position="cColumn.controlsPosition"
  378. :placeholder="cColumn.placeholder"
  379. :clearable="cColumn.clearable"
  380. disabled
  381. size="mini"
  382. style="width: 100%"
  383. ></el-input-number>
  384. <el-select v-if="cColumn.inputType === 'Select'"
  385. v-model="scope.row[cColumn.key]"
  386. disabled
  387. size="mini"
  388. :clearable="cColumn.clearable"
  389. :placeholder="cColumn.placeholder"
  390. style="width: 100%">
  391. <el-option
  392. v-for="item in dict.type[cColumn.referName]"
  393. :key="item.value"
  394. :label="item.label"
  395. :value="item.value"
  396. ></el-option>
  397. </el-select>
  398. <el-checkbox v-if="cColumn.inputType === 'Checkbox'"
  399. v-model="scope.row[cColumn.key]"
  400. disabled
  401. true-label="Y"
  402. false-label="N"
  403. ></el-checkbox>
  404. </el-form-item>
  405. </template>
  406. </el-table-column>
  407. </el-table>
  408. </virtual-scroll>
  409. </el-tab-pane>
  410. </el-tabs>
  411. </el-card>
  412. </el-form>
  413. </el-drawer>
  414. </template>