关键煤种锁仓

spring

6 天以前 d29ad31fb1c91e9162d44362fc09b9e2eb96744f

关键煤种锁仓

 src/views/coalLockManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,725 @@
<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>