jiangyy
4 years ago
12 changed files with 2379 additions and 22437 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 225 B |
|
After Width: | Height: | Size: 225 B |
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<div :id="formId" class="resi-container"> |
|||
<el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth"> |
|||
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row"> |
|||
<el-col v-for="n in item" :key="n.id" :span="n.item_type === 'textarea'&&24 || 6"> |
|||
<el-form-item :prop="n.column_name" :label="n.label"> |
|||
<!-- <div class="resi-cell"> --> |
|||
<!-- <div class="resi-cell-label">{{n.label}}</div> --> |
|||
<div class="resi-cell-value"> |
|||
<template v-if="n.item_type === 'input'"> |
|||
<el-input |
|||
v-if="n.valid_type" |
|||
v-model="form[n.column_name]" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
<el-input |
|||
v-else |
|||
v-model="form[n.column_name]" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</template> |
|||
<template v-if="n.item_type === 'textarea'"> |
|||
<el-input |
|||
v-model="form[n.column_name]" |
|||
class="resi-cell-textarea" |
|||
size="small" |
|||
type="textarea" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</template> |
|||
<el-date-picker |
|||
v-else-if="n.item_type === 'date'" |
|||
v-model="form[n.column_name]" |
|||
class="resi-cell-input" |
|||
type="date" |
|||
size="small" |
|||
clearable |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" |
|||
placeholder="请选择" size="small" clearable class="resi-cell-select"> |
|||
<el-option |
|||
v-for="item in n.option_source_value || options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<template v-else-if="n.item_type === 'radio'"> |
|||
<el-radio v-for="ns in n.option_source_value" :key="ns.value" v-model="form[n.column_name]" |
|||
:label="ns.value"> |
|||
{{ ns.label }} |
|||
</el-radio> |
|||
<!-- <el-radio v-model="form[n.column_name]" label="1">备选项</el-radio> --> |
|||
</template> |
|||
<template v-else-if="n.item_type === 'checkbox'"> |
|||
<el-checkbox-group v-model="form[n.column_name]"> |
|||
<el-checkbox label="复选框 A"></el-checkbox> |
|||
<el-checkbox label="复选框 B"></el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</div> |
|||
<!-- </div> --> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isCard, isMobile } from '@/utils/validate' |
|||
|
|||
export default { |
|||
name: 'resiForm', |
|||
props: { |
|||
labelWidth: { |
|||
type: String, |
|||
default: '100px' |
|||
}, |
|||
formId: { |
|||
type: String, |
|||
default: 'resiForm' |
|||
}, |
|||
formList: { |
|||
type: Array, |
|||
default: function () { |
|||
return [] |
|||
} |
|||
}, |
|||
formInfo: { |
|||
type: Object, |
|||
default: function () { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
let form = {} |
|||
// let rules = {} |
|||
let checkMObile = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入手机号')) |
|||
} else { |
|||
if (!isMobile(value)) { |
|||
callback(new Error('手机号格式不正确')) |
|||
} |
|||
callback() |
|||
} |
|||
} |
|||
let checkIdCard = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入身份证')) |
|||
} else { |
|||
if (!isCard(value)) { |
|||
callback(new Error('身份证号格式不正确')) |
|||
} |
|||
callback() |
|||
} |
|||
} |
|||
let initForm = (obj, arr) => { |
|||
console.log('formInfo', obj) |
|||
if (Object.keys(obj).length > 0) { |
|||
form = { ...obj } |
|||
return |
|||
} |
|||
arr.forEach(item => { |
|||
form[item.column_name] = '' |
|||
}) |
|||
} |
|||
let initRules = (arr) => { |
|||
let rules = {} |
|||
arr.forEach(item => { |
|||
if (item.require) { |
|||
if (item.valid_type === 'mobile') { |
|||
rules[item.column_name] = [ |
|||
{ validator: checkMObile, trigger: 'blur' } |
|||
] |
|||
} else if (item.valid_type === 'id_card') { |
|||
rules[item.column_name] = [ |
|||
{ validator: checkIdCard, trigger: 'blur' } |
|||
] |
|||
} else { |
|||
rules[item.column_name] = [ |
|||
{ required: true, message: `请输入${item.label}`, trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}) |
|||
return rules |
|||
} |
|||
initForm(this.formInfo, this.formList) |
|||
let rules = initRules(this.formList) |
|||
return { |
|||
openSearch: false, |
|||
options: [{ |
|||
value: '选项1', |
|||
label: '黄金糕' |
|||
}, { |
|||
value: '选项2', |
|||
label: '双皮奶' |
|||
}, { |
|||
value: '选项3', |
|||
label: '蚵仔煎' |
|||
}, { |
|||
value: '选项4', |
|||
label: '龙须面' |
|||
}, { |
|||
value: '选项5', |
|||
label: '北京烤鸭' |
|||
}], |
|||
form, |
|||
rules, |
|||
value: '', |
|||
checkList: ['选中且禁用', '复选框 A'] |
|||
} |
|||
}, |
|||
computed: { |
|||
sliceList () { |
|||
return function (data, count) { |
|||
if (data !== undefined) { |
|||
let index = 0 |
|||
let arrTemp = [] |
|||
for (let i = 0; i < data.length; i++) { |
|||
index = parseInt(i / count) |
|||
if (arrTemp.length <= index) { |
|||
arrTemp.push([]) |
|||
} |
|||
arrTemp[index].push(data[i]) |
|||
} |
|||
return arrTemp |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
created () { |
|||
// this.initForm() |
|||
console.log('formInfo---ggg', this.form) |
|||
}, |
|||
methods: { |
|||
initForm () { |
|||
console.log('formInfo', this.formInfo) |
|||
if (Object.keys(this.formInfo).length > 0) { |
|||
this.form = { ...this.formInfo } |
|||
return |
|||
} |
|||
this.formList.forEach(item => { |
|||
this.$set(this.form, item.column_name, '') |
|||
}) |
|||
}, |
|||
handleOpenSearch () { |
|||
this.openSearch = !this.openSearch |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.el-date-editor.el-input, .el-date-editor.el-input__inner { |
|||
width: 100% !important; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.resi-form .resi-row { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
// .resi-form .resi-cell { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// .resi-cell-label { |
|||
// width: 70px; |
|||
// box-sizing: border-box; |
|||
// margin-right: 15px; |
|||
// text-align: right; |
|||
// } |
|||
// .resi-cell-value-radio { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// min-height: 36px; |
|||
// } |
|||
// .resi-cell-value .resi-cell-input { |
|||
// width: 180px; |
|||
// } |
|||
.resi-cell-value .resi-cell-textarea { |
|||
width: 300px; |
|||
} |
|||
// .resi-cell-select { |
|||
// width: 180px; |
|||
// box-sizing: border-box; |
|||
// margin-right: 10px; |
|||
// &-middle { |
|||
// width: 130px; |
|||
// } |
|||
// &-small { |
|||
// width: 88px; |
|||
// } |
|||
// } |
|||
.resi-cell-select:last-child { |
|||
margin-right: 0; |
|||
} |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,633 @@ |
|||
<template> |
|||
<div class="resi-container"> |
|||
<el-card class="resi-card"> |
|||
<el-row class="resi-row-box" :class="openSearch && 'resi-row-more'"> |
|||
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row" :gutter="20"> |
|||
<el-col v-for="n in item" :key="n.id" :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">{{n.label}}</div> |
|||
<div class="resi-cell-value" :class="n.item_type === 'radio' && 'resi-cell-value-radio'"> |
|||
<el-input |
|||
v-if="n.item_type === 'input'" |
|||
v-model="form[n.column_name]" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
<el-date-picker |
|||
v-else-if="n.item_type === 'date'" |
|||
v-model="form[n.column_name]" |
|||
class="resi-cell-input" |
|||
type="date" |
|||
size="small" |
|||
clearable |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" placeholder="请选择" size="small" clearable class="resi-cell-select"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<template v-else-if="n.item_type === 'radio'"> |
|||
<el-radio v-model="form[n.column_name]" label="1">备选项</el-radio> |
|||
<el-radio v-model="form[n.column_name]" label="2">备选项</el-radio> |
|||
</template> |
|||
<template v-else-if="n.item_type === 'checkbox'"> |
|||
<el-checkbox-group v-model="form[n.column_name]"> |
|||
<el-checkbox label="复选框 A"></el-checkbox> |
|||
<el-checkbox label="复选框 B"></el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<!-- <el-col :span="12"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">小区名称</div> |
|||
<div class="resi-cell-value"> |
|||
<el-select v-model="value" placeholder="请选择" size="small" class="resi-cell-select"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="value" placeholder="请选择" size="small" class="resi-cell-select resi-cell-select-middle"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="value" placeholder="请选择" size="small" class="resi-cell-select resi-cell-select-middle"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">户籍查询</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> --> |
|||
</el-row> |
|||
<!-- <el-row class="resi-row" :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="resi-row" :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="resi-row" :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="resi-row" :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="resi-row" :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="resi-row" :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="resi-row" :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属网格</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input |
|||
class="resi-cell-input" |
|||
size="small" |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> --> |
|||
</el-row> |
|||
<el-row class="resi-search"> |
|||
<!-- <el-col :span="20"> |
|||
<el-button type="primary" size="mini">查询</el-button> |
|||
</el-col> --> |
|||
<el-col :span="24"> |
|||
<el-button type="primary" size="mini" @click="handleSearch">查询</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="resi-down" @click="handleOpenSearch"> |
|||
<img v-if="openSearch" src="../../assets/img/arrow-up.png" /> |
|||
<img v-else src="../../assets/img/arrow-down.png" /> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
formList: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
openSearch: false, |
|||
options: [{ |
|||
value: '选项1', |
|||
label: '黄金糕' |
|||
}, { |
|||
value: '选项2', |
|||
label: '双皮奶' |
|||
}, { |
|||
value: '选项3', |
|||
label: '蚵仔煎' |
|||
}, { |
|||
value: '选项4', |
|||
label: '龙须面' |
|||
}, { |
|||
value: '选项5', |
|||
label: '北京烤鸭' |
|||
}], |
|||
value: '', |
|||
form: {}, |
|||
checkList: ['选中且禁用', '复选框 A'] |
|||
} |
|||
}, |
|||
computed: { |
|||
sliceList () { |
|||
return function (data, count) { |
|||
if (data !== undefined) { |
|||
let index = 0 |
|||
let arrTemp = [] |
|||
for (let i = 0; i < data.length; i++) { |
|||
index = parseInt(i / count) |
|||
if (arrTemp.length <= index) { |
|||
arrTemp.push([]) |
|||
} |
|||
arrTemp[index].push(data[i]) |
|||
} |
|||
return arrTemp |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
created () { |
|||
this.initForm() |
|||
}, |
|||
methods: { |
|||
initForm () { |
|||
this.formList.forEach(item => { |
|||
this.$set(this.form, item.column_name, '') |
|||
}) |
|||
// console.log('formcccc---', this.form) |
|||
}, |
|||
handleSearch () { |
|||
// console.log('formmmmm---', this.form) |
|||
this.$emit('search', this.form) |
|||
}, |
|||
handleOpenSearch () { |
|||
this.openSearch = !this.openSearch |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.resi-container .resi-card { |
|||
position: relative; |
|||
overflow: visible; |
|||
} |
|||
.resi-down { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: -10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 46px; |
|||
height: 12px; |
|||
box-sizing: border-box; |
|||
margin-left: -23rpx; |
|||
cursor: pointer; |
|||
background: #FFFFFF; |
|||
border-radius: 0 0 10px 10px; |
|||
img { |
|||
display: block; |
|||
} |
|||
} |
|||
.resi-row-box { |
|||
height: 104px; |
|||
overflow: hidden; |
|||
transition: height .5s; |
|||
} |
|||
.resi-row-more { |
|||
height: max-content; |
|||
transition: height .5s; |
|||
} |
|||
.resi-row { |
|||
margin-bottom: 20px; |
|||
} |
|||
.resi-search { |
|||
.el-col { |
|||
text-align: right; |
|||
} |
|||
} |
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
.resi-cell-value-radio { |
|||
display: flex; |
|||
align-items: center; |
|||
min-height: 32px; |
|||
} |
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
.resi-cell-select { |
|||
width: 180px; |
|||
box-sizing: border-box; |
|||
margin-right: 10px; |
|||
&-middle { |
|||
width: 130px; |
|||
} |
|||
&-small { |
|||
width: 88px; |
|||
} |
|||
} |
|||
.resi-cell-select:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,759 @@ |
|||
<template> |
|||
<div> |
|||
<resi-search :form-list="searchList" @search="handleSearch" /> |
|||
<el-card class="resi-card-table"> |
|||
<div class="resi-row-btn"> |
|||
<el-button type="warning" size="small">导出</el-button> |
|||
<el-button type="success" size="small" @click="handleAdd">新增</el-button> |
|||
<el-button type="primary" size="small">下载人口模板</el-button> |
|||
<el-button type="danger" size="small">导入人口数据</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="date" |
|||
label="日期" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
label="地址"> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="currentPage" |
|||
:page-sizes="[100, 200, 300, 400]" |
|||
:page-size="100" |
|||
layout="sizes, prev, pager, next" |
|||
:total="1000"> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<el-dialog |
|||
title="提示" |
|||
:visible.sync="dialogVisible" |
|||
width="80%" |
|||
:close-on-click-modal="true" |
|||
:before-close="handleClose"> |
|||
<resi-form ref="baseForm" :form-list="formList" /> |
|||
<div class="resi-other"> |
|||
<div class="resi-other-title">其他</div> |
|||
<div class="tabs-other-info"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<el-tab-pane v-for="item in tabsList" :key="item.column_name" :label="item.label" :name="item.column_name"> |
|||
<resi-form :ref="item.column_name" :form-id="item.column_name" :form-list="tabsForm" /> |
|||
</el-tab-pane> |
|||
<!-- <el-tab-pane label="配置管理" name="second"> |
|||
<resi-form :form-id="'second'" :form-list="tabsForm" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="角色管理" name="third"> |
|||
<resi-form :form-id="'third'" :form-list="tabsForm" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> --> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
<div class="resi-btns"> |
|||
<el-button size="small">取消</el-button> |
|||
<el-button type="primary" size="small" @click="handleSUbmit">提交</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import resiSearch from '../../components/resiSearch.vue' |
|||
import resiForm from '../../components/resiForm.vue' |
|||
export default { |
|||
components: { |
|||
resiSearch, |
|||
resiForm |
|||
}, |
|||
data () { |
|||
return { |
|||
dialogVisible: false, |
|||
openSearch: false, |
|||
currentPage: 1, |
|||
activeName: 'edu', |
|||
tableData: [{ |
|||
date: '2016-05-02', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄' |
|||
}, { |
|||
date: '2016-05-04', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1517 弄' |
|||
}, { |
|||
date: '2016-05-01', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1519 弄' |
|||
}, { |
|||
date: '2016-05-03', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1516 弄' |
|||
}], |
|||
searchList: [{ |
|||
label: '所属网格', |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
require: true, |
|||
valid_type: null, |
|||
column_name: 'grid' |
|||
}, { |
|||
label: '小区名称', |
|||
require: true, |
|||
item_type: 'select', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'shequ' |
|||
}, { |
|||
label: '户籍查询', |
|||
require: true, |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'huji' |
|||
}, { |
|||
label: '本地户籍', |
|||
item_type: 'select', |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'huji1' |
|||
}, { |
|||
label: '姓名', |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
require: true, |
|||
column_name: 'username' |
|||
}, { |
|||
label: '手机号', |
|||
item_type: 'input', |
|||
valid_type: 'mobile', |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'userMobile' |
|||
}, { |
|||
label: '身份证', |
|||
item_type: 'input', |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: 'id_card', |
|||
column_name: 'idcard' |
|||
}, { |
|||
label: '出生日期', |
|||
item_type: 'date', |
|||
valid_type: null, |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'birthday' |
|||
}, { |
|||
label: '联系人', |
|||
valid_type: null, |
|||
item_type: 'checkbox', |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'contact' |
|||
}, { |
|||
label: '联系人手机', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'contactMobile' |
|||
}], |
|||
value: '', |
|||
formList: [{ |
|||
label: '所属网格', |
|||
item_type: 'select', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
require: true, |
|||
valid_type: null, |
|||
column_name: 'grid' |
|||
}, { |
|||
label: '所属楼宇', |
|||
require: true, |
|||
item_type: 'select', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'shequ' |
|||
}, { |
|||
label: '所属家庭', |
|||
require: true, |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'house' |
|||
}, { |
|||
label: '本地户籍', |
|||
item_type: 'select', |
|||
require: true, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'huji' |
|||
}, { |
|||
label: '姓名', |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
require: true, |
|||
column_name: 'username' |
|||
}, { |
|||
label: '性别', |
|||
item_type: 'select', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '男', |
|||
value: 1 |
|||
}, { |
|||
label: '女', |
|||
value: 2 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'sex' |
|||
}, { |
|||
label: '手机号', |
|||
item_type: 'input', |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: 'mobile', |
|||
column_name: 'userMobile' |
|||
}, { |
|||
label: '身份证', |
|||
item_type: 'input', |
|||
valid_type: 'id_card', |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'idcard' |
|||
}, { |
|||
label: '出生日期', |
|||
valid_type: null, |
|||
item_type: 'date', |
|||
require: false, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'birthday' |
|||
}, { |
|||
label: '联系人', |
|||
item_type: 'input', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'contactUser' |
|||
}, { |
|||
label: '联系人手机', |
|||
item_type: 'input', |
|||
valid_type: null, |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'contactMobile' |
|||
}, { |
|||
label: '九小场所', |
|||
item_type: 'select', |
|||
valid_type: null, |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'jiuxiao' |
|||
}, { |
|||
label: '备注', |
|||
item_type: 'textarea', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
column_name: 'remarks' |
|||
}, { |
|||
label: '党员：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'party' |
|||
}, { |
|||
label: '低保：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'dibao' |
|||
}, { |
|||
label: '保障房：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'baozf' |
|||
}, { |
|||
label: '失业：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'shiye' |
|||
}, { |
|||
label: '育龄妇女：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'yulingfunv' |
|||
}, { |
|||
label: '退役军人：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'tuiyijunren' |
|||
}, { |
|||
label: '统战人员：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'tzrenyuan' |
|||
}, { |
|||
label: '信访人员：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'xfreny' |
|||
}, { |
|||
label: '志愿者：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'zhiyuanzhe' |
|||
}, { |
|||
label: '高龄：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'gaoling' |
|||
}, { |
|||
label: '空巢：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'kongc' |
|||
}, { |
|||
label: '失独：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'shidu' |
|||
}, { |
|||
label: '失能：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'shineng' |
|||
}, { |
|||
label: '失智：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'shizhi' |
|||
}, { |
|||
label: '残疾：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'canji' |
|||
}, { |
|||
label: '大病：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'dabing' |
|||
}, { |
|||
label: '慢病：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'manbing' |
|||
}, { |
|||
label: '特殊：', |
|||
item_type: 'radio', |
|||
valid_type: null, |
|||
require: false, |
|||
option_source_type: '', |
|||
option_source_value: [{ |
|||
label: '是', |
|||
value: 1 |
|||
}, { |
|||
label: '否', |
|||
value: 0 |
|||
}], |
|||
sort: '1', |
|||
column_name: 'teshu' |
|||
}], |
|||
tabsForm: [{ |
|||
label: '所属网格', |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
require: true, |
|||
valid_type: null, |
|||
column_name: 'grid' |
|||
}, { |
|||
label: '小区名称', |
|||
require: true, |
|||
item_type: 'select', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'shequ' |
|||
}, { |
|||
label: '户籍查询', |
|||
require: true, |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'huji' |
|||
}, { |
|||
label: '本地户籍', |
|||
item_type: 'select', |
|||
require: true, |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
column_name: 'huji1' |
|||
}, { |
|||
label: '姓名', |
|||
item_type: 'input', |
|||
option_source_type: '', |
|||
sort: '1', |
|||
valid_type: null, |
|||
require: true, |
|||
column_name: 'username' |
|||
}], |
|||
tabsList: [{ |
|||
label: '教育', |
|||
column_name: 'edu', |
|||
children: [] |
|||
}, { |
|||
label: '兴趣爱好', |
|||
column_name: 'xingqu', |
|||
children: [] |
|||
}, { |
|||
label: '宗教信仰', |
|||
column_name: 'zongjiao', |
|||
children: [] |
|||
}, { |
|||
label: '健康信息', |
|||
column_name: 'jiank', |
|||
children: [] |
|||
}, { |
|||
label: '工作信息', |
|||
column_name: 'job', |
|||
children: [] |
|||
}, { |
|||
label: '经济状况', |
|||
column_name: 'jingji', |
|||
children: [] |
|||
}, { |
|||
label: '家庭信息', |
|||
column_name: 'family', |
|||
children: [] |
|||
}, { |
|||
label: '居住需求', |
|||
column_name: 'juzhu', |
|||
children: [] |
|||
}, { |
|||
label: '教育发发发', |
|||
column_name: 'edu1', |
|||
children: [] |
|||
}, { |
|||
label: '教育滚滚滚', |
|||
column_name: 'edu2', |
|||
children: [] |
|||
}, { |
|||
label: '教育哈哈哈', |
|||
column_name: 'edu3', |
|||
children: [] |
|||
}, { |
|||
label: '教育急急急', |
|||
column_name: 'edu4', |
|||
children: [] |
|||
}, { |
|||
label: '教育快快快', |
|||
column_name: 'edu5', |
|||
children: [] |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSizeChange (val) { |
|||
console.log(`每页 ${val} 条`) |
|||
}, |
|||
handleCurrentChange (val) { |
|||
console.log(`当前页: ${val}`) |
|||
}, |
|||
handleClose () { |
|||
this.dialogVisible = false |
|||
}, |
|||
handleSearch (val) { |
|||
console.log('searchhh--', val) |
|||
}, |
|||
handleClick (tab, event) { |
|||
console.log(tab, event) |
|||
}, |
|||
handleAdd () { |
|||
this.dialogVisible = true |
|||
}, |
|||
handleSUbmit () { |
|||
console.log('baseform', this.$refs) |
|||
|
|||
this.tabsList.forEach(item => { |
|||
console.log('otherFOrm', this.$refs[item.column_name][0].form) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.tabs-other-info { |
|||
.el-tabs__item { |
|||
// width: 50px; |
|||
height: 20px; |
|||
box-sizing: border-box; |
|||
margin-right: 7px; |
|||
padding: 0 10px !important; |
|||
font-size: 8px; |
|||
font-weight: 500; |
|||
color: #666666; |
|||
line-height: 20px; |
|||
background: #EBECF1; |
|||
border-radius: 2px; |
|||
} |
|||
.el-tabs__nav-wrap::after, .el-tabs__active-bar { |
|||
display: none; |
|||
} |
|||
.el-tabs__nav-next, .el-tabs__nav-prev { |
|||
line-height: 20px; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.resi-card-table { |
|||
margin-top: 20px; |
|||
} |
|||
.resi-row-btn { |
|||
margin-bottom: 13px; |
|||
} |
|||
.resi-other { |
|||
width: 100%; |
|||
display: flex; |
|||
.resi-other-title { |
|||
width: 100px; |
|||
box-sizing: border-box; |
|||
margin-bottom: 10px; |
|||
// padding: 6px 12px 0 0; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
.tabs-other-info { |
|||
// padding-left: 60px; |
|||
} |
|||
} |
|||
|
|||
.resi-btns { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue