From 83e7d90b2b9ef454e9698d9a5686f9f69ec79c93 Mon Sep 17 00:00:00 2001
From: danshihao <danshihao@syxysoft.com>
Date: Wed, 27 Dec 2023 14:56:05 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/modules/FriendLinkCard.vue      |   8 +-
 .../dashboard/modules/MenuManageModal.vue     | 145 +++++++++++++
 .../dashboard/modules/QuickEnterCard.vue      | 107 ++++++++--
 .../modules/SearchAndWarningCard.vue          |  13 ++
 src/views/dashboard/modules/ToDoTaskCard.vue  | 200 +++++++++++++++++-
 5 files changed, 451 insertions(+), 22 deletions(-)
 create mode 100644 src/views/dashboard/modules/MenuManageModal.vue

diff --git a/src/views/dashboard/modules/FriendLinkCard.vue b/src/views/dashboard/modules/FriendLinkCard.vue
index 43c7b9a3..9796e661 100644
--- a/src/views/dashboard/modules/FriendLinkCard.vue
+++ b/src/views/dashboard/modules/FriendLinkCard.vue
@@ -75,11 +75,17 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 16px;
-  font-family: PingFang SC-Regular, PingFang SC;
+  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
   font-weight: 400;
   color: @primary-color;
   text-align: center;
   background-image: url('../../../assets/image/dashboardLinkBack.png');
   cursor: pointer;
 }
+@media screen and (max-width: 1366px) {
+ .content-div {
+    height: 40px;
+    line-height: 40px;
+  }
+}
 </style>
diff --git a/src/views/dashboard/modules/MenuManageModal.vue b/src/views/dashboard/modules/MenuManageModal.vue
new file mode 100644
index 00000000..1536c7d2
--- /dev/null
+++ b/src/views/dashboard/modules/MenuManageModal.vue
@@ -0,0 +1,145 @@
+<template>
+  <j-modal
+    :title="$t('dashboard.quickEnter.custom')"
+    :visible="visible"
+    :width="1000"
+    switchFullscreen
+    @ok="handleOk"
+    :confirmLoading="loading"
+    @cancel="close"
+    :cancelText="$t('close')">
+      <a-spin :spinning="loading">
+        <a-transfer
+          class="transfer"
+          :data-source="dataSource"
+          :titles="titles"
+          :show-search="true"
+          :filter-option="filterOption"
+          :target-keys="targetKeys"
+          :row-key="item => item.id"
+          :render="item => item.name"
+          :listStyle="listStyle"
+          :locale="locale"
+          @change="handleChange"
+        />
+      </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import { getQuickEntryList, saveQuickEntryModuleList } from '@api/dashboard'
+
+export default {
+  name: 'MenuManageModal',
+  data () {
+    return {
+      loading: false,
+      // 穿梭框两侧样式
+      listStyle: {
+        textAlign: 'left',
+        width: '40%',
+        height: '100%'
+      },
+      visible: false,
+      // 可选数据和个人展示模块
+      titles: [this.$t('dashboard.quickEnter.optionModules'), this.$t('dashboard.quickEnter.personalDisplayModule')],
+      // 可选数据
+      dataSource: [],
+      // 已选数据id
+      targetKeys: [],
+      // 多语言
+      locale: {
+        itemUnit: this.$t('dashboard.quickEnter.itemUnit'),
+        itemsUnit: this.$t('dashboard.quickEnter.itemsUnit'),
+        notFoundContent: this.$t('dashboard.quickEnter.listEmpty'),
+        searchPlaceholder: this.$t('dashboard.quickEnter.pleaseEnterSearchContent')
+      }
+    }
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * @param ids - 已经选择的ids
+     */
+    show (ids) {
+      this.visible = true
+      // 清空之前的数据，然后重新请求
+      this.dataSource = []
+      this.targetKeys = ids || []
+      this.getMenuList()
+    },
+    // 获取菜单列表
+    getMenuList () {
+      this.loading = true
+      getQuickEntryList().then(res => {
+        if (res.success) {
+          // 穿梭框需要这个格式否则会报错
+          this.dataSource = res.result || []
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      })
+    },
+    // 确定
+    handleOk () {
+      // 最多选择9个模块
+      if (this.targetKeys.length > 9) {
+        this.$message.warning(this.$t('dashboard.quickEnter.maxSelectedNine'))
+        return
+      }
+      this.loading = true
+      saveQuickEntryModuleList({
+        permissionIds: this.targetKeys.join(',')
+      }).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.$emit('ok')
+          this.close()
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 关闭
+    close () {
+      this.visible = false
+    },
+    // 穿梭框改变
+    handleChange (targetKeys, direction, moveKeys) {
+      console.log(targetKeys, direction, moveKeys)
+      this.targetKeys = targetKeys
+    },
+    // 搜索过滤
+    filterOption (inputValue, option) {
+      return option.description.indexOf(inputValue) > -1
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.transfer {
+  height: 50vh;
+  text-align: center;
+  /deep/ .ant-transfer-operation button {
+    margin: 20px 0;
+    border-radius: 50%;
+  }
+  /deep/ .ant-transfer-list-header-selected {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    width: 94%;
+
+    .ant-transfer-list-header-title {
+      position: static;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/modules/QuickEnterCard.vue b/src/views/dashboard/modules/QuickEnterCard.vue
index eaa159b1..c6de1499 100644
--- a/src/views/dashboard/modules/QuickEnterCard.vue
+++ b/src/views/dashboard/modules/QuickEnterCard.vue
@@ -2,38 +2,83 @@
   <a-card :bordered="false">
     <a-spin :spinning="loading">
       <div class="top-wrapper">
-        <p class="left-p"><i class="iconfont icon-rukou left-icon"></i>快捷入口</p>
-        <p class="right-p" @click="menuManage"><i class="iconfont icon-settings"></i>菜单管理</p>
+        <p class="left-p"><i class="iconfont icon-rukou left-icon"></i>{{ this.$t('dashboard.quickEnter.quickEnter') }}</p>
+        <p class="right-p" @click="menuManage"><i class="iconfont icon-settings"></i>{{ this.$t('dashboard.quickEnter.menuManage') }}</p>
       </div>
       <div class="content-wrapper">
-        <div class="content-div" v-for="item in dataSource" :key="item.id">
-          <i class="iconfont" :class="'icon-' + item.iconName"></i>
-          <p>{{ item.name }}</p>
+        <div class="content-div" v-for="item in dataSource" :key="item.id" @click="handleTo(item.url)">
+          <img class="icon-img" :src="item.src" alt=''>
+          <!--<i class="iconfont" :class="'icon-' + 'shengchanliuchengguanli'"></i>-->
+          <a-tooltip placement="top">
+            <template slot="title">{{item.name}}</template>
+            <p>{{ item.name }}</p>
+          </a-tooltip>
         </div>
-        <div class="plus-div">
-          <a-icon type="plus" />
+        <div class="plus-div" @click="menuManage" v-if="dataSource.length < 9">
+          <a-icon type="plus" class="text-primary-color" />
         </div>
       </div>
     </a-spin>
+    <!-- 菜单管理 -->
+    <menu-manage-modal ref="menuManageModal" @ok="loadData"/>
   </a-card>
 </template>
 
 <script>
+import MenuManageModal from '@views/dashboard/modules/MenuManageModal'
+import { getQuickEntryModuleList } from '@api/dashboard'
 export default {
   name: 'QuickEnterCard',
+  components: { MenuManageModal },
   data () {
     return {
       loading: false,
       dataSource: [
-        { iconName: 'shengchanliuchengguanli', name: '新建流程' },
-        { iconName: 'a-moxingkuaisuchaifen1', name: '标准拆分' },
-        { iconName: 'shoucang', name: '我的收藏' },
-        { iconName: 'a-fagui1', name: '国内法规' },
-        { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
-        { iconName: 'jiaoseguanli', name: '角色管理' },
-        { iconName: 'wenda1', name: '我的问答' }
+        // { iconName: 'shengchanliuchengguanli', name: '新建流程' },
+        // { iconName: 'a-moxingkuaisuchaifen1', name: '标准拆分' },
+        // { iconName: 'shoucang', name: '我的收藏' },
+        // { iconName: 'a-fagui1', name: '国内法规' },
+        // { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
+        // { iconName: 'jiaoseguanli', name: '角色管理' },
+        // { iconName: 'wenda1', name: '我的问答' }
       ]
     }
+  },
+  created () {
+    this.loadData()
+  },
+  methods: {
+    // 获取快捷入口
+    loadData () {
+      this.loading = true
+      getQuickEntryModuleList().then(res => {
+        if (res.success) {
+          const data = res.result || []
+          this.dataSource = data.map(item => {
+            try {
+              item.src = require(`@/assets/image/dashboard/${item.name}.png`)
+            } catch (e) {
+              console.log(e)
+              item.src = ''
+            }
+            return item
+          })
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 点击快捷入口,跳转对应页面
+    handleTo (path) {
+      this.$router.push({ path })
+    },
+    // 菜单管理
+    menuManage () {
+      const ids = this.dataSource.map(item => item.id)
+      this.$refs.menuManageModal.show(ids)
+    }
   }
 }
 </script>
@@ -45,13 +90,14 @@ export default {
   //flex-wrap: wrap;
   //justify-content: space-between;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 100px);
+  grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
   grid-gap: 10px;
   grid-auto-flow: row;
   margin-top: 10px;
   & > div {
-    width: 100px;
-    height: 100px;
+    //width: 100px;
+    //height: 100px;
+    min-height: 50px;
     border-radius: 8px 8px 8px 8px;
     display: flex;
     flex-direction: column;
@@ -59,21 +105,33 @@ export default {
     align-items: center;
   }
   .content-div {
+    // （总高度 - 内边距 - 标题 - 上下边距） / 3
+    height: calc((306px - 48px - 31px - 20px) / 3);
+    cursor: pointer;
     background: rgba(213,44,38,0.08);
+    .icon-img {
+      width: 27px;
+    }
     .iconfont {
       font-size: 27px;
       color: @primary-color;
     }
     p {
+      width: 90%;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       margin-bottom: 0;
       font-size: 16px;
-      font-family: PingFang SC, PingFang SC;
+      font-family: PingFang SC, PingFang SC, sans-serif;
       font-weight: 400;
       color: #000000;
       line-height: 28px;
     }
   }
   .plus-div {
+    cursor: pointer;
     border: 1px dashed @primary-color;
     box-sizing: border-box;
     .anticon {
@@ -81,4 +139,17 @@ export default {
     }
   }
 }
+.text-primary-color {
+  color: @primary-color
+}
+
+@media screen and (max-width: 1366px) {
+  .content-wrapper {
+    .content-div {
+      p {
+        font-size: 14px;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/dashboard/modules/SearchAndWarningCard.vue b/src/views/dashboard/modules/SearchAndWarningCard.vue
index 00053f66..874ba146 100644
--- a/src/views/dashboard/modules/SearchAndWarningCard.vue
+++ b/src/views/dashboard/modules/SearchAndWarningCard.vue
@@ -20,10 +20,13 @@
         <div class="tab-div" :class="warningTab === 'newCarType' ? 'curr-tab' : ''" @click="warningTabChange('newCarType')">新车型实施预警</div>
         <div class="tab-div" :class="warningTab === 'carInProduction' ? 'curr-tab' : ''" @click="warningTabChange('carInProduction')">在产车实施预警</div>
       </div>
+      <!--这里的scroll.y必须有，后面用媒体查询进行样式覆盖-->
       <a-table
         ref="table"
         size="middle"
         rowKey="id"
+        class="table"
+        :scroll="{ x: '100%', y: '40vh' }"
         :columns="columns"
         :dataSource="dataSource"
         :pagination="ipagination"
@@ -234,4 +237,14 @@ export default {
   //transition-duration: 0.1s;
   //transition-timing-function: ease-in;
 }
+// 通过媒体查询覆盖表格高度
+.table /deep/ .ant-table-scroll .ant-table-body {
+  max-height: calc(70vh - 250px) !important;
+}
+
+@media screen and (max-width: 1366px) {
+  .table /deep/ .ant-table-scroll .ant-table-body {
+    max-height: calc(70vh - 280px) !important;
+  }
+}
 </style>
diff --git a/src/views/dashboard/modules/ToDoTaskCard.vue b/src/views/dashboard/modules/ToDoTaskCard.vue
index 793b2357..1a67c0b1 100644
--- a/src/views/dashboard/modules/ToDoTaskCard.vue
+++ b/src/views/dashboard/modules/ToDoTaskCard.vue
@@ -1,15 +1,209 @@
 <template>
   <a-card :bordered="false">
-    待办任务
+    <a-spin :spinning="loading">
+      <div class="top-wrapper">
+        <p class="left-p"><i class="iconfont icon-rukou left-icon"></i>{{ $t('dashboard.todoTask.todoTask') }}</p>
+        <p class="right-p" @click="handleMore">{{ $t('dashboard.todoTask.more') }}<i class="iconfont icon-right"></i></p>
+      </div>
+      <div class="content-wrapper">
+        <div class="content-item" v-for="item in dataSource" :key="item.id" @click="handleToDetail(item)">
+          <a-tooltip placement="top">
+            <template slot="title">{{item.prcName}}</template>
+            <p>{{ item.prcName }}</p>
+          </a-tooltip>
+        </div>
+      </div>
+    </a-spin>
   </a-card>
 </template>
 
 <script>
+import { getTodoList } from '@api/dashboard'
+
 export default {
-  name: 'ToDoTaskCard'
+  name: 'ToDoTaskCard',
+  data () {
+    return {
+      loading: false,
+      // 数据
+      dataSource: []
+    }
+  },
+  created () {
+    this.getTodoTask()
+  },
+  methods: {
+    // 获取待办任务
+    getTodoTask () {
+      this.loading = true
+      getTodoList().then(res => {
+        if (res.success) {
+          this.dataSource = res.result.records || []
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 跳转待办详情
+    handleToDetail (record) {
+      let path = ''
+      // 跳转到对应流程页面
+      switch (record.prcType + '') {
+        // 标准法规入库/变更流程
+        case '1':
+          path = '/workCenter/StandardEntryOrChangeProcess'
+          break
+        // 标准征求意见流程
+        case '2':
+          path = '/workCenter/StandardConsultationProcess'
+          break
+        // 项目合规评估流程
+        case '3':
+          path = '/workCenter/ProjectComplianceEvaluationProcess'
+          break
+        // 未符合项跟踪流程
+        case '4':
+          path = '/workCenter/NoMatchTrackingProcess'
+          break
+        // 法规采购流程
+        case '6':
+          path = '/workCenter/StandardProcurementProcess'
+          break
+        // 企标立项、变更计划
+        case '7':
+          path = '/workCenter/enterpriseStandardInitChange/planApprovalChangeFlow'
+          break
+        // 年度制修订计划（各部门主动上报）
+        case '8':
+          path = '/workCenter/annualRevisionPlanActivelyReport/revisionPlanActivelyReportFlow'
+          break
+        // 年度制修订计划（标准化发起）
+        case '9':
+          path = '/workCenter/annualRevisionPlanStandardizationInit/revisionPlanStandardizationInitFlow'
+          break
+        // 企标制修订流程
+        case '10':
+          path = '/workCenter/enterpriseStandardRevision/enterpriseStandardRevisionFlow'
+          break
+        // 企标更改流程
+        case '11':
+          path = '/workCenter/enterpriseStandardChange/enterpriseStandardChangeFlow'
+          break
+        // 企标复审流程
+        case '12':
+          path = '/workCenter/enterpriseStandardRecheck/enterpriseStandardRecheckFlow'
+          break
+        // 企标废止流程
+        case '13':
+          path = '/workCenter/enterpriseStandardAnnul/enterpriseStandardAnnulFlow'
+          break
+        // 企标封存流程
+        case '14':
+          path = '/workCenter/enterpriseStandardSealSave/enterpriseStandardSealSaveFlow'
+          break
+        // 已封存企标启用流程
+        case '15':
+          path = '/workCenter/enterpriseStandardStartUse/enterpriseStandardStartUseFlow'
+          break
+        // 企标稽查计划
+        case '16':
+          path = '/workCenter/EnterpriseStandardInspectionPlan'
+          break
+        // 企标稽查流程
+        case '17':
+          path = '/workCenter/EnterpriseStandardInspectionProcess'
+          break
+        // 稽查延期申请流程
+        case '18':
+          path = '/workCenter/InspectionExtensionRequestProcess'
+          break
+        // 企标稽查整改
+        case '19':
+          path = '/workCenter/EnterpriseStandardInspectionRectification'
+          break
+        // 权限申请流程
+        case '20':
+          path = '/workCenter/PermissionApplicationProcess'
+          break
+        // 标准宣贯流程
+        case '21':
+          path = '/workCenter/StandardPromotionProcess'
+          break
+        // 会后管理流程
+        case '22':
+          path = '/workCenter/PostMeetingManageProcess'
+          break
+        // 如果都没找到不用跳转
+        default:
+          return
+      }
+      this.$router.push({
+        path: path,
+        query: {
+          projectId: record.projectId,
+          taskName: record.taskName,
+          taskId: record.taskId, // 任务id
+          processInstanceId: record.processInstanceId, // 流程实例id，必须传人员信息右侧表格查询需要用
+          nodeId: record.nodeId // 节点的id
+        }
+      })
+    },
+    // 更多:跳转待办
+    handleMore () {
+      this.$router.push({
+        path: '/workCenter/processCenter/processCenter'
+      })
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+.content-wrapper {
+  margin-top: 10px;
+  height: calc(100vh - 346px - 200px);
+  overflow-y: auto;
 
+  .content-item {
+    cursor: pointer;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: PingFang SC, PingFang SC, sans-serif;
+    font-weight: 400;
+    color: #1D2129;
+    position: relative;
+    font-size: 16px;
+    line-height: 48px;
+    height: 48px;
+    border-bottom: 1px solid #E5E6EB;
+    text-indent: 18px;
+  }
+  .content-item::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    display: block;
+    content: '';
+    background-color: #86909C;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+}
+@media screen and (max-width: 1366px) {
+ .content-wrapper {
+    height: calc(100vh - 306px - 200px);
+
+   .content-item {
+     line-height: 40px;
+     height: 40px;
+     font-size: 14px;
+   }
+  }
+}
 </style>