placeOrder.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  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. },
  501. disabledDate(current) {
  502. return current && current < moment().subtract(1,'days')
  503. },
  504. filterOption(input, option) {
  505. return (
  506. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  507. );
  508. },
  509. // form-modal 自带方法
  510. onSubmit() {
  511. this.$refs.ruleForm.validate(valid => {
  512. if (valid) {
  513. console.log('submit!',valid);
  514. } else {
  515. console.log('error submit!!');
  516. return false;
  517. }
  518. });
  519. },
  520. resetForm() {
  521. this.$refs.ruleForm.resetFields();
  522. },
  523. // 分页页码改变
  524. pageChange(page, pageSize){
  525. },
  526. sysNameChange(val){
  527. console.log(val);
  528. this.form.sysPackage='';
  529. },
  530. materialAmountChange(e){
  531. console.log(e)
  532. if(this.form.materialType==1){
  533. this.form.realAmount=this.form.materialAmount;
  534. this.form.cutAmount=0
  535. }else if(this.form.materialType==2){
  536. this.form.cutAmount=this.form.materialAmount;
  537. this.form.realAmount=0
  538. }else{
  539. if(this.form.materialAmount){
  540. this.form.cutAmount=Math.ceil(this.form.materialAmount/2);
  541. this.form.realAmount=Math.floor(this.form.materialAmount/2);
  542. }
  543. }
  544. },
  545. materialAmountDayChange(e){
  546. console.log(e);
  547. if(e.target.value>this.form.materialAmount&&this.form.materialAmount){
  548. this.$message.error('日均产量不能大于素材总量')
  549. this.form.materialAmountDay=this.form.materialAmount
  550. }else if(!this.form.materialAmount){
  551. this.$message.error('请先填写素材总量')
  552. this.form.materialAmountDay=undefined
  553. }
  554. },
  555. materialTypeChange(e){
  556. console.log(e.target.value)
  557. if(e.target.value==1){
  558. this.form.realAmount=this.form.materialAmount?this.form.materialAmount:undefined;
  559. this.form.cutAmount=0
  560. }else if(e.target.value==2){
  561. this.form.cutAmount=this.form.materialAmount?this.form.materialAmount:undefined;
  562. this.form.realAmount=0
  563. }else if(e.target.value==3){
  564. if(this.form.materialAmount){
  565. this.form.cutAmount=Math.ceil(this.form.materialAmount/2);
  566. this.form.realAmount=Math.floor(this.form.materialAmount/2);
  567. }else{
  568. this.form.cutAmount=undefined;
  569. this.form.realAmount=undefined;
  570. }
  571. }
  572. },
  573. realAmountChange(val){
  574. console.log(val);
  575. if(this.form.materialAmount){
  576. if(val>this.form.materialAmount){
  577. this.$message.error('数量输入有误,不能超过素材总量哦');
  578. this.form.realAmount=this.form.materialAmount-1
  579. }
  580. this.form.cutAmount=this.form.materialAmount-this.form.realAmount
  581. }else{
  582. this.form.cutAmount=undefined;
  583. this.form.realAmount=undefined;
  584. }
  585. },
  586. cutAmountChange(val){
  587. console.log(val);
  588. if(this.form.materialAmount){
  589. if(this.form.realAmount==null){
  590. console.log(1)
  591. if(val>this.form.materialAmount){
  592. this.$message.error('数量输入有误,不能超过素材总量哦');
  593. this.form.cutAmount=this.form.materialAmount-1
  594. }
  595. this.form.realAmount=this.form.materialAmount-this.form.cutAmount
  596. }
  597. }else{
  598. this.form.cutAmount=undefined;
  599. this.form.realAmount=undefined;
  600. }
  601. },
  602. goBack() {
  603. this.$parent.currentTabComponent='operatorPlatform';
  604. this.$parent.isEdit=false;
  605. },
  606. saveHandler(){
  607. this.$refs.ruleForm.validate(valid=> {
  608. if (valid) {
  609. this.saveLoading=true;
  610. console.log(valid,this.form);
  611. let params={
  612. ...this.form,
  613. createBy:this.userInfo.id,
  614. startDate:this.form.dataValue[0].format('YYYY-MM-DD'),
  615. endDate:this.form.dataValue[1].format('YYYY-MM-DD'),
  616. };
  617. if(!this.$parent.isEdit){
  618. postAction('/platform/operator/payout',params).then(res=>{
  619. console.log(res);
  620. this.saveLoading=false;
  621. if(res.success){
  622. this.$parent.orderId=res.result.id
  623. this.$parent.isEdit=false;
  624. this.$parent.currentTabComponent='orderDetail';
  625. }else{
  626. this.$message.error(res.success)
  627. }
  628. })
  629. }else{
  630. params={
  631. id:this.currentOrderInfo.id,
  632. ...params,
  633. }
  634. postAction('/platform/operator/rePayout',params).then(res=>{
  635. console.log(res);
  636. this.saveLoading=false;
  637. if(res.success){
  638. this.$parent.isEdit=false;
  639. this.$parent.orderId=this.currentOrderInfo.id
  640. this.$parent.currentTabComponent='orderDetail';
  641. }else{
  642. this.$message.error(res.success)
  643. }
  644. })
  645. }
  646. } else {
  647. console.log('error submit!!');
  648. return false;
  649. }
  650. });
  651. },
  652. getOrderInfo(){
  653. if(this.$parent.isEdit){
  654. this.placeOrderSpinning=true;
  655. getAction('/platform/order/queryById',{
  656. id:this.$parent.orderId
  657. }).then(res=>{
  658. console.log(res)
  659. this.placeOrderSpinning=false;
  660. this.currentOrderInfo={}
  661. if(res.success){
  662. this.currentOrderInfo=res.result;
  663. this.form=res.result;
  664. this.form.dataValue=[moment(res.result.startDate),moment(res.result.endDate)]
  665. }
  666. })
  667. }
  668. },
  669. beforeUpload(file) {
  670. // ${this.form.project}
  671. // this.uploadAction= `http://api.tjyourong.com.cn/jeecg-boot/platform/file/uploadAttachment?projectId=772`
  672. this.uploadAction= `http://139.186.151.174:8804/jeecg-boot/platform/file/uploadAttachment?projectId=772`
  673. this.loadDisabled = true
  674. const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
  675. const fileName = file.name
  676. const fileStrArr = fileName.split('.')
  677. const suffix = fileStrArr[fileStrArr.length - 1]
  678. let result = fileSuffix.some((item) => {
  679. return item === suffix
  680. })
  681. if (!result) {
  682. this.$message.error('不支持该文件类型')
  683. this.loadDisabled = false
  684. return false
  685. }
  686. // if (size > 10) {
  687. // this.$message.error('文件不能大于10MB')
  688. // this.loadDisabled = false
  689. // return false
  690. // }
  691. },
  692. handleChange(info) {
  693. // console.log(info)
  694. let fileList = [...info.fileList];
  695. // 1. Limit the number of uploaded files
  696. // Only to show two recent uploaded files, and old ones will be replaced by the new
  697. fileList = fileList.slice(-2);
  698. // 2. read from response and show file link
  699. fileList = fileList.map(file => {
  700. if (file.response) {
  701. // Component will show file.url as link
  702. file.url = file.response.url;
  703. }
  704. return file;
  705. });
  706. if(fileList.length>0){
  707. this.fileList = [
  708. {
  709. ...fileList[fileList.length-1]
  710. }
  711. ]
  712. }else{
  713. this.fileList=[]
  714. }
  715. if (info.file.status !== 'uploading') {
  716. console.log(info.file, info.fileList)
  717. }
  718. if (info.file.status === 'done') {
  719. this.$message.success(`${info.file.name} 上传成功`)
  720. this.loadDisabled = false
  721. this.form.attachmentName=info.file.response.result.attachmentName || ''
  722. this.form.attachmentUrl=info.file.response.result.attachmentUrl || ''
  723. } else if (info.file.status === 'error') {
  724. this.$message.error(`${info.file.name} file upload failed.`)
  725. this.loadDisabled = false
  726. }
  727. // console.log(this.form)
  728. },
  729. },
  730. mounted(){
  731. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  732. if(userInfo){
  733. this.userInfo=JSON.parse(userInfo).value
  734. }
  735. this.roleCode=localStorage.getItem('roleCode')
  736. getAction('/platform/query/designLeader',{}).then(res=>{
  737. console.log(res);
  738. this.designLeaderList=res.result
  739. })
  740. getAction('/ctop/projectMember/participateList',{
  741. userId:this.userInfo.id,
  742. }).then(res=>{
  743. console.log(res);
  744. this.projectList=res.result
  745. })
  746. this.isEidt=this.$parent.isEdit
  747. this.getOrderInfo()
  748. },
  749. activated(){
  750. this.getOrderInfo()
  751. }
  752. }
  753. </script>