优化文档管理及基础信息页面

张诺

3 天以前 437a70bd86d8adda3da41853b8b1c2706a22fdd7

 src/views/production/components/ProductionDialog.vue

@@ -1,107 +1,152 @@
<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>
div<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'"
    width="1200px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-button type="primary" @click="handlData">选择数据</el-button>
    <ETable
      :columns="columns"
      height="200"
      @cell-edit="handleCellEdit"
      :showOperations="false"
      :tableData="tableData"
      @row-click="handleRowClick"
      :editableColumns="['used']"
    />
    <div class="empty-table">
    <h1>生产明细</h1>
      <el-row :gutter="10">
      <el-col :span="2">
        <el-button type="primary" @click="addNewRow">
          <el-icon>
            <Plus />
          </el-icon>
          新增
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="clearAllRows">
          <el-icon>
            <Delete />
          </el-icon>
          清空
        </el-button>
      </el-col>
      <!-- <el-col :span="2">
        <el-button type="warning" @click="calculateAllCosts">
          <el-icon>
            <Warning />
          </el-icon> 重新计算
        </el-button>
      </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>
    <ProductionDetailsTable
      v-model="detailsTableData"
      :border="false"
      :show-operations="true"
      :auto-calculate="true"
      @input-change="handleDetailsChange"
      @delete-row="handleDeleteRow"
    />

    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit"
          >确 定</el-button
        >
      </div>
      
    </template>
  </el-dialog>
  <el-dialog
    v-model="innerVisible"
    width="1000"
    title="选择配置数据"
    append-to-body
  >
    <ETable
      @selection-change="handleSelectionChange"
      :showOperations="false"
      :columns="formalDatabaseDataColumns"
      :tableData="formalDatabaseData"
      height="400"
      @cell-edit="handleCellEdit"
      :show-selection="true"
    />
    <el-row :gutter="24">
      <el-col :span="2" :offset="22">
        <el-button type="primary" @click="handleSelectData">确定</el-button>
      </el-col>
    </el-row>
  </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'
import { ref, reactive, watch } from "vue";
import ETable from "@/components/Table/EtableModify.vue";
import ProductionDetailsTable from "./ProductionDetailsTable.vue";
import { ElMessage } from "element-plus";
import { Delete, Warning, Plus } from "@element-plus/icons-vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
    default: false,
  },
  type: {
    type: String,
    default: 'add' // 'add' 或 'edit'
    default: "add", // 'add' 或 'edit'
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const dialogVisible = defineModel('visible', {
    default: () => ({}),
  },
});
const dialogVisible = defineModel("visible", {
  type: Boolean,
  default: false
})
const emit = defineEmits(['update:visible', 'success'])
  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 innerVisible = 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' },
]
  { label: "煤种", prop: "category" },
  { label: "热值", prop: "Calorific" },
  { label: "库存数量", prop: "stock" },
  { label: "本次使用数量", prop: "used" },
];
const detailsTableData = ref([
  
]);
const handleRowClick = (row) => {
  currentRow.value = row
  console.log('当前行数据:', currentRow.value)
}
  currentRow.value = row;
};
const formalDatabaseDataColumns = ref([
  { prop: "name", label: "供应商名称", width: 150 },
  { prop: "type", label: "煤种类型", width: 120 },
  { prop: "unit", label: "单位", width: 100 },
  { prop: "number", label: "采购数量", width: 100 },
  { prop: "money", label: "单价（含税）", width: 120 },
  { prop: "money1", label: "总价（含税）", width: 120 },
  { prop: "money2", label: "税率", width: 80 },
  { prop: "money3", label: "不含税单价", width: 120 },
  { prop: "createUser", label: "登记人", width: 100 },
  { prop: "createTime", label: "登记日期", width: 150 },
]);
// 表单数据
const formData = reactive({
  category: '',
  unit: '',
  category: "",
  unit: "",
  productionVolume: 0,
  laborCost: 0,
  materialCost: 0,
@@ -109,68 +154,218 @@
  totalCost: 0,
  totalPrice: 0,
  profit: 0,
  reviewer: '',
  date: ''
})
  reviewer: "",
  date: "",
});
const handlData = () => {
  innerVisible.value = true;
};
const formalDatabaseData = ref([]);
const formalDatabaseSelectedData = ref([]);
formalDatabaseData.value = [
  {
    id: 1,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 120,
    money: 500,
    money1: 200,
    money2: 200,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 2,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 100,
    money: 600,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 3,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 300,
    money: 789,
    money1: 400,
    money2: 400,
    money3: 400,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 4,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 256,
    money: 800,
    money1: 420,
    money2: 420,
    money3: 420,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 5,
    name: "供应商C",
    type: "无烟煤",
    unit: "吨",
    number: 256,
    money: 700,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 6,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 120,
    money: 500,
    money1: 200,
    money2: 200,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 7,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 100,
    money: 600,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 8,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 300,
    money: 789,
    money1: 400,
    money2: 400,
    money3: 400,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 9,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 256,
    money: 800,
    money1: 420,
    money2: 420,
    money3: 420,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 10,
    name: "供应商C",
    type: "无烟煤",
    unit: "吨",
    number: 256,
    money: 700,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
];

// 表单验证规则
const rules = {
  category: [{ required: true, message: '请选择煤种', trigger: 'change' }],
}
  category: [{ required: true, message: "请选择煤种", trigger: "change" }],
};

const search = () => {
  // 查询逻辑
  if (!formData.category) {
    return this.$message.error('请选择煤种')
// 初始化
const Initialization = () => {
  console.log("初始化数据");
  tableData.value = [];
};
defineExpose({
  Initialization
});
const handleSelectData = (row) => {
  if (!innerVisible.value) return;
  // 获取选中的数据
  const selectedData = formalDatabaseSelectedData.value;
  if (selectedData.length === 0) {
    ElMessage.warning("请至少选择一条数据");
    return;
  }
  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)
}

  // 将选中的数据根据需要筛选到表格中
  selectedData.forEach((item) => {
    const existingItem = tableData.value.find(
      (row) => row.id === item.id
    );
    if (!existingItem) {
      tableData.value.push({
        id: item.id,
        category: item.type,
        Calorific: item.money4,
        stock: item.number,
        used: 0, // 初始使用数量为0
      });
    }
  });
  innerVisible.value = false;
};
const handleSelectionChange = (selection) => {
  formalDatabaseSelectedData.value = selection;
};
const reset = () => {
  // formRef
  formRef.value?.resetFields()
}
  formRef.value?.resetFields();
};

const selectChange = (value) => {
}
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()
    }
  })
}
  console.log(detailsTableData.value);
  // dialogVisible.value = false;
};

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  formRef.value?.resetFields()
  dialogVisible.value = false;
  formRef.value?.resetFields();
  Object.assign(formData, {
    category: '',
    unit: '',
    category: "",
    unit: "",
    productionVolume: 0,
    laborCost: 0,
    materialCost: 0,
@@ -178,32 +373,76 @@
    totalCost: 0,
    totalPrice: 0,
    profit: 0,
    reviewer: '',
    date: ''
  })
}
    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
  if (prop === "used" && Number(value) > Number(row.stock)) {
    ElMessage.warning("使用数量不能大于库存数量！");
    row.used = row.stock;
  }
}
};

// 处理生产明细表格的操作
const addNewRow = () => {
  detailsTableData.value.push({
    coalType: "",
    calorificValue: "",
    productionQuantity: "",
    laborCost: "",
    energyCost: "",
    equipmentDepreciation: "",
    purchasePrice: "",
    totalCost: "",
  });
};

const clearAllRows = () => {
  detailsTableData.value = [];
  ElMessage.success("已清空所有数据");
};

const calculateAllCosts = () => {
  detailsTableData.value.forEach((row) => {
    const laborCost = parseFloat(row.laborCost) || 0;
    const energyCost = parseFloat(row.energyCost) || 0;
    const equipmentDepreciation = parseFloat(row.equipmentDepreciation) || 0;
    const purchasePrice = parseFloat(row.purchasePrice) || 0;

    row.totalCost = (
      laborCost +
      energyCost +
      equipmentDepreciation +
      purchasePrice
    ).toFixed(2);
  });
  ElMessage.success("重新计算完成");
};

const handleDetailsChange = (data) => {
  console.log("生产明细数据变化:", data);
};

const handleDeleteRow = (index) => {
  ElMessage.success(`已删除第 ${index + 1} 行数据`);
};
</script>

<style scoped lang="scss"> 
.el-form{
<style scoped lang="scss">
.el-form {
  .el-row {
    padding-top: 20px;
    background: rgba($color: #F8FAFB, $alpha: 0.5) ;
    background: rgba($color: #f8fafb, $alpha: 0.5);
  }
}
.el-row>.el-col>h1{

.el-row > .el-col > h1 {
  font-weight: bolder;
}
</style>
.empty-table > .el-row{
  margin-bottom: 12px;
}
</style>