You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1634 lines
46 KiB
1634 lines
46 KiB
<template> |
|
<basic-container style="max-height: 800px; overflow: hidden"> |
|
<avue-crud |
|
:option="option" |
|
:table-loading="loading" |
|
:data="data" |
|
:page.sync="page" |
|
ref="crud" |
|
v-model="form" |
|
:permission="permissionList" |
|
:before-open="beforeOpen" |
|
:before-close="beforeClose" |
|
@search-change="searchChange" |
|
@search-reset="searchReset" |
|
@current-change="currentChange" |
|
@size-change="sizeChange" |
|
@refresh-change="refreshChange" |
|
@on-load="onLoad" |
|
> |
|
<template slot-scope="{ row }" slot="operationStatus"> |
|
<el-tag |
|
size="small" |
|
:type=" |
|
row.operationStatus == 1 |
|
? 'success' |
|
: row.operationStatus == 2 |
|
? '' |
|
: row.operationStatus == 3 |
|
? 'info' |
|
: '' |
|
" |
|
> |
|
{{ |
|
row.operationStatus == 1 |
|
? "待接单" |
|
: row.operationStatus == 2 |
|
? "维修完成" |
|
: row.operationStatus == 3 |
|
? "已完成" |
|
: "" |
|
}} |
|
</el-tag> |
|
</template> |
|
<template slot-scope="{ type, disabled }" slot="operationStatusForm"> |
|
<div v-if="type == 'view'"> |
|
<el-tag |
|
size="small" |
|
:type=" |
|
form.operationStatus == 1 |
|
? 'success' |
|
: form.operationStatus == 2 |
|
? '' |
|
: form.operationStatus == 3 |
|
? 'info' |
|
: '' |
|
" |
|
> |
|
{{ |
|
form.operationStatus == 1 |
|
? "待接单" |
|
: form.operationStatus == 2 |
|
? "维修完成" |
|
: form.operationStatus == 3 |
|
? "已完成" |
|
: "" |
|
}} |
|
</el-tag> |
|
</div> |
|
</template> |
|
<template slot-scope="{ type, disabled }" slot="errorVideoForm"> |
|
<div v-if="type == 'view'"> |
|
<video |
|
:src="form.errorVideo" |
|
muted |
|
autoplay |
|
style="width: 200px; height: 200px" |
|
></video> |
|
</div> |
|
</template> |
|
<template slot-scope="{ type, disabled }" slot="errorImgForm"> |
|
<div v-if="type == 'view'"> |
|
<!-- {{from.errorImg}} --> |
|
<img |
|
v-for="item in form.errorImg" |
|
:key="item" |
|
:src="item" |
|
alt="" |
|
style="width: 180px; height: 180px; margin: 0 5px" |
|
/> |
|
</div> |
|
</template> |
|
<template slot-scope="scope" slot="menuLeft"> |
|
<el-button |
|
type="primary" |
|
icon="el-icon-plus" |
|
size="small" |
|
@click="addOperation" |
|
>需求提报</el-button |
|
> |
|
</template> |
|
<template slot-scope="{ row }" slot="menu"> |
|
<el-button @click="handleView(row)">查看</el-button> |
|
<el-button @click="handleEdit(row)">编辑</el-button> |
|
<el-button @click="handleEvaluate(row)">评价并签字</el-button> |
|
</template> |
|
</avue-crud> |
|
<el-dialog |
|
:title="dialogTitle" |
|
:visible.sync="dialogVisible" |
|
:append-to-body="true" |
|
width="50%" |
|
> |
|
<div style="height: 500px; overflow: auto"> |
|
<div v-for="(item, index) in addForm" :key="item"> |
|
<div |
|
style=" |
|
width: 98%; |
|
height: 30px; |
|
line-height: 30px; |
|
padding-left: 5px; |
|
border-left: 5px solid #000; |
|
font-size: 18px; |
|
font-weight: 550; |
|
color: #000; |
|
margin: 0px 0 20px; |
|
" |
|
v-show="addForm.length > 1" |
|
> |
|
填报{{ index + 1 }} |
|
</div> |
|
<avue-form :option="item.formOption" :model="item.form"></avue-form> |
|
</div> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="handleAdd" v-show="dialogTitle == '需求填报'" |
|
>新 增</el-button |
|
> |
|
<el-button @click="handleCancel">取 消</el-button> |
|
<el-button @click="handleSave" v-show="dialogTitle == '需求填报'" |
|
>保 存</el-button |
|
> |
|
<el-button type="primary" @click="handleConfirm">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
<el-dialog |
|
:title="detailTitle" |
|
:visible.sync="detailVisible" |
|
:append-to-body="true" |
|
width="50%" |
|
> |
|
<div style="height:500px;overflow:auto;" > |
|
<el-form ref="form" :model="detailForm" label-width="120px" label-position="left"> |
|
<div v-show="rowStatus == 1 || rowStatus == 2 || rowStatus == 3"> |
|
<div |
|
style=" |
|
color: #101010; |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin-bottom: 20px; |
|
" |
|
> |
|
故障信息 |
|
</div> |
|
<el-form-item label="填报人" prop="errPosition"> |
|
<el-input |
|
placeholder="请输入填报人" |
|
readonly |
|
v-model="detailForm.addPerson" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="填报人电话" prop="errPosition"> |
|
<el-input |
|
placeholder="请输入填报人电话" |
|
readonly |
|
v-model="detailForm.addPersonPhone" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="故障位置" prop="errPosition"> |
|
<el-input |
|
placeholder="请输入故障位置" |
|
readonly |
|
v-model="detailForm.errPosition" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="设备名称" prop="deviceName"> |
|
<el-select |
|
placeholder="请选择设备名称" |
|
disabled |
|
v-model="detailForm.deviceName" |
|
style="width: 100%" |
|
> |
|
<el-option |
|
v-for="item in deviceList" |
|
:key="item.value" |
|
:value="item.value" |
|
:label="item.label" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="故障专业类型" prop="errType"> |
|
<el-select |
|
placeholder="请选择故障专业类型" |
|
disabled |
|
v-model="detailForm.errType" |
|
style="width: 100%" |
|
> |
|
<el-option |
|
v-for="item in errorList" |
|
:key="item.value" |
|
:value="item.value" |
|
:label="item.label" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="故障现象描述" prop="errDescirb"> |
|
<el-input |
|
placeholder="请输入故障现象描述" |
|
readonly |
|
type="textarea" |
|
v-model="detailForm.errDescirb" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="故障视频"> |
|
<video |
|
:src="detailForm.errorVideo" |
|
style="width: 148px; height: 148px" |
|
controls |
|
></video> |
|
</el-form-item> |
|
<el-form-item label="故障图片"> |
|
<img v-for="item in detailForm.errorImg" :key="item" :src="item" alt="" style="width: 148px; height: 148px;margin-right:10px;"> |
|
</el-form-item> |
|
<el-form-item label="提报时间"> |
|
<el-date-picker |
|
v-model="detailForm.addTime" |
|
type="datetime" |
|
style="width:100%;" |
|
disabled |
|
placeholder="选择日期时间"> |
|
</el-date-picker> |
|
</el-form-item> |
|
</div> |
|
<div v-show="rowStatus == 2 || rowStatus == 3"> |
|
<div |
|
style=" |
|
color: #101010; |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin-bottom: 20px; |
|
" |
|
> |
|
处理情况 |
|
</div> |
|
<el-form-item label="接单时间时间"> |
|
<el-date-picker |
|
v-model="detailForm.orderTime" |
|
type="datetime" |
|
disabled |
|
style="width:100%;" |
|
placeholder="选择日期时间"> |
|
</el-date-picker> |
|
</el-form-item> |
|
</div> |
|
<div v-show="rowStatus == 2 || rowStatus == 3"> |
|
<div |
|
style=" |
|
color: #101010; |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin-bottom: 20px; |
|
" |
|
> |
|
维修详情 |
|
</div> |
|
<el-form-item label="填报人" prop="maintainPerson"> |
|
<el-input |
|
placeholder="请输入填报人" |
|
readonly |
|
v-model="detailForm.maintainPerson" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="设备名称" prop="maintainName"> |
|
<el-select |
|
placeholder="请选择设备名称" |
|
disabled |
|
v-model="detailForm.maintainName" |
|
style="width: 100%" |
|
> |
|
<el-option |
|
v-for="item in deviceList" |
|
:key="item.value" |
|
:value="item.value" |
|
:label="item.label" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="故障原因" prop="errorReason"> |
|
<el-input |
|
placeholder="请输入故障原因" |
|
readonly |
|
type="textarea" |
|
v-model="detailForm.errorReason" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="处理方法" prop="dealMethod"> |
|
<el-input |
|
placeholder="请输入处理方法" |
|
readonly |
|
type="textarea" |
|
v-model="detailForm.dealMethod" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="维修材料"> |
|
<el-table :data="detailForm.tableData" border style="width: 100%" show-summary> |
|
<el-table-column |
|
prop="name" |
|
align="center" |
|
label="物料名称" |
|
> |
|
</el-table-column> |
|
<el-table-column |
|
prop="money" |
|
align="center" |
|
label="金额" |
|
> |
|
</el-table-column> |
|
</el-table> |
|
</el-form-item> |
|
</div> |
|
<div v-show="rowStatus == 3 || isEvalute"> |
|
<div |
|
style=" |
|
color: #101010; |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin-bottom: 20px; |
|
" |
|
> |
|
评价 |
|
</div> |
|
<div> |
|
<p>1.您对本次维修的质量方面满意吗？</p> |
|
<div style="display:flex;"> |
|
<div |
|
style="width: 150px; |
|
border-radius: 5px; |
|
height: 30px; |
|
text-align: center; |
|
line-height: 30px; |
|
margin-right: 20px; |
|
cursor:pointer;" |
|
:style="{background:isQuality == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '1' ? '#3a62d7' : '#4f4f4f'}" |
|
@click="clickQualityYes">满意</div> |
|
<div |
|
style="width: 150px; |
|
border-radius: 5px; |
|
height: 30px; |
|
background: rgb(239, 239, 239); |
|
text-align: center; |
|
line-height: 30px; |
|
margin-right: 20px;cursor:pointer;" |
|
:style="{background:isQuality == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '2' ? '#3a62d7' : '#4f4f4f'}" |
|
@click="clickQualityNo">不满意</div> |
|
</div> |
|
</div> |
|
<div> |
|
<p>2.您对本次维修的安全方面满意吗？</p> |
|
<div style="display:flex;"> |
|
<div |
|
style="width: 150px; |
|
border-radius: 5px; |
|
height: 30px; |
|
background: rgb(239, 239, 239); |
|
text-align: center; |
|
line-height: 30px; |
|
margin-right: 20px;cursor:pointer;" |
|
:style="{background:isSafe == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '1' ? '#3a62d7' : '#4f4f4f'}" |
|
@click="clickSafeYes" |
|
>满意</div> |
|
<div |
|
style="width: 150px; |
|
border-radius: 5px; |
|
height: 30px; |
|
background: rgb(239, 239, 239); |
|
text-align: center; |
|
line-height: 30px; |
|
margin-right: 20px;cursor:pointer;" |
|
:style="{background:isSafe == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '2' ? '#3a62d7' : '#4f4f4f'}" |
|
@click="clickSafeNo" |
|
>不满意</div> |
|
</div> |
|
</div> |
|
<div> |
|
<p>3.您对本次维修的时效方面满意吗？</p> |
|
<div style="display:flex;margin-bottom:30px;"> |
|
<div |
|
style="width: 150px; |
|
border-radius: 5px; |
|
height: 30px; |
|
background: rgb(239, 239, 239); |
|
text-align: center; |
|
line-height: 30px; |
|
margin-right: 20px;cursor:pointer;" |
|
:style="{background:isTime == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '1' ? '#3a62d7' : '#4f4f4f'}" |
|
@click="clickTimeYes" |
|
>满意</div> |
|
<div |
|
style="width: 150px; |
|
border-radius: 5px; |
|
height: 30px; |
|
background: rgb(239, 239, 239); |
|
text-align: center; |
|
line-height: 30px; |
|
margin-right: 20px;cursor:pointer;" |
|
:style="{background:isTime == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '2' ? '#3a62d7' : '#4f4f4f'}" |
|
@click="clickTimeNo" |
|
>不满意</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-show="rowStatus == 3 || isEvalute"> |
|
<div |
|
style=" |
|
color: #101010; |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin-bottom: 20px; |
|
" |
|
> |
|
签名 |
|
</div> |
|
<avue-sign ref="sign"></avue-sign> |
|
<el-button @click="clearName">清空</el-button> |
|
<el-button @click="confirmName">确定</el-button> |
|
<el-form-item label="签名人" prop="personName"> |
|
<el-input |
|
placeholder="请输入签名人" |
|
v-model="detailForm.personName" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="签名时间" prop="time"> |
|
<el-date-picker |
|
v-model="detailForm.time" |
|
type="datetime" |
|
style="width:100%;" |
|
placeholder="请选择签名时间"> |
|
</el-date-picker> |
|
</el-form-item> |
|
</div> |
|
</el-form> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="handleClose">关闭</el-button> |
|
<el-button type="primary" @click="handleConfirm">评价并签字</el-button> |
|
</span> |
|
</el-dialog> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from "vuex"; |
|
import { dateFormat } from "../../util/date"; |
|
let action = "https://api.avuejs.com/imgupload"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
showPrint: false, |
|
dialogTitle: "需求填报", |
|
dialogVisible: false, |
|
detailTitle: "需求详情", |
|
detailVisible: true, |
|
uploadUrl: "", |
|
form: {}, |
|
addForm: [ |
|
{ |
|
form: { |
|
errPosition: "", |
|
deviceName: "", |
|
errType: "", |
|
errDescirb: "", |
|
errorVideo: "", |
|
errorImgs: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
column: [ |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "errPosition", |
|
type: "input", |
|
span: 24, |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "名称1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "名称2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errType", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "类型1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "类型2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errDescirb", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "url", |
|
name: "name", |
|
home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-img", |
|
span: 24, |
|
action: action, |
|
}, |
|
{ |
|
label: "照片墙", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
fileType: "img", //img/video/audio |
|
action: action, |
|
}, |
|
], |
|
}, |
|
}, |
|
], |
|
query: {}, |
|
loading: true, |
|
parentId: 0, |
|
direction: "rtl", |
|
page: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
deviceList: [ |
|
{ label: "设备一", value: "001" }, |
|
{ label: "设备二", value: "002" }, |
|
{ label: "设备三", value: "003" }, |
|
{ label: "设备四", value: "004" }, |
|
], |
|
errorList: [ |
|
{ label: "类别一", value: "01" }, |
|
{ label: "类别二", value: "02" }, |
|
{ label: "类别三", value: "03" }, |
|
{ label: "类别四", value: "04" }, |
|
], |
|
isRegister: false, |
|
option: { |
|
height: "auto", |
|
calcHeight: 30, |
|
tip: false, |
|
searchShow: true, |
|
searchMenuSpan: 6, |
|
border: true, |
|
index: true, |
|
dialogType: "dialog", |
|
dialogClickModal: false, |
|
addBtn: false, |
|
viewBtn: false, |
|
editBtn: false, |
|
delBtn: false, |
|
searchShowBtn: false, |
|
refreshBtn: false, |
|
columnBtn: false, |
|
menuWidth: 320, |
|
column: [ |
|
{ |
|
label: "提报时间", |
|
prop: "addTime", |
|
type: "date", |
|
format: "yyyy-MM-dd", |
|
valueFormat: "yyyy-MM-dd", |
|
search: true, |
|
hide: true, |
|
viewDisplay: false, |
|
searchValue: dateFormat(new Date(), "yyyy-MM-dd"), |
|
searchClearable: false, |
|
}, |
|
{ |
|
label: "需求单号", |
|
labelWidth: 120, |
|
prop: "operationNo", |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
prop: "deviceName", |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "errPosition", |
|
type: "select", |
|
overHidden: true, |
|
// hide: true, |
|
search: true, |
|
// viewDisplay: false, |
|
// dicUrl: '/api/blade-system/dict-biz/get-hc-project', |
|
props: { |
|
label: "dictValue", |
|
value: "dictValue", |
|
}, |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
prop: "errType", |
|
overHidden: true, |
|
type: "select", |
|
searchLabelWidth: 100, |
|
hide: true, |
|
search: true, |
|
viewDisplay: false, |
|
// dicUrl: '/api/blade-system/dict-biz/get-hc-project', |
|
props: { |
|
label: "dictValue", |
|
value: "dictValue", |
|
}, |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
prop: "errDescirb", |
|
overHidden: true, |
|
slot: true, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
// hide:true, |
|
// propsHttp: { |
|
// res: 'data', |
|
// url:'url', |
|
// name:'name', |
|
// home: 'https://www.w3school.com.cn' |
|
// }, |
|
// action: 'https://api.avuejs.com/imgupload', |
|
// listType: 'picture-img', |
|
// formslot:true, |
|
}, |
|
{ |
|
label: "故障图片", |
|
labelWidth: 120, |
|
prop: "errorImg", |
|
type: "upload", |
|
hide: true, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "提报时间", |
|
labelWidth: 120, |
|
prop: "operationDate", |
|
slot: true, |
|
}, |
|
{ |
|
label: "状态", |
|
labelWidth: 120, |
|
prop: "operationStatus", |
|
slot: true, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "完成时间", |
|
labelWidth: 120, |
|
prop: "finishDate", |
|
slot: true, |
|
}, |
|
], |
|
}, |
|
data: [], |
|
videoList: "", //上传成功的视频 |
|
form2Option: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
column: [ |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "errPosition", |
|
type: "input", |
|
span: 24, |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "名称1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "名称2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errType", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "类型1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "类型2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errDescirb", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "url", |
|
name: "name", |
|
home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-img", |
|
span: 24, |
|
action: action, |
|
}, |
|
{ |
|
label: "照片墙", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
fileType: "img", //img/video/audio |
|
action: action, |
|
}, |
|
], |
|
}, |
|
detailForm: {}, |
|
rowStatus:'', |
|
isEvalute:false, |
|
isQuality:0, |
|
isSafe:0, |
|
isTime:0, |
|
nameImg:'' |
|
}; |
|
}, |
|
directives: { |
|
print, |
|
}, |
|
|
|
computed: { |
|
...mapGetters(["userInfo", "permission", "systemTime"]), |
|
permissionList() { |
|
return { |
|
addBtn: this.vaildData(this.permission.notice_add, false), |
|
viewBtn: this.vaildData(this.permission.notice_view, false), |
|
delBtn: this.vaildData(this.permission.notice_delete, false), |
|
editBtn: this.vaildData(this.permission.notice_edit, false), |
|
}; |
|
}, |
|
}, |
|
created() {}, |
|
mounted() {}, |
|
methods: { |
|
// 需求提报 |
|
addOperation() { |
|
this.dialogTitle = "需求填报"; |
|
this.addForm = [ |
|
{ |
|
form: { |
|
errPosition: "", |
|
deviceName: "", |
|
errType: "", |
|
errDescirb: "", |
|
errorVideo: "", |
|
errorImgs: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
column: [ |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "errPosition", |
|
type: "input", |
|
span: 24, |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "名称1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "名称2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errType", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "类型1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "类型2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errDescirb", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "url", |
|
name: "name", |
|
home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-img", |
|
span: 24, |
|
action: action, |
|
}, |
|
{ |
|
label: "照片墙", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
fileType: "img", //img/video/audio |
|
action: action, |
|
}, |
|
], |
|
}, |
|
}, |
|
]; |
|
this.dialogVisible = true; |
|
}, |
|
// 视频上传成功 |
|
handleSuccessVideo(response, file, fileList, item) { |
|
console.log("response--------------->", response); |
|
console.log("file--------------->", file); |
|
console.log("fileList--------------->", fileList); |
|
console.log("item--------------->", item); |
|
}, |
|
// 点击新增按钮 |
|
handleAdd() { |
|
console.log("addForm --------------->", this.addForm); |
|
let emptyPos = this.addForm.find((item) => item.form.errPosition == ""); |
|
let emptyDevice = this.addForm.find((item) => item.form.deviceName == ""); |
|
let emptyType = this.addForm.find((item) => item.form.errType == ""); |
|
let emptyDes = this.addForm.find((item) => item.form.errDescirb == ""); |
|
let emptyVideo = this.addForm.find((item) => item.form.errorVideo == ""); |
|
let emptyImg = this.addForm.find( |
|
(item) => item.form.errorImgs.length == 0 |
|
); |
|
if ( |
|
emptyPos || |
|
emptyDevice || |
|
emptyType || |
|
emptyDes || |
|
emptyVideo || |
|
emptyImg |
|
) { |
|
this.$message.error("需求填报时各内容均不可为空，请填写完全"); |
|
} else { |
|
this.addForm.push({ |
|
form: { |
|
errPosition: "", |
|
deviceName: "", |
|
errType: "", |
|
errDescirb: "", |
|
errorVideo: "", |
|
errorImgs: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
column: [ |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "errPosition", |
|
type: "input", |
|
span: 24, |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "名称1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "名称2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errType", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "类型1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "类型2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errDescirb", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "url", |
|
name: "name", |
|
home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-img", |
|
span: 24, |
|
action: action, |
|
}, |
|
{ |
|
label: "照片墙", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
fileType: "img", //img/video/audio |
|
action: action, |
|
}, |
|
], |
|
}, |
|
}); |
|
} |
|
}, |
|
// 点击关闭按钮 |
|
handleClose(){ |
|
this.detailForm = {} |
|
this.detailVisible = false |
|
}, |
|
// 点击取消按钮 |
|
handleCancel() { |
|
this.dialogVisible = false; |
|
this.addForm = [ |
|
{ |
|
form: { |
|
errPosition: "", |
|
deviceName: "", |
|
errType: "", |
|
errDescirb: "", |
|
errorVideo: "", |
|
errorImgs: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
column: [ |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "errPosition", |
|
type: "input", |
|
span: 24, |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "名称1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "名称2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errType", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "类型1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "类型2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errDescirb", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "url", |
|
name: "name", |
|
home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-img", |
|
span: 24, |
|
action: action, |
|
}, |
|
{ |
|
label: "照片墙", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
fileType: "img", //img/video/audio |
|
action: action, |
|
}, |
|
], |
|
}, |
|
}, |
|
]; |
|
}, |
|
// 点击编辑按钮 |
|
handleEdit(row) { |
|
console.log("row--------------------->", row); |
|
this.dialogTitle = "编辑"; |
|
this.addForm = [ |
|
{ |
|
form: { |
|
errPosition: "", |
|
deviceName: "", |
|
errType: "", |
|
errDescirb: "", |
|
errorVideo: "", |
|
errorImgs: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
column: [ |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "errPosition", |
|
type: "input", |
|
span: 24, |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "名称1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "名称2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errType", |
|
type: "select", |
|
dicData: [ |
|
{ |
|
label: "类型1", |
|
value: 0, |
|
}, |
|
{ |
|
label: "类型2", |
|
value: 1, |
|
}, |
|
], |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "errDescirb", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "url", |
|
name: "name", |
|
home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-img", |
|
span: 24, |
|
action: action, |
|
}, |
|
{ |
|
label: "照片墙", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
fileType: "img", //img/video/audio |
|
action: action, |
|
}, |
|
], |
|
}, |
|
}, |
|
]; |
|
this.dialogVisible = true; |
|
}, |
|
|
|
clickQualityYes(){ |
|
this.isQuality = 1 |
|
}, |
|
clickQualityNo(){ |
|
this.isQuality = 2 |
|
}, |
|
clickSafeYes(){ |
|
this.isSafe = 1 |
|
}, |
|
clickSafeNo(){ |
|
this.isSafe = 2 |
|
}, |
|
clickTimeYes(){ |
|
this.isTime = 1 |
|
}, |
|
clickTimeNo(){ |
|
this.isTime = 2 |
|
}, |
|
|
|
confirmName(){ |
|
this.nameImg = this.$refs.sign.submit(80, 50); |
|
}, |
|
|
|
clearName(){ |
|
this.$refs.sign.clear() |
|
this.nameImg = '' |
|
}, |
|
|
|
|
|
// 点击行内的评价并签字按钮 |
|
handleEvaluate(row){ |
|
this.rowStatus = row.operationStatus |
|
this.detailVisible = true |
|
this.detailForm = row |
|
this.isEvalute = true |
|
}, |
|
|
|
// 查看 |
|
handleView(row){ |
|
this.rowStatus = row.operationStatus |
|
this.detailVisible = true |
|
this.detailForm = row |
|
}, |
|
|
|
// 点击保存按钮 |
|
handleSave() { |
|
this.dialogVisible = false; |
|
}, |
|
// 点击确定按钮 |
|
handleConfirm() { |
|
this.dialogVisible = false; |
|
}, |
|
beforeOpen(done, type) { |
|
done(); |
|
}, |
|
beforeClose(done) { |
|
done(); |
|
}, |
|
searchReset(params, done) { |
|
// params.releaseTimeRange = dateFormat(new Date(), 'yyyy-MM-dd'); |
|
this.query = params; |
|
this.onLoad(this.page); |
|
}, |
|
searchChange(params, done) { |
|
this.query = params; |
|
this.page.currentPage = 1; |
|
this.onLoad(this.page, params); |
|
done(); |
|
}, |
|
closeDraw() { |
|
this.isRegister = false; |
|
}, |
|
currentChange(currentPage) { |
|
this.page.currentPage = currentPage; |
|
}, |
|
sizeChange(pageSize) { |
|
this.page.pageSize = pageSize; |
|
}, |
|
refreshChange() { |
|
this.onLoad(this.page, this.query); |
|
}, |
|
onLoad(page, params = {}) { |
|
this.data = [ |
|
{ |
|
addPerson:'张三', |
|
addPersonPhone:'13325412312', |
|
operationNo: "WX-20240820-01", |
|
deviceName: "通风柜", |
|
errPosition: "一楼102室", |
|
errType: "暖通自控", |
|
errDescirb: "通风柜无风，不通风", |
|
operationDate: "2024-02-15", |
|
operationStatus: 1, |
|
finishDate: "2024-02-26", |
|
addTime:'2024-02-15 16:00:05', |
|
errorVideo: "/i/movie.ogg", |
|
errorImg: [ |
|
"https://api.avuejs.com/imgview/1721789673575.jpg", |
|
"https://api.avuejs.com/imgview/1721800386561.jpg", |
|
], |
|
}, |
|
{ |
|
addPerson:'张三', |
|
addPersonPhone:'13325412312', |
|
operationNo: "WX-20240820-01", |
|
deviceName: "通风柜", |
|
errPosition: "一楼102室", |
|
errType: "暖通自控", |
|
errDescirb: "通风柜无风，不通风", |
|
operationDate: "2024-02-15", |
|
operationStatus: 2, |
|
finishDate: "2024-02-26", |
|
addTime:'2024-02-15 16:00:05', |
|
errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4", |
|
errorImg: [], |
|
orderTime:'2024-02-18 15:32:10', |
|
maintainPerson:'李四', |
|
maintainName:'通风柜', |
|
errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因', |
|
dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法', |
|
tableData:[ |
|
{name:'物料1',money:100.00}, |
|
{name:'物料2',money:100.00}, |
|
{name:'物料3',money:58.50}, |
|
{name:'物料4',money:32.00}, |
|
] |
|
}, |
|
{ |
|
addPerson:'张三', |
|
addPersonPhone:'13325412312', |
|
operationNo: "WX-20240820-01", |
|
deviceName: "通风柜", |
|
errPosition: "一楼102室", |
|
errType: "暖通自控", |
|
errDescirb: "通风柜无风，不通风", |
|
operationDate: "2024-02-15", |
|
operationStatus: 3, |
|
finishDate: "2024-02-26", |
|
addTime:'2024-02-15 16:00:05', |
|
errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4", |
|
errorImg: [], |
|
orderTime:'2024-02-18 15:32:10', |
|
maintainPerson:'李四', |
|
maintainName:'通风柜', |
|
errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因', |
|
dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法', |
|
tableData:[ |
|
{name:'物料1',money:100.00}, |
|
{name:'物料2',money:100.00}, |
|
{name:'物料3',money:58.50}, |
|
{name:'物料4',money:32.00}, |
|
] |
|
}, |
|
]; |
|
this.loading = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped></style> |
|
<style lang="scss"> |
|
.el-drawer__wrapper { |
|
.register_box { |
|
width: 800px !important; |
|
// padding: 0 40px; |
|
|
|
.title_box { |
|
// padding: 0 40px; |
|
// margin-top: 40px; |
|
|
|
.title_txt { |
|
display: flex; |
|
height: 30px; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.txt { |
|
color: rgba(0, 0, 0, 0.85); |
|
font-weight: 500; |
|
line-height: 24px; |
|
} |
|
|
|
.img_box { |
|
img { |
|
width: 30px; |
|
height: 30px; |
|
} |
|
} |
|
} |
|
|
|
.sub_txt { |
|
font-size: 12px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #999999; |
|
line-height: 16px; |
|
} |
|
} |
|
|
|
.tip_box { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin: 60px 0 20px 0; |
|
|
|
.img { |
|
width: 30px; |
|
height: 30px; |
|
} |
|
|
|
.tip_txt { |
|
font-size: 24px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #00b578; |
|
margin-left: 10px; |
|
} |
|
|
|
.fail_txt { |
|
color: #f93a4a; |
|
} |
|
|
|
.warn_txt { |
|
color: #ff6010; |
|
} |
|
} |
|
|
|
.tips_txt { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 14px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #f93a4a; |
|
} |
|
|
|
.tips_warn { |
|
color: #ff6010; |
|
} |
|
|
|
.fail_tip { |
|
color: #ff6010; |
|
} |
|
|
|
.account_mess { |
|
.mess_tit { |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #333333; |
|
margin: 40px 0 20px 0; |
|
} |
|
|
|
.mess_box { |
|
width: 100%; |
|
min-height: 123px; |
|
background: #f5f6fa; |
|
border-radius: 8px; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.left_box { |
|
width: 25%; |
|
margin-left: 30px; |
|
|
|
.acc_text { |
|
font-size: 14px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #999999; |
|
margin-bottom: 14px; |
|
} |
|
|
|
.acc_txt { |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #00b578; |
|
} |
|
} |
|
|
|
.fail_box { |
|
.acc_txt { |
|
color: #333333; |
|
} |
|
} |
|
|
|
.warn_box { |
|
.acc_txt { |
|
color: #333333; |
|
} |
|
} |
|
|
|
.right_box { |
|
display: flex; |
|
width: 75%; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.acc_box { |
|
.acc_text { |
|
font-size: 14px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #999999; |
|
margin-bottom: 14px; |
|
} |
|
|
|
.acc_txt { |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #00b578; |
|
} |
|
} |
|
} |
|
|
|
.fail_right { |
|
.acc_box { |
|
.acc_txt { |
|
color: #333333; |
|
} |
|
} |
|
} |
|
|
|
.warn_right { |
|
.acc_box { |
|
.acc_txt { |
|
color: #333333; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.reg_box { |
|
justify-content: start; |
|
|
|
.left_box { |
|
.acc_txt { |
|
color: #333333; |
|
} |
|
} |
|
|
|
.right_box { |
|
.acc_box { |
|
.acc_txt { |
|
color: #333333; |
|
} |
|
|
|
.acc_warn { |
|
color: #ff6010; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.btn { |
|
width: 151px; |
|
height: 50px; |
|
background: #1677ff; |
|
border-radius: 2px 2px 2px 2px; |
|
margin: 0 auto; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #ffffff; |
|
cursor: pointer; |
|
margin-top: 50px; |
|
} |
|
} |
|
|
|
.prin_table table tr td { |
|
padding: 4px 0; |
|
} |
|
} |
|
</style>
|
|
|