guzijian / bsth-alcohol-sign-web · Files

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="工号" prop="jobCode">
        <el-input style="width: 120px;" v-model="queryParams.jobCode" placeholder="请输入工号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="打卡结果" prop="status">
        <el-select style="width: 120px;" v-model="queryParams.status" placeholder="打卡结果" clearable>
          <el-option v-for="dict in sign_in" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="酒精测试" prop="alcoholFlag">
        <el-select style="width: 120px;" v-model="queryParams.alcoholFlag" placeholder="是否酒测" clearable>
          <el-option v-for="dict in alcohol" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="签到签退" prop="type">
        <el-select style="width: 120px;" v-model="queryParams.type" placeholder="签到签退" clearable>
          <el-option v-for="dict in sign_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="打卡日期" prop="date">
        <!-- 日期 -->
        <el-date-picker style="width: 140px;" v-model="queryParams.date" type="date" align="right" unlink-panels
          format="YYYY/MM/DD" value-format="YYYY-MM-DD">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="打卡场地" prop="date">
        <el-select style="width: 120px;" filterable v-model="queryParams.siteName" placeholder="打卡场地" clearable>
          <el-option v-for="dict in siteNameList" :key="dict" :label="dict" :value="dict" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          v-hasPermi="['in:in:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="CirclePlus" @click="handleAdd"
          v-hasPermi="['in:in:signature']">补签</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table height="600" v-loading="loading" :data="inList" row-key="id" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" /><el-table-column label="序号" type="index" width="50"
        align="center">
        <template #default="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="主键" align="center" prop="id" /> -->
      <el-table-column label="工号" align="center" prop="jobCode" />
      <el-table-column label="工种" align="center" prop="posts" />
      <el-table-column label="姓名" align="center" prop="name" />
      <!-- <el-table-column label="签到设备" v-show="false" align="center" prop="deviceId" width="130" /> -->
      <el-table-column label="图片" align="center" prop="image">
        <template #default="scope">
          <view v-if="!isEmpty(scope.row.image)">
             <image-preview  :src="scope.row.image" :width="50" :height="50" />
          </view>

          <view v-else>
            <img src="" />
          </view>
         
        </template>
      </el-table-column>
      <el-table-column label="打卡结果" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="sign_in" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="酒精测试" align="center" prop="alcoholFlag">
        <template #default="scope">
          <dict-tag :options="alcohol" :value="scope.row.alcoholFlag" />
        </template>
      </el-table-column>
      <el-table-column label="签到签退" align="center" prop="type">
        <template #default="scope">
          <dict-tag :options="sign_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="酒精摄入量" align="center" prop="alcoholIntake" width="150" />
      <el-table-column label="备注" align="center" prop="remark" width="300" />
      <el-table-column label="打卡场地" align="center" prop="siteName" width="130" />
      <el-table-column label="打卡时间" align="center" prop="createTime" width="160" />

      <el-table-column label="打卡操作" align="center" prop="singnIn" width="120">
        <template #default="scope">
          <view><dict-tag :options="sys_status" :value="scope.row.singnIn ? scope.row.singnIn.split(',') : []" /></view>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center"  width="100">
        <template #default="scope">
          <el-button type="primary"  @click="openVideoDialog(scope.row)" v-if="displayViedeo(scope.row)">查看视频</el-button>
        </template>
      </el-table-column>
      
     
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改签到对话框 -->
    <el-dialog :title="title" v-model="open" width="500px">
      <el-form ref="inRef" v-loading="dialogLoading" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="补签人" prop="jobCode">
          <el-select v-model="form.jobCode" filterable placeholder="选择补签人员">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="签到设备" prop="deviceId">
          <el-select v-model="form.deviceId" filterable placeholder="选择设备号">
            <el-option v-for="item in deviceIdOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <image-upload v-model="form.image" />
        </el-form-item>
        <el-form-item label="酒精测试" prop="alcoholFlag">
          <el-radio-group v-model="form.alcoholFlag">
            <el-radio v-for="dict in alcohol" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label
              }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="签到签退" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio v-for="dict in sign_type" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label
              }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="补签日期" prop="date">
          <el-date-picker clearable v-model="form.date" type="date" value-format="YYYY-MM-DD" placeholder="请选择补签日期 ">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="补签时间" prop="createTime">
          <el-select v-model="form.createTime" v-loading="signLoading" :disabled="isDisabled" filterable
            placeholder="选着补签时间">
            <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

      <el-dialog title="查看签到视频" v-model="videoURLOpen" width="1200px">
        <view v-html="videoHTMl" style="width: 900px; height: 800px;text-align: center;"></view>
      </el-dialog>
    
  </div>

  
</template>

<script setup>
import { getPeopleInfo } from '@/api/attendance/attendance';
import { getEquipmentAll, getEquipmentSiteName } from "@/api/equipment/equipment";
import { delIn, getIn, listIn, supplementarySignature } from "@/api/in/in";
import { getReportDetail } from "@/api/report/report.js";
import moment from "moment";
import { computed, ref, watch,onMounted,onBeforeMount  } from "vue";
const { proxy } = getCurrentInstance();
const { sys_status, sign_type, sign_in, alcohol } = proxy.useDict('sys_status', 'sign_type', 'sign_in', 'alcohol');
const siteNameList = ref([])
const inList = ref([]);
const signLoading = ref(false)
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const dialogLoading = ref(false)
const total = ref(0);
const title = ref("");
const videoHTMl = ref("");
const videoURLOpen=ref(false);
const sort = ref(0)
const timer = ref(0);
const options = ref([])
const dateOptions = ref([])
const isDisabled = computed(() => {
  getDateOptions(form.value.jobCode && form.value.date)
  return !(form.value.jobCode && form.value.date)
})
const deviceIdOptions = ref([])
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    jobCode: null,
    ip: null,
    image: null,
    status: null,
    singnIn: null,
    alcoholFlag: null,
    type: null,
    alcoholIntake: null,
    date: null
  },
  rules: {

  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询签到列表 */
function getList() {
  loading.value = true;
  listIn(queryParams.value).then(response => {
    inList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 查询签到列表 */
function getListTimer() {
  listIn(queryParams.value).then(response => {
    inList.value = response.rows;
    total.value = response.total;
  });
}
// 默认当天
nextTick(() => {
  // date默认当天
  queryParams.value.date = moment().format("YYYY-MM-DD");
})
onDeactivated(() => {
  clearInterval(timer.value)
})
onBeforeUnmount(() => {
  clearInterval(timer.value);
  console.log(timer.value);
  
})
onBeforeMount(()=>{
})
onActivated(()=>{
})
onMounted(() => {
  getEquipmentSiteName().then((res) => {
    siteNameList.value = res.data
  });
  queryParams.value.date = moment().format("YYYY-MM-DD");
  getList();
  timer.value = setInterval(() => {
    getListTimer();
  }, 3000);
});
// 取消按钮
function cancel() {
  open.value = false;
  dateOptions.value = []
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    createTime: null,
    jobCode: null,
    ip: null,
    image: null,
    status: null,
    updateBy: null,
    singnIn: [],
    alcoholFlag: null,
    type: null,
    updateTime: null,
    alcoholIntake: null,
    remark: null
  };
  proxy.resetForm("inRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  const str = "0,1,2,3";
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 补签按钮操作 */
function handleAdd() {
  reset();
  const currentTime = moment().format('HH:mm');
  let nowDate;
  if (currentTime < '02:30') {
    nowDate = moment().subtract(1, 'day').format('YYYY-MM-DD');
  } else {
    nowDate = moment().format("YYYY-MM-DD");
  }
  open.value = true;
  title.value = "补签";
  dialogLoading.value = true
  getDeviceIdOptions();
  form.value = {
    id: null,
    createTime: null,
    date: nowDate,
    jobCode: null,
    deviceId: "001",
    ip: null,
    image: null,
    status: 1,
    updateBy: null,
    singnIn: ["2"],
    alcoholFlag: 1,
    type: 1,
    updateTime: null,
    alcoholIntake: 0,
    remark: null
  };
  if (options.value.length == 0) {
    getPeopleInfo({ id: null }).then((res) => {
      res.data.forEach(element => {
        options.value.push({
          label: element.jobCode + "/" + element.name,
          value: element.jobCode
        })
      });
      dialogLoading.value = false
    })
  } else {
    dialogLoading.value = false
  }

}

const getDateOptions = (result) => {
  dateOptions.value = []
  form.value.createTime = null
  if (result) {
    signLoading.value = true;
    getReportDetail({
      jobCode: form.value.jobCode ? form.value.jobCode : "",
      date: form.value.date ? form.value.date : ""
    }).then((res) => {
      res.data.forEach(item => {
        dateOptions.value.push({
          value: item.planTime,
          label: item.planTime
        })
      })
      signLoading.value = false;
    });
  }
}

const getDeviceIdOptions = () => {
  getEquipmentAll().then(res => {
    deviceIdOptions.value = res.data
  })
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getIn(_id).then(response => {
    form.value = response.data;
    form.value.singnIn = form.value.singnIn.split(",");
    open.value = true;
    title.value = "补签";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["inRef"].validate(valid => {
    if (valid) {
      form.value.singnIn = form.value.singnIn.join(",");
      if (form.value.id != null) {
        supplementarySignature(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        supplementarySignature(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除签到编号为"' + _ids + '"的数据项？').then(function () {
    return delIn(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('in/in/export', {
    ...queryParams.value
  }, `${queryParams.value.date}打卡记录表.xlsx`)
}

function openVideoDialog(data){
  videoHTMl.value ="<video controls height=600 width=\"100%\" ><source src=\""+data.videoURL+"\" type=\"video/mp4\" /></video>";
  videoURLOpen.value=true;
}

function displayViedeo(data){
  return null != data.videoURL && undefined != data.videoURL && '' != data.videoURL
}

function isEmpty(val){
  return null == val|| undefined == val || "" == val;
}

getList();
</script>