| | |
| | | <div class="tab-content"> |
| | | <!-- 查询条件筛选栏 --> |
| | | <div class="filter-bar"> |
| | | <el-input style="width: 250px" v-model="filters.key_word" placeholder="输入工单编号/名称/内容/姓名" class="filter-item" |
| | | clearable @keyup.enter="handleSearch" /> |
| | | <div class="search-bar-box"> |
| | | <div class="search-bar-box-item"> |
| | | <el-input v-model="filters.key_word" placeholder="输入工单编号/名称/内容/姓名" clearable |
| | | @keyup.enter="handleSearch" /> |
| | | </div> |
| | | |
| | | <el-select placeholder="请选择所属单位" v-model="filters.create_dept" @change="handleDepartmentChange" |
| | | class="filter-item" clearable> |
| | | <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value" /> |
| | | </el-select> |
| | | <div class="search-bar-box-item"> |
| | | <el-select placeholder="请选择所属单位" v-model="filters.create_dept" @change="handleDepartmentChange" |
| | | clearable> |
| | | <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value" /> |
| | | </el-select> |
| | | </div> |
| | | |
| | | <el-date-picker v-model="filters.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" class="filter-item" style="width: 100px" :default-value="datePickerDefaultVal" /> |
| | | <el-select v-model="filters.file_id" placeholder="请选择关联航线" class="filter-item frequency" clearable> |
| | | <el-option v-for="item in wayLineList" :key="item.wayline_id" :label="item.name" |
| | | :value="item.wayline_id" /> |
| | | </el-select> |
| | | <div class="search-bar-box-item"> |
| | | <el-date-picker v-model="filters.dateRange" type="daterange" range-separator="至" |
| | | start-placeholder="开始日期" end-placeholder="结束日期" :default-value="datePickerDefaultVal" /> |
| | | </div> |
| | | |
| | | <el-select v-model="filters.ai_types" placeholder="关联算法" class="filter-item" clearable> |
| | | <el-option v-for="item in ai_types" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" /> |
| | | </el-select> |
| | | <div class="search-bar-box-item"> |
| | | <el-select v-model="filters.file_id" placeholder="请选择关联航线" clearable> |
| | | <el-option v-for="item in wayLineList" :key="item.wayline_id" :label="item.name" |
| | | :value="item.wayline_id" /> |
| | | </el-select> |
| | | </div> |
| | | |
| | | <el-select v-model="filters.type" placeholder="请选择工单类型" class="filter-item" clearable> |
| | | <el-option v-for="item in types" :key="item.dictValue" :label="item.dictValue" :value="item.dictKey" /> |
| | | </el-select> |
| | | <div class="search-bar-box-item"> |
| | | <el-select v-model="filters.ai_types" placeholder="关联算法" clearable> |
| | | <el-option v-for="item in ai_types" :key="item.dictKey" :label="item.dictValue" |
| | | :value="item.dictKey" /> |
| | | </el-select> |
| | | </div> |
| | | |
| | | <el-select v-model="filters.status" placeholder="请选择工单状态" class="filter-item" clearable> |
| | | <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | <el-date-picker v-model="filters.cycleDateRange" type="daterange" range-separator="至" |
| | | start-placeholder="工单周期开始日期" end-placeholder="工单周期结束日期" class="filter-item" |
| | | :default-value="datePickerDefaultVal" style="width: 220px !important" /> |
| | | <el-select v-model="filters.rep_fre_type" placeholder="请选择频次" class="filter-item frequency"> |
| | | <el-option v-for="item in cycles" :key="item" :label="item" :value="item" /> |
| | | </el-select> |
| | | <el-time-picker style="width: 150px" v-model="filters.deal_time" placeholder="请选择执行时间" prop="deal_time" |
| | | value-format="HH:mm" :picker-options="{ |
| | | selectableRange: '00:00 - 23:59', |
| | | }" /> |
| | | <el-col :span="8"> </el-col> |
| | | <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
| | | <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button> |
| | | <div class="search-bar-box-item"> |
| | | <el-select v-model="filters.type" placeholder="请选择工单类型" clearable> |
| | | <el-option v-for="item in types" :key="item.dictValue" :label="item.dictValue" |
| | | :value="item.dictKey" /> |
| | | </el-select> |
| | | </div> |
| | | |
| | | <div class="search-bar-box-item"> |
| | | <el-select v-model="filters.status" placeholder="请选择工单状态" clearable> |
| | | <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="search-bar-box"> |
| | | <div class="search-bar-box-item flex-2"> |
| | | <el-date-picker v-model="filters.cycleDateRange" type="daterange" range-separator="至" |
| | | start-placeholder="工单周期开始日期" end-placeholder="工单周期结束日期" :default-value="datePickerDefaultVal" /> |
| | | </div> |
| | | |
| | | <div class="search-bar-box-item"> |
| | | <el-select v-model="filters.rep_fre_type" placeholder="请选择频次"> |
| | | <el-option v-for="item in cycles" :key="item" :label="item" :value="item" /> |
| | | </el-select> |
| | | </div> |
| | | |
| | | <div class="search-bar-box-item"> |
| | | <el-time-picker v-model="filters.deal_time" placeholder="请选择执行时间" prop="deal_time" value-format="HH:mm" |
| | | :picker-options="{ |
| | | selectableRange: '00:00 - 23:59', |
| | | }" /> |
| | | </div> |
| | | |
| | | <div class="search-bar-box-item"></div> |
| | | <div class="search-bar-box-item"></div> |
| | | |
| | | <div class="search-bar-box-item search-btn"> |
| | | <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button> |
| | | <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 表格部分 --> |
| | |
| | | <el-col :span="8"> |
| | | <el-form-item label="周期频次" prop="date_range"> |
| | | <el-date-picker v-model="form.date_range" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" class="date-picker" /> |
| | | end-placeholder="结束日期" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | |
| | | <el-col :span="6"> |
| | | <el-form-item label="周期频次" prop="date_range"> |
| | | <el-date-picker v-model="form.date_range" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" class="date-picker" /> |
| | | end-placeholder="结束日期" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | |
| | | <el-col :span="6"> |
| | | <el-form-item label="周期频次" prop="date_range"> |
| | | <el-date-picker v-model="form.date_range" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" class="date-picker" :disabled="true" /> |
| | | end-placeholder="结束日期" :disabled="true" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="3"> |
| | |
| | | { label: '工单状态', prop: 'status', width: 88 }, |
| | | { label: '所属单位', prop: 'dept_name', width: 100, ellipsis: true }, |
| | | { label: '发起时间', prop: 'create_time', width: 144, ellipsis: true }, |
| | | { label: '已执行次数', prop: 'job_num', width: 96, ellipsis: true }, |
| | | { label: '工单内容', prop: 'content', ellipsis: true, overHidden: true }, |
| | | { label: '关联航线', prop: 'wayline_name', width: 100, ellipsis: true, overHidden: true }, |
| | | { label: '关联算法', prop: 'ai_type_str', width: 100, ellipsis: true, overHidden: true }, |
| | |
| | | file_id: this.filters.file_id || undefined, |
| | | status: this.filters.status !== '' ? Number(this.filters.status) : currentTab?.value, |
| | | dept_id: this.filters.department || undefined, |
| | | creat_start_date: this.filters.dateRange?.[0] |
| | | create_start_date: this.filters.dateRange?.[0] |
| | | ? this.formatDate(this.filters.dateRange[0]) |
| | | : undefined, |
| | | create_end_date: this.filters.dateRange?.[1] |
| | |
| | | } |
| | | |
| | | .filter-bar { |
| | | display: flex; |
| | | // align-items: center; |
| | | margin-bottom: 15px; |
| | | flex-wrap: wrap; |
| | | |
| | | .filter-item { |
| | | margin-right: 20px; |
| | | margin-bottom: 10px; |
| | | width: 200px; |
| | | } |
| | | .search-bar-box { |
| | | margin-bottom: 15px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | gap: 8px; |
| | | |
| | | .frequency { |
| | | margin-left: 20px; |
| | | } |
| | | &-item { |
| | | flex: 1; |
| | | |
| | | .date-picker { |
| | | width: 240px; |
| | | &> ::v-deep(.el-date-editor) { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | |
| | | .search-btn { |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .flex-2 { |
| | | min-width: 454px; |
| | | } |
| | | } |
| | | } |
| | | |