feat:更换表单组件

张含笑

2025-11-20 4db013555a528c2320e7da63f999c18cdf33b543

feat:更换表单组件

 src/views/tickets/ticket.vue

@@ -184,7 +184,7 @@
            </template>
          </el-table-column>
          
          <el-table-column prop="content" label="工单内容" width="152" show-overflow-tooltip>
          <el-table-column prop="content" label="工单内容" width="132" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.address || row.content }}
            </template>
@@ -214,7 +214,7 @@
          </el-table-column>
          
          <!-- 操作列 -->
          <el-table-column label="操作" width="150" fixed="right">
          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <template v-if="row.status === -1">
                <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
@@ -397,7 +397,6 @@
<script>
import { pxToRem, pxToRemNum } from '@/utils/rem';
import { getSmallImg, getShowImg } from '@/utils/util';
import { ElMessageBox, ElLoading } from 'element-plus';
import { calculateDefaultRange } from '@/utils/util';
import { gcj02ToWgs84, wgs84ToGcj02 } from '@/utils/coordinateTransformation';
import _ from 'lodash';
@@ -416,8 +415,7 @@
import { getAdcodeObj } from '@/utils/disposeData';
import elTooltipCopy from '@/components/ElTooltipCopy.vue';
import getBaseConfig from '@/buildConfig/config';
import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue';
import { CircleClose } from '@element-plus/icons-vue';

import RecheckDialog from '@/views/tickets/ticketComponent/RecheckDialog.vue';
import DispatchDialog from '@/views/tickets/ticketComponent/DispatchDialog.vue';
import CreateTicketDialog from '@/views/tickets/ticketComponent/CreateTicketDialog.vue';
@@ -430,13 +428,13 @@
}

export default {
  components: { elTooltipCopy, CreateQRcode,RecheckDialog,DispatchDialog,CreateTicketDialog,TicketDetailDialog, },
  components: { elTooltipCopy, RecheckDialog,DispatchDialog,CreateTicketDialog,TicketDetailDialog, },
  name: 'TicketPage',
  data() {
    return {
      currentIndex: null, // 当前显示的数据索引
      finalizeLoading: false,
      createoredit: '',

      activeTab: 'all',
      // tabs 只保留静态结构，不做权限判断
      tabs: [
@@ -467,7 +465,7 @@

      algorithms: [],
      algorithms2: [],
      algorithms3: [],

      statuses: [
        { label: '待审核', value: '2' },
        { label: '待处理', value: '0' },
@@ -540,7 +538,7 @@
      },
      dialogVisible: false,
       editFormData: null, // 专门用于存储编辑数据的对象
        createoredit: '', // 可以删除这个字段，因为组件内部会判断

      detailVisible: false,
      currentDetail: {},
    
@@ -600,7 +598,7 @@
    }

    let curQueryParams = {};
    let isTabProcessed = false;

    if (href.indexOf('?') != -1 && href.split('?').length > 0) {
      curQueryParams = href
        .split('?')[1]
@@ -658,25 +656,11 @@
    this.fetchTableData();
  },
  computed: {
    CircleClose() {
      return CircleClose;
    },

    firstRowData() {
      return this.tableData.length > 0 ? this.tableData[0] : null;
    },
    availableHandlers() {
      return this.form.department ? this.departmentUsers[this.form.department] || [] : [];
    },
    availableDispatchHandlers() {
      return this.dispatchForm.department
        ? this.departmentUsers[this.dispatchForm.department] || []
        : [];
    },

    dynamicFixedStatuses() {
      // 直接使用接口返回的 stepInfos
      return this.stepInfos.map(step => String(step.status));
    },
    ...mapGetters(['userInfo', 'permission']),
    // 动态过滤tabs，保证isShow为true/false
    filteredTabs() {
@@ -790,22 +774,7 @@
      this.filters.type = '';
      this.fetchTableData();
    },
    handleCellClick(row, column) {
      console.log(row, column.no);
      if (column.no === 2) {
        navigator.clipboard.writeText(row.orderNumber).then(() => {
          this.$message.success('复制工单编号成功');
        });
      } else if (column.no === 3) {
        navigator.clipboard.writeText(row.orderName).then(() => {
          this.$message.success('复制工单名称成功');
        });
      } else if (column.no === 4) {
        navigator.clipboard.writeText(row.department).then(() => {
          this.$message.success('复制所属部门成功');
        });
      }
    },

     // 上一项
    handlePrevItem() {
      this.currentIndex = Math.max(0, this.currentIndex - 1);
@@ -820,10 +789,10 @@
 
    // 更新当前详情
    updateCurrentDetail() {  
      this.currentDetail = this.tableData[this.currentIndex];
      this.currentDetail = this.tableData[this.currentIndex];   
      this.currentDetail.mediaUrl = this.currentDetail.photo_url;
      this.currentDetail.updatePhotoUrl = this.currentDetail.update_photo_url;
      this.currentDetail.processingDetail = this.currentDetail.processingDetail;
      this.currentDetail.processingDetail = this.currentDetail.processing_details;
      this.currentDetail.showQR = false;
      this.currentDetail.latAndLon = _.round(this.currentDetail.location[0], 6) + ',' + _.round(this.currentDetail.location[1], 6);
       this.getStepInfoData(this.currentDetail.orderNumber);
@@ -1032,7 +1001,6 @@
      if (!typeValue) {
        // 未选择类型时清空算法列表
        this.algorithms2 = [];
        this.algorithms3 = [];
        return;
      }

@@ -1045,8 +1013,7 @@
      ) {
        // 无匹配的算法时清空
        this.algorithms2 = [];
         this.algorithms3 = [];
        this.$message.info('该工单类型暂无关联算法');

        return;
      }
      this.algorithms2 = matchedCategory.algorithms.map(algo => ({
@@ -1055,12 +1022,7 @@
        dict_key: algo.dict_key,
        dict_value: algo.dict_value,
      }));
        this.algorithms3 = matchedCategory.algorithms.map(algo => ({
        label: algo.dict_value,
        value: algo.dict_key,
        dict_key: algo.dict_key,
        dict_value: algo.dict_value,
      }));
       
    },
    formatDate(date) {
      if (!date) return undefined;
@@ -1229,6 +1191,8 @@
  }
},
   async handleViewDetail(row) {
   console.log('row',row);
   
  // 找到当前行在tableData中的索引
  this.currentIndex = this.tableData.findIndex(item => item.id === row.id);
  // 先设置workType，直接从row读取
@@ -1757,32 +1721,7 @@
  },
};
</script>
<style lang="scss">

.custom-qrcode-popover {
  min-width: 160px !important;
  min-height: 140px !important;
  position: relative;

  .qrcode-content {
    margin-top: 8px;

    .close-btn {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      cursor: pointer;
      color: #999;
      font-size: 16px;
      z-index: 10;
    }
  }
}
</style>
<style lang="scss" scoped>
.dataTable {
height: 565px;
@@ -1884,28 +1823,6 @@
  margin-bottom: 32px;
}

.tableCss {
  width: 100%;
  margin-bottom: 10px;
}

.step-timer {
  position: absolute;
  right: 80%;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  margin-left: 4px;
  color: #666;
  font-size: 12px;
}

.event-total-time {
  text-align: center;
  color: #666;
  font-size: 15px;
  margin-bottom: 12px;
}

.action-bar {
  margin-bottom: 16px;