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