create.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875
  1. <!--
  2. * @Author: liuzhenlin 461480418@qq.ocm
  3. * @Date: 2023-01-12 11:57:48
  4. * @LastEditors: liuzhenlin
  5. * @LastEditTime: 2023-02-21 19:28:18
  6. * @Description: file content
  7. * @FilePath: \frontend_mobile\pages\project\create.vue
  8. -->
  9. <template>
  10. <view class="home">
  11. <view class="nav">
  12. <view :style="{ paddingTop }">
  13. <view class="title" :style="[{ height }, { lineHeight: height }]">
  14. <view class="back" @click="goBack()">
  15. <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
  16. </view>
  17. <text>项目创建</text>
  18. </view>
  19. </view>
  20. </view>
  21. <view class="main">
  22. <view class="step1" v-if="step == 1">
  23. <u-form :model="addForm" :rules="rules" ref="addForm" label-width="0">
  24. <u-form-item prop="nboName" borderBottom customStyle="padding:40rpx 0 30rpx">
  25. <view class="form-label flex_l">
  26. <view class="label-tag"></view>
  27. 项目名称
  28. </view>
  29. <u-input
  30. placeholder="输入项目名称"
  31. v-model="addForm.nboName"
  32. border="none"
  33. suffixIconStyle="color:#CDCDCD"
  34. clearable
  35. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  36. </u-form-item>
  37. <u-form-item prop="custName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="$refs.cust.open()">
  38. <view class="form-label flex_l">
  39. <view class="label-tag"></view>
  40. 关联客户
  41. </view>
  42. <u-input
  43. v-model="addForm.custName"
  44. disabled
  45. disabledColor="#ffffff"
  46. placeholder="请选择关联客户"
  47. border="none"></u-input>
  48. <u-icon slot="right" name="arrow-right"></u-icon>
  49. </u-form-item>
  50. <u-form-item
  51. prop="nboSourceVal"
  52. borderBottom
  53. customStyle="padding:40rpx 0 30rpx"
  54. @click="showNboSource = true">
  55. <view class="form-label flex_l">
  56. <view class="label-tag"></view>
  57. 项目来源
  58. </view>
  59. <u-input
  60. :readonly="true"
  61. placeholder="请选择项目来源"
  62. v-model="addForm.nboSourceVal"
  63. border="none"
  64. suffixIcon="arrow-down"
  65. suffixIconStyle="color:#CDCDCD"
  66. clearable
  67. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  68. </u-form-item>
  69. <u-form-item prop="contactName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="openContactUser()">
  70. <view class="form-label flex_l">
  71. <view class="label-tag"></view>
  72. 主要联系人
  73. </view>
  74. <u-input
  75. :readonly="true"
  76. placeholder="请选择主要联系人"
  77. v-model="addForm.contactName"
  78. border="none"
  79. suffixIcon="arrow-down"
  80. suffixIconStyle="color:#CDCDCD"
  81. clearable
  82. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  83. </u-form-item>
  84. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
  85. <view class="form-label flex_l">
  86. <view class="label-tag"></view>
  87. 职位
  88. </view>
  89. <u-input
  90. placeholder="请输入职位"
  91. v-model="addForm.contactPostion"
  92. border="none"
  93. suffixIconStyle="color:#CDCDCD"
  94. clearable
  95. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  96. </u-form-item>
  97. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
  98. <view class="form-label flex_l">
  99. <view class="label-tag"></view>
  100. 联系电话
  101. </view>
  102. <u-input
  103. placeholder="请输入联系电话"
  104. v-model="addForm.contactTelephone"
  105. border="none"
  106. suffixIconStyle="color:#CDCDCD"
  107. clearable
  108. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  109. </u-form-item>
  110. <u-form-item prop="saleName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="$refs.user.open()">
  111. <view class="form-label flex_l">
  112. <view class="label-tag"></view>
  113. 销售工程师
  114. </view>
  115. <u-input
  116. :readonly="true"
  117. placeholder="请选择销售工程师"
  118. v-model="addForm.saleName"
  119. border="none"
  120. suffixIcon="arrow-down"
  121. suffixIconStyle="color:#CDCDCD"
  122. clearable
  123. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  124. </u-form-item>
  125. <u-form-item prop="salesVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showModel = true">
  126. <view class="form-label flex_l">
  127. <view class="label-tag"></view>
  128. 销售模式
  129. </view>
  130. <u-input
  131. :readonly="true"
  132. placeholder="请选择销售模式"
  133. v-model="addForm.salesVal"
  134. border="none"
  135. suffixIcon="arrow-down"
  136. suffixIconStyle="color:#CDCDCD"
  137. clearable
  138. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  139. </u-form-item>
  140. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="$refs.dealer.open()">
  141. <view class="form-label flex_l">
  142. <view class="label-tag"></view>
  143. 经销商/代理商
  144. </view>
  145. <u-input
  146. :readonly="true"
  147. placeholder="请选择经销商/代理商"
  148. v-model="addForm.distributorName"
  149. border="none"
  150. suffixIcon="arrow-down"
  151. suffixIconStyle="color:#CDCDCD"
  152. clearable
  153. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  154. </u-form-item>
  155. <u-form-item prop="productLineVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showLine = true">
  156. <view class="form-label flex_l">
  157. <view class="label-tag"></view>
  158. 产品线
  159. </view>
  160. <u-input
  161. :readonly="true"
  162. placeholder="请选择产品线"
  163. v-model="addForm.productLineVal"
  164. border="none"
  165. suffixIcon="arrow-down"
  166. suffixIconStyle="color:#CDCDCD"
  167. clearable
  168. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  169. </u-form-item>
  170. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showSource = true">
  171. <view class="form-label flex_l">
  172. <view class="label-tag"></view>
  173. 项目预算
  174. </view>
  175. <u-input
  176. type="number"
  177. placeholder="输入项目预算"
  178. v-model="addForm.nboBudget"
  179. border="none"
  180. suffixIconStyle="color:#CDCDCD"
  181. clearable
  182. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  183. <!-- <amount-input v-model="addForm.nboBudget" placeholder="请输入金额" /> -->
  184. </u-form-item>
  185. <u-form-item prop="isBigVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showLarge = true">
  186. <view class="form-label flex_l">
  187. <view class="label-tag"></view>
  188. 是否大项目
  189. </view>
  190. <u-input
  191. :readonly="true"
  192. placeholder="请选择是否大项目"
  193. v-model="addForm.isBigVal"
  194. border="none"
  195. suffixIcon="arrow-down"
  196. suffixIconStyle="color:#CDCDCD"
  197. clearable
  198. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  199. </u-form-item>
  200. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showEstTransDate = true">
  201. <view class="form-label flex_l">
  202. <view class="label-tag"></view>
  203. 预计成交时间
  204. </view>
  205. <u-input
  206. :readonly="true"
  207. placeholder="请选择预计成交时间"
  208. v-model="addForm.estTransTime"
  209. border="none"
  210. suffixIcon="arrow-down"
  211. suffixIconStyle="color:#CDCDCD"
  212. clearable
  213. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  214. </u-form-item>
  215. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showPlanDate = true">
  216. <view class="form-label flex_l">
  217. <view class="label-tag"></view>
  218. 计划采购时间
  219. </view>
  220. <u-input
  221. :readonly="true"
  222. placeholder="请选择计划采购时间"
  223. v-model="addForm.planPurchaseTime"
  224. border="none"
  225. suffixIcon="arrow-down"
  226. suffixIconStyle="color:#CDCDCD"
  227. clearable
  228. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  229. </u-form-item>
  230. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
  231. <view class="form-label flex_l">
  232. <view class="label-tag"></view>
  233. 风险情况
  234. </view>
  235. <u-input
  236. placeholder="输入风险情况"
  237. v-model="addForm.riskProfile"
  238. border="none"
  239. suffixIconStyle="color:#CDCDCD"
  240. clearable
  241. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  242. </u-form-item>
  243. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
  244. <view class="form-label flex_l">
  245. <view class="label-tag"></view>
  246. 困难点
  247. </view>
  248. <u-input
  249. placeholder="输入困难点"
  250. v-model="addForm.difficulty"
  251. border="none"
  252. suffixIconStyle="color:#CDCDCD"
  253. clearable
  254. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  255. </u-form-item>
  256. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
  257. <view class="form-label flex_l">
  258. <view class="label-tag"></view>
  259. 竞争公司
  260. </view>
  261. <u-input
  262. placeholder="输入竞争公司"
  263. v-model="addForm.competitor"
  264. border="none"
  265. suffixIconStyle="color:#CDCDCD"
  266. clearable
  267. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  268. </u-form-item>
  269. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
  270. <view class="form-label flex_l">
  271. <view class="label-tag"></view>
  272. 介入情况
  273. </view>
  274. <u-input
  275. placeholder="输入介入情况"
  276. v-model="addForm.intervention"
  277. border="none"
  278. suffixIconStyle="color:#CDCDCD"
  279. clearable
  280. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  281. </u-form-item>
  282. <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
  283. <view class="form-label flex_l">
  284. <view class="label-tag"></view>
  285. 备注
  286. </view>
  287. <u-input
  288. placeholder="输入备注"
  289. v-model="addForm.remark"
  290. border="none"
  291. clearable
  292. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  293. </u-form-item>
  294. </u-form>
  295. </view>
  296. <view class="step2" v-else-if="step == 2">
  297. <view class="step-tit">添加产品</view>
  298. <view class="add-btn" @click="$refs.product.open()">添加产品</view>
  299. <view class="product-wrap">
  300. <view class="product-item" v-for="(v, i) in productList" :key="v.id">
  301. <view class="product-label flex_l">
  302. 产品编码:
  303. <view class="product-val">{{ v.prodCode }}</view>
  304. </view>
  305. <view class="product-label flex_l">
  306. 产品名称:
  307. <view class="product-val">{{ v.prodName }}</view>
  308. </view>
  309. <view class="product-label flex_l">
  310. 产品类别:
  311. <view class="product-val">{{ v.prodClass }}</view>
  312. </view>
  313. <view class="product-label flex_l">
  314. 产品单价:
  315. <view class="product-val">
  316. <u-input v-model="productList[i].guidPrice" clearable></u-input>
  317. </view>
  318. </view>
  319. <view class="product-label flex_l">
  320. 产品数量:
  321. <view class="product-val">
  322. <u-input v-model="productList[i].prodNum" clearable></u-input>
  323. </view>
  324. </view>
  325. </view>
  326. </view>
  327. </view>
  328. <view class="step3" v-else-if="step == 3">
  329. <u-form :model="addForm" :rules="rules" ref="addForm" label-width="0">
  330. <u-form-item
  331. prop="followTime"
  332. borderBottom
  333. customStyle="padding:40rpx 0 30rpx"
  334. @click="showFollowDate = true">
  335. <view class="form-label flex_l">
  336. <view class="label-tag"></view>
  337. 跟进时间
  338. </view>
  339. <u-input
  340. :readonly="true"
  341. placeholder="请选择跟进时间"
  342. v-model="addForm.followTime"
  343. border="none"
  344. suffixIcon="arrow-down"
  345. suffixIconStyle="color:#CDCDCD"
  346. clearable
  347. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  348. </u-form-item>
  349. <u-form-item
  350. prop="followUserName"
  351. borderBottom
  352. customStyle="padding:40rpx 0 30rpx"
  353. @click="$refs.allUser.open()">
  354. <view class="form-label flex_l">
  355. <view class="label-tag"></view>
  356. 负责人员
  357. </view>
  358. <u-input
  359. :readonly="true"
  360. placeholder="请选择负责人员"
  361. v-model="addForm.followUserName"
  362. border="none"
  363. suffixIcon="arrow-down"
  364. suffixIconStyle="color:#CDCDCD"
  365. clearable
  366. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  367. </u-form-item>
  368. <u-form-item prop="followContent" borderBottom customStyle="padding:40rpx 0 30rpx">
  369. <view class="form-label flex_l">
  370. <view class="label-tag"></view>
  371. 跟进内容
  372. </view>
  373. <u-input
  374. placeholder="请输入跟进内容"
  375. v-model="addForm.followContent"
  376. border="none"
  377. clearable
  378. customStyle="padding: 0 30rpx 0 12rpx"></u-input>
  379. </u-form-item>
  380. </u-form>
  381. </view>
  382. <view class="center">
  383. <view class="handle-btn" v-if="step > 1" @click="previousStep">上一步</view>
  384. <view class="handle-btn" v-if="step < 3" @click="nextStep">下一步</view>
  385. <view class="handle-btn" v-if="step == 3" @click="handleAdd">保存</view>
  386. </view>
  387. </view>
  388. <!-- 选择下次时间 -->
  389. <u-datetime-picker
  390. v-if="showEstTransDate"
  391. :show="showEstTransDate"
  392. mode="datetime"
  393. v-model="addForm.estTransTime"
  394. @cancel="showEstTransDate = false"
  395. @confirm="pickEstTransDate"></u-datetime-picker>
  396. <!-- 计划采购时间 -->
  397. <u-datetime-picker
  398. v-if="showPlanDate"
  399. :show="showPlanDate"
  400. mode="datetime"
  401. v-model="addForm.planPurchaseTime"
  402. @cancel="showPlanDate = false"
  403. @confirm="pickPlanDate"></u-datetime-picker>
  404. <!-- 跟进时间 -->
  405. <u-datetime-picker
  406. v-if="showFollowDate"
  407. :show="showFollowDate"
  408. mode="datetime"
  409. v-model="addForm.followTime"
  410. @cancel="showFollowDate = false"
  411. @confirm="pickFollowDate"></u-datetime-picker>
  412. <!-- 选择客户 -->
  413. <select-customer ref="cust" @close="closeCust()"></select-customer>
  414. <!-- 选择客户联系人 -->
  415. <customer-contact ref="contact" @close="closeContact()"></customer-contact>
  416. <!-- 选择销售 -->
  417. <select-user ref="user" :query-params="{ roles: ['Sales', 'SalesManager'] }" @close="closeUser()"></select-user>
  418. <!-- 选择经销商 -->
  419. <select-dealer ref="dealer" @close="closeDealer()"></select-dealer>
  420. <!-- 选择用户 -->
  421. <select-user ref="allUser" @close="closeAllUser()"></select-user>
  422. <!-- 选择产品 -->
  423. <select-product ref="product" @close="closeProduct()"></select-product>
  424. <!-- 项目来源 -->
  425. <u-picker
  426. :show="showNboSource"
  427. :columns="nboSourceColumns"
  428. keyName="value"
  429. @cancel="showNboSource = false"
  430. @confirm="pickSource"></u-picker>
  431. <!-- 产品线 -->
  432. <u-picker
  433. :show="showLine"
  434. :columns="productLineColumns"
  435. keyName="value"
  436. @cancel="showLine = false"
  437. @confirm="pickLine"></u-picker>
  438. <!-- 销售模式 -->
  439. <u-picker
  440. :show="showModel"
  441. :columns="salesModelColumns"
  442. keyName="value"
  443. @cancel="showModel = false"
  444. @confirm="pickModel"></u-picker>
  445. <!-- 大项目 -->
  446. <u-picker
  447. :show="showLarge"
  448. :columns="yesOrNoColumns"
  449. keyName="value"
  450. @cancel="showLarge = false"
  451. @confirm="pickLarge"></u-picker>
  452. <u-notify ref="uNotify"></u-notify>
  453. <u-toast ref="uToast"></u-toast>
  454. </view>
  455. </template>
  456. <script>
  457. import projectApi from 'api/project'
  458. import customerApi from '../../api/customer'
  459. import to from 'await-to-js'
  460. import SelectCustomer from 'components/SelectCustomer'
  461. import CustomerContact from 'components/CustomerContact'
  462. import SelectUser from 'components/SelectUser'
  463. import SelectDealer from 'components/SelectDealer'
  464. import AmountInput from 'components/currency'
  465. import SelectProduct from 'components/SelectProduct'
  466. export default {
  467. name: 'omsIndex',
  468. components: { SelectCustomer, CustomerContact, SelectUser, SelectDealer, AmountInput, SelectProduct },
  469. data() {
  470. const validateDistributor = (rule, value, callback) => {
  471. if ('' === value && this.form.salesModel !== '10')
  472. callback(
  473. new Error(
  474. this.$refs.uNotify.show({
  475. top: this.height + this.paddingTop + 10,
  476. type: 'warning',
  477. message: '请选择经销商/代理商',
  478. duration: 1000 * 3,
  479. })
  480. )
  481. )
  482. else callback()
  483. }
  484. return {
  485. step: 1,
  486. height: '',
  487. paddingTop: '',
  488. showNboSource: false, //项目来源选择
  489. showModel: false, //销售模式选择
  490. showLine: false, //产品线选择
  491. showLarge: false, //是否是大项目选择
  492. nboSourceColumns: [], //项目来源
  493. salesModelColumns: [], //销售模式
  494. productLineColumns: [], //产品线
  495. yesOrNoColumns: [], //是否是大项目
  496. showEstTransDate: false, //选择预计成交时间
  497. showPlanDate: false, //计划采购时间
  498. showFollowDate: false, //计划采购时间
  499. addForm: {
  500. nboName: '', //项目名称
  501. custId: '', //关联客户id
  502. custName: '', //关联客户
  503. nboSource: '', //项目来源
  504. nboSourceVal: '', //项目来源文字
  505. contactId: '', //联系人id
  506. contactName: '', //联系人姓名
  507. contactPostion: '', //联系人职位
  508. contactTelephone: '', //联系人电话
  509. saleName: '', //销售工程师
  510. saleId: '', //销售工程师id
  511. salesModel: '', //销售模式(10直销20经销30代理)
  512. salesVal: '', //销售模式文字
  513. distributorId: '', //经销商/代理商ID
  514. distributorName: '', //经销商/代理商名称
  515. productLine: '', //产品线来源
  516. productLineVal: '', //产品线文字
  517. nboBudget: '', //项目预算
  518. isBig: '', //是否是大项目
  519. isBigVal: '', //是否是大项目文字
  520. estTransTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'), //预计成交时间
  521. planPurchaseTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'), //计划采购时间
  522. riskProfile: '', //风险情况
  523. difficulty: '', //困难点
  524. competitor: '', //竞争公司
  525. intervention: '', //介入情况
  526. remark: '', //备注
  527. followTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'), //跟进时间
  528. followUserId: '', //跟进用户id
  529. followUserName: '', //跟进用户id
  530. followContent: '', //跟进内容
  531. },
  532. rules: {
  533. nboName: [{ required: true, trigger: ['blur', 'change'], message: '请输入项目名称' }],
  534. custName: [{ required: true, trigger: ['blur', 'change'], message: '请选择关联客户' }],
  535. nboSourceVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择项目来源' }],
  536. contactName: [{ required: true, trigger: ['blur', 'change'], message: '请选择主要联系人' }],
  537. saleName: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售工程师' }],
  538. salesModelVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售模式' }],
  539. distributorName: [
  540. { validator: validateDistributor, trigger: ['blur', 'change'], message: '请选择经销商/代理商' },
  541. ],
  542. isBigVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择是否大项目' }],
  543. productLineVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择产品线' }],
  544. // 跟进
  545. followTime: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进时间' }],
  546. followContent: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进内容' }],
  547. },
  548. productList: [],
  549. }
  550. },
  551. onLoad(option) {
  552. console.log(option.id) //打印出上个页面传递的参数。
  553. this.addForm.custId = parseInt(option.id)
  554. },
  555. created() {
  556. const navData = uni.getMenuButtonBoundingClientRect()
  557. this.height = navData.height + 'px'
  558. this.paddingTop = navData.top + 'px'
  559. },
  560. onShow() {
  561. if (this.addForm.custId) {
  562. this.getCustomerDetail()
  563. }
  564. this.getOptions()
  565. },
  566. methods: {
  567. getOptions() {
  568. Promise.all([
  569. this.getDicts('proj_nbo_source'),
  570. this.getDicts('proj_sales_model'),
  571. this.getDicts('sys_product_line'),
  572. this.getDicts('sys_yes_no'),
  573. ]).then(([nboSource, salesModel, productLine, yesOrNo]) => {
  574. this.nboSourceColumns = [nboSource.data.values] || []
  575. this.salesModelColumns = [salesModel.data.values] || []
  576. this.productLineColumns = [productLine.data.values] || []
  577. this.yesOrNoColumns = [yesOrNo.data.values] || []
  578. })
  579. },
  580. async getCustomerDetail() {
  581. const [err, res] = await to(customerApi.getDetail({ ids: [this.addForm.custId] }))
  582. if (err) return
  583. if (res && res.code == 200) {
  584. console.log(res)
  585. this.addForm.custName = res.data.list[0].custName
  586. }
  587. },
  588. // 打开主要联系人
  589. openContactUser() {
  590. if (!this.addForm.custId) {
  591. this.$refs.uNotify.show({
  592. top: this.height + this.paddingTop + 10,
  593. type: 'warning',
  594. message: '请先选择客户',
  595. duration: 1000 * 3,
  596. })
  597. } else {
  598. this.$refs.contact.open(this.addForm.custId)
  599. }
  600. },
  601. // 关闭选择客户
  602. closeCust(user) {
  603. if (user) {
  604. console.log(user)
  605. this.addForm.custId = user.id
  606. this.addForm.custName = user.name
  607. }
  608. },
  609. // 经销商
  610. closeDealer(dealer) {
  611. if (dealer) {
  612. console.log(dealer)
  613. this.addForm.distributorId = dealer.id
  614. this.addForm.distributorName = dealer.name
  615. }
  616. },
  617. // 关闭选择客户联系人
  618. closeContact(user) {
  619. if (user) {
  620. console.log(user)
  621. this.addForm.contactId = user.id
  622. this.addForm.contactName = user.label
  623. }
  624. },
  625. // 关闭选择销售
  626. closeUser(user) {
  627. if (user) {
  628. console.log(user)
  629. this.addForm.saleId = user.id
  630. this.addForm.saleName = user.label
  631. }
  632. },
  633. // 全部用户
  634. closeAllUser(user) {
  635. if (user) {
  636. console.log(user)
  637. this.addForm.followUserId = user.id
  638. this.addForm.followUserName = user.label
  639. }
  640. },
  641. closeProduct(product) {
  642. let data = [...this.productList, ...product]
  643. this.productList = data
  644. console.log(this.productList)
  645. },
  646. // 选择来源
  647. pickSource(e) {
  648. this.addForm.nboSource = e.value[0].key
  649. this.addForm.nboSourceVal = e.value[0].value
  650. this.showNboSource = false
  651. },
  652. // 选择产品线
  653. pickLine(e) {
  654. this.addForm.productLine = e.value[0].key
  655. this.addForm.productLineVal = e.value[0].value
  656. this.showLine = false
  657. },
  658. // 选择销售类型
  659. pickModel(e) {
  660. this.addForm.salesModel = e.value[0].key
  661. this.addForm.salesVal = e.value[0].value
  662. this.showModel = false
  663. },
  664. // 是否大项目
  665. pickLarge(e) {
  666. this.addForm.isBig = e.value[0].key
  667. this.addForm.isBigVal = e.value[0].value
  668. this.showLarge = false
  669. },
  670. // 选择预计成交时间
  671. async pickEstTransDate(e) {
  672. this.showEstTransDate = false
  673. const timeFormat = uni.$u.timeFormat
  674. let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
  675. this.addForm.estTransTime = timeValue
  676. console.log(timeValue)
  677. },
  678. // 计划采购时间
  679. async pickPlanDate(e) {
  680. this.showPlanDate = false
  681. const timeFormat = uni.$u.timeFormat
  682. let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
  683. this.addForm.planPurchaseTime = timeValue
  684. console.log(timeValue)
  685. },
  686. // 跟进时间
  687. async pickFollowDate(e) {
  688. this.showFollowDate = false
  689. const timeFormat = uni.$u.timeFormat
  690. let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
  691. this.addForm.followTime = timeValue
  692. console.log(timeValue)
  693. },
  694. nextStep() {
  695. if (this.step == 1) {
  696. this.$refs.addForm
  697. .validate()
  698. .then(async () => {
  699. this.step++
  700. })
  701. .catch((err) => {
  702. console.log(err)
  703. this.$refs.uNotify.show({
  704. top: this.height + this.paddingTop + 10,
  705. type: 'warning',
  706. message: err[0].message,
  707. duration: 1000 * 3,
  708. })
  709. })
  710. } else if (this.step == 2) {
  711. if (this.productList.length == 0) {
  712. this.$refs.uNotify.show({
  713. top: this.height + this.paddingTop + 10,
  714. type: 'warning',
  715. message: '请选择产品',
  716. duration: 1000 * 3,
  717. })
  718. return
  719. }
  720. this.step++
  721. }
  722. },
  723. previousStep() {
  724. if (this.step > 1) {
  725. this.step--
  726. }
  727. },
  728. handleAdd() {
  729. this.$refs.addForm
  730. .validate()
  731. .then(async () => {
  732. console.log(this.addForm)
  733. let params = this.addForm
  734. params.nboBudget = Number(params.nboBudget)
  735. let products = this.productList.map((item) => ({
  736. ProdId: item.id,
  737. ProdName: item.prodName,
  738. ProdCode: item.prodCode,
  739. ProdClass: item.prodClass,
  740. ProdNum: Number(item.prodNum),
  741. ProdPrice: Number(item.guidPrice),
  742. }))
  743. params.products = products
  744. const [err, res] = await to(projectApi.create(params))
  745. if (err) return
  746. if (res && res.code == 200) {
  747. this.$refs.uToast.show({
  748. type: 'success',
  749. message: '创建成功',
  750. complete: () => {
  751. this.goBack()
  752. },
  753. })
  754. }
  755. })
  756. .catch((err) => {
  757. console.log(err)
  758. this.$refs.uNotify.show({
  759. top: this.height + this.paddingTop + 10,
  760. type: 'warning',
  761. message: err[0].message,
  762. duration: 1000 * 3,
  763. })
  764. })
  765. },
  766. goBack() {
  767. uni.navigateBack({
  768. //关闭当前页面,返回上一页面或多级页面。
  769. delta: 1,
  770. })
  771. },
  772. },
  773. }
  774. </script>
  775. <style>
  776. page {
  777. background: #f2f3f5;
  778. }
  779. </style>
  780. <style lang="scss" scoped>
  781. .home {
  782. padding-top: 188rpx;
  783. .nav {
  784. position: absolute;
  785. left: 0;
  786. top: 0;
  787. width: 100%;
  788. height: 284rpx;
  789. background: #3c9cff;
  790. .title {
  791. position: relative;
  792. text-align: center;
  793. font-size: 32rpx;
  794. font-weight: bold;
  795. color: #ffffff;
  796. .back {
  797. position: absolute;
  798. top: 0;
  799. bottom: 0;
  800. margin: auto;
  801. left: 70rpx;
  802. display: flex;
  803. }
  804. }
  805. }
  806. .main {
  807. position: absolute;
  808. width: 100%;
  809. height: calc(100vh - 188rpx);
  810. background: #ffffff;
  811. box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
  812. border-radius: 31rpx 31rpx 0 0;
  813. padding: 0 32rpx;
  814. overflow: auto;
  815. padding-bottom: 64rpx;
  816. .step-tit {
  817. text-align: center;
  818. line-height: 60rpx;
  819. font-size: 26rpx;
  820. color: #000;
  821. }
  822. .form-label {
  823. font-size: 32rpx;
  824. font-weight: bold;
  825. color: #323232;
  826. padding-bottom: 18rpx;
  827. .label-tag {
  828. width: 15rpx;
  829. height: 15rpx;
  830. background: rgba(62, 126, 248, 0.6);
  831. border-radius: 50%;
  832. margin-right: -4rpx;
  833. }
  834. }
  835. .handle-btn {
  836. width: 234rpx;
  837. height: 92rpx;
  838. background: #3c9cff;
  839. border-radius: 31rpx;
  840. margin: 30rpx auto 0;
  841. font-size: 32rpx;
  842. color: #ffffff;
  843. text-align: center;
  844. line-height: 92rpx;
  845. }
  846. }
  847. .step2 {
  848. .product-wrap {
  849. .product-item {
  850. margin: 30rpx 0;
  851. padding: 20rpx;
  852. border-radius: 10px;
  853. box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
  854. .product-label {
  855. padding: 20rpx 0 20rpx 20rpx;
  856. }
  857. }
  858. }
  859. .add-btn {
  860. color: #fff;
  861. width: 120rpx;
  862. height: 60rpx;
  863. padding: 0rpx 8rpx;
  864. font-size: 12rpx;
  865. background: #3c9cff;
  866. border-radius: 3px;
  867. text-align: center;
  868. line-height: 60rpx;
  869. font-size: 22rpx;
  870. }
  871. }
  872. }
  873. </style>