给每条数据加入一个查看按钮，点击此按钮弹出一个弹窗，弹窗内显示这条数据的详细内容并且可以编辑和提交

为了实现每条数据添加一个“查看”按钮，并且点击该按钮能够弹出一个弹窗以显示并编辑这条数据的详细内容，你需要对现有代码进行如下修改：

### 1. 修改模板部分
在表格的每一行中添加一个“查看”按钮，并定义一个模态框组件来显示详细信息。

#### 模板部分

<template>
  <view class="container">
    <!-- Tab 切换按钮 -->
    <view class="tab-bar">
      <view class="tab-item" @click="currentTab = 'tab1'" :class="{ active: currentTab === 'tab1' }">日常检查</view>
      <view class="tab-item" @click="currentTab = 'tab2'" :class="{ active: currentTab === 'tab2' }">专项检查</view>
    </view>
    <text>任务ID：{{ taskId }}</text>

    <!-- Tab 内容区域 -->
    <view class="tab-content">
      <view v-if="currentTab === 'tab1'" class="tab-page">
        <view class="filter-bar">
          <!-- ... (类似的过滤器按钮) ... -->
        </view>
        <view class="table-wrapper">
          <table border="1" width="100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>任务状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tab1Data.rows" :key="index">
                <td>{{ item.Main_task_Nopri }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.status }}</td>
                <td><button @click="showDetail(item)">查看</button></td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>
      <view v-if="currentTab === 'tab2'" class="tab-page">
        <!-- 类似的结构，但针对另一个接口的数据 -->
        <view class="filter-bar">
          <!-- ... (类似的过滤器按钮) ... -->
        </view>
        <view class="table-wrapper">
          <table border="1" width="100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>任务状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in anotherData.rows" :key="index">
                <td>{{ item.Main_task_Nopri }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.status }}</td>
                <td><button @click="showDetail(item)">查看</button></td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>
    </view>

    <!-- 弹窗组件 -->
    <view v-if="isModalVisible" class="modal">
      <view class="modal-content">
        <h3>详细信息</h3>
        <form @submit.prevent="updateItem">
          <label for="id">ID:</label>
          <input type="text" id="id" v-model="selectedItem.Main_task_Nopri" readonly />
          <label for="name">姓名:</label>
          <input type="text" id="name" v-model="selectedItem.name" />
          <label for="status">任务状态:</label>
          <input type="text" id="status" v-model="selectedItem.status" />
          <button type="submit">保存</button>
          <button @click="closeModal">关闭</button>
        </form>
      </view>
    </view>
  </view>
</template>

### 2. 修改脚本部分
在 Vue 组件的 `data` 和 `methods` 中添加相应的逻辑。

#### 脚本部分

<script>
import request from '@/utils/request';
import { getToken } from '@/utils/auth';

export default {
  data() {
    return {
      currentTab: 'tab1',
      tab1Data: {
        status: null,
        rows: [],
        originalRows: []
      },
      taskId: '',
      anotherData: {
        status: null,
        rows: []
      },
      isModalVisible: false,
      selectedItem: {}
    };
  },
  methods: {
    fetchTab1Data() {
      request({
        url: '/api/check_carryout_record_daily/getPageData',
        method: 'POST',
        header: {
          'content-type': 'application/json',
          'Authorization': `Bearer ${getToken()}`
        },
        data: {},
        dataType: 'json'
      }).then(response => {
        this.tab1Data = response;
      }).catch(error => {
        console.error(error);
        uni.showToast({ title: '请求失败', icon: 'none' });
      });
    },
    fetchTab2Data() {
      request({
        url: '/api/check_carryout_record/getPageData',
        method: 'POST',
        header: {
          'content-type': 'application/json',
          'Authorization': `Bearer ${getToken()}`
        },
        dataType: 'json'
      }).then(response => {
        this.anotherData = response;
      }).catch(error => {
        console.error(error);
        uni.showToast({ title: '请求失败', icon: 'none' });
      });
    },
    showDetail(item) {
      this.selectedItem = { ...item };
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    },
    updateItem() {
      // 这里假设有一个更新接口，将 selectedItem 发送到服务器
      request({
        url: '/api/update_item',
        method: 'POST',
        header: {
          'content-type': 'application/json',
          'Authorization': `Bearer ${getToken()}`
        },
        data: this.selectedItem,
        dataType: 'json'
      }).then(response => {
        // 更新成功后的处理
        this.closeModal();
        this.fetchTab1Data(); // 重新加载数据
        uni.showToast({ title: '更新成功', icon: 'success' });
      }).catch(error => {
        console.error(error);
        uni.showToast({ title: '更新失败', icon: 'none' });
      });
    }
  },
  onLoad(options) {
    if (options.id) {
      this.taskId = decodeURIComponent(options.id);
    }
    this.fetchTab1Data();
  },
  mounted() {}
};
</script>

### 3. 修改样式部分
添加一些基本的样式来使弹窗看起来更好。

#### 样式部分

<style lang="scss">
.container {
  // ... (其他样式)
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #f1f1f1;
  padding: 10px 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
}

.tab-item.active {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}

.tab-content {
  // ... (其他样式，确保 tab 页内容有足够的空间显示)
}

.tab-page {
  // ... (每个 tab 页的样式，可以根据需要调整)
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
}

.modal-content h3 {
  margin-top: 0;
}

.modal-content label {
  display: block;
  margin-bottom: 5px;
}

.modal-content input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.modal-content button {
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-content button[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

.modal-content button[type="submit"]:hover {
  background-color: #45a049;
}

.modal-content button[type="button"] {
  background-color: #f44336;
  color: white;
}

.modal-content button[type="button"]:hover {
  background-color: #e74c3c;
}
</style>

通过以上步骤，你可以在每条数据上添加一个“查看”按钮，并且点击该按钮会弹出一个模态框，显示并允许编辑这条数据的详细内容。保存后，数据将被发送到服务器进行更新。