320 lines
9.1 KiB
Vue
320 lines
9.1 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<!--部门数据-->
|
||
|
|
<el-col :span="4" :xs="24">
|
||
|
|
<div class="head-container">
|
||
|
|
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
|
||
|
|
style="margin-bottom: 20px"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="head-container">
|
||
|
|
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
|
||
|
|
:filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
|
||
|
|
@node-click="handleNodeClick"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<!--装备数据-->
|
||
|
|
<el-col :span="20" :xs="24">
|
||
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
|
||
|
|
label-width="68px"
|
||
|
|
>
|
||
|
|
<el-form-item label="装备分类" prop="equipmenttype">
|
||
|
|
<el-input v-model="queryParams.equipmenttype" placeholder="请输入装备分类" clearable style="width: 240px"
|
||
|
|
@keyup.enter.native="handleQuery"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="装备名称" prop="equipmentName">
|
||
|
|
<el-input v-model="queryParams.equipmentName" placeholder="请输入装备名称" clearable style="width: 240px"
|
||
|
|
@keyup.enter.native="handleQuery"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<el-table
|
||
|
|
v-loading="loading"
|
||
|
|
:data="userList"
|
||
|
|
@row-dblclick="handleRowDblClick"
|
||
|
|
:row-class-name="getRowClassName"
|
||
|
|
>
|
||
|
|
<el-table-column label="装备名称" align="center" key="equipmenttype" prop="equipmenttype"/>
|
||
|
|
<el-table-column label="装备分类" align="center" key="equipmentName" prop="equipmentName"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
/>
|
||
|
|
<el-table-column label="基本配置" prop="basicConfig" />
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||
|
|
:limit.sync="queryParams.pageSize" @pagination="getList"
|
||
|
|
/>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<!-- 基本配置编辑弹窗 -->
|
||
|
|
<el-dialog
|
||
|
|
title="编辑基本配置"
|
||
|
|
:visible.sync="inputDialogVisible"
|
||
|
|
width="400px"
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
>
|
||
|
|
<el-form ref="configForm" :model="configForm" :rules="configRules">
|
||
|
|
<el-form-item prop="basicConfig">
|
||
|
|
<el-input
|
||
|
|
v-model="configForm.basicConfig"
|
||
|
|
placeholder="请输入数字配置"
|
||
|
|
clearable
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click="inputDialogVisible = false">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="submitConfig">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { listUser, updateEquipmentConfig,deptTreeSelect } from '@/api/system/equipment'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'User',
|
||
|
|
data() {
|
||
|
|
// 自定义数字验证规则
|
||
|
|
const validateNumber = (rule, value, callback) => {
|
||
|
|
if (value === '') {
|
||
|
|
callback(new Error('请输入配置值'));
|
||
|
|
} else if (isNaN(Number(value))) {
|
||
|
|
callback(new Error('必须输入数字'));
|
||
|
|
} else {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
// 遮罩层
|
||
|
|
loading: true,
|
||
|
|
// 显示搜索条件
|
||
|
|
showSearch: true,
|
||
|
|
// 总条数
|
||
|
|
total: 0,
|
||
|
|
// 装备表格数据
|
||
|
|
userList: null,
|
||
|
|
// 部门树选项
|
||
|
|
deptOptions: undefined,
|
||
|
|
// 部门名称
|
||
|
|
deptName: undefined,
|
||
|
|
// 当前选择的部门ID
|
||
|
|
currentDeptId: null,
|
||
|
|
// 查询参数
|
||
|
|
queryParams: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
deptId: undefined,
|
||
|
|
equipmentName: undefined,
|
||
|
|
equipmenttype: undefined
|
||
|
|
},
|
||
|
|
// 弹窗相关
|
||
|
|
inputDialogVisible: false,
|
||
|
|
// 配置表单
|
||
|
|
configForm: {
|
||
|
|
equipmentId: null, // 装备ID
|
||
|
|
deptId: null, // 部门ID
|
||
|
|
basicConfig: '' // 配置值
|
||
|
|
},
|
||
|
|
// 配置表单验证规则
|
||
|
|
configRules: {
|
||
|
|
basicConfig: [
|
||
|
|
{ required: true, validator: validateNumber, trigger: 'blur' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
defaultProps: {
|
||
|
|
children: 'children',
|
||
|
|
label: 'label'
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
deptName(val) {
|
||
|
|
this.$refs.tree.filter(val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getList()
|
||
|
|
this.getDeptTree()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/** 双击行事件 */
|
||
|
|
handleRowDblClick(row) {
|
||
|
|
// 检查是否选择了部门
|
||
|
|
if (!this.currentDeptId) {
|
||
|
|
this.$message.warning('请先在左侧选择部门')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
// 检查是否可编辑
|
||
|
|
if (!this.checkSelectable(row)) return;
|
||
|
|
|
||
|
|
// 填充表单数据
|
||
|
|
this.configForm = {
|
||
|
|
equipmentId: row.equipmentId, // 假设装备ID存储在userId字段
|
||
|
|
deptId: this.currentDeptId,
|
||
|
|
basicConfig: row.basicConfig || ''
|
||
|
|
}
|
||
|
|
|
||
|
|
this.inputDialogVisible = true;
|
||
|
|
|
||
|
|
// 清除验证
|
||
|
|
this.$nextTick(() => {
|
||
|
|
if (this.$refs.configForm) {
|
||
|
|
this.$refs.configForm.clearValidate()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 提交配置 */
|
||
|
|
submitConfig() {
|
||
|
|
this.$refs.configForm.validate(valid => {
|
||
|
|
if (valid) {
|
||
|
|
this.saveConfig()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 保存配置到后端 */
|
||
|
|
saveConfig() {
|
||
|
|
this.loading = true
|
||
|
|
// 转换为数字类型
|
||
|
|
const params = {
|
||
|
|
equipmentId: this.configForm.equipmentId,
|
||
|
|
deptId: this.configForm.deptId,
|
||
|
|
basicConfig: Number(this.configForm.basicConfig)
|
||
|
|
}
|
||
|
|
|
||
|
|
updateEquipmentConfig(params).then(response => {
|
||
|
|
this.$message.success('配置保存成功')
|
||
|
|
|
||
|
|
// 更新前端显示
|
||
|
|
const index = this.userList.findIndex(item => item.equipmentId === params.equipmentId)
|
||
|
|
if (index !== -1) {
|
||
|
|
this.$set(this.userList[index], 'basicConfig', params.basicConfig)
|
||
|
|
}
|
||
|
|
|
||
|
|
this.inputDialogVisible = false
|
||
|
|
this.loading = false
|
||
|
|
}).catch(error => {
|
||
|
|
console.error('保存配置失败:', error)
|
||
|
|
this.$message.error('保存配置失败')
|
||
|
|
this.loading = false
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 查询装备列表 */
|
||
|
|
getList() {
|
||
|
|
this.loading = true;
|
||
|
|
listUser(this.queryParams).then(response => {
|
||
|
|
this.userList = (response.rows || []).map(item => {
|
||
|
|
// 确保每行都有basicConfig属性
|
||
|
|
if (item.basicConfig === undefined) {
|
||
|
|
item.basicConfig = '';
|
||
|
|
}
|
||
|
|
return item;
|
||
|
|
});
|
||
|
|
this.total = response.total || 0;
|
||
|
|
this.loading = false;
|
||
|
|
}).catch(error => {
|
||
|
|
console.error('获取装备列表失败:', error)
|
||
|
|
this.loading = false
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 查询部门下拉树结构 */
|
||
|
|
getDeptTree() {
|
||
|
|
deptTreeSelect().then(response => {
|
||
|
|
// 根据API实际响应结构处理
|
||
|
|
let treeData = response.data;
|
||
|
|
|
||
|
|
// 如果API返回的是标准响应格式
|
||
|
|
if (response.code && response.data) {
|
||
|
|
treeData = response.data;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.deptOptions = treeData || [];
|
||
|
|
}).catch(error => {
|
||
|
|
console.error('获取部门树失败:', error)
|
||
|
|
this.$message.error('获取部门树失败')
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 筛选节点
|
||
|
|
filterNode(value, data) {
|
||
|
|
if (!value) return true;
|
||
|
|
return data.label.indexOf(value) !== -1;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 节点单击事件
|
||
|
|
handleNodeClick(data) {
|
||
|
|
this.currentDeptId = data.id; // 保存当前选择的部门ID
|
||
|
|
this.queryParams.deptId = data.id;
|
||
|
|
this.handleQuery();
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 搜索按钮操作 */
|
||
|
|
handleQuery() {
|
||
|
|
this.queryParams.pageNum = 1;
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 重置按钮操作 */
|
||
|
|
resetQuery() {
|
||
|
|
this.resetForm('queryForm');
|
||
|
|
this.queryParams.equipmentName = undefined;
|
||
|
|
this.queryParams.equipmenttype = undefined;
|
||
|
|
this.currentDeptId = null; // 重置部门ID
|
||
|
|
if (this.$refs.tree) {
|
||
|
|
this.$refs.tree.setCurrentKey(null);
|
||
|
|
}
|
||
|
|
this.handleQuery();
|
||
|
|
},
|
||
|
|
|
||
|
|
// 检查行是否可编辑
|
||
|
|
checkSelectable(row) {
|
||
|
|
// 这里保留原有的不可编辑逻辑
|
||
|
|
return !(row.userId === 1 || row.isBuiltIn === '0' || this.hasSystemOrAuditrRole(row.roles));
|
||
|
|
},
|
||
|
|
|
||
|
|
hasSystemOrAuditrRole(roles) {
|
||
|
|
if (!roles || !Array.isArray(roles)) return false;
|
||
|
|
return roles.some(role => role.roleKey === 'systemAdmin' || role.roleKey === 'audit');
|
||
|
|
},
|
||
|
|
|
||
|
|
getRowClassName({ row }) {
|
||
|
|
return !this.checkSelectable(row) ? 'disabled-row' : '';
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* 修复被动事件监听器警告 */
|
||
|
|
.el-dialog__wrapper {
|
||
|
|
touch-action: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.disabled-row {
|
||
|
|
background-color: #f5f7fa !important;
|
||
|
|
color: #909399;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.disabled-row:hover td {
|
||
|
|
background-color: #f5f7fa !important;
|
||
|
|
}
|
||
|
|
</style>
|