Browse Source

feat: 日常任务增加默认插件显示

tall
aBin 4 years ago
parent
commit
ce29e5b4cd
  1. 1
      CHANGELOG.md
  2. 30
      src/components/Globals/Globals.vue
  3. 41
      src/components/Plugin/Plugin.vue
  4. 2
      src/components/Roles/Roles.vue
  5. 46
      src/components/TimeLine/component/TimeBox.vue
  6. 31
      src/pages/project/project.vue
  7. 35
      src/store/home/mutations.js
  8. 18
      src/store/home/state.js

1
CHANGELOG.md

@ -50,6 +50,7 @@
- | 定期任务接口 | [aa4981c](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/aa4981c)
- | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e9fdd71)
- | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/19228d6)
- | 日常任务html数据查验 | [880ce5c](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/880ce5c)
- | 上下滚动时间轴 | [d533a01](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/d533a01)
- | 上下滑动加载定期任务 | [4090d89](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4090d89)
- | 时间轴上下滚动数据加载bug修改 | [e82ede4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e82ede4)

30
src/components/Globals/Globals.vue

@ -3,16 +3,22 @@
<u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '96rpx' : '300rpx' }" border-radius="25" margin="0">
<view slot="body">
<scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
<skeleton :banner="false" :loading="!plugins.length" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
<view class="p-0 u-col-between">
<view class="grid grid-cols-3 gap-2 h-auto" v-if="plugins.length">
<Plugin
:class="getClass(plugin.col, plugin.row)"
:key="pluginIndex"
:pluginId="plugin.pluginId"
:styleType="plugin.styleType || 0"
v-for="(plugin, pluginIndex) in plugins"
/>
<skeleton :banner="false" :loading="!tasks.length" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
<view v-for="item in tasks" :key="item.id">
<view v-if="item.plugins">
<view class="p-0 u-col-between">
<view class="grid grid-cols-3 gap-2 h-auto">
<!-- ++{{ plugins }} -->
<Plugin
:item="item"
:class="getClass(plugin.colspan, plugin.rowspan)"
:key="plugin.pluginTaskId"
:pluginId="plugin.pluginId"
:styleType="plugin.styleType || 0"
v-for="plugin in item.plugins"
/>
</view>
</view>
</view>
</view>
</scroll-view>
@ -28,12 +34,10 @@ import Skeleton from '@/components/Skeleton/Skeleton';
export default {
name: 'Global',
components: { Skeleton },
props: { plugins: { type: Array, default: () => [] } },
props: { tasks: { type: Array, default: () => [] } },
data() {
return {
// loading: true,
pluginId: 0,
styleType: 0,
task: null,
};
},

41
src/components/Plugin/Plugin.vue

@ -1,16 +1,22 @@
<template>
<view v-if="pluginContent && pluginContent.html" style="height: 100%">
<view v-if="item && item.name">
<p-task-title :item="item" v-if="pluginId === '1'" />
<p-task-description :item="item" v-if="pluginId === '2'" />
<p-task-duration-delay :item="item" v-if="pluginId === '3'" />
<p-task-start-time-delay :item="item" v-if="pluginId === '4'" />
<p-deliverable :item="item" v-if="pluginId === '5'" />
<p-subtasks :item="item" v-if="pluginId === '6'" />
<p-subproject :item="item" v-if="pluginId === '7'" />
<p-task-countdown :item="item" v-if="pluginId === '8'" />
<view>
<view style="height: 100%" v-if="pluginContent">
<view v-if="pluginContent && pluginContent.html">
<view style="height: 100%" v-html="pluginContent.html"></view>
</view>
<view v-else>
<view v-if="item && item.name">
<p-task-title :item="item" v-if="pluginId === '1'" />
<p-task-description :item="item" v-if="pluginId === '2'" />
<p-task-duration-delay :item="item" v-if="pluginId === '3'" />
<p-task-start-time-delay :item="item" v-if="pluginId === '4'" />
<p-deliverable :item="item" v-if="pluginId === '5'" />
<p-subtasks :item="item" v-if="pluginId === '6'" />
<p-subproject :item="item" v-if="pluginId === '7'" />
<p-task-countdown :item="item" v-if="pluginId === '8'" />
</view>
</view>
</view>
<view v-html="pluginContent.html" style="height: 100%"> </view>
</view>
</template>
@ -23,21 +29,26 @@ export default {
type: Object,
},
pluginId: {
default: '0',
default: '1',
type: String,
},
styleType: {
default: 0,
type: Number,
},
pluginTaskId: {
default: '0',
type: String,
},
},
data() {
return { pluginContent: null };
},
async created() {
await this.getPlugin();
console.log(this.pluginContent.js);
if (this.pluginContent.js) {
let domList = Array.from(document.getElementsByTagName('script'));
const index = domList.findIndex(item => item.id === `p${this.pluginContent.pluginId}`);
if (this.pluginContent.js && index === -1) {
var scriptDom = document.createElement('script');
scriptDom.id = `p${this.pluginContent.pluginId}`;
scriptDom.innerHTML = this.pluginContent.js;
@ -51,8 +62,8 @@ export default {
pluginId,
styleType,
});
this.$emit('changeLoading', false);
this.pluginContent = res;
console.log(this.pluginContent);
},
},
};

2
src/components/Roles/Roles.vue

@ -93,7 +93,7 @@ export default {
//index
this.setCurrentRole(index);
//
this.setTasks([]);
this.setTasks();
//
await this.$emit('getTasksByRole');
} catch (error) {

46
src/components/TimeLine/component/TimeBox.vue

@ -4,7 +4,9 @@
<view class="flex">
<TimeStatus :content="JSON.stringify(item.process)" :status="item.process" />
<view class="flex justify-between items-center flex-1 ml-2">
<view>{{ $moment(+item.planStart).format('MM-DD HH:mm') }} {{ $t.time.formatDuration(item.planDuration) }}</view>
<view>
<span>{{ $moment(+item.planStart).format('MM-DD HH:mm') }}</span>
</view>
<view>
<view class="flex justify-between" style="min-width: 180rpx">
<u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
@ -23,33 +25,28 @@
@click="changeTimeNode(item.planStart)"
class="h-16"
margin="0"
v-if="item.plugins && item.plugins.length"
>
<!-- 任务面板插件 -->
<view slot="body">
<skeleton :banner="false" :loading="!item.plugins.length" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
<view class="p-0 u-col-between">
<view class="grid grid-cols-3 gap-2 h-36" v-if="item.plugins.length">
<Plugin
:class="getClass(plugin.col, plugin.row)"
:key="pluginIndex"
:pluginId="plugin.pluginId"
:styleType="styleType"
v-for="(plugin, pluginIndex) in item.plugins"
/>
</view>
<view v-if="!item.plugins && !item.plugins.length && taskLoading">
<skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
</view>
<!-- <view :key="pluginIndex" class="p-0 u-col-between u-skeleton" v-for="(plugin, pluginIndex) in item.plugins">
<view :key="p.pluginId" v-for="p in plugin">
<p-task-title :item="item" v-if="p.pluginId === 1" />
<p-task-description :item="item" v-if="p.pluginId === 2" />
<p-task-duration-delay :item="item" v-if="p.pluginId === 3" />
<p-task-start-time-delay :item="item" v-if="p.pluginId === 4" />
<p-deliverable :item="item" v-if="p.pluginId === 5" />
<p-subtasks :item="item" v-if="p.pluginId === 6" />
<p-subproject :item="item" v-if="p.pluginId === 7" />
<p-task-countdown :item="item" v-if="p.pluginId === 8" />
<view class="p-0 u-col-between" v-else>
<view :key="pIndex" v-for="(p, pIndex) in item.plugins">
<view class="grid gap-2" v-if="p.length">
<Plugin
:class="getClass(plugin.col, plugin.row)"
:item="item"
:key="pluginIndex"
:pluginId="plugin.pluginId"
:styleType="styleType"
@changeLoading="taskLoading = false"
v-for="(plugin, pluginIndex) in p"
/>
</view>
</view>
</view>-->
</view>
</view>
</u-card>
</view>
@ -68,7 +65,7 @@ export default {
name: 'TimeBox',
components: { TimeStatus, Skeleton },
data() {
return { currentComponent: '', styleType: 0 };
return { currentComponent: '', styleType: 0, taskLoading: true };
},
computed: mapState('home', ['roleId', 'timeNode', 'timeUnit', 'tasks']),
@ -92,6 +89,7 @@ export default {
this.setTimeNode(time);
},
//
getClass(col, row) {
return [`row-span-${row}`, `col-span-${col}`];
},

31
src/pages/project/project.vue

@ -3,7 +3,7 @@
<Title />
<view class="container flex flex-col flex-1 overflow-hidden bg-gray-100">
<Roles @getTasksByRole="getTasksByRole" />
<Globals :plugins="allPlugins.concat(timePlugins)" />
<Globals :tasks="allPlugins.concat(timePlugins)" />
<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" />
</view>
</view>
@ -136,9 +136,12 @@ export default {
try {
this.allPlugins = [];
const res = await this.$u.api.getPermanent({ roleId: this.roleId });
for (let item of res) {
this.allPlugins = this.allPlugins.concat(item.plugins);
}
// for (let item of res) {
// if (item.plugins) {
// this.allPlugins = this.allPlugins.concat(item.plugins);
// }
// }
this.allPlugins = res;
console.log('allPlugins', this.allPlugins);
} catch (error) {
console.log('error: ', error);
@ -157,11 +160,12 @@ export default {
const { roleId, timeNode, timeUnit } = this;
const params = { roleId, timeNode, timeUnit };
const res = await this.$u.api.getGlobal(params);
for (let task of res) {
for (let item of task.plugins) {
this.timePlugins.push(...item);
}
}
// for (let task of res) {
// for (let item of task.plugins) {
// this.timePlugins.push(...item);
// }
// }
this.timePlugins = res;
this.setDailyTasks(res);
} catch (error) {
console.log('error: ', error);
@ -173,15 +177,20 @@ export default {
try {
await this.getTasks({ queryType: 0 });
await this.getTasks({ queryType: 1 });
//
//
const upQuery = {
timeNode: +this.tasks[0].planStart,
queryType: 0,
queryNum: 6,
};
await this.getTasks(upQuery);
//
// =+
const cycle = this.$t.time.computeCycle('天');
const timeNode = this.$t.time.add(+this.tasks[this.tasks.length - 1].planStart, 1, cycle).valueOf();
const downQuery = {
timeNode: +this.tasks[this.tasks.length - 1].planStart,
timeNode,
queryType: 1,
queryNum: 6,
};

35
src/store/home/mutations.js

@ -125,7 +125,12 @@ const mutations = {
if (!data || !data.length) {
state.topEnd = true;
}
state.tasks = [...data.concat(state.tasks)] || [];
console.log('!state.tasks.plugins.length: ', !state.tasks[0].name);
if (!state.tasks[0].name) {
state.tasks = [...data];
} else {
state.tasks = [...data.concat(state.tasks)];
}
},
/**
@ -137,16 +142,36 @@ const mutations = {
if (!data || !data.length) {
state.bottomEnd = true;
}
state.tasks = [...state.tasks.concat(data)] || [];
if (!state.tasks[0].name) {
state.tasks = [...data];
} else {
state.tasks = [...state.tasks.concat(data)];
}
},
/**
* 清空定期任务数据
* @param {Object} state
* @param {Array} data 服务端返回的模板数组
*/
setTasks(state, data) {
state.tasks = data || [];
setTasks(state) {
const data = [
{
panel: {},
plugins: [],
planStart: new Date().getTime(),
},
{
panel: {},
plugins: [],
planStart: new Date().getTime(),
},
{
panel: {},
plugins: [],
planStart: new Date().getTime(),
},
];
state.tasks = data;
},
/**

18
src/store/home/state.js

@ -14,7 +14,23 @@ const state = {
roleId: '', // 当前展示查看的角色id
timeNode: new Date().getTime(), // 时间基准点
timeUnit: 4, // // 时间颗粒度
tasks: [], // 定期任务
tasks: [
{
panel: {},
plugins: [],
planStart: new Date().getTime(),
},
{
panel: {},
plugins: [],
planStart: new Date().getTime(),
},
{
panel: {},
plugins: [],
planStart: new Date().getTime(),
},
], // 定期任务
topEnd: false, // 时间轴向上查任务到顶了
bottomEnd: false, // 时间轴向下查任务到底了
dailyTasks: [], // 日常任务

Loading…
Cancel
Save