tianq
3 years ago
7 changed files with 50 additions and 546 deletions
@ -1,16 +0,0 @@ |
|||||
import * as echarts from "echarts"; |
|
||||
export function pieOption() { |
|
||||
return { |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value' |
|
||||
}, |
|
||||
series: [{ |
|
||||
data: [120, 200, 150, 80, 70, 110, 130], |
|
||||
type: 'bar' |
|
||||
}] |
|
||||
}; |
|
||||
} |
|
||||
@ -1,503 +0,0 @@ |
|||||
<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