tianq
2 years ago
2 changed files with 529 additions and 3 deletions
@ -0,0 +1,503 @@ |
|||
<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> |
|||
Loading…
Reference in new issue