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.
504 lines
15 KiB
504 lines
15 KiB
3 years ago
|
<template>
|
||
|
|
<div class="m-record"
|
||
|
|
style="padding: 0 20px">
|
||
|
|
<h3>巡查记录</h3>
|
||
|
|
<div class="mt10"
|
||
|
|
v-if="formType == 'edit'">
|
||
|
|
<el-button size="small"
|
||
|
|
:class="[source==='manage'?'diy-button--add':'diy-button--export']"
|
||
|
|
:disabled="btnDisabled || disabled"
|
||
|
|
@click="handleAdd">新增</el-button>
|
||
|
|
</div>
|
||
|
|
<el-table :data="tableData"
|
||
|
|
row-key="id"
|
||
|
|
border
|
||
|
|
style="width: 100%"
|
||
|
|
:header-cell-style="getRowClass">
|
||
|
|
<el-table-column label="序号"
|
||
|
|
type="index"
|
||
|
|
align="center"
|
||
|
|
width="50">
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column prop="patrolTime"
|
||
|
|
label="巡查时间"
|
||
|
|
align="center"
|
||
|
|
width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-date-picker v-if="scope.row.isEdit"
|
||
|
|
v-model="scope.row.patrolTime"
|
||
|
|
type="date"
|
||
|
|
class="input-width"
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
placeholder="选择日期">
|
||
|
|
</el-date-picker>
|
||
|
|
<div v-else
|
||
|
|
class="div-content">{{ scope.row.patrolTime }}</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column prop="staffId"
|
||
|
|
label="巡查人员"
|
||
|
|
align="center"
|
||
|
|
width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-select v-if="scope.row.isEdit"
|
||
|
|
filterable
|
||
|
|
v-model="scope.row.staffId"
|
||
|
|
placeholder="请选择"
|
||
|
|
class="input-width"
|
||
|
|
@change="handleChangeStaff(scope.row)"
|
||
|
|
clearable>
|
||
|
|
<el-option v-for="subItem in optionStaff"
|
||
|
|
:key="subItem.value"
|
||
|
|
:label="subItem.label"
|
||
|
|
:value="subItem.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<div v-else
|
||
|
|
class="div-content">{{ scope.row.staffName }}</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column prop="mobile"
|
||
|
|
label="联系电话"
|
||
|
|
align="center"
|
||
|
|
width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input v-if="scope.row.isEdit"
|
||
|
|
type="number"
|
||
|
|
v-model="scope.row.mobile"
|
||
|
|
placeholder="请输入"
|
||
|
|
class="input-width"
|
||
|
|
clearable
|
||
|
|
disabled></el-input>
|
||
|
|
<div v-else
|
||
|
|
class="div-content">{{ scope.row.mobile }}</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column prop="result"
|
||
|
|
label="巡查结果"
|
||
|
|
align="center"
|
||
|
|
width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-select v-if="scope.row.isEdit"
|
||
|
|
v-model="scope.row.result"
|
||
|
|
placeholder="请选择"
|
||
|
|
class="input-width"
|
||
|
|
size="small"
|
||
|
|
clearable>
|
||
|
|
<el-option v-for="subItem in optionResult"
|
||
|
|
:key="subItem.value"
|
||
|
|
:label="subItem.label"
|
||
|
|
:value="subItem.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<div v-else
|
||
|
|
class="div-content">{{ scope.row.resultName }}</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column prop="detailed"
|
||
|
|
label="隐患明细"
|
||
|
|
align="center"
|
||
|
|
width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input v-if="scope.row.isEdit"
|
||
|
|
type="text"
|
||
|
|
v-model="scope.row.detailed"
|
||
|
|
placeholder="请输入"
|
||
|
|
class="input-width"
|
||
|
|
maxlength="500"
|
||
|
|
clearable></el-input>
|
||
|
|
<div v-else
|
||
|
|
class="div-content">{{ scope.row.detailed }}</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column prop="imgList"
|
||
|
|
label="图片列表"
|
||
|
|
align="center"
|
||
|
|
width="150px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div v-if="scope.row.isEdit">
|
||
|
|
<el-upload :headers="$getElUploadHeaders()"
|
||
|
|
class="avatar-uploader"
|
||
|
|
:action="uploadUrl"
|
||
|
|
:data="{ customerId: customerId }"
|
||
|
|
:show-file-list="true"
|
||
|
|
:limit="3"
|
||
|
|
:file-list="scope.row.imgShowList"
|
||
|
|
:on-success="(res) => handleImgSuccess(res, scope.row)"
|
||
|
|
:on-remove="(res) => handleImgRemove(res, scope.row)"
|
||
|
|
list-type="picture"
|
||
|
|
:before-upload="beforeImgUpload">
|
||
|
|
<i class="el-icon-plus avatar-uploader-icon"></i> 最多三张图片
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else
|
||
|
|
class="div-content">
|
||
|
|
<el-image v-if="scope.row.imgList.length > 0"
|
||
|
|
style="width: 100px; height: 50px"
|
||
|
|
:src="scope.row.imgList[0]"
|
||
|
|
fit="cover"
|
||
|
|
:preview-src-list="scope.row.imgList"></el-image>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column prop="reviewTime"
|
||
|
|
label="拟复查时间"
|
||
|
|
align="center"
|
||
|
|
width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-date-picker v-if="scope.row.isEdit"
|
||
|
|
v-model="scope.row.reviewTime"
|
||
|
|
type="date"
|
||
|
|
class="input-width"
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
placeholder="选择日期">
|
||
|
|
</el-date-picker>
|
||
|
|
<div v-else
|
||
|
|
class="div-content">{{ scope.row.reviewTime }}</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column v-if="!disabled"
|
||
|
|
fixed="right"
|
||
|
|
label="操作"
|
||
|
|
align="center"
|
||
|
|
width="120">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<template v-if="scope.row.isEdit">
|
||
|
|
<el-button @click="handleEdit(scope.row)"
|
||
|
|
type="text"
|
||
|
|
size="small"
|
||
|
|
class="btn-color-edit">保存</el-button>
|
||
|
|
<el-button @click="handleChange(scope.row, 'cancle')"
|
||
|
|
type="text"
|
||
|
|
size="small"
|
||
|
|
class="btn-color-edit">取消</el-button>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<el-button v-if="formType == 'edit'"
|
||
|
|
@click="handleChange(scope.row, 'edit')"
|
||
|
|
type="text"
|
||
|
|
size="small"
|
||
|
|
:disabled="disabled"
|
||
|
|
class="btn-color-edit">修改</el-button>
|
||
|
|
<el-popconfirm v-if="formType == 'edit'"
|
||
|
|
title="删除之后无法恢复，确认删除？"
|
||
|
|
@onConfirm="del(scope.row)"
|
||
|
|
@confirm="del(scope.row)">
|
||
|
|
<el-button slot="reference"
|
||
|
|
type="text"
|
||
|
|
size="small"
|
||
|
|
class="btn-color-del"
|
||
|
|
style="margin-left: 10px">删除</el-button>
|
||
|
|
</el-popconfirm>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { requestPost } from "@/js/dai/request";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
enterpriseId: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
enterpriseInfo: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
formType: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
source: {//展示来源：manage 管理平台 visiual 可视化平台
|
||
|
|
type: String,
|
||
|
|
default: 'manage'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
|
||
|
|
customerId: localStorage.getItem("customerId"),
|
||
|
|
|
||
|
|
btnDisabled: false,
|
||
|
|
btnType: "cancle",
|
||
|
|
isEdit: false,
|
||
|
|
tableData: [],
|
||
|
|
tempRow: {},
|
||
|
|
|
||
|
|
optionResult: [
|
||
|
|
{
|
||
|
|
label: "合格",
|
||
|
|
value: "0",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "不合格",
|
||
|
|
value: "1",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
optionStaff: [
|
||
|
|
// {
|
||
|
|
// label: "人名",
|
||
|
|
// value: "staffId",
|
||
|
|
// },
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
allowOperate () {
|
||
|
|
const {
|
||
|
|
enterpriseInfo: { agencyId },
|
||
|
|
} = this;
|
||
|
|
return agencyId && agencyId == this.$store.state.user.agencyId;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
enterpriseId: {
|
||
|
|
handler (val) {
|
||
|
|
console.log("val------points", val);
|
||
|
|
if (val.length > 0) {
|
||
|
|
this.btnDisabled = false;
|
||
|
|
this.getList();
|
||
|
|
} else this.btnDisabled = true;
|
||
|
|
},
|
||
|
|
immediate: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
created () {
|
||
|
|
this.getOptionStaff();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
beforeImgUpload (file) {
|
||
|
|
console.log(file);
|
||
|
|
const isLt1M = file.size / 1024 / 1024 < 10;
|
||
|
|
const srcType = file.type;
|
||
|
|
const format = file.name.split(".").pop();
|
||
|
|
|
||
|
|
if (!isLt1M) {
|
||
|
|
this.$message.error("上传文件大小不能超过 10MB!");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (srcType.indexOf("image") == -1) {
|
||
|
|
this.$message.error("仅限图片格式");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
handleImgSuccess (res, row) {
|
||
|
|
console.log("handleImgSuccess", res);
|
||
|
|
if (res.code === 0 && res.msg === "success") {
|
||
|
|
row.imgList.push(res.data.url);
|
||
|
|
this.computeImgShowList(row);
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computeImgShowList (row) {
|
||
|
|
row.imgShowList = row.imgList.map((url) => {
|
||
|
|
return { name: "", url };
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
handleImgRemove (file, row) {
|
||
|
|
console.log("handleImgRemove", file);
|
||
|
|
let url = file.url || file.response.data.url;
|
||
|
|
if (url) {
|
||
|
|
row.imgList = row.imgList.filter((item) => item !== url);
|
||
|
|
this.computeImgShowList(row);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getRowClass ({ rowIndex, columnIndex }) {
|
||
|
|
if (rowIndex === 0) {
|
||
|
|
return "background: #2195fe; color: #fff;";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handleChange (row, type) {
|
||
|
|
console.log("type----", type);
|
||
|
|
if (type == "cancle") {
|
||
|
|
row = { ...this.tempRow };
|
||
|
|
row.isEdit = false;
|
||
|
|
if (this.btnType == "add") this.tableData.pop();
|
||
|
|
this.getList();
|
||
|
|
console.log("row----", row);
|
||
|
|
} else {
|
||
|
|
this.tempRow = { ...row };
|
||
|
|
row.isEdit = true;
|
||
|
|
}
|
||
|
|
this.btnType = type;
|
||
|
|
this.isEdit = !this.isEdit;
|
||
|
|
},
|
||
|
|
|
||
|
|
handleChangeStaff (row) {
|
||
|
|
const { staffId } = row;
|
||
|
|
const { optionStaff } = this;
|
||
|
|
let item = optionStaff.find((item) => item.value == staffId);
|
||
|
|
if (item) {
|
||
|
|
row.staffName = item.name;
|
||
|
|
row.mobile = item.mobile;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async getOptionStaff () {
|
||
|
|
let url = `/data/aggregator/org/staff-select-list/${this.$store.state.user.agencyId}`;
|
||
|
|
const { data, code, msg } = await requestPost(url, {});
|
||
|
|
|
||
|
|
if (code === 0) {
|
||
|
|
this.optionStaff = data || [];
|
||
|
|
} else {
|
||
|
|
this.$message.error("请求工作人员数据失败！");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async handleEdit (row) {
|
||
|
|
if (this.btnType == "add") this.save(row);
|
||
|
|
else this.edit(row);
|
||
|
|
},
|
||
|
|
|
||
|
|
handleAdd () {
|
||
|
|
this.btnType = "add";
|
||
|
|
this.isEdit = true;
|
||
|
|
|
||
|
|
const item = {
|
||
|
|
isEdit: true,
|
||
|
|
enterpriseId: this.enterpriseId,
|
||
|
|
patrolTime: "",
|
||
|
|
staffId: "",
|
||
|
|
staffName: "",
|
||
|
|
mobile: "",
|
||
|
|
result: "",
|
||
|
|
imgList: [],
|
||
|
|
reviewTime: "",
|
||
|
|
};
|
||
|
|
this.computeImgShowList(item);
|
||
|
|
this.tableData.push(item);
|
||
|
|
},
|
||
|
|
|
||
|
|
async save (row) {
|
||
|
|
const params = {
|
||
|
|
partyMemberId: this.enterpriseId,
|
||
|
|
...row,
|
||
|
|
};
|
||
|
|
await this.$http
|
||
|
|
.post("/gov/org/enterprise/addorupdate-patrol", params)
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
} else {
|
||
|
|
this.$message.success("保存成功");
|
||
|
|
row.isEdit = false;
|
||
|
|
this.isEdit = false;
|
||
|
|
this.btnType = "cancle";
|
||
|
|
this.getList();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log("err", err);
|
||
|
|
return this.$message.error("网络错误");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
async edit (row) {
|
||
|
|
const params = {
|
||
|
|
...row,
|
||
|
|
};
|
||
|
|
|
||
|
|
await this.$http
|
||
|
|
.post("/gov/org/enterprise/addorupdate-patrol", params)
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
} else {
|
||
|
|
this.$message.success("保存成功");
|
||
|
|
row.isEdit = false;
|
||
|
|
this.isEdit = false;
|
||
|
|
this.getList();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log("err", err);
|
||
|
|
return this.$message.error("网络错误");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
async del (row) {
|
||
|
|
await this.$http
|
||
|
|
.post(`/gov/org/enterprise/del-patrol/${row.patrolId}`)
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
} else {
|
||
|
|
this.$message.success("删除成功");
|
||
|
|
this.getList();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log("err", err);
|
||
|
|
return this.$message.error("网络错误");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
async getList () {
|
||
|
|
const { enterpriseId } = this;
|
||
|
|
|
||
|
|
const params = {};
|
||
|
|
|
||
|
|
await this.$http
|
||
|
|
.post(`/gov/org/enterprise/patrollist/${enterpriseId}`, {
|
||
|
|
params,
|
||
|
|
})
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
} else {
|
||
|
|
this.tableData = res.data.list.map((item) => {
|
||
|
|
this.computeImgShowList(item);
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
isEdit: false,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log("err", err);
|
||
|
|
return this.$message.error("网络错误");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.m-record {
|
||
|
|
.mt10 {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.input-width {
|
||
|
|
width: 170px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|