index.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <div class="main">
  3. <div class="search">
  4. <el-input placeholder="请输入合同编号/名称" class="search-input" clearable v-model="mixins_query.contractName"></el-input>
  5. <el-select placeholder="合同状态" v-model="mixins_query.adStatus" clearable>
  6. <el-option v-for="(item, index) in advertisingStatus" :key="index" :label="item.label" :value="item.status">{{
  7. item.label
  8. }}</el-option>
  9. </el-select>
  10. <el-date-picker
  11. v-model="times"
  12. value-format="yyyyMMdd"
  13. type="daterange"
  14. range-separator="至"
  15. start-placeholder="开始日期"
  16. end-placeholder="结束日期"
  17. @change="effectiveDateToggle"
  18. ></el-date-picker>
  19. <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
  20. <div class="search-icon">
  21. <el-tooltip class="item" effect="light" placement="bottom" content="新增">
  22. <i class="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
  23. </el-tooltip>
  24. <!-- <el-tooltip class="item" effect="light" placement="bottom" content="导出">
  25. <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
  26. </el-tooltip> -->
  27. </div>
  28. </div>
  29. <div class="roles-wrap">
  30. <zz-table
  31. :cols="cols"
  32. :settings="{ showIndex: true, stripe: true }"
  33. :loading="mixins_onQuery"
  34. :data="mixins_list"
  35. :pageset="mixins_pageset"
  36. @page-change="pageChange"
  37. @selection-change="selectionChange"
  38. >
  39. <template slot-scope="scope" slot="opt">
  40. <div class="opt">
  41. <!-- <el-tooltip effect="light" placement="bottom" content="编辑">
  42. <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.row)"></i>
  43. </el-tooltip> -->
  44. <el-tooltip effect="light" placement="bottom" content="详情">
  45. <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetail(scope.row)"></i>
  46. </el-tooltip>
  47. <el-tooltip effect="light" placement="bottom" content="续期">
  48. <i class="zoniot_font zoniot-icon-xuqi" @click="renewal(scope.row)"></i>
  49. </el-tooltip>
  50. <el-tooltip effect="light" placement="bottom" content="退租">
  51. <i
  52. class="zoniot_font zoniot-icon-tuifang redText"
  53. v-if="scope.row.contractStatus !== 2"
  54. @click="rentWithdrawal(scope.row)"
  55. ></i>
  56. <i class="zoniot_font zoniot-icon-tuifang ashText" v-else></i>
  57. </el-tooltip>
  58. </div>
  59. </template>
  60. </zz-table>
  61. </div>
  62. </div>
  63. </template>
  64. <script>
  65. import list from '@utils/list.js';
  66. export default {
  67. mixins: [list],
  68. data() {
  69. return {
  70. times: [],
  71. advertisingStatus: [
  72. {
  73. status: 0,
  74. label: '已签约'
  75. },
  76. {
  77. status: 1,
  78. label: '生效中'
  79. },
  80. {
  81. status: 2,
  82. label: '到期'
  83. }
  84. ],
  85. cols: [
  86. {
  87. label: '合同编号',
  88. prop: 'contractNo'
  89. },
  90. {
  91. label: '客户名称',
  92. prop: 'customerName'
  93. },
  94. {
  95. label: '客户类型',
  96. prop: 'customerType',
  97. format(val) {
  98. if (val == 1) {
  99. return '企业';
  100. } else if (val == 2) {
  101. return '个人';
  102. }
  103. },
  104. width: '100'
  105. },
  106. {
  107. label: '合同类型',
  108. prop: 'contractType'
  109. },
  110. {
  111. label: '房间',
  112. prop: 'houseName'
  113. },
  114. {
  115. label: '合同状态',
  116. prop: 'contractStatus',
  117. format(val) {
  118. if (val == 0) {
  119. return '已签约';
  120. } else if (val == 1) {
  121. return '生效中';
  122. } else if (val == 2) {
  123. return '到期';
  124. }
  125. }
  126. },
  127. {
  128. label: '开始时间',
  129. prop: 'startTime'
  130. },
  131. {
  132. label: '结束时间',
  133. prop: 'endTime'
  134. },
  135. {
  136. label: '合同到期天数',
  137. prop: 'endTime'
  138. },
  139. {
  140. label: '操作',
  141. slot: 'opt',
  142. width: '180'
  143. }
  144. ],
  145. mixins_post: 'post',
  146. CommunityTree: []
  147. };
  148. },
  149. created() {
  150. this.getorgTree();
  151. this.getCommunityArr();
  152. this.mixins_dataUrl = '/sc-community/contract/page';
  153. this.mixins_search();
  154. },
  155. mounted() {},
  156. methods: {
  157. getorgTree() {
  158. this.$http
  159. .get('/sc-community/assets/community/list')
  160. .then((data) => {
  161. this.communityArr = data.data;
  162. this.$store.commit('setAreaSelect', data.data);
  163. })
  164. .catch(function () {});
  165. },
  166. getCommunityArr() {
  167. this.$http
  168. .get('/sc-community/assets/tree/community/find')
  169. .then(({ data }) => {
  170. this.CommunityTree = data;
  171. })
  172. .catch(function () {});
  173. },
  174. effectiveDateToggle(va) {
  175. let arr = va;
  176. if (!arr) {
  177. arr = ['', ''];
  178. }
  179. this.mixins_query.startTime = arr[0];
  180. this.mixins_query.endTime = arr[1];
  181. },
  182. addOrEdit(todo, data = {}) {
  183. new Promise((resolve) => {
  184. let title = '添加合同';
  185. if (todo !== 'add') {
  186. title = '修改合同';
  187. }
  188. this.$store.dispatch('addPopup', {
  189. url: '/businessManagement/contractManagement/stepPage/add.vue',
  190. width: '850px',
  191. height: '600px',
  192. props: {
  193. data,
  194. todo,
  195. communityArr: this.communityArr,
  196. communityTree: this.CommunityTree,
  197. callback: resolve
  198. },
  199. title: title,
  200. showIndex: 0,
  201. previousStepButton: false,
  202. showConfirmButton: true,
  203. nextStepButton: true
  204. });
  205. }).then(() => {
  206. this.mixins_search();
  207. });
  208. },
  209. exportExcel() {
  210. this.__exportExcel('/sc-community/enterprise/excel', this.mixins_query);
  211. },
  212. lookDetail(row) {
  213. new Promise((resolve) => {
  214. this.$store.dispatch('addPopup', {
  215. url: '/businessManagement/contractManagement/stepPage/details.vue',
  216. width: '850px',
  217. height: '600px',
  218. props: {
  219. row,
  220. callback: resolve
  221. },
  222. title: '合同详情',
  223. hideStar: true,
  224. showCancelButton: true,
  225. showConfirmButton: true
  226. });
  227. }).then(() => {
  228. this.mixins_search();
  229. });
  230. },
  231. rentWithdrawal(row) {
  232. new Promise((resolve) => {
  233. this.$store.dispatch('addPopup', {
  234. url: '/businessManagement/contractManagement/stepPage/rentWithdrawal.vue',
  235. width: '850px',
  236. height: '600px',
  237. props: {
  238. row,
  239. callback: resolve
  240. },
  241. title: '退租',
  242. hideStar: true
  243. });
  244. }).then(() => {
  245. this.mixins_search();
  246. });
  247. },
  248. renewal(row) {
  249. new Promise((resolve) => {
  250. this.$store.dispatch('addPopup', {
  251. url: '/businessManagement/contractManagement/stepPage/renewal.vue',
  252. width: '850px',
  253. height: '600px',
  254. props: {
  255. row,
  256. callback: resolve
  257. },
  258. title: '续租'
  259. });
  260. }).then(() => {
  261. this.mixins_search();
  262. });
  263. }
  264. }
  265. };
  266. </script>