Skip to content

jml0128 / xrk-bi

Go to a project
Commit b4d1efe7 by wangxiao
Options

add task-content module

1 parent c73b0388
Inline Side-by-side
Showing with 133 additions and 86 deletions
src/packages/bi/src/components/mobile/task-content.vue
...@@ -11,63 +11,82 @@ ...@@ -11,63 +11,82 @@
v-for="(item, index) in info" v-for="(item, index) in info"
:key="index" :key="index"
> >
<div class="bi-mobile-base-info_content_item_label"> <template v-if="item.type === 'text'">
{{ item.label }} <div class="bi-mobile-base-info_content_item_label">
</div> {{ item.label }}
<div class="bi-mobile-base-info_content_item_value"> </div>
{{ item.value }} <div class="bi-mobile-base-info_content_item_value">
</div> {{ item.value }}
</div>
<div v-if="item.url" class="bi-mobile-base-info_content_item_image">
<el-image
class="bi-mobile-base-info_content_item_image_el-image"
:src="item.url"
></el-image>
</div>
</template>
<template v-if="item.type === 'textarea'">
<div style="display:flex">
<div
style="width:-webkit-fill-available"
class="bi-mobile-base-info_content_item_label"
>
{{ item.label }}
</div>
<div class="bi-mobile-base-info_content_item_textarea">
{{ item.value }}
</div>
</div>
</template>
<template v-if="item.type === 'image'">
<div class="image-container">
<div class="bi-mobile-base-info_content_item_label">
{{ item.label }}
</div>
<div
v-if="item.urls.length"
class="bi-mobile-base-info_image_item_container"
>
<el-image
class="bi-mobile-base-info_image_item_image"
v-for="(url, index) in item.urls"
:src="url"
:key="index"
></el-image>
</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Image } from 'element-ui';
import BiMobileTitle from './title.vue'; import BiMobileTitle from './title.vue';
export default { export default {
props: ['info'],
name: 'bi-mobile-task-content', name: 'bi-mobile-task-content',
components: { BiMobileTitle }, components: { BiMobileTitle, [Image.name]: Image },
data() { data() {
return { return {};
info: [ },
{ mounted() {
label: '项目参与人：', console.log(this.info);
value: '张三'
},
{
label: '发起方：',
value: '葵花医疗集团'
},
{
label: '服务商：',
value: '杭州大江工作室'
},
{
label: '提交日期：',
value: '2021-05-30'
},
{
label: '可供采购量：',
value: '100'
},
{
label: '本期采购量：',
value: '20'
},
{
label: '数据收集：',
value: '20'
},
{
label: '报表成时间：',
value: '2021-05-21 22:21:12'
}
]
};
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image-container {
display: flex !important;
justify-content: space-between;
}
.bi-mobile-base-info_image_item_image {
width: 2rem;
border-radius: 0.2rem;
margin: 0 0.2rem;
}
.bi-mobile-base-info { .bi-mobile-base-info {
page-break-before: always; page-break-before: always;
&_content { &_content {
...@@ -75,19 +94,34 @@ export default { ...@@ -75,19 +94,34 @@ export default {
border: 0.03rem solid #e8e8e8; border: 0.03rem solid #e8e8e8;
border-radius: 0.2rem; border-radius: 0.2rem;
margin: 0.34rem auto 0.6rem auto; margin: 0.34rem auto 0.6rem auto;
padding: 0.57rem 0.32rem; padding: 0 0.32rem;
&_item { &_item {
font-size: 0.35rem; font-size: 0.35rem;
color: #9d9d9d; color: #9d9d9d;
& > div { & > div {
display: inline-block; display: inline-block;
} }
&_image {
margin-top: 0.3rem;
&_el-image {
border-radius: 0.4rem;
}
}
&_value { &_value {
float: right; float: right;
color: #2d2d2d; color: #2d2d2d;
} }
& + .bi-mobile-base-info_content_item { &_textarea {
// text-indent: 0.8rem;
color: #2d2d2d;
}
&.bi-mobile-base-info_content_item {
margin-top: 0.5rem; margin-top: 0.5rem;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 0.5rem;
}
&.bi-mobile-base-info_content_item:last-child {
border: none;
} }
} }
} }
......
src/packages/bi/src/personal-achievements/index.vue
...@@ -8,7 +8,11 @@ ...@@ -8,7 +8,11 @@
class="bi-block" class="bi-block"
:class="{ mobile: isMobile }" :class="{ mobile: isMobile }"
></BiMobileBaseInfo> ></BiMobileBaseInfo>
<BiMobileTaskContent class="bi-block" :class="{ mobile: isMobile }" /> <BiMobileTaskContent
class="bi-block"
:class="{ mobile: isMobile }"
v-bind="taskdContentConfig"
/>
</div> </div>
</template> </template>
...@@ -32,49 +36,58 @@ export default { ...@@ -32,49 +36,58 @@ export default {
page2: 0, page2: 0,
page3Info: [], page3Info: [],
singleChoice: [], singleChoice: [],
baseInfo: [ info: [
[ {
{ type: 'text',
name: '项目名称', label: '会议时长',
value: '在山西地区的零售药店巡店项目' value: '2小时'
}, },
{ {
name: '服务商', type: 'text',
value: '北京医洋科技有限公司' label: '最少参会人数',
}, value: '200'
{ },
name: '任务月度', {
value: '2020-03' type: 'text',
} label: '产品名称',
], value: '善存软胶囊'
[ },
{ {
name: '任务量', type: 'textarea',
value: '222' label: '传递信息',
}, value:
{ '脂肪肝血脂稠的日常调理是很重要的,建议患者平时控制一下饮食,从饮食上调理,将血脂控制在比较稳定的水平。'
name: '项目执行人数', },
value: '2131人' {
}, type: 'text',
{ label: '参会人员反馈',
name: '数据收集', value: '积极',
value: '415条' url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841'
} },
], {
[ type: 'text',
{ label: '签到人数',
name: '参与调研人数', value: '200'
value: '213123' },
}, {
{ type: 'image',
name: '报表生成时间', label: '照片',
value: '2020-10-2' value: '20',
} urls: [
] 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841'
]
}
] ]
}; };
}, },
computed: {}, computed: {
taskdContentConfig() {
return {
info: this.info
};
}
},
methods: {}, methods: {},
created() { created() {
window.status = 'completed'; window.status = 'completed';
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!