C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

572 line
16 KiB

  1. <template>
  2. <div>
  3. <div class="layout-content">
  4. <el-form
  5. :inline="true"
  6. :model="ruleForm"
  7. ref="ruleForm"
  8. class="demo-form-inline"
  9. label-position="right"
  10. >
  11. <el-form-item label="商铺号" prop="name" class="fx_title">
  12. <el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input>
  13. </el-form-item>
  14. <el-form-item label="商户名称" prop="merchantName" class="fx_title">
  15. <el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input>
  16. </el-form-item>
  17. <el-form-item label="合同状态" class="fx_send">
  18. <el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method">
  19. <el-option
  20. v-for="(item,index) in options"
  21. :key="index"
  22. :value="item.value"
  23. :label="item.label"
  24. ></el-option>
  25. </el-select>
  26. </el-form-item>
  27. <el-form-item label="审批状态" class="fx_send">
  28. <el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method">
  29. <el-option
  30. v-for="(item,index) in applyStatusOptions"
  31. :key="index"
  32. :value="item.value"
  33. :label="item.name"
  34. ></el-option>
  35. </el-select>
  36. </el-form-item>
  37. <el-form-item label="计租方式" class="fx_send">
  38. <el-select v-model="ruleForm.type" placeholder="请选择" clearable class="select-method">
  39. <el-option
  40. v-for="(item,index) in types"
  41. :key="index"
  42. :value="item.value"
  43. :label="item.label"
  44. ></el-option>
  45. </el-select>
  46. </el-form-item>
  47. <el-form-item>
  48. <el-button
  49. class="hoverBtn"
  50. type="primary"
  51. icon="el-icon-search"
  52. :style="'border:0;background:'+navigationInfo.moduleColor"
  53. size="medium"
  54. @click="search"
  55. ></el-button>
  56. </el-form-item>
  57. </el-form>
  58. <el-button type="primary" class="builtBtn" @click="goSave" style="margin-right:4px;">
  59. <i>+</i>新建
  60. </el-button>
  61. <el-button type="primary" class="builtBtn" @click="goBulu" style="margin-left:4px;">
  62. <i>+</i>补录
  63. </el-button>
  64. <el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;">
  65. <i>+</i>续签
  66. </el-button>
  67. <table-list :ref="tk" :options="optionsTable"></table-list>
  68. <!-- <stop-contract :ref="st" :options="stopOptions"></stop-contract> -->
  69. <stop-contract :ref="st" :type='20' :processData="processData" :options="stopOptions"></stop-contract>
  70. </div>
  71. <div>
  72. <el-dialog
  73. title="提示"
  74. :visible.sync="dialogVisible"
  75. width="40%"
  76. :modal-append-to-body="false"
  77. :before-close="handleClose"
  78. >
  79. <span>当前有欠缴账单未结清,是否要继续终止合同?</span>
  80. <span slot="footer" class="dialog-footer">
  81. <el-button @click="dialogVisible = false">取 消</el-button>
  82. <el-button type="primary" @click="stopContract">确定</el-button>
  83. </span>
  84. </el-dialog>
  85. </div>
  86. </div>
  87. </template>
  88. <script>
  89. import TableList from "../../../core/comps/table/tableList.vue";
  90. import StopContract from "../contractutil/stopcontract.vue";
  91. import commonUtil from "../../../core/tool/commonUtil";
  92. import AjaxUtil from "../../../core/tool/ajaxService";
  93. import reportTool from "../../../core/tool/report.js";
  94. import { mapState, mapActions } from "vuex";
  95. import { CouponCacheData } from "../../../service/couponData/data.js";
  96. import { ContractData } from "../../../service/contract/data.js";
  97. import { promissionUrl } from "../../../urlconfig/promission/url.js";
  98. import { ContractUrl } from "../businessComp/UrlEnum.js";
  99. let echarts = require("echarts");
  100. export default {
  101. inject: ["reload"],
  102. extends: AjaxUtil,
  103. name: "pointrentlist",
  104. components: {
  105. TableList,
  106. StopContract
  107. },
  108. data() {
  109. return {
  110. processData:[],
  111. waitSignCount: "", //待签约
  112. endSoonCount: "", //将到期合同
  113. dialogVisible: false,
  114. rendPaidCount: "", //计租中合同
  115. shopcount: "", //空余商铺
  116. tk: "manjianTableKey",
  117. st: "stopContract",
  118. stopOptions: {
  119. contractType: "6"
  120. },
  121. buildingArr: [],
  122. floorArr: [],
  123. applyStatusOptions:ContractData.applyStatus,
  124. ruleForm: {
  125. building: "",
  126. buildingId: "",
  127. floor: "",
  128. floorId: "",
  129. shopNumber: "",
  130. merchantName: "",
  131. status: "",
  132. type: "",
  133. applyStatus:""
  134. },
  135. options: ContractData.statusOptions,
  136. types: [
  137. {
  138. value: "1",
  139. label: "按租赁面积"
  140. },
  141. {
  142. value: "2",
  143. label: "联营扣点"
  144. },
  145. {
  146. value: 3,
  147. label: "面积计租、联营取高"
  148. }
  149. ],
  150. optionsTable: {
  151. actions: [
  152. {
  153. key: "edit",
  154. val: "编辑",
  155. action: this.aCount,
  156. show: item => {
  157. return item.status == 0 ||
  158. ((item.status == 1 || item.status == 8) &&
  159. // ((item.applyStatus == 0 && item.merchantId) ||
  160. ( item.applyStatus == 0 ||
  161. item.applyStatus == 3 ||
  162. item.applyStatus == 5))
  163. ? true
  164. : false;
  165. }
  166. },
  167. {
  168. key: "edit",
  169. val: "终止",
  170. action: this.endcontract,
  171. show: item => {
  172. if (
  173. (item.status == 2 || item.status == 3 || item.status == 4) &&
  174. item.applyStatus != 1
  175. ) {
  176. return true;
  177. } else {
  178. return false;
  179. }
  180. }
  181. },
  182. {
  183. key: "edit",
  184. val: "查看",
  185. action: this.goCheck,
  186. show: item => {
  187. return true;
  188. }
  189. },
  190. {
  191. key: "download",
  192. val: "下载",
  193. action: this.goDownload,
  194. show: item => {
  195. return true;
  196. }
  197. },
  198. {
  199. key: "edit",
  200. val: "审批进度",
  201. action: this.checkCurrentStatus,
  202. show: item => {
  203. return item.applyStatus == 1 ||
  204. item.applyStatus == 2 ||
  205. item.applyStatus == 3
  206. ? true
  207. : false;
  208. }
  209. },
  210. {
  211. key: "edit",
  212. val: "绑定商户",
  213. action: this.goToEditShop,
  214. show: item => {
  215. return (item.applyStatus == 2||(item.applyStatus == 0 && !item.merchantId)) && item.propertyStatus == 1 &&item.status == 1 ? true : false;
  216. }
  217. }
  218. ],
  219. showCk: false,
  220. map: [
  221. {
  222. key: "contractNumber",
  223. val: "合同编号"
  224. },
  225. {
  226. key: "shopNumber",
  227. val: "商铺号",
  228. sortable:true
  229. },
  230. {
  231. key: "merchantName",
  232. val: "商户名称"
  233. },
  234. {
  235. key: "rentalStartDate",
  236. val: "租赁开始日期",
  237. type: "date",
  238. sortable:true
  239. },
  240. {
  241. key: "rentalEndDate",
  242. val: "租赁结束日期",
  243. type: "date",
  244. sortable:true
  245. },
  246. {
  247. key: "rentPrice",
  248. val: "租金",
  249. convert: this.divide,
  250. sortable:true
  251. },
  252. {
  253. key: "propertyPrice",
  254. val: "物业费",
  255. convert: this.divide1,
  256. sortable:true
  257. },
  258. {
  259. key: "type",
  260. val: "计租方式",
  261. convert: this.ctype
  262. },
  263. {
  264. key: "status",
  265. val: "合同状态",
  266. convert: this.cStatus
  267. },
  268. {
  269. key: "applyStatus",
  270. val: "审批状态",
  271. convert: this.cApplyStatus
  272. }
  273. ],
  274. getUrl: () => {
  275. return (
  276. "/api/wxRentPropertyContract/list?merchantName=" +
  277. this.ruleForm.merchantName +
  278. "&shopNumber=" +
  279. this.ruleForm.shopNumber +
  280. "&status=" +
  281. this.ruleForm.status +
  282. "&type=" +
  283. this.ruleForm.type +
  284. "&applyStatus=" +
  285. this.ruleForm.applyStatus+
  286. "&rentShopType=2"+
  287. "&operationType=2"
  288. );
  289. },
  290. pageOption: {
  291. sizeKey: "pageSize",
  292. indexKey: "pageNum",
  293. index: 1,
  294. size: 10
  295. },
  296. analysis: data => {
  297. return {
  298. data: data.data.list,
  299. count: data.data.total
  300. };
  301. }
  302. }
  303. };
  304. },
  305. computed: {
  306. ...mapState({
  307. navigationInfo: state => state.topNav.navigationInfo
  308. })
  309. },
  310. methods: {
  311. ...mapActions([
  312. "setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData')
  313. ]),
  314. changeBuilding: function(item) {
  315. for (let building of this.buildingArr) {
  316. if (item == building.id) {
  317. this.floorArr = building.floors;
  318. }
  319. }
  320. this.ruleForm.floor = "";
  321. //this.search()
  322. },
  323. getBuilding: function() {
  324. this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => {
  325. this.buildingArr = d.data;
  326. });
  327. },
  328. cApplyStatus(col, item) {
  329. if (item.applyStatus) {
  330. return (
  331. (item.businessType != 20 ? "签约" : "终止") +
  332. ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0]
  333. .name
  334. );
  335. } else if (item.applyStatus === 0) {
  336. return "未提交审核";
  337. }
  338. },
  339. goToEditShop(item) {
  340. this.$router.push({
  341. path: "/pointsMerchant/pointmerchantAdd?contractId=" + item.id
  342. });
  343. },
  344. checkCurrentStatus(item, row) {
  345. this.$router.push({
  346. path: "rentApprovals?id=" + item.id
  347. });
  348. },
  349. cStatus(col, item) {
  350. return CouponCacheData.rentStatus.filter(e => {
  351. return e.value == item.status.toString();
  352. })[0].name;
  353. },
  354. divide(col, item) {
  355. //aaa
  356. if (item.busDiscountRatio != undefined && item.busDiscountTime != 0 && item.busDiscountRatio !='') {
  357. return Number(item.rentPrice) / 100 +(item.busDiscountTime==1?'元/年':item.busDiscountTime==2?'元/月':'元/周期');
  358. } else {
  359. return Number(item.rentPrice) / 100 +(item.rentPriceUnit==1?'元/日':item.rentPriceUnit==2?'元/月':'元/年');
  360. }
  361. },
  362. divide1(col, item) {
  363. return item.propertyPrice?Number(item.propertyPrice) / 100 +(item.propertyPriceUnit==1?'元/日':item.propertyPriceUnit==2?'元/月':'元/年'):'暂未设置';
  364. },
  365. ctype(col, item) {
  366. if (item.type == 1) {
  367. return "按租赁面积";
  368. } else if (item.type == 2) {
  369. return "联营扣点";
  370. } else {
  371. return "面积计租、联营取高";
  372. }
  373. },
  374. aCount: function(item, row) {
  375. if (item.merchantId) {
  376. this.$router.push({
  377. path: "pointLeaseBulu?id=" + item.id
  378. });
  379. } else {
  380. this.$router.push({
  381. path: "pointLeaseEdit?id=" + item.id
  382. });
  383. }
  384. },
  385. goCheck: function(item, row) {
  386. /**
  387. contractType合同类型:1租金+物业合同,2多经合同,3物业合同,4多经物业合同
  388. businessType操作类型:1合同审批,2账单审批,3终止合同审批
  389. id为合同id
  390. */
  391. this.$router.push({
  392. path: `/pointLeaseCheck?id=${item.id}&contractType=6&businessType=1`
  393. });
  394. },
  395. handleClose(done) {
  396. this.$confirm("确认关闭?")
  397. .then(_ => {
  398. done();
  399. })
  400. .catch(_ => {});
  401. },
  402. endcontract: function(item, row) {
  403. let that = this;
  404. this.getFetch("/api/wxBillAll/oweBillCount?type=1&contractId=" + item.id)
  405. .then(d => {
  406. that.contractId = item.id;
  407. that.contractNumber = item.contractNumber;
  408. if (Number(d.data) > 0) {
  409. that.dialogVisible = true;
  410. } else {
  411. if(this.processData.length>0){
  412. this.dialogVisible = false;
  413. this.$refs[this.st].showLog(item.id, item.contractNumber);
  414. }else{
  415. this.makeSure();
  416. }
  417. }
  418. })
  419. .catch(err => {
  420. this.$message.success(err.data);
  421. });
  422. },
  423. makeSure(){
  424. this.$confirm('您确定要提前终止此合同吗?', '提示', {
  425. confirmButtonText: '确定',
  426. cancelButtonText: '取消',
  427. type: 'warning'
  428. }).then(() => {
  429. this.endProperty();
  430. }).catch(() => {
  431. this.$message({
  432. type: 'info',
  433. message: '已取消删除'
  434. });
  435. });
  436. },
  437. endProperty(){
  438. let _this=this;
  439. let param={
  440. id:this.contractId,
  441. endProperty:2
  442. }
  443. this.postFetch(ContractUrl.endContract, param)
  444. .then(d => {
  445. _this.$message.success("操作成功");
  446. _this.dialogVisible = false;
  447. _this.search();
  448. })
  449. .catch(err => {
  450. this.$message.error(err.data);
  451. });
  452. },
  453. stopContract() {
  454. let _this=this;
  455. if(this.processData.length>0){
  456. this.dialogVisible = false;
  457. this.$refs[this.st].showLog(this.contractId, this.contractNumber);
  458. }else{
  459. this.endProperty();
  460. }
  461. },
  462. goSave: function() {
  463. this.$router.push({
  464. path: "/pointLeaseEdit"
  465. });
  466. },
  467. goBulu: function() {
  468. this.$router.push({
  469. path: "/pointLeaseBulu"
  470. });
  471. },
  472. goRenew(){
  473. this.$router.push({
  474. path: "/pointLeaseEdit",
  475. query:{
  476. Renew:true
  477. }
  478. });
  479. },
  480. goDownload: function(item) {
  481. location.href = "/api/wxRentContract/exportContract?id=" + item.id;
  482. },
  483. search: function() {
  484. let tk = this.$refs[this.tk];
  485. tk.search(tk.getParams().index);
  486. },
  487. /**
  488. * 根据业务查询模板
  489. */
  490. getModelBybusiness(){
  491. this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=20`)
  492. .then(d=>{
  493. if(d.data.length>0){
  494. this.processData = JSON.parse(d.data[0].flow).lists;
  495. }
  496. })
  497. .catch(err=>{
  498. this.$message.error(err.data);
  499. })
  500. }
  501. },
  502. created(){
  503. this.setNavData(["合同管理", "多经点位", "租金+物业合同"]);
  504. },
  505. activated(){
  506. this.search()
  507. this.setNavData(["合同管理", "多经点位", "租金+物业合同"]);
  508. this.getBuilding();
  509. this.getModelBybusiness()
  510. }
  511. };
  512. </script>
  513. <!-- Add "scoped" attribute to limit CSS to this component only -->
  514. <style scoped>
  515. .layout-content {
  516. width: 100%;
  517. background: #141e29;
  518. height: auto;
  519. border-radius: 2px;
  520. min-height: 300px;
  521. padding: 0 20px 20px 20px;
  522. overflow: hidden;
  523. text-align: left;
  524. }
  525. .el-form {
  526. background: #f5f7f8;
  527. text-align: left;
  528. padding: 25px 22px 22px;
  529. margin-bottom: 20px !important;
  530. }
  531. .el-form .el-form-item {
  532. margin-bottom: 0 !important;
  533. }
  534. .tableContainer {
  535. margin-top: 20px !important;
  536. background: #fff;
  537. }
  538. .el-button {
  539. /* width:60px; */
  540. height: 40px;
  541. }
  542. .builtBtn {
  543. width: 80px;
  544. height: 32px;
  545. background: rgba(81, 169, 201, 1);
  546. border: 0 !important;
  547. line-height: 32px;
  548. text-align: center;
  549. margin: 0;
  550. padding: 0 !important;
  551. }
  552. .builtBtn:hover {
  553. background: rgba(81, 169, 201, 0.88);
  554. }
  555. .builtBtn i {
  556. margin-right: 10px;
  557. }
  558. .el-form-item .el-form-item__content,
  559. .el-form-item .el-form-item__content .el-date-editor,
  560. .el-form-item .el-form-item__content .el-date-editor .el-input__inner {
  561. width: 150px;
  562. }
  563. /* .fx_send .el-form-item__content .el-select {
  564. width: 133px !important;
  565. } */
  566. .fx_title .el-input {
  567. width: 193px;
  568. }
  569. </style>