完善基础管理 供应商、客户、煤种等功能

张诺

3 天以前 dd159ea51a7a77bd8cc00c70c0e900f472fb3395

 src/views/production/components/ProductionDialog.vue

@@ -1,22 +1,11 @@
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      class="production-form"
    >
      <el-row :gutter="20">
        <el-col :span="12">
  <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%">
            <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="无烟煤" />
@@ -25,137 +14,53 @@
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-select v-model="formData.unit" placeholder="请选择单位" clearable style="width: 100%">
              <el-option label="吨位" value="吨位" />
              <el-option label="千克" value="千克" />
            </el-select>
        <el-col :span="6">
          <el-form-item label="热值" prop="Calorific">
            <el-input v-model="formData.Calorific" placeholder="请输入热值" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生产数量" prop="productionVolume">
            <el-input-number
              v-model="formData.productionVolume"
              :min="0"
              :precision="2"
              style="width: 100%"
              @change="calculateTotal"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人工成本" prop="laborCost">
            <el-input-number
              v-model="formData.laborCost"
              :min="0"
              :precision="2"
              style="width: 100%"
              @change="calculateTotal"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="原料成本" prop="materialCost">
            <el-input-number
              v-model="formData.materialCost"
              :min="0"
              :precision="2"
              style="width: 100%"
              @change="calculateTotal"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备费用" prop="equipmentCost">
            <el-input-number
              v-model="formData.equipmentCost"
              :min="0"
              :precision="2"
              style="width: 100%"
              @change="calculateTotal"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="总成本" prop="totalCost">
            <el-input-number
              v-model="formData.totalCost"
              :min="0"
              :precision="2"
              style="width: 100%"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总价格" prop="totalPrice">
            <el-input-number
              v-model="formData.totalPrice"
              :min="0"
              :precision="2"
              style="width: 100%"
              @change="calculateProfit"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="利润" prop="profit">
            <el-input-number
              v-model="formData.profit"
              :min="0"
              :precision="2"
              style="width: 100%"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="复记人" prop="reviewer">
            <el-input v-model="formData.reviewer" placeholder="请输入复记人" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="日期" prop="date">
            <el-date-picker
              v-model="formData.date"
              type="date"
              placeholder="请选择日期"
              style="width: 100%"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        <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: {
@@ -171,14 +76,28 @@
    default: () => ({})
  }
})

const dialogVisible = defineModel('visible', {
  type: Boolean,
  default: false
})
const emit = defineEmits(['update:visible', 'success'])

const dialogVisible = ref(false)
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: '',
@@ -197,51 +116,43 @@
// 表单验证规则
const rules = {
  category: [{ required: true, message: '请选择煤种', trigger: 'change' }],
  unit: [{ required: true, message: '请选择单位', trigger: 'change' }],
  productionVolume: [{ required: true, message: '请输入生产数量', trigger: 'blur' }],
  laborCost: [{ required: true, message: '请输入人工成本', trigger: 'blur' }],
  materialCost: [{ required: true, message: '请输入原料成本', trigger: 'blur' }],
  equipmentCost: [{ required: true, message: '请输入设备费用', trigger: 'blur' }],
  totalPrice: [{ required: true, message: '请输入总价格', trigger: 'blur' }],
  reviewer: [{ required: true, message: '请输入复记人', trigger: 'blur' }],
  date: [{ required: true, message: '请选择日期', trigger: 'change' }]
}

// 监听visible变化
watch(() => props.visible, (val) => {
  dialogVisible.value = val
  if (val) {
    dialogType.value = props.type
    if (props.type === 'edit') {
      Object.assign(formData, props.rowData)
    }
const search = () => {
  // 查询逻辑
  if (!formData.category) {
    return this.$message.error('请选择煤种')
  }
})

// 监听dialogVisible变化
watch(() => dialogVisible.value, (val) => {
  emit('update:visible', val)
})

// 计算总成本
const calculateTotal = () => {
  formData.totalCost = (
    formData.laborCost +
    formData.materialCost +
    formData.equipmentCost
  )
  calculateProfit()
  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 calculateProfit = () => {
  formData.profit = formData.totalPrice - formData.totalCost
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
@@ -271,28 +182,28 @@
    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>
.production-form {
  padding: 20px;
<style scoped lang="scss"> 
.el-form{
  .el-row {
    padding-top: 20px;
    background: rgba($color: #F8FAFB, $alpha: 0.5) ;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
.el-row>.el-col>h1{
  font-weight: bolder;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}
</style> 
</style>