添加我的考勤页面

src/views/oa/attendance/my/index.vue

+<template>
+  <div class="app-container">
+    <el-table
+      v-loading="loading"
+      :data="resultList"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column v-if="false" label="主键ID" align="center" prop="id" />
+      <el-table-column label="员工id" align="center" prop="sysUserName" >
+      </el-table-column>
+      <el-table-column label="员工姓名" align="center" prop="nickName" ></el-table-column>
+      <el-table-column label="考勤组" align="center" prop="attendanceGroupName" >
+      </el-table-column>
+      <el-table-column   label="打卡时间" align="center" prop="checkInTime">
+      </el-table-column>
+      <el-table-column label="上班打卡状态" align="center" prop="clockInStatus" >
+        <template slot-scope="scope">
+          <span
+            v-if="scope.row.checkInStatus == '0'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            未打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '1'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            上班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '2'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            下班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '3'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            迟到打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '4'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            早退打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '5'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            更新打卡
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="下班打卡状态" align="center" prop="clockOutStatus" >
+        <template slot-scope="scope">
+          <span
+            v-if="scope.row.checkInStatus == '0'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            未打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '1'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            上班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '2'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            下班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '3'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            迟到打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '4'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            早退打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '5'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            更新打卡
+          </span>
+        </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="open" width="960px" append-to-body>
+      <div class="warn-result" v-html="warnResult" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  queryList,
+  delOperationWarnresult,
+  addOperationWarnresult,
+  updateOperationWarnresult,
+  exportExcel,
+  queryAttendanceGroup
+} from '@/api/daka/daka-record'
+
+import map from '@/views/components/daka/map';
+
+export default {
+  name: 'dakarecord',
+  dicts: [
+    'zs_operation_warn_types',
+    'zs_operation_status',
+    'zs_operation_compare_status',
+    'zs_operation_platform',
+    'daka_check_in_status'
+  ],
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      resultList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 图片快照时间范围
+      daterangeWarnTime: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        sysUserName: undefined,
+        checkInStatus: undefined,
+        exportRange: undefined,
+        strDay: undefined,
+        strMonth: undefined,
+        modelType: undefined,
+        attendanceGroupIds: undefined
+      },
+      modelTypeDate: [{label: '国内', value: 'guonei'},{label: '日本', value: 'riben'}],
+      // 表单参数
+      form: {},
+      // 结果
+      warnResult: '',
+      // 表单校验
+      rules: {
+        snapshotUrl: [
+          { required: true, message: '图片快照不能为空', trigger: 'blur' }
+        ]
+      },
+      daka_check_in_status: [{label: '未打卡', value: '0'},{label: '上班已打卡', value: '1'},{label: '下班已打卡', value: '2'},
+      {label: '迟到打卡', value: '3'},{label: '早退打卡', value: '4'}, {label: '更新打卡', value: '5'}],
+      attendanceGroups: []
+    }
+  },
+  created() {
+    this.getList()
+    this.queryAttendanceGroup()
+  },
+  methods: {
+    queryAttendanceGroup(){
+      queryAttendanceGroup().then((response) => {
+        // console.log(response)
+        const data = response.data
+        const newData = data.map(d => {
+          return {label: d.name, value: d.id}
+        })
+        this.attendanceGroups = newData
+      })
+    },
+    /** 查询结果列表 */
+    getList() {
+      this.loading = true
+      // console.log(this.queryParams)
+      queryList(this.queryParams).then((response) => {
+        this.resultList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        warnTime: undefined,
+        goodsSkuName: undefined,
+        goodsSkuSn: undefined,
+        initPrice: undefined,
+        curPrice: undefined,
+        priceChangeRatio: undefined,
+        warnTypes: undefined,
+        warnContent: undefined,
+        status: undefined,
+        snapshotUrl: undefined
+      }
+      this.resetForm('form')
+    },
+    /** 处理按钮操作 */
+    handleDispose(row) {
+      const _html = `
+        <p class="warn-result-text">预警商品：<a href="${row.goodsSkuUrl}" target="_blank">${row.goodsSkuName}</a></p>
+        <p class="warn-result-text">预警价格：${row.curPrice}</p>
+        <p class="warn-result-text">预警时间：${row.warnTime}</p>
+        <p class="warn-result-text">预警平台：${row.platform}</p>
+        <p class="warn-result-text">预警备注：${row.remark}</p>
+        <p class="warn-result-text">预警快照：<a href="${row.snapshotUrl}" target="_blank">点击查看</a></p>
+        <p class="warn-result-tips">注：如果点击“稍后处理”，则预警结果将不会被处理，预警状态将不会被修改。如果点击“立即处理”，则当前商品基准价格将会被修改为预警价格，价格监控按照新的基准价格进行监控。</p>
+      `
+      this.$confirm(_html, '提示', {
+        confirmButtonText: '立即处理',
+        cancelButtonText: '稍后处理',
+        dangerouslyUseHTMLString: true,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        showClose: false,
+        customClass: 'warn-result-message'
+      }).then(() => {
+        this.loading = true
+        row.status = 1
+        updateOperationWarnresult(row)
+          .then((response) => {
+            this.$modal.msgSuccess('处理成功')
+            this.open = false
+            this.getList()
+          })
+          .finally(() => {
+            this.loading = false
+          })
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.daterangeWarnTime = []
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleView(row) {
+      // 将状态设置为已处理
+      this.open = true
+      this.title = '预警结果'
+      this.warnResult = row.warnContent
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.buttonLoading = true
+          if (this.form.id != null) {
+            updateOperationWarnresult(this.form)
+              .then((response) => {
+                this.$modal.msgSuccess('修改成功')
+                this.open = false
+                this.getList()
+              })
+              .finally(() => {
+                this.buttonLoading = false
+              })
+          } else {
+            addOperationWarnresult(this.form)
+              .then((response) => {
+                this.$modal.msgSuccess('新增成功')
+                this.open = false
+                this.getList()
+              })
+              .finally(() => {
+                this.buttonLoading = false
+              })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal
+        .confirm('是否确认删除预警结果编号为"' + ids + '"的数据项？')
+        .then(() => {
+          this.loading = true
+          return delOperationWarnresult(ids)
+        })
+        .then(() => {
+          this.loading = false
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      console.log(this.queryParams)
+      if(this.queryParams.day && this.queryParams.month){
+        this.$modal.msgError('日，月只能选择一个')
+        return
+      }
+      if(!this.queryParams.strDay && !this.queryParams.strMonth){
+        this.$modal.msgError('日，月必须选择一个')
+        return
+      }
+      if(!this.queryParams.modelType){
+        this.$modal.msgError('必须选择模版!')
+        return
+      }
+      if(!this.queryParams.attendanceGroupIds || this.queryParams.attendanceGroupIds.length == 0){
+        this.$modal.msgError('必须选择所属考勤组!')
+        return
+      }
+      this.download(
+        'dk/record/exportNew',
+        {
+          ...this.queryParams
+        },
+        `kaoqin_${new Date().toLocaleString()}.xls`
+      )
+    }
+  }
+}
+</script>
+<style lang="scss">
+.warn-result table {
+  width: 100% !important;
+}
+.warn-result table td a {
+  display: none;
+}
+.warn-result table img {
+  width: 100% !important;
+}
+.warn-result-message {
+  .warn-result-text {
+    font-size: 14px;
+    color: #303133;
+    a {
+      color: #409eff;
+      text-decoration: underline;
+    }
+  }
+  .warn-result-tips {
+    font-size: 12px;
+    color: #999;
+    margin-top: 10px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.goods--info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  .el-link {
+    font-size: 14px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  em {
+    font-size: 12px;
+    color: #999;
+    font-style: normal;
+  }
+}
+</style>