jdcProject_front/src/pages/demo/diceke/DicekeMiningrecord.vue

<script>
import {
  adddicekeMiningrecord,
  deletedicekeMiningrecord,
  findAllMiningrecord,
  finddicekeMiningrecordById,
  updatedicekeMiningrecord,
} from "@@/apis/tables/diceke/DicekeMiningrecord.js";
import { findAllPlateArea } from "@@/apis/tables/diceke/plateArea.js";
import { findAllshovel } from "@@/apis/tables/diceke/shovel.js";

export default {
  data() {
    return {
      dicekeMiningrecordQuery: null,
      updatedicekeMiningrecordform: false,
      dicekeMiningrecordform: null,
      plateAreaQuerry: null,
      shovelQuerry: null,
    };
  },
  created() {
    // 页面渲染之前执行，一般调用methods定义的方法
    this.getList();
  },
  methods: {
    getList() {
      findAllMiningrecord().then((Response) => {
        console.log(Response);
        this.dicekeMiningrecordQuery = Response.data.dicekeMiningrecordVoList;
        console.log(this.dicekeMiningrecordQuery);
      });
    },
    // 删除平盘
    removeDataById(id) {
      ElMessageBox.confirm("此操作将永久删除平盘记录，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletedicekeMiningrecord(id).then(() => {
            // 删除成功
            ElMessage({
              type: "success",
              message: "删除成功!",
            });
            // 重新加载列表
            this.getList();
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleAdd() {
      this.isEdit = false;
      this.dicekeMiningrecordform = {
        shovelID: null,
        plateID: null,
        totalMiningTon: "",
        metalTon: "",
        miningGrade: "",
        oxidationRate: "",
        avgGrade: "",
        dressingGrade: "",
        avgOxidationRate: "",
        beizhu: "",
      }; // 清空表单内容
      // 加载平盘和电产信息
      Promise.all([findAllPlateArea(), findAllshovel()])
        .then(([plateAreaResponse, shovelResponse]) => {
          this.plateAreaQuerry = plateAreaResponse.data.plateArea;
          this.shovelQuerry = shovelResponse.data.shovel;
          this.updatedicekeMiningrecordform = true; // 数据加载完成后再打开弹窗
        })
        .catch(() => {
          ElMessage.error("加载平盘和电产信息失败，请稍后重试");
        });
      this.updatedicekeMiningrecordform = true;
    },
    handleEdit(id) {
      this.isEdit = true;
      finddicekeMiningrecordById(id).then((Response) => {
        this.dicekeMiningrecordform =
          Response.data.dicekeMiningrecordServiceById;
        this.updatedicekeMiningrecordform = true;
      });
      findAllPlateArea().then((Response) => {
        this.plateAreaQuerry = Response.data.plateArea;
      });
      findAllshovel().then((Response) => {
        this.shovelQuerry = Response.data.shovel;
      });
    },
    updatePlateArea() {
      if (this.isEdit) {
        updatedicekeMiningrecord(this.dicekeMiningrecordform)
          .then(() => {
            ElMessage({
              type: "success",
              message: "修改成功!",
            });
            this.updatedicekeMiningrecordform = false;
            this.getList();
          })
          .catch(() => {
            ElMessage.error("修改失败，请稍后重试");
          });
      } else {
        adddicekeMiningrecord(this.dicekeMiningrecordform)
          .then(() => {
            ElMessage({
              type: "success",
              message: "新增成功!",
            });
            this.updatedicekeMiningrecordform = false;
            this.getList(); // 刷新列表
          })
          .catch(() => {
            ElMessage.error("新增失败，请稍后重试");
          });
      }
    },
  },
};
</script>

<template>
  <div class="app-container">
    <div
      style="
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <!-- 查询条件输入框 -->
      <el-input
        v-model="searchQuery"
        placeholder="请输入铲号或平盘"
        style="width: 200px; margin-right: 10px"
      />
      <el-button type="primary" @click="searchData">查询</el-button>

      <!-- 新增按钮 -->
      <el-button
        type="primary"
        @click="handleAdd"
        icon="el-icon-plus"
        style="
          width: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        新增
      </el-button>
    </div>
    <el-table
      :cell-style="rowStyle"
      :data="dicekeMiningrecordQuery"
      border
      style="width: 100%"
      :span-method="spanMethod"
    >
      <!-- 表格列定义 -->
      <el-table-column align="center" prop="plateRange" label="平盘（#）" />
      <el-table-column align="center" prop="shovelCode" label="铲号（#）" />
      <el-table-column
        align="center"
        prop="totalMiningTon"
        label="采矿量（t）"
      />
      <el-table-column align="center" prop="metalTon" label="金属量（#）" />
      <el-table-column
        align="center"
        prop="miningGrade"
        label="块段采矿品位（%）"
      />
      <el-table-column
        align="center"
        prop="oxidationRate"
        label="块段氧化率（%）"
      />
      <el-table-column
        align="center"
        prop="avgGrade"
        label="全月平均品位（%）"
      />
      <el-table-column
        align="center"
        prop="dressingGrade"
        label="选矿平均品位（%）"
      />
      <el-table-column
        align="center"
        prop="avgOxidationRate"
        label="全月平均氧化率（%）"
      />
      <el-table-column align="center" prop="beizhu" label="备注" />
      <el-table-column align="center" fixed="right" label="操作" width="150">
        <template #default="scope">
          <div style="display: flex; justify-content: center; gap: 8px">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row.recordID)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="removeDataById(scope.row.recordID)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="updatedicekeMiningrecordform"
      title="修改Mo品味信息"
      width="500"
    >
      <el-form :model="dicekeMiningrecordform">
        <el-form-item label="电产" :label-width="formLabelWidth">
          <el-select
            v-model="dicekeMiningrecordform.shovelID"
            placeholder="请选择电产"
          >
            <el-option
              v-for="shovel in shovelQuerry"
              :key="shovel.shovelID"
              :label="shovel.shovelCode"
              :value="shovel.shovelID"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="平盘" :label-width="formLabelWidth">
          <el-select
            v-model="dicekeMiningrecordform.plateID"
            placeholder="请选择平盘"
          >
            <el-option
              v-for="plateArea in plateAreaQuerry"
              :key="plateArea.plateID"
              :label="plateArea.plateRange"
              :value="plateArea.plateID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="采矿量（t）" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.totalMiningTon"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="金属量（#）" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.metalTon"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="块段采矿品位（%）" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.miningGrade"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="块段氧化率（%）" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.oxidationRate"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="全月平均品位（%）" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.avgGrade"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="选矿平均品位（%）" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.dressingGrade"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="全月平均氧化率（%）" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.avgOxidationRate"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="dicekeMiningrecordform.beizhu"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updatedicekeMiningrecordform = false">
            取消
          </el-button>
          <el-button type="primary" @click="updatePlateArea"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>