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> |
| |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!