gz-att-web/src/views/exceptionHandle/errorForm/index.vue

<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
        <el-form-item label="选择月份:" prop="attCurrentMonth">
          <el-date-picker
            v-model="searchAttCurrentMonth"
            style="width: 240px"
            placeholder="请选择月份"
            type="month"
            value-format="yyyy-MM"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="部门" prop="orgId">
            <treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer" @select="handleSelect" placeholder="选择部门" style="width: 240px"/>
        </el-form-item>
        <el-form-item label="姓名:"  prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="handleQuery"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['att:detail:export']"
          >导出数据</el-button>
        </el-form-item>
      </el-form>
  
  
      <el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="id" >
        <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
        <el-table-column label="姓名" align="center" prop="name" sortable/>
        <el-table-column label="考勤月份" align="center" prop="attCurrentMonth" sortable/>
        <el-table-column label="所属部门" align="center" prop="orgName"  sortable/>
        <el-table-column label="轮休未审批条数" align="center" prop="errorRestCount" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.errorRestCount!=0"
            @click="openRecord(scope.row,title1)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.errorRestCount}}
            </div>
             <div v-else>{{ scope.row.errorRestCount}}</div>
        </template>
        </el-table-column>
        <el-table-column label="外出办事未审批条数" align="center" prop="errorOutCount" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.errorOutCount!=0"
            @click="openRecord(scope.row,title2)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.errorOutCount}}
            </div>
             <div v-else>{{ scope.row.errorOutCount}}</div>
        </template>
        </el-table-column>
      
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 相关记录 -->
      <el-dialog :title="title" :visible.sync="showRecord" width="1200px" height="1000px" append-to-body @close="cancelRecord">
        <el-form :model="queryRecord" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="姓名:"  prop="name">
          <el-input
            v-model="queryRecord.name"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="handleQueryRecord"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRecord">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetRecord">重置</el-button>
        </el-form-item>
        </el-form>

      <el-table v-loading="loadingTwo" :data="tableDataRecord" width="900px" height = "600px" row-key="id">
        <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{ (queryRecord.pageNum - 1) * queryRecord.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
        <el-table-column label="姓名" align="center" prop="name"  sortable/>
        <el-table-column label="所属部门" align="center" prop="orgName" sortable/>
        <el-table-column label="请假类型" align="center" prop="leaveType"  sortable/>
        <el-table-column label="请假开始时间" align="center" prop="leaveStartDate"  sortable/>
        <el-table-column label="请假结束时间" align="center" prop="leaveEndDate"  sortable/>
        <el-table-column label="请假时长(天)" align="center" prop="leaveDuration" sortable/>
        <el-table-column label="审批状态" align="center" prop="examineStatus"  sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.examineStatus==0">{{ '审核中' }}</span>
            <span v-if="scope.row.examineStatus==1">{{ '通过' }}</span>
            <span v-if="scope.row.examineStatus==2">{{ '不通过' }}</span>
            <span v-if="scope.row.examineStatus==3">{{ '待审核' }}</span>
            <span v-else>{{  }}</span>
        </template>
        </el-table-column> 
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleExamine(scope.row)"

            >审批提醒</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="totalTwo>0"
        :total="totalTwo"
        :page.sync="queryRecord.pageNum"
        :limit.sync="queryRecord.pageSize"
        @pagination="getListRecord"
      />

      </el-dialog>

        <!-- 审批提醒对话框 -->
        <el-dialog :title="titleExamine" :visible.sync="openExamine" width="600px"   append-to-body>
        <el-form ref="form" :model="form" :rules="rules"  >
              <el-form-item  prop="content">
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入"
                  v-model="form.content"
                  maxlength="50"
                  show-word-limit
                  >
                  </el-input>
                  <!-- <el-input v-model="form.content" placeholder="请输入" maxlength="20"/> -->
              </el-form-item>         
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">发送</el-button>
          <el-button @click="cancelExamine">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { listExceptionFormError,getDetailExceptionRest,getDetailExceptionOut,exportExceptionError,examineRemind} from "@/api/exceptionHandle/errorForm";
  import { downloadFile } from '@/utils/download'
  // import { getEngineeringList } from "@/api/select";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";  
  import { listDept } from "@/api/system/dept";
  import { getToken } from '@/utils/auth'
  export default {
    name: "Post",
    dicts: ['sys_normal_disable','sys_voltage_level','sys_org_name','sys_pro_type','sys_pro_status',
    'sys_yz_manage','sys_sg_manage','sys_jl_manage','sys_device_type'],
    components: {
      Treeselect 
		},
    data() {
      return {
        showAttribute:false,
        // 遮罩层
        loading: true,
        // 遮罩层
        loadingTwo: true,
        // 选中数组
        ids: [],
        // 显示搜索条件
        deptOptions: [],
        showSearch: true,
        showRecord:false,
        maxLength:100,//已选列表上限，防止数据过多请求报错
        // 总条数
        total: 0,
        totalTwo: 0,
        // 表格数据
        tableData: [],
        tableDataRecord: [],
        // 弹出层标题
        title: "",
        title1: "轮休未审批记录",
        title2: "外出办事未审批记录",
        titleExamine:'',
        // 是否显示弹出层
        open: false,
        openExamine: false,
        searchAttCurrentMonth: undefined,
        dateRange: [],

        queryParams: {
          pageNum: 1,
          pageSize: 10,
          attCurrentMonth:undefined,
          name:undefined,
          orgName: undefined,
        },

        queryRecord: {
          pageNum: 1,
          pageSize: 10,
          userId: undefined,
          attStatis: undefined,
          attCurrentMonth: undefined,
        },
        // 表单参数
        form:{
          orgId: undefined,
          content: undefined,
          title: undefined,
        },

        // 表单校验
        rules: {
          content: [
            { required: true, message: "补充内容不能为空", trigger: "blur" }
          ],
        },
      };
    },
    computed: {

    },
    created() {
        this.getDeptList();
        // 在页面加载时判断是否有路由传递的 `attCurrentMonth` 数据
        if (this.$route.query.attCurrentMonth) {
        // 如果有传递 `attCurrentMonth`，则将搜索栏值设置为传递的数据
          this.searchAttCurrentMonth = this.$route.query.attCurrentMonth;
          // this.queryParams.attCurrentMonth = this.$route.query.attCurrentMonth;
          this.getList();
        } else {
          const lastMonth = new Date();
          lastMonth.setMonth(lastMonth.getMonth() - 1)
          this.searchAttCurrentMonth = lastMonth;
          // 如果没有传递数据，搜索栏保持为空
          // this.searchAttCurrentMonth = '';
          // this.queryParams.attCurrentMonth = '';
          this.getList();
      }
    },
  //   mounted(){
  //         // 在页面加载时判断是否有路由传递的 `attCurrentMonth` 数据
  //       if (this.$route.query.attCurrentMonth) {
  //         // 如果有传递 `attCurrentMonth`，则将搜索栏值设置为传递的数据
  //         this.queryParams.attCurrentMonth = this.$route.query.attCurrentMonth;
  //       } else {
  //         // 如果没有传递数据，搜索栏保持为空
  //         this.queryParams.attCurrentMonth = '';
  //     }
  //   },  

  //   watch: {
  //       // 如果路由的参数发生变化，更新搜索栏内容
  //       '$route.query.attCurrentMonth'(newName) {
  //         if (newName) {
  //           this.queryParams.attCurrentMonth = newName;
  //         } else {
  //           this.queryParams.attCurrentMonth = '';
  //         }
  //       }
  //  },

    methods: {
          handleChange(newValue) {
          // 如果选择的值为空，重置为之前的值
          if (!newValue) {
            console.log(newValue)
            const lastMonth = new Date();
            lastMonth.setMonth(lastMonth.getMonth() - 1)
            this.searchAttCurrentMonth = lastMonth;
            this.getList();
          }
        },
          formatDateTwo(dateString) {
          const date = new Date(dateString)
          const year = date.getFullYear();
          const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 补零
          return `${year}-${month}`;
        },
        formatDate(dateString){
          const date = new Date(dateString); // 创建日期对象
          const year = date.getFullYear(); // 获取年份
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
          const day = String(date.getDate()).padStart(2, '0'); // 获取日期
          const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几数组
          const weekday = weekdays[date.getDay()]; // 获取星期几

          return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
        },
 
        getDeptList(){
            listDept().then(response => {
                this.deptOptions = this.handleTree(response.data, "id");
            });
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.orgName,
                children: node.children
            };
        },

        handleSelect(value, instanceId) { 
            console.log('Selected:', value);
            // 在这里处理选择事件
            this.queryParams.orgName=value.orgName;
        },

        /** 查询月异常列表 */
        getList() {
            this.loading = true;
           this.queryParams.attCurrentMonth = this.formatDateTwo(this.searchAttCurrentMonth);
            listExceptionFormError(this.queryParams).then(response => {
              this.tableData = response.rows;
              this.total = response.total;
              this.loading = false;
            });
        },

        /** 搜索按钮操作 */
        handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        },

        // 表单重置
        reset() {
            // this.searchAttCurrentMonth = '';
            // this.queryParams.attCurrentMonth = null;
            this.queryForm = {};
            this.resetForm("queryForm");

            this.getList();
        },
        // 表单重置
        resetRecord() {
            // this.queryFormRecord = {};
            this.dateRange = [];
            this.resetForm("queryFormRecord");
            this.getListRecord();
        },


        //打开月异常详情页面
        openRecord(row,titleBoss){
          this.id = row.id;
          this.title = titleBoss;
          this.queryRecord.userId = row.userId;
          this.queryRecord.attCurrentMonth = row.attCurrentMonth;
          if(titleBoss=='轮休未审批记录'){
           this.queryRecord.attStatis=1
          }else if(titleBoss=='外出办事未审批记录'){
            this.queryRecord.attStatis=2;
          }
          this.showRecord = true;
          this.getListRecord();
        },

        /** 查询月异常详情列表 */
        getListRecord() {
          this.loadingTwo = true;
          if(this.title=='轮休未审批记录'){
            getDetailExceptionRest(this.queryRecord).then(response => {
            this.tableDataRecord = response.rows;
            this.totalTwo = response.total;
            this.loadingTwo = false;
            });
          }else if(this.title=='外出办事未审批记录'){
            getDetailExceptionOut(this.queryRecord).then(response => {
            this.tableDataRecord = response.rows;
            this.totalTwo = response.total;
            this.loadingTwo = false;
            });
          }
        },

        /** 搜索按钮操作 */
        handleQueryRecord() {
        this.queryRecord.pageNum = 1;
        this.getListRecord();
        },

        cancelRecord() {
            this.showRecord = false;
            this.resetRecord();
        },

        /** 审批提醒按钮操作 */
        handleExamine(row) {
            this.resetExamine();
            this.queryRecord.orgId = row.orgId;
            this.openExamine = true;
            this.titleExamine = "补充说明";
        },

          /** 提交按钮 */
          submitForm() { 
          this.form.orgId = this.queryRecord.orgId;
          this.form.title = '轮休外出办事异常数据';
          console.log(this.form)
          this.$refs["form"].validate(valid => {
            if (valid) {
              examineRemind(this.form).then(response => {
               this.$modal.msgSuccess("审批提醒成功");
                    this.openExamine = false;
                    this.getListRecord();
               });
            }
          })
        },

        // 审批提醒取消按钮
        cancelExamine() {
            this.openExamine = false;
            this.resetExamine();
        },

        // 表单重置
        resetExamine() {
            this.form = {};
            this.resetForm("form");
        },
  
        /** 导出按钮操作 */
        handleExport() {
        exportExceptionError(this.queryParams).then(res => {
          downloadFile({ fileName: `轮休外出办事异常报表_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
        })
      },
  
    }
  };
  </script>

  <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  </style>