394 lines
12 KiB
Vue

<template>
<div class="fullHeight whiteBlock">
<vue-scroll>
<div class="form-add">
<el-form ref="form" :model="form" :rules="rules" label-width="400px">
<el-form-item
:label="$t('message.safeManage.addSafeRecord.inspection')"
prop="checkNature"
>
<el-select
v-model="form.checkNature"
:placeholder="
$t('message.safeManage.addSafeRecord.placeholder_inspection')
"
size="medium"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('message.safeManage.addSafeRecord.items')" prop="checkPoints">
<el-cascader
v-model="checkPoints"
ref="ccCascader"
separator="/"
:placeholder="
$t('message.safeManage.addSafeRecord.placeholder_items')
"
:options="checkContent"
:props="props"
@change="changeCheckPoints"
clearable
expand-trigger="hover"
popper-class="ticket_ccCascader"
size="medium"
></el-cascader>
</el-form-item>
<el-form-item :label="$t('message.safeManage.addSafeRecord.content')" prop="checkContent">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 6 }"
:placeholder="$t('message.safeManage.placeholder')"
v-model="form.checkContent"
size="medium"
style="width: 100%"
>
</el-input>
</el-form-item>
<el-form-item :label="$t('message.safeManage.addSafeRecord.remarks')" prop="remarks">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
:placeholder="$t('message.safeManage.placeholder')"
v-model="form.remarks"
size="medium"
style="width: 100%"
>
</el-input>
</el-form-item>
<!-- 检查时间 -->
<el-form-item :label="$t('message.safeMangeCheck.checkedTime')" prop="checkTime">
<!-- 选择日期时间 -->
<el-date-picker
v-model="form.checkTime"
type="datetime"
:placeholder="$t('message.safeMangeCheck.chooseDateAndTime')"
style="width:100%">
</el-date-picker>
</el-form-item>
<el-form-item
:label="$t('message.safeManage.addSafeRecord.appendix')"
prop="fileUrl"
>
<el-upload
:action="uploadUrl"
list-type="picture-card"
name="files"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:limit="5"
ref="upload"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item prop="isRectify" :label="$t('message.safeManage.addSafeRecord.rectify')">
<el-switch v-model="rectify" active-color="#13ce66" @change='switchChange'>
</el-switch>
</el-form-item>
<el-form-item
:label="$t('message.safeManage.addSafeRecord.rectifyName')"
v-if="rectify"
>
<el-select
v-model="form.rectifyPeople"
:placeholder="
$t('message.safeManage.addSafeRecord.placeholder_rectify')
"
size="medium"
>
<el-option
v-for="(item, index) in crewList"
:key="index"
:label="item.workerName"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
:label="$t('message.safeManage.addSafeRecord.noticeName')"
>
<el-select
v-model="informCrew"
:placeholder="
$t('message.safeManage.addSafeRecord.placeholder_notice')
"
multiple
size="medium"
>
<el-option
v-for="(item, index) in crewList"
:key="index"
:label="item.workerName"
:value="item.workerName"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
:label="$t('message.safeManage.addSafeRecord.rectify_require')"
v-if="rectify"
prop="rectifyRequire"
>
<el-input
type="textarea"
autosize
:placeholder="$t('message.safeManage.placeholder')"
v-model="form.rectifyRequire"
size="medium"
style="width: 100%"
>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="medium" @click="submitBtn">
{{ $t("message.safeManage.addSafeRecord.submit") }}
</el-button>
</el-form-item>
</el-form>
</div>
</vue-scroll>
<!-- 查看大图 -->
<el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
import {
getCheckPointsListApi,
getCrewListDataApi,
addSecurityChecksApi
} from "@/assets/js/api/safeManage";
import moment from "moment";
export default {
data() {
return {
uploadUrl: "",
fileUrl: "",
projectSn: "",
options: [
{
value: this.$t('message.safeMangeCheck.checkedCycle')[0]/* "周检" */,
label: this.$t('message.safeMangeCheck.checkedCycle')[0]/* "周检" */,
},
{
value:this.$t('message.safeMangeCheck.checkedCycle')[1] /* "月检" */,
label: this.$t('message.safeMangeCheck.checkedCycle')[1]/* "月检" */,
},
{
value: this.$t('message.safeMangeCheck.checkedCycle')[2]/* "其它" */,
label: this.$t('message.safeMangeCheck.checkedCycle')[2]/* "其它" */,
},
], //检查信息
checkContent: [], //检查项
crewList: [], //通知人员 整改人员 下拉数据
informCrew: [], //选中的通知人员
fileList: [],
checkPoints:[], //选中的检查项
props: {
multiple: true,
value:'checkname',
label:'checkname',
children:'children'
},
rectify: true,
form: {
checkContent:'',
checkNature:'',
checkPoints:'',
fileUrl:'',
isRectify:0,
notifier:'',
rectifyPeople:'',
rectifyRequire:'',
remarks:'',
checkTime:'',
},
rules:{
checkContent:[
{ required: true, message: this.$t('message.safeMangeCheck.placeholder')/* '请输入' */, trigger: 'blur' }
],
checkNature:[
{ required: true, message: this.$t('message.safeMangeCheck.placeholder')/* '请输入' */, trigger: 'blur' }
],
checkPoints:[
{ required: true, message:this.$t('message.safeMangeCheck.placeholder') /* '请输入' */, trigger: 'blur' }
],
fileUrl:[
{ required: true, message: this.$t('message.safeMangeCheck.pleaseUpdate')/* '请上传' */, trigger: 'blur' }
],
rectifyRequire:[
{ required: true, message: this.$t('message.safeMangeCheck.placeholder')/* '请输入' */, trigger: 'blur' }
],
},
value: "",
//查看大图
dialogImageUrl: "",
dialogVisible: false,
};
},
created() {
this.projectSn = this.$store.state.projectSn;
this.uploadUrl = this.$store.state.UPLOADURL;
this.fileUrl = this.$store.state.FILEURL;
this.getCheckPointsList();
this.getCrewListData();
},
methods: {
//获取检查项下拉
getCheckPointsList() {
let data = {
projectSn: this.projectSn,
};
getCheckPointsListApi(data).then((res) => {
if (res.code == 200) {
//没有二级数据直接禁用
for(let i=0; i<res.result.length;i++){
if(res.result[i].children.length==0){
res.result[i].disabled = true;
}
}
this.checkContent = res.result;
} else {
this.$message.error(res.message);
}
});
},
//获取所有 整改人员 通知人员 列表
getCrewListData() {
let data = {
projectSn: this.projectSn,
};
getCrewListDataApi(data).then((res) => {
if (res.code == 200) {
this.crewList = res.result;
} else {
this.$message.error(res.message);
}
});
},
//上传成功
handleSuccess(file) {
let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
this.fileList.push(data);
},
//删除成功
handleRemove(file) {
let url = file.response.data[0].imageUrl;
for (let i = 0; i < this.fileList.length; i++) {
if (this.fileList[i].url == url) {
this.fileList.splice(i, 1);
}
}
},
//查看图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//切换开关时
switchChange(val){
if(val){
this.form.isRectify = 0;
this.rectify = true;
}else{
this.form.isRectify = 1;
this.rectify = false;
}
},
//切换检查项
changeCheckPoints(val) {
let arr = [];
for(let i =0;i<val.length;i++){
let str = val[i][0]+"/"+val[i][1];
arr.push(str)
}
this.form.checkPoints = arr.join(',');
},
//确定新增
submitBtn() {
this.form.fileUrl = this.fileList.length>0? JSON.stringify(this.fileList):'';
this.form.notifier = this.informCrew.length>0? this.informCrew.join(','):'';
this.$refs.form.validate((valid)=>{
if(valid){
let time = moment(this.form.checkTime).format(
"YYYY-MM-DD HH:mm:ss"
);
this.form.checkTime=time
let data = JSON.parse(JSON.stringify(this.form));
data.projectSn = this.projectSn;
data.inspector = this.$store.state.userInfo.userId;
addSecurityChecksApi(data).then(res=>{
if(res.code==200){
this.form= {
checkContent:'',
checkNature:'',
checkPoints:'',
fileUrl:'',
isRectify:0,
notifier:'',
rectifyPeople:'',
rectifyRequire:'',
remarks:'',
checkTime:'',
};
this.rectify = true;
this.fileList = [];
this.informCrew=[];
this.checkPoints =[];
// '新增成功'
this.$message.success(this.$t('message.safeMangeCheck.addSuccess'));
this.$refs.upload.clearFiles();
}else{
this.$message.error(res.message)
}
})
}else{
return false;
}
})
},
},
};
</script>
<style lang="less" scoped>
.form-add {
width: 60%;
padding: 20px 0 20px;
// background-color: #fff;
.el-input--medium {
width: 60%;
}
.el-select,
.el-cascader--medium {
width: 100%;
}
.el-cascader__tags {
width: 60%;
}
}
</style>