AcidificationModel/pages/Visualization/Visualization.js

Page({
  data: {
    isEditing: false,
    shoopingtext: "", // 搜索框内容
    filteredRows: [], // 表格过滤后的数据
    rows: [], // 所有表格数据
    showModal: false, // 控制底部编辑删除弹窗的显示与否
    showAddModal: false, // 控制新增数据弹窗的显示与否
    currentRow: null, // 当前选中的表格行
    // 新增数据弹窗的输入框内容
    newData: {
      Sample_ID: "",
      OM: "",
      CL: "",
      CEC: "",
      H: "",
      HN: "",
      Al: "",
      free_alumina: "",
      free_iron_oxides: "",
      pH: "",
      final_pH: "",
      Collection_location: "",
      Collection_date: ""
    },
    // 中文表头内容，动态生成
    tableHeaders: [
      "序号", "0天 pH", "有机质含量 (g/kg)", "土壤粘粒重量 (g/kg)", "阳离子交换量 (cmol/kg)", 
      "氢离子含量 (cmol/kg)", "铵离子含量 (mg/kg)", "铝离子含量 (cmol/kg)", "游离氧化铝 (g/kg)", 
      "游离氧化铁 (g/kg)", "105天 pH", "采集位置", "采集日期"
    ]
  },

  // 页面加载时获取表格数据
  onLoad: function() {
    this.LoadData();
  },  

  LoadData: function() {
    wx.request({
      url: 'http://localhost:5000/table',
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        table: 'current_reduce'
    },
    success: (res) => {
      console.log('后端返回数据:', res.data.rows); // 打印返回数据，确认格式
      
      if (res.data && Array.isArray(res.data.rows)) {
        const rows = res.data.rows.map(row => {
          return {
            'Sample_ID': row[0],
            'pH': row[1],
            'OM': row[2],
            'CL': row[3],
            'CEC': row[4],
            'H': row[5],
            'HN': row[6],
            'Al': row[7],
            'free_alumina': row[8],
            'free_iron_oxides': row[9],
            'final_pH': row[10],
            'Collection_location': row[11],
            'Collection_date': row[12]
          };
        });

        this.setData({
          rows: rows,
          filteredRows: rows
        });
      } else {
        wx.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      wx.showToast({
        title: '请求失败，请重试',
        icon: 'none'
      });
      console.error('请求失败:', err);
    }
    });
  },
  // 搜索框绑定
  shoppinginput: function(e) {
    this.setData({
      shoopingtext: e.detail.value
    });
  },

  // 搜索功能：根据输入内容过滤表格数据
  search: function() {
    const searchText = this.data.shoopingtext.toLowerCase();
    const filteredRows = this.data.rows.filter(item => {
      return Object.values(item).some(value =>
        String(value).toLowerCase().includes(searchText)
      );
    });
    this.setData({
      filteredRows: filteredRows
    });
  },

  // 新增按钮点击，显示新增弹窗
  onAdd: function() {
    console.log("新增按钮被点击了");  // 调试日志
    this.setData({
      showAddModal: true,
      newData: { // 重置新增数据
        OM: "",
        CL: "",
        CEC: "",
        H: "",
        HN: "",
        Al: "",
        free_alumina: "",
        free_iron_oxides: "",
        pH: "",
        final_pH: "",
        Collection_location: "",
        Collection_date: ""
      }
    });
    console.log("showAddModal: ", this.data.showAddModal);  // 确认数据更新
  },

  // 输入框绑定：更新新增数据的对应字段
  onInputOM: function(e) {
    this.setData({
      'newData.OM': e.detail.value
    });
  },
  onInputCL: function(e) {
    this.setData({
      'newData.CL': e.detail.value
    });
  },
  onInputCEC: function(e) {
    this.setData({
      'newData.CEC': e.detail.value
    });
  },
  onInputHplus: function(e) {
    this.setData({
      'newData.H': e.detail.value
    });
  },
  onInputHN: function(e) {
    this.setData({
      'newData.HN': e.detail.value
    });
  },
  onInputAl3plus: function(e) {
    this.setData({
      'newData.Al': e.detail.value
    });
  },
  onInputAlumina: function(e) {
    this.setData({
      'newData.free_alumina': e.detail.value
    });
  },
  onInputIronOxides: function(e) {
    this.setData({
      'newData.free_iron_oxides': e.detail.value
    });
  },
  onInputinitPH: function(e) {
    this.setData({
      'newData.pH': e.detail.value
    });
  },
  onInputfinalPH: function(e) {
    this.setData({
      'newData.final_pH': e.detail.value
    });
  },
  onInputlocation: function(e) {
    this.setData({
      'newData.Collection_location': e.detail.value
    });
  },
  onBindDateChange: function(e) {
    this.setData({
      'newData.Collection_date': e.detail.value
    });
  },

  // 提交新增数据
  onSubmitAdd: function() {
    const newRow = this.data.newData;
    if (Object.values(newRow).some(value => !value)) {
      wx.showToast({
        title: '所有字段都必须填写！',
        icon: 'none'
      });
      return;
    }

    wx.request({
      url: 'http://localhost:5000/add_item',
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        table: 'Soil_samples',
        item: newRow
      },
      success: (res) => {
        if (res.data.success) {
          this.setData({
            rows: [...this.data.rows, newRow],
            showAddModal: false
          });
          wx.showToast({
            title: '新增成功',
            icon: 'success'
          });
          this.LoadData();
        } else {
          wx.showToast({
            title: '新增失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },

  // 取消新增数据
  onCancel: function() {
    this.setData({
      showAddModal: false
    });
  },

  // 编辑按钮点击
onEdit: function(e) {
  const { index, row } = this.data.currentRow;
  console.log(row);

  // 检查 currentRow 是否有定义并且包含数据
  if (row) {
    this.setData({
      isEditing: true,
      showModal: false,
      showAddModal: true, // 显示编辑弹窗
      newData: row, // 将当前行的数据复制到 newData 中，以便在表单中显示
      currentRow: { index: index, row: row } // 保存当前行的信息，以便在提交时使用
    });
  } else {
    wx.showToast({
      title: '数据加载失败，请重试',
      icon: 'none'
    });
  }
},

  // 提交编辑数据
onSubmitEdit: function() {
  const updatedRow = this.data.newData;
  const { index } = this.data.currentRow;

  if (Object.values(updatedRow).some(value => !value)) {
    wx.showToast({
      title: '所有字段都必须填写！',
      icon: 'none'
    });
    return;
  }

  wx.request({
    url: 'http://localhost:5000/update_item',
    method: 'PUT',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      table: 'Soil_samples',
      item: updatedRow
    },
    success: (res) => {
      if (res.data.success) {
        // 更新成功后，更新前端数据
        let rows = this.data.rows;
        rows[index] = updatedRow; // 用更新后的数据替换旧数据
        this.setData({
          rows: rows,
          showAddModal: false // 关闭编辑弹窗
        });
        wx.showToast({
          title: '编辑成功',
          icon: 'success'
        });
        this.LoadData();
      } else {
        wx.showToast({
          title: '编辑失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      wx.showToast({
        title: '请求失败，请重试',
        icon: 'none'
      });
      console.error('请求失败:', err);
    }
  });
},

  // 删除按钮点击
  onDelete: function() {
    const { index, row } = this.data.currentRow;
    console.log("当前选中行的数据:", this.data.currentRow);
  
    const condition = `Sample_ID=${row.Sample_ID}`;  // 使用条件进行删除
  
    // 发送 DELETE 请求
    wx.request({
      url: 'http://127.0.0.1:5000/delete_item',  // 确保使用正确的URL
      method: 'DELETE',  // 使用 DELETE 请求方法
      header: {
        'Content-Type': 'application/json'  // 请求类型是 JSON
      },
      data: {
        table: 'Soil_samples',  // 目标表
        condition: condition  // 删除条件
      },
      success: (res) => {
        if (res.data.success) {
          // 删除成功后，更新前端数据
          let rows = this.data.rows;
          rows.splice(index, 1);  // 从数据中删除选中的行
          this.setData({
            rows: rows,
            showModal: false  // 隐藏编辑删除弹窗
          });
          wx.showToast({
            title: '删除成功',
            icon: 'success'
          });
  
          // 重新获取数据
          this.LoadData();  // 重新加载数据
        } else {
          wx.showToast({
            title: '删除失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },  

  onSubmit: function() {
    if (this.data.isEditing) {
      this.onSubmitEdit();
    } else {
      this.onSubmitAdd();
    }
  },
  // 取消编辑删除弹窗
  onCancel: function() {
    if (this.data.showModal) {
      this.setData({
        showModal: false
      });
    } else {
      this.setData({
        showAddModal: false
      });
    }
  },

  // 行点击事件：显示编辑和删除弹窗
  onRowClick: function(e) {
    const index = e.currentTarget.dataset.index;
    const row = e.currentTarget.dataset.row;

    this.setData({
      currentRow: { index: index, row: row },
      showModal: true  // 显示编辑删除弹窗
    });
  }
});