Browse Source

style: 插件样式调整

deliver
wally 4 years ago
parent
commit
7411d3ad6e
  1. 1
      CHANGELOG.md
  2. 87
      components/Globals/Globals.vue
  3. 21
      components/Plugin/Plugin.vue
  4. 13
      components/TimeLine/component/TimeBox.vue
  5. 6
      pages.json
  6. 5
      pages/404/404.vue
  7. 11
      pages/detailWebview/detailWebview.vue
  8. 4
      plugins/p-deliver-upload/p-deliver-upload.vue
  9. 16
      plugins/p-finance-audit/p-finance-audit.vue
  10. 16
      plugins/p-finance/p-finance.vue
  11. 9
      plugins/p-source-manage/p-source-manage.vue
  12. 16
      plugins/p-task-title/p-task-title.vue
  13. 128
      utils/ui.js

1
CHANGELOG.md

@ -81,6 +81,7 @@
### 🔨 代码重构 ### 🔨 代码重构
范围|描述|commitId 范围|描述|commitId
--|--|-- --|--|--
api | 调整mock api放入mock.js下;main中加入环境变量的判断 | [053ac31](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/053ac31)
- | deliver检查人重构;更新真实数据的检查人 | [ce808c4](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/ce808c4) - | deliver检查人重构;更新真实数据的检查人 | [ce808c4](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/ce808c4)
- | project init 重构 | [2457a87](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/2457a87) - | project init 重构 | [2457a87](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/2457a87)
- | 交付物代码整理重构 未完 | [d7c6e51](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/d7c6e51) - | 交付物代码整理重构 未完 | [d7c6e51](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/d7c6e51)

87
components/Globals/Globals.vue

@ -1,55 +1,46 @@
<template> <template>
<theme> <u-card
<u-card @click="openCard"
@click="openCard" :show-foot="false"
:show-foot="false" :show-head="false"
:show-head="false" :style="{ 'max-height': globalsHeight + 'px' }"
:style="{ 'max-height': globalsHeight + 'px' }" border-radius="25"
border-radius="25" margin="0"
margin="0" class="global-container"
class="global-container" >
> <template v-slot:body>
<template v-slot:body> <scroll-view :scrollY="true" :style="{ 'max-height': globalsHeight - 30 + 'px' }">
<scroll-view :scrollY="true" :style="{ 'max-height': globalsHeight - 30 + 'px' }"> <!-- 骨架屏 -->
<!-- 骨架屏 --> <skeleton :banner="false" :loading="showGlobalSkeleton" :row="3" animate class="u-line-2 skeleton"></skeleton>
<skeleton :banner="false" :loading="showGlobalSkeleton" :row="3" animate class="u-line-2 skeleton"></skeleton>
<view class="grid gap-2"> <view class="grid">
<view v-for="item in globals" :key="item.id"> <template v-for="item in globals" :key="item.id">
<template v-if="item.plugins && item.plugins.length"> <template v-if="item.plugins && item.plugins.length">
<view v-for="(pluginArr, i) in item.plugins" :key="i"> <view v-for="(pluginArr, i) in item.plugins" :key="i" class="pb-3">
<template class="p-0 u-col-between" v-if="pluginArr.length"> <template class="p-0 u-col-between" v-if="pluginArr.length">
<Plugin <Plugin
:class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]" :class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]"
:task="item" :task="item"
:key="plugin.pluginTaskId" :key="plugin.pluginTaskId"
:plugin-task-id="plugin.pluginTaskId" :plugin-task-id="plugin.pluginTaskId"
:plugin-id="plugin.pluginId" :plugin-id="plugin.pluginId"
:param="plugin.param" :param="plugin.param"
:style-type="plugin.styleType || 0" :style-type="plugin.styleType || 0"
v-for="plugin in pluginArr" v-for="plugin in pluginArr"
/> />
</template> </template>
</view> </view>
</template> </template>
<!-- 任务名插件 --> <!-- 任务名插件 -->
<p-task-title :task="item" v-else /> <view v-else class="pb-3">
<Plugin plugin-id="1" :task="item" />
<!-- 财务审批 -->
<p-finance-audit :task="item" />
<!-- 资源管理组件 -->
<p-source-manage :task="item" />
<!-- 进度条 -->
<p-finance :task="item" />
</view> </view>
</view> </template>
</scroll-view> </view>
</template> </scroll-view>
</u-card> </template>
</theme> </u-card>
</template> </template>
<script setup> <script setup>

21
components/Plugin/Plugin.vue

@ -1,11 +1,10 @@
<template> <template>
<view class="u-font-14 rounded-md mt-1 bg-white" style="height: 100%"> <view class="u-font-14 rounded-md bg-white p-2" style="height: 100%" @click="setStorage">
<view @click="setStorage"> <Render :task="task" :pluginId="pluginId" :styleType="styleType" :pluginTaskId="pluginTaskId" :param="param" />
<Render :task="task" :pluginId="pluginId" :styleType="styleType" :pluginTaskId="pluginTaskId" :param="param" /> <!-- <plugin-default /> -->
<!-- <plugin-default /> --> <!-- <component :task="task" :is="pluginComponent"></component> -->
<!-- <component :task="task" :is="pluginComponent"></component> --> <p-task-title :task="task" v-if="pluginId === '1'" />
<p-task-title v-if="pluginId === '1'" /> <!-- <p-task-description :task="task" v-if="pluginId === '2'" />
<!-- <p-task-description :task="task" v-if="pluginId === '2'" />
<p-task-duration-delay :task="task" v-if="pluginId === '3'" /> <p-task-duration-delay :task="task" v-if="pluginId === '3'" />
<p-task-start-time-delay :task="task" v-if="pluginId === '4'" /> <p-task-start-time-delay :task="task" v-if="pluginId === '4'" />
<p-upload-deliverable :task="task" v-if="pluginId === '5' && isMine" /> <p-upload-deliverable :task="task" v-if="pluginId === '5' && isMine" />
@ -19,9 +18,11 @@
<p-manage-task :task="task" v-if="pluginId === '12'" /> <p-manage-task :task="task" v-if="pluginId === '12'" />
<p-wbs-import :task="task" v-if="pluginId === '13' || pluginId === '14'" /> --> <p-wbs-import :task="task" v-if="pluginId === '13' || pluginId === '14'" /> -->
<!-- 交付物插件 --> <!-- 交付物插件 -->
<p-deliver v-if="pluginId === '15'" /> <p-deliver v-if="pluginId === '15'" />
</view> <p-source-manage v-if="pluginId === '16'" />
<p-finance-audit v-if="pluginId === '17'" />
<p-finance v-if="pluginId === '18'" />
</view> </view>
</template> </template>

13
components/TimeLine/component/TimeBox.vue

@ -17,7 +17,14 @@
<view class="h-3" v-if="task.process === 4"></view> <view class="h-3" v-if="task.process === 4"></view>
<!-- <view class="ml-3 overflow-hidden shadow-lg task-box"> --> <!-- <view class="ml-3 overflow-hidden shadow-lg task-box"> -->
<view class="ml-3"> <view class="ml-3">
<u-card :show-foot="false" :show-head="false" :style="{ height: setHeight(task.panel) }" class="h-16" margin="0" v-if="showSkeleton"> <u-card
:show-foot="false"
:show-head="false"
:style="{ height: setHeight(task.panel) }"
class="h-16"
margin="0"
v-if="showSkeleton"
>
<view slot="body"> <view slot="body">
<view><skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton></view> <view><skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton></view>
</view> </view>
@ -32,10 +39,10 @@
v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton"
> >
<template v-slot:body> --> <template v-slot:body> -->
<view class="h-16" v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" @click="onClickTask(task.planStart - 0, task.id)"> <view v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" @click="onClickTask(task.planStart - 0, task.id)">
<view class="p-0 u-col-between grid gap-3"> <view class="p-0 u-col-between grid gap-3">
<view :key="pIndex" v-for="(row, pIndex) in task.plugins"> <view :key="pIndex" v-for="(row, pIndex) in task.plugins">
<view class="grid gap-2 grid-cols-1" v-if="row.length"> <view class="grid grid-cols-1" v-if="row.length">
<Plugin <Plugin
:class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]" :class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]"
:task="task" :task="task"

6
pages.json

@ -44,6 +44,12 @@
"style": { "style": {
"navigationBarTitleText": "详情页" "navigationBarTitleText": "详情页"
} }
},
{
"path": "pages/404/404",
"style": {
"navigationBarTitleText": "404"
}
} }
], ],
"globalStyle": { "globalStyle": {

5
pages/404/404.vue

@ -0,0 +1,5 @@
<template>
<div class="404">404</div>
</template>
<script setup></script>

11
pages/detailWebview/detailWebview.vue

@ -9,8 +9,17 @@ import { onLoad } from '@dcloudio/uni-app';
const src = ref(''); const src = ref('');
onLoad(options => { onLoad(options => {
if (options && options.url) { if (!options) {
uni.redirectTo({ url: '/pages/404/404' });
return;
}
if (options.url) {
src.value = options.url; src.value = options.url;
} }
if (options.name) {
uni.setNavigationBarTitle({
title: options.name || '详情页',
});
}
}); });
</script> </script>

4
plugins/p-deliver-upload/p-deliver-upload.vue

@ -1,8 +1,8 @@
<template> <template>
<!-- 是自己的任务 且该任务有交付物 才显示提交组件 --> <!-- 是自己的任务 且该任务有交付物 才显示提交组件 -->
<view class="bg-white p-2 rounded-md relative" @longpress.prevent="showMask = true"> <view class="bg-white px-2 rounded-md relative" @longpress.prevent="showMask = true">
<!-- 插件名称输入和提交 --> <!-- 插件名称输入和提交 -->
<view class="flex item-center justify-between py-3 pl-2"> <view class="flex item-center justify-between py-2">
<view class="flex-1"> <view class="flex-1">
<text v-if="deliver.deliverName"> <text v-if="deliver.deliverName">
{{ deliver.deliverName }} {{ deliver.deliverName }}

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

@ -1,8 +1,18 @@
<template> <template>
<div class="flex justify-around"> <div class="flex justify-around">
<button class="text-xs bg-blue-500 text-white leading-6" style="width: 250rpx">财务审批</button> <button class="text-xs bg-blue-500 text-white leading-6" style="width: 250rpx" @click="openAudit">财务审批</button>
<button class="text-xs bg-blue-500 text-white leading-6" style="width: 250rpx">财务统计</button> <button class="text-xs bg-blue-500 text-white leading-6" style="width: 250rpx" @click="openStatistical">财务统计</button>
</div> </div>
</template> </template>
<script setup></script> <script setup>
// DEBUG:
function openAudit() {
uni.$ui.openDetail({ url: 'https://www.taobao.com', name: '财务审批' });
}
// DEBUG:
function openStatistical() {
uni.$ui.openDetail({ url: 'https://www.taobao.com', name: '财务统计' });
}
</script>

16
plugins/p-finance/p-finance.vue

@ -29,27 +29,27 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, inject } from 'vue';
const props = defineProps({ task: { type: Object } }); const task = inject('task');
// const task = inject('task');
const data = ref(null); const data = ref(null);
async function getData() { //
async function getFinanceByTaskData() {
try { try {
const taskDetailId = props.task.taskDetailId; const taskDetailId = task.taskDetailId;
data.value = await uni.$u.api.getFinanceByTask(taskDetailId); data.value = await uni.$u.api.getFinanceByTask(taskDetailId);
} catch (error) { } catch (error) {
console.log('error: ', error); console.log('getFinanceByTaskData error: ', error);
} }
} }
getData(); getFinanceByTaskData();
// //
function openFinance() { function openFinance() {
// DEBUG: // DEBUG:
uni.navigateTo({ url: '/pages/detailWebview/detailWebview?url=http://www.baidu.com' }); uni.$ui.openDetail({ url: 'http://www.baidu.com', name: '财务' });
} }
</script> </script>

9
plugins/p-source-manage/p-source-manage.vue

@ -1,6 +1,11 @@
<!-- 资源管理 --> <!-- 资源管理 -->
<template> <template>
<button class="text-xs bg-blue-500 text-white leading-6" style="width: 500rpx">资源管理</button> <button class="text-xs bg-blue-500 text-white leading-6" style="width: 500rpx" @click="openSourceManage">资源管理</button>
</template> </template>
<script setup></script> <script setup>
function openSourceManage() {
// DEBUG:
uni.$ui.openDetail({ url: 'http://m.jd.com', name: '资源管理' });
}
</script>

16
plugins/p-task-title/p-task-title.vue

@ -1,19 +1,13 @@
<template> <template>
<!-- 任务名插件 --> <!-- 任务名插件 -->
<view class="box shadow-lg"> <view class="u-font-14">
<view class="bg-white rounded-md pl-2">{{ task.name }}</view> {{ task.name }}
</view> </view>
</template> </template>
<script setup> <script setup>
// import { inject } from 'vue';
// inject()
defineProps({ task: { type: Object, default: () => {} } }); defineProps({ task: { type: Object, default: () => {} } });
</script> </script>
<style scoped lang="scss">
.box {
border-radius: 8px;
background: #fff;
padding: 16px;
overflow: hidden;
}
</style>

128
utils/ui.js

@ -1,56 +1,74 @@
export default { import { stringify } from 'qs';
/** export default {
* 显示toast /**
* @param {string} title 提示内容 * 显示toast
* @param {number} duration 显示时间 默认2000 * @param {string} title 提示内容
*/ * @param {number} duration 显示时间 默认2000
showToast(title, duration = 2000) { */
return uni.showToast({ showToast(title, duration = 2000) {
title, return uni.showToast({
icon: 'none', title,
duration, icon: 'none',
mask: true, duration,
}); mask: true,
}, });
},
// 隐藏toast
hideToast() { // 隐藏toast
return uni.hideToast(); hideToast() {
}, return uni.hideToast();
},
/**
* 显示加载雪花 /**
* @param {string} title * 显示加载雪花
*/ * @param {string} title
showLoading(title = '玩命加载中...') { */
return uni.showLoading({ showLoading(title = '玩命加载中...') {
title, return uni.showLoading({
mask: true, title,
}); mask: true,
}, });
},
// 隐藏loading
hideLoading() { // 隐藏loading
return uni.hideLoading(); hideLoading() {
}, return uni.hideLoading();
},
/**
* 显示modal弹出框 /**
* @param {string} title 标题 * 显示modal弹出框
* @param {string} content 内容 * @param {string} title 标题
* @param {boolean} showCancel 是否显示取消按钮 默认true * @param {string} content 内容
*/ * @param {boolean} showCancel 是否显示取消按钮 默认true
showModal(title, content, showCancel = true) { */
return new Promise(function(resolve, reject) { showModal(title, content, showCancel = true) {
uni.showModal({ return new Promise(function (resolve, reject) {
title, uni.showModal({
content, title,
showCancel, content,
success: ({ confirm, cancel }) => { showCancel,
confirm && resolve(); success: ({ confirm, cancel }) => {
cancel && reject(); confirm && resolve();
}, cancel && reject();
}); },
}); });
}, });
},
/**
* 打开详情页
* @param {object} options
*/
openDetail(options) {
if (!options) {
throw new Error('缺少参数');
}
if (!options.url) {
throw new Error('缺少url参数');
}
const query = stringify(options);
console.log('query: ', query);
const path = `/pages/detailWebview/detailWebview?${query}`;
uni.navigateTo({ url: path });
},
}; };

Loading…
Cancel
Save