bonus
/
SafetyAlertSystem-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

预警告警

This commit is contained in:
jjLv 2024-09-20 17:37:22 +08:00
parent 39ac1e8708
commit 10c24e773c
2 changed files with 510 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

929
src/components/TableModel/index.vue
View File

@ -1,457 +1,540 @@
<template> <template>
<!-- 表格公共组件 --> <!-- 表格公共组件 -->
<div> <div>
<!-- 表单搜索 --> <!-- 表单搜索 -->
<el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="100px" v-show="showSearch" <el-form
:rules="formRules"> :model="queryParams"
<el-form-item v-for="(item, v) in formLabel" :key="v" :label="item.f_label" :prop="item.f_model"> ref="queryFormRef"
<el-input v-if="item.f_type === 'ipt'" v-model="queryParams[item.f_model]" :placeholder="`请输入${item.f_label}`" size="small"
clearable style="width: 240px" /> :inline="true"
<el-select v-if="item.f_type === 'sel'" v-model="queryParams[item.f_model]" clearable filterable label-width="100px"
style="width: 240px" :placeholder="`请选择${item.f_label}`"> v-show="showSearch"
<el-option v-for="(sel, v) in item.f_selList" :key="v" :label="sel.label" :value="sel.value" /> :rules="formRules"
</el-select> >
<el-cascader v-if="item.f_type === 'selCasAdd'" v-model="queryParams[item.f_model]" :options="item.f_selList" <el-form-item
:props="item.optionProps" :show-all-levels="false" clearable v-for="(item, v) in formLabel"
@change="handleCasAdd($event, item.f_model, cascaderFunc, extraTableProp)" style="width: 240px" /> :key="v"
<el-cascader v-if="item.f_type === 'selCas'" v-model="queryParams[item.f_model]" :options="item.f_selList" :label="item.f_label"
:props="item.optionProps" :show-all-levels="false" @change="handleCas($event, item.f_model)" :prop="item.f_model"
style="width: 240px" /> >
<el-date-picker v-if="item.f_type === 'date'" v-model="queryParams[item.f_model]" style="width: 240px" <el-input
value-format="yyyy-MM-dd" type="date" :placeholder="`请输入${item.f_label}`" /> v-if="item.f_type === 'ipt'"
<el-date-picker v-if="item.f_type === 'dateRange'" v-model="timeList" style="width: 240px" v-model="queryParams[item.f_model]"
type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" :placeholder="`请输入${item.f_label}`"
end-placeholder="结束日期" @change="onChangeTime($event,item.dateType)" /> clearable
<el-input-number v-if="item.f_type === 'num'" v-model="queryParams[item.f_model]" :min="0" style="width: 240px"
style="width: 240px"></el-input-number> />
</el-form-item> <el-select
<el-form-item v-if="showBtnCrews"> v-if="item.f_type === 'sel'"
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-model="queryParams[item.f_model]"
v-if="showSearchBtn">查询</el-button> clearable
<el-button type="success" icon="el-icon-edit" size="mini" @click="handleFill" filterable
v-if="!showSearchBtn">填充</el-button> style="width: 240px"
<el-button type="warning" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> :placeholder="`请选择${item.f_label}`"
</el-form-item> >
</el-form> <el-option
<!-- 按钮集群 --> v-for="(sel, v) in item.f_selList"
<el-row class="btn-container"> :key="v"
<div class="btn-handler"> :label="sel.label"
<slot name="btn" :queryParams="queryParams"></slot> :value="sel.value"
</div> />
<ToolbarModel :showSearch.sync="showSearch" :indexNumShow.sync="indexNumShow" :selectionShow.sync="selectionShow" </el-select>
:handleShow.sync="handleShow" :columns="columCheckList" @queryTable="getTableList" v-if="showRightTools" /> <el-cascader
</el-row> v-if="item.f_type === 'selCasAdd'"
<!-- 表格 --> v-model="queryParams[item.f_model]"
:options="item.f_selList"
:props="item.optionProps"
:show-all-levels="false"
clearable
@change="handleCasAdd($event, item.f_model, cascaderFunc, extraTableProp)"
style="width: 240px"
/>
<el-cascader
v-if="item.f_type === 'selCas'"
v-model="queryParams[item.f_model]"
:options="item.f_selList"
:props="item.optionProps"
:show-all-levels="false"
@change="handleCas($event, item.f_model)"
style="width: 240px"
/>
<el-date-picker
v-if="item.f_type === 'date'"
v-model="queryParams[item.f_model]"
style="width: 240px"
value-format="yyyy-MM-dd"
type="date"
:placeholder="`请输入${item.f_label}`"
/>
<el-date-picker
v-if="item.f_type === 'dateRange'"
v-model="queryParams[item.f_model]"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-input-number
v-if="item.f_type === 'num'"
v-model="queryParams[item.f_model]"
:min="0"
style="width: 240px"
></el-input-number>
</el-form-item>
<el-form-item v-if="showBtnCrews">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
v-if="showSearchBtn"
>查询</el-button
>
<el-button
type="success"
icon="el-icon-edit"
size="mini"
@click="handleFill"
v-if="!showSearchBtn"
>填充</el-button
>
<el-button
type="warning"
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<!-- 按钮集群 -->
<el-row class="btn-container" >
<div class="btn-handler">
<slot name="btn" :queryParams="queryParams"></slot>
</div>
<ToolbarModel
:showSearch.sync="showSearch"
:indexNumShow.sync="indexNumShow"
:selectionShow.sync="selectionShow"
:handleShow.sync="handleShow"
:columns="columCheckList"
@queryTable="getTableList"
v-if="showRightTools"
/>
</el-row>
<!-- 表格 -->
<el-table :data="tableList" border ref="tableRef" select-on-indeterminate style="width: 100%" v-loading="loading" <el-table
@selection-change="handleSelectionChange"> :data="tableList"
> border
<el-table-column type="selection" width="45" align="center" v-if="showSel" :selectable="selectable" /> ref="tableRef"
<el-table-column width="55" align="center" label="序号" type="index" :index="indexContinuation(queryParams.pageNum, queryParams.pageSize) select-on-indeterminate
" v-if="showIndex" /> style="width: 100%"
<el-table-column v-for="(item, v) in tableColumCheckProps" :key="v" :label="item.t_label" :prop="item.t_props" v-loading="loading"
:width="item.t_width" align="center" show-overflow-tooltip> @selection-change="handleSelectionChange">
<template slot-scope="scope"> >
<!-- 判断当前列数据是否需要使用插槽的数据 --> <el-table-column
<template v-if="item.t_slot"> type="selection"
<slot :data="scope.row" :name="item.t_slot"></slot> width="45"
</template> align="center"
<template v-else> v-if="showSel"
{{ scope.row[item.t_props] || '-' }} :selectable="selectable"
</template> />
</template> <el-table-column
</el-table-column> width="55"
<el-table-column align="center" label="操作" v-if="handleShow && showOperation" :min-width="dynamicWidth"> align="center"
<template slot-scope="{ row }"> label="序号"
<div class="optionDivRef"> type="index"
<slot :data="row" name="handle">-</slot> :index="
</div> indexContinuation(queryParams.pageNum, queryParams.pageSize)
</template> "
</el-table-column> v-if="showIndex"
</el-table> />
<el-table-column
v-for="(item, v) in tableColumCheckProps"
:key="v"
:label="item.t_label"
:prop="item.t_props"
:width="item.t_width"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<!-- 判断当前列数据是否需要使用插槽的数据 -->
<template v-if="item.t_slot">
<slot :data="scope.row" :name="item.t_slot"></slot>
</template>
<template v-else>
{{ scope.row[item.t_props] || '-' }}
</template>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
v-if="handleShow && showOperation"
:min-width="dynamicWidth"
>
<template slot-scope="{ row }">
<div class="optionDivRef">
<slot :data="row" name="handle">-</slot>
</div>
</template>
</el-table-column>
</el-table>
<!-- 分页 --> <!-- 分页 -->
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" <pagination
@pagination="getTableList" /> :total="total"
</div> :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getTableList"
/>
</div>
</template> </template>
<script> <script>
import ToolbarModel from '../ToolbarModel' import ToolbarModel from '../ToolbarModel'
export default { export default {
components: { ToolbarModel }, components: { ToolbarModel },
props: { props: {
/** 表单查询条件 */ /** 表单查询条件 */
formLabel: { formLabel: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
/** 列表请求接口 */ /** 列表请求接口 */
requestApi: { requestApi: {
type: Function, type: Function,
default: () => function () { }, default: () => function () {},
}, },
/** 列表配置项 */ /** 列表配置项 */
columnsList: { columnsList: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
/** 是否显示选择框 */ /** 是否显示选择框 */
showSel: { showSel: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/** 传递参数 */ /** 传递参数 */
sendParams: { sendParams: {
type: Object, type: Object,
default: () => null default: () => null
}, },
sendId: { sendId: {
type: Number, type: Number,
default: () => null default: () => null
}, },
/** 是否显示查询按钮 */ /** 是否显示查询按钮 */
showSearchBtn: { showSearchBtn: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
showBtnCrews: { showBtnCrews: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
cascaderFunc: { cascaderFunc: {
type: Function, type: Function,
default: () => null default: () => null
}, },
extraTableProp: { extraTableProp: {
type: Object, type: Object,
default: () => null default: () => null
}, },
showOperation: { showOperation: {
type: Boolean, type: Boolean,
default: true default: true
}, },
showRightTools: { showRightTools: {
type: Boolean, type: Boolean,
default: true default: true
}, },
selectable: { selectable: {
type: Function, type: Function,
default: () => { default: () => {
return true return true
}
},
selSingle: {
type: Boolean,
default: false
},
showIndex: {
type: Boolean,
default: true
}
},
computed: {
/* 根据操作栏控制表头是否显示 */
tableColumCheckProps() {
return this.columCheckList.filter(e => {
return e.checked != false
})
},
},
watch: {
handleShow: {
handler(newValue) {
if (!newValue) {
this.dynamicWidth = 0
}
},
},
columnsList: {
handler(nv, ov) {
if (nv !== ov) {
this.columnsList = nv
this.columCheckList = this.columnsList.map(e => {
this.$set(e, 'checked', true)
return e
})
}
},
deep: true
}
/* sendParams: {
handler(nv, ov) {
console.log(nv, ov)
if(nv !== ov) {
Object.assign(this.queryParams, nv)
this.getTableList()
} }
}, },
deep: true, selSingle: {
immediate: true type: Boolean,
} */ default: false
}, },
data() { showIndex: {
return { type: Boolean,
// 表单校验 default: true
formRules: { }
},
}, computed: {
loading: false, /* 根据操作栏控制表头是否显示 */
// 列表接口查询参数 tableColumCheckProps() {
queryParams: { return this.columCheckList.filter(e => {
pageNum: 1, return e.checked != false
pageSize: 10, })
}, },
// 列表数据源 },
tableList: [], watch: {
// 导出传递数据 handleShow: {
msgList: undefined, handler(newValue) {
// 列表数据条数 if (!newValue) {
total: 0, this.dynamicWidth = 0
// 搜索区域是否隐藏 }
showSearch: true, },
// 是否显示复选框 },
selectionShow: true, columnsList: {
// 是否显示序号 handler(nv, ov) {
indexNumShow: true, if(nv !== ov) {
// 是否显示操作列 this.columnsList = nv
handleShow: true, this.columCheckList = this.columnsList.map(e => {
// 列表每列 label this.$set(e, 'checked', true)
columCheckList: [], return e
// 操作列最小宽度 })
dynamicWidth: 0, }
idCount: 1, },
timeList:[], deep: true
typeList:[] }
} /* sendParams: {
}, handler(nv, ov) {
console.log(nv, ov)
created() { if(nv !== ov) {
this.columCheckList = this.columnsList.map(e => { Object.assign(this.queryParams, nv)
this.$set(e, 'checked', true) this.getTableList()
return e }
}) },
/* 生成查询参数 */ deep: true,
this.formLabel.map(e => { immediate: true
if(e.f_type === 'dateRange') {
this.$set(this.queryParams, e.dateType[0], '')
this.$set(this.queryParams, e.dateType[1], '')
this.typeList = e.dateType
} else {
this.$set(this.queryParams, e.f_model, '')
}
// 设置表单必填
if (e.f_rule) {
this.$set(this.formRules, e.f_rule, [
{
required: true,
message: `请填写${e.f_label}`,
trigger: 'blur'
}
])
}
})
if (this.sendParams !== null) {
Object.assign(this.queryParams, this.sendParams)
/* for(let key in this.sendParams) {
console.log(key, this.sendParams[key])
this.$set(this.queryParams, key, this.sendParams[key])
} */ } */
} },
if (this.sendId !== null) this.queryParams.id = this.sendId data() {
this.getTableList() return {
}, // 表单校验
updated() { formRules: {
// 更新时重新计算操作列需要的最小宽度 确保展示无误
this.dynamicWidth = this.getOperatorWidth()
},
methods: {
/** 获取列表数据 */
async getTableList() {
console.log(this.queryParams, '请求参数')
const res = await this.requestApi(this.queryParams)
console.log(res, '列表数据') },
loading: false,
this.tableList = res.data.rows || res.data // 列表接口查询参数
this.total = res.data.total queryParams: {
// if(this.queryParams.time && this.queryParams.time.length !== 0) { pageNum: 1,
// this.queryParams.startTime = this.queryParams.time[0] pageSize: 10,
// this.queryParams.endTime = this.queryParams.time[1] },
// delete this.queryParams.time // 列表数据源
// } tableList: [],
// console.log(this.queryParams) // 导出传递数据
// if(Object.keys(this.formRules).length !== 0) { msgList: undefined,
// this.$refs.queryFormRef.validate(async valid => { // 列表数据条数
// if (valid) { total: 0,
// this.loading = true // 搜索区域是否隐藏
// const res = await this.requestApi(this.queryParams) showSearch: true,
// this.loading = false // 是否显示复选框
// console.log(res, '列表数据') selectionShow: true,
// if (res.code === 200) { // 是否显示序号
// if (res.data) { indexNumShow: true,
// this.tableList = res.data.rows || res.data // 是否显示操作列
// this.total = res.data.total || res.data.length handleShow: true,
// } else { // 列表每列 label
// this.tableList = res.rows || res.data columCheckList: [],
// this.total = res.data.total || res.rows.length // 操作列最小宽度
// } dynamicWidth: 0,
// } idCount: 1
// }
// })
// } else {
// this.loading = true
// const res = await this.requestApi(this.queryParams)
// this.loading = false
// console.log(res, '列表数据2')
// if (res.code === 200) {
// if (res.data) {
// this.tableList = res.data.rows || res.data
// this.total = res.data.total
// } else {
// this.tableList = res.rows || res.data
// this.total = res.total
// }
// }
// }
},
/** 查询按钮 */
handleQuery() {
this.getTableList()
},
/** 填充按钮 */
handleFill() {
/* this.tableList.forEach(obj => {
Object.assign(obj, this.formLabel)
}) */
},
/** 重置按钮 */
resetQuery() {
this.$refs.queryFormRef.resetFields()
this.timeList = []
if(this.typeList.length > 0) {
this.queryParams[this.typeList[0]] = ''
this.queryParams[this.typeList[1]] = ''
}
// this.queryParams[this.typeList[0]] = ''
// this.queryParams[this.typeList[1]] = ''
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.getTableList()
},
/** 级联选择 */
handleCas(e, val) {
this.queryParams[val] = e[e.length - 1]
},
/** 级联选择只选最后一级 */
handleCasAdd(
e,
val,
func,
prop
) {
if (e.length !== 0) {
this.queryParams[val] = e[e.length - 1]
let setObj = {}
// 合并
if (prop) {
Object.assign(setObj, prop)
} }
// 设置id自增
this.$set(setObj, 'id', this.idCount)
this.idCount++
// 获取单位
func({
id: e[e.length - 1]
}).then(res => {
this.$set(setObj, 'name', res.data.parentName)
this.$set(setObj, 'unitName', res.data.unitName)
this.$set(setObj, 'typeName', res.data.name)
}).catch(err => { })
for (let key in this.queryParams) {
this.$set(setObj, key, this.queryParams[key])
}
this.tableList.unshift(setObj)
console.log(this.tableList)
}
}, },
/** 动态设置操作列的列宽 */
getOperatorWidth() {
const operatorColumn =
document.getElementsByClassName('optionDivRef')
// 默认宽度 created() {
let width = 100 this.columCheckList = this.columnsList.map(e => {
// 内间距 this.$set(e, 'checked', true)
let paddingSpacing = 0 return e
// 按钮数量
let buttonCount = 0
if (operatorColumn.length > 0) {
Array.prototype.forEach.call(operatorColumn, function (item) {
// 最宽的宽度
width = width > item.offsetWidth ? width : item.offsetWidth
const buttons = item.getElementsByClassName('el-button')
buttonCount = buttons.length
buttonCount =
buttonCount > buttons.length
? buttonCount
: buttons.length
}) })
return width /* 生成查询参数 */
} this.formLabel.map(e => {
this.$set(this.queryParams, e.f_model, '')
// 设置表单必填
if(e.f_rule) {
this.$set(this.formRules, e.f_rule, [
{
required: true,
message: `请填写${e.f_label}`,
trigger: 'blur'
}
])
}
})
if(this.sendParams !== null) {
Object.assign(this.queryParams, this.sendParams)
/* for(let key in this.sendParams) {
console.log(key, this.sendParams[key])
this.$set(this.queryParams, key, this.sendParams[key])
} */
}
if(this.sendId !== null) this.queryParams.id = this.sendId
this.getTableList()
}, },
updated() {
queryTableList(params) { // 更新时重新计算操作列需要的最小宽度 确保展示无误
Object.assign(this.queryParams, params) this.dynamicWidth = this.getOperatorWidth()
this.getTableList()
}, },
methods: {
/** 获取列表数据 */
async getTableList() {
if(this.queryParams.time && this.queryParams.time.length !== 0) {
this.queryParams.startTime = this.queryParams.time[0]
this.queryParams.endTime = this.queryParams.time[1]
delete this.queryParams.time
}
console.log(this.queryParams)
if(Object.keys(this.formRules).length !== 0) {
this.$refs.queryFormRef.validate(async valid => {
if (valid) {
this.loading = true
const res = await this.requestApi(this.queryParams)
this.loading = false
console.log(res, '列表数据')
if (res.code === 200) {
if (res.data) {
this.tableList = res.data.rows || res.data
this.total = res.data.total || res.data.length
} else {
this.tableList = res.rows || res.data
this.total = res.data.total || res.rows.length
}
}
}
})
} else {
this.loading = true
const res = await this.requestApi(this.queryParams)
this.loading = false
console.log(res, '列表数据2')
if (res.code === 200) {
if (res.data) {
this.tableList = res.data.rows || res.data
this.total = res.data.total
} else {
this.tableList = res.rows || res.data
this.total = res.total
}
}
}
},
/** 查询按钮 */
handleQuery() {
this.getTableList()
},
/** 填充按钮 */
handleFill() {
/* this.tableList.forEach(obj => {
Object.assign(obj, this.formLabel)
}) */
},
/** 重置按钮 */
resetQuery() {
this.$refs.queryFormRef.resetFields()
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.getTableList()
},
/** 级联选择 */
handleCas(e, val) {
this.queryParams[val] = e[e.length - 1]
},
/** 级联选择只选最后一级 */
handleCasAdd(
e,
val,
func,
prop
) {
if(e.length !== 0) {
this.queryParams[val] = e[e.length - 1]
let setObj = {}
// 合并
if(prop) {
Object.assign(setObj, prop)
}
// 设置id自增
this.$set(setObj, 'id', this.idCount)
this.idCount++
// 获取单位
func({
id: e[e.length - 1]
}).then(res => {
this.$set(setObj, 'name', res.data.parentName)
this.$set(setObj, 'unitName', res.data.unitName)
this.$set(setObj, 'typeName', res.data.name)
}).catch(err => {})
for(let key in this.queryParams) {
this.$set(setObj, key, this.queryParams[key])
}
this.tableList.unshift(setObj)
console.log(this.tableList)
}
},
/** 动态设置操作列的列宽 */
getOperatorWidth() {
const operatorColumn =
document.getElementsByClassName('optionDivRef')
// 默认宽度
let width = 100
// 内间距
let paddingSpacing = 0
// 按钮数量
let buttonCount = 0
if (operatorColumn.length > 0) {
Array.prototype.forEach.call(operatorColumn, function (item) {
// 最宽的宽度
width = width > item.offsetWidth ? width : item.offsetWidth
const buttons = item.getElementsByClassName('el-button')
buttonCount = buttons.length
buttonCount =
buttonCount > buttons.length
? buttonCount
: buttons.length
})
return width
}
},
queryTableList(params) {
Object.assign(this.queryParams, params)
this.getTableList()
},
handleSelectionChange(e) {
console.log(e, 'e')
this.msgList = e
this.$emit('transIdList', this.msgList)
},
handleSelectionChange(e) {
console.log(e, 'e')
this.msgList = e
this.$emit('transIdList', this.msgList)
}, },
/* 时间change事件 */
onChangeTime(e,type) {
console.log(e, '时间',type)
const [_1,_2]= type
const [_time1,_time2] = e
if(e.length > 0) {
this.$set(this.queryParams, _1, _time1)
this.$set(this.queryParams, _2, _time2)
}
}
},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.btn-container { .btn-container {
margin-bottom: 6px; margin-bottom: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
::v-deep .btn-handler { ::v-deep .btn-handler {
flex: 1; flex: 1;
.el-button { .el-button {
padding: 6px 18px; padding: 6px 18px;
} }
} }
::v-deep .optionDivRef { ::v-deep .optionDivRef {
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
.el-button { .el-button {
padding: 6px 12px; padding: 6px 12px;
} }
} }
</style> </style>

4
src/views/base/edgeInsert/components/form-insert-all.vue
View File

@ -74,6 +74,10 @@
style="margin-bottom: 100px" style="margin-bottom: 100px"
> >
</TableModelTwo> </TableModelTwo>
<el-form-item label="审核意见" prop="remarks"> <el-form-item label="审核意见" prop="remarks">
<!-- <textarea id="remarks" v-model="projectParams.remarks" class="el-textarea" placeholder="请输入审核意见" disabled></textarea>--> <!-- <textarea id="remarks" v-model="projectParams.remarks" class="el-textarea" placeholder="请输入审核意见" disabled></textarea>-->
<el-input :rows="4" type="textarea" v-model="projectParams.remarks" placeholder="请输入审核意见" disabled/> <el-input :rows="4" type="textarea" v-model="projectParams.remarks" placeholder="请输入审核意见" disabled/>