bonus
/
water-design-const-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

业主管理、设备类型管理、项目类型、设备管理管理功能开发。

This commit is contained in:
lSun 2025-11-12 13:41:06 +08:00
parent 98eef3af01
commit db57695418
8 changed files with 862 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/api/basic/device-manage.js Normal file
View File

@ -0,0 +1,94 @@
import request from '@/utils/request'
// 获取层级列表
export function getDeviceListApi(query) {
return request({
url: '/device/list',
method: 'get',
params: query,
})
}
// 新增层级
export function addDeviceApi(data) {
return request({
url: '/device/add',
method: 'post',
data,
})
}
// 删除层级
export function delDeviceApi(data) {
return request({
url: '/device/del',
method: 'post',
data,
})
}
// 修改层级
export function editDeviceApi(data) {
return request({
url: '/device/update',
method: 'post',
data,
})
}
// 获取层级列表
export function getDeviceByIdApi(query) {
return request({
url: '/device/getById',
method: 'get',
params: query,
})
}
// 查询设备类型下拉接口
export function getDeviceSelectList() {
return request({
url: '/device/getDeviceType',
method: 'get',
})
}
// 查询获取设备管理人
export function getDeviceKeepUser() {
return request({
url: '/device/getDeviceKeepUser',
method: 'get',
})
}
// 退还
export function addUseApi(data) {
return request({
url: '/device/use',
method: 'post',
data,
})
}
export function getLastUse(query) {
return request({
url: '/device/getLastUse',
method: 'get',
params: query,
})
}
export function returnDeviceApi(data) {
return request({
url: '/device/returnDevice',
method: 'post',
data,
})
}
// 获取领用记录
export function getRecordListApi(query) {
return request({
url: '/device/getRecordList',
method: 'get',
params: query,
})
}

6
src/views/basic/dev-type/index.vue
View File

@ -19,7 +19,7 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddDeviceType">
<el-button plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddDeviceType" v-hasPermi="['device:type:add']">
新增设备类型
</el-button>
</el-col>
@ -42,7 +42,7 @@
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
v-hasPermi="['basic:device:edit']"
v-hasPermi="['device:type:update']"
>
编辑
</el-button>
@ -52,7 +52,7 @@
icon="el-icon-delete"
style="color: #f56c6c"
@click="handleDelete(scope.row)"
v-hasPermi="['basic:device:remove']"
v-hasPermi="['device:type:del']"
>
删除
</el-button>

207
src/views/basic/device-manage/addOrEditForm.vue
View File

@ -1,98 +1,137 @@
<template>
<!-- 基础管理-设备管理-新增或编辑 -->
<div>
<el-form :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef" label-width="100px">
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="addOrEditForm.deviceName" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备编码" prop="deviceCode">
<el-input v-model="addOrEditForm.deviceCode" placeholder="请输入设备编码" />
</el-form-item>
<el-form-item label="设备保管人" prop="Keeper">
<el-select
clearable
filterable
style="width: 100%"
v-model="addOrEditForm.Keeper"
placeholder="请选择设备保管人"
>
<el-option v-for="item in KeeperList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
type="textarea"
v-model="addOrEditForm.remark"
placeholder="请输入备注"
:autosize="{ minRows: 2, maxRows: 6 }"
/>
</el-form-item>
<!-- 基础管理-设备管理-新增或编辑 -->
<div>
<el-form :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef" label-width="100px">
<el-form-item>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</el-form-item>
</el-form>
</div>
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="addOrEditForm.deviceType" placeholder="设备类型" style="width: 100%">
<el-option
:key="item.id"
:value="item.id"
:label="item.name"
v-for="item in deviceList"
/>
</el-select>
</el-form-item>
<el-form-item label="设备编码" prop="deviceCode">
<el-input v-model="addOrEditForm.deviceCode" placeholder="请输入设备编码"/>
</el-form-item>
<el-form-item label="设备保管人" prop="userId">
<el-select
clearable
filterable
style="width: 100%"
v-model="addOrEditForm.userId"
placeholder="请选择设备保管人"
>
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
type="textarea"
v-model="addOrEditForm.remark"
placeholder="请输入备注"
:autosize="{ minRows: 2, maxRows: 6 }"
/>
</el-form-item>
<el-form-item>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {getDeviceSelectList,getDeviceKeepUser,addDeviceApi, editDeviceApi } from '@/api/basic/device-manage'
export default {
name: 'AddOrEditForm',
name: 'AddOrEditForm',
data() {
return {
addOrEditForm: {
deviceName: '',
deviceCode: '',
Keeper: '',
remark: '',
},
addOrEditFormRules: {
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
deviceCode: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
Keeper: [{ required: true, message: '请选择设备保管人', trigger: 'change' }],
},
data() {
return {
addOrEditForm: {
deviceType: '',
deviceCode: '',
userId: '',
remark: '',
id: undefined,
},
addOrEditFormRules: {
deviceType: [{required: true, message: '请选择设备类型', trigger: 'change'}],
deviceCode: [{required: true, message: '请输入设备编码', trigger: 'blur'}],
userId: [{required: true, message: '请选择设备保管人', trigger: 'change'}],
},
userList: [],
deviceList: []
}
},
created() {
getDeviceSelectList().then(res => {
this.deviceList = res.data
});
getDeviceKeepUser().then(res => {
this.userList = res.data
});
},
methods: {
cancel() {
this.addOrEditForm.deviceType='';
this.addOrEditForm.deviceCode='';
this.addOrEditForm.userId='';
this.addOrEditForm.remark='';
this.addOrEditForm.id=undefined;
this.$emit('closeAddOrEditFormDialog')
},
submitForm() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
// 组装参数
const params = {
deviceType: this.addOrEditForm.deviceType,
deviceCode: this.addOrEditForm.deviceCode?.trim() ?? '',
userId: this.addOrEditForm.userId,
remark: this.addOrEditForm.remark?.trim() ?? '',
status:0,
}
if (this.addOrEditForm.id) {
params.id = this.addOrEditForm.id
params.status = undefined
}
const API = this.addOrEditForm.id ? editDeviceApi : addDeviceApi
KeeperList: [
{
id: '张三',
name: '张三',
},
{
id: '李四',
name: '李四',
},
],
const res = await API(params)
if (res.code === 200) {
this.$modal.msgSuccess(this.addOrEditForm.id ? '修改成功' : '新增成功')
this.addOrEditForm.deviceType='';
this.addOrEditForm.deviceCode='';
this.addOrEditForm.userId='';
this.addOrEditForm.remark='';
this.addOrEditForm.id=undefined;
this.$emit('closeAddOrEditFormDialog', true)
}
} else {
return false
}
})
},
resetForm() {
this.$refs.addOrEditFormRef.resetFields()
},
methods: {
cancel() {
this.$emit('closeAddOrEditFormDialog')
},
submitForm() {
// this.$emit('submitForm')
this.$refs.addOrEditFormRef.validate((valid) => {
if (valid) {
this.$emit('closeAddOrEditFormDialog')
} else {
return false
}
})
},
resetForm() {
this.$refs.addOrEditFormRef.resetFields()
},
setFormData(data) {
const { deviceName, deviceCode, remark, Keeper } = data
this.addOrEditForm = {
deviceName,
deviceCode,
remark,
Keeper,
}
},
setFormData(data) {
const {deviceType, deviceCode, userId, remark ,id} = data
this.addOrEditForm = {
deviceType,
deviceCode,
userId,
remark,
id
}
},
},
}
</script>

596
src/views/basic/device-manage/index.vue
View File

@ -1,285 +1,357 @@
<template>
<!-- 基础管理-设备管理 -->
<div class="app-container">
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
<el-form-item label="项目名称" prop="proName">
<el-input
clearable
placeholder="请输入项目名称"
v-model="queryParams.proName"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属单位" prop="unit">
<el-input
clearable
placeholder="请输入所属单位"
v-model="queryParams.unit"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="负责人" prop="chargePerson">
<el-input
clearable
placeholder="请输入负责人"
v-model="queryParams.chargePerson"
@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>
<!-- 基础管理-设备管理 -->
<div class="app-container">
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
<el-form-item label="设备类型" prop="deviceType">
<el-select
placeholder="请选择设备类型"
style="width: 240px"
v-model="queryParams.deviceType"
@keyup.enter.native="handleQuery"
>
<el-option :key="item.id" :value="item.id" :label="item.name" v-for="item in deviceSelectList"/>
</el-select>
</el-form-item>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
plain
size="mini"
type="primary"
icon="el-icon-plus"
@click="handleAddDevice"
v-hasPermi="['basic:device:add']"
>
新增
</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="deviceList" border>
<el-table-column label="序号" align="center" type="index" />
<el-table-column
align="center"
:key="item.prop"
:label="item.label"
:prop="item.prop"
v-for="item in columnList"
/>
<el-table-column label="操作" align="center" width="240">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleUseOrReturn(scope.row)"
v-hasPermi="['basic:device:use-or-return']"
:style="scope.row.status == '正常' ? 'color: #02bc76' : 'color: #8b9800'"
:icon="scope.row.status == '正常' ? 'el-icon-upload2' : 'el-icon-download'"
>
{{ scope.row.status == '正常' ? '领用' : '归还' }}
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="handleViewRecord(scope.row)"
v-hasPermi="['basic:device:record']"
>
记录
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
v-hasPermi="['basic:device:edit']"
>
编辑
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
style="color: #f56c6c"
@click="handleDelete(scope.row)"
v-hasPermi="['basic:device:remove']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDeviceList"
<el-form-item label="设备编号" prop="deviceCode">
<el-input
clearable
placeholder="请输入设备编号"
v-model="queryParams.deviceCode"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- 添加或修改岗位对话框 -->
<el-dialog width="40%" append-to-body :title="addOrEditFormTitle" :visible.sync="addOrEditFormVisible">
<AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
</el-dialog>
<el-form-item label="设备状态" prop="status">
<el-select
placeholder="请选择设备状态"
style="width: 240px"
v-model="queryParams.status"
@keyup.enter.native="handleQuery"
>
<el-option key="0" value="0" label="闲置" />
<el-option key="1" value="1" label="在用" />
</el-select>
</el-form-item>
<!-- 领用或归还对话框 -->
<el-dialog width="40%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
<UseOrReturnForm
ref="useOrReturnFormComponentRef"
@closeUseOrReturnFormDialog="closeUseOrReturnFormDialog"
/>
</el-dialog>
<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-dialog width="90%" append-to-body title="领用记录" :visible.sync="useRecordFormVisible">
<UseRecordTable />
</el-dialog>
</div>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
plain
size="mini"
type="primary"
icon="el-icon-plus"
@click="handleAddDevice"
v-hasPermi="['device:add']"
>
新增
</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="deviceList" border>
<el-table-column label="序号" align="center" type="index"/>
<!-- 设备类型 -->
<el-table-column label="设备类型" align="center" prop="deviceTypeName" />
<!-- 设备编号 -->
<el-table-column label="设备编号" align="center" prop="deviceCode" />
<!-- 所属保管人 -->
<el-table-column label="所属保管人" align="center" prop="userName" />
<!-- 设备状态：特殊处理 -->
<el-table-column label="设备状态" align="center">
<template slot-scope="scope">
{{ scope.row.status === '0' ? '闲置' : scope.row.status === '1' ? '在用' : scope.row.status }}
</template>
</el-table-column>
<!-- 备注 -->
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" width="240">
<template slot-scope="scope">
<el-button
v-if="scope.row.status === '0'"
size="mini"
type="text"
@click="handleUse(scope.row)"
v-hasPermi="['device:use']"
style="color: #02bc76"
icon="el-icon-upload2"
>
领用
</el-button>
<!-- 归还按钮：仅当 status === '1'（已领用/在用）时显示 -->
<el-button
v-if="scope.row.status === '1'"
size="mini"
type="text"
@click="handleReturn(scope.row)"
v-hasPermi="['device:return']"
style="color: #8b9800"
icon="el-icon-download"
>
归还
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="handleViewRecord(scope.row)"
v-hasPermi="['device:details']"
>
记录
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
v-hasPermi="['device:update']"
>
编辑
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
style="color: #f56c6c"
@click="handleDelete(scope.row)"
v-hasPermi="['device:del']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDeviceList"
/>
<!-- 添加或修改岗位对话框 -->
<el-dialog width="40%" append-to-body :title="addOrEditFormTitle" :visible.sync="addOrEditFormVisible">
<AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog"/>
</el-dialog>
<!-- 领用或归还对话框 -->
<el-dialog width="40%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
<UseOrReturnForm
ref="useOrReturnFormComponentRef"
@closeUseOrReturnFormDialog="closeUseOrReturnFormDialog"
/>
</el-dialog>
<!-- 使用记录对话框 -->
<el-dialog width="90%" append-to-body title="领用记录" :visible.sync="useRecordFormVisible">
<UseRecordTable ref="useRecordTableComponentRef"/>
</el-dialog>
</div>
</template>
<script>
import AddOrEditForm from './addOrEditForm.vue'
import UseOrReturnForm from './useOrReturnForm.vue'
import UseRecordTable from './useRecordTable.vue'
import {getDeviceListApi, delDeviceApi,getDeviceSelectList,getLastUse} from '@/api/basic/device-manage'
export default {
name: 'DeviceManage',
components: {
AddOrEditForm,
UseOrReturnForm,
UseRecordTable,
name: 'DeviceManage',
components: {
AddOrEditForm,
UseOrReturnForm,
UseRecordTable,
},
data() {
return {
total: 0, // 总条数
loading: false, // 加载中
addOrEditFormTitle: '新增', // 新增或编辑对话框标题
addOrEditFormVisible: false, // 新增或编辑对话框是否显示
useOrReturnFormTitle: '领用', // 领用或归还对话框标题
useOrReturnFormVisible: false, // 领用或归还对话框是否显示
useRecordFormVisible: false, // 使用记录对话框是否显示
// 设备类型下拉
deviceSelectList:[],
// 设备列表
deviceList: [],
// 列配置
columnList: [
{
label: '设备类型',
prop: 'deviceTypeName',
},
{
label: '设备编号',
prop: 'deviceCode',
},
{
label: '所属保管人',
prop: 'userName',
},
{
label: '备注',
prop: 'remark',
},
],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceType: undefined,
deviceCode: undefined,
status: undefined,
},
}
},
created() {
this.getDeviceSelectList()
this.getDeviceList()
},
methods: {
// 获取设备类型下拉接口
async getDeviceSelectList() {
const {data: res} = await getDeviceSelectList()
this.deviceSelectList = res
},
data() {
return {
total: 0, // 总条数
loading: false, // 加载中
addOrEditFormTitle: '新增', // 新增或编辑对话框标题
addOrEditFormVisible: false, // 新增或编辑对话框是否显示
useOrReturnFormTitle: '领用', // 领用或归还对话框标题
useOrReturnFormVisible: false, // 领用或归还对话框是否显示
useRecordFormVisible: false, // 使用记录对话框是否显示
// 设备列表
deviceList: [
{
id: 1,
deviceName: '设备1',
deviceCode: '123456',
Keeper: '张三',
status: '正常',
remark: '备注1',
},
{
id: 2,
deviceName: '设备2',
deviceCode: '123456',
Keeper: '李四',
status: '异常',
remark: '备注2',
},
],
// 列配置
columnList: [
{
label: '设备名称',
prop: 'deviceName',
},
{
label: '设备编号',
prop: 'deviceCode',
},
{
label: '所属保管人',
prop: 'Keeper',
},
{
label: '设备状态',
prop: 'status',
},
{
label: '备注',
prop: 'remark',
},
],
// 查询按钮
handleQuery() {
this.queryParams.pageNum = 1
this.getDeviceList()
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
proName: undefined,
unit: undefined,
chargePerson: undefined,
},
// 重置按钮
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
// 新增按钮操作
handleAddDevice() {
this.addOrEditFormTitle = '新增'
this.editForm = null
this.addOrEditFormVisible = true
},
// 获取设备列表
getDeviceList() {
this.loading = true
getDeviceListApi(this.queryParams).then((response) => {
this.deviceList = response.rows
this.total = response.total
this.loading = false
})
},
// 领用
handleUse(row) {
this.useOrReturnFormTitle = '领用'
this.useOrReturnFormVisible = true
this.$nextTick(() => {
// 传递 status 和 deviceId 给子组件
this.$refs.useOrReturnFormComponentRef.setFormData({
status: '0',
deviceId: row.id,
})
})
},
handleReturn( row){
this.useOrReturnFormTitle = '归还'
this.useOrReturnFormVisible = true
var data ={
deviceId:row.id
}
getLastUse(data).then((response) => {
var list = response.data
this.$nextTick(() => {
// 传递 status 和 deviceId 给子组件
this.$refs.useOrReturnFormComponentRef.setFormData({
status: '1',
deviceId: row.id,
userName: list.userName,
startTime: list.startTime
})
})
})
},
// 查看记录按钮
handleViewRecord(row) {
this.useRecordFormVisible = true
this.$nextTick(() => {
// 传递 status 和 deviceId 给子组件
this.$refs.useRecordTableComponentRef.setFormData({
deviceId: row.id,
})
})
},
// 编辑按钮
handleEdit(row) {
this.addOrEditFormTitle = '编辑'
this.addOrEditFormVisible = true
const {deviceType, deviceCode, userId, remark ,id} = row
const editForm = {deviceType, deviceCode, userId : userId != null ? String(userId) : undefined, remark ,id: id != null ? String(id) : undefined}
console.log(editForm)
this.$nextTick(() => {
this.$refs.addOrEditComponentRef.setFormData(editForm)
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.addOrEditFormTitle = '编辑'
this.addOrEditFormVisible = true
},
// 删除按钮
handleDelete(row) {
this.$modal.confirm('是否确认设备类型编号为"' + row.id + '"的数据项？').then(async () => {
var data ={id:row.id}
const res = await delDeviceApi(data)
if (res.code === 200) {
this.$modal.msgSuccess('删除成功')
this.getDeviceList()
}
})
},
created() {
// this.getDeviceList()
// 关闭新增或编辑对话框
closeAddOrEditFormDialog(isRefresh) {
this.$refs.addOrEditComponentRef.resetForm()
this.addOrEditFormVisible = false
if (isRefresh) {
this.getDeviceList()
}
},
methods: {
// 查询按钮
handleQuery() {
this.queryParams.pageNum = 1
this.getDeviceList()
},
// 重置按钮
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
// 新增按钮操作
handleAddDevice() {
this.addOrEditFormTitle = '新增'
this.editForm = null
this.addOrEditFormVisible = true
},
// 获取设备列表
getDeviceList() {
this.loading = true
listProject(this.queryParams).then((response) => {
this.proList = response.rows
this.total = response.total
this.loading = false
})
},
// 领用或归还按钮
handleUseOrReturn(row) {
console.log(row)
this.useOrReturnFormTitle = row.status == '正常' ? '领用' : '归还'
this.useOrReturnFormVisible = true
},
// 查看记录按钮
handleViewRecord(row) {
console.log(row)
this.useRecordFormVisible = true
},
// 编辑按钮
handleEdit(row) {
this.addOrEditFormTitle = '编辑'
this.addOrEditFormVisible = true
const { deviceId, deviceName, deviceCode, remark, Keeper } = row
const editForm = { deviceId, deviceName, deviceCode, remark, Keeper }
this.$nextTick(() => {
this.$refs.addOrEditComponentRef.setFormData(editForm)
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.addOrEditFormTitle = '编辑'
this.addOrEditFormVisible = true
},
// 删除按钮
handleDelete(row) {},
// 关闭新增或编辑对话框
closeAddOrEditFormDialog() {
this.$refs.addOrEditComponentRef.resetForm()
this.addOrEditFormVisible = false
},
// 关闭领用或归还对话框
closeUseOrReturnFormDialog() {
this.$refs.useOrReturnFormComponentRef.resetForm()
this.useOrReturnFormVisible = false
},
// 关闭领用或归还对话框
closeUseOrReturnFormDialog(isRefresh) {
console.log(isRefresh)
console.log('关闭领用或归还对话框')
this.$refs.useOrReturnFormComponentRef.resetForm()
this.useOrReturnFormVisible = false
if (isRefresh) {
this.getDeviceList()
}
},
},
}
</script>

221
src/views/basic/device-manage/useOrReturnForm.vue
View File

@ -1,69 +1,176 @@
<template>
<!-- 基础管理-设备管理-领用或归还 -->
<div>
<el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="100px">
<el-form-item label="领用人" prop="user">
<el-input v-model="useOrReturnForm.user" placeholder="请输入领用人" />
</el-form-item>
<el-form-item label="领用时间" prop="useTime">
<el-date-picker
type="date"
style="width: 100%"
placeholder="选择领用时间"
value-format="yyyy-MM-dd"
v-model="useOrReturnForm.useTime"
/>
</el-form-item>
<el-form-item label="退还人" prop="returnUser">
<el-input v-model="useOrReturnForm.returnUser" placeholder="请输入退还人" />
</el-form-item>
<!-- 基础管理-设备管理-领用或归还 -->
<div>
<el-form
:model="useOrReturnForm"
:rules="computedRules"
ref="useOrReturnFormRef"
label-width="100px"
>
<!-- 领用时显示 -->
<template v-if="formStatus == '0'">
<el-form-item label="领用人" prop="user">
<el-select
clearable
filterable
style="width: 100%"
v-model="useOrReturnForm.user"
placeholder="请选择设备领用人"
>
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</el-form-item>
</el-form>
</div>
<el-form-item label="领用时间" prop="useTime">
<el-date-picker
type="date"
style="width: 100%"
placeholder="选择领用时间"
value-format="yyyy-MM-dd"
v-model="useOrReturnForm.useTime"
/>
</el-form-item>
</template>
<!-- 归还时显示 -->
<template v-else-if="formStatus == '1'">
<el-form-item label="领用人">
<el-input v-model="displayBorrower" readonly/>
</el-form-item>
<el-form-item label="领用时间">
<el-input v-model="displayBorrowerData" readonly/>
</el-form-item>
<el-form-item label="归还时间" prop="returnTime">
<el-date-picker
type="date"
style="width: 100%"
placeholder="选择归还时间"
value-format="yyyy-MM-dd"
v-model="useOrReturnForm.returnTime"
/>
</el-form-item>
</template>
<el-form-item>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {addUseApi, returnDeviceApi, getDeviceKeepUser,} from "@/api/basic/device-manage";
export default {
name: 'useOrReturnForm',
name: 'UseOrReturnForm',
data() {
return {
formStatus: undefined, // 默认领用
deviceId: null,
displayBorrower: "", // 用于展示领用人姓名（归还时）
displayBorrowerData: "", // 用于展示领用人姓名（归还时）
useOrReturnForm: {
user: '',
useTime: '',
returnUser: '',
returnTime: '',
},
userList: [],
}
},
computed: {
// 动态规则：根据状态决定校验项
computedRules() {
const rules = {}
if (this.formStatus == '0') {
rules.user = [{required: true, message: '请选择领用人', trigger: 'change'}]
rules.useTime = [{required: true, message: '请选择领用时间', trigger: 'change'}]
} else if (this.formStatus == '1') {
rules.returnTime = [{required: true, message: '请选择归还时间', trigger: 'change'}]
}
return rules
}
},
created() {
getDeviceKeepUser().then(res => {
this.userList = res.data
});
},
methods: {
cancel() {
// 重置表单（避免上次数据残留）
this.resetForm()
this.$emit('closeUseOrReturnFormDialog')
},
submitForm() {
this.$refs.useOrReturnFormRef.validate(async (valid) => {
if (valid) {
// 组装提交参数
const params = {
deviceId: this.deviceId,
}
var API = "";
var name = "";
if (this.formStatus == '0') {
params.userId = this.useOrReturnForm.user
params.startTime = this.useOrReturnForm.useTime
params.status = '1';
API = addUseApi;
name = "领用成功";
} else {
params.endTime = this.useOrReturnForm.returnTime
params.status = '0';
API = returnDeviceApi;
name = "退还成功";
const returnDate = new Date(this.useOrReturnForm.returnTime);
const borrowDate = new Date(this.displayBorrowerData);
data() {
return {
useOrReturnForm: {
user: '',
useTime: '',
returnUser: '',
},
useOrReturnFormRules: {
user: [{ required: true, message: '请输入领用人', trigger: 'blur' }],
useTime: [{ required: true, message: '请选择领用时间', trigger: 'change' }],
returnUser: [{ required: true, message: '请输入退还人', trigger: 'blur' }],
},
if (returnDate < borrowDate) {
this.$modal.msgError("归还时间不能早于领用时间")
return false;
}
}
const res = await API(params)
if (res.code == 200) {
this.$modal.msgSuccess(name)
this.useOrReturnForm.user = '';
this.useOrReturnForm.useTime = '';
this.useOrReturnForm.returnUser = '';
this.useOrReturnForm.returnTime = '';
this.displayBorrower = '';
this.displayBorrowerData = '';
this.deviceId = undefined;
this.$emit('closeUseOrReturnFormDialog', true)
}
} else {
return false
}
})
},
methods: {
cancel() {
this.$emit('closeUseOrReturnFormDialog')
},
submitForm() {
// this.$emit('submitForm')
this.$refs.useOrReturnFormRef.validate((valid) => {
if (valid) {
this.$emit('closeUseOrReturnFormDialog')
} else {
return false
}
})
},
resetForm() {
this.$refs.useOrReturnFormRef.resetFields()
},
setFormData(data) {},
resetForm() {
this.useOrReturnForm = {
user: '',
useTime: '',
returnUser: '',
returnTime: '',
}
this.displayBorrower = "";
this.displayBorrowerData = "";
this.formStatus = undefined
this.deviceId = null
},
// 接收父组件传入的数据
setFormData(data) {
// 重置表单（避免上次数据残留）
this.resetForm()
const {status, deviceId, userName, startTime} = data
this.formStatus = String(status) // 确保是字符串 '0' 或 '1'
this.deviceId = deviceId
this.displayBorrower = userName;
if(startTime){
this.displayBorrowerData = startTime.substr(0, 10);
}
},
},
}
</script>

188
src/views/basic/device-manage/useRecordTable.vue
View File

@ -1,60 +1,148 @@
<template>
<!-- 基础管理-设备管理-使用记录 -->
<div>
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
<el-form-item label="领用人" prop="user">
<el-input
clearable
placeholder="请输入领用人"
v-model="queryParams.chargePerson"
@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>
<!-- 基础管理-设备管理-使用记录 -->
<div>
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
<el-form-item label="领用时间" prop="startTime">
<el-date-picker
type="date"
style="width: 100%"
placeholder="选择领用时间"
value-format="yyyy-MM-dd"
v-model="queryParams.startTime"
/>
</el-form-item>
<el-table :data="recordList" border>
<el-table-column label="序号" align="center" type="index" width="55" />
<el-table-column
align="center"
:key="item.prop"
:label="item.label"
:prop="item.prop"
v-for="item in columnList"
/>
</el-table>
</div>
<el-form-item label="归还时间" prop="endTime">
<el-date-picker
type="date"
style="width: 100%"
placeholder="选择归还时间"
value-format="yyyy-MM-dd"
v-model="queryParams.endTime"
/>
</el-form-item>
<el-form-item label="领用人" prop="userId">
<el-select
clearable
filterable
style="width: 100%"
v-model="queryParams.userId"
placeholder="请选择设备领用人"
>
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</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 :data="recordList" border>
<el-table-column label="序号" align="center" type="index" width="55"/>
<el-table-column
align="center"
:key="item.prop"
:label="item.label"
:prop="item.prop"
v-for="item in columnList"
/>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="fetchRecordList"
/>
</div>
</template>
<script>
import {getDeviceKeepUser, getRecordListApi} from '@/api/basic/device-manage'
export default {
name: 'UseRecordTable',
data() {
return {
queryParams: {
user: '',
},
recordList: [],
columnList: [
{ prop: 'deviceName', label: '设备名称' },
{ prop: 'deviceCode', label: '设备编码' },
{ prop: 'user', label: '领用人' },
{ prop: 'useTime', label: '领用日期' },
{ prop: 'returnUser', label: '归还人' },
{ prop: 'returnTime', label: '归还日期' },
],
}
name: 'UseRecordTable',
data() {
return {
total: 0, // 总条数
deviceId: null,
queryParams: {
pageNum: 1,
pageSize: 10,
userId: '',
startTime: '',
endTime: '',
},
recordList: [],
userList: [],
columnList: [
{prop: 'deviceTypeName', label: '设备类型'},
{prop: 'deviceCode', label: '设备编号'},
{prop: 'userName', label: '领用人'},
{prop: 'startTime', label: '领用日期'},
{prop: 'endTime', label: '归还日期'},
],
}
},
created() {
getDeviceKeepUser().then(res => {
this.userList = res.data
});
},
methods: {
// 查询使用记录（带筛选条件）
async handleQuery() {
await this.fetchRecordList();
},
methods: {
handleQuery() {
console.log(this.queryParams)
},
resetQuery() {
this.queryParams = {}
},
// 重置查询条件
resetQuery() {
this.queryParams.userId = '';
this.queryParams.startTime = '';
this.queryParams.endTime = '';
this.fetchRecordList(); // 重置后重新查询
},
// 核心：获取记录列表
async fetchRecordList() {
if (!this.deviceId) {
this.recordList = [];
return;
}
const params = {
deviceId: this.deviceId,
...(this.queryParams.userId && { userId: this.queryParams.userId }),
...(this.queryParams.startTime && { startTime: this.queryParams.startTime }),
...(this.queryParams.endTime && { endTime: this.queryParams.endTime }),
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
};
const res = await getRecordListApi(params);
if (res.code === 200) {
this.recordList = res.rows || [];
this.total = res.total
} else {
this.recordList = [];
this.$message.warning('获取使用记录失败');
}
},
// 接收父组件传入的数据
setFormData(data) {
// 重置表单（避免上次数据残留）
this.resetForm()
const {deviceId} = data
this.deviceId = deviceId
this.resetQuery(); // 这会自动触发 fetchRecordList()
},
},
}
</script>

6
src/views/basic/owner-manage/index.vue
View File

@ -19,7 +19,7 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddDeviceType">
<el-button plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddDeviceType" v-hasPermi="['owner:add']">
新增业主单位
</el-button>
</el-col>
@ -42,7 +42,7 @@
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
v-hasPermi="['basic:device:edit']"
v-hasPermi="['owner:update']"
>
编辑
</el-button>
@ -52,7 +52,7 @@
icon="el-icon-delete"
style="color: #f56c6c"
@click="handleDelete(scope.row)"
v-hasPermi="['basic:device:remove']"
v-hasPermi="['owner:del']"
>
删除
</el-button>

6
src/views/basic/pro-type/index.vue
View File

@ -19,7 +19,7 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddDeviceType">
<el-button plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddDeviceType" v-hasPermi="['pro:type:add']">
新增项目类型
</el-button>
</el-col>
@ -42,7 +42,7 @@
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
v-hasPermi="['basic:device:edit']"
v-hasPermi="['pro:type:update']"
>
编辑
</el-button>
@ -52,7 +52,7 @@
icon="el-icon-delete"
style="color: #f56c6c"
@click="handleDelete(scope.row)"
v-hasPermi="['basic:device:remove']"
v-hasPermi="['pro:type:del']"
>
删除
</el-button>