fix:增加进度条

rjg

2025-04-12 dce7074c544a3d03aca45e149be2c1efb6b67ada

fix:增加进度条

 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>