Bootstrap

导出tabla页面 

<template>  
  <div>  
    <el-table  
      ref="multipleTable"  
      :data="tableData"  
      tooltip-effect="dark"  
      style="width: 100%"  
      border  
      @selection-change="handleSelectionChange"  
    >  
      <el-table-column type="selection" width="55"> </el-table-column>  
      <el-table-column type="index" label="序号" width="50"></el-table-column>  
      <el-table-column  
        prop="id"  
        label="ID"  
        width="100"  
      ></el-table-column>  
      <el-table-column  
        prop="serviceLocation"  
        label="服务地点"  
        width="180"  
      ></el-table-column>  
      <!-- 其他列 -->  
    </el-table>  
    <el-button @click="getCheckedIds">导出</el-button>  
  </div>  
</template>  
  
<script>  
import excel from './excel'
export default {  
  data() {  
    return {  
      cos:[],
      tableData: [  
        { id: 1, serviceLocation: '地点A' },  
        { id: 2, serviceLocation: '地点B' },  
        { id: 3, serviceLocation: '地点C' },  
        // ... 其他数据  
      ],  
      multipleSelection: [], // 存储被选中的行的数据  
    };  
  },  
  methods: {  
    handleSelectionChange(val) {  
      this.multipleSelection = val;  
    },  
    getCheckedIds() {  
      const checkedIds = this.multipleSelection.map(row => row.id);  
      this.cos = checkedIds

      const params = {
              title: ['订单号', '订单来源', '车牌号'], 
              key: ['id', 'serviceLocation', 'resolvedByThreeMembers'],
              data: this.multipleSelection, // 数据源
              autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
              filename: '清单'            
            }
            excel.exportArrayToExcel(params)
      console.log('勾选项的ID:',this.multipleSelection);  
      // 这里可以进一步处理，比如发送到服务器等  
    },  
  },  
};  
</script>
<template>
  <div class="nav">
    <!-- 搜索 -->
    <!-- <div class="title">
      <p>
        <span class="text">时间:</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          class="input"
        ></el-input>
      </p>
      <p>
        <span class="text">服务:</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          class="input"
        ></el-input>
      </p>
    </div> -->

    <!-- 按钮 -->
    <div class="but">
      <el-button type="primary" @click="add()">添加</el-button>

      <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
      <el-button type="primary" @click="daoru()">导入</el-button>
      <el-button type="primary" @click="exportExcel">导出</el-button>
    </div>

    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="50px"></el-table-column>

      <el-table-column
        prop="serviceLocation"
        label="服务地点"
        width="150"
      ></el-table-column>
      <el-table-column prop="serviceCategory" label="服务大类" width="120">
      </el-table-column>
      <el-table-column
        prop="serviceContent"
        label="服务内容"
        width="120"
        class-name="ellipsis-column"
      ></el-table-column>
      <el-table-column prop="department" label="部门" width="120">
      </el-table-column>
      <el-table-column prop="serviceType" label="服务类型" width="150">
      </el-table-column>
      <el-table-column prop="serviceDate" label="服务日期" width="150">
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="150">
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="150">
      </el-table-column>
      <el-table-column prop="duration" label="用时" width="150">
      </el-table-column>
      <el-table-column
        prop="serviceCalls"
        label="服务台次"
        width="150"
        class-name="ellipsis-column"
      >
      </el-table-column>
      <el-table-column
        prop="servicePerson"
        label="服务人员"
        width="150"
        class-name="ellipsis-column"
      >
      </el-table-column>
      <el-table-column
        prop="resolvedByThreeMembers"
        label="三员解决"
        width="150"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="browses(scope.row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="showDeleteDialog(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 删除 -->

    <el-dialog
      :visible.sync="deletedata"
      title="删除信息"
      @close="deletedata = false"
    >
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="rules"
        ref="editForm"
      >
        <p>确定删除吗？</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletedata = false">取消</el-button>
        <el-button type="primary" @click="handleDelete(currentRowData)"
          >删除</el-button
        >
      </span>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog
      :visible.sync="dialogVisible"
      title="编辑信息"
      @close="dialogVisible = false"
    >
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="服务地点" prop="serviceLocation">
          <el-radio-group v-model="editForm.serviceLocation">
            <el-radio label="委机关"></el-radio>
            <el-radio label="巡视办"></el-radio>
            <el-radio label="派驻机构"></el-radio>
            <el-radio label="吉莲大厦"></el-radio>
            <el-radio label="长春净月基地"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务大类" prop="serviceCategory">
          <el-radio-group v-model="editForm.serviceCategory">
            <el-radio label="技术"></el-radio>
            <el-radio label="管理"></el-radio>
            <el-radio label="设备"></el-radio>
            <el-radio label="服务"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceContent">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="editForm.serviceContent"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-radio-group v-model="editForm.department">
            <el-radio label="SJW"></el-radio>
            <el-radio label="长春市JW"></el-radio>
            <el-radio label="通化市JW"></el-radio>
            <el-radio label="白山市JW"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceType">
          <el-radio-group v-model="editForm.serviceType">
            <el-radio label="单机外设"></el-radio>
            <el-radio label="实施指导"></el-radio>
            <el-radio label="门禁系统"></el-radio>
            <el-radio label="软件开发"></el-radio>
            <el-radio label="网络维护"></el-radio>
            <el-radio label="厂家对接"></el-radio>
            <br />
            <el-radio label="软件维护"></el-radio>
            <el-radio label="文本文档"></el-radio>
            <el-radio label="自主学习"></el-radio>
            <el-radio label="会议调试"></el-radio>
            <el-radio label="本地会议"></el-radio>
            <el-radio label="视频会议"></el-radio>
            <br />
            <el-radio label="其他工作"></el-radio>
            <el-radio label="机房巡检"></el-radio>
            <el-radio label="主机维护"></el-radio>
            <el-radio label="存储维护"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="服务日期" prop="serviceDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.serviceDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.startTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.endTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="服务台次" prop="serviceCalls">
          <el-input v-model="editForm.serviceCalls"></el-input>
        </el-form-item>

        <el-form-item label="服务人员" prop="servicePerson">
          <el-input v-model="editForm.servicePerson"></el-input>
        </el-form-item>

        <el-form-item label="三员解决" prop="resolvedByThreeMembers">
          <el-radio-group v-model="editForm.resolvedByThreeMembers">
            <el-radio label="系统管理员"></el-radio>
            <el-radio label="安全保密员"></el-radio>
            <el-radio label="安全审计员"></el-radio>
            <el-radio label="运维团队处理"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit('editForm')">保存</el-button>
      </span>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :visible.sync="browse" title="查看信息" @close="browse = false">
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="服务地点" prop="serviceLocation">
          <el-radio-group v-model="editForm.serviceLocation">
            <el-radio label="委机关" disabled></el-radio>
            <el-radio label="巡视办" disabled></el-radio>
            <el-radio label="派驻机构" disabled></el-radio>
            <el-radio label="吉莲大厦" disabled></el-radio>
            <el-radio label="长春净月基地" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务大类" prop="serviceCategory">
          <el-radio-group v-model="editForm.serviceCategory">
            <el-radio label="技术" disabled></el-radio>
            <el-radio label="管理" disabled></el-radio>
            <el-radio label="设备" disabled></el-radio>
            <el-radio label="服务" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceContent">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            :disabled="true"
            v-model="editForm.serviceContent"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-radio-group v-model="editForm.department">
            <el-radio label="SJW" disabled></el-radio>
            <el-radio label="长春市JW" disabled></el-radio>
            <el-radio label="通化市JW" disabled></el-radio>
            <el-radio label="白山市JW" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceType">
          <el-radio-group v-model="editForm.serviceType">
            <el-radio label="单机外设" disabled></el-radio>
            <el-radio label="实施指导" disabled></el-radio>
            <el-radio label="门禁系统" disabled></el-radio>
            <el-radio label="软件开发" disabled></el-radio>
            <el-radio label="网络维护" disabled></el-radio>
            <el-radio label="厂家对接" disabled></el-radio>
            <br />
            <el-radio label="软件维护" disabled></el-radio>
            <el-radio label="文本文档" disabled></el-radio>
            <el-radio label="自主学习" disabled></el-radio>
            <el-radio label="会议调试" disabled></el-radio>
            <el-radio label="本地会议" disabled></el-radio>
            <el-radio label="视频会议" disabled></el-radio>
            <br />
            <el-radio label="其他工作" disabled></el-radio>
            <el-radio label="机房巡检" disabled></el-radio>
            <el-radio label="主机维护" disabled></el-radio>
            <el-radio label="存储维护" disabled></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="服务日期" prop="serviceDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.serviceDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.startTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.endTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="服务台次" prop="serviceCalls">
          <el-input v-model="editForm.serviceCalls" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="服务人员" prop="servicePerson">
          <el-input
            v-model="editForm.servicePerson"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="三员解决" prop="resolvedByThreeMembers">
          <el-radio-group v-model="editForm.resolvedByThreeMembers">
            <el-radio label="系统管理员" disabled></el-radio>
            <el-radio label="安全保密员" disabled></el-radio>
            <el-radio label="安全审计员" disabled></el-radio>
            <el-radio label="运维团队处理" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="browse = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 新增  -->
    <el-dialog :visible.sync="adddialogVisible" title="新增信息">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="服务地点" prop="serviceLocation">
          <el-radio-group v-model="form.serviceLocation">
            <el-radio label="委机关"></el-radio>
            <el-radio label="巡视办"></el-radio>
            <el-radio label="派驻机构"></el-radio>
            <el-radio label="吉莲大厦"></el-radio>
            <el-radio label="长春净月基地"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务大类" prop="serviceCategory">
          <el-radio-group v-model="form.serviceCategory">
            <el-radio label="技术"></el-radio>
            <el-radio label="管理"></el-radio>
            <el-radio label="设备"></el-radio>
            <el-radio label="服务"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceContent">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.serviceContent"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-radio-group v-model="form.department">
            <el-radio label="SJW"></el-radio>
            <el-radio label="长春市JW"></el-radio>
            <el-radio label="通化市JW"></el-radio>
            <el-radio label="白山市JW"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceType">
          <el-radio-group v-model="form.serviceType">
            <el-radio label="单机外设"></el-radio>
            <el-radio label="实施指导"></el-radio>
            <el-radio label="门禁系统"></el-radio>
            <el-radio label="软件开发"></el-radio>
            <el-radio label="网络维护"></el-radio>
            <el-radio label="厂家对接"></el-radio>
            <br />
            <el-radio label="软件维护"></el-radio>
            <el-radio label="文本文档"></el-radio>
            <el-radio label="自主学习"></el-radio>
            <el-radio label="会议调试"></el-radio>
            <el-radio label="本地会议"></el-radio>
            <el-radio label="视频会议"></el-radio>
            <br />
            <el-radio label="其他工作"></el-radio>
            <el-radio label="机房巡检"></el-radio>
            <el-radio label="主机维护"></el-radio>
            <el-radio label="存储维护"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="服务日期" prop="serviceDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.serviceDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.startTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.endTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="服务台次" prop="serviceCalls">
          <el-input v-model="form.serviceCalls"></el-input>
        </el-form-item>

        <el-form-item label="服务人员" prop="servicePerson">
          <el-input v-model="form.servicePerson"></el-input>
        </el-form-item>

        <el-form-item label="三员解决" prop="resolvedByThreeMembers">
          <el-radio-group v-model="form.resolvedByThreeMembers">
            <el-radio label="系统管理员"></el-radio>
            <el-radio label="安全保密员"></el-radio>
            <el-radio label="安全审计员"></el-radio>
            <el-radio label="运维团队处理"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import excel from "./excel";
import {
  dailydeleteData,
  dailyfetchData,
  dailyaddData,
  dailyeditData,
  daoruRow,
  daocuRow,
} from "../api/index";
export default {
  data() {
    return {
      dataList: [],
      multipleSelection: [], // 存储被选中的行的数据  
      deletedata: false,
      input: "",
      value1: "",
      total: 0,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      // 查看
      browse: false,
      adds: false,
      updateVisible: false,
      updateContent: "",
      adddialogVisible: false,
      editForm: {},
      //
      form: {
        serviceLocation: "",
        serviceCategory: "",
        department: "",
        serviceType: "",
        serviceDate: "",
        startTime: "",
        endTime: "",
        // duration:'',
        serviceCalls: "",
        servicePerson: "",
        resolvedByThreeMembers: "",
        serviceContent: "",
      },
      params: {
        type: "",
        status: "",
        page: 1,
        size: 10,
        startDate: "",
        endDate: "",
      },
      rules: {
        serviceLocation: [{ required: true, message: "请填写服务地点" }],
        serviceCategory: [{ required: true, message: "请填写服务大类" }],
        serviceContent: [{ required: true, message: "请填写服务内容" }],
        department: [{ required: true, message: "请填写部门" }],
        serviceType: [{ required: true, message: "请填写服务类型" }],
        serviceDate: [{ required: true, message: "请填写服务日期" }],
        startTime: [{ required: true, message: "请填写开始时间" }],
        endTime: [{ required: true, message: "请填写结束时间" }],
        serviceCalls: [{ required: true, message: "请填写服务台次" }],
        servicePerson: [{ required: true, message: "请填写服务人员" }],
        resolvedByThreeMembers: [{ required: true, message: "请填写三员解决" }],
      },
    };
  },

  mounted() {

    
    dailyfetchData("/service-records/getpage", this.params).then((response) => {
      this.params.page = this.currentPage;
      console.log(this.currentPage, "当前页码");
      console.log(response.data, "data");
      this.dataList = response.data.content;
      // console.log(this.dataList,'this.dataList')

      // 假设 response.data.content 是一个包含多个对象的数组
      this.tableData = response.data.content.map((item) => {
        // 开始时间
        const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
        const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
        const dateStr = datetimeStr.substring(0, 10); // 截取日期部分

        // 结束时间
        const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
        const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
        const endTimestars = endTimestar.substring(0, 10); // 截取日期部分

        // 服务日期
        const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
        const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
        const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
        // 返回一个新的对象，其中 startTime 属性被替换为 dateStr
        return {
          ...item, // 复制当前对象的所有其他属性
          startTime: dateStr, // 将 startTime 属性设置为日期字符串
          endTime: endTimestars,
          serviceDate: serviceDatestars,
        };
      });
      console.log(this.tableData, "sasa");

      for (let index = 0; index < this.tableData.length; index++) {
        const row = this.tableData[index];
        // console.log(row.department,'row')
        // console.log(row.department.substring(0, 10),'saa');
        this.tableData[index].department = row.department.substring(0, 10);
      }

      this.total = response.data.totalElements;
    });
  },

  methods: {

    handleSelectionChange(val) {  
      this.multipleSelection = val;  
    },  


    // 导出
    // 页面上有个按钮 点击调用exportExcel
    exportExcel() {
      const params = {
        title: ['服务大类', '部门', '服务类型','服务日期', '开始时间', '结束时间'],
        // key: ['serviceContent', 'department', 'serviceType','serviceDate','startTime','endTime'],
        data: this.multipleSelection, // 数据源
        autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
        filename: "数据导出",
      };

      // 创建一个新的工作簿
      const wb = XLSX.utils.book_new();

      // 将数据转换为工作表
      const ws = XLSX.utils.json_to_sheet(params.data, {
        header: params.title,
        defval: "",
      });

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

      // 生成Excel文件
      XLSX.writeFile(wb, `${params.filename}.xlsx`);
      // excel.exportArrayToExcel(params)
    },

    // 导入




    // 添加页面
    add() {
      this.editForm = Object.assign({});
      this.adddialogVisible = true;
      console.log("tianji");
    },

    // 点击添加
    onSubmit(form) {
      // console.log('++++++创建',this.form)

      this.$refs[form].validate((valid) => {
        if (valid) {
          // console.log('++++++创建',this.form)
          dailyaddData("/service-records/serviceadd", this.form);
          this.adddialogVisible = false;
          window.location.reload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },



    // 修改保存
    saveEdit(editForm) {
      // 在这里保存编辑后的数据
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          dailyeditData(
            "/service-records",
            this.editForm.id,
            this.editForm
          )
          this.dialogVisible = false;
          window.location.reload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 查看 弹框
    browses(row) {
      // console.log(row,'nihO')
      this.editForm = Object.assign({}, row);
      this.browse = true;
    },

    // 编辑 弹框
    handleEdit(row) {
      this.editForm = Object.assign({}, row);
      this.dialogVisible = true;
    },

    // 删除弹框
    showDeleteDialog(row) {
      this.currentRowData = row; // 将当前行的数据保存到 currentRowData
      this.deletedata = true; // 打开对话框
    },

    // 删除按钮
    handleDelete(row) {
      console.log("测试删除");
      const index = this.tableData.indexOf(row);
      console.log("row is", row.id);
      dailydeleteData("/service-records", row.id).then((response) => {
        // 请求成功处理
        console.log("shanchu");
      });

      if (index !== -1) {
        this.tableData.splice(index, 1);
      }

      this.deletedata = false; // 关闭对话框
    },

    // 分页
    handleSizeChange(val) {
      console.log(val, `每页 ${val} 条`);
      this.pageSize = val;
      console.log(this.pageSize, "this.page");
    },

    //分页
    handleCurrentChange(val) {
      console.log(val, `当前页: ${val}`);
      this.currentPage = val;
      this.params.page = val;
      // console.log(this.currentPage, " this.currentPage ");
      // console.log(this.params.page, " this.params.page ");
      if (this.value1) {
        this.params.startDate = this.value1[0];
        this.params.endDate = this.value1[1];
        // console.log( this.params.startDate,' this.params.startDate')
        // console.log( this.params.endDate,' this.params.endDate')
      }
      dailyfetchData("/service-records/getpage", this.params).then(
        (response) => {
          this.params.page = this.currentPage;
          // console.log(this.currentPage, "当前页码");
          // console.log(response.data, "data");

          // 假设 response.data.content 是一个包含多个对象的数组
          this.tableData = response.data.content.map((item) => {
            // 开始时间
            const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
            const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
            const dateStr = datetimeStr.substring(0, 10); // 截取日期部分

            // 结束时间
            const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
            const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
            const endTimestars = endTimestar.substring(0, 10); // 截取日期部分

            // 服务日期
            const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
            const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
            const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
            // 返回一个新的对象，其中 startTime 属性被替换为 dateStr
            return {
              ...item, // 复制当前对象的所有其他属性
              startTime: dateStr, // 将 startTime 属性设置为日期字符串
              endTime: endTimestars,
              serviceDate: serviceDatestars,
            };
          });
          console.log(this.tableData, "sasa");

          for (let index = 0; index < this.tableData.length; index++) {
            const row = this.tableData[index];
            // console.log(row.department,'row')
            // console.log(row.department.substring(0, 10),'saa');
            this.tableData[index].department = row.department.substring(0, 10);
          }
          // // 请求成功处理
          // const currentPage = this.params.page;
          // console.log(this.params.page, "this.params.page");
          // this.currentPage = currentPage;
          // this.tableData = response.data.content;

          // for (let index = 0; index < this.tableData.length; index++) {
          //   const row = this.tableData[index];
          //   console.log(row.department,'row.department');

          //   this.tableData[index].department = row.department.substring(0, 10);
          // }

          this.$forceUpdate();
        }
      );
    },

    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

 
  },
};
</script>

<style>
.ellipsis-column .cell {
  display: block; /* 或者 inline-block，取决于你的布局需求 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .title {
  display: flex;
} */
/* .input {
  width: 200px;
} */
.nav {
  width: 1450px;
  /* height: 600px; */
  /* background-color: rgb(46, 18, 129); */
  margin: 2%;
  margin-top: 100px;
  position: absolute;
  background-color: rgb(255 255 255);
}
.text {
  font-size: 20px;
  margin: 20px;
  /* color: azure; */
}
.but {
  margin: 10px;
}
</style>
<template>
  <div class="nav">
    <!-- 搜索 -->
    <!-- <div class="title">
      <p>
        <span class="text">时间:</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          class="input"
        ></el-input>
      </p>
      <p>
        <span class="text">服务:</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          class="input"
        ></el-input>
      </p>
    </div> -->

    <!-- 按钮 -->
    <div class="but">
      <el-button type="primary" @click="add()">添加</el-button>

      <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
      <el-button type="primary" @click="daoru()">导入</el-button>
      <el-button type="primary" @click="exportExcel()">导出</el-button>
    </div>

    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="50px"></el-table-column>

      <el-table-column
        prop="serviceLocation"
        label="服务地点"
        width="150"
      ></el-table-column>
      <el-table-column prop="serviceCategory" label="服务大类" width="120">
      </el-table-column>
      <el-table-column
        prop="serviceContent"
        label="服务内容"
        width="120"
        class-name="ellipsis-column"
      ></el-table-column>
      <el-table-column prop="department" label="部门" width="120">
      </el-table-column>
      <el-table-column prop="serviceType" label="服务类型" width="150">
      </el-table-column>
      <el-table-column prop="serviceDate" label="服务日期" width="150">
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="150">
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="150">
      </el-table-column>
      <el-table-column prop="duration" label="用时" width="150">
      </el-table-column>
      <el-table-column
        prop="serviceCalls"
        label="服务台次"
        width="150"
        class-name="ellipsis-column"
      >
      </el-table-column>
      <el-table-column
        prop="servicePerson"
        label="服务人员"
        width="150"
        class-name="ellipsis-column"
      >
      </el-table-column>
      <el-table-column
        prop="resolvedByThreeMembers"
        label="三员解决"
        width="150"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="browses(scope.row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="showDeleteDialog(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 删除 -->

    <el-dialog
      :visible.sync="deletedata"
      title="删除信息"
      @close="deletedata = false"
    >
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="rules"
        ref="editForm"
      >
        <p>确定删除吗？</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletedata = false">取消</el-button>
        <el-button type="primary" @click="handleDelete(currentRowData)"
          >删除</el-button
        >
      </span>
    </el-dialog>

<!-- 导出数据 -->
    <el-dialog
      :visible.sync="daochu"
      title="导出信息"
      @close="daochu = false"
    >
      <el-form
        label-width="80px"
        :rules="rules"
      >
        <p>请先勾选要导出的数据内容，在进行导出操作。</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="daochu = false">取消</el-button>
    
      </span>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog
      :visible.sync="dialogVisible"
      title="编辑信息"
      @close="dialogVisible = false"
    >
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="服务地点" prop="serviceLocation">
          <el-radio-group v-model="editForm.serviceLocation">
            <el-radio label="委机关"></el-radio>
            <el-radio label="巡视办"></el-radio>
            <el-radio label="派驻机构"></el-radio>
            <el-radio label="吉莲大厦"></el-radio>
            <el-radio label="长春净月基地"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务大类" prop="serviceCategory">
          <el-radio-group v-model="editForm.serviceCategory">
            <el-radio label="技术"></el-radio>
            <el-radio label="管理"></el-radio>
            <el-radio label="设备"></el-radio>
            <el-radio label="服务"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceContent">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="editForm.serviceContent"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-radio-group v-model="editForm.department">
            <el-radio label="SJW"></el-radio>
            <el-radio label="长春市JW"></el-radio>
            <el-radio label="通化市JW"></el-radio>
            <el-radio label="白山市JW"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceType">
          <el-radio-group v-model="editForm.serviceType">
            <el-radio label="单机外设"></el-radio>
            <el-radio label="实施指导"></el-radio>
            <el-radio label="门禁系统"></el-radio>
            <el-radio label="软件开发"></el-radio>
            <el-radio label="网络维护"></el-radio>
            <el-radio label="厂家对接"></el-radio>
            <br />
            <el-radio label="软件维护"></el-radio>
            <el-radio label="文本文档"></el-radio>
            <el-radio label="自主学习"></el-radio>
            <el-radio label="会议调试"></el-radio>
            <el-radio label="本地会议"></el-radio>
            <el-radio label="视频会议"></el-radio>
            <br />
            <el-radio label="其他工作"></el-radio>
            <el-radio label="机房巡检"></el-radio>
            <el-radio label="主机维护"></el-radio>
            <el-radio label="存储维护"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="服务日期" prop="serviceDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.serviceDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.startTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.endTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="服务台次" prop="serviceCalls">
          <el-input v-model="editForm.serviceCalls"></el-input>
        </el-form-item>

        <el-form-item label="服务人员" prop="servicePerson">
          <el-input v-model="editForm.servicePerson"></el-input>
        </el-form-item>

        <el-form-item label="三员解决" prop="resolvedByThreeMembers">
          <el-radio-group v-model="editForm.resolvedByThreeMembers">
            <el-radio label="系统管理员"></el-radio>
            <el-radio label="安全保密员"></el-radio>
            <el-radio label="安全审计员"></el-radio>
            <el-radio label="运维团队处理"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit('editForm')">保存</el-button>
      </span>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :visible.sync="browse" title="查看信息" @close="browse = false">
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="服务地点" prop="serviceLocation">
          <el-radio-group v-model="editForm.serviceLocation">
            <el-radio label="委机关" disabled></el-radio>
            <el-radio label="巡视办" disabled></el-radio>
            <el-radio label="派驻机构" disabled></el-radio>
            <el-radio label="吉莲大厦" disabled></el-radio>
            <el-radio label="长春净月基地" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务大类" prop="serviceCategory">
          <el-radio-group v-model="editForm.serviceCategory">
            <el-radio label="技术" disabled></el-radio>
            <el-radio label="管理" disabled></el-radio>
            <el-radio label="设备" disabled></el-radio>
            <el-radio label="服务" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceContent">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            :disabled="true"
            v-model="editForm.serviceContent"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-radio-group v-model="editForm.department">
            <el-radio label="SJW" disabled></el-radio>
            <el-radio label="长春市JW" disabled></el-radio>
            <el-radio label="通化市JW" disabled></el-radio>
            <el-radio label="白山市JW" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceType">
          <el-radio-group v-model="editForm.serviceType">
            <el-radio label="单机外设" disabled></el-radio>
            <el-radio label="实施指导" disabled></el-radio>
            <el-radio label="门禁系统" disabled></el-radio>
            <el-radio label="软件开发" disabled></el-radio>
            <el-radio label="网络维护" disabled></el-radio>
            <el-radio label="厂家对接" disabled></el-radio>
            <br />
            <el-radio label="软件维护" disabled></el-radio>
            <el-radio label="文本文档" disabled></el-radio>
            <el-radio label="自主学习" disabled></el-radio>
            <el-radio label="会议调试" disabled></el-radio>
            <el-radio label="本地会议" disabled></el-radio>
            <el-radio label="视频会议" disabled></el-radio>
            <br />
            <el-radio label="其他工作" disabled></el-radio>
            <el-radio label="机房巡检" disabled></el-radio>
            <el-radio label="主机维护" disabled></el-radio>
            <el-radio label="存储维护" disabled></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="服务日期" prop="serviceDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.serviceDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.startTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editForm.endTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="服务台次" prop="serviceCalls">
          <el-input v-model="editForm.serviceCalls" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="服务人员" prop="servicePerson">
          <el-input
            v-model="editForm.servicePerson"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="三员解决" prop="resolvedByThreeMembers">
          <el-radio-group v-model="editForm.resolvedByThreeMembers">
            <el-radio label="系统管理员" disabled></el-radio>
            <el-radio label="安全保密员" disabled></el-radio>
            <el-radio label="安全审计员" disabled></el-radio>
            <el-radio label="运维团队处理" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="browse = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 新增  -->
    <el-dialog :visible.sync="adddialogVisible" title="新增信息">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="服务地点" prop="serviceLocation">
          <el-radio-group v-model="form.serviceLocation">
            <el-radio label="委机关"></el-radio>
            <el-radio label="巡视办"></el-radio>
            <el-radio label="派驻机构"></el-radio>
            <el-radio label="吉莲大厦"></el-radio>
            <el-radio label="长春净月基地"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务大类" prop="serviceCategory">
          <el-radio-group v-model="form.serviceCategory">
            <el-radio label="技术"></el-radio>
            <el-radio label="管理"></el-radio>
            <el-radio label="设备"></el-radio>
            <el-radio label="服务"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceContent">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.serviceContent"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-radio-group v-model="form.department">
            <el-radio label="SJW"></el-radio>
            <el-radio label="长春市JW"></el-radio>
            <el-radio label="通化市JW"></el-radio>
            <el-radio label="白山市JW"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceType">
          <el-radio-group v-model="form.serviceType">
            <el-radio label="单机外设"></el-radio>
            <el-radio label="实施指导"></el-radio>
            <el-radio label="门禁系统"></el-radio>
            <el-radio label="软件开发"></el-radio>
            <el-radio label="网络维护"></el-radio>
            <el-radio label="厂家对接"></el-radio>
            <br />
            <el-radio label="软件维护"></el-radio>
            <el-radio label="文本文档"></el-radio>
            <el-radio label="自主学习"></el-radio>
            <el-radio label="会议调试"></el-radio>
            <el-radio label="本地会议"></el-radio>
            <el-radio label="视频会议"></el-radio>
            <br />
            <el-radio label="其他工作"></el-radio>
            <el-radio label="机房巡检"></el-radio>
            <el-radio label="主机维护"></el-radio>
            <el-radio label="存储维护"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="服务日期" prop="serviceDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.serviceDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.startTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.endTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="服务台次" prop="serviceCalls">
          <el-input v-model="form.serviceCalls"></el-input>
        </el-form-item>

        <el-form-item label="服务人员" prop="servicePerson">
          <el-input v-model="form.servicePerson"></el-input>
        </el-form-item>

        <el-form-item label="三员解决" prop="resolvedByThreeMembers">
          <el-radio-group v-model="form.resolvedByThreeMembers">
            <el-radio label="系统管理员"></el-radio>
            <el-radio label="安全保密员"></el-radio>
            <el-radio label="安全审计员"></el-radio>
            <el-radio label="运维团队处理"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import excel from "./excel";
import {
  dailydeleteData,
  dailyfetchData,
  dailyaddData,
  dailyeditData,
  daoruRow,
  daocuRow,
} from "../api/index";
export default {
  data() {
    return {
      dataList: [],
      multipleSelection: [], // 存储被选中的行的数据
      deletedata: false,
      input: "",
      value1: "",
      total: 0,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      daochu: false,
      // 查看
      browse: false,
      adds: false,
      updateVisible: false,
      updateContent: "",
      adddialogVisible: false,
      editForm: {},
      //
      form: {
        serviceLocation: "",
        serviceCategory: "",
        department: "",
        serviceType: "",
        serviceDate: "",
        startTime: "",
        endTime: "",
        // duration:'',
        serviceCalls: "",
        servicePerson: "",
        resolvedByThreeMembers: "",
        serviceContent: "",
      },
      params: {
        type: "",
        status: "",
        page: 1,
        size: 10,
        startDate: "",
        endDate: "",
      },
      rules: {
        serviceLocation: [{ required: true, message: "请填写服务地点" }],
        serviceCategory: [{ required: true, message: "请填写服务大类" }],
        serviceContent: [{ required: true, message: "请填写服务内容" }],
        department: [{ required: true, message: "请填写部门" }],
        serviceType: [{ required: true, message: "请填写服务类型" }],
        serviceDate: [{ required: true, message: "请填写服务日期" }],
        startTime: [{ required: true, message: "请填写开始时间" }],
        endTime: [{ required: true, message: "请填写结束时间" }],
        serviceCalls: [{ required: true, message: "请填写服务台次" }],
        servicePerson: [{ required: true, message: "请填写服务人员" }],
        resolvedByThreeMembers: [{ required: true, message: "请填写三员解决" }],
      },
    };
  },

  mounted() {
    dailyfetchData("/service-records/getpage", this.params).then((response) => {
      this.params.page = this.currentPage;
      console.log(this.currentPage, "当前页码");
      console.log(response.data, "data");
      this.dataList = response.data.content;
      // console.log(this.dataList,'this.dataList')

      // 假设 response.data.content 是一个包含多个对象的数组
      this.tableData = response.data.content.map((item) => {
        // 开始时间
        const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
        const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
        const dateStr = datetimeStr.substring(0, 10); // 截取日期部分

        // 结束时间
        const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
        const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
        const endTimestars = endTimestar.substring(0, 10); // 截取日期部分

        // 服务日期
        const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
        const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
        const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
        // 返回一个新的对象，其中 startTime 属性被替换为 dateStr
        return {
          ...item, // 复制当前对象的所有其他属性
          startTime: dateStr, // 将 startTime 属性设置为日期字符串
          endTime: endTimestars,
          serviceDate: serviceDatestars,
        };
      });
      console.log(this.tableData, "sasa");

      for (let index = 0; index < this.tableData.length; index++) {
        const row = this.tableData[index];
        // console.log(row.department,'row')
        // console.log(row.department.substring(0, 10),'saa');
        this.tableData[index].department = row.department.substring(0, 10);
      }

      this.total = response.data.totalElements;
    });
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 导出
    // 页面上有个按钮 点击调用exportExcel
    exportExcel() {
        if (this.multipleSelection == '') {
          // console.log('输出空')
          // alert("请先勾选数据")
          this.daochu = true;
        } else {

        const params = {
        title: ["序号", "服务地点", "服务大类","服务内容", "部门", "服务类型","服务日期",'开始时间','结束时间','服务台次','服务人员'],
        key: ["index", "serviceLocation", "serviceCategory","serviceContent","department",'serviceType','serviceDate','startTime','endTime','serviceCalls','servicePerson'],
        data: this.multipleSelection, // 数据源
        autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
        filename: "清单",
      };
      excel.exportArrayToExcel(params);
      console.log("勾选项的ID:", this.multipleSelection);
      // 这里可以进一步处理，比如发送到服务器等
          
        }
    },

    // 导入
    daoru(){
      console.log('导入')
    },



    // 添加页面
    add() {
      this.editForm = Object.assign({});
      this.adddialogVisible = true;
      console.log("tianji");
    },

    // 点击添加
    onSubmit(form) {
      // console.log('++++++创建',this.form)

      this.$refs[form].validate((valid) => {
        if (valid) {
          // console.log('++++++创建',this.form)
          dailyaddData("/service-records/serviceadd", this.form);
          this.adddialogVisible = false;
          window.location.reload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 修改保存
    saveEdit(editForm) {
      // 在这里保存编辑后的数据
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          dailyeditData("/service-records", this.editForm.id, this.editForm);
          this.dialogVisible = false;
          window.location.reload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 查看 弹框
    browses(row) {
      // console.log(row,'nihO')
      this.editForm = Object.assign({}, row);
      this.browse = true;
    },

    // 编辑 弹框
    handleEdit(row) {
      this.editForm = Object.assign({}, row);
      this.dialogVisible = true;
    },

    // 删除弹框
    showDeleteDialog(row) {
      this.currentRowData = row; // 将当前行的数据保存到 currentRowData
      this.deletedata = true; // 打开对话框
    },

    // 删除按钮
    handleDelete(row) {
      console.log("测试删除");
      const index = this.tableData.indexOf(row);
      console.log("row is", row.id);
      dailydeleteData("/service-records", row.id).then((response) => {
        // 请求成功处理
        console.log("shanchu");
      });

      if (index !== -1) {
        this.tableData.splice(index, 1);
      }

      this.deletedata = false; // 关闭对话框
    },

    // 分页
    handleSizeChange(val) {
      console.log(val, `每页 ${val} 条`);
      this.pageSize = val;
      console.log(this.pageSize, "this.page");
    },

    //分页
    handleCurrentChange(val) {
      console.log(val, `当前页: ${val}`);
      this.currentPage = val;
      this.params.page = val;
      // console.log(this.currentPage, " this.currentPage ");
      // console.log(this.params.page, " this.params.page ");
      if (this.value1) {
        this.params.startDate = this.value1[0];
        this.params.endDate = this.value1[1];
        // console.log( this.params.startDate,' this.params.startDate')
        // console.log( this.params.endDate,' this.params.endDate')
      }
      dailyfetchData("/service-records/getpage", this.params).then(
        (response) => {
          this.params.page = this.currentPage;
          // console.log(this.currentPage, "当前页码");
          // console.log(response.data, "data");

          // 假设 response.data.content 是一个包含多个对象的数组
          this.tableData = response.data.content.map((item) => {
            // 开始时间
            const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
            const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
            const dateStr = datetimeStr.substring(0, 10); // 截取日期部分

            // 结束时间
            const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
            const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
            const endTimestars = endTimestar.substring(0, 10); // 截取日期部分

            // 服务日期
            const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
            const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
            const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
            // 返回一个新的对象，其中 startTime 属性被替换为 dateStr
            return {
              ...item, // 复制当前对象的所有其他属性
              startTime: dateStr, // 将 startTime 属性设置为日期字符串
              endTime: endTimestars,
              serviceDate: serviceDatestars,
            };
          });
          console.log(this.tableData, "sasa");

          for (let index = 0; index < this.tableData.length; index++) {
            const row = this.tableData[index];
            // console.log(row.department,'row')
            // console.log(row.department.substring(0, 10),'saa');
            this.tableData[index].department = row.department.substring(0, 10);
          }
          // // 请求成功处理
          // const currentPage = this.params.page;
          // console.log(this.params.page, "this.params.page");
          // this.currentPage = currentPage;
          // this.tableData = response.data.content;

          // for (let index = 0; index < this.tableData.length; index++) {
          //   const row = this.tableData[index];
          //   console.log(row.department,'row.department');

          //   this.tableData[index].department = row.department.substring(0, 10);
          // }

          this.$forceUpdate();
        }
      );
    },

    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
};
</script>

<style>
.ellipsis-column .cell {
  display: block; /* 或者 inline-block，取决于你的布局需求 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .title {
  display: flex;
} */
/* .input {
  width: 200px;
} */
.nav {
  width: 1450px;
  /* height: 600px; */
  /* background-color: rgb(46, 18, 129); */
  margin: 2%;
  margin-top: 100px;
  position: absolute;
  background-color: rgb(255 255 255);
}
.text {
  font-size: 20px;
  margin: 20px;
  /* color: azure; */
}
.but {
  margin: 10px;
}
</style>
<template>  
  <div>  
    <button @click="triggerFileUpload">点击导入Excel文件</button>  
    <input type="file" ref="fileInput" style="display: none" @change="handleFileUpload" accept=".xlsx, .xls" />  
    <!-- 这里可以添加用于显示导入状态或错误消息的UI元素 -->  
  </div>  
</template>  
  
<script>  
import XLSX from 'xlsx';  
import axios from 'axios';  
  
export default {  
  data() {  
    return {  
      // ...你的其他数据属性  
    };  
  },  
  methods: {  
    triggerFileUpload() {  
      this.$refs.fileInput.click();  
    },  
    handleFileUpload(event) {  
      const file = event.target.files[0];  
      if (file) {  
        const reader = new FileReader();  
        reader.onload = (e) => {  
          const data = new Uint8Array(e.target.result);  
          const workbook = XLSX.read(data, { type: 'array' });  
            
          const worksheetName = workbook.SheetNames[0];  
          const worksheet = workbook.Sheets[worksheetName];  
            
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });  
            
          console.log('解析后的数据:', jsonData);  
          this.processImportedData(jsonData);  
        };  
        reader.readAsArrayBuffer(file);  
      } else {  
        alert('未选择文件');  
      }  
    },  
    processImportedData(jsonData) {  
      // 发送POST请求到后端  
      axios.post('/importFromExcel', jsonData)  
        .then(response => {  
          console.log('发送成功', response);  
          // 处理成功响应，比如更新UI等  
          this.handleSuccess(response.data);  
        })  
        .catch(error => {  
          console.error('发送失败', error);  
          // 处理错误，比如显示错误消息等  
          this.handleError(error);  
        });  
    },  
    handleSuccess(data) {  
      // 处理后端返回的成功数据  
      console.log('后端返回的成功数据:', data);  
      // 根据需要更新UI或执行其他操作  
    },  
    handleError(error) {  
      // 处理发送数据时的错误  
      console.error('后端返回的错误:', error);  
      // 显示错误消息给用户  
      alert('导入数据失败，请检查您的数据或联系管理员。');  
    }  
  }  
};  
</script>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
【Latex学习】Latex中插入Python代码的方法
Python 元组详解：定义、创建与常见操作
并行计算基础知识
10.javaSE基础_JDBC编译程序(Driver+Statement+Connection+mysql数据库连接)
批量复制不重复图像——将A文件夹中剩余与B文件夹不重名的多张图像拷贝到C文件夹（附C++和Python代码）
Qt 中文和英文分别使用不同的字体
深入解析TG-5006CJ/CG/CE TCXO/VC-TCXO的性能与应用
Git使用【中】
【网络安全---vulfocus】安装vulfocus教程
VMware Workstation17图文安装（超详细）教程
;