From fbbba80e23fe81e698fd3d9c42d8cf8722c0a00a Mon Sep 17 00:00:00 2001 From: qsh <> Date: Tue, 21 Mar 2023 23:51:03 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DMCheckbox/index.vue | 94 ++++++++++++++++ src/components/DMRadio/index.vue | 102 ++++++++++++++++++ .../administration/components/SearchForm.vue | 48 +++++++++ src/views/finance/administration/index.vue | 15 ++- vue.config.js | 12 ++- 5 files changed, 263 insertions(+), 8 deletions(-) create mode 100644 src/components/DMCheckbox/index.vue create mode 100644 src/components/DMRadio/index.vue diff --git a/src/components/DMCheckbox/index.vue b/src/components/DMCheckbox/index.vue new file mode 100644 index 0000000..e4dff52 --- /dev/null +++ b/src/components/DMCheckbox/index.vue @@ -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> diff --git a/src/components/DMRadio/index.vue b/src/components/DMRadio/index.vue new file mode 100644 index 0000000..9b78282 --- /dev/null +++ b/src/components/DMRadio/index.vue @@ -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> diff --git a/src/views/finance/administration/components/SearchForm.vue b/src/views/finance/administration/components/SearchForm.vue index e69de29..129a816 100644 --- a/src/views/finance/administration/components/SearchForm.vue +++ b/src/views/finance/administration/components/SearchForm.vue @@ -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> diff --git a/src/views/finance/administration/index.vue b/src/views/finance/administration/index.vue index f63f3de..3f82bb3 100644 --- a/src/views/finance/administration/index.vue +++ b/src/views/finance/administration/index.vue @@ -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> diff --git a/vue.config.js b/vue.config.js index 32fcc1a..37dd7fa 100644 --- a/vue.config.js +++ b/vue.config.js @@ -35,7 +35,7 @@ module.exports = { proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { - target: `http://192.168.2.39:8086`, + target: `http://192.168.1.114:8086`, // target: `http://vue.ruoyi.vip/prod-api/`, changeOrigin: true, pathRewrite: { @@ -105,10 +105,12 @@ module.exports = { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') - .use('script-ext-html-webpack-plugin', [{ - // `runtime` must same as runtimeChunk name. default is `runtime` - inline: /runtime\..*\.js$/ - }]) + .use('script-ext-html-webpack-plugin', [ + { + // `runtime` must same as runtimeChunk name. default is `runtime` + inline: /runtime\..*\.js$/ + } + ]) .end(); config.optimization.splitChunks({ chunks: 'all',