ConditionList.vue 条件列表

<template>
  <div class="w-full pt-2 pl-2">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      size="large"
      status-icon
      label-position="top"
    >
      <el-form-item prop="date" label="查询日期">
        <el-date-picker
          class="h-10 w-full pr-2"
          v-model="ruleForm.date"
          type="date"
          placeholder="请选择日期"
          size="large"
          id="date"
          style="width: 100%"
          :disabled-date="disableSelect"
          @change="addDate"
        />
      </el-form-item>

      <el-form-item prop="errorType" label="异常描述">
        <el-select-v2
          v-model="ruleForm.errorType"
          class="w-full pr-2"
          placeholder="请选择异常描述"
          size="large"
          :options="errorTypeOptions"
        />
      </el-form-item>
      <el-form-item prop="cstid" label="卡匣编号">
        <el-input
          class="h-10 pr-2"
          size="large"
          v-model="ruleForm.cstid"
          id="cstid"
          placeholder="请输入卡匣编号"
      /></el-form-item>
      <el-form-item prop="portid" label="PORT口:">
        <el-select
          v-model="ruleForm.portid"
          class="h-10 w-full pr-2"
          placeholder="请选择PORT"
          size="large"
          id="portid"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >查询</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
  // moment.js
  import moment from 'moment'
  import {
    ref,
    reactive,
    defineProps,
    computed,
    onMounted,
    defineEmits,
  } from 'vue'
  import type { FormRules, FormInstance } from 'element-plus'
  // pinia
  import { useLogStore } from '@/store/modules/logs'

  const useLog = useLogStore()
  const emits = defineEmits<{ (e: 'showLogRes', flag: boolean,emptyFlag:boolean): void }>()
  const multiDate = ref<string[]>([])
  // 设置30天之前的日期不可选择
  const disableSelect = (date:Date)=>{
    let newDate = moment(date).format("YYYY-MM-DD")
    let currentDate = moment().format("YYYY-MM-DD")
    if(moment(newDate).isAfter(currentDate)){
      return true
    }
    // 设置大于过去30天的时间不能被选择
    let current = moment().subtract(30,'days')
    return moment(current).diff(newDate)>0?true:false
  }



  // 表单对象
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    errorType: '',
    //   卡匣id
    cstid: '',
    // port id
    portid: '',
    date: '',
    // current device id,get from localStorage
    curDev: '',
  })
  // 当组件挂载的时候，默认获取当天的日期
  onMounted(()=>{
    console.log(moment().format("YYYY-MM-DD"))
    // ruleForm.date = moment().format("YYYY-MM-DD")
    multiDate.value.push(moment().format("YYYY-MM-DD"))
  })
  // 多选日期
  const addDate =(date:any)=>{
    multiDate.value.push(moment(date).format("YYYY-MM-DD"))
    console.log(multiDate)
    ruleForm.date = ''
  }

  const rules = reactive<FormRules>({
    errorType: [
      {
        // required: true,
        message: '请选择异常描述',
        trigger: 'change',
      },
    ],
    cstid: [
      {
        // required: true,
        message: '请输入卡匣编号',
        trigger: 'change',
      },
    ],
    portid: [
      {
        // required: true,
        message: '请选择PORT口',
        trigger: 'change',
      },
    ],
    date: [
      {
        // required: true,
        message: '请选择LOG日期',
        trigger: 'change',
      },
    ],
  })
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        console.log('submit!')
        ruleForm.curDev = localStorage.getItem('curDev') ?? ''
        // 将ruleForm中的date替换成字符串
        ruleForm.date = moment(ruleForm.date).format('YYYY-MM-DD')
        // 重置(pinia)logs中的store
        useLog.resetCurLogIdx()
        const res = await useLog.getLog(ruleForm)
        if (res === 'success') {
          // 显示结果列表和结果详情
          emits('showLogRes', true,false)
        }
        if(res ==='empty'){
          // 显示暂时没有error log,空log
          emits('showLogRes', false,true)
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  const errorTypeOptions = [
    {
      value: 'Option1',
      label: '卡匣异常退卡',
    },
    {
      value: 'Option2',
      label: '卡匣状态不符',
    },
    {
      value: 'Option3',
      label: 'Robot无动作',
    },
    {
      value: 'Option4',
      label: 'CPC无法切Online',
    },
  ]
  const options = [
    {
      value: '1',
      label: 'PORT 1',
    },
    {
      value: '2',
      label: 'PORT 2',
    },
    {
      value: '3',
      label: 'PORT 3',
    },
    {
      value: '4',
      label: 'PORT 4',
    },
    {
      value: '5',
      label: 'PORT 5',
    },
    {
      value: '6',
      label: 'PORT 6',
    },
  ]
</script>
<style scoped lang="css">
  :deep(.el-input__wrapper) {
    width: 100%;
  }
  :deep(.el-form-item__content) {
    justify-content: space-around;
  }
</style>