wally
/
tall-mui-3-project
forked from ccsens_fe/tall-mui-3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Merge pull request 'temp' (#33) from temp into develop 

Reviewed-on: https://dd.tall.wiki/gitea/wally/TALL-MUI-3/pulls/33
develop
wally 4 years ago
parent
68ad0d575c 78a57507a0
commit
fe94bae212
12 changed files with 192 additions and 151 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      .eslintrc.js
  2. 5
      CHANGELOG.md
  3. 34
      package.json
  4. 14
      src/components/Plugin/Plugin.vue
  5. 1
      src/components/TimeLine/TimeLine.vue
  6. 12
      src/components/TimeLine/component/TimeBox.vue
  7. 122
      src/components/TimeLine/component/TimeStatus.vue
  8. 72
      src/components/Tips/Tips.vue
  9. 32
      src/store/task/mutations.js
  10. 16
      src/store/task/state.js
  11. 1
      src/utils/time.js
  12. 27
      vue.config.js

7
.eslintrc.js
View File

@ -19,6 +19,13 @@ module.exports = {
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/html-indent': 'off',
'vue/html-closing-bracket-newline': [
'error',
{
singleline: 'never',
multiline: 'always',
},
],
},
parserOptions: { parser: 'babel-eslint' },

5
CHANGELOG.md
View File

@ -1,4 +1,4 @@
# 0.1.0 (2021-07-30)
# 0.1.0 (2021-08-03)
### 🌟 新功能
范围|描述|commitId
@ -6,6 +6,7 @@
- | db store | 6414c4f
- | indexedDB | 687394e
pinch | alloy finger实现图片的pinch放大缩小 | de01343
plugin | 插件添加了token及param参数 | aeb0292
- | post 封装 | da52e94
- | tall插件封装 | 1bcb920
- | ws storage | 21b3a06
@ -56,6 +57,7 @@
ID1000343 | 解决向下预加载查询参数时间没+1颗粒度;以及滚动加载颗粒度写死的问题 | 940603a, closes #ID1000343
plugin | 插件解析机制完善 | 0f5a27d
project title | 项目标题修改; 切换角色移除script | 5c20017
roles | 修复默认显示不是我的角色的问题 | b69f94f
role | 切换角色的逻辑修正完善 | 4ae534f
task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38
- | 上下滑动加载定期任务 | 4090d89
@ -95,6 +97,7 @@
task beginTime | 格式化任务开始时间 | fbc0301
template | eslint prettier sass uview tailwindcss | 9c966a1
- | 下滑时间轴添加备注 | 4fd20e3
- | 任务状态重构 | 4693655
- | 删除多余的技术验证界面 | 542ae5b
- | 界面样式调整 | 4367249
- | 重构store分层 | 5f6fff8

34
package.json
View File

@ -63,36 +63,38 @@
"@dcloudio/webpack-uni-pages-loader": "^2.0.0-31920210709003",
"@tailwindcss/postcss7-compat": "^2.2.7",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"autoprefixer": "^9.8.6",
"babel-plugin-import": "^1.11.0",
"core-js": "^3.15.2",
"cross-env": "^7.0.2",
"jest": "^25.4.0",
"mini-types": "*",
"miniprogram-api-typings": "*",
"sass-loader": "^8.0.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.36",
"postcss-comment": "^2.0.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
"vue-template-compiler": "^2.6.11",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.11.0",
"commitizen": "^4.0.3",
"commitlint": "^8.2.0",
"compression-webpack-plugin": "^5.0.1",
"conventional-changelog-cli": "^2.0.28",
"core-js": "^3.15.2",
"cross-env": "^7.0.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"husky": "^3.0.9",
"jest": "^25.4.0",
"lint-staged": "^11.0.0",
"right-pad": "^1.0.1",
"mini-types": "*",
"miniprogram-api-typings": "*",
"node-sass": "^4.14.1",
"postcss": "^7.0.36",
"postcss-class-rename": "^1.0.1",
"postcss-comment": "^2.0.0",
"prettier": "^2.2.1",
"vue-cli-plugin-commitlint": "~1.0.12"
"right-pad": "^1.0.1",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
"vue-cli-plugin-commitlint": "~1.0.12",
"vue-cli-plugin-eruda": "^1.3.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"Android >= 4",

14
src/components/Plugin/Plugin.vue
View File

@ -4,6 +4,7 @@
<view
style="height: 100%"
:data-uid="userId"
:data-token="token"
:data-pid="projectId"
:data-did="task.detailId"
:data-rid="roleId"
@ -13,6 +14,7 @@
:data-rstart="task.realStart"
:data-pdu="task.planDuration"
:data-rdu="task.realDuration"
:data-param="param"
v-html="pluginContent"
></view>
</view>
@ -41,6 +43,7 @@ export default {
pluginId: { default: '1', type: String },
styleType: { default: 0, type: Number },
pluginTaskId: { default: '', type: String },
param: { type: String, default: '' },
},
data() {
@ -48,9 +51,10 @@ export default {
},
computed: {
...mapState('role', ['roleId']),
...mapState('user', ['token']),
...mapGetters('user', ['userId']),
...mapGetters('project', ['projectId']),
...mapState('role', ['roleId']),
},
created() {
@ -69,7 +73,7 @@ export default {
const reg = /data-root=["|']?(\w+)["|']?/gi;
// console.log(data.html);
let uuid = '';
// FIXME: 没有兼容只有js 没有html的情况
// FIXME: 没有兼容 只有js, 没有html的情况
if (data.html) {
// 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
@ -77,13 +81,13 @@ export default {
uuid = RegExp.$1;
// console.log('uuid: ', uuid, `p${this.pluginTaskId}`);
const str = data.html.replaceAll(uuid, `p${this.pluginTaskId}`);
const str = data.html.replace(new RegExp(uuid, 'g'), `p${this.pluginTaskId}`);
this.pluginContent = str;
} else {
this.pluginContent = data.html;
}
const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
const str = data.js.replace(new RegExp(uuid, 'g'), `p${this.pluginTaskId}`);
this.handleDom(str);
}
// console.log(this.pluginContent);
@ -91,7 +95,7 @@ export default {
// if (data.js) {
// if (reg.test(data.js)) {
// const uuid = RegExp.$1;
// const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
// const str = data.js.replace(new RegExp(uuid, 'g'), `p${this.pluginTaskId}`);
// this.handleDom(str);
// } else {
// this.handleDom(data.js);

1
src/components/TimeLine/TimeLine.vue
View File

@ -29,6 +29,7 @@ import TimeBox from './component/TimeBox.vue';
export default {
name: 'TimeLine',
components: { TimeBox },
data() {
return { top: 0 };
},

12
src/components/TimeLine/component/TimeBox.vue
View File

@ -2,12 +2,10 @@
<view class="column">
<view :key="index" v-for="(task, index) in tasks">
<view class="flex">
<TimeStatus :content="JSON.stringify(task.process)" :status="task.process" />
<TimeStatus :task-name="task.name" :status="task.process" :task-id="task.id" />
<view class="flex items-center justify-between flex-1 ml-2 task-column">
<view>
<span>{{ $moment(+task.planStart).format(startTimeFormat) }}</span>
</view>
<view>{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
<!-- 任务功能菜单 -->
<TaskTools />
@ -39,8 +37,9 @@
:task="task"
:key="plugin.pluginTaskId"
:plugin-task-id="plugin.pluginTaskId"
:pluginId="plugin.pluginId"
:styleType="styleType || 0"
:plugin-id="plugin.pluginId"
:param="plugin.param"
:style-type="styleType || 0"
v-for="plugin in row"
/>
</view>
@ -65,6 +64,7 @@ import TaskTools from './TaskTools.vue';
export default {
name: 'TimeBox',
components: { TimeStatus, Skeleton, TaskTools },
data() {
return { currentComponent: '', styleType: 0 };
},

122
src/components/TimeLine/component/TimeStatus.vue
View File

@ -1,70 +1,33 @@
<template>
<view class="u-font-14">
<view
class="flex items-center justify-center text-blue-400 rounded-full icon-column"
v-if="status === 0"
@tap="changeStatus($event, 0)"
>
<u-circle-progress :percent="100" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="4" width="66">
<view class="flex items-center justify-center rounded-full icon-column" :style="{ color: orderStyle.color }" @tap="changeStatus">
<u-circle-progress :percent="100" :active-color="orderStyle.color" bg-color="rgba(255,255,255,0)" border-width="4" width="66">
<view class="u-progress-content">
<view class="u-progress-dot"></view>
<view class="u-progress-info">
<u-icon name="checkmark" size="30"></u-icon>
</view>
</view>
</u-circle-progress>
</view>
<view class="flex items-center justify-center text-black rounded-full icon-column" v-if="status === 1" @tap="changeStatus($event, 1)">
<u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
<view class="u-progress-content">
<view class="u-progress-dot"></view>
<view class="u-progress-info">{{ time }}</view>
</view>
</u-circle-progress>
</view>
<view
class="flex items-center justify-center text-gray-400 rounded-full icon-column"
v-if="status === 2"
@tap="changeStatus($event, 2)"
>
<u-circle-progress :percent="40" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
<view class="u-progress-content">
<view class="u-progress-dot"></view>
<view class="u-progress-info">
<u-icon name="play-right-fill" size="30"></u-icon>
</view>
</view>
</u-circle-progress>
</view>
<view
class="flex items-center justify-center font-black text-red-800 rounded-full icon-column"
@tap="changeStatus($event, 3)"
v-if="status === 3"
>
<u-circle-progress :percent="80" active-color="#2979ff" bg-color="rgba(255,255,255,0)" borderWidth="6" width="66">
<view class="u-progress-content">
<view class="u-progress-dot"></view>
<view class="u-progress-info">
<u-icon name="pause" size="30"></u-icon>
<u-icon :name="orderStyle.icon" v-if="orderStyle.icon" size="30"></u-icon>
<template v-else>{{ time }}</template>
</view>
</view>
</u-circle-progress>
</view>
</view>
</template>
<script>
import { mapMutations } from 'vuex';
import { mapState, mapMutations } from 'vuex';
export default {
name: 'TimeStatus',
props: {
status: { default: 0, type: Number },
content: { default: '', type: String },
taskName: { default: '', type: String },
taskId: { type: String, default: '' },
},
data() {
return {
// status: 3,
time: 20,
start: [{ text: '确认开始任务', color: 'blue' }],
pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
@ -72,28 +35,63 @@ export default {
again: [{ text: '重新开始任务', color: 'blue' }],
};
},
methods: {
...mapMutations('task', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),
chooseList() {
return this.start;
computed: {
...mapState('task', ['tip']),
// 图标文本颜色
// 任务状态 0未开始 1进行中 2暂停中 3已完成
orderStyle() {
let color = '#9CA3AF';
let icon = 'play-right-fill';
switch (this.status) {
case 1: // 进行中
color = '#60A5FA';
icon = '';
break;
case 2: // 暂停中
color = '#F87171';
icon = 'pause';
break;
case 3: // 已结束
color = '#34D399';
icon = 'checkmark';
break;
default:
// 未开始
color = '#9CA3AF';
icon = 'play-right';
break;
}
return { color, icon };
},
},
methods: {
...mapMutations('task', ['setTip']),
/**
* 点击了图标 修改任务状态
* @param {object} event
*/
changeStatus(event) {
const { status, taskId, taskName, tip } = this;
tip.status = status;
tip.taskId = taskId;
tip.left = event.target.x;
tip.top = event.target.y;
tip.show = true;
tip.text = this.genetateTips(status, taskName);
changeStatus(e, num) {
this.setStatus(num);
this.setTipsContent(this.chooseTips(num, this.content));
const client = {
left: e.target.x,
top: e.target.y,
};
this.setClient(client);
this.setTips(true);
this.setTip(tip);
},
chooseTips(num, content) {
switch (num) {
/**
* 计算tip的标题内容
*/
genetateTips(status, content) {
switch (status) {
case 0:
return `确认开始任务${content}吗？`;
return `确认开始任务"${content}"吗？`;
case 1:
return `请选择要执行的操作`;
case 2:

72
src/components/Tips/Tips.vue
View File

@ -3,45 +3,42 @@
class="fixed shadow-2xl"
style="z-index: 1000"
:style="{
left: client.left + 'px',
top: height - client.top > 110 ? client.top + 'px' : '',
bottom: height - client.top > 110 ? '' : '10px',
left: tip.left + 'px',
top: height - tip.top > 110 ? tip.top + 'px' : '',
bottom: height - tip.top > 110 ? '' : '10px',
}"
id="u-icard"
>
<u-card
:title="title"
style="width: 500rpx; margin: 0 !important"
v-if="showTips"
v-if="tip.show"
titleSize="28"
:headStyle="headStyle"
:footStyle="footStyle"
>
<view class="" slot="body"> {{ tipsContent }} </view>
<view class="flex ustify-between" slot="foot">
<u-button size="mini" @tap="clickCancel">取消</u-button>
<u-button v-if="status === 1" size="mini" @tap="clickCancel">暂停</u-button>
<u-button v-if="status === 2" size="mini" @tap="clickCancel">继续</u-button>
<u-button v-if="status === 1 || status === 2" size="mini" @tap="clickCancel">重新开始</u-button>
<u-button v-if="status === 1 || status === 2" type="primary" size="mini" @tap="clickCancel">结束</u-button>
<u-button v-if="status === 0 || status === 3" type="primary" size="mini" @tap="clickOk">确定</u-button>
<view class="" slot="body"> {{ tip.text }} </view>
<view class="flex justify-end" slot="foot">
<u-button size="mini" @tap="onCancel">取消</u-button>
<u-button v-if="tip.status === 1" size="mini" @tap="onPause">暂停</u-button>
<u-button v-if="tip.status === 2" size="mini" @tap="onContinu">继续</u-button>
<u-button v-if="tip.status === 1 || tip.status === 2" size="mini" @tap="onRestart">重新开始</u-button>
<u-button v-if="tip.status === 1 || tip.status === 2" type="primary" size="mini" @tap="onComplete">结束</u-button>
<u-button v-if="tip.status === 0 || tip.status === 3" type="primary" size="mini" @tap="onConfirm">确定</u-button>
</view>
</u-card>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'Tips',
props: {
title: {
default: '提示',
type: String,
},
},
computed: mapState('task', ['client', 'showTips', 'status', 'tipsContent']),
props: { title: { default: '提示', type: String } },
computed: mapState('task', ['tip']),
data() {
return {
footStyle: { padding: '4px 15px' },
@ -49,24 +46,33 @@ export default {
height: 0,
};
},
mounted() {
this.height = window.screen.height;
},
methods: {
...mapMutations('task', ['setTips']),
clickOk() {
this.$refs.uToast.show({
title: '点击了确定',
type: 'success',
});
this.setTips(false);
...mapMutations('task', ['setTipShow']),
// 点击了确认
onConfirm() {
this.onCancel();
},
clickCancel() {
this.$refs.uToast.show({
title: '点击了取消',
type: 'error',
});
this.setTips(false);
// TODO: 暂停
onPause() {},
// 重新开始
onRestart() {},
// 结束完成
onComplete() {},
// 继续
onContinu() {},
// 点击了取消
onCancel() {
this.setTipShow(false);
},
},
};

32
src/store/task/mutations.js
View File

@ -18,39 +18,31 @@ const mutations = {
},
/**
* 存储鼠标点击位置
* @param { object } state
* @param { object } data
*/
setClient(state, data) {
state.client = { ...data };
},
/**
* 是否显示tips
* @param { object } state
* @param { boolean } data
* 设置tip的值
* @param {object} state
* @param {object} data
*/
setTips(state, data) {
state.showTips = data;
setTip(state, data) {
if (!data) return;
state.tip = { ...data };
},
/**
* 是否显示tips
* @param { object } state
* @param { number } data
* @param { boolean } show
*/
setStatus(state, data) {
state.status = data;
setTipShow(state, show) {
state.tip.show = show;
},
/**
* 是否显示tips
* @param { object } state
* @param { string } data
* @param { number } status
*/
setTipsContent(state, data) {
state.tipsContent = data;
setStatus(state, status) {
state.tip.status = status;
},
/**

16
src/store/task/state.js
View File

@ -1,13 +1,21 @@
const state = {
scrollTop: 0,
isShrink: false, // true: 收起， false：展开
client: {
tip: {
taskId: '', // 当前正在修改状态的任务的id
show: false,
status: 0, // 所点击任务的当前状态码
text: '',
left: 0, // 鼠标点击位置距离左边的距离
top: 0, // 鼠标点击位置距离上边的距离
},
showTips: false,
status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
tipsContent: '', // 提示框内的内容，需要传入
// client: {
// left: 0, // 鼠标点击位置距离左边的距离
// top: 0, // 鼠标点击位置距离上边的距离
// },
// showTips: false,
// status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
// tipsContent: '', // 提示框内的内容，需要传入
timeNode: new Date().getTime(), // 时间基准点
timeUnit: 4, // 时间颗粒度
topEnd: false, // 时间轴向上查任务到顶了

1
src/utils/time.js
View File

@ -1,4 +1,5 @@
import dayjs from 'dayjs';
const advancedFormat = require('dayjs/plugin/advancedFormat');
const weekOfYear = require('dayjs/plugin/weekOfYear');

27
vue.config.js
View File

@ -1,20 +1,39 @@
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0
// const CopyWebpackPlugin = require('copy-webpack-plugin'); // 最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg|ttf|woff|woff2)(\?.*)?$/i;
const publicPath = process.env.VUE_APP_PUBLIC_PATH;
const isPro = process.env.NODE_ENV === 'production';
module.exports = {
lintOnSave: process.env.NODE_ENV !== 'production',
productionSourceMap: false,
publicPath: process.env.NODE_ENV === 'production' ? publicPath : '/',
publicPath: isPro ? publicPath : '/',
devServer: {
// open: true,
// host: '127.0.0.1',
overlay: { warnings: false, errors: true },
// proxy: {}
},
configureWebpack: { plugins: [] },
// , disable: true
configureWebpack: {
plugins: isPro
? [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
}),
]
: [],
},
pluginOptions: {
// mock: { entry: './src/mock/mock.js', debug: true, disable: true },
eruda: {},
webpackBundleAnalyzer: {
openAnalyzer: isPro,
},
},
};

Write Preview
Loading…
Cancel
Save