|
@@ -4,17 +4,29 @@
|
|
|
<div class="page-container">
|
|
<div class="page-container">
|
|
|
<!-- 基本信息 -->
|
|
<!-- 基本信息 -->
|
|
|
<div class="card" v-if="taskInfo">
|
|
<div class="card" v-if="taskInfo">
|
|
|
- <van-panel title="介绍信内容">
|
|
|
|
|
|
|
+ <van-panel >
|
|
|
|
|
+ <template #header>
|
|
|
|
|
+ <van-cell title="介绍信内容">
|
|
|
|
|
+ <template #right-icon>
|
|
|
|
|
+ <div class="flex-box">
|
|
|
|
|
+ <span style="color: #aaa;">添加</span>
|
|
|
|
|
+ <van-switch size="20px" v-model="checked" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </van-cell>
|
|
|
|
|
+ </template>
|
|
|
<div class="panel-box">
|
|
<div class="panel-box">
|
|
|
<van-field
|
|
<van-field
|
|
|
label="介绍信名称"
|
|
label="介绍信名称"
|
|
|
required
|
|
required
|
|
|
v-model="reformData.description"
|
|
v-model="reformData.description"
|
|
|
|
|
+ placeholder="请输入"
|
|
|
:maxlength="20"
|
|
:maxlength="20"
|
|
|
:v-model="taskInfo.orgName" />
|
|
:v-model="taskInfo.orgName" />
|
|
|
<van-field
|
|
<van-field
|
|
|
label="接待机构"
|
|
label="接待机构"
|
|
|
required
|
|
required
|
|
|
|
|
+ placeholder="请输入"
|
|
|
v-model="reformData.description"
|
|
v-model="reformData.description"
|
|
|
:maxlength="20"
|
|
:maxlength="20"
|
|
|
:v-model="taskInfo.checkItem" />
|
|
:v-model="taskInfo.checkItem" />
|
|
@@ -39,24 +51,24 @@
|
|
|
<!-- 人员列表 -->
|
|
<!-- 人员列表 -->
|
|
|
<div class="card" >
|
|
<div class="card" >
|
|
|
<van-swipe-cell>
|
|
<van-swipe-cell>
|
|
|
- <van-card
|
|
|
|
|
- class="goods-card"
|
|
|
|
|
- thumb="https://img01.yzcdn.cn/vant/cat.jpeg">
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <van-cell title="出入人员" value="出入人员"></van-cell>
|
|
|
|
|
- </template>
|
|
|
|
|
- <template #desc>
|
|
|
|
|
- <van-cell title="出入人员" value="出入人员"></van-cell>
|
|
|
|
|
- </template>
|
|
|
|
|
- </van-card>
|
|
|
|
|
|
|
+ <div class="goods-card">
|
|
|
|
|
+ <div class="card-img-box">
|
|
|
|
|
+ <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card-cell-box">
|
|
|
|
|
+ <van-cell title="出入人员" value="出入人员"></van-cell>
|
|
|
|
|
+ <van-cell title="身份证" value="123456789012345678"></van-cell>
|
|
|
|
|
+ <van-cell title="单位" value="高新兴讯美科技有限公司高新兴讯"></van-cell>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
<template #right>
|
|
<template #right>
|
|
|
- <van-button square text="删除" type="danger" class="delete-button" />
|
|
|
|
|
|
|
+ <van-button style="height: 100%;" square text="删除" type="danger" class="delete-button" />
|
|
|
</template>
|
|
</template>
|
|
|
</van-swipe-cell>
|
|
</van-swipe-cell>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 添加人员信息 -->
|
|
<!-- 添加人员信息 -->
|
|
|
- <van-collapse v-model="activeNames">
|
|
|
|
|
|
|
+ <van-collapse v-show="checked" v-model="activeNames">
|
|
|
<van-collapse-item title="添加人员" name="1">
|
|
<van-collapse-item title="添加人员" name="1">
|
|
|
<div class="panel-box">
|
|
<div class="panel-box">
|
|
|
<van-field
|
|
<van-field
|
|
@@ -106,11 +118,13 @@ import Uploader from "@/components/upload/gxuploader.vue";
|
|
|
import {formatDate} from "@/filters/filter";
|
|
import {formatDate} from "@/filters/filter";
|
|
|
import {mapGetters} from "vuex";
|
|
import {mapGetters} from "vuex";
|
|
|
import {imgUrl} from "@/utils";
|
|
import {imgUrl} from "@/utils";
|
|
|
|
|
+import { ImagePreview } from 'vant'
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
components: {Uploader, DateCell},
|
|
components: {Uploader, DateCell},
|
|
|
data(){
|
|
data(){
|
|
|
return {
|
|
return {
|
|
|
activeNames:[1],
|
|
activeNames:[1],
|
|
|
|
|
+ checked:false,
|
|
|
taskInfo:[],
|
|
taskInfo:[],
|
|
|
//整改
|
|
//整改
|
|
|
reformData: {
|
|
reformData: {
|
|
@@ -125,12 +139,39 @@ export default defineComponent({
|
|
|
},
|
|
},
|
|
|
methods:{
|
|
methods:{
|
|
|
formatDate,
|
|
formatDate,
|
|
|
|
|
+ preViewNFC(url) {
|
|
|
|
|
+ // this.preViewImages.images = this.nfcImage.map(v => imgUrl(v.img))
|
|
|
|
|
+ // this.preViewImages.startPosition = i
|
|
|
|
|
+ ImagePreview(url)
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|
|
|
-
|
|
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+.intro-add{
|
|
|
|
|
+ .van-card{
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .card-cell-box{
|
|
|
|
|
+ width: 70%;
|
|
|
|
|
+ .van-cell{
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ &::after{
|
|
|
|
|
+ left:10px;
|
|
|
|
|
+ right:10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .van-cell__title{
|
|
|
|
|
+ flex:.25;
|
|
|
|
|
+ }
|
|
|
|
|
+ .van-cell__value{
|
|
|
|
|
+ flex:.75;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
-.question-edit{
|
|
|
|
|
|
|
+.intro-add{
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
@@ -190,35 +231,22 @@ export default defineComponent({
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-.nfc-img{
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- width: 140px;
|
|
|
|
|
- height: 140px;
|
|
|
|
|
- margin: 10px;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- &:first-child{
|
|
|
|
|
- margin-left: 0;
|
|
|
|
|
- }
|
|
|
|
|
- >img{
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- border: none;
|
|
|
|
|
- }
|
|
|
|
|
- >span{
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- padding: 0 10px;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- display: block;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- background-color: rgba(0,0,0,.2 );
|
|
|
|
|
- color: #eaeaea;
|
|
|
|
|
- font-size: 20px;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- line-height: 30px;
|
|
|
|
|
- height: 30px;
|
|
|
|
|
|
|
+.goods-card{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ .card-img-box{
|
|
|
|
|
+ width: 200px;
|
|
|
|
|
+ height: 200px;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+ >img{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.big-btn-box{
|
|
.big-btn-box{
|