AcidificationModel/pages/Visualization/Visualization.js

Page({
  data: {
    shoopingtext: "", // 搜索框内容
    filteredRows: [], // 表格过滤后的数据
    rows: [], // 所有表格数据
    showModal: false, // 控制底部编辑删除弹窗的显示与否
    showAddModal: false, // 控制新增数据弹窗的显示与否
    currentRow: null, // 当前选中的表格行
    // 新增数据弹窗的输入框内容
    newData: {
      OM: "",
      CL: "",
      CEC: "",
      Hplus: "",
      HN: "",
      Al3plus: "",
      Alumina: "",
      IronOxides: "",
      DeltaPH: "",
      Day0PH: ""
    }
  },

  // 页面加载时获取表格数据
  onLoad: function() {
    wx.request({
      url: 'http://localhost:5000/tables',
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        table: 'Soil_samples'
      },
      success: (res) => {
        console.log('后端返回数据:', res.data.rows); // 打印返回数据，确认格式
        
        if (res.data && Array.isArray(res.data.rows)) {
          const rows = res.data.rows.map(row => {
            return {
              '0 day pH': row[0],
              'OM g/kg': row[1],
              'CL g/kg': row[2],
              'CEC cmol/kg': row[3],
              'H+ cmol/kg': row[4],
              'HN mg/kg': row[5],
              'Al3plus': row[6],
              'Free alumina g/kg': row[7],
              'Free iron oxides g/kg': row[8],
              '105 day pH': row[9],
              'Collection location': row[10],
              'Collection Date': row[11]
            };
          });
  
          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: "",
        Hplus: "",
        HN: "",
        Al3plus: "",
        Alumina: "",
        IronOxides: "",
        DeltaPH: "",
        Day0PH: ""
      }
    });
    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.Hplus': e.detail.value
    });
  },
  onInputHN: function(e) {
    this.setData({
      'newData.HN': e.detail.value
    });
  },
  onInputAl3plus: function(e) {
    this.setData({
      'newData.Al3plus': e.detail.value
    });
  },
  onInputAlumina: function(e) {
    this.setData({
      'newData.Alumina': e.detail.value
    });
  },
  onInputIronOxides: function(e) {
    this.setData({
      'newData.IronOxides': e.detail.value
    });
  },
  onInputDeltaPH: function(e) {
    this.setData({
      'newData.DeltaPH': e.detail.value
    });
  },
  onInputDay0PH: function(e) {
    this.setData({
      'newData.Day0PH': 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: 'your_table_name',
        item: newRow
      },
      success: (res) => {
        if (res.data.success) {
          this.setData({
            rows: [...this.data.rows, newRow],
            showAddModal: false
          });
          wx.showToast({
            title: '新增成功',
            icon: 'success'
          });
        } else {
          wx.showToast({
            title: '新增失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },

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

  // 编辑按钮点击
  onEdit: function() {
    const updatedRow = this.data.currentRow.row;  // 获取当前编辑的行数据
    wx.request({
      url: 'http://localhost:5000/update_item',
      method: 'PUT',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        table: 'your_table_name',
        item: updatedRow
      },
      success: (res) => {
        if (res.data.success) {
          let rows = [...this.data.rows];
          rows[this.data.currentRow.index] = updatedRow;  // 更新数据
          this.setData({
            rows: rows,
            showModal: false
          });
          wx.showToast({
            title: '更新成功',
            icon: 'success'
          });
        } else {
          wx.showToast({
            title: '更新失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },

  // 删除按钮点击
  onDelete: function() {
    const { index, row } = this.data.currentRow;
    const condition = `id=${row.id}`;

    wx.request({
      url: 'http://localhost:5000/delete_item',
      method: 'DELETE',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        table: 'your_table_name',
        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'
          });
        } else {
          wx.showToast({
            title: '删除失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },

  // 取消编辑删除弹窗
  onCancel: function() {
    this.setData({
      showModal: 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  // 显示编辑删除弹窗
    });
  }
});