add.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
  1. <template>
  2. <div class="formContent">
  3. <el-form
  4. ref="formData"
  5. :model="formData"
  6. :rules="rules"
  7. label-width="85px"
  8. class="demo-ruleForm"
  9. >
  10. <div class="formContent-item_title">客户信息</div>
  11. <el-row>
  12. <el-col :span="8">
  13. <el-form-item
  14. label="客户姓名"
  15. prop="name"
  16. class="show-required-icon-star"
  17. >
  18. <el-input
  19. v-model="formData.name"
  20. clearable
  21. placeholder="请输入客户名称"
  22. ></el-input>
  23. </el-form-item>
  24. </el-col>
  25. <el-col :span="8">
  26. <el-form-item
  27. label="客户手机"
  28. prop="telephon"
  29. >
  30. <el-input
  31. v-model="formData.telephon"
  32. clearable
  33. placeholder="请输入客户手机"
  34. ></el-input>
  35. </el-form-item>
  36. </el-col>
  37. <el-col :span="8">
  38. <el-form-item
  39. label="客户类型"
  40. prop="customerType"
  41. >
  42. <el-select
  43. v-model="formData.customerType"
  44. @change="changeInformType"
  45. clearable
  46. class="dialog-select"
  47. placeholder="请选择"
  48. >
  49. <el-option
  50. v-for="(item, index) in informTypes"
  51. :key="index"
  52. :label="item.label"
  53. :value="item.status"
  54. ></el-option>
  55. </el-select>
  56. </el-form-item>
  57. </el-col>
  58. </el-row>
  59. <el-row>
  60. <el-col :span="8">
  61. <el-form-item
  62. label="商机来源"
  63. prop="businessOpportunity"
  64. >
  65. <el-select
  66. v-model="formData.businessOpportunity"
  67. @change="changeInformType"
  68. clearable
  69. class="dialog-select"
  70. placeholder="请选择"
  71. >
  72. <el-option
  73. v-for="(item, index) in Business"
  74. :key="index"
  75. :label="item.label"
  76. :value="item.status"
  77. >{{
  78. item.label
  79. }}</el-option>
  80. </el-select>
  81. </el-form-item>
  82. </el-col>
  83. <el-col :span="8">
  84. <el-form-item
  85. label="需求类型"
  86. prop="demandType"
  87. >
  88. <el-select
  89. v-model="formData.demandType"
  90. @change="changeInformType"
  91. clearable
  92. class="dialog-select"
  93. placeholder="请选择"
  94. >
  95. <el-option
  96. v-for="(item, index) in Demand"
  97. :key="index"
  98. :label="item.label"
  99. :value="item.status"
  100. >{{
  101. item.label
  102. }}</el-option>
  103. </el-select>
  104. </el-form-item>
  105. </el-col>
  106. <el-col :span="8">
  107. <el-form-item
  108. label="意向等级"
  109. prop="intentionLevel"
  110. >
  111. <el-select
  112. v-model="formData.intentionLevel"
  113. @change="changeInformType"
  114. clearable
  115. class="dialog-select"
  116. placeholder="请选择"
  117. >
  118. <el-option
  119. v-for="(item, index) in Intention"
  120. :key="index"
  121. :label="item.label"
  122. :value="item.status"
  123. >{{
  124. item.label
  125. }}</el-option>
  126. </el-select>
  127. </el-form-item>
  128. </el-col>
  129. </el-row>
  130. <el-form-item
  131. label="备注"
  132. prop="remarks"
  133. style=""
  134. >
  135. <el-input
  136. type="textarea"
  137. :rows="4"
  138. show-word-limit
  139. v-model="formData.remarks"
  140. maxlength="300"
  141. ></el-input>
  142. </el-form-item>
  143. <div class="formContent-item_title">物业信息</div>
  144. <div
  145. v-for="(item, indexs) in timePeriod"
  146. :key="indexs"
  147. >
  148. <el-row>
  149. <el-col :span="8">
  150. <el-form-item
  151. label="意向房屋"
  152. prop="timePeriod"
  153. >
  154. <el-select
  155. v-model="item.communityid"
  156. clearable
  157. class="dialog-select"
  158. placeholder="社区"
  159. >
  160. <el-option
  161. v-for="(items, index) in community"
  162. :key="index"
  163. :label="items.name"
  164. :value="items.value"
  165. label-width="100px"
  166. @click.native="changeInformcommunity(items, indexs)"
  167. ></el-option>
  168. </el-select>
  169. </el-form-item>
  170. </el-col>
  171. <el-col :span="4">
  172. <el-select
  173. v-model="item.buildingid"
  174. clearable
  175. class="dialog-select"
  176. placeholder="楼栋"
  177. >
  178. <el-option
  179. v-for="(buildingids, index) in Building[indexs]"
  180. :key="index"
  181. :label="buildingids.name"
  182. :value="buildingids.name"
  183. label-width="100px"
  184. @click.native="changeInformbuilding(buildingids, indexs)"
  185. ></el-option>
  186. </el-select>
  187. </el-col>
  188. <el-col :span="4">
  189. <el-select
  190. v-model="item.unitid"
  191. clearable
  192. class="dialog-select"
  193. placeholder="单元"
  194. >
  195. <el-option
  196. v-for="(unitids, index) in unit[indexs]"
  197. :key="index"
  198. :label="unitids.name"
  199. :value="unitids.name"
  200. label-width="100px"
  201. @click.native="changeInformunit(unitids, indexs)"
  202. ></el-option>
  203. </el-select>
  204. </el-col>
  205. <el-col :span="4">
  206. <el-select
  207. v-model="item.roomNumberid"
  208. clearable
  209. class="dialog-select"
  210. placeholder="房间号"
  211. >
  212. <el-option
  213. v-for="(roomNumberids, index) in roomNumber[indexs]"
  214. :key="index"
  215. :label="roomNumberids.name"
  216. :value="roomNumberids.name"
  217. label-width="100px"
  218. @click.native="changeInformroomNumber(roomNumberids)"
  219. >
  220. </el-option>
  221. </el-select>
  222. </el-col>
  223. <div
  224. class="sunm"
  225. @click="addTime(indexs, 1)"
  226. style="display: inline-block; line-height: 30px"
  227. >
  228. <i class="zoniot_font zoniot-icon-tianjia1"></i>
  229. </div>
  230. <div
  231. class="sunm"
  232. @click="addTime(indexs, -1)"
  233. v-if="timePeriod.length > 1 && indexs != 0"
  234. style="display: inline-block; line-height: 30px"
  235. >
  236. <i class="zoniot_font zoniot-icon-shanjian"></i>
  237. </div>
  238. </el-row>
  239. </div>
  240. <template>
  241. <div class="formContent-item_title">招商信息</div>
  242. <el-row>
  243. <el-col :span="8">
  244. <el-form-item
  245. label="招商人员"
  246. prop="username"
  247. >
  248. <el-cascader
  249. ref="userName"
  250. v-model="formData.userId"
  251. :props="defaultProps"
  252. :options="findUser"
  253. @change="findUserToggle"
  254. ></el-cascader>
  255. </el-form-item>
  256. </el-col>
  257. </el-row>
  258. </template>
  259. </el-form>
  260. </div>
  261. </template>
  262. <script>
  263. import list from '@utils/list';
  264. export default {
  265. props: ['params'],
  266. data () {
  267. return {
  268. formData: {
  269. name: '',
  270. telephon: '',
  271. customerType: '',
  272. businessOpportunity: '',
  273. demandType: '',
  274. intentionLevel: '',
  275. remarks: '',
  276. communityid: '',
  277. buildingid: '',
  278. unitid: '',
  279. roomNumberid: '',
  280. userId: '',
  281. username: '',
  282. FnroomNumberid: []
  283. },
  284. rules: {
  285. name: [
  286. { required: true, message: '请输入名称', trigger: 'blur' },
  287. ],
  288. telephon: [
  289. { required: true, message: '请输入电话', trigger: 'blur' },
  290. { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正确的电话' }
  291. ],
  292. customerType: [
  293. { required: true, message: '请输确认类型', trigger: 'change' },
  294. ],
  295. businessOpportunity: [
  296. { required: true, message: '请确认商机来源', trigger: 'change' },
  297. ],
  298. demandType: [
  299. { required: true, message: '请确认需求类型', trigger: 'change' },
  300. ],
  301. intentionLevel: [
  302. { required: true, message: '请确认意向等级', trigger: 'change' },
  303. ],
  304. username: [
  305. { required: true, message: '请确认招商人员', trigger: 'change' },
  306. ]
  307. },
  308. timePeriod: [
  309. {
  310. communityid: '',
  311. Buildingid: '',
  312. unitid: '',
  313. roomNumberid: ''
  314. }
  315. ],
  316. informTypes: [
  317. {
  318. status: 1,
  319. label: '个人'
  320. },
  321. {
  322. status: 2,
  323. label: '企业'
  324. }
  325. ],
  326. Business: [
  327. {
  328. status: 1,
  329. label: '线上预约'
  330. },
  331. {
  332. status: 2,
  333. label: '线上电话'
  334. },
  335. {
  336. status: 3,
  337. label: '线下访问'
  338. }
  339. ],
  340. Demand: [
  341. {
  342. status: 1,
  343. label: '住宅'
  344. },
  345. {
  346. status: 2,
  347. label: '商业'
  348. }
  349. ],
  350. Intention: [
  351. {
  352. status: 1,
  353. label: '高'
  354. },
  355. {
  356. status: 2,
  357. label: '中'
  358. },
  359. {
  360. status: 3,
  361. label: '低'
  362. }
  363. ],
  364. // 社区
  365. community: [],
  366. // 楼栋
  367. Building: [],
  368. // 单元
  369. unit: [],
  370. // 房间号
  371. roomNumber: [],
  372. Merchants: [],
  373. listRes: [],
  374. room: 'false',
  375. urlencoded: [],
  376. findUser: [],
  377. defaultProps: {
  378. value: 'id', // 唯一标识
  379. label: 'label', // 标签显示
  380. children: 'children',
  381. emitPath: false
  382. }
  383. };
  384. },
  385. methods: {
  386. addTime (inx, sun) {
  387. if (sun > 0) {
  388. this.timePeriod.push({
  389. communityid: '',
  390. Buildingid: '',
  391. unitid: '',
  392. roomNumberid: ''
  393. });
  394. this.room = 'true';
  395. } else {
  396. this.timePeriod.splice(inx, 1);
  397. this.formData.FnroomNumberid.splice(inx, 1);
  398. console.log(this.formData.FnroomNumberid);
  399. this.room = 'false';
  400. }
  401. },
  402. close () {
  403. this.$emit('initPage');
  404. },
  405. submit () {
  406. console.log('this.formData.intentionLevel', this.formData.intentionLevel);
  407. this.$refs.formData.validate((valid) => {
  408. if (valid) {
  409. let url = '/sc-community/business/add';
  410. if (this.params.todo == 'edit') {
  411. url = '/sc-community/business/edit';
  412. }
  413. // let houseIds = [];
  414. this.timePeriod.map((item) => {
  415. // houseIds.push(item.roomNumberid);
  416. });
  417. let installparams = {
  418. id: this.params.data,
  419. clientName: this.formData.name,
  420. clientPhone: this.formData.telephon,
  421. clientType: this.formData.customerType,
  422. businessSource: this.formData.businessOpportunity,
  423. demandSource: this.formData.demandType,
  424. intentionGrade: this.formData.intentionLevel,
  425. remark: this.formData.remarks,
  426. houseIds: this.formData.FnroomNumberid,
  427. userId: this.formData.userId,
  428. username: this.formData.username
  429. };
  430. this.$http
  431. .post(url, installparams)
  432. .then(({ status, msg }) => {
  433. if (status == 0) {
  434. this.$message.success(msg);
  435. this.params.callback && this.params.callback();
  436. this.$emit('close');
  437. } else {
  438. this.$message.error(msg);
  439. }
  440. })
  441. .catch(() => { });
  442. }
  443. });
  444. },
  445. // 社区名称
  446. changeInformcommunity (items, index) {
  447. debugger
  448. console.log(items);
  449. this.Fncommunity(items, index);
  450. },
  451. Fncommunity (items, index) {
  452. let BuildingArr = [];
  453. if (!!this.Building[index]) {
  454. this.Building = [];
  455. this.Building[index] = items.children;
  456. } else {
  457. this.Building.push(items.children);
  458. }
  459. },
  460. // 单元
  461. changeInformbuilding (items, index) {
  462. this.Fnbuilding(items, index);
  463. },
  464. Fnbuilding (items, index) {
  465. let unitArr = [];
  466. for (let i = 0; i < items.length; i++) {
  467. unitArr.push({
  468. id: items[i].id,
  469. name: items[i].name,
  470. children: items.children
  471. });
  472. }
  473. if (items.children[0].type == 'room') {
  474. if (!!this.roomNumber[index]) {
  475. this.roomNumber = []
  476. this.roomNumber[index] = items.children;
  477. } else {
  478. this.roomNumber.push(items.children);
  479. }
  480. } else {
  481. if (!!this.unit[index]) {
  482. this.unit = [];
  483. this.unit[index] = items.children;
  484. } else {
  485. this.unit.push(items.children);
  486. }
  487. }
  488. },
  489. changeInformunit (items, index) {
  490. this.Fnunit(items, index);
  491. },
  492. Fnunit (items, index) {
  493. let roomNumberArr = [];
  494. for (let i = 0; i < items.length; i++) {
  495. roomNumberArr.push({
  496. id: items[i].id,
  497. name: items[i].name,
  498. children: items.children
  499. });
  500. }
  501. if (!!this.roomNumber[index]) {
  502. this.unit = [];
  503. this.roomNumber[index] = items.children;
  504. } else {
  505. this.roomNumber.push(items.children);
  506. }
  507. },
  508. changeInformroomNumber (items) {
  509. this.formData.FnroomNumberid.push(items.value);
  510. },
  511. findUserToggle () {
  512. this.formData.username = this.$refs.userName.getCheckedNodes()[0].label;
  513. }
  514. },
  515. created () {
  516. this.findUser = this.params.arrData;
  517. let url = '/sc-community/assets/tree/community/find?buildingType=1';
  518. this.$http.get(url).then(({ status, msg, data }) => {
  519. if (status == 0) {
  520. this.close();
  521. this.community = data;
  522. } else {
  523. this.$message.error(msg);
  524. }
  525. });
  526. if (this.params.todo == 'edit') {
  527. console.log(this.params.data);
  528. let url = `/sc-community/business/find/${this.params.data}`;
  529. this.$http.get(url).then(({ status, msg, data }) => {
  530. if (status == 0) {
  531. this.close();
  532. console.log('data', data);
  533. this.formData = {
  534. name: data.clientName + '',
  535. telephon: data.clientPhone + '',
  536. customerType: data.clientType,
  537. businessOpportunity: data.businessSource,
  538. demandType: data.demandSource,
  539. intentionLevel: data.intentionGrade,
  540. remarks: data.remark || '',
  541. userId: data.userId,
  542. username: data.username
  543. };
  544. let timePeriodObj = [];
  545. if (data.houseList.length == 0) {
  546. timePeriodObj = [
  547. {
  548. communityid: '',
  549. buildingid: '',
  550. unitid: '',
  551. roomNumberid: ''
  552. }
  553. ];
  554. } else {
  555. for (let i = 0; i < data.houseList.length; i++) {
  556. timePeriodObj.push({
  557. communityid: data.houseList[i].communityName,
  558. buildingid: data.houseList[i].buildingName,
  559. unitid: data.houseList[i].unitName,
  560. roomNumberid: data.houseList[i].roomNumber
  561. });
  562. }
  563. }
  564. this.timePeriod = timePeriodObj;
  565. } else {
  566. this.$message.error(msg);
  567. }
  568. });
  569. }
  570. }
  571. };
  572. </script>