|
@@ -0,0 +1,340 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- 设备台账全部信息 -->
|
|
|
+ <el-dialog :title="title" width="50%" custom-class="dialog-max" top="5vh" center :before-close="dialogClose"
|
|
|
+ :visible.sync="visible" :append-to-body="true" @open="handleOpen" @close="handleClose">
|
|
|
+ <el-form ref="faultManageForm" :model="faultManageForm" :rules="faultManageRules" label-width="180px"
|
|
|
+ label-position="left">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备名称" prop="deviceName" label-width="20%">
|
|
|
+ <el-input v-model="faultManageForm.deviceName" disabled placeholder="请选择设备" maxlength="10">
|
|
|
+ <el-button type="primary" slot="append" icon="el-icon-search"
|
|
|
+ @click="chooseLedger">选择</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备编号" prop="deviceNum" label-width="20%">
|
|
|
+ <el-input v-model="faultManageForm.deviceNum" disabled>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="规格型号" prop="deviceModel" label-width="20%">
|
|
|
+ <el-input v-model="faultManageForm.deviceModel" disabled>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备位置" prop="deviceLocation" label-width="20%">
|
|
|
+ <el-input v-model="faultManageForm.deviceLocation" disabled>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="购买时间" prop="buyTime" label-width="20%">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" disabled v-model="faultManageForm.buyTime"
|
|
|
+ type="date">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="故障时间" prop="faultTime" label-width="20%">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="faultManageForm.faultTime"
|
|
|
+ type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="故障原因" prop="faultReason" label-width="10%">
|
|
|
+ <el-input type="textarea" v-model="faultManageForm.faultReason" placeholder="请输入故障原因"
|
|
|
+ maxlength="100"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="处理人" prop="handlePersonName" label-width="20%">
|
|
|
+ <el-input v-model="faultManageForm.handlePersonName" disabled placeholder="请选择处理人"
|
|
|
+ maxlength="10">
|
|
|
+ <el-button type="primary" slot="append" icon="el-icon-search"
|
|
|
+ @click="chooseHandlePerson">选择</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="处理时间" prop="handleTime" label-width="20%">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="faultManageForm.handleTime"
|
|
|
+ type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="处理方法" prop="handleMethod" label-width="10%">
|
|
|
+ <el-input type="textarea" v-model="faultManageForm.handleMethod" placeholder="请输入处理方法"
|
|
|
+ maxlength="100"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="处理结果" prop="handleResult" label-width="10%">
|
|
|
+ <el-input type="textarea" v-model="faultManageForm.handleResult" placeholder="请输入处理结果"
|
|
|
+ maxlength="100"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="设备图片" prop="pictureList" label-width="10%">
|
|
|
+ <el-upload class="upload-demo" action="" :multiple="true" :auto-upload="false"
|
|
|
+ :on-change="handleChangePicture" :on-remove="handleRemovePicture"
|
|
|
+ :file-list="faultManageForm.pictureList" list-type="picture" accept=".jpg,.jpeg,.png">
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item style="text-align: center;">
|
|
|
+ <el-button type="primary" @click="saveFaultManageEvent">确定</el-button>
|
|
|
+ <!-- <el-button type="primary" @click="resetForm('deviceTypeForm')">重置</el-button> -->
|
|
|
+ <el-button @click="dialogClose">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 选择设备台账 -->
|
|
|
+ <ChooseLedger ref="chooseLedger" @receiveChooseLedger="receiveChooseLedger"></ChooseLedger>
|
|
|
+ <!-- 选择处理人 -->
|
|
|
+ <ChooseStaff ref="chooseDevicePerson" @receiveChooseStaff="receiveChooseStaff"></ChooseStaff>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SelectTree from '@/components/SelectTree/index.vue'
|
|
|
+import ChooseLedger from '@/views/device/deviceLedger/chooseLedger.vue'
|
|
|
+import ChooseStaff from '@/views/system/staff/chooseStaff.vue'
|
|
|
+import {
|
|
|
+ addFaultManage,
|
|
|
+ updateFaultManage,
|
|
|
+ getFaultManageById
|
|
|
+} from '@/api/fault/faultManage'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ SelectTree,
|
|
|
+ ChooseLedger,
|
|
|
+ ChooseStaff
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ title: '新增故障管理',
|
|
|
+ //表单参数
|
|
|
+ faultManageForm: {
|
|
|
+ id: null,
|
|
|
+ deviceLedgerId: null,
|
|
|
+ deviceName: null,
|
|
|
+ deviceNum: null,
|
|
|
+ deviceModel: null,
|
|
|
+ deviceLocation: null,
|
|
|
+ buyTime: null,
|
|
|
+ faultTime: null,
|
|
|
+ faultReason: null,
|
|
|
+ handlePerson: null,
|
|
|
+ handlePersonName: null,
|
|
|
+ handleTime: null,
|
|
|
+ handleMethod: null,
|
|
|
+ handleResult: null,
|
|
|
+ pictureList: []
|
|
|
+ },
|
|
|
+ //图片上传得到的文件
|
|
|
+ pictureFiles: [],
|
|
|
+ //修改时,删除的图片文件名
|
|
|
+ delFileNameList: [],
|
|
|
+ faultManageRules: {
|
|
|
+ deviceName: [
|
|
|
+ { required: true, message: '设备不能为空', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 关闭弹出层 */
|
|
|
+ dialogClose() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ handleOpen() {
|
|
|
+ if (this.faultManageForm.id) {
|
|
|
+ this.getFaultManageById(this.faultManageForm.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.faultManageForm.id = null
|
|
|
+ this.delFileNameList = []
|
|
|
+ this.resetForm('faultManageForm')
|
|
|
+ this.$emit('getFaultManagePage')
|
|
|
+ },
|
|
|
+ /** 重置表单 */
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ /** 通过id获取故障 */
|
|
|
+ getFaultManageById(id) {
|
|
|
+ getFaultManageById(id).then(res => {
|
|
|
+ let data = res.data
|
|
|
+ Object.keys(data).forEach(key => {
|
|
|
+ if (data[key] instanceof Array) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ if (data[key]) {
|
|
|
+ this.faultManageForm[key] = data[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ data.pictureList.map(item => {
|
|
|
+ item.name = item.originalFileName
|
|
|
+ item.url = process.env.VUE_APP_BASE_API + "/" + item.saveFileName
|
|
|
+ this.faultManageForm.pictureList.push(item)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 保存故障 */
|
|
|
+ saveFaultManageEvent() {
|
|
|
+ this.$refs['faultManageForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (!this.faultManageForm.id) {
|
|
|
+ this.addFaultManage()
|
|
|
+ } else {
|
|
|
+ this.updateFaultManage()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 新增故障 */
|
|
|
+ addFaultManage() {
|
|
|
+ const formData = new FormData()
|
|
|
+ Object.keys(this.faultManageForm).forEach(key => {
|
|
|
+ if (this.faultManageForm[key] instanceof Array) {
|
|
|
+ // 如果是数组就循环加入表单,key保持相同即可,这就是表达单的数组
|
|
|
+ // this.faultManageForm[key].forEach(item => {
|
|
|
+ // formData.append(key, item)
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ if (this.faultManageForm[key]) {
|
|
|
+ // 如果不是数组就直接追加进去
|
|
|
+ formData.append(key, this.faultManageForm[key])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.pictureFiles.map(item => {
|
|
|
+ if (item.raw) {
|
|
|
+ formData.append("files", item.raw);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ addFaultManage(formData).then(res => {
|
|
|
+ if (!res || !res.data) {
|
|
|
+ this.$message({
|
|
|
+ message: '新增设备台账失败!',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$message({
|
|
|
+ message: '新增设备台账成功!',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.dialogClose()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 修改故障 */
|
|
|
+ updateFaultManage() {
|
|
|
+ const formData = new FormData()
|
|
|
+ Object.keys(this.faultManageForm).forEach(key => {
|
|
|
+ if (this.faultManageForm[key] instanceof Array) {
|
|
|
+ // 如果是数组就循环加入表单,key保持相同即可,这就是表达单的数组
|
|
|
+ // this.faultManageForm[key].forEach(item => {
|
|
|
+ // formData.append(key, item)
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ if (this.faultManageForm[key]) {
|
|
|
+ // 如果不是数组就直接追加进去
|
|
|
+ formData.append(key, this.faultManageForm[key])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //将新上传的文件添加到FormData中
|
|
|
+ console.log(this.pictureFiles)
|
|
|
+ this.pictureFiles.map(item => {
|
|
|
+ if (item.raw) {
|
|
|
+ formData.append("files", item.raw);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.delFileNameList.map(item => {
|
|
|
+ formData.append("delFileNameList", item);
|
|
|
+ })
|
|
|
+ updateFaultManage(formData).then(res => {
|
|
|
+ if (!res || !res.data) {
|
|
|
+ this.$message({
|
|
|
+ message: '修改故障记录失败!',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$message({
|
|
|
+ message: '修改故障记录成功!',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.dialogClose()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 选择设备台账 */
|
|
|
+ chooseLedger() {
|
|
|
+ this.$refs.chooseLedger.visible = true
|
|
|
+ },
|
|
|
+ /** 接收选择设备台账传过来的值 */
|
|
|
+ receiveChooseLedger(data) {
|
|
|
+ this.faultManageForm.deviceLedgerId = data.id
|
|
|
+ this.faultManageForm.deviceName = data.deviceName
|
|
|
+ this.faultManageForm.deviceNum = data.deviceNum
|
|
|
+ this.faultManageForm.deviceModel = data.deviceModel
|
|
|
+ this.faultManageForm.deviceLocation = data.deviceLocation
|
|
|
+ this.faultManageForm.buyTime = data.buyTime
|
|
|
+ },
|
|
|
+ /** 选择处理人 */
|
|
|
+ chooseHandlePerson() {
|
|
|
+ this.$refs.chooseDevicePerson.visible = true
|
|
|
+ },
|
|
|
+ /** 接受选择的人员数据 */
|
|
|
+ receiveChooseStaff(data) {
|
|
|
+ this.faultManageForm.handlePerson = data.id
|
|
|
+ this.faultManageForm.handlePersonName = data.staffName
|
|
|
+ },
|
|
|
+ /** 图片状态改变 */
|
|
|
+ handleChangePicture(file, fileList) {
|
|
|
+ const obj = new Object();
|
|
|
+ obj.url = file.url;
|
|
|
+ obj.name = file.name;
|
|
|
+ this.faultManageForm.pictureList.push(obj)
|
|
|
+ this.pictureFiles = fileList
|
|
|
+ console.log(this.pictureFiles)
|
|
|
+ },
|
|
|
+ /** 图片移除文件 */
|
|
|
+ handleRemovePicture(file, fileList) {
|
|
|
+ this.faultManageForm.pictureList = this.faultManageForm.pictureList.filter(item => item.url !== file.url)
|
|
|
+ let url = file.url
|
|
|
+ this.delFileNameList.push(url.substring(url.indexOf(process.env.VUE_APP_BASE_API + "/") + (process.env.VUE_APP_BASE_API + "/").length))
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+.dialog-max {
|
|
|
+ height: 90vh;
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ height: 77vh;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-upload-list {
|
|
|
+ // height: 40px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+</style>
|