laws-sinotruk-client/src/views/workCenter/NewProcess.vue

<template>
  <a-card :bordered="false">
    <div v-for="data in dataList" :key="data.uid">
      <div class="title-wrapper"><span class="title-span">{{ data.text }}</span></div>
      <div class="list-wrapper">
        <div v-for="item in data.list" :key="item.title" class="list-cont" @click="processClick(item)">{{ item.title }}</div>
      </div>
    </div>
  </a-card>
</template>

<script>
export default {
  name: 'NewProcess',
  data () {
    return {
      dataList: [
        { // 外部标准管理流程
          uid: 1,
          text: this.$t('workCenter.newProcess.externalStandardsManagementProcess'),
          list: [
            { // 标准法规入库/更正流程
              title: this.$t('workCenter.newProcess.standardRegulationEntryCorrectionProcess'),
              path: '/workCenter/StandardEntryOrChangeProcess'
            },
            { // 标准征求意见流程
              title: this.$t('workCenter.newProcess.annotateTheConsultationProcess'),
              path: '/workCenter/StandardConsultationProcess'
            },
            { // 项目合规评估流程
              title: this.$t('workCenter.newProcess.projectComplianceAssessmentProcess'),
              path: ''
            },
            { // 未符合项跟踪流程
              title: this.$t('workCenter.newProcess.noMatchTrackingProcess'),
              path: ''
            },
            { // 法规合规评估流程
              title: this.$t('workCenter.newProcess.regulatoryComplianceAssessmentProcess'),
              path: ''
            },
            { // 法规采购流程
              title: this.$t('workCenter.newProcess.regulatoryProcurementProcess'),
              path: ''
            }
          ]
        },
        { // 企标管理流程
          uid: 2,
          text: '企标管理流程',
          list: [
            { // 企标立项/变更计划
              title: this.$t('workCenter.newProcess.enterpriseProjectChangePlan'),
              path: '/workCenter/enterpriseStandardInitChange/planApprovalChangeFlow'
            },
            { // 年度制修订计划审批流程(各部门主动上报)
              title: this.$t('workCenter.newProcess.annualRevisionPlanActivelyReport'),
              path: '/workCenter/annualRevisionPlanActivelyReport/revisionPlanActivelyReportFlow'
            },
            { // 年度制修订计划审批流程(标准化发起)
              title: this.$t('workCenter.newProcess.annualRevisionPlanStandardizationInit'),
              path: '/workCenter/annualRevisionPlanStandardizationInit/revisionPlanStandardizationInitFlow'
            },
            { // 企标制修订流程
              title: this.$t('workCenter.newProcess.enterpriseStandardSystemRevisionProcess'),
              path: '/workCenter/enterpriseStandardRevision/enterpriseStandardRevisionFlow'
            },
            { // 企标更改流程
              title: this.$t('workCenter.newProcess.bidChangeProcess'),
              path: '/workCenter/enterpriseStandardChange/enterpriseStandardChangeFlow'
            },
            { // 企标复审流程
              title: this.$t('workCenter.newProcess.processOfEnterpriseBidReview'),
              path: '/workCenter/enterpriseStandardRecheck/enterpriseStandardRecheckFlow'
            },
            { // 企标废止流程
              title: this.$t('workCenter.newProcess.processOfEnterpriseBidAnnulment'),
              path: '/workCenter/enterpriseStandardAnnul/enterpriseStandardAnnulFlow'
            },
            { // 企标封存流程
              title: this.$t('workCenter.newProcess.processOfSealingEnterpriseStandard'),
              path: '/workCenter/enterpriseStandardSealSave/enterpriseStandardSealSaveFlow'
            },
            { // 已封存企标启用流程
              title: this.$t('workCenter.newProcess.theSealedEnterpriseBidHasBeenActivatedProcess'),
              path: '/workCenter/enterpriseStandardStartUse/enterpriseStandardStartUseFlow'
            },
            { // 企标稽查计划
              title: this.$t('workCenter.newProcess.enterpriseStandardAuditPlan'),
              path: '/workCenter/EnterpriseStandardInspectionPlan'
            },
            { // 企标稽查流程
              title: this.$t('workCenter.newProcess.processOfEnterpriseStandardAudit'),
              path: '/workCenter/EnterpriseStandardInspectionProcess'
            },
            { // 稽查延期申请流程
              title: this.$t('workCenter.newProcess.auditExtensionApplicationProcess'),
              path: '/workCenter/InspectionExtensionRequestProcess'
            },
            { // 企标稽查整改
              title: this.$t('workCenter.newProcess.enterpriseStandardInspectionAndRectification'),
              path: '/workCenter/EnterpriseStandardInspectionRectification'
            },
            { // 权限申请流程
              title: this.$t('workCenter.newProcess.permissionApplicationProcess'),
              path: ''
            },
            { // 标准宣贯流程
              title: this.$t('workCenter.newProcess.standardPromotionProcess'),
              path: ''
            }
          ]
        },
        { // 工作组相关流程
          uid: 3,
          text: this.$t('workCenter.newProcess.workgroupProcess'),
          list: [
            { // 会后管理流程
              title: this.$t('workCenter.newProcess.postMeetingManagementProcess'),
              path: ''
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 流程点击
    processClick (item) {
      this.$router.push({
        path: item.path
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .ant-card-body {
  padding-top: 0;
}
.title-wrapper {
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #1D2129;
  height: 22px;
  line-height: 22px;
  margin-top: 24px;
  display: flex;
}
.title-wrapper::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: @primary-color;
  border-radius: 4px 4px 4px 4px;
  margin-right: 8px;
  margin-top: 3px;
}
.list-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.list-cont {
  width: 210px;
  height: 60px;
  background: rgba(245,245,245,0.6);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #E5E6EB;
  padding: 8px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #4E5969;
  line-height: 22px;
  text-align: center;
  margin: 24px 23px 0 0;
  cursor: pointer;
}
@media screen and (min-device-width: 1920px) and (max-device-width: 1366px) {
  .list-cont:nth-child(7n) {
    margin: 24px 0 0 0;
  }
}
@media screen and (min-device-width: 1366px) and (max-device-width: 768px) {
  .list-cont:nth-child(4n) {
    margin: 24px 0 0 0;
  }
}
</style>