提交

ruoyi-ui/src/views/tongj/managementme/index.vue

@@ -0,0 +1,484 @@
+<template>
+  <div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px" class="nghfs">
+		    <p class="lqw" style="font-weight: 700;font-size: 15px;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;"> 搜索条件</p>
+		     <el-row>
+		         <el-col :span="8">
+		         <el-form-item label="人员姓名" prop="userName">
+		                 <el-input
+		                   v-model="queryParams.userName"
+		                   placeholder="请输入人员姓名"
+		                   clearable
+		                   @keyup.enter.native="handleQuery"
+		                 />
+		               </el-form-item>
+		         </el-col>
+		         <!-- <el-col :span="8">
+		           <el-form-item label="手机号码" prop="phonenumber">
+		                   <el-input
+		                     v-model="queryParams.phonenumber"
+		                     placeholder="请输入手机号码"
+		                     clearable
+		                     @keyup.enter.native="handleQuery"
+		                   />
+		          </el-form-item>
+		         </el-col> -->
+						 <el-col :span="8">
+						   <el-form-item label="人员身份证号" prop="idCard">
+						          <el-input
+						            v-model="queryParams.idCard"
+						            placeholder="请输入人员身份证号"
+						            clearable
+						            @keyup.enter.native="handleQuery"
+						          />
+						        </el-form-item>
+						 </el-col>
+						 <!-- <el-col :span="8">
+						    <el-form-item label="所属部门" prop="deptId">
+						            <treeselect style="width:100%;" v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+						    </el-form-item>
+						 </el-col> -->
+		         <el-col :span="4"  style="margin-top: 3px;">
+		           <el-button type="primary" style="background-color: #5974E0; border-color: #5974E0;" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+		          <el-button style="background-color: #fff; border-color: #3464EB; color: #3464EB;" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+		         </el-col>
+		     </el-row>
+		    </el-form>
+
+		<div class="ntgs" >
+		<div style="display: flex;align-items: center; margin-bottom: 10px;">
+		  <p class="lqw" style="font-weight: 700;font-size: 15px; margin: 0; margin-bottom: 0;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;">  打卡人员管理</p>
+    <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['system:info:add']"
+            >新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="success"
+              plain
+              icon="el-icon-edit"
+              size="mini"
+              :disabled="single"
+              @click="handleUpdate"
+              v-hasPermi="['system:info:edit']"
+            >修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="['system:info:remove']"
+            >删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="['system:info:export']"
+            >导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+		</div>
+
+    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="所属部门名称" align="center" prop="deptName" />
+          <el-table-column label="人员姓名" align="center" prop="userName" />
+          <el-table-column label="手机号码" align="center" prop="phonenumber" />
+          <el-table-column label="人员身份证号" align="center" prop="idCard" />
+          <el-table-column label="备注" align="center" prop="remark" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:info:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:info:remove']"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+		</div>
+
+    <!-- 添加或修改人员管理对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+        			  <!-- <el-col :span="12">
+        				 <el-form-item label="所属部门" prop="deptId">
+        				    <treeselect @select="nhgseh" v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+        				</el-form-item>
+        			  </el-col> -->
+        			  <el-col :span="24">
+        			  	 <el-form-item label="人员姓名" prop="userName">
+							  <el-select
+							    v-model="form.userName"
+							    :multiple="isfe"
+							    filterable
+								style="width:100%;"
+							    placeholder="请选择人员姓名">
+							    <el-option
+							      v-for="item in options"
+							      :key="item.userId"
+							      :label="item.nickName"
+							      :value="item.nickName">
+							    </el-option>
+							</el-select>
+        			  	</el-form-item>
+        			  </el-col>
+        			  <el-col :span="24">
+        			  	<el-form-item label="备注" prop="remark">
+        			  	  <el-input v-model="form.remark" placeholder="请输入备注" />
+        			  	</el-form-item>
+        			  </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listInfo, getInfo, delInfo, addInfo, updateInfo,noPage } from "@/api/system/management";
+import {deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "Info",
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 打卡人员信息表格数据
+      infoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+	  // 部门树选项
+	  deptOptions: undefined,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deptId: null,
+        deptName: null,
+        userName: null,
+        phonenumber: null,
+        idCard: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        userName: [
+          { required: true, message: "人员姓名不能为空", trigger: "blur" }
+        ],
+		idCard: [
+		  { required: true, message: "不能为空", trigger: "blur" }
+		],
+
+      },
+	  options:[],
+	  osgw:[],
+    isfe:true,
+    isjgwe:false
+    };
+  },
+  created() {
+	  this.getDeptTree()
+	this.queryParams.userId = this.$store.state.user.id
+    this.getList();
+	this.getListn()
+
+  },
+  methods: {
+    /** 查询打卡人员信息列表 */
+    getList() {
+      this.loading = true;
+      listInfo(this.queryParams).then(response => {
+        this.infoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+	getListn() {
+	  noPage().then(response => {
+	    this.options = response.rows;
+		this.osgw = response.rows;
+	  });
+	},
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      // this.reset();
+    },
+	/** 查询部门下拉树结构 */
+	getDeptTree() {
+	  deptTreeSelect().then(response => {
+	    this.deptOptions = response.data;
+	  });
+	},
+    // 表单重置
+    reset() {
+      this.form = {
+        userId: null,
+        deptId: null,
+        deptName: null,
+        userName: null,
+        phonenumber: null,
+        idCard: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+		    nickName:[]
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.userId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.isjgwe = false
+      this.reset();
+      this.open = true;
+      this.title = "添加打卡人员信息";
+      this.isfe = true
+	   this.form.nickName = []
+	  let ndj = []
+	  let ns = []
+	  let soj = []
+	  this.osgw.filter(tou=>{
+		 ndj.push(tou.userId)
+	  })
+	  for(var i=0;i<ndj.length;i++){
+		this.infoList.filter(rout=>{
+			if(ndj[i] == rout.userId){
+				ndj.splice(i,1)
+			}
+		})
+	  }
+	  ndj.filter(rou=>{
+		  ns.push(rou)
+	  })
+	  this.form.nickName = ns
+    this.form.userName  = null
+    this.isjgwe = true
+    console.log(this.form.userName,this.form.nickName,this.options)
+    },
+
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const userId = row.userId || this.ids
+      this.isfe = false
+       this.isjgwe = false
+      getInfo(userId).then(response => {
+        this.form = response.data;
+         this.isjgwe = true
+        // this.multiple = false
+        this.open = true;
+        this.title = "修改打卡人员信息";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.userId != null) {
+            updateInfo(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+			  let nhsgl=[]
+			  this.osgw.filter(rou=>{
+				this.form.nickName.filter(ru =>{
+					if(rou.userId == ru){
+						nhsgl.push(rou)
+					}
+				})
+			  })
+            addInfo(nhsgl).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const userIds = row.userId || this.ids;
+      this.$modal.confirm('是否确认删除打卡人员信息编号为"' + userIds + '"的数据项？').then(function() {
+        return delInfo(userIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/info/export', {
+        ...this.queryParams
+      }, `info_${new Date().getTime()}.xlsx`)
+    },
+	nhgseh(va){
+		// console.log(va,34)
+		this.form.deptName = va.label
+	}
+  }
+};
+</script>
+<style lang="scss">
+	.nhgrls{
+		.el-dialog__body{
+			padding: 0;
+		}
+	}
+  .hyr{
+    span{
+      text-decoration:underline;
+    }
+  }
+</style>
+<style scoped lang="scss">
+  .iuer{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .ite{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      p{
+        margin: 0;
+        font-size: 15px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #AAAAAA;
+        padding: 4px 12px;
+        background: #F7F8FA;
+        border-radius: 4px;
+        margin-right: 20px;
+      }
+      .actt{
+        background: #E6EBFF;
+        border: 1px solid #5974E0;
+        border-radius: 4px;
+        color: #5974E0;
+      }
+
+    }
+  }
+  .lqw{
+    padding: 0 10px;
+    margin: 0;
+    margin-bottom: 20px;
+  }
+.nhgel{
+  height: 170px;
+  background-color: #313b61;
+  width: 100%;
+  position: absolute;
+  top:0;
+  left:0;
+  z-index: 0;
+}
+	.app-container{
+		background-color: #f3f4f6;
+		padding-top: 10px;
+
+	}
+	.ntgs{
+	position: relative;
+		background-color: #fff;
+		padding: 5px;
+		// border-radius: 5px;
+		padding-top: 10px;
+	     padding: 10px 20px;
+		 padding-left: 10px;
+		.pagination-container{
+			height: 50px;
+		}
+	}
+	.nghfs{
+	position: relative;
+		background-color: #fff;
+		padding-top: 18px !important;
+		padding: 5px;
+		// border-radius: 5px;
+		// margin-bottom: 20px;
+	}
+	.ksf{
+		img{
+			width:100%;
+			height: 100%;
+		}
+	}
+
+</style>

ruoyi-ui/src/views/tongj/recordme/index.vue

@@ -0,0 +1,601 @@
+<template>
+  <div class="app-container">
+	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px" class="nghfs">
+	    <p class="lqw" style="font-weight: 700;font-size: 15px;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;"> 搜索条件</p>
+	     <el-row>
+	         <el-col :span="8">
+	          <el-form-item label="人员姓名" prop="userName">
+	            <el-input
+	              v-model="queryParams.userName"
+	              placeholder="请输入人员姓名"
+	              clearable
+	              @keyup.enter.native="handleQuery"
+	            />
+	          </el-form-item>
+	         </el-col>
+	         <el-col :span="8">
+	           <el-form-item label="手机号码" prop="phonenumber">
+	             <el-input
+	               v-model="queryParams.phonenumber"
+	               placeholder="请输入手机号码"
+	               clearable
+	               @keyup.enter.native="handleQuery"
+	             />
+	           </el-form-item>
+	         </el-col>
+			 <el-col :span="8">
+			   <el-form-item label="打卡记录日期" prop="recordTime">
+			     <el-date-picker clearable
+			       v-model="queryParams.recordTime"
+			       type="date"
+			       value-format="yyyy-MM-dd"
+			       placeholder="请选择打卡记录日期">
+			     </el-date-picker>
+			   </el-form-item>
+			 </el-col>
+			 <el-col :span="8">
+			   <el-form-item label="开始时间" prop="startTime">
+			     <el-date-picker clearable
+			       v-model="queryParams.startTime"
+			       type="date"
+			       value-format="yyyy-MM-dd"
+			       placeholder="请选择开始时间">
+			     </el-date-picker>
+			   </el-form-item>
+			 </el-col>
+			 <el-col :span="8">
+			   <el-form-item label="结束时间" prop="endTime">
+			     <el-date-picker clearable
+			       v-model="queryParams.endTime"
+			       type="date"
+			       value-format="yyyy-MM-dd"
+			       placeholder="请选择结束时间">
+			     </el-date-picker>
+			   </el-form-item>
+			 </el-col>
+			 <el-col :span="8">
+			   <el-form-item label="是否打卡" prop="type">
+			   <el-select v-model="queryParams.type" placeholder="请选择是否打卡" clearable>
+			     <el-option
+			       v-for="dict in dict.type.sys_yes_no"
+			       :key="dict.value"
+			       :label="dict.label"
+			       :value="dict.value"
+			     />
+			   </el-select>
+			   </el-form-item>
+			 </el-col>
+			 <el-col :span="8">
+			   <el-form-item label="打卡情况" prop="isOutwork">
+			   <el-select v-model="queryParams.isOutwork" placeholder="请选择打卡情况" clearable>
+			     <el-option
+			       v-for="dict in dict.type.is_outwork"
+			       :key="dict.value"
+			       :label="dict.label"
+			       :value="dict.value"
+			     />
+			   </el-select>
+			   </el-form-item>
+			 </el-col>
+	         <el-col :span="4"  style="margin-top: 3px;">
+	           <el-button type="primary" style="background-color: #5974E0; border-color: #5974E0;" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+	          <el-button style="background-color: #fff; border-color: #3464EB; color: #3464EB;" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+	         </el-col>
+	     </el-row>
+	    </el-form>
+   <div class="ntgs" >
+   <div style="display: flex;align-items: center; margin-bottom: 10px;">
+     <p class="lqw" style="font-weight: 700;font-size: 15px; margin: 0; margin-bottom: 0;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;">  打卡记录</p>
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:record:add']"
+        >新增</el-button>
+      </el-col> -->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:record:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:record:remove']"
+        >删除</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:clock:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+	</div>
+	<div style="display: flex;" class="nblqwt" v-if="nhgwe == true">
+		<p @click="iscvf(item)" :class=" ingsnum == item.dictValue? 'iscd' : ''" v-for="(item,index) in lishgew" :key="index">{{item.dictLabel}}<span v-if="item.dictValue != 1">({{item.tj == undefined?'' : item.tj}}人)</span></p>
+	</div>
+
+    <el-table v-loading="loading"  :data="recordList" @selection-change="handleSelectionChange">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <!-- <el-table-column label="打卡记录id" align="center" prop="clockId" />
+      <el-table-column label="人员ID" align="center" prop="userId" /> -->
+      <!-- <el-table-column label="所属部门名称" align="center" prop="deptName" /> -->
+      <el-table-column label="手机号码" align="center" prop="phonenumber" />
+      <el-table-column label="人员姓名" align="center" prop="userName" />
+	  <el-table-column label="打卡地点" align="center" prop="recordLocations" width="160" show-overflow-tooltip />
+      <!-- <el-table-column label="人员身份证号" align="center" prop="idCard" /> -->
+	  <el-table-column label="周几" align="center" prop="week">
+	    <template slot-scope="scope">
+	      <dict-tag :options="dict.type.week" :value="scope.row.week"/>
+	    </template>
+	  </el-table-column>
+      <el-table-column label="打卡记录时间" align="center" prop="recordDt" width="160" />
+     <!-- <el-table-column label="上班打卡时间" align="center" prop="workingTime" />
+      <el-table-column label="下班打卡时间" align="center" prop="dutyTime" /> -->
+	  <!-- <el-table-column label="是否打卡" align="center" prop="type">
+	    <template slot-scope="scope">
+	      <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.type"/>
+	    </template>
+	  </el-table-column> -->
+	  <el-table-column label="打卡情况" align="center" prop="isOutwork">
+	    <template slot-scope="scope">
+	      <dict-tag :options="dict.type.is_outwork" :value="scope.row.isOutwork"/>
+	    </template>
+	  </el-table-column>
+	  <el-table-column label="打卡图片" align="center" prop="pictureUrl">
+	    <template slot-scope="scope">
+			<image-preview :src="scope.row.pictureUrl" :width="50" :height="50"/>
+	    </template>
+	  </el-table-column>
+	  <el-table-column label="备注" align="center" prop="remark" width="60" show-overflow-tooltip/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:clock:edit']"
+          >修改</el-button> -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:clock:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+	</div>
+
+    <!-- 添加或修改打卡记录对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="人员ID" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入人员ID" />
+        </el-form-item>
+        <el-form-item label="所属部门名称" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="请输入所属部门名称" />
+        </el-form-item>
+        <el-form-item label="人员姓名" prop="userName">
+          <el-input v-model="form.userName" placeholder="请输入人员姓名" />
+        </el-form-item>
+        <el-form-item label="手机号码" prop="phonenumber">
+          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
+        </el-form-item>
+        <el-form-item label="人员身份证号" prop="idCard">
+          <el-input v-model="form.idCard" placeholder="请输入人员身份证号" />
+        </el-form-item>
+        <el-form-item label="打卡记录日期" prop="recordTime">
+          <el-input v-model="form.recordTime" placeholder="请输入打卡记录日期" />
+        </el-form-item>
+        <el-form-item label="上班打卡时间" prop="workingTime">
+          <el-input v-model="form.workingTime" placeholder="请输入上班打卡时间" />
+        </el-form-item>
+        <el-form-item label="下班打卡时间" prop="dutyTime">
+          <el-input v-model="form.dutyTime" placeholder="请输入下班打卡时间" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listRecord, getRecord, delRecord, addRecord, updateRecord,abnormal } from "@/api/system/record";
+
+export default {
+  name: "Record",
+  dicts: ['sys_yes_no','week','is_outwork'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 打卡记录表格数据
+      recordList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        deptName: null,
+        userName: null,
+        phonenumber: null,
+        idCard: null,
+        recordTime: null,
+        workingTime: null,
+        dutyTime: null,
+		isOutwork:'1',
+		startTime:null,
+		endTime:null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        userName: [
+          { required: true, message: "人员姓名不能为空", trigger: "blur" }
+        ],
+      },
+	  lishgew:[],
+	  ingsnum:1,
+	  nhgwe:false,
+    spanArr:[],
+    pos:0
+
+    };
+  },
+  created() {
+	  this.queryParams.startTime=  this.getNowDate()
+	  this.queryParams.endTime=  this.getNowDate()
+	  this.queryParams.userId = this.$store.state.user.id
+      this.getList();
+	  this.getDicts("is_outwork").then(response => {
+	          this.lishgew = response.data;
+			  this.getti()
+	    });
+  },
+  methods: {
+    getSpanArr(data) {
+    this.spanArr = []
+    this.pos = 0
+              for (var i = 0; i < data.length; i++) {
+                if (i === 0) {
+                  this.spanArr.push(1);
+                  this.pos = 0
+                } else {
+                  // 判断当前元素与上一个元素是否相同
+                if (data[i].phonenumber === data[i - 1].phonenumber) {
+                    this.spanArr[this.pos] += 1;
+                    this.spanArr.push(0);
+                  } else {
+                    this.spanArr.push(1);
+                    this.pos = i;
+                  }
+                }
+                console.log(this.spanArr)
+            }
+        },
+        // 合并列
+        objectSpanMethod({row, column, rowIndex, columnIndex}){
+          let tableData = this.recordList;
+          // //rowIndex：行    columnIndex：列
+          // let {tableData} = this;
+          console.log(row,column, rowIndex, columnIndex)
+                         if (columnIndex === 0 ) {
+                                     const _row = this.spanArr[rowIndex];
+                                     const _col = _row > 0 ? 1 : 0;
+                                     console.log(`rowspan:${_row} colspan:${_col}`)
+                                     return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
+                                           rowspan: _row,
+                                           colspan: _col
+                                     }
+                                   }
+        },
+	  getNowDate() {
+	        const timeOne = new Date()
+	        const year = timeOne.getFullYear()
+	        let month = timeOne.getMonth() + 1
+	        let day = timeOne.getDate()
+	        month = month < 10 ? '0' + month : month
+	        day = day < 10 ? '0' + day : day
+	        const NOW_MONTHS_AGO = `${year}-${month}-${day}`
+	        return NOW_MONTHS_AGO
+	      },
+
+    /** 查询打卡记录列表 */
+    getList() {
+      this.loading = true;
+      listRecord(this.queryParams).then(response => {
+        this.recordList = response.rows;
+        this.total = response.total;
+        let pigletcheckList = this.recordList;
+        this.getSpanArr(pigletcheckList)
+        this.loading = false;
+      });
+    },
+	getti(){
+	  this.nhgwe = false
+	  let jgwe={'startTime':this.queryParams.startTime,'endTime':this.queryParams.endTime}
+	  abnormal(jgwe).then(response => {
+		// this.lishgew = response.data;
+		// for()
+		this.lishgew.filter(rou=>{
+			if(rou.dictValue == 2){
+				// 外勤
+				rou.tj = response.data.wq
+			}
+			if(rou.dictValue == 3){
+				// 迟到
+				rou.tj = response.data.cd
+			}
+			if(rou.dictValue == 4){
+				// 早退
+				rou.tj = response.data.zt
+			}
+			if(rou.dictValue == 5){
+				// 未打卡
+				rou.tj = response.data.wdk
+			}
+			this.nhgwe = true
+		})
+
+	  });
+	},
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        clockId: null,
+        userId: null,
+        deptName: null,
+        userName: null,
+        phonenumber: null,
+        idCard: null,
+        recordTime: null,
+        workingTime: null,
+        dutyTime: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+	  this.getti()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.clockId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加打卡记录";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const clockId = row.clockId || this.ids
+      getRecord(clockId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改打卡记录";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.clockId != null) {
+            updateRecord(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addRecord(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const clockIds = row.clockId || this.ids;
+      this.$modal.confirm('是否确认删除打卡记录编号为"' + clockIds + '"的数据项？').then(function() {
+        return delRecord(clockIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/record/export', {
+        ...this.queryParams
+      }, `record_${new Date().getTime()}.xlsx`)
+    },
+	iscvf(item){
+		this.ingsnum = item.dictValue
+		this.queryParams.isOutwork = item.dictValue
+		this.queryParams.pageNum = 1
+		this.getList()
+		this.getti()
+	}
+  }
+};
+</script>
+<style lang="scss">
+	.nhgrls{
+		.el-dialog__body{
+			padding: 0;
+		}
+	}
+  .hyr{
+    span{
+      text-decoration:underline;
+    }
+  }
+</style>
+<style scoped lang="scss">
+	.nblqwt{
+		padding-left: 10px;
+		p{
+			padding: 5px 14px ;
+			background-color: #eaeaea;
+			border-radius: 3px;
+			margin-right: 5px;
+			color: #666666 ;
+		}
+		.iscd{
+			border: 1px solid #3565ed;
+			background-color: #fff;
+			color: #3565ed ;
+		}
+	}
+  .iuer{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .ite{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      p{
+        margin: 0;
+        font-size: 15px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #AAAAAA;
+        padding: 4px 12px;
+        background: #F7F8FA;
+        border-radius: 4px;
+        margin-right: 20px;
+      }
+      .actt{
+        background: #E6EBFF;
+        border: 1px solid #5974E0;
+        border-radius: 4px;
+        color: #5974E0;
+      }
+
+    }
+  }
+  .lqw{
+    padding: 0 10px;
+    margin: 0;
+    margin-bottom: 20px;
+  }
+.nhgel{
+  height: 170px;
+  background-color: #313b61;
+  width: 100%;
+  position: absolute;
+  top:0;
+  left:0;
+  z-index: 0;
+}
+	.app-container{
+		background-color: #f3f4f6;
+		padding-top: 10px;
+
+	}
+	.ntgs{
+	position: relative;
+		background-color: #fff;
+		padding: 5px;
+		// border-radius: 5px;
+		padding-top: 10px;
+	     padding: 10px 20px;
+		 padding-left: 10px;
+		.pagination-container{
+			height: 50px;
+		}
+	}
+	.nghfs{
+	position: relative;
+		background-color: #fff;
+		padding-top: 18px !important;
+		padding: 5px;
+		// border-radius: 5px;
+		// margin-bottom: 20px;
+	}
+	.ksf{
+		img{
+			width:100%;
+			height: 100%;
+		}
+	}
+
+</style>