bonus
/
bns_zhgd_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

高支模分组管理 增删改查接口调试完成

This commit is contained in:
BianLzhaoMin 2025-04-15 17:14:12 +08:00
parent 0389f283af
commit e7828f0f80
6 changed files with 468 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/high-formwork/index.js Normal file
View File

@ -0,0 +1,22 @@
import request from '@/utils/request'
/* 高支模分组管理接口 */
// 列表接口
export const getHighFormworkListAPI = (data) => {
return request.get('/smart-site/devModel/getPageList', {
params: data,
})
}
// 新增接口
export const addHighFormworkDataAPI = (data) => {
return request.post('/smart-site/devModel/insertData', data)
}
// 修改接口
export const editHighFormworkDataAPI = (data) => {
return request.post('/smart-site/devModel/updateData', data)
}
// 删除接口
export const deleteHighFormworkDataAPI = (data) => {
return request.post('/smart-site/devModel/deleteData', data)
}

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

@ -81,12 +81,9 @@
></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="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-if="showSearchBtn">
查询
</el-button>
<el-button type="warning" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -324,25 +321,10 @@ export default {
} 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
// if (this.sendParams !== null) {
// Object.assign(this.queryParams, this.sendParams)
// }
this.getTableList()
},
updated() {
@ -355,53 +337,26 @@ export default {
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 || res.data.length
} else {
this.tableList = res.rows || res.data
this.total = res.total || res.rows.length
}
}
console.log(
`%c🔍 列表查询入参 %c`,
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
'',
this.queryParams,
)
this.loading = true
const res = await this.requestApi(this.queryParams)
if (res.code === 200) {
this.tableList = res.rows
this.total = res.total
}
this.loading = false
},
/** 查询按钮 */
handleQuery() {
this.getTableList()
},
/** 填充按钮 */
handleFill() {
/* this.tableList.forEach(obj => {
Object.assign(obj, this.formLabel)
}) */
},
/** 重置按钮 */
resetQuery() {
this.$refs.queryFormRef.resetFields()

274
src/utils/request-new.js Normal file
View File

@ -0,0 +1,274 @@
import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from '@/utils/bonus'
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
import { decryptWithSM4, encryptWithSM4, hashWithSM3AndSalt } from '@/utils/sm'
const systemConfig = JSON.parse(localStorage.getItem('systemConfig')) || {
requestConfig: { encryptRequest: false, checkIntegrity: false, encryptResponse: false },
}
let downloadLoadingInstance
// 是否显示重新登录
export let isRelogin = { show: false }
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000,
})
// request 拦截器
service.interceptors.request.use(
(config) => {
// 提取 headers 和方法
const headers = config.headers || {}
const {
isToken = true,
encryptRequest = true,
checkIntegrity = true,
encryptResponse = true,
repeatSubmit = false,
} = headers
// 设置请求头
//入参加密
config.headers['encryptRequest'] =
systemConfig.requestConfig.encryptRequest && encryptRequest ? 'true' : 'false'
// 数据完整性校验
config.headers['checkIntegrity'] =
systemConfig.requestConfig.checkIntegrity && checkIntegrity ? 'true' : 'false'
//回参是否加密
config.headers['encryptResponse'] =
systemConfig.requestConfig.encryptResponse && encryptResponse ? 'true' : 'false'
const isRepeatSubmit = repeatSubmit
// 处理 Token
if (getToken() && isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义 token
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params)
url = url.slice(0, -1)
config.params = {}
config.url = url
}
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
// 修改为 FormData 格式
if (config.headers['Content-Type'] === 'application/json') {
config.headers['Content-Type'] = 'multipart/form-data'
// const formData = new FormData()
// // 1. 处理普通表单数据
// if (typeof config.data === 'object') {
// // 检查是否是包含文件的特殊格式（约定格式：{ formData: {...}, files: [...] }）
// if (config.data.file) {
// // 处理文件附件
// // config.data.files.forEach((file, index) => {
// // formData.append('file' + (index > 0 ? index + 1 : ''), file)
// // })
// formData.append('file', config.data.file)
// // 处理其他表单数据
// if (config.data.params) {
// Object.keys(config.data.params).forEach((key) => {
// formData.append(key, config.data.formData[key])
// })
// }
// } else {
// // 普通对象数据直接转换
// Object.keys(config.data).forEach((key) => {
// // 跳过 files 字段（如果存在但不是数组）
// if (key !== 'files' || Array.isArray(config.data[key])) {
// formData.append(key, config.data[key])
// }
// })
// }
// } else {
// formData.append('data', config.data)
// }
config.data = data
}
// 其他逻辑保持不变（如加密、防重复提交等）
if (systemConfig.requestConfig.encryptRequest && encryptRequest) {
console.log(config.data)
console.log(hashWithSM3AndSalt(config.data))
// 注意：FormData 对象不能直接加密，需要特殊处理
// 这里假设你仍然需要对数据进行加密
const encryptedData = encryptWithSM4(
JSON.stringify(config.data) + '|' + hashWithSM3AndSalt(JSON.stringify(config.data)),
)
config.data = { encryptedData } // 将加密后的数据作为 FormData 的一个字段
}
// 防止重复提交的逻辑保持不变
const sessionObj = cache.session.getJSON('sessionObj') || {}
const requestObj = { url: config.url, data: config.data, time: Date.now() }
if (
sessionObj.data === requestObj.data &&
requestObj.time - sessionObj.time < 0 &&
sessionObj.url === requestObj.url
) {
console.warn(`[${sessionObj.url}]: 数据正在处理，请勿重复提交`)
return Promise.reject(new Error('数据正在处理，请勿重复提交'))
}
cache.session.setJSON('sessionObj', requestObj)
}
return config
},
(error) => {
console.error(error)
return Promise.reject(error)
},
)
// 响应拦截器
service.interceptors.response.use(
(res) => {
if (res.headers.encryptresponse && !res.data.hasOwnProperty('code')) {
res.data = JSON.parse(decryptWithSM4(res.data))
}
// 未设置状态码则默认成功状态
const code = res.data.code || 200
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data
}
if (code === 401) {
if (!isRelogin.show) {
isRelogin.show = true
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
isRelogin.show = false
store.dispatch('LogOut').then(() => {
location.href = '/index'
})
})
.catch(() => {
isRelogin.show = false
})
}
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
} else if (code === 500) {
Message({ message: msg, type: 'error' })
return Promise.reject(new Error(msg))
} else if (code === 601) {
Message({ message: msg, type: 'warning' })
return Promise.reject('error')
} else if (code !== 200) {
Notification.error({ title: msg })
return Promise.reject('error')
} else {
return res.data
}
},
(error) => {
let { message } = error
if (message == 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
Message({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)
},
)
// 通用下载方法
export function download(url, params, filename, config) {
downloadLoadingInstance = Loading.service({
text: '正在下载数据，请稍候',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
})
return service
.post(url, params, {
transformRequest: [
(params) => {
return tansParams(params)
},
],
headers: { 'Content-Type': 'application/x-www-form-urlencoded', encryptResponse: false },
responseType: 'blob',
...config,
})
.then(async (data) => {
const isBlob = blobValidate(data)
if (isBlob) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text()
const rspObj = JSON.parse(resText)
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg)
}
downloadLoadingInstance.close()
})
.catch((r) => {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close()
})
}
// 通用导出方法
export function derive(url, params, filename, config) {
downloadLoadingInstance = Loading.service({
text: '正在下载数据，请稍候',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
})
return service
.post(url, JSON.stringify(params), {
headers: {
'Content-Type': 'application/json; charset=UTF-8',
encryption: 'encryption',
},
responseType: 'blob',
...config,
})
.then(async (data) => {
const isBlob = blobValidate(data)
if (isBlob) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text()
const rspObj = JSON.parse(resText)
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg)
}
downloadLoadingInstance.close()
})
.catch((r) => {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close()
})
}
export default service

151
src/views/high-formwork/components/add-edit-form.vue
View File

@ -1,30 +1,30 @@
<template>
<!-- 新增修改弹框 -->
<div>
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
<el-form-item label="分组名称：" prop="deviceName">
<el-input placeholder="请输入分组名称" v-model="addOrEditForm.deviceName" clearable />
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef">
<el-form-item label="分组名称：" prop="modelName">
<el-input placeholder="请输入分组名称" v-model="addOrEditForm.modelName" clearable />
</el-form-item>
<el-form-item label="支护状态：" prop="deviceCode">
<el-form-item label="支护状态：" prop="modelState">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择支护状态"
v-model="addOrEditForm.deviceCode"
v-model="addOrEditForm.modelState"
>
<el-option label="在建" value="1" />
<el-option label="已拆除" value="2" />
<el-option label="已拆除" value="0" />
</el-select>
</el-form-item>
<el-form-item label="支护安全等级：">
<el-form-item label="支护安全等级：" prop="modeLevel">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择支护安全等级"
v-model="addOrEditForm.casDeviceCode"
v-model="addOrEditForm.modeLevel"
>
<el-option label="一级" value="1" />
<el-option label="二级" value="2" />
@ -32,18 +32,18 @@
</el-select>
</el-form-item>
<el-form-item label="施工开始时间：">
<el-form-item label="施工开始时间：" prop="startTime">
<el-date-picker
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
v-model="addOrEditForm.wifi"
v-model="addOrEditForm.startTime"
placeholder="请选择施工开始时间"
/>
</el-form-item>
<el-form-item label="大屏背景：">
<div class="upload-container" v-if="formType != 1">
<div class="upload-container">
<el-upload
:limit="1"
:action="uploadFileUrl"
@ -65,12 +65,12 @@
</div>
</div>
</el-form-item>
<el-form-item label="描述：">
<el-form-item label="描述：" prop="remark">
<el-input
clearable
type="textarea"
placeholder="请输入描述"
v-model="addOrEditForm.sx_data"
v-model="addOrEditForm.remark"
:autosize="{ minRows: 3, maxRows: 10 }"
/>
</el-form-item>
@ -97,30 +97,22 @@
</template>
<script>
import { addProjectAPI } from '@/api/project-manage/index.js'
import { addHighFormworkDataAPI, editHighFormworkDataAPI } from '@/api/high-formwork/index.js'
import { getToken } from '@/utils/auth'
export default {
props: {
// 修改时的数据源
editFormModel: {
type: Object,
default: () => null,
},
// 1. 新增表单 2. 修改表单
dialogType: {
type: Number,
default: () => 1,
},
},
data() {
const validatePlanStartTime = (rule, value, callback) => {
if (!value) {
return callback(new Error('请选择计划开工日期'))
}
const endTime = this.addOrEditForm.planEndTime
if (endTime && new Date(value) >= new Date(endTime)) {
return callback(new Error('计划开工日期必须小于计划竣工日期'))
}
callback()
}
const validatePlanEndTime = (rule, value, callback) => {
if (!value) {
return callback(new Error('请选择计划竣工日期'))
}
const endTime = this.addOrEditForm.planStartTime
if (endTime && new Date(value) <= new Date(endTime)) {
return callback(new Error('计划竣工日期必须大于计划开工日期'))
}
callback()
}
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
headers: {
@ -131,18 +123,16 @@ export default {
fileType: ['png', 'jpg', 'jpeg'],
// 新增或修改接口
addOrEditForm: {
projectName: '', // 所属工程
deviceType: '', // 设备类型
deviceName: '', //设备名称
deviceCode: '', // 设备编码
casDeviceCode: '', // 级联编码
status: '', // 设备状态
wifi: '', // 设备信号
area: '', // 监测区域
bd: '', // 所属边
modelName: '', // 分组名称
modelState: '', // 支护状态
modeLevel: '', //支护安全等级
startTime: '', // 施工开始时间
backImage: '', // 背景图片
remark: '', // 描述
fileList: [],
id: '',
},
addOrEditFormRef: {
addOrEditFormRules: {
projectName: [
{
required: true,
@ -179,10 +169,10 @@ export default {
trigger: 'change',
},
],
area: [
startTime: [
{
required: true,
message: '请选择监测区域',
message: '请选择施工开始时间',
trigger: 'change',
},
],
@ -210,20 +200,47 @@ export default {
},
methods: {
handleClose() {
this.$refs.addOrEditFormRef.resetFields()
// this.$emit('update:formDialogVisible', false)
},
// 表单提交
onSubmitForm() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
const res = await addProjectAPI(this.addOrEditForm)
if (res.code === 200) {
this.$modal.msgSuccess('新增成功')
const {
modelName, // 分组名称
modelState, // 支护状态
modeLevel, //支护安全等级
startTime, // 施工开始时间
backImage, // 背景图片
remark, // 描述
id,
} = this.addOrEditForm
const params = {
modelName,
modelState,
modeLevel,
startTime,
remark,
backImage,
}
// this.$emit('update:formDialogVisible', false)
this.$emit('onCloseDialog')
console.log(
`%c🔍 高支模分组设备${this.dialogType === 1 ? '新增' : '修改'}入参 %c`,
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
'',
params,
)
const API = this.dialogType === 1 ? addHighFormworkDataAPI : editHighFormworkDataAPI
// 当修改表单时需要传递列表id
if (this.dialogType === 2) {
params.id = id
}
const res = await API(params)
if (res.code === 200) {
this.$modal.msgSuccess(this.dialogType === 1 ? '新增成功' : '修改成功')
}
this.$refs.addOrEditFormRef.resetFields()
this.$emit('onCloseDialog', true)
}
})
},
@ -243,8 +260,10 @@ export default {
const isLt = file.size / 1024 / 1024 < 10
if (!isLt) {
this.$modal.msgError(`背景图片大小不能超过 10 MB`)
return false
}
this.$modal.loading('图片正在上传，请稍候...')
},
// 文件个数超出限制
@ -265,21 +284,27 @@ export default {
// 上传成功
handleSuccess(res) {
if (res.code === 200) {
this.addOrEditForm.logo = res.data.url
this.addOrEditForm.backImage = res.data.url
} else {
this.addOrEditForm.fileList = []
this.addOrEditForm.logo = ''
this.addOrEditForm.backImage = ''
}
this.$modal.closeLoading()
},
// 详情时预览 LOGO
onViewLogoImg(url) {
this.dialogInnerVisible = true
this.previewUrl = url
},
},
async mounted() {},
watch: {},
watch: {
editFormModel: {
handler(newValue) {
if (this.dialogType === 2) {
Object.assign(this.addOrEditForm, newValue)
this.addOrEditForm.fileList.push({ url: newValue.backImage })
}
},
deep: true,
immediate: true,
},
},
}
</script>

12
src/views/high-formwork/config.js
View File

@ -1,10 +1,10 @@
export const formLabel = [{ f_label: '搜索关键词', f_model: 'proName', f_type: 'ipt', isShow: false }]
export const formLabel = [{ f_label: '搜索关键词', f_model: 'keyWord', f_type: 'ipt', isShow: false }]
export const columnsList = [
{ t_props: 'projectName', t_label: '分组名称' },
{ t_props: 'address', t_label: '支护状态' },
{ t_props: 'planStartTime', t_label: '支护安全等级' },
{ t_props: 'planEndTime', t_label: '施工开始时间' },
{ t_props: 'ownerUnit', t_label: '描述' },
{ t_props: 'modelName', t_label: '分组名称' },
{ t_props: 'modelState', t_label: '支护状态', t_slot: 'status' },
{ t_props: 'modeLevel', t_label: '支护安全等级', t_slot: 'level' },
{ t_props: 'startTime', t_label: '施工开始时间' },
{ t_props: 'remark', t_label: '描述' },
]
export const dialogConfig = {

66
src/views/high-formwork/index.vue
View File

@ -1,7 +1,12 @@
<template>
<!-- 高支模分组管理 -->
<div class="app-container">
<TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
<TableModel
:formLabel="formLabel"
:columnsList="columnsList"
:request-api="getHighFormworkListAPI"
ref="tableRef"
>
<template slot="btn">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
新增
@ -20,7 +25,15 @@
</template>
<template slot="status" slot-scope="{ data }">
<el-tag size="mini">状态 </el-tag>
<el-tag size="mini" v-if="data.modelState === '0'" type="warning">已拆除 </el-tag>
<el-tag size="mini" v-else-if="data.modelState === '1'" type="success">在建 </el-tag>
<span v-else>-</span>
</template>
<template slot="level" slot-scope="{ data }">
<el-tag size="mini" v-if="data.modeLevel == 1">一级</el-tag>
<el-tag size="mini" v-else-if="data.modeLevel == 2">二级 </el-tag>
<el-tag size="mini" v-else-if="data.modeLevel == 3">三级 </el-tag>
<span v-else>-</span>
</template>
</TableModel>
@ -28,7 +41,12 @@
<DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
<template slot="outerContent">
<!-- 新增以及修改弹框 -->
<AddEditForm @onCloseDialog="closeDialogOuter" v-if="dialogType === 1 || dialogType === 2" />
<AddEditForm
@onCloseDialog="closeDialogOuter"
:editFormModel="editFormModel"
:dialogType="dialogType"
v-if="dialogType === 1 || dialogType === 2"
/>
<!-- 详情弹框 -->
<ProjectDetails v-else />
</template>
@ -42,7 +60,7 @@ import DialogModel from '@/components/DialogModel'
import AddEditForm from './components/add-edit-form'
import ProjectDetails from './components/project-details'
import { formLabel, columnsList, dialogConfig } from './config'
import { getProjectListAPI } from '@/api/project-manage/index.js'
import { getHighFormworkListAPI, deleteHighFormworkDataAPI } from '@/api/high-formwork/index.js'
export default {
components: {
TableModel,
@ -55,8 +73,9 @@ export default {
formLabel,
columnsList,
dialogConfig,
getProjectListAPI,
dialogType: 1,
getHighFormworkListAPI,
editFormModel: null,
}
},
methods: {
@ -76,6 +95,31 @@ export default {
} else {
this.dialogConfig.outerWidth = '50%'
}
if (type === 2) {
const {
modelName, // 分组名称
modelState, // 支护状态
modeLevel, //支护安全等级
startTime, // 施工开始时间
backImage, // 背景图片
remark, // 描述
id,
} = data
this.editFormModel = {
modelName, // 分组名称
modelState, // 支护状态
modeLevel, //支护安全等级
startTime, // 施工开始时间
backImage, // 背景图片
remark, // 描述
id,
}
} else {
this.editFormModel = null
}
this.dialogType = type
this.dialogConfig.outerTitle = titleType[type]
this.dialogConfig.outerVisible = true
@ -84,12 +128,20 @@ export default {
this.$modal
.confirm(`是否确认删除该条数据`)
.then(async () => {
this.$refs.tableRef.getTableList()
const res = await deleteHighFormworkDataAPI({ id: data.id })
if (res.code === 200) {
this.$modal.msgSuccess('删除成功')
this.$refs.tableRef.getTableList()
}
})
.catch(() => {})
},
/** 关闭外侧弹框 */
closeDialogOuter() {
closeDialogOuter(isChange) {
// isChange 判断是否触发修改或者新增逻辑
if (isChange) {
this.$refs.tableRef.getTableList()
}
this.dialogConfig.outerVisible = false
},
},