13176889840
4 years ago
37 changed files with 4014 additions and 3106 deletions
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,71 @@ |
|||
@import "../../c/config"; |
|||
@import "../../c/function"; |
|||
@import "./c/common"; |
|||
|
|||
.m-pop { |
|||
@include shield; |
|||
background-color: rgba(#000, 0.9); |
|||
overflow-y: auto; |
|||
|
|||
.wrap { |
|||
position: relative; |
|||
margin: 120px auto; |
|||
width: 1180px; |
|||
|
|||
.title { |
|||
padding: 10px; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
display: block; |
|||
margin-right: 5px; |
|||
} |
|||
span { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.btn-close { |
|||
position: absolute; |
|||
top: -15px; |
|||
right: -15px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 20px; |
|||
min-height: 500px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-pagination { |
|||
box-sizing: border-box; |
|||
margin-top: 20px; |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
|
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background: #0266d1; |
|||
color: #000d3f; |
|||
} |
|||
|
|||
/deep/ .el-pagination .el-pager li { |
|||
background: #002e74; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-prev { |
|||
background: #002e74; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-next { |
|||
background: #002e74; |
|||
} |
|||
} |
|||
@ -1,154 +1,157 @@ |
|||
/* eslint-disable */ |
|||
<template> |
|||
<textarea :id="tinymceId" |
|||
style="visibility: hidden;" /> |
|||
<textarea :id="tinymceId" style="visibility: hidden" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import loadTinymce from '@/utils/loadTinymce' |
|||
import { plugins, toolbar } from './config' |
|||
import { debounce } from 'throttle-debounce' |
|||
import Cookie from 'js-cookie' |
|||
import loadTinymce from "@/utils/loadTinymce"; |
|||
import { plugins, toolbar } from "./config"; |
|||
import { debounce } from "throttle-debounce"; |
|||
import Cookie from "js-cookie"; |
|||
// import constants from '@/utils/constants' |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
|
|||
let num = 1 |
|||
let num = 1; |
|||
|
|||
export default { |
|||
name: 'Tinymce', |
|||
name: "Tinymce", |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: () => { |
|||
num === 10000 && (num = 1) |
|||
return `tinymce${+new Date()}${num++}` |
|||
} |
|||
num === 10000 && (num = 1); |
|||
return `tinymce${+new Date()}${num++}`; |
|||
}, |
|||
}, |
|||
value: { |
|||
default: '' |
|||
default: "", |
|||
}, |
|||
customerId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
default: "", |
|||
}, |
|||
}, |
|||
data () { |
|||
data() { |
|||
return { |
|||
tinymceId: this.id |
|||
} |
|||
tinymceId: this.id, |
|||
}; |
|||
}, |
|||
mounted () { |
|||
|
|||
loadTinymce(tinymce => { |
|||
let token = this.getUserToken() |
|||
mounted() { |
|||
loadTinymce((tinymce) => { |
|||
let token = this.getUserToken(); |
|||
// let uploadUrl = '1111' |
|||
let uploadUrl = window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload' |
|||
let uploadUrl = |
|||
window.SITE_CONFIG["apiURL"] + "/oss/file/function/upload"; |
|||
|
|||
// :data="{customerId:customerId}" |
|||
// let uploadUrl = constants.userUploadUrl |
|||
// eslint-disable-next-line global-require |
|||
require('./zh_CN') |
|||
require("./zh_CN"); |
|||
let conf = { |
|||
selector: `#${this.tinymceId}`, |
|||
language: 'zh_CN', |
|||
menubar: 'false', |
|||
skin_url: '/' + process.env.VUE_APP_PUBLIC_PATH + '/tinymce/skins/ui/tduck', |
|||
content_style: 'p {margin:3px 0; border:0px; padding:0px}', |
|||
content_css: '/' + process.env.VUE_APP_PUBLIC_PATH + '/tinymce/skins/content/tduck', |
|||
cache_suffix: '?v=0.0.1', |
|||
language: "zh_CN", |
|||
menubar: "false", |
|||
skin_url: |
|||
"/" + process.env.VUE_APP_PUBLIC_PATH + "/tinymce/skins/ui/tduck", |
|||
content_style: "p {margin:3px 0; border:0px; padding:0px}", |
|||
content_css: |
|||
"/" + |
|||
process.env.VUE_APP_PUBLIC_PATH + |
|||
"/tinymce/skins/content/tduck", |
|||
cache_suffix: "?v=0.0.1", |
|||
plugins, |
|||
toolbar, |
|||
toolbar_drawer: 'sliding', |
|||
toolbar_mode: 'sliding', |
|||
toolbar_drawer: "sliding", |
|||
toolbar_mode: "sliding", |
|||
height: 400, |
|||
// fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", |
|||
branding: false, |
|||
object_resizing: false, |
|||
end_container_on_empty_block: true, |
|||
powerpaste_word_import: 'clean', |
|||
powerpaste_word_import: "clean", |
|||
// code_dialog_height: 450, |
|||
// code_dialog_width: 1000, |
|||
// autoresize_max_height: 450, // 编辑区域的最大高度 |
|||
// autoresize_min_height: 350, //编辑区域的最小高度 |
|||
advlist_bullet_styles: 'square', |
|||
advlist_number_styles: 'default', |
|||
default_link_target: '_blank', |
|||
advlist_bullet_styles: "square", |
|||
advlist_number_styles: "default", |
|||
default_link_target: "_blank", |
|||
link_title: false, |
|||
statusbar: false, |
|||
nonbreaking_force_tab: true, |
|||
// images_upload_url: uploadUrl, |
|||
images_upload_handler: function (blobInfo, succFun, failFun) { |
|||
var xhr, formData |
|||
var file = blobInfo.blob()// 转化为易于理解的file对象 |
|||
xhr = new XMLHttpRequest() |
|||
xhr.withCredentials = false |
|||
xhr.open('POST', uploadUrl) |
|||
xhr.setRequestHeader('token', token) |
|||
var xhr, formData; |
|||
var file = blobInfo.blob(); // 转化为易于理解的file对象 |
|||
xhr = new XMLHttpRequest(); |
|||
xhr.withCredentials = false; |
|||
xhr.open("POST", uploadUrl); |
|||
xhr.setRequestHeader("token", token); |
|||
xhr.onload = function () { |
|||
|
|||
var json |
|||
var json; |
|||
if (xhr.status != 200) { |
|||
failFun('HTTP Error: ' + xhr.status) |
|||
return |
|||
failFun("HTTP Error: " + xhr.status); |
|||
return; |
|||
} |
|||
json = JSON.parse(xhr.responseText) |
|||
if (!json || typeof json.data.url != 'string') { |
|||
failFun('Invalid JSON: ' + xhr.responseText) |
|||
return |
|||
json = JSON.parse(xhr.responseText); |
|||
if (!json || typeof json.data.url != "string") { |
|||
failFun("Invalid JSON: " + xhr.responseText); |
|||
return; |
|||
} |
|||
|
|||
succFun(json.data.url) |
|||
} |
|||
formData = new FormData() |
|||
succFun(json.data.url); |
|||
}; |
|||
formData = new FormData(); |
|||
|
|||
formData.append('file', file, file.name)// 此处与源文档不一样 |
|||
formData.append("file", file, file.name); // 此处与源文档不一样 |
|||
// formData.append('customerId', '111') |
|||
xhr.send(formData) |
|||
} |
|||
} |
|||
conf = Object.assign(conf, this.$attrs) |
|||
conf.init_instance_callback = editor => { |
|||
|
|||
if (this.value) editor.setContent(this.value) |
|||
this.vModel(editor) |
|||
} |
|||
xhr.send(formData); |
|||
}, |
|||
}; |
|||
conf = Object.assign(conf, this.$attrs); |
|||
conf.init_instance_callback = (editor) => { |
|||
if (this.value) editor.setContent(this.value); |
|||
this.vModel(editor); |
|||
}; |
|||
|
|||
tinymce.init(conf) |
|||
}) |
|||
tinymce.init(conf); |
|||
}); |
|||
}, |
|||
destroyed () { |
|||
this.destroyTinymce() |
|||
destroyed() { |
|||
this.destroyTinymce(); |
|||
}, |
|||
methods: { |
|||
vModel (editor) { |
|||
vModel(editor) { |
|||
// 控制连续写入时setContent的触发频率 |
|||
const debounceSetContent = debounce(250, editor.setContent) |
|||
this.$watch('value', (val, prevVal) => { |
|||
const debounceSetContent = debounce(250, editor.setContent); |
|||
this.$watch("value", (val, prevVal) => { |
|||
if (editor && val !== prevVal && val !== editor.getContent()) { |
|||
if (typeof val !== 'string') val = val.toString() |
|||
debounceSetContent.call(editor, val) |
|||
if (typeof val !== "string") val = val.toString(); |
|||
debounceSetContent.call(editor, val); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
editor.on('change keyup undo redo', () => { |
|||
this.$emit('input', editor.getContent()) |
|||
}) |
|||
editor.on('blur', () => { |
|||
this.$emit('blur') |
|||
}) |
|||
editor.on("change keyup undo redo", () => { |
|||
this.$emit("input", editor.getContent()); |
|||
}); |
|||
editor.on("blur", () => { |
|||
this.$emit("blur"); |
|||
}); |
|||
console.log('init_instance_callback1111111111') |
|||
}, |
|||
getUserToken () { |
|||
let token = localStorage.getItem('token') |
|||
getUserToken() { |
|||
let token = localStorage.getItem("token"); |
|||
// console.log('获取token', token) |
|||
// return this.$store.getters['user/isLogin'] |
|||
return token |
|||
return token; |
|||
}, |
|||
destroyTinymce () { |
|||
if (!window.tinymce) return |
|||
const tinymce = window.tinymce.get(this.tinymceId) |
|||
destroyTinymce() { |
|||
if (!window.tinymce) return; |
|||
const tinymce = window.tinymce.get(this.tinymceId); |
|||
if (tinymce) { |
|||
tinymce.destroy() |
|||
tinymce.destroy(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
@ -0,0 +1,185 @@ |
|||
<template> |
|||
<editor v-model="content" tag-name="div" :init="init" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import tinymce from "tinymce/tinymce"; |
|||
import Editor from "@tinymce/tinymce-vue"; |
|||
import "tinymce/themes/silver/theme"; // 引用主题文件 |
|||
import "tinymce/icons/default"; // 引用图标文件 |
|||
import "tinymce/plugins/link"; |
|||
import "tinymce/plugins/code"; |
|||
import "tinymce/plugins/table"; |
|||
import "tinymce/plugins/lists"; |
|||
import "tinymce/plugins/advlist"; |
|||
import "tinymce/plugins/anchor"; |
|||
import "tinymce/plugins/autolink"; //锚点 |
|||
import "tinymce/plugins/autoresize"; |
|||
import "tinymce/plugins/autosave"; |
|||
import "tinymce/plugins/charmap"; //特殊字符 |
|||
import "tinymce/plugins/code"; //查看源码 |
|||
import "tinymce/plugins/codesample"; //插入代码 |
|||
import "tinymce/plugins/directionality"; // |
|||
import "tinymce/plugins/fullpage"; //页面属性编辑 |
|||
import "tinymce/plugins/fullscreen"; //全屏 |
|||
import "tinymce/plugins/help"; //帮助 |
|||
import "tinymce/plugins/hr"; //横线 |
|||
import "tinymce/plugins/image"; //图片 |
|||
import "tinymce/plugins/imagetools"; //图片工具 |
|||
import "tinymce/plugins/importcss"; //图片工具 |
|||
import "tinymce/plugins/insertdatetime"; //时间插入 |
|||
import "tinymce/plugins/media"; //媒体插入 |
|||
import "tinymce/plugins/nonbreaking"; // |
|||
import "tinymce/plugins/noneditable"; //不间断空格 |
|||
import "tinymce/plugins/pagebreak"; //分页 |
|||
import "tinymce/plugins/paste"; //粘贴 |
|||
import "tinymce/plugins/preview"; //预览 |
|||
import "tinymce/plugins/print"; //打印 |
|||
import "tinymce/plugins/quickbars"; //快捷菜单 |
|||
import "tinymce/plugins/save"; //保存 |
|||
import "tinymce/plugins/searchreplace"; //查询替换 |
|||
import "tinymce/plugins/spellchecker"; //拼写检查 |
|||
import "tinymce/plugins/tabfocus"; // |
|||
import "tinymce/plugins/template"; //插入模板 |
|||
import "tinymce/plugins/textpattern"; // |
|||
import "tinymce/plugins/toc"; // |
|||
import "tinymce/plugins/visualblocks"; // |
|||
import "tinymce/plugins/visualchars"; // |
|||
import "tinymce/plugins/wordcount"; //数字统计 |
|||
import { debounce } from "throttle-debounce"; |
|||
|
|||
export default { |
|||
props: { |
|||
value: { |
|||
default: "", |
|||
}, |
|||
height: { |
|||
default: 400, |
|||
}, |
|||
}, |
|||
components: { |
|||
editor: Editor, |
|||
}, |
|||
data() { |
|||
let uploadUrl = |
|||
window.SITE_CONFIG["apiURL"] + "/oss/file/upload-resi-event-file"; |
|||
let token = this.getUserToken(); |
|||
|
|||
let init = { |
|||
language_url: require("./zh_CN.js"), // 中文语言包路径 |
|||
language: "zh_CN", |
|||
skin_url: require("tinymce/skins/ui/oxide/skin.css"), // 编辑器皮肤样式 |
|||
menubar: false, // 隐藏菜单栏 |
|||
autoresize_bottom_margin: 50, |
|||
max_height: this.height, |
|||
min_height: this.height, |
|||
// height: this.height || 500, |
|||
// height: 320, |
|||
toolbar_mode: "none", |
|||
toolbar_drawer: "sliding", |
|||
toolbar_mode: "sliding", |
|||
plugins: |
|||
"wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave", // 插件需要import进来 |
|||
toolbar: |
|||
"formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help", |
|||
content_style: "p {margin: 5px 0; font-size: 14px}", |
|||
fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", |
|||
font_formats: |
|||
"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", |
|||
branding: false, |
|||
elementpath: false, |
|||
resize: false, // 禁止改变大小 |
|||
statusbar: false, // 隐藏底部状态栏 |
|||
object_resizing: false, |
|||
end_container_on_empty_block: true, |
|||
powerpaste_word_import: "clean", |
|||
// code_dialog_height: 450, |
|||
// code_dialog_width: 1000, |
|||
// autoresize_max_height: 450, // 编辑区域的最大高度 |
|||
// autoresize_min_height: 350, //编辑区域的最小高度 |
|||
advlist_bullet_styles: "square", |
|||
advlist_number_styles: "default", |
|||
default_link_target: "_blank", |
|||
link_title: false, |
|||
nonbreaking_force_tab: true, |
|||
// 图片上传 |
|||
images_upload_handler: function (blobInfo, succFun, failFun) { |
|||
var xhr, formData; |
|||
var file = blobInfo.blob(); // 转化为易于理解的file对象 |
|||
xhr = new XMLHttpRequest(); |
|||
xhr.withCredentials = false; |
|||
xhr.open("POST", uploadUrl); |
|||
xhr.setRequestHeader("token", token); |
|||
xhr.onload = function () { |
|||
var json; |
|||
if (xhr.status != 200) { |
|||
failFun("HTTP Error: " + xhr.status); |
|||
return; |
|||
} |
|||
json = JSON.parse(xhr.responseText); |
|||
if (!json || typeof json.data.url != "string") { |
|||
failFun("Invalid JSON: " + xhr.responseText); |
|||
return; |
|||
} |
|||
|
|||
succFun(json.data.url); |
|||
}; |
|||
formData = new FormData(); |
|||
|
|||
formData.append("file", file, file.name); // 此处与源文档不一样 |
|||
formData.append("customerId", localStorage.getItem("customerId")); |
|||
xhr.send(formData); |
|||
}, |
|||
}; |
|||
|
|||
// init = Object.assign(init, this.$attrs); |
|||
init.init_instance_callback = (editor) => { |
|||
if (this.value) editor.setContent(this.value); |
|||
this.vModel(editor); |
|||
}; |
|||
|
|||
// tinymce.init; // 初始化 |
|||
|
|||
const revert_data = (content) => { |
|||
this.$emit("input", content); |
|||
}; |
|||
|
|||
return { |
|||
content: this.value, |
|||
init, |
|||
revert_data, |
|||
}; |
|||
}, |
|||
mounted() {}, |
|||
methods: { |
|||
vModel(editor) { |
|||
// 控制连续写入时setContent的触发频率 |
|||
const debounceSetContent = debounce(250, editor.setContent); |
|||
this.$watch("value", (val, prevVal) => { |
|||
if (editor && val !== prevVal && val !== editor.getContent()) { |
|||
if (typeof val !== "string") val = val.toString(); |
|||
debounceSetContent.call(editor, val); |
|||
} |
|||
}); |
|||
|
|||
editor.on("change keyup undo redo", () => { |
|||
this.$emit("input", editor.getContent()); |
|||
}); |
|||
editor.on("blur", () => { |
|||
this.$emit("blur"); |
|||
}); |
|||
}, |
|||
getUserToken() { |
|||
return localStorage.getItem("token"); |
|||
}, |
|||
destroyTinymce() { |
|||
tinymce.destroy(); |
|||
}, |
|||
}, |
|||
watch: { |
|||
content() { |
|||
this.revert_data(this.content); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,418 @@ |
|||
import tinymce from "tinymce/tinymce"; |
|||
tinymce.addI18n('zh_CN', { |
|||
"Redo": "恢复", |
|||
"Undo": "撤销", |
|||
"Cut": "剪切", |
|||
"Copy": "复制", |
|||
"Paste": "粘贴", |
|||
"Select all": "全选", |
|||
"New document": "新建文档", |
|||
"Ok": "确定", |
|||
"Cancel": "取消", |
|||
"Visual aids": "网格线", |
|||
"Bold": "粗体", |
|||
"Italic": "斜体", |
|||
"Underline": "下划线", |
|||
"Strikethrough": "删除线", |
|||
"Superscript": "上标", |
|||
"Subscript": "下标", |
|||
"Clear formatting": "清除格式", |
|||
"Align left": "左对齐", |
|||
"Align center": "居中", |
|||
"Align right": "右对齐", |
|||
"Justify": "两端对齐", |
|||
"Bullet list": "符号列表", |
|||
"Numbered list": "数字列表", |
|||
"Decrease indent": "减少缩进", |
|||
"Increase indent": "增加缩进", |
|||
"Close": "关闭", |
|||
"Formats": "格式", |
|||
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.": "当前浏览器不支持访问剪贴板，请使用快捷键Ctrl+X/C/V复制粘贴", |
|||
"Headers": "标题", |
|||
"Header 1": "标题1", |
|||
"Header 2": "标题2", |
|||
"Header 3": "标题3", |
|||
"Header 4": "标题4", |
|||
"Header 5": "标题5", |
|||
"Header 6": "标题6", |
|||
"Headings": "标题", |
|||
"Heading 1": "标题1", |
|||
"Heading 2": "标题2", |
|||
"Heading 3": "标题3", |
|||
"Heading 4": "标题4", |
|||
"Heading 5": "标题5", |
|||
"Heading 6": "标题6", |
|||
"Preformatted": "预格式化", |
|||
"Div": "Div区块", |
|||
"Pre": "预格式文本", |
|||
"Code": "代码", |
|||
"Paragraph": "段落", |
|||
"Blockquote": "引用", |
|||
"Inline": "文本", |
|||
"Blocks": "区块", |
|||
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "当前为纯文本粘贴模式，再次点击可以回到普通粘贴模式。", |
|||
"Fonts": "字体", |
|||
"Font Sizes": "字号", |
|||
"Class": "Class", |
|||
"Browse for an image": "浏览图像", |
|||
"OR": "或", |
|||
"Drop an image here": "拖放一张图片文件至此", |
|||
"Upload": "上传", |
|||
"Block": "块", |
|||
"Align": "对齐", |
|||
"Default": "默认", |
|||
"Circle": "空心圆", |
|||
"Disc": "实心圆", |
|||
"Square": "方块", |
|||
"Lower Alpha": "小写英文字母", |
|||
"Lower Greek": "小写希腊字母", |
|||
"Lower Roman": "小写罗马字母", |
|||
"Upper Alpha": "大写英文字母", |
|||
"Upper Roman": "大写罗马字母", |
|||
"Anchor...": "锚点...", |
|||
"Name": "名称", |
|||
"Id": "id", |
|||
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "id应该以字母开头，后跟字母、数字、横线、点、冒号或下划线。", |
|||
"You have unsaved changes are you sure you want to navigate away?": "你对文档的修改尚未保存，确定离开吗？", |
|||
"Restore last draft": "恢复上次的草稿", |
|||
"Special characters...": "特殊字符...", |
|||
"Source code": "HTML源码", |
|||
"Insert/Edit code sample": "插入/编辑代码示例", |
|||
"Language": "语言", |
|||
"Code sample...": "代码示例...", |
|||
"Color Picker": "选取颜色", |
|||
"R": "R", |
|||
"G": "G", |
|||
"B": "B", |
|||
"Left to right": "从左到右", |
|||
"Right to left": "从右到左", |
|||
"Emoticons...": "表情符号...", |
|||
"Metadata and Document Properties": "元数据和文档属性", |
|||
"Title": "标题", |
|||
"Keywords": "关键词", |
|||
"Description": "描述", |
|||
"Robots": "机器人", |
|||
"Author": "作者", |
|||
"Encoding": "编码", |
|||
"Fullscreen": "全屏", |
|||
"Action": "操作", |
|||
"Shortcut": "快捷键", |
|||
"Help": "帮助", |
|||
"Address": "地址", |
|||
"Focus to menubar": "移动焦点到菜单栏", |
|||
"Focus to toolbar": "移动焦点到工具栏", |
|||
"Focus to element path": "移动焦点到元素路径", |
|||
"Focus to contextual toolbar": "移动焦点到上下文菜单", |
|||
"Insert link (if link plugin activated)": "插入链接 (如果链接插件已激活)", |
|||
"Save (if save plugin activated)": "保存(如果保存插件已激活)", |
|||
"Find (if searchreplace plugin activated)": "查找(如果查找替换插件已激活)", |
|||
"Plugins installed ({0}):": "已安装插件 ({0})：", |
|||
"Premium plugins:": "优秀插件：", |
|||
"Learn more...": "了解更多...", |
|||
"You are using {0}": "你正在使用 {0}", |
|||
"Plugins": "插件", |
|||
"Handy Shortcuts": "快捷键", |
|||
"Horizontal line": "水平分割线", |
|||
"Insert/edit image": "插入/编辑图片", |
|||
"Image description": "图片描述", |
|||
"Source": "地址", |
|||
"Dimensions": "大小", |
|||
"Constrain proportions": "保持宽高比", |
|||
"General": "常规", |
|||
"Advanced": "高级", |
|||
"Style": "样式", |
|||
"Vertical space": "垂直边距", |
|||
"Horizontal space": "水平边距", |
|||
"Border": "边框", |
|||
"Insert image": "插入图片", |
|||
"Image...": "图片...", |
|||
"Image list": "图片列表", |
|||
"Rotate counterclockwise": "逆时针旋转", |
|||
"Rotate clockwise": "顺时针旋转", |
|||
"Flip vertically": "垂直翻转", |
|||
"Flip horizontally": "水平翻转", |
|||
"Edit image": "编辑图片", |
|||
"Image options": "图片选项", |
|||
"Zoom in": "放大", |
|||
"Zoom out": "缩小", |
|||
"Crop": "裁剪", |
|||
"Resize": "调整大小", |
|||
"Orientation": "方向", |
|||
"Brightness": "亮度", |
|||
"Sharpen": "锐化", |
|||
"Contrast": "对比度", |
|||
"Color levels": "色阶", |
|||
"Gamma": "伽马值", |
|||
"Invert": "反转", |
|||
"Apply": "应用", |
|||
"Back": "后退", |
|||
"Insert date/time": "插入日期/时间", |
|||
"Date/time": "日期/时间", |
|||
"Insert/Edit Link": "插入/编辑链接", |
|||
"Insert/edit link": "插入/编辑链接", |
|||
"Text to display": "显示文字", |
|||
"Url": "地址", |
|||
"Open link in...": "链接打开方式...", |
|||
"Current window": "当前窗口打开", |
|||
"None": "在当前窗口/框架打开", |
|||
"New window": "在新窗口打开", |
|||
"Remove link": "删除链接", |
|||
"Anchors": "锚点", |
|||
"Link...": "链接...", |
|||
"Paste or type a link": "粘贴或输入链接", |
|||
"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "你所填写的URL地址为邮件地址，需要加上mailto:前缀吗？", |
|||
"The URL you entered seems to be an external link. Do you want to add the required http:// prefix?": "你所填写的URL地址属于外部链接，需要加上http://:前缀吗？", |
|||
"Link list": "链接列表", |
|||
"Insert video": "插入视频", |
|||
"Insert/edit video": "插入/编辑视频", |
|||
"Insert/edit media": "插入/编辑媒体", |
|||
"Alternative source": "替代资源", |
|||
"Alternative image URL": "资源备用地址", |
|||
"Media poster (Image URL)": "封面(图片地址)", |
|||
"Paste your embed code below:": "将内嵌代码粘贴在下面:", |
|||
"Embed": "内嵌", |
|||
"Media...": "多媒体...", |
|||
"Nonbreaking space": "不间断空格", |
|||
"Page break": "分页符", |
|||
"Paste as text": "粘贴为文本", |
|||
"Preview": "预览", |
|||
"Print...": "打印...", |
|||
"Save": "保存", |
|||
"Find": "查找", |
|||
"Replace with": "替换为", |
|||
"Replace": "替换", |
|||
"Replace all": "替换全部", |
|||
"Previous": "上一个", |
|||
"Next": "下一个", |
|||
"Find and replace...": "查找并替换...", |
|||
"Could not find the specified string.": "未找到搜索内容。", |
|||
"Match case": "区分大小写", |
|||
"Find whole words only": "全单词匹配", |
|||
"Spell check": "拼写检查", |
|||
"Ignore": "忽略", |
|||
"Ignore all": "忽略全部", |
|||
"Finish": "完成", |
|||
"Add to Dictionary": "添加到字典", |
|||
"Insert table": "插入表格", |
|||
"Table properties": "表格属性", |
|||
"Delete table": "删除表格", |
|||
"Cell": "单元格", |
|||
"Row": "行", |
|||
"Column": "列", |
|||
"Cell properties": "单元格属性", |
|||
"Merge cells": "合并单元格", |
|||
"Split cell": "拆分单元格", |
|||
"Insert row before": "在上方插入", |
|||
"Insert row after": "在下方插入", |
|||
"Delete row": "删除行", |
|||
"Row properties": "行属性", |
|||
"Cut row": "剪切行", |
|||
"Copy row": "复制行", |
|||
"Paste row before": "粘贴到上方", |
|||
"Paste row after": "粘贴到下方", |
|||
"Insert column before": "在左侧插入", |
|||
"Insert column after": "在右侧插入", |
|||
"Delete column": "删除列", |
|||
"Cols": "列", |
|||
"Rows": "行", |
|||
"Width": "宽", |
|||
"Height": "高", |
|||
"Cell spacing": "单元格外间距", |
|||
"Cell padding": "单元格内边距", |
|||
"Show caption": "显示标题", |
|||
"Left": "左对齐", |
|||
"Center": "居中", |
|||
"Right": "右对齐", |
|||
"Cell type": "单元格类型", |
|||
"Scope": "范围", |
|||
"Alignment": "对齐方式", |
|||
"H Align": "水平对齐", |
|||
"V Align": "垂直对齐", |
|||
"Top": "顶部对齐", |
|||
"Middle": "垂直居中", |
|||
"Bottom": "底部对齐", |
|||
"Header cell": "表头单元格", |
|||
"Row group": "行组", |
|||
"Column group": "列组", |
|||
"Row type": "行类型", |
|||
"Header": "表头", |
|||
"Body": "表体", |
|||
"Footer": "表尾", |
|||
"Border color": "边框颜色", |
|||
"Insert template...": "插入模板...", |
|||
"Templates": "模板", |
|||
"Template": "模板", |
|||
"Text color": "文字颜色", |
|||
"Background color": "背景色", |
|||
"Custom...": "自定义...", |
|||
"Custom color": "自定义颜色", |
|||
"No color": "无", |
|||
"Remove color": "删除颜色", |
|||
"Table of Contents": "目录", |
|||
"Show blocks": "显示区块边框", |
|||
"Show invisible characters": "显示不可见字符", |
|||
"Word count": "字数统计", |
|||
"Words: {0}": "字数：{0}", |
|||
"{0} words": "{0} 个字", |
|||
"File": "文件", |
|||
"Edit": "编辑", |
|||
"Insert": "插入", |
|||
"View": "查看", |
|||
"Format": "格式", |
|||
"Table": "表格", |
|||
"Tools": "工具", |
|||
"Powered by {0}": "Powered by {0}", |
|||
"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "在编辑区按ALT+F9打开菜单，按ALT+F10打开工具栏，按ALT+0查看帮助", |
|||
"Image title": "图片标题", |
|||
"Border width": "边框宽度", |
|||
"Border style": "边框样式", |
|||
"Error": "错误", |
|||
"Warn": "警告", |
|||
"Valid": "有效", |
|||
"To open the popup, press Shift+Enter": "此快捷为软回车（插入<br>）", |
|||
"Rich Text Area. Press ALT-0 for help.": "编辑区. 按Alt+0键打开帮助", |
|||
"System Font": "默认字体", |
|||
"Failed to upload image: {0}": "图片上传失败: {0}", |
|||
"Failed to load plugin: {0} from url {1}": "插件加载失败: {0} - {1}", |
|||
"Failed to load plugin url: {0}": "插件加载失败: {0}", |
|||
"Failed to initialize plugin: {0}": "插件初始化失败: {0}", |
|||
"example": "示例", |
|||
"Search": "查找", |
|||
"All": "全部", |
|||
"Currency": "货币", |
|||
"Text": "文本", |
|||
"Quotations": "引用", |
|||
"Mathematical": "数学运算符", |
|||
"Extended Latin": "拉丁语扩充", |
|||
"Symbols": "符号", |
|||
"Arrows": "箭头", |
|||
"User Defined": "自定义", |
|||
"dollar sign": "美元", |
|||
"currency sign": "货币", |
|||
"euro-currency sign": "欧元", |
|||
"colon sign": "冒号", |
|||
"cruzeiro sign": "克鲁赛罗币", |
|||
"french franc sign": "法郎", |
|||
"lira sign": "里拉", |
|||
"mill sign": "密尔", |
|||
"naira sign": "奈拉", |
|||
"peseta sign": "比塞塔", |
|||
"rupee sign": "卢比", |
|||
"won sign": "韩元", |
|||
"new sheqel sign": "新谢克尔", |
|||
"dong sign": "越南盾", |
|||
"kip sign": "老挝基普", |
|||
"tugrik sign": "图格里克", |
|||
"drachma sign": "德拉克马", |
|||
"german penny symbol": "德国便士", |
|||
"peso sign": "比索", |
|||
"guarani sign": "瓜拉尼", |
|||
"austral sign": "澳元", |
|||
"hryvnia sign": "格里夫尼亚", |
|||
"cedi sign": "塞地", |
|||
"livre tournois sign": "里弗弗尔", |
|||
"spesmilo sign": "一千spesoj的货币符号，该货币未使用", |
|||
"tenge sign": "坚戈", |
|||
"indian rupee sign": "印度卢比", |
|||
"turkish lira sign": "土耳其里拉", |
|||
"nordic mark sign": "北欧马克", |
|||
"manat sign": "马纳特", |
|||
"ruble sign": "卢布", |
|||
"yen character": "日元", |
|||
"yuan character": "人民币元", |
|||
"yuan character, in hong kong and taiwan": "元的繁体字", |
|||
"yen/yuan character variant one": "元（大写）", |
|||
"Loading emoticons...": "正在加载表情文字...", |
|||
"Could not load emoticons": "不能加载表情文字", |
|||
"People": "人类", |
|||
"Animals and Nature": "动物和自然", |
|||
"Food and Drink": "食物和饮品", |
|||
"Activity": "活动", |
|||
"Travel and Places": "旅游和地点", |
|||
"Objects": "物件", |
|||
"Flags": "旗帜", |
|||
"Characters": "字数", |
|||
"Characters (no spaces)": "字数（不含空格）", |
|||
"Error: Form submit field collision.": "错误: 表单提交字段冲突.", |
|||
"Error: No form element found.": "错误: 未找到可用的form.", |
|||
"Update": "更新", |
|||
"Color swatch": "颜色样本", |
|||
"Turquoise": "青绿", |
|||
"Green": "绿色", |
|||
"Blue": "蓝色", |
|||
"Purple": "紫色", |
|||
"Navy Blue": "海军蓝", |
|||
"Dark Turquoise": "深蓝绿色", |
|||
"Dark Green": "暗绿", |
|||
"Medium Blue": "中蓝", |
|||
"Medium Purple": "中紫", |
|||
"Midnight Blue": "深蓝", |
|||
"Yellow": "黄色", |
|||
"Orange": "橙色", |
|||
"Red": "红色", |
|||
"Light Gray": "浅灰", |
|||
"Gray": "灰色", |
|||
"Dark Yellow": "暗黄", |
|||
"Dark Orange": "暗橙", |
|||
"Dark Red": "暗红", |
|||
"Medium Gray": "中灰", |
|||
"Dark Gray": "深灰", |
|||
"Black": "黑色", |
|||
"White": "白色", |
|||
"Switch to or from fullscreen mode": "切换全屏模式", |
|||
"Open help dialog": "打开帮助对话框", |
|||
"history": "历史", |
|||
"styles": "样式", |
|||
"formatting": "格式化", |
|||
"alignment": "对齐", |
|||
"indentation": "缩进", |
|||
"permanent pen": "记号笔", |
|||
"comments": "注释", |
|||
"Anchor": "锚点", |
|||
"Special character": "特殊字符", |
|||
"Code sample": "代码示例", |
|||
"Color": "颜色", |
|||
"Emoticons": "表情", |
|||
"Document properties": "文档属性", |
|||
"Image": "图片", |
|||
"Insert link": "插入链接", |
|||
"Target": "目标", |
|||
"Link": "链接", |
|||
"Poster": "封面", |
|||
"Media": "音视频", |
|||
"Print": "打印", |
|||
"Prev": "上一个", |
|||
"Find and replace": "查找并替换", |
|||
"Whole words": "全字匹配", |
|||
"Spellcheck": "拼写检查", |
|||
"Caption": "标题", |
|||
"Insert template": "插入模板", |
|||
//以下为补充汉化内容 by 莫若卿
|
|||
"Code view": "代码区域", |
|||
"Select...": "选择...", |
|||
"Format Painter": "格式刷", |
|||
"No templates defined.": "无内置模板", |
|||
"Special character...": "特殊字符...", |
|||
"Open link": "打开链接", |
|||
// "None": "无",
|
|||
"Count": "统计", |
|||
"Document": "整个文档", |
|||
"Selection": "选取部分", |
|||
"Words": "字词数", |
|||
"{0} characters": "{0} 个字符", |
|||
"Alternative source URL": "替代资源地址", |
|||
"Alternative description": "替代说明文字", |
|||
"Accessibility": "可访问性", |
|||
"Image is decorative": "仅用于装饰", |
|||
//5.6新增
|
|||
"Line height": "行高", |
|||
"Cut column": "剪切列", |
|||
"Copy column": "复制列", |
|||
"Paste column before": "粘贴到前方", |
|||
"Paste column after": "粘贴到后方", |
|||
// "Copy column": "复制列",
|
|||
//帮助窗口内的文字
|
|||
"Version": "版本", |
|||
"Keyboard Navigation": "键盘导航", |
|||
"Open popup menu for split buttons": "该组合键的作用是软回车（插入br）", |
|||
}); |
|||
@ -1,685 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="div_search"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主姓名</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerName" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主手机</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerPhone" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--search" |
|||
size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</div> |
|||
<div class="div_btn"> |
|||
|
|||
<el-button style="float:left" |
|||
class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd">新增楼栋</el-button> |
|||
<div class="btn_upload" |
|||
v-if="showImportBtn"> |
|||
<el-button style=";margin-left:10px" |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule('building')">下载楼栋模板</el-button> |
|||
|
|||
<el-upload style="" |
|||
ref="upload_building" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="((file)=>{beforeUpload(file, 'building')})" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:http-request="(()=>{uploadFile( 'building')})"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--delete">导入楼栋数据</el-button> |
|||
</el-upload> |
|||
<el-button style=";margin-left:10px" |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule('room')">下载房屋模板</el-button> |
|||
|
|||
<el-upload style="" |
|||
ref="upload_room" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="((file)=>{beforeUpload(file, 'room')})" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:http-request="(()=>{uploadFile( 'room')})"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--delete">导入房屋数据</el-button> |
|||
</el-upload> |
|||
</div> |
|||
<el-button style="float:left;margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="handleExport">导出</el-button> |
|||
<el-button style="float:left;margin-left:10px" |
|||
class="diy-button--more" |
|||
size="small" |
|||
@click="deleteBatch">批量删除</el-button> |
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
<el-table ref="ref_table" |
|||
:data="tableData" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
style="width: 100%" |
|||
@select-all="selectAll" |
|||
@selection-change="selectionChange"> |
|||
<el-table-column type="selection" |
|||
:selectable="checkSelect" |
|||
width="55"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingName" |
|||
label="楼栋名称" |
|||
min-width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="neighborHoodName" |
|||
label="所属小区" |
|||
min-width="160"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingType" |
|||
label="楼栋类型" |
|||
min-width="140"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalUnitNum" |
|||
label="单元数"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalFloorNum" |
|||
label="层数"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalHouseNum" |
|||
label="总户数"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
<!-- <el-button type="text" |
|||
style="color:#feb349;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleToNextLevel(scope.row)">进入</el-button> --> |
|||
<el-button type="text" |
|||
class="div-table-button--detail" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button v-if="scope.row.showBtn" |
|||
type="text" |
|||
class="div-table-button--edit" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
|
|||
<el-button v-if="scope.row.showBtn" |
|||
type="text" |
|||
class="div-table-button--delete" |
|||
size="small" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
top="5vh" |
|||
width="900px" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<build-form ref="ref_form" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk"></build-form> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import BuildForm from './buildForm' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
importBuildingLoading: false, |
|||
importRoomLoading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 0, |
|||
tableLoading: true, |
|||
|
|||
|
|||
agencyObj: {},//树所选的小区对象 |
|||
ownerName: '', |
|||
ownerPhone: '', |
|||
validTableDataNum: 0,//有效的数据数量，即有权限操作的数据数量 |
|||
selection: [], |
|||
|
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增楼栋', |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
BuildForm |
|||
}, |
|||
async mounted () { |
|||
console.log('building11111111111111111111111111') |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
|
|||
return this.$store.state.inIframe ? this.clientHeight - 300 + this.iframeHeight : this.clientHeight - 300 |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
methods: { |
|||
//重置搜索条件 |
|||
resetSearch () { |
|||
this.ownerName = '' |
|||
this.ownerPhone = '' |
|||
|
|||
this.pageSize = 10 |
|||
this.pageNo = 0 |
|||
// this.loadTable() |
|||
}, |
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
|
|||
checkSelect (row, index) { |
|||
let isChecked = false; |
|||
if (row.showBtn) { // 判断里面是否存在某个参数 |
|||
isChecked = true |
|||
} else { |
|||
isChecked = false |
|||
} |
|||
return isChecked |
|||
}, |
|||
|
|||
async loadTable (fromTree, treeObj) { |
|||
this.tableLoading = true |
|||
if (fromTree) { |
|||
|
|||
this.agencyObj = treeObj |
|||
|
|||
// if (this.agencyObj.pid === this.staffAgencyId) {//如果所选树的父级组织id和登录人员id相同，有权限 |
|||
// this.showImportBtn = true |
|||
// } else { |
|||
// this.showImportBtn = false |
|||
// } |
|||
} |
|||
|
|||
|
|||
console.log(this.agencyObj) |
|||
const url = "/gov/org/building/buildinglist" |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
neighborHoodId: this.agencyObj.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.validTableDataNum = 0 |
|||
this.total = data.total |
|||
data.list.forEach(item => { |
|||
if (item.agencyId === this.staffAgencyId) { |
|||
item.showBtn = true |
|||
this.validTableDataNum++ |
|||
} else { |
|||
item.showBtn = false |
|||
} |
|||
|
|||
}); |
|||
this.tableData = data.list |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
this.tableLoading = false |
|||
}, |
|||
|
|||
diaClose () { |
|||
this.$refs.ref_form.resetData() |
|||
this.formShow = false |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
this.formTitle = '楼栋详情' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('detail', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.formTitle = '新增楼栋' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('add', null, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.formTitle = '修改楼栋' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('edit', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleToNextLevel (row) { |
|||
this.$emit('toNextLevel', row, 'building') |
|||
}, |
|||
|
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
this.$emit('refreshTree') |
|||
}, |
|||
|
|||
|
|||
deleteBatch () { |
|||
if (this.selection.length > 0) { |
|||
this.$confirm("确认删除选择的楼栋?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteCommunityBatch() |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
} else { |
|||
this.$message.warning('请先选择要删除的楼栋') |
|||
} |
|||
}, |
|||
selectAll (selection) { |
|||
this.selection = selection |
|||
|
|||
}, |
|||
selectionChange (selection) { |
|||
this.selection = selection |
|||
|
|||
}, |
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteBuild(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
}, |
|||
|
|||
async deleteCommunityBatch () { |
|||
let ids = [] |
|||
this.selection.forEach(element => { |
|||
|
|||
ids.push(element.buildingId) |
|||
}); |
|||
|
|||
const url = "/gov/org/house/delete" |
|||
|
|||
let params = { |
|||
type: 'building', |
|||
ids: ids |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else if (code > 8000) { |
|||
this.$message({ |
|||
showClose: true, |
|||
message: msg, |
|||
duration: 0 |
|||
}) |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
async deleteBuild (row) { |
|||
const url = "/gov/org/building/buildingdel" |
|||
|
|||
let params = { |
|||
buildingId: row.buildingId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = this.agencyObj.label |
|||
title = title + '—楼栋列表' |
|||
|
|||
const url = "/gov/org/building/exportbuildinginfo" |
|||
let params = { |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
neighborHoodId: this.agencyObj.id |
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleExportModule (type) { |
|||
|
|||
let title = '' |
|||
let url = "" |
|||
if (type === 'building') { |
|||
title = '楼栋导入模板' |
|||
url = '/gov/org/building/exporttemplate' |
|||
|
|||
} else if (type === 'room') { |
|||
title = '房屋导入模板' |
|||
url = '/gov/org/house/exporttemplate' |
|||
} |
|||
|
|||
|
|||
let params = {} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file, type) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === 'application/vnd.ms-excel' |
|||
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error('请选择正确格式的文件') |
|||
this.files = null |
|||
this.fileName = '' |
|||
return false |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile (type) { |
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
this.$message({ |
|||
showClose: true, |
|||
message: '导入中，请到系统管理-导入记录中查看进度', |
|||
duration: 0 |
|||
}) |
|||
|
|||
|
|||
//清空上传列表 |
|||
let url = '' |
|||
let params = {} |
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
fileFormData.append('orgId', this.agencyObj.id);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
fileFormData.append('orgType', this.agencyObj.level);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
// params.file = fileFormData |
|||
// params.orgId = this.agencyObj.id |
|||
// params.orgType = this.agencyObj.level |
|||
|
|||
if (type === 'building') { |
|||
this.$refs['upload_building'].clearFiles() |
|||
// url = 'http://192.168.51.26:8080/api/gov/org/building/buildingimport' |
|||
url = '/gov/org/building/buildingimport' |
|||
this.importBuildingLoading = true |
|||
|
|||
} else if (type === 'room') { |
|||
this.$refs['upload_room'].clearFiles() |
|||
// url = 'http://192.168.51.26:8080/api/gov/org/house/houseimport' |
|||
url = '/gov/org/house/houseimport' |
|||
this.importRoomLoading = true |
|||
} |
|||
|
|||
window.app.ajax.post2(url, fileFormData, |
|||
(data, rspMsg) => { |
|||
|
|||
if (data.code === 0 && data.msg == 'success') { |
|||
// this.$message.success('导入成功') |
|||
} else { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// message: rspMsg, |
|||
// duration: 0, |
|||
// type: "error" |
|||
// }) |
|||
// this.$message.error(rspMsg) |
|||
} |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
if (type === 'building') { |
|||
this.importBuildingLoading = false |
|||
|
|||
} else if (type === 'room') { |
|||
this.importRoomLoading = false |
|||
} |
|||
}, |
|||
(rspMsg, data) => { |
|||
if (type === 'building') { |
|||
this.importBuildingLoading = false |
|||
|
|||
} else if (type === 'room') { |
|||
this.importRoomLoading = false |
|||
} |
|||
}, { headers: { 'Content-Type': 'multipart/form-data' } }) |
|||
|
|||
}, |
|||
|
|||
showMessage (msg) { |
|||
this.$alert(msg, '操作结果', { |
|||
confirmButtonText: '关闭', |
|||
callback: action => { |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
props: { |
|||
staffAgencyId: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
showImportBtn: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|||
</style> |
|||
@ -1,341 +0,0 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
|
|||
<div :style="{height:rowHeight}" |
|||
class="div_tree"> |
|||
<el-input placeholder="输入关键字进行过滤" |
|||
v-model="filterText"> |
|||
</el-input> |
|||
<el-scrollbar :style="{height:treeHeight}" |
|||
class="scrollar"> |
|||
<el-tree ref="ref_tree" |
|||
v-loading="treeLoading" |
|||
class="filter_tree" |
|||
:data="treeData" |
|||
:props="defaultProps" |
|||
:highlight-current="true" |
|||
node-key="id" |
|||
:expand-on-click-node="false" |
|||
default-expand-all |
|||
:filter-node-method="filterNode" |
|||
@node-click="handleNodeClick"> |
|||
</el-tree> |
|||
</el-scrollbar> |
|||
|
|||
</div> |
|||
|
|||
<div :style="{height:rowHeight}" |
|||
class="div_table"> |
|||
|
|||
<build-table v-if="selTreeObj.level==='neighborHood'" |
|||
ref="ref_neighTable" |
|||
:staffAgencyId="staffAgencyId" |
|||
:showImportBtn="showImportBtn" |
|||
@toNextLevel="toNextLevel" |
|||
@refreshTree="refreshTree"></build-table> |
|||
<room-table v-else-if="selTreeObj.level==='building'" |
|||
:staffAgencyId="staffAgencyId" |
|||
:showImportBtn="showImportBtn" |
|||
ref="ref_buildingTable" |
|||
@refreshTree="refreshTree"></room-table> |
|||
<community-table v-else |
|||
@toNextLevel="toNextLevel" |
|||
:staffAgencyId="staffAgencyId" |
|||
ref="ref_communityTable" |
|||
@refreshTree="refreshTree"></community-table> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CDialog from '@c/CDialog' |
|||
import communityTable from './communityTable' |
|||
import buildTable from './buildTable' |
|||
import roomTable from './roomTable' |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
filterText: '', |
|||
treeLoading: true, |
|||
treeData: [], |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'showName' |
|||
}, |
|||
|
|||
selTreeObj: {}, |
|||
|
|||
centerPoint: [], |
|||
staffAgencyId: localStorage.getItem("agencyId"), |
|||
showImportBtn: false |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
CDialog |
|||
}, |
|||
async mounted () { |
|||
this.treeLoading = true |
|||
await this.loadOrgData() |
|||
await this.loadTree() |
|||
|
|||
await this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|||
if (this.treeData.length > 0) { |
|||
this.$nextTick(() => { |
|||
// ref_tree 元素的ref value 绑定的node-key |
|||
this.$refs.ref_tree.setCurrentKey(this.treeData[0].id); |
|||
}); |
|||
} |
|||
this.treeLoading = false |
|||
|
|||
}, |
|||
computed: { |
|||
rowHeight () { |
|||
|
|||
return this.$store.state.inIframe ? this.clientHeight - 120 + this.iframeHeight + 'px' : this.clientHeight - 120 + 'px' |
|||
|
|||
}, |
|||
treeHeight () { |
|||
return this.$store.state.inIframe ? this.clientHeight - 200 + this.iframeHeight + 'px' : this.clientHeight - 200 + 'px' |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
methods: { |
|||
async loadTree (isRefresh) { |
|||
const url = "/gov/org/building/treelist" |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
|
|||
this.treeData = data |
|||
if (!isRefresh && data.length > 0) { |
|||
|
|||
this.selTreeObj = data[0] |
|||
if (!this.selTreeObj.latitude) { |
|||
this.selTreeObj.latitude = this.centerPoint[0] |
|||
} |
|||
|
|||
if (!this.selTreeObj.longitude) { |
|||
this.selTreeObj.longitude = this.centerPoint[1] |
|||
} |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async loadOrgData () { |
|||
const url = "/gov/org/agency/maporg" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg" |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.centerPoint = [] |
|||
|
|||
this.centerPoint.push(data.latitude) |
|||
this.centerPoint.push(data.longitude) |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleNodeClick (obj) { |
|||
this.getTreeObj(obj) |
|||
|
|||
this.$nextTick(() => { |
|||
|
|||
if (obj.level === 'building') {//点击楼栋 |
|||
this.$refs['ref_buildingTable'].loadTable(true, this.selTreeObj) |
|||
|
|||
} else if (obj.level === 'neighborHood') {//点击小区 |
|||
this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj) |
|||
|
|||
} else { |
|||
this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
|
|||
//添加小区结束 |
|||
async refreshTree () { |
|||
this.treeLoading = true |
|||
await this.loadTree(this.selTreeObj.id) |
|||
this.$nextTick(() => { |
|||
// ref_tree 元素的ref value 绑定的node-key |
|||
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|||
}); |
|||
this.treeLoading = false |
|||
}, |
|||
|
|||
//进入下一级 |
|||
toNextLevel (row, level) { |
|||
|
|||
if (level === 'community') { |
|||
this.selTreeObj = this.$refs.ref_tree.getNode(row.neighborHoodId).data |
|||
} else { |
|||
this.selTreeObj = this.$refs.ref_tree.getNode(row.buildingId).data |
|||
} |
|||
|
|||
this.handleNodeClick(this.selTreeObj) |
|||
this.$nextTick(() => { |
|||
// ref_tree 元素的ref value 绑定的node-key |
|||
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|||
}); |
|||
|
|||
}, |
|||
|
|||
//解析树数据 |
|||
getTreeObj (obj) { |
|||
// 树接口： |
|||
// 组织：组织id、组织名称、type、经度、纬度 |
|||
// 小区：小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度 |
|||
// 楼：楼id、楼名称、type、所属小区id、所属小区名称 |
|||
if (obj.level === 'building') {//点击楼栋 |
|||
let neighborHoodNode = this.$refs.ref_tree.getNode(obj.pid)//所属小区 |
|||
|
|||
let gridNode = this.$refs.ref_tree.getNode(neighborHoodNode.data.pid)//所属网格 |
|||
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid)//所属社区 |
|||
obj.agencyId = agencyNode.data.id |
|||
obj.agencyName = agencyNode.data.label |
|||
obj.gridId = gridNode.data.id |
|||
obj.gridName = gridNode.data.label |
|||
obj.neighborHoodId = neighborHoodNode.data.id |
|||
obj.neighborHoodName = neighborHoodNode.data.label |
|||
if (obj.agencyId === this.staffAgencyId) { |
|||
this.showImportBtn = true |
|||
} else { |
|||
this.showImportBtn = false |
|||
} |
|||
|
|||
} else if (obj.level === 'neighborHood') {//点击小区 |
|||
let gridNode = this.$refs.ref_tree.getNode(obj.pid) |
|||
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid) |
|||
obj.gridId = gridNode.data.id |
|||
obj.gridName = gridNode.data.label |
|||
obj.agencyId = agencyNode.data.id |
|||
obj.agencyName = agencyNode.data.label |
|||
if (obj.agencyId === this.staffAgencyId) { |
|||
this.showImportBtn = true |
|||
} else { |
|||
this.showImportBtn = false |
|||
} |
|||
|
|||
} else { |
|||
|
|||
} |
|||
|
|||
if (!obj.latitude) { |
|||
obj.latitude = this.centerPoint[0] |
|||
} |
|||
|
|||
if (!obj.longitude) { |
|||
obj.longitude = this.centerPoint[1] |
|||
} |
|||
this.selTreeObj = obj |
|||
console.log(this.selTreeObj) |
|||
|
|||
}, |
|||
|
|||
filterNode (value, data) { |
|||
if (!value) return true; |
|||
return data.label.indexOf(value) !== -1; |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.ref_tree.filter(val); |
|||
} |
|||
}, |
|||
components: { |
|||
communityTable, buildTable, roomTable |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
.div_main { |
|||
display: flex; |
|||
} |
|||
.scrollar { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.div_tree { |
|||
flex: 0 0 280px; |
|||
background-color: #ffffff; |
|||
border-radius: 5px; |
|||
padding: 10px; |
|||
overflow-y: hidden; |
|||
} |
|||
.filter_tree { |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
.div_table { |
|||
margin-left: 15px; |
|||
// flex: 1; |
|||
width: calc(100% - 300px); |
|||
background-color: #ffffff; |
|||
border-radius: 5px; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.div_btn { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.row { |
|||
padding: 10px; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
/* .aui-content > .el-tabs > .el-tabs__content { |
|||
padding: 0px; |
|||
} */ |
|||
|
|||
.el-tree-node:focus > .el-tree-node__content { |
|||
/* background-color: #ccc !important; */ |
|||
color: #2195fe; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.div_tree { |
|||
/deep/ .el-scrollbar__wrap { |
|||
overflow-x: hidden !important; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,793 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="div_search"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主姓名</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerName" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主手机</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerPhone" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--search" |
|||
size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
<!-- <el-button style="margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> --> |
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button style="" |
|||
class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd">新增小区</el-button> |
|||
|
|||
<div class="btn_upload" |
|||
v-if="showImportBtn"> |
|||
<el-button style="" |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule('community')">下载小区模板</el-button> |
|||
|
|||
<el-upload ref="upload_community" |
|||
style="" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="((file)=>{beforeUpload(file, 'community')})" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:http-request="(()=>{uploadFile( 'community')})"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--delete">导入小区数据</el-button> |
|||
</el-upload> |
|||
|
|||
<el-button style=";margin-left:10px" |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule('building')">下载楼栋模板</el-button> |
|||
|
|||
<el-upload style="" |
|||
ref="upload_building" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="((file)=>{beforeUpload(file, 'building')})" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:http-request="(()=>{uploadFile( 'building')})"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--delete">导入楼栋数据</el-button> |
|||
</el-upload> |
|||
<el-button style=";margin-left:10px" |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule('room')">下载房屋模板</el-button> |
|||
|
|||
<el-upload style="" |
|||
ref="upload_room" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="((file)=>{beforeUpload(file, 'room')})" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:http-request="(()=>{uploadFile( 'room')})"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--delete">导入房屋数据</el-button> |
|||
</el-upload> |
|||
</div> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="handleExport">导出</el-button> |
|||
<el-button v-if="agencyObj.level == 'community'" |
|||
style="margin-left:10px" |
|||
class="diy-button--qrcode" |
|||
size="small" |
|||
@click="handleDownQr(agencyObj, 'community')">社区二维码</el-button> |
|||
<el-button style="float:left;margin-left:10px" |
|||
class="diy-button--more" |
|||
size="small" |
|||
@click="deleteBatch">批量删除</el-button> |
|||
|
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
<el-table ref="ref_table" |
|||
:data="tableData" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
style="width: 100%" |
|||
:show-overflow-tooltip="true" |
|||
@select-all="selectAll" |
|||
@selection-change="selectionChange"> |
|||
<el-table-column type="selection" |
|||
:selectable="checkSelect" |
|||
width="55"> |
|||
</el-table-column> |
|||
<el-table-column prop="neighborHoodName" |
|||
label="小区名称" |
|||
min-width="100"> |
|||
<!-- <template slot-scope="scope"> |
|||
<a class="name-a" @click="handleDetail(scope.row)"> |
|||
{{ scope.row.neighborHoodName }} |
|||
</a> |
|||
</template> --> |
|||
</el-table-column> |
|||
<el-table-column prop="agencyName" |
|||
label="所属组织" |
|||
min-width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="gridName" |
|||
label="所属网格" |
|||
min-width="120"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="总单元数" |
|||
label="所属网格" |
|||
min-width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="总户数" |
|||
label="所属网格" |
|||
min-width="80"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="address" |
|||
label="详细地址" |
|||
min-width="180"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<!-- <el-button type="text" |
|||
style="color:#feb349;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleToNextLevel(scope.row)">进入</el-button> --> |
|||
<!-- <el-button type="text" |
|||
class="div-table-button--qr" |
|||
size="small" |
|||
@click="handleDownQr(scope.row, 'neighborHood')">二维码</el-button> --> |
|||
<el-button type="text" |
|||
class="div-table-button--detail" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button v-if="scope.row.showBtn" |
|||
type="text" |
|||
class="div-table-button--edit" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
|
|||
<el-button v-if="scope.row.showBtn" |
|||
type="text" |
|||
class="div-table-button--delete" |
|||
size="small" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<community-form ref="ref_form" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk"></community-form> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import CommunityForm from './communityForm' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import axios from 'axios' |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
importBuildingLoading: false, |
|||
importRoomLoading: false, |
|||
importCommunityLoading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 0, |
|||
tableLoading: true, |
|||
|
|||
showImportBtn: false,//是否显示操作按钮，根据登录人所属组织判断 |
|||
|
|||
agencyObj: {},//树所选的组织对象 |
|||
ownerName: '', |
|||
ownerPhone: '', |
|||
tableData: [], |
|||
validTableDataNum: 0,//有效的数据数量，即有权限操作的数据数量 |
|||
selection: [], |
|||
showDeletBtn: false, |
|||
|
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增小区', |
|||
|
|||
files: "", |
|||
fileName: "", |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import' |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
CommunityForm |
|||
}, |
|||
async mounted () { |
|||
|
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
|
|||
return this.$store.state.inIframe ? this.clientHeight - 300 + this.iframeHeight : this.clientHeight - 300 |
|||
|
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
methods: { |
|||
//重置搜索条件 |
|||
resetSearch () { |
|||
this.ownerName = '' |
|||
this.ownerPhone = '' |
|||
|
|||
this.pageSize = 10 |
|||
this.pageNo = 0 |
|||
// this.loadTable() |
|||
}, |
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
async loadTable (fromTree, treeObj) { |
|||
console.log(111, this.staffAgencyId) |
|||
|
|||
this.tableLoading = true |
|||
if (fromTree) { |
|||
this.agencyObj = treeObj |
|||
if (this.agencyObj.level === 'community') {//只有社区和网格显示操作按钮 |
|||
if (this.agencyObj.id === this.staffAgencyId) {//如果所选树的组织id和登录人员id相同，有权限 |
|||
this.showImportBtn = true |
|||
} else { |
|||
this.showImportBtn = false |
|||
} |
|||
} else if (this.agencyObj.level === 'grid') {//网格下 |
|||
if (this.agencyObj.pid === this.staffAgencyId) {//如果所选树的父级组织id和登录人员id相同，有权限 |
|||
this.showImportBtn = true |
|||
} else { |
|||
this.showImportBtn = false |
|||
} |
|||
} else { |
|||
this.showImportBtn = false |
|||
} |
|||
} |
|||
|
|||
const url = "/gov/org/neighborhood/neighborhoodlist" |
|||
|
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
level: this.agencyObj.level, |
|||
id: this.agencyObj.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.validTableDataNum = 0 |
|||
this.total = data.total |
|||
data.list.forEach(item => { |
|||
if (item.agencyId === this.staffAgencyId) { |
|||
item.showBtn = true |
|||
this.validTableDataNum++ |
|||
} else { |
|||
item.showBtn = false |
|||
} |
|||
|
|||
}); |
|||
this.tableData = data.list |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
this.tableLoading = false |
|||
}, |
|||
|
|||
checkSelect (row, index) { |
|||
let isChecked = false; |
|||
if (row.showBtn) { // 判断里面是否存在某个参数 |
|||
isChecked = true |
|||
} else { |
|||
isChecked = false |
|||
} |
|||
return isChecked |
|||
}, |
|||
|
|||
|
|||
diaClose () { |
|||
this.$refs.ref_form.resetData() |
|||
this.formShow = false |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
this.formTitle = '小区详情' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('detail', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.formTitle = '新增小区' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('add', null, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.formTitle = '修改小区' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('edit', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleToNextLevel (row) { |
|||
this.$emit('toNextLevel', row, 'community') |
|||
}, |
|||
|
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
this.$emit('refreshTree') |
|||
}, |
|||
|
|||
|
|||
deleteBatch () { |
|||
if (this.selection.length > 0) { |
|||
this.$confirm("确认删除选择的小区?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteCommunityBatch() |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
} else { |
|||
this.$message.warning('请先选择要删除的小区') |
|||
} |
|||
}, |
|||
selectAll (selection) { |
|||
|
|||
this.selection = selection |
|||
|
|||
|
|||
}, |
|||
selectionChange (selection) { |
|||
this.selection = selection |
|||
|
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteCommunity(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
}, |
|||
|
|||
async deleteCommunityBatch () { |
|||
let ids = [] |
|||
console.log(this.selection) |
|||
this.selection.forEach(element => { |
|||
|
|||
ids.push(element.neighborHoodId) |
|||
}); |
|||
|
|||
const url = "/gov/org/house/delete" |
|||
|
|||
let params = { |
|||
type: 'neighborHood', |
|||
ids: ids |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else if (code > 8000) { |
|||
this.$message({ |
|||
showClose: true, |
|||
message: msg, |
|||
duration: 0 |
|||
}) |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async deleteCommunity (row) { |
|||
const url = "/gov/org/neighborhood/neighborhooddel" |
|||
|
|||
let params = { |
|||
neighborHoodId: row.neighborHoodId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async handleDownQr (row, type) { |
|||
// const url = window.SITE_CONFIG['apiURL'] + `/gov/org/icneighborhood/createQrCode/${row.neighborHoodId}` |
|||
const url = '/gov/org/agency/create-qrcode' |
|||
const _id = type == 'community' ? row.id : row.neighborHoodId |
|||
const params = { |
|||
id: _id, |
|||
type |
|||
} |
|||
await axios({ |
|||
method: 'POST', |
|||
url: window.SITE_CONFIG['apiURL'] + url, |
|||
data: params, |
|||
responseType: 'blob' |
|||
}).then(res => { |
|||
console.log('res----1r', res) |
|||
if (res.headers["content-disposition"]) { |
|||
let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]) |
|||
console.log('filename', fileName) |
|||
this.download(res.data, fileName) //释放掉blob对象 |
|||
} else this.$message.error('下载失败') |
|||
// this.download(res.data, '1.png') |
|||
}) |
|||
}, |
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = this.agencyObj.label |
|||
title = title + '—小区列表' |
|||
|
|||
const url = "/gov/org/neighborhood/exportneighborhoodinfo" |
|||
let params = { |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
level: this.agencyObj.level, |
|||
id: this.agencyObj.id |
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, downFileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, downFileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = downFileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleExportModule (type) { |
|||
let title = '' |
|||
let url = "" |
|||
if (type === 'community') { |
|||
title = '小区导入模板' |
|||
url = '/gov/org/neighborhood/exporttemplate' |
|||
|
|||
} else if (type === 'building') { |
|||
title = '楼栋导入模板' |
|||
url = '/gov/org/building/exporttemplate' |
|||
|
|||
} else if (type === 'room') { |
|||
title = '房间导入模板' |
|||
url = '/gov/org/house/exporttemplate' |
|||
} |
|||
|
|||
let params = {} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file, type) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === 'application/vnd.ms-excel' |
|||
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error('请选择正确格式的文件') |
|||
this.files = null |
|||
this.fileName = '' |
|||
return false |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile (type) { |
|||
|
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
|
|||
this.$message({ |
|||
showClose: true, |
|||
message: '导入中，请到系统管理-导入记录中查看进度', |
|||
duration: 0 |
|||
}) |
|||
|
|||
|
|||
//清空上传列表 |
|||
let url = '' |
|||
|
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
fileFormData.append('orgId', this.agencyObj.id);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
fileFormData.append('orgType', this.agencyObj.level === 'grid' ? 'grid' : 'agency');//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
if (type === 'community') { |
|||
this.importCommunityLoading = true |
|||
this.$refs['upload_community'].clearFiles() |
|||
url = '/gov/org/icneighborhood/neighborhoodimport' |
|||
|
|||
|
|||
} else if (type === 'building') { |
|||
this.$refs['upload_building'].clearFiles() |
|||
url = '/gov/org/building/buildingimport' |
|||
this.importBuildingLoading = true |
|||
|
|||
} else if (type === 'room') { |
|||
this.$refs['upload_room'].clearFiles() |
|||
url = '/gov/org/house/houseimport' |
|||
this.importRoomLoading = true |
|||
} |
|||
|
|||
window.app.ajax.post2(url, fileFormData, |
|||
(data, rspMsg) => { |
|||
|
|||
if (data.code === 0 && data.msg == 'success') { |
|||
// this.$message.success('导入成功') |
|||
} else { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// message: rspMsg, |
|||
// duration: 0, |
|||
// type: "error" |
|||
// }) |
|||
// this.$message.error(rspMsg) |
|||
} |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
// this.showMessage(rspMsg) |
|||
if (type === 'community') { |
|||
this.importCommunityLoading = false |
|||
|
|||
} else if (type === 'building') { |
|||
this.importBuildingLoading = false |
|||
|
|||
} else if (type === 'room') { |
|||
this.importRoomLoading = false |
|||
} |
|||
}, |
|||
(rspMsg, data) => { |
|||
if (type === 'community') { |
|||
this.importCommunityLoading = false |
|||
|
|||
} else if (type === 'building') { |
|||
this.importBuildingLoading = false |
|||
|
|||
} else if (type === 'room') { |
|||
this.importRoomLoading = false |
|||
} |
|||
// this.$message.error(rspMsg) |
|||
}, { headers: { 'Content-Type': 'multipart/form-data' } }) |
|||
|
|||
|
|||
}, |
|||
|
|||
showMessage (msg) { |
|||
this.$alert(msg, '操作结果', { |
|||
confirmButtonText: '关闭', |
|||
callback: action => { |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} |
|||
}); |
|||
}, |
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
selection (val) { |
|||
|
|||
if (val.length > 0) { |
|||
this.showDeletBtn = true |
|||
} else { |
|||
this.showDeletBtn = false |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
staffAgencyId: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|||
</style> |
|||
|
|||
<style > |
|||
.el-message.is-closable .el-message__content { |
|||
line-height: 20px; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,716 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="div_search"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主姓名</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerName" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主手机</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerPhone" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房屋状态</div> |
|||
<div class="resi-cell-value"> |
|||
|
|||
<el-select class="item_width_1" |
|||
v-model="rentState" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in rentList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</div> |
|||
</div> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--search" |
|||
size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</div> |
|||
<div class="div_btn"> |
|||
|
|||
<el-button style="float:left" |
|||
class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd">新增房屋</el-button> |
|||
<div class="btn_upload" |
|||
v-if="showImportBtn"> |
|||
<el-button style="float:left" |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule">下载房屋模板</el-button> |
|||
<el-upload ref="upload" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="beforeUpload" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
:http-request="uploadFile"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--delete">导入房屋数据</el-button> |
|||
</el-upload> |
|||
</div> |
|||
<el-button style="float:left;margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="handleExport">导出</el-button> |
|||
<el-button style="float:left;margin-left:10px" |
|||
class="diy-button--more" |
|||
size="small" |
|||
@click="deleteBatch">批量删除</el-button> |
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
<el-table ref="ref_table" |
|||
:data="tableData" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
v-loading="tableLoading" |
|||
border |
|||
:height="tableHeight" |
|||
style="width: 100%" |
|||
@select-all="selectAll" |
|||
@selection-change="selectionChange"> |
|||
<el-table-column type="selection" |
|||
:selectable="checkSelect" |
|||
width="55"> |
|||
</el-table-column> |
|||
<el-table-column prop="houseNameShow" |
|||
label="房屋名称" |
|||
min-width="160"> |
|||
</el-table-column> |
|||
<el-table-column prop="neighborHoodName" |
|||
label="所属小区" |
|||
min-width="150"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingName" |
|||
label="所属楼栋" |
|||
width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="unitNumShow" |
|||
label="单元号" |
|||
width="70"> |
|||
</el-table-column> |
|||
<el-table-column prop="doorName" |
|||
label="门牌号" |
|||
width="70"> |
|||
</el-table-column> |
|||
<el-table-column prop="houseType" |
|||
label="类型" |
|||
width="50"> |
|||
</el-table-column> |
|||
<el-table-column prop="purpose" |
|||
label="用途" |
|||
width="50"> |
|||
</el-table-column> |
|||
<el-table-column prop="rentFlag" |
|||
label="房屋状态" |
|||
width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="ownerName" |
|||
label="房主姓名" |
|||
width="90"> |
|||
</el-table-column> |
|||
<el-table-column prop="ownerPhone" |
|||
label="房主电话" |
|||
width="110"> |
|||
</el-table-column> |
|||
<el-table-column prop="ownerIdCard" |
|||
label="身份证" |
|||
width="170"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" |
|||
class="div-table-button--detail" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button v-if="scope.row.showBtn" |
|||
type="text" |
|||
class="div-table-button--edit" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
|
|||
<el-button v-if="scope.row.showBtn" |
|||
type="text" |
|||
class="div-table-button--delete" |
|||
size="small" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
width="900px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<room-form ref="ref_form" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk"></room-form> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import roomForm from './roomForm' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
importRoomLoading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 0, |
|||
tableLoading: true, |
|||
|
|||
// showImportBtn: false,//是否显示操作按钮，根据登录人所属组织判断 |
|||
|
|||
agencyObj: {},//树所选的小区对象 |
|||
ownerName: '', |
|||
ownerPhone: '', |
|||
rentState: '', |
|||
validTableDataNum: 0,//有效的数据数量，即有权限操作的数据数量 |
|||
selection: [], |
|||
showDeletBtn: false, |
|||
|
|||
tableData: [], |
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增房屋', |
|||
|
|||
rentList: [ |
|||
{ |
|||
value: '1', |
|||
label: '出租' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '闲置' |
|||
}, |
|||
{ |
|||
value: '0', |
|||
label: '自住' |
|||
}, |
|||
] |
|||
|
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
roomForm |
|||
}, |
|||
async mounted () { |
|||
|
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.$store.state.inIframe ? this.clientHeight - 300 + this.iframeHeight : this.clientHeight - 300 |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
methods: { |
|||
//重置搜索条件 |
|||
resetSearch () { |
|||
this.ownerName = '' |
|||
this.ownerPhone = '' |
|||
this.rentState = '' |
|||
|
|||
this.pageSize = 10 |
|||
this.pageNo = 0 |
|||
// this.loadTable() |
|||
}, |
|||
|
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
|
|||
checkSelect (row, index) { |
|||
let isChecked = false; |
|||
if (row.showBtn) { // 判断里面是否存在某个参数 |
|||
isChecked = true |
|||
} else { |
|||
isChecked = false |
|||
} |
|||
return isChecked |
|||
}, |
|||
|
|||
async loadTable (fromTree, treeObj, ownerName, ownerPhone, rentState) { |
|||
|
|||
this.tableLoading = true |
|||
this.ownerName = ownerName |
|||
this.ownerPhone = ownerPhone |
|||
this.rentState = rentState |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
|
|||
buildingId: this.agencyObj.id |
|||
} |
|||
if (fromTree) { |
|||
this.agencyObj = treeObj |
|||
// if (this.agencyObj.level === 'community') {//只有社区和网格显示操作按钮 |
|||
// if (this.agencyObj.id === this.staffAgencyId) {//如果所选树的组织id和登录人员id相同，有权限 |
|||
// this.showImportBtn = true |
|||
// } else { |
|||
// this.showImportBtn = false |
|||
// } |
|||
// } else if (this.agencyObj.level === 'grid') {//网格下 |
|||
// if (this.agencyObj.pid === this.staffAgencyId) {//如果所选树的父级组织id和登录人员id相同，有权限 |
|||
// this.showImportBtn = true |
|||
// } else { |
|||
// this.showImportBtn = false |
|||
// } |
|||
// } else { |
|||
// this.showImportBtn = false |
|||
// } |
|||
} else { |
|||
|
|||
params.ownerName = ownerName |
|||
params.ownerPhone = ownerPhone |
|||
params.rentState = rentState |
|||
} |
|||
|
|||
const url = "/gov/org/house/houselist" |
|||
|
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.validTableDataNum = 0 |
|||
data.list.forEach(item => { |
|||
item.houseNameShow = item.neighborHoodName + item.buildingName + item.unitNum + '单元' + item.doorName |
|||
item.unitNumShow = item.unitNum + '单元' |
|||
if (item.agencyId === this.staffAgencyId) { |
|||
item.showBtn = true |
|||
this.validTableDataNum++ |
|||
} else { |
|||
item.showBtn = false |
|||
} |
|||
|
|||
}); |
|||
this.tableData = data.list |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
this.tableLoading = false |
|||
}, |
|||
|
|||
diaClose () { |
|||
this.$refs.ref_form.resetData() |
|||
this.formShow = false |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
this.formTitle = '房屋详情' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('detail', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd () { |
|||
|
|||
this.formTitle = '新增房屋' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('add', null, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.formTitle = '修改房屋' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('edit', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
}, |
|||
|
|||
|
|||
deleteBatch () { |
|||
if (this.selection.length > 0) { |
|||
this.$confirm("确认删除选择的房屋?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteCommunityBatch() |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
} else { |
|||
this.$message.warning('请先选择要删除的房屋') |
|||
} |
|||
}, |
|||
selectAll (selection) { |
|||
this.selection = selection |
|||
|
|||
}, |
|||
selectionChange (selection) { |
|||
this.selection = selection |
|||
|
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteRoom(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
}, |
|||
|
|||
async deleteCommunityBatch () { |
|||
let ids = [] |
|||
this.selection.forEach(element => { |
|||
|
|||
ids.push(element.houseId) |
|||
}); |
|||
|
|||
const url = "/gov/org/house/delete" |
|||
|
|||
let params = { |
|||
type: 'house', |
|||
ids: ids |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else if (code > 8000) { |
|||
this.$message({ |
|||
showClose: true, |
|||
message: msg, |
|||
duration: 0 |
|||
}) |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
async deleteRoom (row) { |
|||
const url = "/gov/org/house/housedel" |
|||
|
|||
let params = { |
|||
houseId: row.houseId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = this.agencyObj.label |
|||
title = title + '—房屋列表' |
|||
|
|||
const url = "/gov/org/house/exporthouseinfo" |
|||
let params = { |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
rentState: this.rentState, |
|||
buildingId: this.agencyObj.id |
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleExportModule () { |
|||
let title = '' |
|||
title = '房屋模板' |
|||
|
|||
const url = "/gov/org/house/exporttemplate" |
|||
let params = {} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === 'application/vnd.ms-excel' |
|||
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error('请选择正确格式的文件') |
|||
return false |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile () { |
|||
|
|||
|
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
|
|||
this.$message({ |
|||
showClose: true, |
|||
message: '导入中，请到系统管理-导入记录中查看进度', |
|||
duration: 0 |
|||
}) |
|||
|
|||
//清空上传列表 |
|||
this.$refs['upload'].clearFiles() |
|||
|
|||
var url = '/gov/org/house/houseimport' |
|||
|
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
fileFormData.append('orgId', this.agencyObj.id);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
fileFormData.append('orgType', this.agencyObj.level);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
this.importRoomLoading = true |
|||
window.app.ajax.post2(url, fileFormData, |
|||
(data, rspMsg) => { |
|||
|
|||
if (data.code === 0 && data.msg == 'success') { |
|||
// this.$message.success('导入成功') |
|||
} else { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// message: rspMsg, |
|||
// duration: 0, |
|||
// type: "error" |
|||
// }) |
|||
// this.$message.error(rspMsg) |
|||
} |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
this.importRoomLoading = false |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.importRoomLoading = false |
|||
}, { headers: { 'Content-Type': 'multipart/form-data' } }) |
|||
|
|||
|
|||
}, |
|||
|
|||
showMessage (msg) { |
|||
this.$alert(msg, '操作结果', { |
|||
confirmButtonText: '关闭', |
|||
callback: action => { |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
selection (val) { |
|||
|
|||
if (val.length > 0) { |
|||
this.showDeletBtn = true |
|||
} else { |
|||
this.showDeletBtn = false |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
staffAgencyId: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
showImportBtn: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="btn-close" @click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<div class="wrap2"> |
|||
<div class="title"> |
|||
<span>人员列表</span> |
|||
</div> |
|||
|
|||
<div class="content"> |
|||
<div class="tb"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
@operate="toUserInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<div class="m-pagination"> |
|||
<el-pagination |
|||
:current-page="pageNo" |
|||
:page-size="pageSize" |
|||
background |
|||
layout="prev, pager, next" |
|||
@size-change="pageSizeChangeHandleNew" |
|||
@current-change="pageCurrentChangeHandleNew" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
|
|||
<people-more |
|||
v-if="showedPeopleInfo && currentPepeleId" |
|||
:userId="currentPepeleId" |
|||
:gridName="gridName" |
|||
@close="showedPeopleInfo = false" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import peopleMore from "@/views/modules/shequ/cpts/people-more"; |
|||
import cptTb from "@/views/modules/visual/cpts/tb"; |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
name: "people-list", |
|||
props: { |
|||
configId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
buildingId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
gridName: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
cptTb, |
|||
peopleMore, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
showedPeopleInfo: false, |
|||
currentPepeleId: "", |
|||
currentPepeleGridName: "", |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "center", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
header: ["序号", "姓名", "单元", "门牌号", "手机", "身份证", "操作"], |
|||
|
|||
loading: false, |
|||
pageNo: 0, |
|||
pageSize: 12, |
|||
total: 0, |
|||
list: [], |
|||
srcList: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
maxTableHeight() { |
|||
return this.clientHeight - 450; |
|||
return 420; |
|||
}, |
|||
...mapGetters(["clientHeight"]), |
|||
}, |
|||
|
|||
watch: { |
|||
userId() { |
|||
this.getApiData(); |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
pageSizeChangeHandleNew(val) { |
|||
this.pageNo = 1; |
|||
this.pageSize = val; |
|||
}, |
|||
pageCurrentChangeHandleNew(val) { |
|||
this.pageNo = val; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handlePeopleItem(uid) { |
|||
console.log(uid); |
|||
this.currentPepeleId = uid; |
|||
|
|||
this.showedPeopleInfo = true; |
|||
}, |
|||
|
|||
toUserInfo(index) { |
|||
let uid = this.srcList[index].userId; |
|||
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` }); |
|||
}, |
|||
|
|||
handleClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData() { |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const url = "/epmetuser/statsresiwarn/alluserwarnlist"; |
|||
let params = { |
|||
buildingId: this.buildingId, |
|||
configId: this.configId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
const { list, total } = data; |
|||
this.list = list.map((item) => { |
|||
return [ |
|||
{ type: "index" }, |
|||
item.residentName, |
|||
item.unitName, |
|||
item.doorName, |
|||
item.mobile, |
|||
item.idCard, |
|||
{ type: "operate", list: ["查看更多"] }, |
|||
]; |
|||
}); |
|||
this.total = total; |
|||
this.srcList = list; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/warning-people-list.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<div class="btn-close" @click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<div class="wrap2"> |
|||
<div class="title"> |
|||
<span>人员列表</span> |
|||
</div> |
|||
|
|||
<div class="content"> |
|||
<div class="tb"> |
|||
<el-table |
|||
:data="list" |
|||
border |
|||
style="width: 100%;margin-top:20px;" |
|||
class="resi-table" |
|||
> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
align="center" |
|||
width="50" |
|||
/> |
|||
<el-table-column prop="residentName" label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column prop="unitName" label="单元"> </el-table-column> |
|||
<el-table-column prop="doorName" label="门牌号" width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="mobile" label="手机"> </el-table-column> |
|||
<el-table-column prop="idCard" label="身份证"> </el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
width="120" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
@click="handlePeopleItem(scope.row.userId)" |
|||
type="text" |
|||
size="small" |
|||
>查看更多</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<div class="pagination"> |
|||
<el-pagination |
|||
:current-page="pageNo" |
|||
:page-size="pageSize" |
|||
background |
|||
layout="prev, pager, next" |
|||
@size-change="pageSizeChangeHandleNew" |
|||
@current-change="pageCurrentChangeHandleNew" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<people-more |
|||
v-if="showedPeopleInfo && currentPepeleId" |
|||
:userId="currentPepeleId" |
|||
:gridName="gridName" |
|||
@close="showedPeopleInfo = false" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import peopleMore from "@/views/modules/shequ/cpts/people-more"; |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
name: "people-list", |
|||
props: { |
|||
configId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
buildingId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
gridName: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
peopleMore, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
showedPeopleInfo: false, |
|||
currentPepeleId: "", |
|||
currentPepeleGridName: "", |
|||
|
|||
loading: false, |
|||
pageNo: 0, |
|||
pageSize: 12, |
|||
total: 0, |
|||
list: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
maxTableHeight() { |
|||
return this.clientHeight - 450; |
|||
return 420; |
|||
}, |
|||
...mapGetters(["clientHeight"]), |
|||
}, |
|||
|
|||
watch: { |
|||
userId() { |
|||
this.getApiData(); |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
pageSizeChangeHandleNew(val) { |
|||
this.pageNo = 1; |
|||
this.pageSize = val; |
|||
}, |
|||
pageCurrentChangeHandleNew(val) { |
|||
this.pageNo = val; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handlePeopleItem(uid) { |
|||
console.log(uid); |
|||
this.currentPepeleId = uid; |
|||
|
|||
this.showedPeopleInfo = true; |
|||
}, |
|||
|
|||
handleClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData() { |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const url = "/epmetuser/statsresiwarn/alluserwarnlist"; |
|||
let params = { |
|||
buildingId: this.buildingId, |
|||
configId: this.configId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
const { list, total } = data; |
|||
this.list = list; |
|||
this.total = total; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/people-info.scss" scoped></style> |
|||
Loading…
Reference in new issue