<template>
|
<CompGenericWrapper type="dialog">
|
<template #content>
|
<div class="main-container">
|
<el-form
|
:rules="rules"
|
:model="deepCopyProblem"
|
label-width="auto"
|
style="max-width: 95%"
|
ref="formRef"
|
>
|
<el-form-item label="问题位置" prop="locationid">
|
<el-select
|
v-model="deepCopyProblem.locationid"
|
@change="onProLocationChange"
|
class="row"
|
:disabled="readonly"
|
>
|
<el-option
|
v-for="item in posList"
|
:key="item.index"
|
:label="item.text"
|
:value="item.index"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="问题类型" prop="_proType">
|
<el-select
|
v-model="deepCopyProblem._proType"
|
@change="onProTypeChange"
|
class="row"
|
:disabled="readonly"
|
>
|
<el-option
|
v-for="item in problemTypeOptions"
|
:key="item.typeid"
|
:label="item.typename"
|
:value="item.typename"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="问题描述" prop="description">
|
<el-select
|
v-model="deepCopyProblem.description"
|
@change="onProDesChange"
|
class="row"
|
:disabled="readonly"
|
>
|
<el-option
|
v-for="item in descriptionOptions"
|
:key="item.guid"
|
:label="item.description"
|
:value="item.description"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="补充说明" :disabled="readonly" prop="proRemark">
|
<el-input
|
v-model="proRemark"
|
type="textarea"
|
@change="onProRemarkChange"
|
class="row"
|
placeholder="请输入"
|
:disabled="readonly"
|
/>
|
</el-form-item>
|
<el-form-item label="问题建议" prop="advice">
|
<el-select
|
v-model="deepCopyProblem.advice"
|
class="row"
|
:disabled="readonly"
|
@change="onProAdviseChange"
|
>
|
<el-option
|
v-for="item in adviseOptions"
|
:key="item.adGuid"
|
:label="item.adName"
|
:value="item.adName"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="问题建议修正"
|
prop="_adviseEdit"
|
:disabled="false"
|
>
|
<el-input
|
v-model="deepCopyProblem._adviseEdit"
|
type="textarea"
|
@change="onProAdviseEditChange"
|
class="row"
|
placeholder="请输入问题建议修正"
|
:disabled="readonly"
|
/>
|
</el-form-item>
|
<el-form-item label="问题图片">
|
<el-row>
|
<el-col>
|
<el-button
|
@click="chosePicFromAnyPic"
|
v-show="!readonly"
|
:disabled="fileList.length >= 3"
|
>从场景图片选取</el-button
|
>
|
<el-button
|
@click="chosePicFromDevicePic"
|
v-show="!readonly"
|
:disabled="fileList.length >= 3"
|
>从设备图片选取</el-button
|
>
|
<el-button
|
@click="chosePicFromLedgerPic"
|
v-show="!readonly"
|
:disabled="fileList.length >= 3"
|
>从台账选取</el-button
|
>
|
<el-button
|
@click="choseChangePic"
|
v-show="!readonly"
|
:disabled="fileList.length >= 3"
|
>从文件夹选取</el-button
|
>
|
</el-col>
|
<el-col v-if="!fileList || fileList.length <= 0">
|
<el-empty
|
style="height: 145px"
|
class="img-upload"
|
description="请添加图片"
|
/>
|
</el-col>
|
<el-col>
|
<el-upload
|
v-show="fileList && fileList.length > 0"
|
class="img-upload"
|
ref="uploadRef"
|
v-model:file-list="fileList"
|
list-type="picture-card"
|
multiple
|
:auto-upload="false"
|
crossorigin="Anonymous"
|
:before-remove="beforeRemoveFile"
|
:on-preview="handlePictureCardPreview"
|
:disabled="readonly"
|
accept="image/*"
|
>
|
<template #trigger v-if="fileList.length < 3 && !readonly">
|
<el-button
|
v-if="fileList.length < 3"
|
type="primary"
|
id="uploadBtnId"
|
style="display: none"
|
></el-button>
|
<el-icon>
|
<Plus />
|
</el-icon>
|
</template>
|
<template #tip>
|
<div style="color: #f56c6c">
|
最少上传一张图片，最多选择三张图片
|
</div>
|
</template>
|
</el-upload>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit" v-show="!readonly"
|
>保存</el-button
|
>
|
<el-button @click="onCancel" v-show="!readonly">取消</el-button>
|
</el-form-item>
|
</el-form>
|
<ArbitraryPhoto
|
:max-select="maxSelectImgCount - fileList.length"
|
v-model:dialog-visible="anyPhotoDialog"
|
@submit="handleSelectedAnyPhono"
|
:subtask="subtask"
|
:defaultFile="fileList"
|
ref="arbitraryPhotoRef"
|
>
|
</ArbitraryPhoto>
|
<CompLedgerPhoto
|
:max-select="maxSelectImgCount - fileList.length"
|
v-model:dialog-visible="ledgerPicDialog"
|
@submit="handleLedgerPicPhono"
|
:subtask="subtask"
|
:defaultFile="fileList"
|
ref="ledgerPhotoRef"
|
></CompLedgerPhoto>
|
<CompDevicePhoto
|
:max-select="maxSelectImgCount - fileList.length"
|
v-model:dialog-visible="deiveceImgDialog"
|
@submit="handleSelectedDevicePhono"
|
:subtask="subtask"
|
:defaultFile="fileList"
|
ref="deiveceImgDialogRef"
|
>
|
</CompDevicePhoto>
|
<el-image-viewer
|
v-if="previewDialogVisible"
|
:url-list="fileList.map((item) => item.url)"
|
:initial-index="initialIndex"
|
@close="previewDialogVisible = false"
|
alt="预览"
|
class="preview-pic"
|
/>
|
<!-- <el-dialog v-model="previewDialogVisible">
|
|
</el-dialog> -->
|
</div>
|
</template>
|
</CompGenericWrapper>
|
</template>
|
<script>
|
import ArbitraryPhoto from './ArbitraryPhoto.vue';
|
import CompLedgerPhoto from './CompLedgerPhoto.vue';
|
import CompDevicePhoto from './CompDevicePhoto.vue';
|
import problemApi from '@/api/fysp/problemApi.js';
|
|
import { $fysp } from '@/api/index.js';
|
import fileUtil from '@/utils/fileUtils.js';
|
import { useCloned } from '@vueuse/core';
|
import { ElMessage } from 'element-plus';
|
import deviceApi from '@/api/fysp/deviceApi';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
export default {
|
emits: ['submit', 'cancel'],
|
components: {
|
ArbitraryPhoto,
|
CompDevicePhoto,
|
CompLedgerPhoto
|
},
|
props: {
|
readonly: {
|
type: Boolean,
|
default: false
|
},
|
topTask: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
subtask: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
insGuid: {
|
type: String
|
},
|
problem: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
data() {
|
return {
|
// fixme 2024.11.20 子组件初始化时机问题
|
initPropsCount: 0,
|
// 初始预览图片index
|
initialIndex: -1,
|
// 图片选择最大数量
|
maxSelectImgCount: 3,
|
previewDialogVisible: false,
|
previewDialogImageUrl: '',
|
// 设备图片列表
|
deviceImgObjList: [],
|
// 0代表新增 1修改
|
type: -1,
|
deepCopyProblem: {},
|
currProTypeGuid: '',
|
proType: '',
|
proRemark: null,
|
|
suggestions: [],
|
problemTypeList: [],
|
posList: [],
|
|
fileList: [],
|
oldFileList: [],
|
deleteImg: [],
|
deiveceImgDialog: false,
|
anyPhotoDialog: false,
|
// 台账
|
month: -1,
|
ledgerPicDialog: false,
|
rules: {
|
_proType: {
|
required: true,
|
message: '问题类型不能为空',
|
trigger: 'change'
|
},
|
description: {
|
required: true,
|
message: '问题描述不能为空',
|
trigger: 'change'
|
},
|
locationid: {
|
required: true,
|
message: '问题位置不能为空',
|
trigger: 'change'
|
},
|
advice: {
|
required: true,
|
message: '问题建议不能为空',
|
trigger: 'change'
|
}
|
},
|
deviceTopTypes: [
|
{ id: 0, label: '监控设备' },
|
{ id: 1, label: '治理设备' },
|
{ id: 2, label: '生产设备' }
|
]
|
};
|
},
|
watch: {
|
fileList: {
|
handler(newFileList, oldFileList) {
|
// 图片校验
|
this.pictureValidate();
|
},
|
deep: true
|
},
|
initPropsCount: {
|
handler(nv, ov) {
|
if (nv >= 3) {
|
this.initOptions();
|
}
|
},
|
immediate: true
|
},
|
problem: {
|
handler(nv, ov) {
|
if (nv != null && nv != undefined) {
|
this.initPropsCount++;
|
}
|
},
|
immediate: true
|
},
|
topTask: {
|
handler(nv, ov) {
|
if (nv != null && nv != undefined) {
|
this.initPropsCount++;
|
}
|
},
|
immediate: true
|
},
|
subtask: {
|
handler(nv, ov) {
|
if (nv != null && nv != undefined) {
|
this.initPropsCount++;
|
}
|
},
|
immediate: true
|
}
|
},
|
computed: {
|
descriptionOptions() {
|
const descriptions = [];
|
|
this.problemTypeList.forEach((item) => {
|
if (item.typename == this.deepCopyProblem._proType) {
|
descriptions.push(item);
|
}
|
});
|
|
return descriptions;
|
},
|
problemTypeOptions() {
|
return this.problemTypeList.reduce((acc, current) => {
|
const x = acc.find((item) => item.typeid === current.typeid);
|
if (!x) {
|
acc.push(current);
|
}
|
return acc;
|
}, []);
|
},
|
adviseOptions() {
|
let problemGuid = this.currProTypeGuid || this.problem.guid;
|
let array = this.suggestions.filter(
|
(item) => item.adProblemtypeguid == problemGuid
|
);
|
return array;
|
}
|
},
|
mounted() {},
|
methods: {
|
onProAdviseChange(value) {
|
this.deepCopyProblem._adviseEdit = this.deepCopyProblem.advice;
|
},
|
handlePictureCardPreview(uploadFile) {
|
this.initialIndex = this.fileList.indexOf(uploadFile);
|
this.previewDialogVisible = true;
|
this.previewDialogImageUrl = uploadFile.url;
|
},
|
beforeDeiveceImgDialogclose() {
|
this.deiveceImgDialog = false;
|
},
|
initOptions() {
|
if (!this.problem || !this.subtask || !this.topTask) {
|
return;
|
}
|
if (this.problem == undefined || this.problem == null) {
|
this.deepCopyProblem = {};
|
} else {
|
this.deepCopyProblem = useCloned(this.problem).cloned.value;
|
this.currProTypeGuid = this.problem.guid;
|
this.deepCopyProblem.advice = this.deepCopyProblem.advise;
|
this.deepCopyProblem._adviseEdit = this.deepCopyProblem.advice;
|
}
|
|
this.type = 'guid' in this.deepCopyProblem ? 1 : 0;
|
|
// 获取问题类型
|
let data = {
|
sceneTypeId: this.subtask.sceneTypeId,
|
cityCode: this.topTask.citycode,
|
districtCode: this.topTask.districtcode
|
};
|
problemApi.fetchProblemType(data).then((res) => {
|
this.problemTypeList = res;
|
|
if (this.type == 1) {
|
let currProName = String(this.problem.problemname);
|
|
let currDescription;
|
if (currProName.lastIndexOf('(') == -1) {
|
currDescription = currProName;
|
this.problemTypeList.forEach((item) => {
|
if (item.description == currDescription) {
|
this.deepCopyProblem._proType = item.typename;
|
}
|
});
|
this.deepCopyProblem.description = currDescription;
|
this.proRemark = '';
|
} else {
|
currDescription = currProName.substring(
|
0,
|
currProName.lastIndexOf('(')
|
);
|
|
this.problemTypeList.forEach((item) => {
|
if (item.description === currDescription) {
|
this.deepCopyProblem._proType = item.typename;
|
}
|
});
|
this.deepCopyProblem.description = currDescription;
|
this.proRemark = currProName.substring(
|
currProName.lastIndexOf('(') + 1,
|
currProName.length - 1
|
);
|
}
|
|
let beforeEditImgList = [];
|
let oldFiles = this.problem.mediafileList;
|
if (oldFiles && oldFiles.length > 0) {
|
this.problem.mediafileList.forEach((item) => {
|
if (item.ischanged == 0) {
|
item.url = $fysp.imgUrl + item.extension1 + item.guid + '.jpg';
|
item.name = '1';
|
beforeEditImgList.push(item);
|
}
|
});
|
this.fileList = useCloned(beforeEditImgList).cloned.value;
|
this.oldFileList = useCloned(beforeEditImgList).cloned.value;
|
}
|
}
|
});
|
|
// 问题建议
|
problemApi.getSuggestion().then((res) => {
|
this.suggestions = res.data;
|
});
|
|
// 问题位置
|
problemApi
|
.getLocation({
|
sceneTypeId: this.subtask.sceneTypeId
|
})
|
.then((res) => {
|
this.posList = res.data;
|
});
|
},
|
beforeRemoveFile(file, fileList) {
|
if (file.remark == '已上传') {
|
this.deleteImg.push(file.guid);
|
this.oldFileList.filter((item) => item.url != file.url);
|
}
|
},
|
handleLedgerPicPhono(data) {
|
this.beforeLedgerPicDialogclose();
|
let isExist = false;
|
for (const item of data) {
|
for (const already of this.fileList) {
|
if (item.url == already.url) {
|
isExist = true;
|
}
|
}
|
if (!isExist) {
|
this.fileList.push({
|
url: item.url,
|
name: '1'
|
});
|
}
|
isExist = false;
|
}
|
},
|
findProTypeByGuid(guid) {
|
let result;
|
this.problemTypeList.forEach((item) => {
|
if (item.guid == guid) {
|
result = item;
|
}
|
});
|
return result;
|
},
|
changeProblemname() {
|
if (!this.proRemark || this.proRemark == null || this.proRemark == '') {
|
this.deepCopyProblem.problemname = this.deepCopyProblem.description;
|
} else {
|
this.deepCopyProblem.problemname =
|
this.deepCopyProblem.description + '(' + this.proRemark + ')';
|
}
|
},
|
onProRemarkChange(value) {
|
this.changeProblemname();
|
},
|
onProAdviseEditChange(value) {},
|
onProTypeChange(value) {
|
// 默认问题描述和问题建议为第一个
|
this.currProTypeGuid = this.descriptionOptions[0].guid;
|
this.deepCopyProblem.description = this.descriptionOptions[0].description;
|
this.onProDesChange(this.deepCopyProblem.description);
|
this.deepCopyProblem.advice = this.adviseOptions[0].adName;
|
this.deepCopyProblem._adviseEdit = this.deepCopyProblem.advice;
|
},
|
findProByProDesName(name) {
|
let result;
|
this.problemTypeList.forEach((item) => {
|
if (item.description == name) {
|
result = item;
|
}
|
});
|
return result;
|
},
|
onProDesChange(value) {
|
let currPro = this.findProByProDesName(value);
|
this.currProTypeGuid = currPro.guid;
|
// this.deepCopyProblem.description = currPro.description;
|
this.changeProblemname();
|
var adName =
|
this.adviseOptions.length == 0 ? '' : this.adviseOptions[0].adName;
|
this.deepCopyProblem.advice = adName;
|
this.$nextTick(() => {
|
this.deepCopyProblem._adviseEdit = this.deepCopyProblem.advice;
|
});
|
},
|
onProLocationChange(value) {
|
this.posList.forEach((item) => {
|
if (item.index == value) {
|
this.deepCopyProblem.location = item.text;
|
}
|
});
|
},
|
pictureValidate() {
|
if (this.fileList.length < 1) {
|
ElMessage({
|
message: '至少上传一张图片',
|
type: 'error'
|
});
|
return false;
|
} else if (this.fileList.length > 3) {
|
ElMessage({
|
message: '超过三张, 已删除多出的图片',
|
type: 'error'
|
});
|
this.fileList = this.fileList.slice(0, 3);
|
return false;
|
}
|
return true;
|
},
|
onCancel() {
|
this.$emit('cancel');
|
this.$emit('update:visible', false);
|
},
|
onSubmit() {
|
this.$refs.formRef.validate((valid) => {
|
if (valid && this.pictureValidate()) {
|
// 数据准备
|
let deepCopyPro = useCloned(this.deepCopyProblem).cloned.value;
|
let data = new FormData();
|
var picUrls = [];
|
this.fileList.forEach((item) => {
|
if (!('guid' in item)) {
|
// 新的
|
let exclude = false;
|
for (let index = 0; index < this.oldFileList.length; index++) {
|
const element = this.oldFileList[index];
|
if (item.url == element.url) {
|
exclude = true;
|
break;
|
}
|
}
|
if (!exclude) {
|
picUrls.push(item.url);
|
}
|
exclude = false;
|
// picUrls.push(item)
|
}
|
});
|
if (this.type == 1) {
|
let deleteImgCopy = this.deleteImg;
|
fileUtil.getImageFiles(picUrls, (files) => {
|
data.append('deleteImg', deleteImgCopy);
|
deepCopyPro.advise = deepCopyPro.advice;
|
delete deepCopyPro['advice'];
|
delete deepCopyPro['mediafileList'];
|
delete deepCopyPro['description'];
|
delete deepCopyPro['_adviseEdit'];
|
delete deepCopyPro['_proType'];
|
delete deepCopyPro['proType'];
|
data.append('problem', JSON.stringify(deepCopyPro));
|
files.forEach((image) => {
|
data.append('images', image);
|
});
|
problemApi.updateProblem(data).then((res) => {
|
this.$emit('submit', false);
|
});
|
});
|
} else {
|
const deepCopySubTask = useCloned(this.subtask).cloned.value;
|
fileUtil.getImageFiles(picUrls, (files) => {
|
deepCopyPro.insGuid = deepCopySubTask.insGuid;
|
delete deepCopyPro['description'];
|
deepCopyPro.proName = deepCopyPro.problemname;
|
delete deepCopyPro['problemname'];
|
deepCopyPro.ptGuid = this.findProTypeByGuid(
|
this.currProTypeGuid
|
).guid;
|
deepCopyPro.locationId = deepCopyPro.locationid;
|
delete deepCopyPro['locationid'];
|
delete deepCopyPro['_adviseEdit'];
|
delete deepCopyPro['_proType'];
|
data.append('problemVo', JSON.stringify(deepCopyPro));
|
files.forEach((image) => {
|
data.append('images', image);
|
});
|
problemApi.newProblem(data).then((res) => {
|
this.$emit('submit', true);
|
});
|
});
|
}
|
}
|
});
|
},
|
handleSelectedAnyPhono(data) {
|
this.beforeAnyPhotoDialogclose();
|
let isExist = false;
|
for (const item of data) {
|
for (const already of this.fileList) {
|
if (item.url == already.url) {
|
isExist = true;
|
}
|
}
|
if (!isExist) {
|
this.fileList.push({
|
url: item.url,
|
name: '1'
|
});
|
}
|
isExist = false;
|
}
|
},
|
handleSelectedDevicePhono(data) {
|
let isExist = false;
|
for (const item of data) {
|
for (const already of this.fileList) {
|
if (item.url == already.url) {
|
isExist = true;
|
}
|
}
|
if (!isExist) {
|
this.fileList.push({
|
url: item.url,
|
name: '1'
|
});
|
}
|
isExist = false;
|
}
|
},
|
chosePicFromAnyPic() {
|
this.anyPhotoDialog = true;
|
},
|
chosePicFromDevicePic() {
|
this.deiveceImgDialog = true;
|
},
|
chosePicFromLedgerPic() {
|
// 使用Date对象解析日期字符串
|
var date = new Date(this.subtask.subtask.planstarttime);
|
// 获取月份信息，月份是从0开始的，所以需要加1
|
this.month = date.getMonth() + 1;
|
if (String(this.month).length == 1) {
|
this.month = `0${this.month}`;
|
}
|
var year = date.getFullYear();
|
this.month = `${year}-${this.month}`;
|
this.ledgerPicDialog = true;
|
},
|
// 从文件夹中
|
choseChangePic() {
|
// 获取指定ID的元素
|
var btnElement = document.getElementById('uploadBtnId');
|
// 检查元素是否存在
|
if (btnElement) {
|
// 触发点击事件
|
btnElement.click();
|
}
|
},
|
beforeAnyPhotoDialogclose() {
|
this.anyPhotoDialog = false;
|
},
|
beforeLedgerPicDialogclose() {
|
this.ledgerPicDialog = false;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.main-container {
|
padding: 3px;
|
}
|
.t-card_item {
|
display: flex;
|
}
|
|
.w-msg-img {
|
position: absolute;
|
width: 25rem;
|
height: 27rem;
|
}
|
|
.img-upload {
|
margin-top: 30px;
|
margin-bottom: 30px;
|
}
|
.row {
|
width: 100%;
|
}
|
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
|
object-fit: cover !important;
|
}
|
.preview-pic {
|
object-fit: cover;
|
width: 100%;
|
height: 100%;
|
}
|
::v-deep .el-upload--picture-card {
|
display: none;
|
}
|
/* 隐藏el-upload上传成功组件 */
|
::v-deep .el-upload-list__item-status-label {
|
display: none !important;
|
}
|
</style>
|
