forked from qiushanhe/dm-manage-web
组件
This commit is contained in:
qsh
94
src/components/DMCheckbox/index.vue
Normal file
94
src/components/DMCheckbox/index.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<el-checkbox-group v-model="modelValue">
|
||||
<el-checkbox v-if="allText" class="no-cicrle" label="全部" @change="handleAll">全部</el-checkbox>
|
||||
<el-checkbox v-for="(item, index) in list" :key="index" class="no-cicrle" :label="item[name]" @change="handleChange">
|
||||
{{ item[label] }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
allText: {
|
||||
// 是否展示 "全部"，有字则展示
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showBottomLine: {
|
||||
// 是否展示底部下划线，类似tab标签页
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
label: {
|
||||
// key
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
name: {
|
||||
// value
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modelValue: undefined
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (this.allText) {
|
||||
this.modelValue = val.length > 0 ? val : ['全部'];
|
||||
} else {
|
||||
this.modelValue = val.filter((item) => item !== '全部');
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAll() {
|
||||
this.modelValue = ['全部'];
|
||||
this.$emit('input', []);
|
||||
},
|
||||
handleChange() {
|
||||
if (this.modelValue.some((item) => item === '全部')) {
|
||||
this.modelValue.shift();
|
||||
} else if (this.modelValue.length == 0) {
|
||||
this.modelValue = ['全部'];
|
||||
}
|
||||
this.$emit('input', this.modelValue.every((item) => item === '全部') ? [] : this.modelValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-cicrle {
|
||||
::v-deep .el-checkbox__input,
|
||||
.el-checkbox__input {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-checkbox__label {
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: rgba($color: #000000, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.no-cicrle.is-checked ::v-deep .el-checkbox__label {
|
||||
color: #0075ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
102
src/components/DMRadio/index.vue
Normal file
102
src/components/DMRadio/index.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div :class="{ 'border-bottom': showBottomLine }">
|
||||
<el-radio-group v-model="modelValue" @change="handleChange">
|
||||
<el-radio v-if="allText" class="no-cicrle" :style="{'margin-bottom': gutter}" label="全部">全部</el-radio>
|
||||
<el-radio v-for="(item,index) in list" :key="index" class="no-cicrle" :style="{'margin-bottom': gutter}" :label="item[name]">
|
||||
{{ item[label] }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: [String, Number],
|
||||
allText: {
|
||||
// 是否展示 "全部"，有字则展示
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showBottomLine: {
|
||||
// 是否展示底部下划线，类似tab标签页
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
label: {
|
||||
// key
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
name: {
|
||||
// value
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
gutter: {
|
||||
// 上下间隔
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modelValue: undefined
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.modelValue = val || '全部';
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
this.$emit('input', this.modelValue === '全部' ? undefined : this.modelValue);
|
||||
this.$emit('change', this.modelValue === '全部' ? undefined : this.modelValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid rgba($color: #000000, $alpha: 0.08);
|
||||
::v-deep .is-checked .el-radio__label {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -10.5px;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #0075ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-cicrle {
|
||||
::v-deep .el-radio__input,
|
||||
.el-checkbox__input {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-radio__label {
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: rgba($color: #000000, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.no-cicrle.is-checked ::v-deep .el-radio__label {
|
||||
color: #0075ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="searchForm" label-width="100px">
|
||||
<el-form-item label-width="0">
|
||||
<DMRadio v-model="searchForm.quickSearch" show-bottom-line :list="quickList" />
|
||||
</el-form-item>
|
||||
<el-form-item label="意向状态：">
|
||||
<DMRadio v-model="searchForm.status" :list="statusList" all-text="全部" />
|
||||
</el-form-item>
|
||||
<el-form-item label="意向状态2：">
|
||||
<DMCheckbox v-model="searchForm.status2" :list="statusList" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" @click="$emit('search')">查询</el-button>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DMRadio from '@/components/DMRadio';
|
||||
import DMCheckbox from '@/components/DMCheckbox';
|
||||
export default {
|
||||
components: {
|
||||
DMRadio,
|
||||
DMCheckbox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchForm: {
|
||||
quickSearch: 1,
|
||||
status: undefined,
|
||||
status2: []
|
||||
},
|
||||
quickList: [
|
||||
{ value: 1, label: '我创建的' },
|
||||
{ value: 2, label: '我的有效' }
|
||||
],
|
||||
statusList: [
|
||||
{ value: 1, label: 'A高意向' },
|
||||
{ value: 2, label: 'B中意向' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="always" :body-style="{ padding: '20px' }" />
|
||||
<SearchForm />
|
||||
<div class="p20">
|
||||
<el-card shadow="always" :body-style="{ padding: '20px' }">
|
||||
<SearchForm ref="SearchForm" @search="getTableList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -18,6 +19,14 @@ export default {
|
||||
pageSize: 20
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getTableList() {
|
||||
const tempForm = this.$refs.SearchForm.searchForm;
|
||||
const params = { ...this.searchForm, ...tempForm };
|
||||
console.log(params);
|
||||
// api.list(params)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user