增加序号绑定，数据导出按选择导出

rain

2025-04-15 f61799441ca81bc63b0ce8b560c87cd56e22e4b2

增加序号绑定，数据导出按选择导出

 src/views/tickets/ticket.vue

@@ -28,8 +28,9 @@
          </div>

          <!-- 表格部分 -->
          <avue-crud v-model="tableData" :option="option" :data="tableData" v-model:page="page"
            @size-change="sizeChange" @current-change="handleCurrentChange" :table-loading="loading">
          <avue-crud ref="avueCrud" v-model="tableData" :option="option" :data="tableData" v-model:page="page"
            @size-change="sizeChange" @current-change="handleCurrentChange" :table-loading="loading"
            @selection-change="handleSelectionChange">
            <template #menu-left>
              <el-button
                v-if="activeTab === 'all' || activeTab === 'myTickets'"
@@ -449,6 +450,9 @@
      option: {
        border: true,
        stripe: true,
        selection: true, // 添加多选功能
        index: true,     // 保留序号功能
        indexLabel: '序号',
        menuWidth: 150,
        searchMenuSpan: 6,
        viewBtn: false,
@@ -458,18 +462,18 @@
        menu: true,
        page: true,
        column: [
          { label: "序号", prop: "id", width: 70 },
          // { label: "序号", prop: "id", width: 70 },
          { label: "工单编号", prop: "orderNumber", width: 150 },
          { label: "工单名称", prop: "orderName", width: 150 },
          { label: "所属单位", prop: "department", width: 100 },
          { label: "发起时间", prop: "startTime", width: 160 },
          { label: "关联算法", prop: "aiType", width: 165 },
          { label: "关联算法", prop: "aiType", width: 160 },
          { label: "工单类型", prop: "type", width: 108 },
          {
            label: "工单内容",
            prop: "content",
            slot: true,
            width: 250,
            width: 233,
            overHidden: true
          },
          { label: "创建人", prop: "creator", width: 100 },
@@ -550,6 +554,7 @@
      fixedStatuses: ["2", "0", "3", "4", "5"], // 固定的五个状态
      userNameToIdMap: {}, // 新增用户名到ID的映射
      workType: 0, // 新增：当前工单work_type
      selections: [], // 添加选中行数据数组
    };
  },
  created() {
@@ -1171,56 +1176,77 @@
    },

    async exportData() {
      // 修改导出方法，添加选中数据的处理
      try {
        this.loading = true;
        const currentTab = this.tabs.find(tab => tab.name === this.activeTab);

        // 使用与查询列表相同的参数构造逻辑
        const params = {
          word_order_type: this.filters.type || undefined,
          status: currentTab?.name === 'myTickets' ? undefined :
            this.filters.status !== "" ? Number(this.filters.status) :
              currentTab?.value, // 使用当前tab的状态值
          keyword: this.filters.keyword || undefined,
          dept_id: this.filters.department || undefined,
          start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
          end_date: this.filters.dateRange?.[1] ? this.formatDate(this.filters.dateRange[1]) : undefined,
          current: 1,
          size: 10
        };

        const response = await getList(params);
        if (!response?.data?.data?.records) {
          throw new Error('接口返回数据格式不正确');
        }

        const { records } = response.data.data;

        // 使用与查询列表相同的过滤逻辑
        let filteredRecords = records;
        if (currentTab?.name === 'myTickets') {
          filteredRecords = records.filter(item =>
            String(item.create_user_id) === String(item.user_id)
          );
        }

        const exportData = filteredRecords.map(item => {
          const longitude = Number(item.longitude) || 0;
          const latitude = Number(item.latitude) || 0;
          return {
            工单编号: item.event_num || '',
            工单名称: item.event_name || '',
            所属单位: item.dept_name || '',
            发起时间: item.create_time || '',
            关联算法: item.ai_types || '',
        
        // 如果有选中的数据，则只导出选中的数据
        let exportData = [];
        if (this.selections.length > 0) {
          exportData = this.selections.map(item => ({
            工单编号: item.orderNumber || '',
            工单名称: item.orderName || '',
            所属单位: item.department || '',
            发起时间: item.startTime || '',
            关联算法: item.aiType || '',
            工单内容: item.address || '',
            工单类型: this.types.find(t => t.value === item.event_dict_key)?.label || '',
            经纬度: (!isNaN(longitude) && !isNaN(latitude)) ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}` : '',
            创建人: item.create_user || '',
            处理人: item.update_user || '',
            工单状态: this.mapStatus(Number(item.status || 0))
            工单类型: item.type || '',
            经纬度: item.location ? `${item.location[0].toFixed(6)}, ${item.location[1].toFixed(6)}` : '',
            创建人: item.creator || '',
            处理人: item.handler || '',
            工单状态: this.mapStatus(item.status)
          }));
        } else {
          // 原有的导出全部数据的逻辑
          const currentTab = this.tabs.find(tab => tab.name === this.activeTab);

          // 使用与查询列表相同的参数构造逻辑
          const params = {
            word_order_type: this.filters.type || undefined,
            status: currentTab?.name === 'myTickets' ? undefined :
              this.filters.status !== "" ? Number(this.filters.status) :
                currentTab?.value, // 使用当前tab的状态值
            keyword: this.filters.keyword || undefined,
            dept_id: this.filters.department || undefined,
            start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
            end_date: this.filters.dateRange?.[1] ? this.formatDate(this.filters.dateRange[1]) : undefined,
            current: 1,
            size: 10
          };
        });

          const response = await getList(params);
          if (!response?.data?.data?.records) {
            throw new Error('接口返回数据格式不正确');
          }

          const { records } = response.data.data;

          // 使用与查询列表相同的过滤逻辑
          let filteredRecords = records;
          if (currentTab?.name === 'myTickets') {
            filteredRecords = records.filter(item =>
              String(item.create_user_id) === String(item.user_id)
            );
          }

          exportData = filteredRecords.map(item => {
            const longitude = Number(item.longitude) || 0;
            const latitude = Number(item.latitude) || 0;
            return {
              工单编号: item.event_num || '',
              工单名称: item.event_name || '',
              所属单位: item.dept_name || '',
              发起时间: item.create_time || '',
              关联算法: item.ai_types || '',
              工单内容: item.address || '',
              工单类型: this.types.find(t => t.value === item.event_dict_key)?.label || '',
              经纬度: (!isNaN(longitude) && !isNaN(latitude)) ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}` : '',
              创建人: item.create_user || '',
              处理人: item.update_user || '',
              工单状态: this.mapStatus(Number(item.status || 0))
            };
          });
        }

        if (exportData.length === 0) {
          this.$message.warning('没有数据可供导出');
@@ -1547,6 +1573,36 @@
          this.$message.error(error.message || '删除失败，请稍后重试');
        }
      }).catch(() => { });
    },

    // 添加选择变化处理方法
    handleSelectionChange(selection) {
      this.selections = selection;
      console.log('已选择的行：', selection);
    },

    // 添加全选方法
    handleSelectAll(val) {
      this.$refs.avueCrud.toggleSelection(val);
    },

    // 添加单行选择方法
    handleSelect(selection, row) {
      console.log('选中行变化：', selection, row);
    },

    // 如果需要手动选中某些行
    setSelection(rows) {
      this.$nextTick(() => {
        rows.forEach(row => {
          this.$refs.avueCrud.toggleSelection(row, true);
        });
      });
    },

    // 清空选择
    clearSelection() {
      this.$refs.avueCrud.clearSelection();
    },
  },
};
@@ -2039,5 +2095,4 @@
    }
  }
}
</style>
```
</style>