C端小程序
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

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