feat: pC端插件

src/apis/index.js

@@ -70,7 +70,9 @@ export const getPermanent = (params, url) => http.post(`${url}/tall/task/permane
 // 查找定期任务
 export const getRegularTask = (params, url) => http.post(`${url}/tall/task/regular/page`, params);
 
-// 交付物
+/**
+ * 交付物
+ */
 
 // 提交交付物信息
 export const submitDeliverInfo = (params, url) => http.post(`${url}/deliver/submitDeliver`, params);
@@ -87,7 +89,9 @@ export const getDeliverHistory = (params, url) => http.post(`${url}/deliver/quer
 // 查看检查记录
 export const queryCheckLog = (params, url) => http.post(`${url}/deliver/queryCheckLog`, params);
 
-// 流水账
+/**
+ * 流水账
+ */
 
 // 获取基本信息 （成员列表、项目列表）
 export const getBasicInfo = url => http.post(`${url}/dailyAccount/info`);
@@ -107,6 +111,13 @@ export const clockQuery = (params, url) => http.post(`${url}/clock/query`, param
 // 打卡
 export const clockPunch = (params, url) => http.post(`${url}/clock/punch`, params);
 
+/**
+ * 财务条
+ */
+
+// 查询任务上的财务条数据
+export const getFinanceByTask = (params, url) => http.post(`${url}/finance/getByTask`, params);
+
 /**
  * 导入wbs
  * @param {object} e

src/components/tall/center/Global.vue

@@ -91,7 +91,11 @@ async function getGlobalData(id) {
   }
 }
 
-function toWorkbench() {}
+function toWorkbench() {
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
+  store.commit('task/setTaskDetailUrl', ''); // 设置详情页链接
+  store.commit('task/setTaskDetailShow', 'workbench'); // 设置内置组件关键字（根据关键字判断显示的详情页）
+}
 </script>
 
 <style scoped>

src/components/tall/center/Roles.vue

@@ -20,6 +20,7 @@ const roleId = computed(() => store.state.role.roleId); // 当前角色
 const roleList = computed(() => store.state.role.visibleRoles); // 当前项目角色列表
 const project = computed(() => store.state.projects.project); // 项目信息
 const sessionRoleId = sessionStorage.getItem('roleId'); // 缓存的角色id
+const taskDetailShow = computed(() => store.state.task.taskDetailShow);
 
 const roleBox = ref(null);
 const roleAbs = ref(null);
@@ -68,6 +69,11 @@ function setInitialRoleId(visibleList) {
   if (!visibleList || !visibleList.length) return;
   let index = visibleList.findIndex(item => +item.mine === 1);
 
+  // 如果点击了项目列表上的工作台
+  if (taskDetailShow.value === 'workbench') {
+    index = visibleList.findIndex(item => item.name === '管理员');
+  }
+
   // 刷新页面有缓存的角色id
   if (roleId.value) {
     index = visibleList.findIndex(item => item.id === roleId.value);
@@ -81,6 +87,7 @@ function setInitialRoleId(visibleList) {
 
 function changeRole(item) {
   store.commit('role/setRoleId', item.id);
+  store.commit('role/setRoleInfo', item);
   // 清空日常任务的数据
   store.commit('task/setPermanents', []);
   store.commit('task/setDailyTasks', []);
@@ -91,6 +98,7 @@ function changeRole(item) {
   store.commit('task/setUpNextPage', 1);
   store.commit('task/setDownNextPage', 1);
   // 清除详情页
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
   store.commit('task/setTaskDetailUrl', '');
   store.commit('task/setTaskDetailShow', '');
 }

src/components/tall/left/Projects.vue

@@ -19,7 +19,9 @@
         </div>
 
         <div class="right flex justify-end items-center" @click.stop="openMenu">
-          <a-button v-if="item.businessCode === 'ZERO'" class="mr-2" shape="round" type="primary">工作台</a-button>
+          <a-button v-if="item.businessCode === 'ZERO'" class="mr-2" shape="round" type="primary" @click="toWorkbench(item)">
+            工作台
+          </a-button>
 
           <RightOutlined v-if="!item.show" @click="changeShow(item)" />
           <DownOutlined v-else @click="changeShow(item)" />
@@ -128,10 +130,10 @@ function toDetail(item) {
   clearRolesData();
   clearTasksData();
   store.commit('projects/setProject', item);
-  store.commit('task/setTaskDetailUrl', '');
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
+  store.commit('task/setTaskDetailUrl', ''); // 设置详情页链接
   store.commit('task/setTaskDetailShow', '');
   router.push({ path: '/tall/pc/home/test' });
-  // store.commit('task/setTaskDetail', null);
 }
 
 // 父项目展开收起
@@ -174,6 +176,11 @@ function clearTasksData() {
   store.commit('task/setUpNextPage', 1);
   store.commit('task/setDownNextPage', 1);
 }
+
+function toWorkbench(item) {
+  toDetail(item);
+  store.commit('task/setTaskDetailShow', 'workbench'); // 设置内置组件关键字（根据关键字判断显示的详情页）
+}
 </script>
 
 <style scoped>

src/components/tall/plugin/Plugin.vue

@@ -10,19 +10,19 @@
   <p-source-manage v-else-if="pluginId === '16'" />
 
   <!-- 财务审批统计 -->
-  <!-- <p-finance-audit v-else-if="pluginId === '17'" class="p-2" /> -->
+  <p-finance-audit v-else-if="pluginId === '17'" />
   <!-- 财务条 -->
-  <!-- <p-finance v-else-if="pluginId === '18'" class="p-2" /> -->
+  <p-finance v-else-if="pluginId === '18'" />
 
   <!-- 个人和终端按钮-->
-  <p-account-management v-else-if="pluginId === '19'" class="p-2" />
+  <p-account-management v-else-if="pluginId === '19'" />
   <!-- 域资源管理 -->
-  <p-domain-source-manage v-else-if="pluginId === '20'" class="p-2" />
+  <p-domain-source-manage v-else-if="pluginId === '20'" />
   <!-- 项目版本管理 -->
   <p-project-version-management v-else-if="pluginId === '21'" />
 
   <!-- 任务名和跳转详情页箭头 -->
-  <!-- <p-task-to-detail :task="task" v-else-if="pluginId === '24'" class="p-2"></p-task-to-detail> -->
+  <p-task-to-detail :task="task" v-else-if="pluginId === '24'"></p-task-to-detail>
 
   <!-- 流水账插件 -->
   <p-daily-account v-else-if="pluginId === '26'"></p-daily-account>
@@ -49,6 +49,9 @@ import pSourceManage from '@/plugins/p-source-manage/p-source-manage.vue';
 import pProjectVersionManagement from '@/plugins/p-project-version-management/p-project-version-management.vue';
 import pDomainSourceManage from '@/plugins/p-domain-source-manage/p-domain-source-manage.vue';
 import pAccountManagement from '@/plugins/p-account-management/p-account-management.vue';
+import pFinance from '@/plugins/p-finance/p-finance.vue';
+import pFinanceAudit from '@/plugins/p-finance/p-finance-audit.vue';
+import pTaskToDetail from '@/plugins/p-task-to-detail/p-task-to-detail.vue';
 
 const props = defineProps({
   task: { default: () => {}, type: Object },

src/plugins/p-daily-account/p-daily-account.vue

@@ -10,6 +10,7 @@ import { useStore } from 'vuex';
 const store = useStore();
 
 function openDailyAccount() {
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
   store.commit('task/setTaskDetailUrl', '');
   store.commit('task/setTaskDetailShow', 'dailyAccount');
 }

src/plugins/p-deliver/p-deliver-check.vue

@@ -107,6 +107,7 @@ const checkModal = reactive({
 function openDeliverHistory() {
   const { deliverId } = deliverData.value;
   store.commit('task/setDeliverId', deliverId); // 设置交付物id
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
   store.commit('task/setTaskDetailUrl', ''); // 设置详情页链接
   store.commit('task/setTaskDetailShow', 'deliverHistory'); // 设置内置组件关键字（根据关键字判断显示的详情页）
 }
@@ -115,6 +116,7 @@ function openDeliverHistory() {
 function openMoreRecords() {
   const { deliverRecordId } = deliverData.value;
   store.commit('task/setDeliverRecordId', deliverRecordId); // 设置交付物记录id
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
   store.commit('task/setTaskDetailUrl', ''); // 设置详情页链接
   store.commit('task/setTaskDetailShow', 'auditRecords'); // 设置内置组件关键字（根据关键字判断显示的详情页）
 }

src/plugins/p-finance/p-finance-audit.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex justify-around task-card-plugin">
+    <a-button type="primary" style="width: 125px" @click="openAudit">财务审批</a-button>
+    <a-button type="primary" style="width: 125px" @click="openStatistical">财务统计</a-button>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'vuex';
+import { computed, inject } from 'vue';
+
+const store = useStore();
+const task = inject('task');
+const token = computed(() => store.state.user.token);
+const project = computed(() => store.state.projects.project);
+const sessionProject = sessionStorage.getItem('project');
+
+if (sessionProject && !project.value.id) {
+  store.commit('projects/setProject', JSON.parse(sessionProject));
+}
+
+// 打开财务审批详情页
+function openAudit() {
+  const param = `name=财务审批&token=${token.value}&projectId=${project.value.id}&id=${task.detailId}&pn=${project.value.name}&tn=${task.name}`;
+  const url = `http://121.36.3.207/finance/financial-approval?${param}`;
+
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
+  store.commit('task/setTaskDetailUrl', url); // 设置详情页链接
+  store.commit('task/setTaskDetailShow', ''); // 设置内置组件关键字（根据关键字判断显示的详情页）
+}
+
+// 打开财务统计详情页
+function openStatistical() {
+  const param = `name=财务统计&token=${token.value}&projectId=${project.value.id}&id=${task.detailId}&pn=${project.value.name}&tn=${task.name}`;
+  const url = `http://121.36.3.207/finance/financial-approval?${param}`;
+
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
+  store.commit('task/setTaskDetailUrl', url); // 设置详情页链接
+  store.commit('task/setTaskDetailShow', ''); // 设置内置组件关键字（根据关键字判断显示的详情页）
+}
+</script>

src/plugins/p-finance/p-finance.vue

@@ -0,0 +1,95 @@
+<!-- 财务条内置组件 -->
+<template>
+  <div class="finance-wrap task-card-plugin" v-if="data" @click="openFinance">
+    <!-- 预算和奖金 -->
+    <div class="finance-row">
+      <div
+        class="finance-item"
+        :style="{ width: `${(+data.budget * 100) / (+data.budget + +data.bonus)}%`, 'background-color': '#93C5FD' }"
+      >
+        预算{{ (data.budget ? data.budget : 0) / 100 }}
+      </div>
+      <div class="finance-item" :style="{ width: `${(+data.bonus * 100) / (+data.budget + +data.bonus)}%`, 'background-color': '#12c77e' }">
+        奖金{{ (data.bonus ? data.bonus : 0) / 100 }}
+      </div>
+    </div>
+
+    <!-- 项目采购日常采购 -->
+    <div class="finance-row">
+      <div
+        class="finance-item"
+        :style="{ width: `${(+data.projectExpend * 100) / (+data.projectExpend + +data.dailyExpend)}%`, 'background-color': '#FBBF24' }"
+      >
+        项目采购{{ (data.dailyExpend ? data.dailyExpend : 0) / 100 }}
+      </div>
+      <div
+        class="finance-item"
+        :style="{ width: `${(+data.dailyExpend * 100) / (+data.projectExpend + +data.dailyExpend)}%`, 'background-color': '#a1fd93' }"
+      >
+        日常采购{{ +(data.dailyExpend ? data.dailyExpend : 0) / 100 }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'vuex';
+import { ref, computed, inject } from 'vue';
+import { getFinanceByTask } from 'apis';
+
+const store = useStore();
+const task = inject('task');
+const data = ref(null);
+const pluginInfo = inject('pluginInfo');
+
+const token = computed(() => store.state.user.token);
+const project = computed(() => store.state.projects.project);
+const sessionProject = sessionStorage.getItem('project');
+
+if (sessionProject && !project.value.id) {
+  store.commit('projects/setProject', JSON.parse(sessionProject));
+}
+
+data.value = pluginInfo && pluginInfo.data ? JSON.parse(pluginInfo.data) : null;
+
+// 查询任务上的财务条数据
+async function getFinanceByTaskData() {
+  try {
+    const { detailId } = task;
+    const { url } = project.value;
+    const params = { param: { detailId } };
+    data.value = await getFinanceByTask(params, url);
+  } catch (error) {
+    console.log('getFinanceByTaskData error: ', error);
+  }
+}
+
+// getFinanceByTaskData();
+
+// 打开详情页
+function openFinance() {
+  // DEBUG: 假数据 换成财务条详情页的地址
+  const param = `name=财务&token=${token.value}&projectId=${project.value.id}&id=${task.detailId}&pn=${project.value.name}&tn=${task.name}`;
+  const url = `http://121.36.3.207/finance/applicant?${param}`;
+
+  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
+  store.commit('task/setTaskDetailUrl', url); // 设置详情页链接
+  store.commit('task/setTaskDetailShow', ''); // 设置内置组件关键字（根据关键字判断显示的详情页）
+}
+</script>
+
+<style scoped>
+.finance-wrap .finance-row {
+  display: flex;
+}
+
+.finance-wrap .finance-row .finance-item {
+  margin: 2px 4px;
+  font-size: 12px;
+  text-align: center;
+  border-radius: 4px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: visible;
+}
+</style>

src/plugins/p-task-to-detail/p-task-to-detail.vue

@@ -0,0 +1,36 @@
+<template>
+  <!-- 任务名 跳转详情页 -->
+  <div class="u-font-14 flex justify-between items-center task-card-plugin">
+    {{ task.name }}
+    <right-outlined class="ml-3" @click="toDetail(task)" />
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'vuex';
+import { computed, defineProps } from 'vue';
+import { RightOutlined } from '@ant-design/icons-vue';
+
+const store = useStore();
+const projects = computed(() => store.state.projects.projects);
+
+defineProps({ task: { type: Object, default: () => {} } });
+
+function toDetail(task) {
+  const { id, projectId, executorRoleId, businessUrl, businessCode } = task;
+  const project = projects.value.find(item => item.projectId);
+
+  if (project) {
+    store.commit('projects/setProject', project);
+    store.commit('task/clearTasks'); // 清空定期任务
+    store.commit('task/clearRealTasks'); // 清空真实任务数据
+    store.commit('socket/setCurrLocationTaskId', id);
+    store.commit('task/setUpNextPage', 1);
+    store.commit('task/setDownNextPage', 1);
+    store.commit('task/setTimeLineType', 1);
+    store.commit('role/setRoleId', executorRoleId);
+  }
+}
+</script>
+
+<style></style>

src/plugins/workbench/workbench.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="text-center">
+    <a-image src="/src/assets/work.jpg" />
+  </div>
+</template>
+
+<script setup></script>

src/views/detail/Test.vue

@@ -2,6 +2,9 @@
   <div class="task-detail">
     <DetailWebview v-if="taskDetailUrl"></DetailWebview>
 
+    <!-- 工作台 -->
+    <workbench v-if="taskDetailShow === 'workbench'"></workbench>
+
     <!-- 流水账详情页 -->
     <p-daily-account-detail v-if="taskDetailShow === 'dailyAccount'"></p-daily-account-detail>
 
@@ -40,6 +43,7 @@ import pProjectVersionManagementDetail from '@/plugins/p-project-version-managem
 import pDomainSourceManageDetail from '@/plugins/p-domain-source-manage/p-domain-source-manage-detail.vue';
 import pAccountManagementAudit from '@/plugins/p-account-management/p-account-management-audit.vue';
 import pAccountManagementUidispose from '@/plugins/p-account-management/p-account-management-uidispose.vue';
+import workbench from '@/plugins/workbench/workbench.vue';
 
 const store = useStore();
 

src/views/home/Index.vue

@@ -31,6 +31,8 @@ import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 // import { useRoute, useRouter } from 'vue-router';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import Left from 'components/tall/Left/Index.vue';
 // import Navbar from 'components/tall/Top/Navbar.vue';
 import TopNavbar from 'components/tall/Top/TopNavbar.vue';
@@ -40,6 +42,7 @@ import Detail from '@/views/detail/Test.vue';
 import '@/utils/storage.js';
 
 const locale = zhCN;
+dayjs.locale('zh-cn');
 const store = useStore();
 const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏
 
@@ -49,7 +52,8 @@ const projectInfo = computed(() => store.state.projects.project); // 项目信
 // const sessionTask = sessionStorage.getItem('taskDetail');
 // const taskDetail = computed(() => store.state.task.taskDetail); // 任务信息
 const taskDetailUrl = computed(() => store.state.task.taskDetailUrl); // iframe详情页链接
-const targetUrl = sessionStorage.getItem('targetUrl'); // 缓存的详情页链接
+const targetUrl = sessionStorage.getItem('targetUrl'); // 内嵌插件缓存的详情页链接
+const sessionTaskDetailUrl = sessionStorage.getItem('taskDetailUrl'); // 内置组件缓存的详情页链接
 const taskDetailShow = computed(() => store.state.task.taskDetailShow); // 内置组件详情页是否显示
 const sessionTaskDetailShow = sessionStorage.getItem('taskDetailShow'); // 缓存的显示内置组件详情页的组件标签
 
@@ -70,9 +74,9 @@ const isFullScreen = computed(() => store.state.layout.isFullScreen); // 流水
 //   store.dispatch('role/getAllMembers', { param, url });
 // }
 
-if (targetUrl && !taskDetailUrl.value) {
+if ((targetUrl || sessionTaskDetailUrl) && !taskDetailUrl.value) {
   // 设置内嵌组件详情页链接
-  store.commit('task/setTaskDetailUrl', targetUrl);
+  store.commit('task/setTaskDetailUrl', targetUrl || sessionTaskDetailUrl);
 }
 
 // 设置某个内置组件详情页显示