|
|
|
@@ -0,0 +1,432 @@ |
|
|
|
<template> |
|
|
|
<div class="pages"> |
|
|
|
<!-- 头 --> |
|
|
|
<div class="app-top"> |
|
|
|
<div class="app-titel" style="margin-top: 5px"> |
|
|
|
<div class="label" v-if="orgType != 3">项目：</div> |
|
|
|
<div v-if="orgType != 3"> |
|
|
|
<el-select |
|
|
|
v-model="projectId" |
|
|
|
filterable |
|
|
|
multiple |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in houseList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.propertyName" |
|
|
|
:value="item.id" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="label">预警人：</div> |
|
|
|
<div> |
|
|
|
<el-select |
|
|
|
v-model="accountId" |
|
|
|
clearable |
|
|
|
filterable |
|
|
|
multiple |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in operaList" |
|
|
|
:key="item.accountId" |
|
|
|
:label="item.name" |
|
|
|
:value="item.accountId" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<el-button @click="Screening()" type="primary">筛选</el-button> |
|
|
|
</div> |
|
|
|
<div style="margin-left: auto; margin-right: 10px"> |
|
|
|
<el-button |
|
|
|
@click=" |
|
|
|
editorinfo(); |
|
|
|
dialogTitle = '预警新增'; |
|
|
|
" |
|
|
|
type="primary" |
|
|
|
>新增</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="cen-tab"> |
|
|
|
<el-table :data="tableData" border style="width: 100%"> |
|
|
|
<el-table-column |
|
|
|
type="index" |
|
|
|
label="序号" |
|
|
|
width="50" |
|
|
|
header-align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="houseName" label="项目" header-align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="accountName" |
|
|
|
label="预警人" |
|
|
|
header-align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="createTime" |
|
|
|
label="创建时间" |
|
|
|
header-align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<!-- status 0启用 1禁用 --> |
|
|
|
<el-table-column prop="status" label="状态" header-align="center"> |
|
|
|
<template slot-scope="{ row }"> |
|
|
|
{{ row.status == 0 ? "启用" : "禁用" }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作"> |
|
|
|
<template slot-scope="{ row }"> |
|
|
|
<el-button |
|
|
|
v-if="true" |
|
|
|
type="text" |
|
|
|
@click=" |
|
|
|
watchDetail(row); |
|
|
|
dialogTitle = '查看'; |
|
|
|
" |
|
|
|
>详情</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
v-if="true" |
|
|
|
type="text" |
|
|
|
@click=" |
|
|
|
editRow(row); |
|
|
|
dialogTitle = '预警编辑'; |
|
|
|
" |
|
|
|
>编辑</el-button |
|
|
|
> |
|
|
|
<el-button v-if="true" type="text" @click="deleteRow(row)" |
|
|
|
>删除</el-button |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible"> |
|
|
|
<div class="dialog"> |
|
|
|
<div style="display: flex; align-items: center"> |
|
|
|
<div class="label">项目：</div> |
|
|
|
<div> |
|
|
|
<el-select |
|
|
|
v-model="rowDelObj.projectId" |
|
|
|
filterable |
|
|
|
multiple |
|
|
|
:disabled="banInput" |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in houseList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.propertyName" |
|
|
|
:value="item.id" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div style="margin: 0 0 0 20px" class="label">预警人：</div> |
|
|
|
<div> |
|
|
|
<el-select |
|
|
|
v-model="rowDelObj.accountId" |
|
|
|
:disabled="banInput" |
|
|
|
clearable |
|
|
|
filterable |
|
|
|
multiple |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in operaList" |
|
|
|
:key="item.accountId" |
|
|
|
:label="item.name" |
|
|
|
:value="item.accountId" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="margin: 20px 0; display: flex; align-items: center"> |
|
|
|
<div class="label">剩余通知：</div> |
|
|
|
<el-input |
|
|
|
:disabled="banInput" |
|
|
|
style="width: 120px" |
|
|
|
v-model="rowDelObj.timer" |
|
|
|
type="number" |
|
|
|
placeholder="请输入小时" |
|
|
|
></el-input> |
|
|
|
|
|
|
|
<div style="margin: 0 0 0 20px" class="label">发送次数：</div> |
|
|
|
<el-input |
|
|
|
:disabled="banInput" |
|
|
|
style="width: 120px" |
|
|
|
v-model="rowDelObj.sendTimes" |
|
|
|
type="number" |
|
|
|
placeholder="请输入天数" |
|
|
|
></el-input> |
|
|
|
</div> |
|
|
|
<div class="footer" style="display: flex; justify-content: flex-end"> |
|
|
|
<el-button |
|
|
|
v-if="!banInput" |
|
|
|
@click="transferWarmingSave" |
|
|
|
type="primary" |
|
|
|
>确认</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
projectId: [], // 选中项目的id |
|
|
|
houseList: [], // 当前用户的项目列表 |
|
|
|
operaList: [], // 运营用户 |
|
|
|
accountId: [], // 运营id |
|
|
|
orgType: localStorage.getItem("orgType"), // 进入后台的身份类型 |
|
|
|
|
|
|
|
page: { |
|
|
|
total: 0, // 总页数 |
|
|
|
currentPage: 1, // 当前页数 |
|
|
|
pageSize: 10, // 每页显示多少条 |
|
|
|
}, |
|
|
|
|
|
|
|
tableData: [], // 表格列表 |
|
|
|
|
|
|
|
dialogTitle: "预警新增", // 默认新增 |
|
|
|
rowDelObj: {}, // 单条数据存放 |
|
|
|
dialogFormVisible: false, // 操作弾框 |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
banInput() { |
|
|
|
return this.dialogTitle === "查看"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.initPage(); |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() {}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
watchDetail(row) { |
|
|
|
console.log(row); |
|
|
|
const obj = { |
|
|
|
...row, |
|
|
|
accountId: row.accountId.split(","), |
|
|
|
projectId: row.houseId.split(","), |
|
|
|
}; |
|
|
|
this.rowDelObj = obj; |
|
|
|
this.dialogFormVisible = true; |
|
|
|
}, |
|
|
|
// 编辑 |
|
|
|
editRow(row) { |
|
|
|
const obj = { |
|
|
|
...row, |
|
|
|
accountId: row.accountId.split(","), |
|
|
|
projectId: row.houseId.split(","), |
|
|
|
}; |
|
|
|
this.rowDelObj = obj; |
|
|
|
this.dialogFormVisible = true; |
|
|
|
}, |
|
|
|
|
|
|
|
// 初始化页面数据 |
|
|
|
initPage() { |
|
|
|
this.zkhousePage(); |
|
|
|
this.getAllOperationsStaff(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 初始化搜索参数 |
|
|
|
initSearchParams() { |
|
|
|
this.page = this.$options.data().page; |
|
|
|
this.tableData = this.$options.data().tableData; |
|
|
|
}, |
|
|
|
|
|
|
|
//切换项目 |
|
|
|
Screening() { |
|
|
|
this.initSearchParams(); |
|
|
|
this.getcompanyList(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 新增 |
|
|
|
editorinfo() { |
|
|
|
this.rowDelObj = this.$options.data().rowDelObj; |
|
|
|
this.dialogFormVisible = true; |
|
|
|
}, |
|
|
|
|
|
|
|
// 新增/编辑 |
|
|
|
transferWarmingSave() { |
|
|
|
if (this.rowDelObj.projectId.length === 0) { |
|
|
|
this.$message.error("请选择项目") |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.rowDelObj.accountId.length === 0) { |
|
|
|
this.$message.error("请选择预警人") |
|
|
|
return |
|
|
|
} |
|
|
|
if (!this.rowDelObj.timer) { |
|
|
|
this.$message.error("请输入剩余通知") |
|
|
|
return |
|
|
|
} |
|
|
|
if (!this.rowDelObj.sendTimes) { |
|
|
|
this.$message.error("请输入发送次数") |
|
|
|
return |
|
|
|
} |
|
|
|
const params = { |
|
|
|
...this.rowDelObj, |
|
|
|
houseId: this.rowDelObj.projectId.join(","), |
|
|
|
accountId: this.rowDelObj.accountId.join(","), |
|
|
|
}; |
|
|
|
this.$api.http.transferWarmingSave(params).then((res) => { |
|
|
|
if (res.code == 10000) { |
|
|
|
this.$message.success(res.message); |
|
|
|
} else { |
|
|
|
this.$message.error(res.message); |
|
|
|
} |
|
|
|
this.dialogFormVisible = false; |
|
|
|
this.initSearchParams(); |
|
|
|
this.initPage(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除 |
|
|
|
deleteRow(row) { |
|
|
|
this.$confirm(`是否确认删除" ${row.houseName} "预警`, "警告", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning", |
|
|
|
}).then(() => { |
|
|
|
this.$api.http.transferWarmingDel({ id: row.id }).then((res) => { |
|
|
|
if (res.code == 10000) { |
|
|
|
this.$message.success(res.message); |
|
|
|
} else { |
|
|
|
this.$message.error(res.message); |
|
|
|
} |
|
|
|
|
|
|
|
this.dialogFormVisible = false; |
|
|
|
this.initSearchParams(); |
|
|
|
this.initPage(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取运营人员列表 |
|
|
|
getAllOperationsStaff() { |
|
|
|
this.$api.http.getAllOperationsStaff().then((res) => { |
|
|
|
this.operaList = res.data; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
//获取项目 |
|
|
|
zkhousePage() { |
|
|
|
this.$api.api |
|
|
|
.findHouseByUser({ |
|
|
|
orgType: this.orgType, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
this.houseList = res.data; |
|
|
|
this.getcompanyList(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取列表 |
|
|
|
getcompanyList() { |
|
|
|
const params = { |
|
|
|
current: this.page.currentPage, |
|
|
|
size: this.page.pageSize, |
|
|
|
houseId: this.projectId.join(","), |
|
|
|
accountId: this.accountId.join(","), |
|
|
|
}; |
|
|
|
this.$api.http.transferWarmingFindByPage(params).then((res) => { |
|
|
|
this.tableData = res.data.records; |
|
|
|
this.page.total = res.data.total; |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.pages { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 5px 15px 40px; |
|
|
|
min-width: 1200px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.app-top { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 100%; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); |
|
|
|
border-radius: 4px; |
|
|
|
padding-top: 15px; |
|
|
|
padding-bottom: 15px; |
|
|
|
|
|
|
|
.app-titel { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.label { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
color: #32363d; |
|
|
|
line-height: 14px; |
|
|
|
margin-left: 15px; |
|
|
|
// min-width: 100px; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.toptimeqhuan { |
|
|
|
height: 30px; |
|
|
|
background: #ffffff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.toptimeqhuan div { |
|
|
|
padding-left: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
text-align: center; |
|
|
|
line-height: 30px; |
|
|
|
font-size: 14px; |
|
|
|
margin-right: 15px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.cen-tab { |
|
|
|
margin-top: 15px; |
|
|
|
padding: 15px; |
|
|
|
width: 100%; |
|
|
|
flex-grow: 1; |
|
|
|
background: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.dialog { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/deep/input::-webkit-outer-spin-button, |
|
|
|
/deep/input::-webkit-inner-spin-button { |
|
|
|
-webkit-appearance: none !important; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
</style> |
