C端小程序
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

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