优化随手拍列表
This commit is contained in:
parent
e8fa89e0fc
commit
56229baa5c
|
|
@ -5,7 +5,7 @@ export function getMySnapshotList(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/snap/getMySnapshotList',
|
url: '/project/snap/getMySnapshotList',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: data
|
params: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//转违章或者转隐患
|
//转违章或者转隐患
|
||||||
|
|
@ -13,7 +13,7 @@ export function updateSnapshotStatus(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/snap/updateSnapshotStatus',
|
url: '/project/snap/updateSnapshotStatus',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//删除随手拍
|
//删除随手拍
|
||||||
|
|
@ -21,18 +21,18 @@ export function delSnapshot(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/snap/delSnapshot',
|
url: '/project/snap/delSnapshot',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//更新随手拍
|
//更新随手拍
|
||||||
export function updateSnapshot(data) {
|
export function updateSnapshot(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/snap/updateSnapshot',
|
url: '/project/snap/updateSnapshot',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'multipart/form-data',
|
'Content-Type': 'multipart/form-data',
|
||||||
},
|
},
|
||||||
data
|
data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -41,17 +41,32 @@ export function updateAuditStatus(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/snap/updateAuditStatus',
|
url: '/project/snap/updateAuditStatus',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 获取随手拍列表
|
// 获取随手拍列表
|
||||||
export function getSnapshotList(data) {
|
export function getSnapshotList(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/snap/getSnapshotList',
|
url: '/project/snap/getSnapshotList',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: data
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 修改随手拍
|
||||||
|
export function updateSnapshotApi(data) {
|
||||||
|
return request({
|
||||||
|
url: '/app/snapshot/addSnapshotForm',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取工程下拉选
|
||||||
|
export function getProOptionsApi(data = {}) {
|
||||||
|
return request({
|
||||||
|
url: '/system/select/getProOptions',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -62,7 +77,7 @@ export function transferViolation(data) {
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'multipart/form-data',
|
'Content-Type': 'multipart/form-data',
|
||||||
},
|
},
|
||||||
data: data
|
data: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
export function transferHiddenDanger(data) {
|
export function transferHiddenDanger(data) {
|
||||||
|
|
@ -72,6 +87,6 @@ export function transferHiddenDanger(data) {
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'multipart/form-data',
|
'Content-Type': 'multipart/form-data',
|
||||||
},
|
},
|
||||||
data: data
|
data: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,26 +11,25 @@
|
||||||
style="display: none"
|
style="display: none"
|
||||||
ref="upload"
|
ref="upload"
|
||||||
v-if="this.type == 'url'"
|
v-if="this.type == 'url'"
|
||||||
>
|
></el-upload>
|
||||||
</el-upload>
|
|
||||||
<div class="editor" ref="editor" :style="styles"></div>
|
<div class="editor" ref="editor" :style="styles"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Quill from "quill";
|
import Quill from 'quill'
|
||||||
import "quill/dist/quill.core.css";
|
import 'quill/dist/quill.core.css'
|
||||||
import "quill/dist/quill.snow.css";
|
import 'quill/dist/quill.snow.css'
|
||||||
import "quill/dist/quill.bubble.css";
|
import 'quill/dist/quill.bubble.css'
|
||||||
import { getToken } from "@/utils/auth";
|
import { getToken } from '@/utils/auth'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Editor",
|
name: 'Editor',
|
||||||
props: {
|
props: {
|
||||||
/* 编辑器的内容 */
|
/* 编辑器的内容 */
|
||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: '',
|
||||||
},
|
},
|
||||||
/* 高度 */
|
/* 高度 */
|
||||||
height: {
|
height: {
|
||||||
|
|
@ -55,60 +54,60 @@ export default {
|
||||||
/* 类型(base64格式、url格式) */
|
/* 类型(base64格式、url格式) */
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "url",
|
default: 'url',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
|
uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: "Bearer " + getToken()
|
Authorization: 'Bearer ' + getToken(),
|
||||||
},
|
},
|
||||||
Quill: null,
|
Quill: null,
|
||||||
currentValue: "",
|
currentValue: '',
|
||||||
options: {
|
options: {
|
||||||
theme: "snow",
|
theme: 'snow',
|
||||||
bounds: document.body,
|
bounds: document.body,
|
||||||
debug: "warn",
|
debug: 'warn',
|
||||||
modules: {
|
modules: {
|
||||||
// 工具栏配置
|
// 工具栏配置
|
||||||
toolbar: [
|
toolbar: [
|
||||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||||
["blockquote", "code-block"], // 引用 代码块
|
['blockquote', 'code-block'], // 引用 代码块
|
||||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
|
||||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
[{ indent: '-1' }, { indent: '+1' }], // 缩进
|
||||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
|
||||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||||
[{ align: [] }], // 对齐方式
|
[{ align: [] }], // 对齐方式
|
||||||
["clean"], // 清除文本格式
|
['clean'], // 清除文本格式
|
||||||
["link", "image", "video"] // 链接、图片、视频
|
['link', 'image', 'video'], // 链接、图片、视频
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
placeholder: "请输入内容",
|
placeholder: '请输入内容',
|
||||||
readOnly: this.readOnly,
|
readOnly: this.readOnly,
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
styles() {
|
styles() {
|
||||||
let style = {};
|
let style = {}
|
||||||
if (this.minHeight) {
|
if (this.minHeight) {
|
||||||
style.minHeight = `${this.minHeight}px`;
|
style.minHeight = `${this.minHeight}px`
|
||||||
}
|
}
|
||||||
if (this.height) {
|
if (this.height) {
|
||||||
style.height = `${this.height}px`;
|
style.height = `${this.height}px`
|
||||||
}
|
}
|
||||||
return style;
|
return style
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value: {
|
value: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
if (val !== this.currentValue) {
|
if (val !== this.currentValue) {
|
||||||
this.currentValue = val === null ? "" : val;
|
this.currentValue = val === null ? '' : val
|
||||||
if (this.Quill) {
|
if (this.Quill) {
|
||||||
this.Quill.pasteHTML(this.currentValue);
|
this.Quill.pasteHTML(this.currentValue)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -116,159 +115,160 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init();
|
this.init()
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.Quill = null;
|
this.Quill = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
const editor = this.$refs.editor;
|
const editor = this.$refs.editor
|
||||||
this.Quill = new Quill(editor, this.options);
|
this.Quill = new Quill(editor, this.options)
|
||||||
// 如果设置了上传地址则自定义图片上传事件
|
// 如果设置了上传地址则自定义图片上传事件
|
||||||
if (this.type == 'url') {
|
if (this.type == 'url') {
|
||||||
let toolbar = this.Quill.getModule("toolbar");
|
let toolbar = this.Quill.getModule('toolbar')
|
||||||
toolbar.addHandler("image", (value) => {
|
toolbar.addHandler('image', value => {
|
||||||
if (value) {
|
if (value) {
|
||||||
this.$refs.upload.$children[0].$refs.input.click();
|
this.$refs.upload.$children[0].$refs.input.click()
|
||||||
} else {
|
} else {
|
||||||
this.quill.format("image", false);
|
this.quill.format('image', false)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
this.Quill.pasteHTML(this.currentValue);
|
this.Quill.pasteHTML(this.currentValue)
|
||||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
this.Quill.on('text-change', (delta, oldDelta, source) => {
|
||||||
const html = this.$refs.editor.children[0].innerHTML;
|
const html = this.$refs.editor.children[0].innerHTML
|
||||||
const text = this.Quill.getText();
|
const text = this.Quill.getText()
|
||||||
const quill = this.Quill;
|
const quill = this.Quill
|
||||||
this.currentValue = html;
|
this.currentValue = html
|
||||||
this.$emit("input", html);
|
this.$emit('input', html)
|
||||||
this.$emit("on-change", { html, text, quill });
|
this.$emit('on-change', { html, text, quill })
|
||||||
});
|
})
|
||||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
this.Quill.on('text-change', (delta, oldDelta, source) => {
|
||||||
this.$emit("on-text-change", delta, oldDelta, source);
|
this.$emit('on-text-change', delta, oldDelta, source)
|
||||||
});
|
})
|
||||||
this.Quill.on("selection-change", (range, oldRange, source) => {
|
this.Quill.on('selection-change', (range, oldRange, source) => {
|
||||||
this.$emit("on-selection-change", range, oldRange, source);
|
this.$emit('on-selection-change', range, oldRange, source)
|
||||||
});
|
})
|
||||||
this.Quill.on("editor-change", (eventName, ...args) => {
|
this.Quill.on('editor-change', (eventName, ...args) => {
|
||||||
this.$emit("on-editor-change", eventName, ...args);
|
this.$emit('on-editor-change', eventName, ...args)
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
// 上传前校检格式和大小
|
// 上传前校检格式和大小
|
||||||
handleBeforeUpload(file) {
|
handleBeforeUpload(file) {
|
||||||
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
|
const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg']
|
||||||
const isJPG = type.includes(file.type);
|
const isJPG = type.includes(file.type)
|
||||||
// 检验文件格式
|
// 检验文件格式
|
||||||
if (!isJPG) {
|
if (!isJPG) {
|
||||||
this.$message.error(`图片格式错误!`);
|
this.$message.error(`图片格式错误!`)
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
// 校检文件大小
|
// 校检文件大小
|
||||||
if (this.fileSize) {
|
if (this.fileSize) {
|
||||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
const isLt = file.size / 1024 / 1024 < this.fileSize
|
||||||
if (!isLt) {
|
if (!isLt) {
|
||||||
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
},
|
},
|
||||||
handleUploadSuccess(res, file) {
|
handleUploadSuccess(res, file) {
|
||||||
// 如果上传成功
|
// 如果上传成功
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
// 获取富文本组件实例
|
// 获取富文本组件实例
|
||||||
let quill = this.Quill;
|
let quill = this.Quill
|
||||||
// 获取光标所在位置
|
// 获取光标所在位置
|
||||||
let length = quill.getSelection().index;
|
let length = quill.getSelection().index
|
||||||
// 插入图片 res.url为服务器返回的图片地址
|
// 插入图片 res.url为服务器返回的图片地址
|
||||||
quill.insertEmbed(length, "image", res.data.url);
|
quill.insertEmbed(length, 'image', res.data.url)
|
||||||
// 调整光标到最后
|
// 调整光标到最后
|
||||||
quill.setSelection(length + 1);
|
quill.setSelection(length + 1)
|
||||||
} else {
|
} else {
|
||||||
this.$message.error("图片插入失败");
|
this.$message.error('图片插入失败')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleUploadError() {
|
handleUploadError() {
|
||||||
this.$message.error("图片插入失败");
|
this.$message.error('图片插入失败')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.editor, .ql-toolbar {
|
.editor,
|
||||||
|
.ql-toolbar {
|
||||||
white-space: pre-wrap !important;
|
white-space: pre-wrap !important;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
}
|
}
|
||||||
.quill-img {
|
.quill-img {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
.ql-snow .ql-tooltip[data-mode='link']::before {
|
||||||
content: "请输入链接地址:";
|
content: '请输入链接地址:';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||||
border-right: 0px;
|
border-right: 0px;
|
||||||
content: "保存";
|
content: '保存';
|
||||||
padding-right: 0px;
|
padding-right: 0px;
|
||||||
}
|
}
|
||||||
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
.ql-snow .ql-tooltip[data-mode='video']::before {
|
||||||
content: "请输入视频地址:";
|
content: '请输入视频地址:';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||||
content: "14px";
|
content: '14px';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
|
||||||
content: "10px";
|
content: '10px';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
|
||||||
content: "18px";
|
content: '18px';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
|
||||||
content: "32px";
|
content: '32px';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||||
content: "文本";
|
content: '文本';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
|
||||||
content: "标题1";
|
content: '标题1';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
|
||||||
content: "标题2";
|
content: '标题2';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
|
||||||
content: "标题3";
|
content: '标题3';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
|
||||||
content: "标题4";
|
content: '标题4';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
|
||||||
content: "标题5";
|
content: '标题5';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
|
||||||
content: "标题6";
|
content: '标题6';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||||
content: "标准字体";
|
content: '标准字体';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
|
||||||
content: "衬线字体";
|
content: '衬线字体';
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
|
||||||
content: "等宽字体";
|
content: '等宽字体';
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -194,6 +194,7 @@ export default {
|
||||||
auditReason: {
|
auditReason: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: [],
|
default: [],
|
||||||
|
required: false,
|
||||||
},
|
},
|
||||||
showType: Number, // 1 展示审批意见 2 展示填写按钮
|
showType: Number, // 1 展示审批意见 2 展示填写按钮
|
||||||
isExamine: false, // 是否为审批页面 true 是 展示审核按钮 false 否
|
isExamine: false, // 是否为审批页面 true 是 展示审核按钮 false 否
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,12 @@ const cbc_iv = CryptoJS.enc.Utf8.parse('1234567812345678')
|
||||||
* 默认参数需要加密
|
* 默认参数需要加密
|
||||||
* @type {boolean}
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
const jia_mi = false
|
const jia_mi = true
|
||||||
/**
|
/**
|
||||||
* 默认后台会自动加密
|
* 默认后台会自动加密
|
||||||
* @type {boolean}
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
const jie_mi = false
|
const jie_mi = true
|
||||||
/**
|
/**
|
||||||
* 加密
|
* 加密
|
||||||
* @param word
|
* @param word
|
||||||
|
|
|
||||||
|
|
@ -57,6 +57,12 @@
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="操作" align="center">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button type="text" @click="onHandleEditSnapshot(scope.row)">编辑</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
|
|
@ -83,12 +89,77 @@
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
|
||||||
|
<!-- 编辑弹框 -->
|
||||||
|
<el-dialog
|
||||||
|
title="编辑随手拍"
|
||||||
|
width="60%"
|
||||||
|
:visible.sync="editOpenVisible"
|
||||||
|
v-if="editOpenVisible"
|
||||||
|
:before-close="() => (editOpenVisible = false)"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="editPhotoForm"
|
||||||
|
label-width="100px"
|
||||||
|
label-position="left"
|
||||||
|
:model="editPhotoForm"
|
||||||
|
:rules="editPhotoFormRules"
|
||||||
|
>
|
||||||
|
<el-form-item label="工程名称" prop="proId">
|
||||||
|
<!-- <el-input v-model="editPhotoForm.proName" placeholder="请输入工程名称" maxlength="30" show-word-limit /> -->
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
clearable
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择工程名称"
|
||||||
|
@change="handleProIdChange"
|
||||||
|
v-model="editPhotoForm.proId"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in proOptionsList" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="问题描述" prop="description">
|
||||||
|
<el-input
|
||||||
|
:rows="5"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入问题描述"
|
||||||
|
maxlength="200"
|
||||||
|
show-word-limit
|
||||||
|
v-model="editPhotoForm.description"
|
||||||
|
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="照片" prop="photoList">
|
||||||
|
<el-upload
|
||||||
|
:headers="headers"
|
||||||
|
:action="uploadUrl"
|
||||||
|
list-type="picture-card"
|
||||||
|
:on-remove="handleRemove"
|
||||||
|
:on-success="handleSuccess"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
:file-list="editPhotoForm.photoList"
|
||||||
|
:on-preview="handlePictureCardPreview"
|
||||||
|
>
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleEditSnapshotSave">保存</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog :visible.sync="imgDialogVisible" width="40%" append-to-body>
|
||||||
|
<img width="100%" style="max-height: 70vh; object-fit: contain" :src="dialogImageUrl" alt="" />
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Treeselect from '@riophae/vue-treeselect'
|
import Treeselect from '@riophae/vue-treeselect'
|
||||||
import { indexContinuous, lookFaceFile } from '@/utils/bonus'
|
import { indexContinuous, lookFaceFile } from '@/utils/bonus'
|
||||||
import { getMySnapshotList } from '@/api/snapshot/snapshot'
|
import { getMySnapshotList, updateSnapshotApi, getProOptionsApi } from '@/api/snapshot/snapshot'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Treeselect },
|
components: { Treeselect },
|
||||||
|
|
@ -123,12 +194,47 @@ export default {
|
||||||
],
|
],
|
||||||
lookFaceFile: '',
|
lookFaceFile: '',
|
||||||
userId: '',
|
userId: '',
|
||||||
|
headers: {
|
||||||
|
Authorization: 'Bearer ' + this.$store.getters.token,
|
||||||
|
},
|
||||||
|
editOpenVisible: false,
|
||||||
|
imgDialogVisible: false,
|
||||||
|
dialogImageUrl: '',
|
||||||
|
uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
|
||||||
|
|
||||||
|
// 编辑随手拍表单
|
||||||
|
editPhotoForm: {
|
||||||
|
id: '', // 随手拍id
|
||||||
|
proName: '', // 工程名称
|
||||||
|
proId: '', // 工程id
|
||||||
|
description: '', // 问题描述
|
||||||
|
photoList: [], // 照片
|
||||||
|
photoListTemp: [], // 照片临时
|
||||||
|
snapshotId: '',
|
||||||
|
createTime: '',
|
||||||
|
createUserName: '',
|
||||||
|
createUserId: '',
|
||||||
|
status: '',
|
||||||
|
// photoNum: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
// 校验规则
|
||||||
|
editPhotoFormRules: {
|
||||||
|
proId: [{ required: true, message: '请选择工程名称', trigger: 'change' }],
|
||||||
|
description: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
|
||||||
|
photoList: [{ required: true, message: '请上传照片', trigger: 'change' }],
|
||||||
|
},
|
||||||
|
|
||||||
|
// 文件类型
|
||||||
|
fileType: ['jpg', 'jpeg', 'png'],
|
||||||
|
proOptionsList: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.lookFaceFile = lookFaceFile()
|
this.lookFaceFile = lookFaceFile()
|
||||||
this.userId = this.$route.query.snapshotId || ''
|
this.userId = this.$route.query.snapshotId || ''
|
||||||
this.getList()
|
this.getList()
|
||||||
|
this.getProOptionsFun()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
lookFaceFile,
|
lookFaceFile,
|
||||||
|
|
@ -150,6 +256,143 @@ export default {
|
||||||
this.photoList = item.photoList
|
this.photoList = item.photoList
|
||||||
this.photoOpen = true
|
this.photoOpen = true
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 编辑按钮
|
||||||
|
onHandleEditSnapshot(item) {
|
||||||
|
this.editPhotoForm.proName = item.proName
|
||||||
|
this.editPhotoForm.proId = item.proId
|
||||||
|
this.editPhotoForm.description = item.description
|
||||||
|
this.editPhotoForm.id = item.id
|
||||||
|
this.editPhotoForm.snapshotId = item.snapshotId
|
||||||
|
this.editPhotoForm.createTime = item.createTime
|
||||||
|
this.editPhotoForm.createUserName = item.createUserName
|
||||||
|
this.editPhotoForm.createUserId = item.createUserId
|
||||||
|
this.editPhotoForm.status = item.status
|
||||||
|
// this.editPhotoForm.photoNum = item.photoNum
|
||||||
|
this.editPhotoForm.photoList = item.photoList.map(item => ({
|
||||||
|
filePath: item.url,
|
||||||
|
name: item.fileName,
|
||||||
|
url: this.lookFaceFile + item.url,
|
||||||
|
}))
|
||||||
|
|
||||||
|
this.editOpenVisible = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传前
|
||||||
|
handleBeforeUpload(file) {
|
||||||
|
const isFormat = this.fileType.some(e => file.name.endsWith(e))
|
||||||
|
if (!isFormat) {
|
||||||
|
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('、')}格式的文件!`)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// // 判断文件大小
|
||||||
|
// const isLt = file.size / 1024 / 1024 < this.fileSize
|
||||||
|
// if (!isLt) {
|
||||||
|
// this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
|
||||||
|
// return false
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 替换文件路径中的#号
|
||||||
|
const newFileName = file.name.replace(/#/g, '@')
|
||||||
|
const newFile = new File([file], newFileName, { type: file.type })
|
||||||
|
|
||||||
|
// 修改原始文件的name属性
|
||||||
|
Object.defineProperty(file, 'name', {
|
||||||
|
value: newFileName,
|
||||||
|
})
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传成功
|
||||||
|
handleSuccess(response, file, fileList) {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.editPhotoForm.photoList.push({
|
||||||
|
filePath: response.data.url,
|
||||||
|
url: this.lookFaceFile + response.data.url,
|
||||||
|
name: response.data.name,
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(this.editPhotoForm, '-----------上传成功')
|
||||||
|
|
||||||
|
// 清除照片的必填校验
|
||||||
|
this.$refs.editPhotoForm.clearValidate('photoList')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
handleRemove(file, fileList) {
|
||||||
|
console.log(file, fileList, '-----------删除')
|
||||||
|
this.editPhotoForm.photoList = this.editPhotoForm.photoList.filter(item => item.filePath != file.filePath)
|
||||||
|
},
|
||||||
|
// 预览
|
||||||
|
handlePictureCardPreview(file) {
|
||||||
|
this.dialogImageUrl = file.url
|
||||||
|
this.imgDialogVisible = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存按钮
|
||||||
|
handleEditSnapshotSave() {
|
||||||
|
this.$refs.editPhotoForm.validate(async valid => {
|
||||||
|
if (valid) {
|
||||||
|
console.log(this.editPhotoForm, '-----------保存按钮')
|
||||||
|
const {
|
||||||
|
proName,
|
||||||
|
description,
|
||||||
|
photoList,
|
||||||
|
id,
|
||||||
|
snapshotId,
|
||||||
|
createTime,
|
||||||
|
createUserName,
|
||||||
|
createUserId,
|
||||||
|
status,
|
||||||
|
proId,
|
||||||
|
} = this.editPhotoForm
|
||||||
|
let photoListNew = []
|
||||||
|
if (photoList.length > 0) {
|
||||||
|
photoListNew = photoList.map(item => {
|
||||||
|
return {
|
||||||
|
filePath: item.filePath,
|
||||||
|
fileName: item.name,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组装参数
|
||||||
|
const params = {
|
||||||
|
proName,
|
||||||
|
description,
|
||||||
|
id,
|
||||||
|
snapshotId,
|
||||||
|
createTime,
|
||||||
|
createUserName,
|
||||||
|
createUserId,
|
||||||
|
status,
|
||||||
|
proId,
|
||||||
|
pageType: 'edit',
|
||||||
|
photoType: photoListNew,
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(params, '-----------params')
|
||||||
|
|
||||||
|
const res = await updateSnapshotApi(params)
|
||||||
|
if (res.code == 200) {
|
||||||
|
this.$modal.msgSuccess('修改成功')
|
||||||
|
this.editOpenVisible = false
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取工程下拉选
|
||||||
|
async getProOptionsFun() {
|
||||||
|
const res = await getProOptionsApi({})
|
||||||
|
this.proOptionsList = res.data
|
||||||
|
},
|
||||||
|
|
||||||
|
handleProIdChange(val) {
|
||||||
|
this.editPhotoForm.proName = this.proOptionsList.find(item => item.value == val)?.label
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue