赋码demo

fuliqi

2024-12-26 5b5a3ec32e479b6c43822fd0192cde6e2f3b31e5

赋码demo

 src/components/Process/style/flow-viewer.scss

@@ -131,6 +131,28 @@
    fill: rgba(252, 211, 127, 0.2) !important;
  }

  // 流程线
  .highlight-overtime.djs-shape .djs-visual > :nth-child(1) {
    fill: #ff5353 !important;
    stroke: #ff5353 !important;
    fill-opacity: 0.2 !important;
  }

  .highlight-overtime.djs-shape .djs-visual > :nth-child(2) {
    fill: #ff5353 !important;
  }

  .highlight-overtime.djs-shape .djs-visual > path {
    fill: #ff5353 !important;
    fill-opacity: 0.2 !important;
    stroke: #ff5353 !important;
  }

  .highlight-overtime.djs-connection > .djs-visual > path {
    stroke: #ff5353 !important;
  }


  @keyframes draw {
    100% {
      stroke-dashoffset: 0;
@@ -179,5 +201,14 @@
      color: #666666;
      margin-right: 5px;
    }

    .overtime {
      padding: 4px;
      background: #ffd1d1;
      border: 1px solid rgba(255, 0, 0, 0.1);
      border-radius: 3px;
      color: #ff5353;
      margin-right: 5px;
    }
  }
}

 src/components/Process/viewer/index.vue

@@ -7,6 +7,7 @@
          <div class="finish">已办理</div>
          <div class="processing">处理中</div>
          <div class="todo">未进行</div>
          <div class="overtime">已超时</div>
        </div>
        <!-- 流程图显示 -->
        <div v-loading="loading" class="canvas" ref="flowCanvas"></div>
@@ -109,6 +110,9 @@
        if (n.$type === 'bpmn:UserTask') {
          if (completeTask) {
            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
            if(completeTask.overtime){
              canvas.addMarker(n.id,  'highlight-overtime')
            }
            n.outgoing?.forEach(nn => {
              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
@@ -119,6 +123,7 @@
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }

              }
            })
          }

 src/views/flowable/task/myProcess/detail/index.vue

@@ -27,7 +27,10 @@
                  :icon="setIcon(item.finishTime)"
                  :color="setColor(item.finishTime)"
                >
                  <p style="font-weight: 700">{{item.taskName}}<span v-if="item.comment && item.comment.type === '3'" style="color: red">(执行了驳回)</span></p>
                  <p style="font-weight: 700">{{item.taskName}}
                    <span v-if="item.comment && item.comment.type === '3'" style="color: red">(执行了驳回)</span>
                    <span v-if="item.overtime" style="color: red">(已超时)</span>
                  </p>
                  <el-card :body-style="{ padding: '10px' }">
                    <el-descriptions class="margin-top" :column="1" size="small" border>
                      <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">

 src/views/projectEngineering/projectLibrary/component/FileDialog.vue

@@ -17,13 +17,13 @@
      <template slot="default">
        <div v-if="!isImportOrExport" class="dialog-content">
          <el-upload
            ref="uploadRef"
            ref="upload"
            class="upload-demo"
            :action="uploadUrl"
            :action="upload.url"
            :limit="1"
            :accept="accept"
            :headers="uploadHeaders"
            :disabled="uploadIsUploading"
            :headers="upload.headers"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
@@ -55,6 +55,8 @@

<script>

import {getToken} from "@/utils/auth";

export default {
  name: 'FileDialog',
  props: {
@@ -82,12 +84,20 @@
  data() {
    return {
      queryParams: {},
      uploadRef: null,
      targetColumn: [],
      accept: `.zip`,
      uploadUrl: '/project/import',
      uploadHeaders: {},
      uploadIsUploading: false
      upload:{
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/project/info/import'
      },
    };
  },
  methods: {
@@ -95,30 +105,20 @@
      console.log("子组件submit")
    },
    handleFileUploadProgress() {
      this.uploadIsUploading = true;
      this.upload.uploadIsUploading = true;
    },
    handleFileSuccess(response, file) {
      this.uploadIsUploading = false;
      if (this.uploadRef) {
        this.uploadRef.handleRemove(file);
      }
      if (response.code === 200) {
        this.$emit('fileDialogCancel');
        this.$message({
          message: response.msg,
          type: 'success'
        });
      } else {
        this.$message.error(response.msg);
      }
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
    },
    handleDownloadFile() {
      this.download('/project/info/export/template', {}, `项目文件模板_${new Date().getTime()}.zip`)
    },
    submitFileForm() {
      if (this.uploadRef) {
        this.uploadRef.submit();
      }
        this.$refs.upload.submit();
    },
    closeDialog() {
      this.$emit('fileDialogCancel');
@@ -145,12 +145,7 @@
      }, `项目库${new Date().getTime()}.zip`)
    }
  },
  mounted() {
    this.uploadRef = this.$refs.uploadRef;
  },
  created() {
    this.isFileDialogVisible = this.fileDialogVisible;
  }

};
</script>