This commit is contained in:
yanran200730
2022-07-14 14:00:27 +08:00
parent a50c9ce240
commit ea4f22c2b9

View File

@@ -20,12 +20,71 @@
<el-radio label="3">按网格选择</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择群主" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
<el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
<ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
<el-button type="info">选择</el-button>
</ai-user-get>
</el-input>
<div class="tips">
<p>消息预计送达居民群数</p>
<span>215</span>
<i class="iconfont iconModal_Warning"></i>
</div>
</el-form-item>
<el-form-item label="消息提醒" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
<el-switch
v-model="form.status"
active-text="开启后创建的群发任务需要审批人进行审批">
</el-switch>
</el-form-item>
<el-form-item label="审批人员" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
<el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
<ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
<el-button type="info">选择</el-button>
</ai-user-get>
</el-input>
</el-form-item>
<el-form-item label="发送内容" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
<el-input size="small" type="textarea" :rows="6" placeholder="请输入文本内容..." v-model="form.departmentName"></el-input>
<div class="add">
<el-popover
placement="top"
width="340"
offset="0"
trigger="hover">
<div class="add-item" slot="reference" style="width: max-content;">
<img src="https://cdn.cunwuyun.cn/dvcp/announce/add.png" />
<span style="color: #2266FF; font-size: 12px;">添加附件类型</span>
</div>
<div class="AppAnnounceDetail-content-wrapper">
<div class="content-item">
<img src="https://cdn.cunwuyun.cn/dvcp/announce/big-img.png" />
<p>图片</p>
</div>
<div class="content-item">
<img src="https://cdn.cunwuyun.cn/dvcp/announce/big-video.png" />
<p>视频</p>
</div>
<div class="content-item">
<img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
<p>文件</p>
</div>
<div class="content-item">
<img src="https://cdn.cunwuyun.cn/dvcp/announce/site.png" />
<p>网页</p>
</div>
<div class="content-item">
<img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png" />
<p>小程序</p>
</div>
</div>
</el-popover>
</div>
<div class="tips">
<em>从本地上传图片最大支持10MB支持JPG,PNG格式视频最大支持10MB支持MP4格式文件最大支持20MB</em>
</div>
</el-form-item>
</div>
</template>
</ai-card>
@@ -164,9 +223,48 @@
}
</script>
<style scoped lang="scss">
<style lang="scss">
.AppAnnounceDetail-content-wrapper {
display: flex;
align-items: center;
.content-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 64px;
height: 64px;
line-height: 1;
margin-right: 4px;
text-align: center;
background: #F9F9F9;
border-radius: 2px;
cursor: pointer;
&:hover {
opacity: 0.6;
}
&:last-child {
margin-right: 0;
}
img {
width: 32px;
height: 32px;
margin-bottom: 4px;
}
p {
color: #222;
font-size: 12px;
}
}
}
.AppAnnounceDetail {
::v-deep .ai-detail__content {
.ai-detail__content {
.ai-detail__content--wrapper {
position: relative;
max-width: 100%;
@@ -176,6 +274,38 @@
}
}
.add {
display: flex;
flex-direction: column;
padding: 14px 16px;
background: #F9F9F9;
border-radius: 0px 0px 2px 2px;
border: 1px solid #D0D4DC;
border-top: none;
.add-item {
display: flex;
align-items: center;
line-height: 1;
cursor: pointer;
&:hover {
opacity: 0.6;
}
img {
width: 20px;
height: 20px;
margin-right: 2px;
}
span {
color: #222;
font-size: 14px;
}
}
}
.AppAnnounceDetail-container {
display: flex;
position: relative;
@@ -192,8 +322,33 @@
position: sticky;
top: 0;
width: 400px;
height: 90%;
background: red;
height: 688px;
background: url(https://cdn.cunwuyun.cn/dvcp/announce/phone.png);
background-size: 400px 100%;
}
}
.tips {
display: flex;
align-items: center;
font-size: 14px;
color: #222222;
span {
margin: 0 3px;
color: #2266FF;
}
i {
color: #c0c9db;
}
em {
line-height: 20px;
margin-top: 8px;
color: #888888;
font-size: 12px;
font-style: normal;
}
}
}