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 @@
v-for="(item, index) in info"
:key="index"
>
<div class="bi-mobile-base-info_content_item_label">
{{ item.label }}
</div>
<div class="bi-mobile-base-info_content_item_value">
{{ item.value }}
</div>
<template v-if="item.type === 'text'">
<div class="bi-mobile-base-info_content_item_label">
{{ item.label }}
</div>
<div class="bi-mobile-base-info_content_item_value">
{{ 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>
</template>
<script>
import { Image } from 'element-ui';
import BiMobileTitle from './title.vue';
export default {
props: ['info'],
name: 'bi-mobile-task-content',
components: { BiMobileTitle },
components: { BiMobileTitle, [Image.name]: Image },
data() {
return {
info: [
{
label: '项目参与人：',
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'
}
]
};
return {};
},
mounted() {
console.log(this.info);
}
};
</script>
<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 {
page-break-before: always;
&_content {
......@@ -75,19 +94,34 @@ export default {
border: 0.03rem solid #e8e8e8;
border-radius: 0.2rem;
margin: 0.34rem auto 0.6rem auto;
padding: 0.57rem 0.32rem;
padding: 0 0.32rem;
&_item {
font-size: 0.35rem;
color: #9d9d9d;
& > div {
display: inline-block;
}
&_image {
margin-top: 0.3rem;
&_el-image {
border-radius: 0.4rem;
}
}
&_value {
float: right;
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;
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 @@
class="bi-block"
:class="{ mobile: isMobile }"
></BiMobileBaseInfo>
<BiMobileTaskContent class="bi-block" :class="{ mobile: isMobile }" />
<BiMobileTaskContent
class="bi-block"
:class="{ mobile: isMobile }"
v-bind="taskdContentConfig"
/>
</div>
</template>
......@@ -32,49 +36,58 @@ export default {
page2: 0,
page3Info: [],
singleChoice: [],
baseInfo: [
[
{
name: '项目名称',
value: '在山西地区的零售药店巡店项目'
},
{
name: '服务商',
value: '北京医洋科技有限公司'
},
{
name: '任务月度',
value: '2020-03'
}
],
[
{
name: '任务量',
value: '222'
},
{
name: '项目执行人数',
value: '2131人'
},
{
name: '数据收集',
value: '415条'
}
],
[
{
name: '参与调研人数',
value: '213123'
},
{
name: '报表生成时间',
value: '2020-10-2'
}
]
info: [
{
type: 'text',
label: '会议时长',
value: '2小时'
},
{
type: 'text',
label: '最少参会人数',
value: '200'
},
{
type: 'text',
label: '产品名称',
value: '善存软胶囊'
},
{
type: 'textarea',
label: '传递信息',
value:
'脂肪肝血脂稠的日常调理是很重要的,建议患者平时控制一下饮食,从饮食上调理,将血脂控制在比较稳定的水平。'
},
{
type: 'text',
label: '参会人员反馈',
value: '积极',
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: '签到人数',
value: '200'
},
{
type: 'image',
label: '照片',
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: {},
created() {
window.status = 'completed';
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!