<template>
|
<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'" width="1200px"
|
:close-on-click-modal="false" @close="handleClose">
|
<el-form ref="formRef" :model="formData" :rules="rules" class="production-form">
|
<el-row :gutter="24">
|
<el-col :span="6">
|
<el-form-item label="煤种" prop="category">
|
<el-select v-model="formData.category" placeholder="请选择煤种" clearable style="width: 100%" @change="selectChange">
|
<el-option label="炼焦" value="炼焦" />
|
<el-option label="气煤" value="气煤" />
|
<el-option label="无烟煤" value="无烟煤" />
|
<el-option label="长焰煤" value="长焰煤" />
|
<el-option label="贫煤" value="贫煤" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="热值" prop="Calorific">
|
<el-input v-model="formData.Calorific" placeholder="请输入热值" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4" :offset="8">
|
<el-button type="primary" @click="search">查询</el-button>
|
<el-button @click="reset">重置</el-button>
|
</el-col>
|
</el-row>
|
</el-form>
|
<ETable :columns="columns" height="200" @cell-edit="handleCellEdit" :showOperations="false" :tableData="tableData" @row-click="handleRowClick" :editableColumns="['used']" />
|
<el-row :gutter="10">
|
<el-col :span="4">
|
<h1>生产明细</h1>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="2">
|
<el-button type="primary">
|
<el-icon><Plus /></el-icon> 新增
|
</el-button>
|
</el-col>
|
<el-col :span="2"><el-button type="danger">
|
<el-icon><Delete /></el-icon> 删除
|
</el-button></el-col>
|
<el-col :span="2">
|
<el-button type="warning">
|
<el-icon><Warning /></el-icon> 修改
|
</el-button>
|
</el-col>
|
</el-row>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
|
</div>
|
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, watch } from 'vue'
|
import ETable from '@/components/Table/ETable.vue'
|
import { ElMessage } from 'element-plus'
|
import { Delete, Warning } from '@element-plus/icons-vue'
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
type: {
|
type: String,
|
default: 'add' // 'add' 或 'edit'
|
},
|
rowData: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
const dialogVisible = defineModel('visible', {
|
type: Boolean,
|
default: false
|
})
|
const emit = defineEmits(['update:visible', 'success'])
|
|
const dialogType = ref('add')
|
const loading = ref(false)
|
const formRef = ref(null)
|
|
const tableData = ref([])
|
const currentRow = ref(null)
|
const columns = [
|
{ label: '煤种', prop: 'category' },
|
{ label: '热值', prop: 'Calorific' },
|
{ label: '库存数量', prop: 'stock' },
|
{ label: '本次使用数量', prop: 'used' },
|
]
|
const handleRowClick = (row) => {
|
currentRow.value = row
|
console.log('当前行数据:', currentRow.value)
|
}
|
// 表单数据
|
const formData = reactive({
|
category: '',
|
unit: '',
|
productionVolume: 0,
|
laborCost: 0,
|
materialCost: 0,
|
equipmentCost: 0,
|
totalCost: 0,
|
totalPrice: 0,
|
profit: 0,
|
reviewer: '',
|
date: ''
|
})
|
|
// 表单验证规则
|
const rules = {
|
category: [{ required: true, message: '请选择煤种', trigger: 'change' }],
|
}
|
|
const search = () => {
|
// 查询逻辑
|
if (!formData.category) {
|
return this.$message.error('请选择煤种')
|
}
|
loading.value = true
|
// 模拟查询数据
|
setTimeout(() => {
|
// 假数据
|
tableData.value = [
|
{ category: '炼焦', Calorific: '6000', stock: 100, used: 20 },
|
{ category: '气煤', Calorific: '5500', stock: 80, used: 15 },
|
{ category: '气煤', Calorific: '5500', stock: 80, used: 15 },
|
{ category: '气煤', Calorific: '5500', stock: 80, used: 15 },
|
{ category: '气煤', Calorific: '5500', stock: 80, used: 15 },
|
{ category: '气煤', Calorific: '5500', stock: 80, used: 15 },
|
{ category: '气煤', Calorific: '5500', stock: 80, used: 15 },
|
{ category: '无烟煤', Calorific: '7000', stock: 120, used: 30 }
|
]
|
loading.value = false
|
}, 1000)
|
}
|
|
const reset = () => {
|
// formRef
|
formRef.value?.resetFields()
|
}
|
|
const selectChange = (value) => {
|
}
|
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
|
await formRef.value.validate((valid) => {
|
if (valid) {
|
loading.value = true
|
// 触发成功事件，传递表单数据
|
emit('success', { ...formData })
|
loading.value = false
|
handleClose()
|
}
|
})
|
}
|
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogVisible.value = false
|
formRef.value?.resetFields()
|
Object.assign(formData, {
|
category: '',
|
unit: '',
|
productionVolume: 0,
|
laborCost: 0,
|
materialCost: 0,
|
equipmentCost: 0,
|
totalCost: 0,
|
totalPrice: 0,
|
profit: 0,
|
reviewer: '',
|
date: ''
|
})
|
}
|
|
// 添加单元格编辑处理函数
|
const handleCellEdit = (row, prop, value) => {
|
console.log('单元格编辑:', prop)
|
// console.log('单元格编辑完成:', row, prop, value)
|
// 这里可以添加验证逻辑，例如检查使用量是否大于库存
|
if (prop === 'used' && Number(value) > Number(row.stock)) {
|
ElMessage.warning('使用数量不能大于库存数量！')
|
// 可以在这里重置值
|
row.used = row.stock
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.el-form{
|
.el-row {
|
padding-top: 20px;
|
background: rgba($color: #F8FAFB, $alpha: 0.5) ;
|
}
|
}
|
.el-row>.el-col>h1{
|
font-weight: bolder;
|
}
|
</style>
|
