phone.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <template>
  2. <div class="phone">
  3. <div class="search">
  4. <el-input placeholder="请输入管理处名称/电话" maxlength="11" class="search-input" clearable v-model.trim="location"></el-input>
  5. <el-select placeholder="请选择所属社区" v-model="mixins_query.communityId" clearable>
  6. <el-option v-for="(item, index) in communityListCreate" :key="index" :label="item.label" :value="item.id"></el-option>
  7. </el-select>
  8. <el-button type="primary" placeholder="状态" class="search-btn" @click="searchInfo" icon="el-icon-search" v-preventReClick
  9. >查询
  10. </el-button>
  11. <div class="add">
  12. <img src="../../assets/img/btn_tianjia@2x.png" alt="" @click="add" />
  13. </div>
  14. </div>
  15. <div class="content">
  16. <div class="roles-wrap">
  17. <zz-table
  18. :cols="cols"
  19. :settings="{ showNumber: true, stripe: true, showNumberWidth: '140' }"
  20. :data="mixins_list"
  21. :pageset="mixins_pageset"
  22. @page-change="pageChange"
  23. @selection-change="selectionChange"
  24. :loading="mixins_onQuery"
  25. >
  26. <template slot-scope="scope" slot="times">
  27. <div>
  28. {{ scope.row.time | filterTime }}
  29. </div>
  30. </template>
  31. <template slot-scope="scope" slot="opt">
  32. <div class="opt">
  33. <img src="../../assets/img/icon_bianji@2x.png" alt="" @click="clickEdit('endit', scope.row)" />
  34. <img src="../../assets/img/icon_shanchu@2x.png" alt="" @click="clickEdit('del', scope.row)" />
  35. </div>
  36. </template>
  37. </zz-table>
  38. </div>
  39. <!-- 详情弹框 -->
  40. <div class="dialog-info">
  41. <el-dialog :visible.sync="centerDialogVisible" width="524px" :close-on-click-modal="false">
  42. <div class="dialog">
  43. <div class="dialog-header">
  44. <i class="el-dialog__close el-icon el-icon-close" @click="dialogButton('clear')"></i>
  45. <div class="dialogTitle">
  46. {{ dialogTitle }}物业电话(
  47. <span style="color: red"> *</span>
  48. 为必填项)
  49. </div>
  50. </div>
  51. <div class="dialog-content">
  52. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  53. <el-form-item label="所属社区" prop="communityList">
  54. <el-select placeholder="请选择所属社区" v-model="ruleForm.communityList" class="dialog-select">
  55. <el-option
  56. v-for="(item, index) in communityListCreate"
  57. :key="index"
  58. :label="item.label"
  59. :value="item.id"
  60. ></el-option>
  61. </el-select>
  62. </el-form-item>
  63. <el-form-item label="管理处名称" prop="newManagementName">
  64. <el-input v-model="ruleForm.newManagementName" placeholder="不能超过20字" maxlength="20"></el-input>
  65. </el-form-item>
  66. <el-form-item label="电话号码" prop="newPhone">
  67. <el-input
  68. @blur="ruleForm.newPhone = $event.target.value.trim()"
  69. v-model.trim="ruleForm.newPhone"
  70. placeholder="例如:010-26888888,13888888888"
  71. maxlength="13"
  72. ></el-input>
  73. </el-form-item>
  74. <el-form-item class="dialog-footer">
  75. <span>
  76. <el-button type="primary" @click="dialogButton('clear')" plain>取消</el-button>
  77. <el-button type="primary" @click="dialogButton('addSave')">保存</el-button>
  78. </span>
  79. </el-form-item>
  80. </el-form>
  81. </div>
  82. </div>
  83. </el-dialog>
  84. </div>
  85. <!-- 删除弹框 -->
  86. <div class="dialog-delete">
  87. <el-dialog title="确认提示" :visible.sync="dialogVisibleDelete" width="30%">
  88. <div class="dialog-deletecontent">
  89. <img src="../../assets/img/icon-warning.png" alt="" class="dialog-icon" />
  90. <div>
  91. <p>确认删除</p>
  92. <p>
  93. 是否删除对应的记录 &nbsp;---&nbsp;<span class="delete-name">{{ deleteName }}</span>
  94. </p>
  95. </div>
  96. </div>
  97. <span slot="footer" class="dialog-footer">
  98. <el-button @click="dialogVisibleDelete = false" type="primary" plain>取 消</el-button>
  99. <el-button type="primary" @click="deletes">确 定</el-button>
  100. </span>
  101. </el-dialog>
  102. </div>
  103. </div>
  104. </div>
  105. </template>
  106. <script>
  107. import list from '@utils/list.js';
  108. export default {
  109. mixins: [list],
  110. data() {
  111. let _this = this;
  112. return {
  113. dialogTitle: '',
  114. // 删除弹框信息
  115. deleteName: '',
  116. dialogVisibleDelete: false,
  117. // 添加弹框信息
  118. ruleForm: {
  119. communityList: '',
  120. newManagementName: '',
  121. newPhone: ''
  122. },
  123. rules: {
  124. communityList: [{ required: true, message: '请选择社区', trigger: 'change' }],
  125. newManagementName: [
  126. { required: true, message: '请输入管理处名称', trigger: 'blur' },
  127. { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  128. ],
  129. newPhone: [this.$valid.patternPhoneNumber()]
  130. },
  131. // 输入地址
  132. location: '',
  133. //社区列表
  134. communityListCreate: [],
  135. cols: [
  136. {
  137. label: '所属社区',
  138. prop: 'communityId',
  139. format(val) {
  140. let va = '';
  141. _this.$store.getters['getAreaSelect'].forEach((element) => {
  142. if (element.id === val) {
  143. va = element.communityName;
  144. }
  145. });
  146. return va;
  147. }
  148. },
  149. {
  150. label: '管理处名称',
  151. prop: 'name'
  152. },
  153. {
  154. label: '电话',
  155. prop: 'telephone'
  156. },
  157. {
  158. label: '操作',
  159. prop: 'id',
  160. slot: 'opt'
  161. }
  162. ],
  163. mixins_post: 'post',
  164. // 显隐弹框
  165. centerDialogVisible: false,
  166. // 编辑按钮
  167. enditShow: false,
  168. // 删除的id
  169. rowId: ''
  170. };
  171. },
  172. created() {
  173. this.getCommunityList();
  174. this.mixins_dataUrl = '/sc-community-web/property/telephone/page';
  175. this.mixins_query = {};
  176. this.mixins_search();
  177. },
  178. mounted() {},
  179. methods: {
  180. //**添加按钮 */
  181. add() {
  182. this.dialogTitle = '添加';
  183. this.centerDialogVisible = true;
  184. this.enditShow = false;
  185. this.$refs['ruleForm'].resetFields();
  186. this.ruleForm.newPhone = '';
  187. this.ruleForm.communityList = [];
  188. this.ruleForm.newManagementName = '';
  189. },
  190. /**查询按钮*/
  191. searchInfo() {
  192. this.mixins_query.name = this.location;
  193. this.mixins_search();
  194. },
  195. /**
  196. * 弹框按钮
  197. * @param type 类型
  198. * @return {void}
  199. * */
  200. dialogButton(type) {
  201. if (type == 'addSave') {
  202. this.$refs['ruleForm'].validate((valid) => {
  203. if (valid) {
  204. // if (this.ruleForm.newManagementName && this.ruleForm.newManagementName.indexOf('中心') != -1) {
  205. // return this.$message.warning('不能包含中心');
  206. // }
  207. let newManagementName = this.ruleForm.newManagementName.trim();
  208. var communityId = this.ruleForm.communityList;
  209. if (this.ruleForm.communityList !== NaN) {
  210. this.communityListCreate.forEach((item) => {
  211. if (item.label == this.ruleForm.communityList) {
  212. return (communityId = item.id);
  213. }
  214. });
  215. }
  216. let query = {
  217. communityId: communityId,
  218. name: newManagementName,
  219. telephone: this.ruleForm.newPhone,
  220. id: this.ruleForm.id
  221. };
  222. console.log('query', query);
  223. if (!this.enditShow) {
  224. this.$http.post('/sc-community-web/property/telephone/add', query).then((res) => {
  225. this.message(res.status, res.msg);
  226. });
  227. console.log('新增保存', this.ruleForm);
  228. }
  229. // this.centerDialogVisible=false;
  230. else {
  231. this.$http.post('/sc-community-web/property/telephone/update', query).then((res) => {
  232. this.message(res.status, res.msg);
  233. });
  234. }
  235. } else {
  236. return false;
  237. }
  238. });
  239. } else {
  240. this.centerDialogVisible = false;
  241. }
  242. },
  243. // 删除按钮
  244. deletes() {
  245. let query = {
  246. id: this.rowId
  247. };
  248. this.$http.get('/sc-community-web/property/telephone/delete', query).then((res) => {
  249. this.message(res.status, res.msg);
  250. });
  251. },
  252. // 提示消息
  253. message(status, text) {
  254. if (status === 0) {
  255. this.$message({
  256. message: `${text}`,
  257. type: 'success'
  258. });
  259. this.centerDialogVisible = false;
  260. this.dialogVisibleDelete = false;
  261. this.mixins_search();
  262. } else {
  263. return this.$message({
  264. message: `${text}`,
  265. type: 'error'
  266. });
  267. }
  268. },
  269. /** 获取社区列表*/
  270. getCommunityList() {
  271. this.communityListCreate = [];
  272. let onOption = '';
  273. this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
  274. console.log('获取社区列表', res);
  275. this.$store.commit('setAreaSelect', res.data);
  276. res.data.map((item) => {
  277. onOption = {
  278. label: item.communityName,
  279. id: item.id
  280. };
  281. this.communityListCreate.push(onOption);
  282. });
  283. // console.log('this.communityListCreate', this.communityListCreate);
  284. });
  285. },
  286. /** 查看处理详情*/
  287. clickEdit(type, row) {
  288. this.dialogTitle = '编辑';
  289. console.log('查看处理详情', row);
  290. let communityId = row.communityId;
  291. var that = this;
  292. this.$store.getters['getAreaSelect'].forEach((element) => {
  293. if (element.id === communityId) {
  294. that.ruleForm.communityList = element.communityName;
  295. }
  296. });
  297. this.ruleForm.newManagementName = row.name;
  298. this.ruleForm.newPhone = row.telephone;
  299. this.ruleForm.id = row.id;
  300. this.rowId = row.id;
  301. if (type == 'endit') {
  302. this.centerDialogVisible = true;
  303. this.enditShow = true;
  304. } else {
  305. // this.deleteName = row.telephone;
  306. // this.dialogVisibleDelete = true;
  307. const { communityName, buildingName, unitName, roomNumber } = row;
  308. // let title = `是否确定删除对应的记录${communityName}${buildingName}${unitName}${telephone}”`;
  309. let title = `是否确定删除对应的记录`;
  310. this.$msgBox(title)
  311. .then(() => {
  312. let query = {
  313. id: this.rowId
  314. };
  315. this.$http
  316. .get('/sc-community-web/property/telephone/delete', query)
  317. .then(({ status, msg }) => {
  318. if (0 === status) {
  319. this.$message.success(msg);
  320. this.mixins_search();
  321. } else {
  322. this.$message.error(msg);
  323. }
  324. })
  325. .catch(() => {});
  326. })
  327. .catch(() => {});
  328. }
  329. }
  330. }
  331. };
  332. </script>
  333. <style lang="scss" scoped>
  334. @import './style.scss';
  335. </style>