From dce7074c544a3d03aca45e149be2c1efb6b67ada Mon Sep 17 00:00:00 2001
From: rjg <746338628@qq.com>
Date: Sat, 12 Apr 2025 12:11:38 +0800
Subject: [PATCH] fix:增加进度条
---
src/views/tickets/orderLog.vue | 241 ++++++++++++++++++++++++++++++-----------------
1 files changed, 154 insertions(+), 87 deletions(-)
diff --git a/src/views/tickets/orderLog.vue b/src/views/tickets/orderLog.vue
index 5a8d826..734aff9 100644
--- a/src/views/tickets/orderLog.vue
+++ b/src/views/tickets/orderLog.vue
@@ -259,6 +259,38 @@
@close="resetForm"
>
<el-form :model="form" ref="form" label-width="100px">
+
+
+ <div class="custom-steps-container">
+ <!-- 标题行 -->
+ <div class="steps-titles" >
+
+ <div v-for="(record, index) in form.record_list" :class="{ 'active': record.user_id >=0 }" :key="index" class="step-title" >{{record.status_str}}</div>
+
+
+
+
+ </div>
+
+ <!-- Element Steps 组件 -->
+ <el-steps :active="form.active" align-center class="custom-steps" >
+
+ <el-step v-for="(record, index) in form.record_list" :key="index">
+ <template #description>
+ <div class="step-description">{{record.user_name}}</div>
+ </template>
+ </el-step>
+
+
+
+
+
+
+ </el-steps>
+</div>
+
+
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="工单名称" prop="name">
@@ -356,6 +388,7 @@
<el-col :span="3">
<el-time-picker
+ style="width: 100px"
v-model="form.deal_time"
prop="deal_time"
value-format="HH:mm"
@@ -378,12 +411,12 @@
orderLogRecall,
orderLogReject,
orderLogPass,
- orderLogExport
+ orderLogExport,
} from '@/api/tickets/orderLog';
import { getDictionary } from '@/api/system/dictbiz';
-import{getWaylineFileListByArea} from '@/api/resource/wayline';
+import { getWaylineFileListByArea } from '@/api/resource/wayline';
import { export_json_to_excel } from '@/utils/exportExcel';
-import {getFlyingNestBy} from '@/api/device/device';
+import { getFlyingNestBy } from '@/api/device/device';
import { mapGetters } from 'vuex';
import NProgress from 'nprogress';
import { downloadXls } from '@/utils/util';
@@ -414,10 +447,10 @@
},
departments: [],
types: [],
- device_sns:[],
+ device_sns: [],
ai_types: [],
- wayLineList:[],
-
+ wayLineList: [],
+
statuses: [
{ label: '草稿', value: '0' },
{ label: '待审核', value: '1' },
@@ -452,8 +485,8 @@
{ label: '工单内容', prop: 'content', width: 160 },
{ label: '关联航线', prop: 'wayline_name', width: 160 },
{ label: '关联算法', prop: 'ai_type_str', width: 180 },
- { label: '关联机巢', prop: 'device_names', width: 180 },
-
+ { label: '关联机巢', prop: 'device_names', width: 180 },
+
{ label: '创建人', prop: 'creator_name', width: 180 },
{ label: '关联机巢', prop: 'device_names', width: 108 },
{
@@ -498,15 +531,13 @@
var response = await getDictionary({ code: 'SF' });
var word_order_typeResponse = await getDictionary({ code: 'WORK_ORDER_TYPE' });
this.ai_types = response.data.data;
- this.types=word_order_typeResponse.data.data;
-
+ this.types = word_order_typeResponse.data.data;
},
mounted() {
this.fetchTableData();
},
computed: {
...mapGetters(['userInfo']),
-
},
methods: {
@@ -544,11 +575,10 @@
return row.begin_time + '-' + row.end_time + ' ' + row.rep_rule_val;
},
-
async fetchTableData() {
this.loading = true;
try {
- let params=this.getQueryParam();
+ let params = this.getQueryParam();
console.log('发送的参数:', params);
const response = await getList(params);
if (!response?.data?.data?.records) {
@@ -576,32 +606,31 @@
}
},
- getQueryParam(){
+ getQueryParam() {
const currentTab = this.tabs.find(tab => tab.name === this.activeTab);
- const params = {
- key_word: this.filters.key_word || undefined,
- create_dept: this.filters.create_dept || undefined,
- ai_types:
- this.filters.ai_types && this.filters.ai_types.length > 0
- ? [this.filters.ai_types]
- : null,
- file_id: this.filters.file_id || undefined,
- status: this.filters.status !== '' ? Number(this.filters.status) : currentTab?.value,
- dept_id: this.filters.department || undefined,
- start_date: this.filters.dateRange?.[0]
- ? this.formatDate(this.filters.dateRange[0])
- : undefined,
- end_date: this.filters.dateRange?.[1]
- ? this.formatDate(this.filters.dateRange[1]).replace('00:00:00', '23:59:59')
- : undefined,
- current: this.pagination.currentPage,
- size: this.pagination.pageSize,
- };
- return params;
+ const params = {
+ key_word: this.filters.key_word || undefined,
+ create_dept: this.filters.create_dept || undefined,
+ ai_types:
+ this.filters.ai_types && this.filters.ai_types.length > 0
+ ? [this.filters.ai_types]
+ : null,
+ file_id: this.filters.file_id || undefined,
+ status: this.filters.status !== '' ? Number(this.filters.status) : currentTab?.value,
+ dept_id: this.filters.department || undefined,
+ start_date: this.filters.dateRange?.[0]
+ ? this.formatDate(this.filters.dateRange[0])
+ : undefined,
+ end_date: this.filters.dateRange?.[1]
+ ? this.formatDate(this.filters.dateRange[1]).replace('00:00:00', '23:59:59')
+ : undefined,
+ current: this.pagination.currentPage,
+ size: this.pagination.pageSize,
+ };
+ return params;
},
-
async submitForm(status) {
this.$refs.form.validate(async valid => {
if (valid) {
@@ -625,28 +654,24 @@
}
this.dialogVisible = false;
this.detailVisible = false;
- this.device_sns=[],
- this.wayLineList=[],
- this.fetchTableData();
+ (this.device_sns = []), (this.wayLineList = []), this.fetchTableData();
}
});
},
//驳回原因显示
- async rejectDetail(id){
- const response = await orderLogDetails(id);
- let data=response.data.data;
+ async rejectDetail(id) {
+ const response = await orderLogDetails(id);
+ let data = response.data.data;
this.$confirm(data.remark, '驳回原因', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- this.form = {
- ...response.data.data,
- };
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning',
+ }).then(() => {
+ this.form = {
+ ...response.data.data,
+ };
this.detailVisible = true;
- })
-
-
+ });
},
formatDate(date) {
if (!date) return undefined;
@@ -747,7 +772,7 @@
handleAdd() {
this.form = {};
this.dialogVisible = true;
- //航线列表
+ //航线列表
this.asyncgetWaylineFileListByArea();
},
@@ -782,48 +807,42 @@
this.detailVisible = true;
//航线列表
this.asyncgetWaylineFileListByArea();
- this.device_sns=response.data.data.deviceList;
+ this.device_sns = response.data.data.deviceList;
},
- //导出
+ //导出
async exportData() {
-
- this.$confirm('是否智飞工单数据?', '提示', {
+ this.$confirm('是否智飞工单数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
NProgress.start();
- let params=this.getQueryParam();
+ let params = this.getQueryParam();
orderLogExport(params).then(res => {
downloadXls(res.data, `智飞工单${this.$dayjs().format('YYYY-MM-DD')}.xlsx`);
NProgress.done();
});
});
-
- },
-
-
+ },
refreshChange() {
this.fetchTableData();
},
//获取航线列表
- async asyncgetWaylineFileListByArea(name){
- var wayLineListResponse= await getWaylineFileListByArea(this.userInfo.detail.areaCode);
- this.wayLineList=wayLineListResponse.data.data;
-
-},
- //可飞行机巢列表
- async getFlyingNestBy(waylineId){
- //按照航线来
- const params = {
- type:0,
- waylineId:waylineId,
- }
- var wayLineListResponse= await getFlyingNestBy(params);
- this.device_sns=wayLineListResponse.data.data;
-
-},
+ async asyncgetWaylineFileListByArea(name) {
+ var wayLineListResponse = await getWaylineFileListByArea(this.userInfo.detail.areaCode);
+ this.wayLineList = wayLineListResponse.data.data;
+ },
+ //可飞行机巢列表
+ async getFlyingNestBy(waylineId) {
+ //按照航线来
+ const params = {
+ type: 0,
+ waylineId: waylineId,
+ };
+ var wayLineListResponse = await getFlyingNestBy(params);
+ this.device_sns = wayLineListResponse.data.data;
+ },
//撤回
async orderLogRecall(id) {
@@ -852,18 +871,18 @@
* 驳回
*/
async orderLogReject(id) {
- this.$prompt('','驳回原因',{
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- }).then(async({ value }) => {
- let response = await orderLogReject(id, value);
- let data = response.data.data;
- this.$message.success('驳回成果');
- this.detailVisible = false;
- });
+ this.$prompt('', '驳回原因', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ }).then(async ({ value }) => {
+ let response = await orderLogReject(id, value);
+ let data = response.data.data;
+ this.$message.success('驳回成果');
+ this.detailVisible = false;
+ });
},
},
-
+
watch: {
tableData: {
handler() {
@@ -951,4 +970,52 @@
color: #909399;
margin-top: 7px;
}
+
+
+
+.custom-steps-container {
+ width: 100%;
+ margin: 20px 0;
+}
+
+.steps-titles {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 16px;
+ position: relative;
+}
+
+.step-title {
+ text-align: center;
+ flex: 1;
+ font-size: 16px;
+ color: #999;
+ position: relative;
+ padding-bottom: 10px;
+}
+
+.step-title.active {
+ color: #409EFF;
+ font-weight: bold;
+}
+
+.custom-steps {
+ margin-top: -20px; /* 向上移动与标题重叠 */
+}
+
+.el-step__head {
+ margin-top: 0;
+}
+
+.el-step__description {
+ margin-top: 8px;
+ padding: 0 20px;
+}
+
+.step-description {
+ font-size: 14px;
+ color: #666;
+ line-height: 1.5;
+}
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3