feat: 复制功能

罗广辉

2025-07-29 05e72087946e1da94beef3dff26166967f52de33

feat: 复制功能

 src/components/ElTooltipCopy.vue

New file
@@ -0,0 +1,52 @@
<template>
    <el-tooltip :show-after="200" placement="top" effect="dark">
    <div class="defaultDisplay" :style="{textAlign}">
      <slot name="default" />
    </div>
        <template #content>
            <span class="popUpContent" @click="clickTest">{{ showCopyText ? '复制' : content }}</span>
        </template>
    </el-tooltip>
</template>
<script setup>
import { ElMessage } from 'element-plus'

const props = defineProps({
    content: {
        type: String,
        required: true
    },
    showCopyText: {
        type: Boolean,
        default: false
    },
  textAlign:{
    type: String,
    default: 'center'
  }
})

function clickTest(e) {
    navigator.clipboard
        .writeText(props.content)
        .then(() => {
            ElMessage.success('复制成功！')
        })
        .catch(() => {
            ElMessage.error('复制失败，请重试！')
        })
}
</script>
<style scoped lang="scss">
.popUpContent{
    cursor: pointer;
}

.defaultDisplay{
  display: inline-block;
  width: 100%;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

 src/views/dataCenter/dataCenter.vue

@@ -35,7 +35,14 @@
          </el-table-column>
          <el-table-column property="nestName" label="所属机巢" />
          <el-table-column property="jobName" label="任务名称" show-overflow-tooltip />
          <el-table-column prop="nickName" label="文件名称" show-overflow-tooltip />
          <el-table-column prop="nickName" label="文件名称" width="160">
            <template #default="scope">
              <el-tooltip-copy :content="scope.row.nickName" :showCopyText="true">
                {{scope.row.nickName}}
              </el-tooltip-copy>
            </template>
          </el-table-column>

          <el-table-column property="link" label="缩略图" width="120">
            <template #default="scope">
              <img
@@ -304,6 +311,7 @@
import { getShowImg, getSmallImg, getzsSmallImg } from '@/utils/util';
import { onMounted, watch } from 'vue';
import dayjs from 'dayjs';
import ElTooltipCopy from '@/components/ElTooltipCopy.vue';

function bytesToMB(bytes, decimalPlaces = 2) {
  if (typeof bytes !== 'number' || bytes < 0) return '0';

 src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -3,15 +3,27 @@
    <div class="task-intermediate-content">
        <SearchBox @search="searchClick" @addTask="handleAddTask"></SearchBox>
        <div class="task-table">
            <el-table border :data="jobListData" class="custom-header" @cell-click="handleCellClick">
            <el-table border :data="jobListData" class="custom-header">
                <el-table-column label="序号" type="index" width="60">
                    <template #default="{ $index }">
                        {{ ($index + 1 + (jobListParams.current - 1) * jobListParams.size).toString().padStart(2,
                            '0') }}
                    </template>
                </el-table-column>
                <el-table-column prop="job_info_num" label="任务编号" show-overflow-tooltip align="center" />
                <el-table-column prop="name" label="任务名称" show-overflow-tooltip align="center" />
        <el-table-column prop="job_info_num" label="任务编号" width="160">
          <template #default="scope">
            <el-tooltip-copy :content="scope.row.job_info_num" :showCopyText="true">
              {{scope.row.job_info_num}}
            </el-tooltip-copy>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="任务编号" width="160">
          <template #default="scope">
            <el-tooltip-copy :content="scope.row.name" :showCopyText="true">
              {{scope.row.name}}
            </el-tooltip-copy>
          </template>
        </el-table-column>
                <el-table-column prop="dept_name" label="所属部门" width="200" align="center" />
                <el-table-column prop="device_names" label="所属机巢" />
                <el-table-column prop="ai_type_str" label="关联算法" show-overflow-tooltip align="center" />
@@ -108,6 +120,7 @@
import { useStore } from 'vuex'
import { cloneDeep } from 'lodash'
import { inject, onBeforeUnmount } from 'vue';
import ElTooltipCopy from '@/components/ElTooltipCopy.vue';
const store = useStore()
const singleUavHome = computed(() => store.state.home.singleUavHome)
const jobListParams = reactive({

 src/views/tickets/orderLog.vue

@@ -92,7 +92,19 @@
          <!-- 表格部分 -->
          <avue-crud class="ztzf-public-general-avue-crud" :data="tableData" :option="option" v-model:page="page"
            ref="crud" :table-loading="loading" @current-change="currentChange" @refresh-change="refreshChange"
            @on-load="onLoad" @search-change="searchChange" @size-change="sizeChange" @cell-click="handleCellClick" v-if="activeTab === tab.name">
            @on-load="onLoad" @search-change="searchChange" @size-change="sizeChange" v-if="activeTab === tab.name">
            <template #job_info_num="{row}">
              <el-tooltip-copy :content="row.job_info_num" :showCopyText="true" textAlign="left">
                {{ row.job_info_num }}
              </el-tooltip-copy>
            </template>

            <template #name="{ row }">
              <el-tooltip-copy :content="row.name" :showCopyText="true" textAlign="left">
                {{ row.name }}
              </el-tooltip-copy>
            </template>

            <template #menu-left>
              <el-button v-if="hasAddBtnPermission() && activeTab != 'WAIT_AUDIT'" type="primary" icon="el-icon-plus"
                @click="handleAdd">新建工单</el-button>
@@ -508,11 +520,13 @@
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 导入中文语言包
import weekday from 'dayjs/plugin/weekday';
import elTooltipCopy from '@/components/ElTooltipCopy.vue'

dayjs.extend(weekday);
dayjs.locale('zh-cn');

export default {
  components: { elTooltipCopy },
  name: 'TicketPage',
  data () {
    return {
@@ -582,8 +596,7 @@

        column: [
          {
            label: '工单编号', prop: 'job_info_num', width: 100, ellipsis: true, overHidden: true,
            showOverflowTooltip: true,
            label: '工单编号', prop: 'job_info_num', width: 150,
          },
          {
            label: '工单名称', prop: 'name', width: 100, ellipsis: true, overHidden: true,
@@ -602,7 +615,7 @@
            showOverflowTooltip: true,
          },
          {
            label: '已执行次数', prop: 'job_num', width: 96, ellipsis: true,
            label: '已执行次数', prop: 'job_num', width: 70, ellipsis: true,
            showOverflowTooltip: true,
          },
          {
@@ -887,7 +900,7 @@

          //     if (selectedTime < now) {
          //       return this.$message.warning('任务时间不能小于当前时间')
                

          //     }
          //   }
          // }
@@ -1347,7 +1360,7 @@
}

:deep(.el-textarea__inner) {
  resize: none; 
  resize: none;
}

.action-bar {

 src/views/tickets/ticket.vue

@@ -33,8 +33,18 @@
          <!-- 表格部分 -->
          <avue-crud class="ztzf-public-general-avue-crud" ref="avueCrud" v-model="tableData" :option="option"
            :data="tableData" v-model:page="page" @size-change="sizeChange" @current-change="handleCurrentChange"
            @refresh-change="refreshChange" :table-loading="loading" @selection-change="handleSelectionChange" @cell-click="handleCellClick"
            @refresh-change="refreshChange" :table-loading="loading" @selection-change="handleSelectionChange"
            :permission="permissionList" v-if="activeTab === tab.name">
            <template #orderNumber="{ row }">
              <el-tooltip-copy :content="row.orderNumber" :showCopyText="true" textAlign="left">
                {{ row.orderNumber }}
              </el-tooltip-copy>
            </template>
            <template #orderName="{ row }">
              <el-tooltip-copy :content="row.orderName" :showCopyText="true" textAlign="left">
                {{ row.orderName }}
              </el-tooltip-copy>
            </template>
            <template #menu-left>
              <el-button v-if="(activeTab === 'all' || activeTab === 'myTickets') && permissionList.addBtn"
                type="primary" icon="el-icon-plus" @click="handleAdd">新建工单</el-button>
@@ -540,12 +550,14 @@
import geoJson from '@/assets/geoJson.json'
import { mapGetters } from 'vuex'
import { getAdcodeObj } from '@/utils/disposeData'
import elTooltipCopy from '@/components/ElTooltipCopy.vue'
function regExp (label, name) {
  var reg = new RegExp(label + '=([^&]*)(&|$)', 'g')
  return name.match(reg)[0].split('=')[1]
}

export default {
  components: { elTooltipCopy },
  name: 'TicketPage',
  data () {
    return {
@@ -618,15 +630,15 @@

        column: [
          // { label: "序号", prop: "id", width: 70 },
          { label: '工单编号', prop: 'orderNumber', width: 120, overHidden: true, tooltip: true },
          { label: '工单编号', prop: 'orderNumber', width: 170 },
          { label: '工单名称', prop: 'orderName', width: 150, overHidden: true, tooltip: true },
          { label: '所属单位', prop: 'department', overHidden: true, tooltip: true },
          { label: '所属单位', prop: 'department',width: 150, overHidden: true, tooltip: true },
          { label: '发起时间', prop: 'startTime', width: 160 },
          { label: '关联算法', prop: 'aiType', width: 150, overHidden: true, tooltip: true },
          {
            label: '工单类型',
            prop: 'type',
            width: 130,
            width: 110,
            overHidden: true,
            tooltip: true,
            type: 'select',
@@ -639,8 +651,8 @@
            width: 152,
            overHidden: true,
          },
          { label: '创建人', prop: 'creator', width: 100 },
          { label: '处理人', prop: 'handler', width: 100 },
          { label: '创建人', prop: 'creator', width: 70 },
          { label: '处理人', prop: 'handler', width: 70 },
          {
            slot: true,
            hide: false,