zq
1 month ago
12 changed files with 868 additions and 286 deletions
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,145 @@ |
|||
<template> |
|||
<div class="batch-wrap"> |
|||
<p class="flex siteMessage5_desc mb24"> <img src="@/assets/info_filled.svg" alt=""> |
|||
录入格式：1.请按照 “项目名称 空格 单次价格” 格式输入。2.每行一条数据， 回车 确认</p> |
|||
<div class="content-wrap"> |
|||
<el-form :model="form" :rules="formRules"> |
|||
<GuipRadio v-model="groupType" class="radio-form" :options="groupOptions" label="分组形式" prop="language" @change="radioChange" /> |
|||
<GuipFormItem class="mb24 mt24" v-if="groupType==1" label="已有分组"> |
|||
<div class="tabProject flex" slot="formDom" > |
|||
<div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']" @click="selectTag(item)" |
|||
v-for="(item) in projectTagData" :key="item.name">{{ item.name }}</div> |
|||
</div> |
|||
</GuipFormItem> |
|||
<GuipFormItem v-if="groupType == 2" class="mb24 mt24" label="分组名称"> |
|||
<GuipInput slot="formDom" ref="GuipInput" v-model="form.name" |
|||
prop="name" placeholder="请填写新增分组名称" @change="changeName"/> |
|||
</GuipFormItem> |
|||
<GuipFormItem class=" form-special" label="录入项目"> |
|||
<GuipTextarea slot="formDom" v-model="form.notice" prop="description" width="100%" height="262px" |
|||
autosize :placeholder="'例如：\n推拿 168\n针灸 100'" @change="getNotice"/> |
|||
</GuipFormItem> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import GuipRadio from '@/components/GuipRadio.vue'; |
|||
import GuipTextarea from '@/components/GuipTextarea.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: ['projectTagData'], |
|||
components: { |
|||
GuipRadio, |
|||
GuipInput, |
|||
GuipTextarea, |
|||
GuipFormItem |
|||
}, |
|||
data() { |
|||
return { |
|||
formRules: { |
|||
name: [ |
|||
{ required: true, message: '请输入', trigger: 'blur' } |
|||
], |
|||
|
|||
}, |
|||
form:{ |
|||
name:'', |
|||
}, |
|||
groupType: '1', |
|||
notice:'', |
|||
projectSearchId:'', |
|||
groupOptions: [ |
|||
{ label: '归入已有分组', value: '1' }, |
|||
{ label: '新增分组', value: '2' }, // 禁用选项 |
|||
{ label: '不分组', value: '3' }, |
|||
], |
|||
} |
|||
}, |
|||
methods: { |
|||
getNotice(e){ |
|||
// \n 换行符 |
|||
let flag = e.includes('\n') |
|||
console.log(JSON.stringify(e),flag,'===---'); |
|||
}, |
|||
changeName(e){ |
|||
console.log(e,'===---'); |
|||
}, |
|||
radioChange(data) { |
|||
console.log(data, 'radio--data'); |
|||
}, |
|||
selectTag(item){ |
|||
this.projectSearchId = item.id |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.batch-wrap { |
|||
.siteMessage5_desc { |
|||
border-radius: 4px; |
|||
background: #F2F7FF; |
|||
border: 1px solid #BFDAFF; |
|||
padding: 8px 13px; |
|||
margin-bottom: 32px; |
|||
|
|||
img { |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.tabProject { |
|||
gap: 12px; |
|||
|
|||
.tab-item { |
|||
/* 自动布局子元素 */ |
|||
height: 28px; |
|||
min-width: 74px; |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
padding: 4px 12px; |
|||
gap: 4px; |
|||
align-self: stretch; |
|||
z-index: 2; |
|||
border-radius: 14px; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
/* middle/middle_line_1 */ |
|||
border: 1px solid #DFE2E6; |
|||
/* body/body 2_regular */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 14px; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
letter-spacing: 0.08em; |
|||
/* text/text_4 */ |
|||
color: #8A9099; |
|||
} |
|||
|
|||
.active { |
|||
color: #006AFF; |
|||
border: none; |
|||
background: #F2F3F5; |
|||
} |
|||
} |
|||
.form-special{ |
|||
align-items: flex-start; |
|||
} |
|||
::v-deep .form-item-top{ |
|||
height: 38px; |
|||
} |
|||
::v-deep .form-item1{ |
|||
gap: 12px; |
|||
} |
|||
.radio-form ::v-deep .el-form-item__label{ |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue