AcidificationModel/pages/Visualizatio/Visualizatio.js

Page({
  data: {
    isEditing: false,
    tableName: 'current_reduce', // 确保这个表名在页面中是有效的
    fileFormat: 'excel', // 默认是 Excel 格式
    shoopingtext: "", // 搜索框内容
    filteredRows: [], // 表格过滤后的数据
    rows: [], // 所有表格数据
    showModal: false, // 控制底部编辑删除弹窗的显示与否
    showAddModal: false, // 控制新增数据弹窗的显示与否
    currentRow: null, // 当前选中的表格行
    // 新增数据弹窗的输入框内容
    newData: {
      id: "",
      Q_over_b: "",
      pH: "",
      OM: "",
      CL: "",
      H: "",
      Al: ""
    },
    // 中文表头内容，动态生成
    tableHeaders: [
      "序号", "比值", "酸碱度", "有机质含量", "氯离子含量",
      "氢离子含量","铝离子含量"
    ]
  },

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

  LoadData: function() {
    wx.request({
      url: 'http://localhost:5000/tables',
      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 {
            'id': row[0],
            'Q_over_b':  row[1],
            'pH': row[2],
            'OM': row[3],
            'CL': row[4],
            'H': row[5],
            'Al': row[6]
          };
        });

        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
    });
  },

  // 下载模板函数
  onDownloadTemplate: function() {
    wx.showLoading({
      title: '下载中...',
    });
  
    const tableName = 'current_reduce';  // 或者根据需要选择表名
    const format = 'excel';  // 或者 'csv' 作为模板格式
  
    wx.request({
      url: `http://localhost:5000/download_template?table=${tableName}&format=${format}`,
      method: 'GET',
      responseType: 'arraybuffer',  // 处理二进制文件
      success: (res) => {
        wx.hideLoading();
  
        // 确保响应体返回的数据是有效的文件
        if (res.statusCode === 200) {
          const fileType = format === 'excel' ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' : 'text/csv';
  
          // 生成唯一的文件名，添加时间戳以确保唯一性
          const timestamp = new Date().getTime();
          const fileName = `${tableName}_template_${timestamp}.${format}`;
          const filePath = wx.env.USER_DATA_PATH + '/' + fileName;
  
          // 使用文件系统管理器保存文件
          const fs = wx.getFileSystemManager();
          fs.writeFile({
            filePath: filePath,
            data: res.data,
            encoding: 'binary',
            success: () => {
              wx.showToast({
                title: '文件已保存',
                icon: 'success'
              });
              // 触发文件下载
              wx.openDocument({
                filePath: filePath,
                fileType: format === 'excel' ? 'xlsx' : 'csv',
                success: () => {
                  console.log('文件打开成功');
                },
                fail: (error) => {
                  console.error('文件打开失败', error);
                  wx.showToast({
                    title: '打开文件失败',
                    icon: 'none'
                  });
                }
              });
            },
            fail: (err) => {
              wx.showToast({
                title: '文件保存失败',
                icon: 'none'
              });
              console.error('文件保存失败', err);
            }
          });
        } else {
          wx.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },  

   // 导出数据按钮点击事件
   onExport: function () {
    const tableName = this.data.tableName;
    const fileFormat = this.data.fileFormat;

    wx.showLoading({
      title: '导出中...',
    });

    // 向后端发送请求，获取表格数据并导出
    wx.request({
      url: `http://localhost:5000/export_data?table=${tableName}&format=${fileFormat}`,
      method: 'GET',
      responseType: 'arraybuffer',  // 处理二进制文件
      success: (res) => {
        wx.hideLoading();

        // 确保响应体返回的数据是有效的文件
        if (res.statusCode === 200) {
          const fileName = `${tableName}_data.${fileFormat === 'excel' ? 'xlsx' : 'csv'}`;
          const filePath = wx.env.USER_DATA_PATH + '/' + fileName;

          // 保存文件到本地
          wx.getFileSystemManager().writeFile({
            filePath: filePath,
            data: res.data,
            encoding: 'binary',
            success: () => {
              wx.showToast({
                title: '文件已保存',
                icon: 'success'
              });

              // 打开已保存的文件
              wx.openDocument({
                filePath: filePath,
                fileType: fileFormat === 'excel' ? 'xlsx' : 'csv',
                success: () => {
                  console.log('文件打开成功');
                },
                fail: (error) => {
                  console.error('文件打开失败', error);
                  wx.showToast({
                    title: '打开文件失败',
                    icon: 'none'
                  });
                }
              });
            },
            fail: (err) => {
              wx.showToast({
                title: '文件保存失败',
                icon: 'none'
              });
              console.error('文件保存失败', err);
            }
          });
        } else {
          wx.showToast({
            title: '导出失败，请重试',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },

  // 导入数据功能
  onImport: function () {
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      extension: ['xlsx', 'csv'], // 允许上传的文件类型
      success: (res) => {
        const filePath = res.tempFiles[0].path; // 获取文件临时路径
        const fileName = res.tempFiles[0].name;

        wx.showLoading({
          title: '上传中...',
        });

        // 上传文件到后端
        wx.uploadFile({
          url: 'http://localhost:5000/import_data', // 后端处理导入的接口
          filePath: filePath,
          name: 'file',
          formData: {
            table: this.data.tableName, // 表名，后端根据需要解析数据
            fileName: fileName
          },
          success: (res) => {
            wx.hideLoading();
            const responseData = JSON.parse(res.data);

            if (responseData.success) {
              wx.showToast({
                title: '导入成功',
                icon: 'success'
              });

              // 重新加载数据
              this.LoadData();
            } else {
              wx.showToast({
                title: '导入失败，请检查文件格式',
                icon: 'none'
              });
            }
          },
          fail: (err) => {
            wx.hideLoading();
            wx.showToast({
              title: '导入失败，请重试',
              icon: 'none'
            });
            console.error('文件上传失败:', err);
          }
        });
      },
      fail: (err) => {
        console.error('文件选择失败:', err);
      }
    });
  },

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

  // 输入框绑定：更新新增数据的对应字段
  onInputQ_over_b: function(e) {
    this.setData({
      'newData.Q_over_b': e.detail.value
    });
  },
  onInputpH: function(e) {
    this.setData({
      'newData.pH': e.detail.value
    });
  },
  onInputOM: function(e) {
    this.setData({
      'newData.OM': e.detail.value
    });
  },
  onInputCL: function(e) {
    this.setData({
      'newData.CL': e.detail.value
    });
  },
  onInputH: function(e) {
    this.setData({
      'newData.H': e.detail.value
    });
  },
  onInputAl: function(e) {
    this.setData({
      'newData.Al': 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: 'current_reduce',
        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: 'current_reduce',
      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 = `id=${row.id}`;  // 使用条件进行删除
  
    // 发送 DELETE 请求
    wx.request({
      url: 'http://127.0.0.1:5000/delete_item',  // 后端接口地址
      method: 'POST',  // 使用 POST 请求
      data: {
        table: 'current_reduce',  // 目标表
        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  // 显示编辑删除弹窗
    });
  }
});