<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<!-- 搜索区域 -->
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
<el-form-item label="煤种名称" prop="coalName">
|
<el-input
|
v-model="queryParams.coalName"
|
placeholder="请输入煤种名称"
|
clearable
|
size="small"
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="锁仓状态" prop="lockStatus">
|
<el-select v-model="queryParams.lockStatus" placeholder="请选择锁仓状态" clearable size="small">
|
<el-option label="已锁定" value="locked" />
|
<el-option label="部分锁定" value="partial" />
|
<el-option label="未锁定" value="unlocked" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="供应商" prop="supplierName">
|
<el-input
|
v-model="queryParams.supplierName"
|
placeholder="请输入供应商名称"
|
clearable
|
size="small"
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="锁仓日期" prop="lockDateRange">
|
<el-date-picker
|
v-model="queryParams.lockDateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
|
<el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 操作按钮区域 -->
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="Plus"
|
size="small"
|
@click="handleAdd"
|
v-hasPermi="['coalLock:add']"
|
>新增锁仓</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="success"
|
plain
|
icon="Edit"
|
size="small"
|
:disabled="single"
|
@click="handleUpdate"
|
v-hasPermi="['coalLock:edit']"
|
>修改锁仓</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="Delete"
|
size="small"
|
:disabled="multiple"
|
@click="handleDelete"
|
v-hasPermi="['coalLock:remove']"
|
>删除锁仓</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="warning"
|
plain
|
icon="Unlock"
|
size="small"
|
:disabled="single"
|
@click="handleUnlock"
|
v-hasPermi="['coalLock:unlock']"
|
>解除锁仓</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="info"
|
plain
|
icon="View"
|
size="small"
|
:disabled="single"
|
@click="handleView"
|
v-hasPermi="['coalLock:query']"
|
>查看详情</el-button>
|
</el-col>
|
<!-- <el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="Download"
|
size="small"
|
@click="handleExport"
|
v-hasPermi="['coalLock:export']"
|
>导出</el-button>
|
</el-col> -->
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
|
<!-- 数据表格 -->
|
<el-table v-loading="loading" :data="lockList" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="锁仓编号" align="center" prop="lockCode" width="180" />
|
<el-table-column label="煤种名称" align="center" prop="coalName" min-width="120" />
|
<el-table-column label="供应商" align="center" prop="supplierName" min-width="120" />
|
<el-table-column label="总库存量(吨)" align="center" prop="totalInventory" width="120" />
|
<el-table-column label="锁仓数量(吨)" align="center" prop="lockQuantity" width="120" />
|
<el-table-column label="可用数量(吨)" align="center" prop="availableQuantity" width="120" />
|
<el-table-column label="锁仓状态" align="center" prop="lockStatus" width="100">
|
<template #default="scope">
|
<el-tag :type="getLockStatusType(scope.row.lockStatus)">
|
{{ getLockStatusText(scope.row.lockStatus) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="锁仓原因" align="center" prop="lockReason" min-width="150" show-overflow-tooltip />
|
<el-table-column label="锁仓人" align="center" prop="lockUser" width="100" />
|
<el-table-column label="锁仓时间" align="center" prop="lockTime" width="180" />
|
<el-table-column label="预计解锁时间" align="center" prop="expectedUnlockTime" width="180" />
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
<template #default="scope">
|
<el-button
|
size="small"
|
type="text"
|
icon="Edit"
|
@click="handleUpdate(scope.row)"
|
v-hasPermi="['coalLock:edit']"
|
>修改</el-button>
|
<el-button
|
size="small"
|
type="text"
|
icon="Unlock"
|
@click="handleUnlock(scope.row)"
|
v-hasPermi="['coalLock:unlock']"
|
>解锁</el-button>
|
<el-button
|
size="small"
|
type="text"
|
icon="Delete"
|
@click="handleDelete(scope.row)"
|
v-hasPermi="['coalLock:remove']"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页组件 -->
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</el-card>
|
|
<!-- 添加或修改锁仓对话框 -->
|
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
|
<el-form ref="lockFormRef" :model="form" :rules="rules" label-width="120px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="煤种名称" prop="coalName">
|
<el-select
|
v-model="form.coalId"
|
placeholder="请选择煤种"
|
filterable
|
clearable
|
@change="handleCoalChange"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="coal in coalOptions"
|
:key="coal.value"
|
:label="coal.label"
|
:value="coal.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="供应商" prop="supplierId">
|
<el-select
|
v-model="form.supplierId"
|
placeholder="请选择供应商"
|
filterable
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="supplier in supplierOptions"
|
:key="supplier.value"
|
:label="supplier.label"
|
:value="supplier.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="总库存量(吨)" prop="totalInventory">
|
<el-input v-model="form.totalInventory" placeholder="请输入总库存量" disabled />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="锁仓数量(吨)" prop="lockQuantity">
|
<el-input
|
v-model="form.lockQuantity"
|
placeholder="请输入锁仓数量"
|
type="number"
|
:max="form.totalInventory"
|
@input="handleLockQuantityChange"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="可用数量(吨)" prop="availableQuantity">
|
<el-input v-model="form.availableQuantity" placeholder="可用数量" disabled />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="锁仓状态" prop="lockStatus">
|
<el-select v-model="form.lockStatus" placeholder="请选择锁仓状态" style="width: 100%">
|
<el-option label="已锁定" value="locked" />
|
<el-option label="部分锁定" value="partial" />
|
<el-option label="未锁定" value="unlocked" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="锁仓时间" prop="lockTime">
|
<el-date-picker
|
v-model="form.lockTime"
|
type="datetime"
|
placeholder="选择锁仓时间"
|
style="width: 100%"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="预计解锁时间" prop="expectedUnlockTime">
|
<el-date-picker
|
v-model="form.expectedUnlockTime"
|
type="datetime"
|
placeholder="选择预计解锁时间"
|
style="width: 100%"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="锁仓原因" prop="lockReason">
|
<el-input
|
v-model="form.lockReason"
|
type="textarea"
|
placeholder="请输入锁仓原因"
|
:rows="3"
|
maxlength="500"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="备注" prop="remarks">
|
<el-input
|
v-model="form.remarks"
|
type="textarea"
|
placeholder="请输入备注信息"
|
:rows="2"
|
maxlength="200"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 查看详情对话框 -->
|
<el-dialog title="锁仓详情" v-model="viewOpen" width="800px" append-to-body>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="锁仓编号">{{ form.lockCode }}</el-descriptions-item>
|
<el-descriptions-item label="煤种名称">{{ form.coalName }}</el-descriptions-item>
|
<el-descriptions-item label="供应商">{{ form.supplierName }}</el-descriptions-item>
|
<el-descriptions-item label="总库存量">{{ form.totalInventory }}吨</el-descriptions-item>
|
<el-descriptions-item label="锁仓数量">{{ form.lockQuantity }}吨</el-descriptions-item>
|
<el-descriptions-item label="可用数量">{{ form.availableQuantity }}吨</el-descriptions-item>
|
<el-descriptions-item label="锁仓状态">
|
<el-tag :type="getLockStatusType(form.lockStatus)">
|
{{ getLockStatusText(form.lockStatus) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="锁仓人">{{ form.lockUser }}</el-descriptions-item>
|
<el-descriptions-item label="锁仓时间">{{ form.lockTime }}</el-descriptions-item>
|
<el-descriptions-item label="预计解锁时间">{{ form.expectedUnlockTime }}</el-descriptions-item>
|
<el-descriptions-item label="锁仓原因" :span="2">{{ form.lockReason }}</el-descriptions-item>
|
<el-descriptions-item label="备注" :span="2">{{ form.remarks }}</el-descriptions-item>
|
</el-descriptions>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="viewOpen = false">关 闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { Search, Plus, Edit, Delete, Unlock, View, Download, Refresh } from '@element-plus/icons-vue'
|
|
// 响应式数据
|
const loading = ref(false)
|
const showSearch = ref(true)
|
const open = ref(false)
|
const viewOpen = ref(false)
|
const single = ref(true)
|
const multiple = ref(true)
|
const total = ref(0)
|
const lockList = ref([])
|
const coalOptions = ref([])
|
const supplierOptions = ref([])
|
|
// 查询参数
|
const queryParams = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
coalName: '',
|
lockStatus: '',
|
supplierName: '',
|
lockDateRange: []
|
})
|
|
// 表单数据
|
const form = reactive({
|
id: undefined,
|
lockCode: '',
|
coalId: '',
|
coalName: '',
|
supplierId: '',
|
supplierName: '',
|
totalInventory: 0,
|
lockQuantity: 0,
|
availableQuantity: 0,
|
lockStatus: 'locked',
|
lockReason: '',
|
lockUser: '',
|
lockTime: '',
|
expectedUnlockTime: '',
|
remarks: ''
|
})
|
|
// 表单验证规则
|
const rules = reactive({
|
coalId: [
|
{ required: true, message: '请选择煤种', trigger: 'change' }
|
],
|
supplierId: [
|
{ required: true, message: '请选择供应商', trigger: 'change' }
|
],
|
lockQuantity: [
|
{ required: true, message: '请输入锁仓数量', trigger: 'blur' },
|
{ type: 'number', min: 0, message: '锁仓数量不能小于0', trigger: 'blur' }
|
],
|
lockStatus: [
|
{ required: true, message: '请选择锁仓状态', trigger: 'change' }
|
],
|
lockReason: [
|
{ required: true, message: '请输入锁仓原因', trigger: 'blur' }
|
],
|
lockTime: [
|
{ required: true, message: '请选择锁仓时间', trigger: 'change' }
|
]
|
})
|
|
// 计算属性
|
const title = computed(() => {
|
return form.id ? '修改锁仓' : '新增锁仓'
|
})
|
|
// 表单引用
|
const lockFormRef = ref()
|
const queryForm = ref()
|
|
// 初始化数据
|
onMounted(() => {
|
getList()
|
initOptions()
|
})
|
|
// 初始化选项数据
|
const initOptions = () => {
|
// 模拟煤种数据
|
coalOptions.value = [
|
{ value: '1', label: '无烟煤' },
|
{ value: '2', label: '烟煤' },
|
{ value: '3', label: '褐煤' },
|
{ value: '4', label: '焦煤' },
|
{ value: '5', label: '气煤' }
|
]
|
|
// 模拟供应商数据
|
supplierOptions.value = [
|
{ value: '1', label: '山西煤炭集团' },
|
{ value: '2', label: '内蒙古煤炭公司' },
|
{ value: '3', label: '陕西煤炭工业' },
|
{ value: '4', label: '河南煤炭集团' },
|
{ value: '5', label: '河北煤炭公司' }
|
]
|
|
// 模拟锁仓列表数据
|
lockList.value = [
|
{
|
id: '1',
|
lockCode: 'LK20241201001',
|
coalId: '1',
|
coalName: '无烟煤',
|
supplierId: '1',
|
supplierName: '山西煤炭集团',
|
totalInventory: 1000,
|
lockQuantity: 300,
|
availableQuantity: 700,
|
lockStatus: 'partial',
|
lockReason: '生产计划预留',
|
lockUser: '张三',
|
lockTime: '2024-12-01 09:00:00',
|
expectedUnlockTime: '2024-12-31 18:00:00'
|
},
|
{
|
id: '2',
|
lockCode: 'LK20241201002',
|
coalId: '2',
|
coalName: '烟煤',
|
supplierId: '2',
|
supplierName: '内蒙古煤炭公司',
|
totalInventory: 800,
|
lockQuantity: 800,
|
availableQuantity: 0,
|
lockStatus: 'locked',
|
lockReason: '质量检测中',
|
lockUser: '李四',
|
lockTime: '2024-12-01 10:00:00',
|
expectedUnlockTime: '2024-12-15 18:00:00'
|
},
|
{
|
id: '3',
|
lockCode: 'LK20241201003',
|
coalId: '4',
|
coalName: '焦煤',
|
supplierId: '3',
|
supplierName: '陕西煤炭工业',
|
totalInventory: 1200,
|
lockQuantity: 0,
|
availableQuantity: 1200,
|
lockStatus: 'unlocked',
|
lockReason: '',
|
lockUser: '',
|
lockTime: '',
|
expectedUnlockTime: ''
|
}
|
]
|
total.value = lockList.value.length
|
}
|
|
// 获取锁仓状态类型
|
const getLockStatusType = (status) => {
|
const statusMap = {
|
'locked': 'danger',
|
'partial': 'warning',
|
'unlocked': 'success'
|
}
|
return statusMap[status] || 'info'
|
}
|
|
// 获取锁仓状态文本
|
const getLockStatusText = (status) => {
|
const statusMap = {
|
'locked': '已锁定',
|
'partial': '部分锁定',
|
'unlocked': '未锁定'
|
}
|
return statusMap[status] || '未知'
|
}
|
|
// 煤种选择变化处理
|
const handleCoalChange = (coalId) => {
|
const selectedCoal = coalOptions.value.find(item => item.value === coalId)
|
if (selectedCoal) {
|
form.coalName = selectedCoal.label
|
// 模拟设置库存数据
|
form.totalInventory = Math.floor(Math.random() * 1000) + 500
|
form.availableQuantity = form.totalInventory - form.lockQuantity
|
}
|
}
|
|
// 锁仓数量变化处理
|
const handleLockQuantityChange = () => {
|
if (form.lockQuantity > form.totalInventory) {
|
form.lockQuantity = form.totalInventory
|
}
|
form.availableQuantity = form.totalInventory - form.lockQuantity
|
|
// 更新锁仓状态
|
if (form.lockQuantity === 0) {
|
form.lockStatus = 'unlocked'
|
} else if (form.lockQuantity === form.totalInventory) {
|
form.lockStatus = 'locked'
|
} else {
|
form.lockStatus = 'partial'
|
}
|
}
|
|
// 查询列表
|
const getList = () => {
|
loading.value = true
|
// 模拟API调用延迟
|
setTimeout(() => {
|
loading.value = false
|
}, 500)
|
}
|
|
// 搜索
|
const handleQuery = () => {
|
queryParams.pageNum = 1
|
getList()
|
}
|
|
// 重置搜索
|
const resetQuery = () => {
|
queryParams.coalName = ''
|
queryParams.lockStatus = ''
|
queryParams.supplierName = ''
|
queryParams.lockDateRange = []
|
handleQuery()
|
}
|
|
// 选择变化处理
|
const handleSelectionChange = (selection) => {
|
single.value = selection.length !== 1
|
multiple.value = !selection.length
|
}
|
|
// 新增锁仓
|
const handleAdd = () => {
|
reset()
|
open.value = true
|
}
|
|
// 修改锁仓
|
const handleUpdate = (row) => {
|
reset()
|
const id = row.id || row
|
const lockData = lockList.value.find(item => item.id === id)
|
if (lockData) {
|
Object.assign(form, lockData)
|
}
|
open.value = true
|
}
|
|
// 查看详情
|
const handleView = (row) => {
|
reset()
|
const id = row.id || row
|
const lockData = lockList.value.find(item => item.id === id)
|
if (lockData) {
|
Object.assign(form, lockData)
|
}
|
viewOpen.value = true
|
}
|
|
// 删除锁仓
|
const handleDelete = (row) => {
|
const ids = row.id || row
|
ElMessageBox.confirm('确认删除选中的锁仓记录吗？', '警告', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
ElMessage.success('删除成功')
|
getList()
|
})
|
}
|
|
// 解除锁仓
|
const handleUnlock = (row) => {
|
const id = row.id || row
|
ElMessageBox.confirm('确认解除该煤种的锁仓吗？', '警告', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const lockData = lockList.value.find(item => item.id === id)
|
if (lockData) {
|
lockData.lockQuantity = 0
|
lockData.availableQuantity = lockData.totalInventory
|
lockData.lockStatus = 'unlocked'
|
lockData.lockReason = ''
|
lockData.lockUser = ''
|
lockData.lockTime = ''
|
lockData.expectedUnlockTime = ''
|
}
|
ElMessage.success('解锁成功')
|
getList()
|
})
|
}
|
|
// 导出
|
const handleExport = () => {
|
ElMessage.success('导出功能开发中...')
|
}
|
|
// 提交表单
|
const submitForm = () => {
|
lockFormRef.value.validate((valid) => {
|
if (valid) {
|
if (form.id) {
|
// 修改
|
const index = lockList.value.findIndex(item => item.id === form.id)
|
if (index !== -1) {
|
Object.assign(lockList.value[index], form)
|
}
|
ElMessage.success('修改成功')
|
} else {
|
// 新增
|
const newLock = {
|
...form,
|
id: Date.now().toString(),
|
lockCode: `LK${new Date().toISOString().slice(0, 10).replace(/-/g, '')}${String(lockList.value.length + 1).padStart(3, '0')}`,
|
lockUser: '当前用户'
|
}
|
lockList.value.unshift(newLock)
|
total.value = lockList.value.length
|
ElMessage.success('新增成功')
|
}
|
open.value = false
|
getList()
|
}
|
})
|
}
|
|
// 取消
|
const cancel = () => {
|
open.value = false
|
reset()
|
}
|
|
// 重置表单
|
const reset = () => {
|
Object.assign(form, {
|
id: undefined,
|
lockCode: '',
|
coalId: '',
|
coalName: '',
|
supplierId: '',
|
supplierName: '',
|
totalInventory: 0,
|
lockQuantity: 0,
|
availableQuantity: 0,
|
lockStatus: 'locked',
|
lockReason: '',
|
lockUser: '',
|
lockTime: '',
|
expectedUnlockTime: '',
|
remarks: ''
|
})
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.box-card {
|
margin-bottom: 20px;
|
}
|
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
|
.el-descriptions {
|
margin: 20px 0;
|
}
|
</style>
|
