xuhuajiao
/
localization-management-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

查询机编辑器优化/人脸识别

master
xuhuajiao 3 days ago
parent
7db5b0a3cd
commit
c6b05f569a
6 changed files with 512 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      package.json
  2. 49
      src/api/faceRecognition/index.js
  3. 328
      src/components/quillEditor/index.vue
  4. 180
      src/components/quillEditor/index3.vue
  5. 111
      src/views/faceRecognition/personInfoManage.vue
  6. 18
      src/views/inquiryMachine/content.vue

3
package.json
View File

@ -31,6 +31,7 @@
"@lapo/asn1js": "^1.2.1", "@lapo/asn1js": "^1.2.1",
"@pdf-lib/fontkit": "^1.1.1", "@pdf-lib/fontkit": "^1.1.1",
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"@tinymce/tinymce-vue": "^3.0.1",
"@vue-office/docx": "^1.6.0", "@vue-office/docx": "^1.6.0",
"@vue-office/excel": "^1.6.5", "@vue-office/excel": "^1.6.5",
"axios": "^0.21.1", "axios": "^0.21.1",
@ -76,7 +77,7 @@
"print-js": "^1.6.0", "print-js": "^1.6.0",
"qrcodejs2": "^0.0.2", "qrcodejs2": "^0.0.2",
"qs": "^6.10.1", "qs": "^6.10.1",
"quill": "^1.3.7",
"quill": "^2.0.0-dev.3",
"quill-image-resize-module": "^3.0.0", "quill-image-resize-module": "^3.0.0",
"screenfull": "4.2.0", "screenfull": "4.2.0",
"sm-crypto": "^0.3.2", "sm-crypto": "^0.3.2",

49
src/api/faceRecognition/index.js
View File

@ -0,0 +1,49 @@
import request from '@/utils/request'
import qs from 'qs'
// // 编辑智慧大屏后台参数
// export function FetchEditScreenSetting(parameter) {
// return request({
// url: 'api/screenSetting/editScreenSetting',
// method: 'post',
// data: parameter
// })
// }
export function add(data) {
return request({
url: 'api/person/editPersonInfo',
method: 'post',
data
})
}
export function edit(data) {
return request({
url: 'api/person/editPersonInfo',
method: 'post',
data
})
}
// export function del(data) {
// return request({
// url: 'api/queryMachine/deleteQueryTopic',
// method: 'post',
// data
// })
// }
// 根据id查看人员详细信息
export function FetchPersonInfoById(params) {
return request({
url: 'api/person/getPersonInfoById' + '?' + qs.stringify(params, { indices: false }),
method: 'get'
})
}
export default {
add,
edit,
FetchPersonInfoById
}

328
src/components/quillEditor/index.vue
View File

@ -1,180 +1,236 @@
<template> <template>
<quill-editor
:id="randomId(3)"
:ref="editorRef"
v-model="content"
:options="editorOption"
class="editor"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
/>
<!-- <keep-alive> -->
<div>
<div ref="editorContainer" class="editor" style="height: 450px; overflow-y: scroll;" />
</div>
<!-- </keep-alive> -->
</template> </template>
<script> <script>
// https://blog.51cto.com/cplvfx/5931866
// https://www.jianshu.com/p/ceb30ec66d20
// https://www.cnblogs.com/chenxdnote/p/17611756.html
import { Quill, quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
// 自定义的字体和文字大小样式
import { upload } from '@/utils/upload'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import '@/assets/styles/quillEditor.css' import '@/assets/styles/quillEditor.css'
// import * as Quill from 'quill'
// quill编辑器的字体
// 'Times-New-Roman',
var fonts = [ var fonts = [
'SimSun',
'SimHei',
'Microsoft-YaHei',
'KaiTi',
'FangSong',
'Arial',
'sans-serif'
'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif'
] ]
// 自定义字号的大小 // 自定义字号的大小
var sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px'] var sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px']
var Size = Quill.import('formats/size') var Size = Quill.import('formats/size')
Size.whitelist = sizes Size.whitelist = sizes
var Font = Quill.import('formats/font') var Font = Quill.import('formats/font')
Font.whitelist = fonts // 将字体加入到白名单 Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true) Quill.register(Font, true)
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block']
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: '-1' }, { indent: '+1' }],
[{ size: sizes }], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: fonts }], // 显示字体选择
[{ align: [] }], // 对齐方式-----[{ align: [] }]
['clean'], // 清除文本格式-----['clean']
['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video']
]
// 工具栏功能提示
const titleConfig = [
{ Choice: '.ql-bold', title: '加粗' },
{ Choice: '.ql-italic', title: '斜体' },
{ Choice: '.ql-underline', title: '下划线' },
{ Choice: '.ql-header', title: '段落格式' },
{ Choice: '.ql-strike', title: '删除线' },
{ Choice: '.ql-blockquote', title: '块引用' },
{ Choice: '.ql-code', title: '插入代码' },
{ Choice: '.ql-code-block', title: '插入代码段' },
{ Choice: '.ql-font', title: '字体' },
{ Choice: '.ql-size', title: '字体大小' },
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },
{ Choice: '.ql-direction', title: '文本方向' },
{ Choice: '.ql-header[value="1"]', title: 'h1' },
{ Choice: '.ql-header[value="2"]', title: 'h2' },
{ Choice: '.ql-align', title: '对齐方式' },
{ Choice: '.ql-color', title: '字体颜色' },
{ Choice: '.ql-background', title: '背景颜色' },
{ Choice: '.ql-image', title: '图像' },
{ Choice: '.ql-upload', title: '文件' },
{ Choice: '.ql-link', title: '添加链接' },
{ Choice: '.ql-formula', title: '插入公式' },
{ Choice: '.ql-clean', title: '清除字体格式' },
{ Choice: '.ql-script[value="sub"]', title: '下标' },
{ Choice: '.ql-script[value="super"]', title: '上标' },
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]
const titleConfig = {
'ql-bold': '加粗',
'ql-color': '颜色',
'ql-font': '字体',
'ql-code': '插入代码',
'ql-italic': '斜体',
'ql-link': '添加链接',
'ql-background': '颜色',
'ql-size': '字体大小',
'ql-strike': '删除线',
'ql-script': '上标/下标',
'ql-underline': '下划线',
'ql-blockquote': '引用',
'ql-header': '标题',
'ql-indent': '缩进',
'ql-list': '列表',
'ql-align': '文本对齐',
'ql-direction': '文本方向',
'ql-code-block': '代码块',
'ql-formula': '公式',
'ql-image': '图片',
'ql-video': '视频',
'ql-clean': '清除字体样式',
'ql-upload': '文件',
'ql-table': '插入表格',
'ql-table-insert-row': '插入行',
'ql-table-insert-column': '插入列',
'ql-table-delete-row': '删除行',
'ql-table-delete-column': '删除列'
}
export default { export default {
name: 'TestQuillEditor',
components: { quillEditor },
name: 'Editor',
props: { props: {
// 编辑器的内容
editorContent: {
type: String,
required: true
},
editorRef: {
value: {
type: String, type: String,
required: true
default: ''
} }
}, },
data() { data() {
return { return {
content: this.editorContent,
editorOption: {
quill: null,
file: null,
options: {
theme: 'snow', theme: 'snow',
modules: { modules: {
toolbar: toolbarOptions
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
[{ header: 1 }, { header: 2 }],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ color: [] }, { background: [] }],
[{ size: sizes }],
[{ font: fonts }],
[{ align: [] }],
['link', 'image'],
['clean'],
[
{ table: 'TD' },
{ 'table-insert-row': 'TIR' },
{ 'table-insert-column': 'TIC' },
{ 'table-delete-row': 'TDR' },
{ 'table-delete-column': 'TDC' }
]
],
handlers: {
image: function(value) {
if (value) {
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
input.addEventListener('change', (e) => {
const file = e.target.files[0]
if (file) {
this.file = file
console.log('选中的图片文件:', file)
console.log('文件名称:', file.name)
console.log('文件大小:', file.size)
console.log('文件类型:', file.type)
// 执行上传逻辑
const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
upload(linkSrc + '/api/fileRelevant/uploadOtherImg', this.file).then(res => {
if (res.data.code === 200) {
const imageUrl = linkSrc + '/api/fileRelevant/getImg?imgType=1&imgId=' + res.data.data
console.log('图片URL:', imageUrl)
const range = this.quill.getSelection()
if (range) {
// 在光标位置插入图片
this.quill.insertEmbed(range.index, 'image', imageUrl)
// 移动光标到图片后面
this.quill.setSelection(range.index + 1)
} else {
this.quill.insertEmbed(this.quill.getLength(), 'image', imageUrl)
}
}
}).catch(err => {
console.error('上传失败:', err)
})
}
})
input.click()
} else {
this.quill.format('image', false)
} }
}, },
titleConfig
table: function(val) {
this.quill.getModule('table').insertTable(2, 3)
},
'table-insert-row': function() {
this.quill.getModule('table').insertRowBelow()
},
'table-insert-column': function() {
this.quill.getModule('table').insertColumnRight()
},
'table-delete-row': function() {
this.quill.getModule('table').deleteRow()
},
'table-delete-column': function() {
this.quill.getModule('table').deleteColumn()
} }
}
},
table: true
}, },
computed: {
// 当前富文本实例
editor() {
return this.$refs.editorRef.quillEditor
placeholder: ''
},
titleConfig
} }
}, },
watch: { watch: {
editorContent() {
this.content = this.editorContent
value(newVal) {
if (newVal === this.quill.root.innerHTML) return
this.quill.setContents([])
this.quill.clipboard.dangerouslyPasteHTML(0, newVal)
} }
}, },
mounted() { mounted() {
document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
for (const item of this.titleConfig) {
const tip = document.querySelector('.quill-editor ' + item.Choice)
if (!tip) continue
tip.setAttribute('title', item.title)
const dom = this.$refs.editorContainer
this.quill = new Quill(dom, this.options)
if (this.value) {
this.quill.clipboard.dangerouslyPasteHTML(this.value)
} }
// 监听内容变化并发射事件
// this.quill.on('text-change', () => {
// const content = this.quill.root.innerHTML
// console.log('content', content)
// // this.$emit('input', content)
// // this.$emit('contentData', content)
// })
// 设置表格相关图标
this.$el.querySelector('.ql-table-insert-row').innerHTML =
`<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6306" width="18" height="18"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></svg>`
this.$el.querySelector('.ql-table-insert-column').innerHTML =
`<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6509" width="18" height="18"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="6510"></path></svg>`
this.$el.querySelector('.ql-table-delete-row').innerHTML =
`<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="18" height="18"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>`
this.$el.querySelector('.ql-table-delete-column').innerHTML =
`<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" width="18" height="18"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="6756"></path></svg>`
this.addQuillTitle()
}, },
// activated() {
// if (this.value && this.quill) {
// this.quill.clipboard.dangerouslyPasteHTML(this.value)
// }
// },
methods: { methods: {
randomId(len) {
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var tempLen = chars.length
var tempStr = ''
for (var i = 0; i < len; ++i) {
tempStr += chars.charAt(Math.floor(Math.random() * tempLen))
addQuillTitle() {
const oToolBar = document.querySelector('.ql-toolbar')
const aButton = oToolBar.querySelectorAll('button')
const aSelect = oToolBar.querySelectorAll('select')
aButton.forEach(function(item) {
if (item.className === 'ql-script') {
item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')
} else if (item.className === 'ql-indent') {
item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')
} else {
item.title = titleConfig[item.classList[0]]
} }
return tempStr
})
aSelect.forEach(function(item) {
item.parentNode.title = titleConfig[item.classList[0]]
})
},
getHtmlContent() {
return this.quill.root.innerHTML
}, },
// 准备富文本编辑器
onEditorReady() {},
// 富文本编辑器 失去焦点事件
onEditorBlur() {},
// 富文本编辑器 获得焦点事件
onEditorFocus() {},
// 富文本编辑器 内容改变事件
onEditorChange({ html }) {
// 内容改变事件
// console.log('内容改变事件');
this.$emit('input', this.content)
getDeltaContent() {
return this.quill.getContents()
} }
} }
} }
</script> </script>
<style>
.ql-editor{
height: 400px;
}
</style>
<style scoped>
</style>

180
src/components/quillEditor/index3.vue
View File

@ -0,0 +1,180 @@
<template>
<quill-editor
:id="randomId(3)"
:ref="editorRef"
v-model="content"
:options="editorOption"
class="editor"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
/>
</template>
<script>
// https://blog.51cto.com/cplvfx/5931866
// https://www.jianshu.com/p/ceb30ec66d20
// https://www.cnblogs.com/chenxdnote/p/17611756.html
import { Quill, quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
// 自定义的字体和文字大小样式
import '@/assets/styles/quillEditor.css'
// import * as Quill from 'quill'
// quill编辑器的字体
// 'Times-New-Roman',
var fonts = [
'SimSun',
'SimHei',
'Microsoft-YaHei',
'KaiTi',
'FangSong',
'Arial',
'sans-serif'
]
// 自定义字号的大小
var sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px']
var Size = Quill.import('formats/size')
Size.whitelist = sizes
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block']
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: '-1' }, { indent: '+1' }],
[{ size: sizes }], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: fonts }], // 显示字体选择
[{ align: [] }], // 对齐方式-----[{ align: [] }]
['clean'], // 清除文本格式-----['clean']
['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video']
]
// 工具栏功能提示
const titleConfig = [
{ Choice: '.ql-bold', title: '加粗' },
{ Choice: '.ql-italic', title: '斜体' },
{ Choice: '.ql-underline', title: '下划线' },
{ Choice: '.ql-header', title: '段落格式' },
{ Choice: '.ql-strike', title: '删除线' },
{ Choice: '.ql-blockquote', title: '块引用' },
{ Choice: '.ql-code', title: '插入代码' },
{ Choice: '.ql-code-block', title: '插入代码段' },
{ Choice: '.ql-font', title: '字体' },
{ Choice: '.ql-size', title: '字体大小' },
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },
{ Choice: '.ql-direction', title: '文本方向' },
{ Choice: '.ql-header[value="1"]', title: 'h1' },
{ Choice: '.ql-header[value="2"]', title: 'h2' },
{ Choice: '.ql-align', title: '对齐方式' },
{ Choice: '.ql-color', title: '字体颜色' },
{ Choice: '.ql-background', title: '背景颜色' },
{ Choice: '.ql-image', title: '图像' },
{ Choice: '.ql-upload', title: '文件' },
{ Choice: '.ql-link', title: '添加链接' },
{ Choice: '.ql-formula', title: '插入公式' },
{ Choice: '.ql-clean', title: '清除字体格式' },
{ Choice: '.ql-script[value="sub"]', title: '下标' },
{ Choice: '.ql-script[value="super"]', title: '上标' },
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]
export default {
name: 'TestQuillEditor',
components: { quillEditor },
props: {
// 编辑器的内容
editorContent: {
type: String,
required: true
},
editorRef: {
type: String,
required: true
}
},
data() {
return {
content: this.editorContent,
editorOption: {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
},
titleConfig
}
},
computed: {
// 当前富文本实例
editor() {
return this.$refs.editorRef.quillEditor
}
},
watch: {
editorContent() {
this.content = this.editorContent
}
},
mounted() {
document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
for (const item of this.titleConfig) {
const tip = document.querySelector('.quill-editor ' + item.Choice)
if (!tip) continue
tip.setAttribute('title', item.title)
}
},
methods: {
randomId(len) {
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var tempLen = chars.length
var tempStr = ''
for (var i = 0; i < len; ++i) {
tempStr += chars.charAt(Math.floor(Math.random() * tempLen))
}
return tempStr
},
// 准备富文本编辑器
onEditorReady() {},
// 富文本编辑器 失去焦点事件
onEditorBlur() {},
// 富文本编辑器 获得焦点事件
onEditorFocus() {},
// 富文本编辑器 内容改变事件
onEditorChange({ html }) {
// 内容改变事件
// console.log('内容改变事件');
this.$emit('input', this.content)
}
}
}
</script>
<style>
.ql-editor{
height: 400px;
}
</style>

111
src/views/faceRecognition/personInfoManage.vue
View File

@ -2,17 +2,17 @@
<div class="app-container row-container"> <div class="app-container row-container">
<div class="head-container"> <div class="head-container">
<div class="head-search" style="align-items: center; "> <div class="head-search" style="align-items: center; ">
<el-select v-model="query.status" clearable size="small" placeholder="用户类型" class="filter-item" style="width: 120px;" @change="crud.toQuery">
<el-select v-model="query.personType" clearable size="small" placeholder="用户类型" class="filter-item" style="width: 140px;" @change="crud.toQuery">
<i slot="prefix" class="iconfont icon-zhuangtai" /> <i slot="prefix" class="iconfont icon-zhuangtai" />
<el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-input v-model="query.blurry" size="small" clearable placeholder="输入证号、姓名、身份证号搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 260px;" @keyup.enter.native="crud.toQuery" />
<el-input v-model="query.search" size="small" clearable placeholder="输入证号、姓名、身份证号搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 260px;" @keyup.enter.native="crud.toQuery" />
<rrOperation /> <rrOperation />
<el-button size="mini" class="face-search" style="background: transparent; margin-right: 10px;" @click="handleFaceSearch"> <el-button size="mini" class="face-search" style="background: transparent; margin-right: 10px;" @click="handleFaceSearch">
<i class="iconfont icon-shenfen" /> <i class="iconfont icon-shenfen" />
人脸查询 人脸查询
</el-button> </el-button>
<el-checkbox v-model="fiterBlackUser" label="暂无照片用户" name="fiterBlackUser" @change="handleFiterBlackUser($event)" />
<el-checkbox v-model="query.isphoto" label="暂无照片用户" name="isphoto" @change="crud.toQuery" />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
<template v-slot:middle> <template v-slot:middle>
@ -45,26 +45,26 @@
<el-form-item label="馆代码" prop="libcode"> <el-form-item label="馆代码" prop="libcode">
<el-input v-model="form.libcode" disabled placeholder="系统自动输入" /> <el-input v-model="form.libcode" disabled placeholder="系统自动输入" />
</el-form-item> </el-form-item>
<el-form-item label="读者证号" prop="code">
<el-input v-model="form.code" placeholder="请输入" />
<el-form-item label="读者证号" prop="barcode">
<el-input v-model="form.barcode" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入" />
<el-form-item label="姓名" prop="personName">
<el-input v-model="form.personName" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="身份证号" prop="card">
<el-input v-model="form.card" placeholder="请输入" />
<el-form-item label="身份证号" prop="idcard">
<el-input v-model="form.idcard" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="联系方式" prop="phone"> <el-form-item label="联系方式" prop="phone">
<el-input v-model="form.phone" placeholder="请输入" /> <el-input v-model="form.phone" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="form.sex">
<el-form-item label="性别" prop="personSex">
<el-radio-group v-model="form.personSex">
<el-radio :label="1">男</el-radio> <el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio> <el-radio :label="0">女</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="用户类型" prop="type">
<el-select v-model="form.type" placeholder="请选择">
<el-form-item label="用户类型" prop="personType">
<el-select v-model="form.personType" placeholder="请选择">
<el-option <el-option
v-for="(item,index) in userTypeOptions" v-for="(item,index) in userTypeOptions"
:key="index" :key="index"
@ -75,7 +75,11 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="right-user-img"> <div class="right-user-img">
<img src="~@/assets/images/user.jpg" alt="">
<img :src="imageUrl || require('@/assets/images/user.jpg')" alt="人员照片">
<div class="upload-btn" style="margin: 0 0 10px 0;">
<input id="upFile" type="file" name="upFile" accept="image/*" @change="changeFile($event)">
<el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />选择上传照片</el-button>
</div>
<el-button type="primary"><i class="iconfont icon-yulan" />摄像头拍摄</el-button> <el-button type="primary"><i class="iconfont icon-yulan" />摄像头拍摄</el-button>
</div> </div>
</div> </div>
@ -88,10 +92,10 @@
<el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 330px)" :data="crud.data" @selection-change="crud.selectionChangeHandler"> <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 330px)" :data="crud.data" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" align="center" width="55" /> <el-table-column type="selection" align="center" width="55" />
<el-table-column type="index" label="序号" width="55" /> <el-table-column type="index" label="序号" width="55" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="personName" label="姓名" />
<el-table-column prop="code" label="性别" /> <el-table-column prop="code" label="性别" />
<el-table-column prop="type" label="读者证号" />
<el-table-column prop="cardNum" label="身份证号" />
<el-table-column prop="barcode" label="读者证号" />
<el-table-column prop="idcard" label="身份证号" />
<el-table-column prop="libcode" label="馆代码" /> <el-table-column prop="libcode" label="馆代码" />
<el-table-column prop="columnOrders" label="已存照片" align="center" /> <el-table-column prop="columnOrders" label="已存照片" align="center" />
<el-table-column prop="columnOrders" label="用户类型" align="center" /> <el-table-column prop="columnOrders" label="用户类型" align="center" />
@ -118,7 +122,7 @@
</template> </template>
<script> <script>
import crudColumn from '@/api/inquiryMachine/column'
import crudFace from '@/api/faceRecognition/index'
import CRUD, { presenter, header, form, crud } from '@crud/crud' import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
@ -129,13 +133,14 @@ import BatchImport from './module/batchImport'
// import { exportFile } from '@/utils/index' // import { exportFile } from '@/utils/index'
// import qs from 'qs' // import qs from 'qs'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
const defaultForm = { id: null, libcode: null, code: null, name: null, card: null, phone: null, sex: 1, type: 1 }
const defaultForm = { personId: null, libcode: null, barcode: null, personName: null, personPhotoUrl: null, idcard: null, phone: null, personSex: 1, personType: 1 }
export default { export default {
name: 'PersonInfoManage', name: 'PersonInfoManage',
components: { pagination, crudOperation, rrOperation, FaceSearch, SelfRegister, BatchImport }, components: { pagination, crudOperation, rrOperation, FaceSearch, SelfRegister, BatchImport },
cruds() { cruds() {
return CRUD({ title: '人员信息', url: 'api/person/initPersonInfo', crudMethod: { ...crudColumn }, optShow: {
return CRUD({ title: '人员信息', url: 'api/person/initPersonInfo', crudMethod: { ...crudFace }, optShow: {
add: true, add: true,
edit: true, edit: true,
del: false, del: false,
@ -157,21 +162,24 @@ export default {
{ value: 2, label: 'VIP用户' }, { value: 2, label: 'VIP用户' },
{ value: 3, label: '黑名单用户' } { value: 3, label: '黑名单用户' }
], ],
fiterBlackUser: false,
rules: { rules: {
libcode: [ libcode: [
{ required: true, message: '馆代码不可为空', trigger: 'blur' } { required: true, message: '馆代码不可为空', trigger: 'blur' }
], ],
code: [
barcode: [
{ required: true, message: '读者证号不可为空', trigger: 'blur' } { required: true, message: '读者证号不可为空', trigger: 'blur' }
], ],
name: [
personName: [
{ required: true, message: '姓名不可为空', trigger: 'blur' } { required: true, message: '姓名不可为空', trigger: 'blur' }
], ],
type: [
personType: [
{ required: true, message: '请选择用户类型', trigger: 'change' } { required: true, message: '请选择用户类型', trigger: 'change' }
] ]
}
},
file: null,
fileNames: '',
filePath: '',
imageUrl: null
} }
}, },
computed: { computed: {
@ -186,9 +194,14 @@ export default {
}, },
methods: { methods: {
[CRUD.HOOK.beforeRefresh]() { [CRUD.HOOK.beforeRefresh]() {
this.crud.query.libcode = this.user.fonds.fondsNo
}, },
[CRUD.HOOK.afterRefresh]() { [CRUD.HOOK.afterRefresh]() {
}, },
// 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
form.libcode = this.user.fonds.fondsNo
},
// 新增前 // 新增前
[CRUD.HOOK.beforeToAdd](crud, form) { [CRUD.HOOK.beforeToAdd](crud, form) {
}, },
@ -197,11 +210,32 @@ export default {
}, },
// 提交前做的操作 // 提交前做的操作
[CRUD.HOOK.afterValidateCU](crud) { [CRUD.HOOK.afterValidateCU](crud) {
if (crud.form.personPhotoUrl === '' || crud.form.personPhotoUrl === null) {
this.$message({ message: '请选择上传照片', type: 'error', offset: 8 })
return false
}
console.log(crud.form) console.log(crud.form)
return true
return false
}, },
handleFiterBlackUser(val) {
console.log(val)
async changeFile(e) {
const file = e.target.files[0]
if (file && file.type.startsWith('image/')) {
this.file = e.target.files[0]
this.fileNames = this.file.name
const fileBase64 = await this.getBase64(this.file)
this.imageUrl = fileBase64
upload(this.baseApi + '/api/fileRelevant/uploadFaceImg', this.file).then(res => {
console.log(res)
if (res.data.code === 200) {
this.form.personPhotoUrl = res.data.data
}
})
} else {
this.$message({ message: '只可上传图片', type: 'error', offset: 8 })
this.imageUrl = null
}
}, },
handleFaceSearch() { handleFaceSearch() {
this.$refs.faceSearchRefs.faceSearchVisible = true this.$refs.faceSearchRefs.faceSearchVisible = true
@ -252,6 +286,27 @@ export default {
this.$message({ message: '已取消修改', offset: 8 }) this.$message({ message: '已取消修改', offset: 8 })
// data.fondsStatus = data.fondsStatus ? 0 : 1 // data.fondsStatus = data.fondsStatus ? 0 : 1
}) })
},
getBase64(file) {
const reader = new FileReader()
reader.readAsDataURL(file)
return new Promise((resolve) => {
reader.onload = () => {
resolve(reader.result)
}
})
},
// 获取图片的分辨率
getImgPx(img) {
const image = new Image()
image.src = img
return new Promise((resolve) => {
image.onload = () => {
const width = image.width
const height = image.height
resolve({ width, height })
}
})
} }
} }
} }

18
src/views/inquiryMachine/content.vue
View File

@ -80,21 +80,7 @@
<quill-editor <quill-editor
v-if="currentKeyColumn.type !== 4" v-if="currentKeyColumn.type !== 4"
v-model="editorContent" v-model="editorContent"
:editor-content="editorContent"
:editor-ref="editorRef"
/> />
<!-- <mavon-editor
v-if="currentKeyColumn.type !== 4"
ref="md"
:value="form.introHtml"
:subfield="true"
:default-open="'edit,preview'"
:editable="true"
:ishljs="true"
@imgAdd="imgAdd"
@change="handleEditorChange"
/> -->
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button> <el-button type="text" @click="crud.cancelCU">取消</el-button>
@ -228,6 +214,9 @@ export default {
this.getQueryTopicTree() this.getQueryTopicTree()
}, },
methods: { methods: {
changeEditor(val) {
this.editorContent = val
},
handleCover(value) { handleCover(value) {
console.log(value) console.log(value)
if (value) { if (value) {
@ -379,7 +368,6 @@ export default {
handleNodeClick(val) { handleNodeClick(val) {
this.currentKeyColumn = val this.currentKeyColumn = val
localStorage.setItem('currentColumnKey', JSON.stringify(val)) localStorage.setItem('currentColumnKey', JSON.stringify(val))
console.log(val)
if (val && val.id !== 0) { if (val && val.id !== 0) {
this.crud.query.libcode = this.user.fonds.fondsNo this.crud.query.libcode = this.user.fonds.fondsNo
this.crud.query.topicId = val.id this.crud.query.topicId = val.id

Write Preview
Loading…
Cancel
Save