placeOrder.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800
  1. <style lang="scss" scoped>
  2. .placeOrder{
  3. ul,li{
  4. margin: 0;
  5. padding: 0;
  6. }
  7. width: 100%;
  8. .topBody{
  9. width: 100%;
  10. height: 146px;
  11. background: #FFFFFF;
  12. margin-bottom: 24px;
  13. padding: 20px;
  14. box-sizing: border-box;
  15. .breadcrumb{
  16. height: 22px;
  17. font-size: 12px;
  18. font-family: PingFangSC-Regular, PingFang SC;
  19. font-weight: 400;
  20. color: #000000;
  21. line-height: 22px;
  22. }
  23. .bottom{
  24. display: flex;
  25. position: relative;
  26. // padding: 20px;
  27. .touxiang{
  28. width: 72px;
  29. height: 72px;
  30. }
  31. .tip{
  32. .greet{
  33. width: 300px;
  34. height: 28px;
  35. font-size: 20px;
  36. font-family: PingFangSC-Medium, PingFang SC;
  37. font-weight: 500;
  38. color: rgba(0, 0, 0, 0.85);
  39. line-height: 28px;
  40. }
  41. .descPosition{
  42. height: 22px;
  43. font-size: 14px;
  44. font-family: PingFangSC-Regular, PingFang SC;
  45. font-weight: 400;
  46. color: rgba(0, 0, 0, 0.45);
  47. line-height: 22px;
  48. }
  49. }
  50. .mybtn{
  51. position: absolute;
  52. // top: 50%;
  53. // margin-left: -18px;
  54. right: 0;
  55. }
  56. }
  57. }
  58. .section{
  59. background: white;
  60. .sectionBody{
  61. // background: white;
  62. width:960px;
  63. margin: 0 auto ;
  64. margin-top: 20px;
  65. ul,
  66. li {
  67. margin: 0;
  68. padding: 0;
  69. }
  70. .moduler {
  71. background: #fff;
  72. margin-bottom: 16px;
  73. position: relative;
  74. padding: 32px 24px 48px 32px;
  75. // border-radius: 4px;
  76. // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  77. .moduler-title {
  78. display: flex;
  79. align-items: center;
  80. font-size: 22px;
  81. margin-bottom: 20px;
  82. }
  83. .row-item {
  84. display: flex;
  85. justify-content: flex-start;
  86. align-items: center;
  87. margin-bottom: 32px;
  88. }
  89. .row-item:last-of-type {
  90. margin-bottom: 0;
  91. }
  92. .row-item .hint-item {
  93. width: 24px;
  94. min-width: 24px;
  95. align-self: flex-start;
  96. line-height: 20px;
  97. height: 20px;
  98. margin-top: 9px;
  99. }
  100. .row-item .label-item {
  101. position: relative;
  102. align-items: flex-start;
  103. align-self: flex-start;
  104. line-height: 20px;
  105. height: 20px;
  106. margin-top: 10px;
  107. width: 80px;
  108. min-width: 80px;
  109. .text-item {
  110. font-size: 14px;
  111. width: 60px;
  112. }
  113. }
  114. .row-item .required-item {
  115. width: 4px;
  116. height: 4px;
  117. border-radius: 2px;
  118. background: #f45858;
  119. position: absolute;
  120. right: 10px;
  121. top: 50%;
  122. transform: translateY(-50%);
  123. }
  124. .row-item .input-item {
  125. min-width: 500px;
  126. position: relative;
  127. // height: 35px;
  128. .tip {
  129. font-size: 12px;
  130. color: tomato;
  131. }
  132. }
  133. .adName{
  134. display: flex;
  135. .nameList{
  136. width: 90%;
  137. }
  138. .item{
  139. display: inline-block;
  140. width: 30%;
  141. margin-left: 15px;
  142. margin-bottom: 10px;
  143. }
  144. }
  145. .opt {
  146. text-align: right;
  147. }
  148. }
  149. }
  150. }
  151. }
  152. </style>
  153. <style lang="less">
  154. .placeOrder{
  155. .ant-timeline-item-head{
  156. background: rgb(240,242,245);
  157. }
  158. .ant-form-item {
  159. margin-bottom: 0px;
  160. }
  161. .ant-radio-button-wrapper {
  162. min-width: 80px;
  163. text-align: center;
  164. }
  165. .muen{
  166. cursor: pointer;
  167. }
  168. .muen:hover{
  169. color: #1890ff;
  170. }
  171. }
  172. </style>
  173. <template>
  174. <div class="placeOrder">
  175. <div class="topBody">
  176. <p class="breadcrumb">
  177. <a-breadcrumb style="display:block;width:100%">
  178. <a-breadcrumb-item ><span class="muen" @click="goPlantForm()">工作台</span></a-breadcrumb-item>
  179. <a-breadcrumb-item>素材下单</a-breadcrumb-item>
  180. </a-breadcrumb>
  181. </p>
  182. <div class="bottom">
  183. <div class='tip'>
  184. <p class="greet">素材下单</p>
  185. <p class="descPosition">
  186. <span>在此下单给设计组长,下单前请与设计组长沟通日均产出素材量。</span>
  187. </p>
  188. </div>
  189. </div>
  190. </div>
  191. <div class="section">
  192. <a-spin :spinning="placeOrderSpinning">
  193. <div class="sectionBody">
  194. <a-form-model
  195. ref="ruleForm"
  196. :model="form"
  197. :rules="rules"
  198. >
  199. <div class="moduler">
  200. <!-- 名称 -->
  201. <div class="row-item" >
  202. <div class="hint-item"></div>
  203. <div class="label-item">
  204. <div class="text-item">订单标题</div>
  205. <div class="required-item"></div>
  206. </div>
  207. <div class="input-item">
  208. <a-form-model-item ref="orderTitle" prop="orderTitle">
  209. <a-input v-model="form.orderTitle" />
  210. </a-form-model-item>
  211. </div>
  212. </div>
  213. <div class="row-item" >
  214. <div class="hint-item"></div>
  215. <div class="label-item">
  216. <div class="text-item">设计组长</div>
  217. <div class="required-item"></div>
  218. </div>
  219. <div class="input-item">
  220. <a-form-model-item ref="design" prop="design">
  221. <a-select style="width: 500px" v-model="form.design" show-search option-filter-prop="children" placeholder="请选择设计组长" :filter-option="filterOption">
  222. <a-select-option v-for="item in designLeaderList" :key="item.userId" :value='item.userId'>
  223. {{item.realname}}
  224. </a-select-option>
  225. </a-select>
  226. </a-form-model-item>
  227. </div>
  228. </div>
  229. <div class="row-item" >
  230. <div class="hint-item"></div>
  231. <div class="label-item">
  232. <div class="text-item">关联项目</div>
  233. <div class="required-item"></div>
  234. </div>
  235. <div class="input-item">
  236. <a-form-model-item ref="project" prop="project">
  237. <a-select style="width: 500px" v-model="form.project" show-search option-filter-prop="children" placeholder="请选择关联项目">
  238. <a-select-option v-for="item in projectList" :key="item.projectId" :value='item.projectId'>
  239. {{item.projectName+'_'+ (item.mediaId==1?'头条':'快手')+'_'+ item.userName}}
  240. </a-select-option>
  241. </a-select>
  242. </a-form-model-item>
  243. </div>
  244. </div>
  245. <div class="row-item" >
  246. <div class="hint-item"></div>
  247. <div class="label-item">
  248. <div class="text-item">投放系统</div>
  249. <div class="required-item"></div>
  250. </div>
  251. <div class="input-item">
  252. <a-form-model-item ref="sysName" prop="sysName">
  253. <a-radio-group v-model="form.sysName" @change="sysNameChange">
  254. <a-radio-button value="3">不限</a-radio-button>
  255. <a-radio-button value="1">IOS</a-radio-button>
  256. <a-radio-button value="2">安卓</a-radio-button>
  257. </a-radio-group>
  258. </a-form-model-item>
  259. </div>
  260. </div>
  261. <div class="row-item" v-if="form.sysName=='2'">
  262. <div class="hint-item"></div>
  263. <div class="label-item">
  264. <div class="text-item">APK链接</div>
  265. <!-- <div class="required-item"></div> -->
  266. </div>
  267. <div class="input-item">
  268. <a-form-model-item ref="sysPackage" prop="sysPackage">
  269. <a-input v-model="form.sysPackage"/>
  270. </a-form-model-item>
  271. </div>
  272. </div>
  273. <div class="row-item" >
  274. <div class="hint-item"></div>
  275. <div class="label-item">
  276. <div class="text-item">订单周期</div>
  277. <div class="required-item"></div>
  278. </div>
  279. <div class="input-item">
  280. <a-form-model-item ref="dataValue" prop="dataValue">
  281. <a-range-picker v-model="form.dataValue" :disabled-date="disabledDate" />
  282. </a-form-model-item>
  283. </div>
  284. </div>
  285. <div class="row-item" >
  286. <div class="hint-item"></div>
  287. <div class="label-item">
  288. <div class="text-item">素材总量</div>
  289. <div class="required-item"></div>
  290. </div>
  291. <div class="input-item">
  292. <a-form-model-item ref="materialAmount" prop="materialAmount">
  293. <a-input-number :min="1" :max="500" @change="materialAmountChange" v-model="form.materialAmount" />
  294. </a-form-model-item>
  295. </div>
  296. </div>
  297. <div class="row-item" >
  298. <div class="hint-item"></div>
  299. <div class="label-item">
  300. <div class="text-item">日均产量</div>
  301. <!-- <div class="required-item"></div> -->
  302. </div>
  303. <div class="input-item">
  304. <a-form-model-item ref="materialAmountDay" prop="materialAmountDay">
  305. <a-input-number :min="1" :max="500" @blur="materialAmountDayChange" v-model="form.materialAmountDay" />
  306. </a-form-model-item>
  307. </div>
  308. </div>
  309. <div class="row-item" >
  310. <div class="hint-item"></div>
  311. <div class="label-item">
  312. <div class="text-item">素材类型</div>
  313. <div class="required-item"></div>
  314. </div>
  315. <div class="input-item">
  316. <a-form-model-item ref="materialType" prop="materialType">
  317. <a-radio-group v-model="form.materialType" @change="materialTypeChange">
  318. <a-radio-button :value="1">真人</a-radio-button>
  319. <a-radio-button :value="2">剪辑</a-radio-button>
  320. <a-radio-button :value="3">组合</a-radio-button>
  321. </a-radio-group>
  322. </a-form-model-item>
  323. </div>
  324. </div>
  325. <div class="row-item" v-if="form.materialType==3">
  326. <div class="hint-item"></div>
  327. <div class="label-item">
  328. <div class="text-item">真人数量</div>
  329. <div class="required-item"></div>
  330. </div>
  331. <div class="input-item">
  332. <a-form-model-item ref="realAmount" prop="realAmount">
  333. <a-input-number :min="1" :max="500" @change="realAmountChange" v-model="form.realAmount" />
  334. </a-form-model-item>
  335. </div>
  336. </div>
  337. <div class="row-item" v-if="form.materialType==3">
  338. <div class="hint-item"></div>
  339. <div class="label-item">
  340. <div class="text-item">剪辑数量</div>
  341. <div class="required-item"></div>
  342. </div>
  343. <div class="input-item">
  344. <a-form-model-item ref="cutAmount" prop="cutAmount">
  345. <a-input-number :min="1" :max="500" @change="cutAmountChange" v-model="form.cutAmount" />
  346. </a-form-model-item>
  347. </div>
  348. </div>
  349. <div class="row-item" >
  350. <div class="hint-item"></div>
  351. <div class="label-item">
  352. <div class="text-item">订单备注</div>
  353. <!-- <div class="required-item"></div> -->
  354. </div>
  355. <div class="input-item">
  356. <a-form-model-item ref="orderRemark" prop="orderRemark">
  357. <a-textarea
  358. v-model="form.orderRemark"
  359. placeholder="请输入订单备注"
  360. :auto-size="{ minRows: 7, }"
  361. :maxLength='200'
  362. />
  363. <span style="position:absolute;bottom:0px;right:10px;line-height:24px"><span style="color:#1890ff">{{form.orderRemark.length}}</span>/200</span>
  364. </a-form-model-item>
  365. </div>
  366. </div>
  367. <div class="row-item" >
  368. <div class="hint-item"></div>
  369. <div class="label-item">
  370. <div class="text-item">附件</div>
  371. <!-- <div class="required-item"></div> -->
  372. </div>
  373. <div class="input-item">
  374. <a-form-model-item ref="orderRemark" prop="orderRemark">
  375. <a :href="form.attachmentUrl" style="margin-right:20px;display:block" v-if="form.attachmentUrl">{{form.attachmentName}}</a>
  376. <a-upload
  377. name="file"
  378. :multiple="false"
  379. :action="uploadAction"
  380. :headers="tokenHeader"
  381. :file-list="fileList"
  382. :showUploadList="false"
  383. :beforeUpload="beforeUpload"
  384. @change="handleChange"
  385. style="margin-right:20px"
  386. >
  387. <a-button :disabled="loadDisabled">
  388. <a-icon type="upload" />
  389. {{loadDisabled?'上传中,请稍后':'文件上传'}}
  390. </a-button>
  391. </a-upload>
  392. </a-form-model-item>
  393. </div>
  394. </div>
  395. </div>
  396. <div class="moduler">
  397. <!-- <div class="moduler-title">计划名称</div> -->
  398. <div class="opt">
  399. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  400. <a-button type="primary" style="margin-right:15px" @click="saveHandler" :loading="saveLoading">
  401. {{isEidt?'完成':'下单'}}
  402. </a-button>
  403. </div>
  404. </div>
  405. </a-form-model>
  406. </div>
  407. </a-spin>
  408. </div>
  409. </div>
  410. </template>
  411. <script>
  412. import moment from 'moment';
  413. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  414. import Vue from 'vue'
  415. import {ACCESS_TOKEN} from "@/store/mutation-types";
  416. const fileSuffix = [
  417. 'rar',
  418. 'zip',
  419. 'arj',
  420. 'gz',
  421. 'z',
  422. '7-zip',
  423. 'tar',
  424. 'gzip',
  425. 'bz2',
  426. 'jar',
  427. 'ace',
  428. 'iso',
  429. ]
  430. export default {
  431. data() {
  432. return {
  433. placeOrderSpinning:false,
  434. fileList:[],
  435. isEidt:false,
  436. loadDisabled:false,
  437. tokenHeader: {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)},
  438. uploadAction:'',
  439. saveLoading:false,
  440. form: {
  441. orderTitle: '',
  442. design:undefined,
  443. project:undefined,
  444. sysName:'3',
  445. sysPackage:'',
  446. dataValue:[],
  447. materialAmount:undefined,
  448. materialAmountDay:undefined,
  449. materialType:1,
  450. realAmount:undefined,
  451. cutAmount:undefined,
  452. orderRemark:'',
  453. attachmentName:'',
  454. attachmentUrl:'',
  455. },
  456. rules: {
  457. orderTitle: [
  458. { required: true, message: '请填写订单标题', trigger: 'blur' },
  459. { min: 2, message: '订单标题长度不得小于2', trigger: 'blur' },
  460. ],
  461. // sysPackage: [
  462. // { required: true, message: '请输入APK链接', trigger: 'blur' },
  463. // { min: 2, message: '长度不得小于2', trigger: 'blur' },
  464. // ],
  465. dataValue: [{ required: true, message: '请选择订单周期', trigger: 'change' }],
  466. materialAmount: [{ required: true, message: '素材总数必须大于等于1', trigger: 'change' }],
  467. // materialAmountDay: [{required: true, message: '日均产量必须填写', trigger: 'change' }],
  468. project: [{required: true, message: '请选择关联项目', trigger: 'change' }],
  469. design: [{required: true, message: '请选择设计组长', trigger: 'change' }],
  470. cutAmount: [
  471. { required: true, message: '组合模式下,剪辑数量必须填写', trigger: 'blur' },
  472. // { min: 1, message: '组合模式下,剪辑数量不能小于1', trigger: 'blur' },
  473. ],
  474. realAmount: [
  475. { required: true, message: '组合模式下,真人数量必须填写', trigger: 'blur' },
  476. ],
  477. },
  478. // 操作记录
  479. designLeaderList:[],
  480. projectList:[],
  481. // 本周项目燃尽图
  482. burnDownChart:[],
  483. // 分页参数
  484. totalPage:0,
  485. currentPage:1,
  486. userInfo:{},
  487. roleCode:'',
  488. currentOrderInfo:{},
  489. }
  490. },
  491. methods: {
  492. goPlantForm(){
  493. if(this.$parent.role=='operator'){
  494. this.$parent.currentTabComponent='operatorPlatform'
  495. }else if(this.$parent.role=='designLeader'){
  496. this.$parent.currentTabComponent='designleaderPlatform'
  497. }else if(this.$parent.role=='design'){
  498. this.$parent.currentTabComponent='operatorPlatform'
  499. }
  500. this.$parent.isEdit=false;
  501. },
  502. disabledDate(current) {
  503. return current && current < moment().subtract(1,'days')
  504. },
  505. filterOption(input, option) {
  506. return (
  507. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  508. );
  509. },
  510. // form-modal 自带方法
  511. onSubmit() {
  512. this.$refs.ruleForm.validate(valid => {
  513. if (valid) {
  514. console.log('submit!',valid);
  515. } else {
  516. console.log('error submit!!');
  517. return false;
  518. }
  519. });
  520. },
  521. resetForm() {
  522. this.$refs.ruleForm.resetFields();
  523. },
  524. // 分页页码改变
  525. pageChange(page, pageSize){
  526. },
  527. sysNameChange(val){
  528. console.log(val);
  529. this.form.sysPackage='';
  530. },
  531. materialAmountChange(e){
  532. console.log(e)
  533. if(this.form.materialType==1){
  534. this.form.realAmount=this.form.materialAmount;
  535. this.form.cutAmount=0
  536. }else if(this.form.materialType==2){
  537. this.form.cutAmount=this.form.materialAmount;
  538. this.form.realAmount=0
  539. }else{
  540. if(this.form.materialAmount){
  541. this.form.cutAmount=Math.ceil(this.form.materialAmount/2);
  542. this.form.realAmount=Math.floor(this.form.materialAmount/2);
  543. }
  544. }
  545. },
  546. materialAmountDayChange(e){
  547. console.log(e);
  548. if(e.target.value>this.form.materialAmount&&this.form.materialAmount){
  549. this.$message.error('日均产量不能大于素材总量')
  550. this.form.materialAmountDay=this.form.materialAmount
  551. }else if(!this.form.materialAmount){
  552. this.$message.error('请先填写素材总量')
  553. this.form.materialAmountDay=undefined
  554. }
  555. },
  556. materialTypeChange(e){
  557. console.log(e.target.value)
  558. if(e.target.value==1){
  559. this.form.realAmount=this.form.materialAmount?this.form.materialAmount:undefined;
  560. this.form.cutAmount=0
  561. }else if(e.target.value==2){
  562. this.form.cutAmount=this.form.materialAmount?this.form.materialAmount:undefined;
  563. this.form.realAmount=0
  564. }else if(e.target.value==3){
  565. if(this.form.materialAmount){
  566. this.form.cutAmount=Math.ceil(this.form.materialAmount/2);
  567. this.form.realAmount=Math.floor(this.form.materialAmount/2);
  568. }else{
  569. this.form.cutAmount=undefined;
  570. this.form.realAmount=undefined;
  571. }
  572. }
  573. },
  574. realAmountChange(val){
  575. console.log(val);
  576. if(this.form.materialAmount){
  577. if(val>this.form.materialAmount){
  578. this.$message.error('数量输入有误,不能超过素材总量哦');
  579. this.form.realAmount=this.form.materialAmount-1
  580. }
  581. this.form.cutAmount=this.form.materialAmount-this.form.realAmount
  582. }else{
  583. this.form.cutAmount=undefined;
  584. this.form.realAmount=undefined;
  585. }
  586. },
  587. cutAmountChange(val){
  588. console.log(val);
  589. if(this.form.materialAmount){
  590. if(this.form.realAmount==null){
  591. console.log(1)
  592. if(val>this.form.materialAmount){
  593. this.$message.error('数量输入有误,不能超过素材总量哦');
  594. this.form.cutAmount=this.form.materialAmount-1
  595. }
  596. this.form.realAmount=this.form.materialAmount-this.form.cutAmount
  597. }
  598. }else{
  599. this.form.cutAmount=undefined;
  600. this.form.realAmount=undefined;
  601. }
  602. },
  603. goBack() {
  604. this.$parent.currentTabComponent='operatorPlatform';
  605. this.$parent.isEdit=false;
  606. },
  607. saveHandler(){
  608. this.$refs.ruleForm.validate(valid=> {
  609. if (valid) {
  610. this.saveLoading=true;
  611. console.log(valid,this.form);
  612. let params={
  613. ...this.form,
  614. createBy:this.userInfo.id,
  615. startDate:this.form.dataValue[0].format('YYYY-MM-DD'),
  616. endDate:this.form.dataValue[1].format('YYYY-MM-DD'),
  617. };
  618. if(!this.$parent.isEdit){
  619. postAction('/platform/operator/payout',params).then(res=>{
  620. console.log(res);
  621. this.saveLoading=false;
  622. if(res.success){
  623. this.$parent.orderId=res.result.id
  624. this.$parent.isEdit=false;
  625. this.$parent.currentTabComponent='orderDetail';
  626. }else{
  627. this.$message.error(res.success)
  628. }
  629. })
  630. }else{
  631. params={
  632. id:this.currentOrderInfo.id,
  633. ...params,
  634. }
  635. postAction('/platform/operator/rePayout',params).then(res=>{
  636. console.log(res);
  637. this.saveLoading=false;
  638. if(res.success){
  639. this.$parent.isEdit=false;
  640. this.$parent.orderId=this.currentOrderInfo.id
  641. this.$parent.currentTabComponent='orderDetail';
  642. }else{
  643. this.$message.error(res.success)
  644. }
  645. })
  646. }
  647. } else {
  648. console.log('error submit!!');
  649. return false;
  650. }
  651. });
  652. },
  653. getOrderInfo(){
  654. if(this.$parent.isEdit){
  655. this.placeOrderSpinning=true;
  656. getAction('/platform/order/queryById',{
  657. id:this.$parent.orderId
  658. }).then(res=>{
  659. console.log(res)
  660. this.placeOrderSpinning=false;
  661. this.currentOrderInfo={}
  662. if(res.success){
  663. this.currentOrderInfo=res.result;
  664. this.form=res.result;
  665. this.form.dataValue=[moment(res.result.startDate),moment(res.result.endDate)]
  666. }
  667. })
  668. }
  669. },
  670. beforeUpload(file) {
  671. // ${this.form.project}
  672. this.uploadAction= `http://jiaoyangapi.shyouteng.com.cn/jeecg-boot/platform/file/uploadAttachment?projectId=772`
  673. // this.uploadAction= `http://139.186.151.174:8804/jeecg-boot/platform/file/uploadAttachment?projectId=772`
  674. this.loadDisabled = true
  675. const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
  676. const fileName = file.name
  677. const fileStrArr = fileName.split('.')
  678. const suffix = fileStrArr[fileStrArr.length - 1]
  679. let result = fileSuffix.some((item) => {
  680. return item === suffix
  681. })
  682. if (!result) {
  683. this.$message.error('不支持该文件类型')
  684. this.loadDisabled = false
  685. return false
  686. }
  687. // if (size > 10) {
  688. // this.$message.error('文件不能大于10MB')
  689. // this.loadDisabled = false
  690. // return false
  691. // }
  692. },
  693. handleChange(info) {
  694. // console.log(info)
  695. let fileList = [...info.fileList];
  696. // 1. Limit the number of uploaded files
  697. // Only to show two recent uploaded files, and old ones will be replaced by the new
  698. fileList = fileList.slice(-2);
  699. // 2. read from response and show file link
  700. fileList = fileList.map(file => {
  701. if (file.response) {
  702. // Component will show file.url as link
  703. file.url = file.response.url;
  704. }
  705. return file;
  706. });
  707. if(fileList.length>0){
  708. this.fileList = [
  709. {
  710. ...fileList[fileList.length-1]
  711. }
  712. ]
  713. }else{
  714. this.fileList=[]
  715. }
  716. if (info.file.status !== 'uploading') {
  717. console.log(info.file, info.fileList)
  718. }
  719. if (info.file.status === 'done') {
  720. this.$message.success(`${info.file.name} 上传成功`)
  721. this.loadDisabled = false
  722. this.form.attachmentName=info.file.response.result.attachmentName || ''
  723. this.form.attachmentUrl=info.file.response.result.attachmentUrl || ''
  724. } else if (info.file.status === 'error') {
  725. this.$message.error(`${info.file.name} file upload failed.`)
  726. this.loadDisabled = false
  727. }
  728. // console.log(this.form)
  729. },
  730. },
  731. mounted(){
  732. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  733. if(userInfo){
  734. this.userInfo=JSON.parse(userInfo).value
  735. }
  736. this.roleCode=localStorage.getItem('roleCode')
  737. getAction('/platform/query/designLeader',{}).then(res=>{
  738. console.log(res);
  739. this.designLeaderList=res.result
  740. })
  741. getAction('/ctop/projectMember/participateList',{
  742. userId:this.userInfo.id,
  743. }).then(res=>{
  744. console.log(res);
  745. this.projectList=res.result
  746. })
  747. this.isEidt=this.$parent.isEdit
  748. this.getOrderInfo()
  749. },
  750. activated(){
  751. this.getOrderInfo()
  752. }
  753. }
  754. </script>