Merge pull request '组件' (#4) from dev-qsh into master

Reviewed-on: http://114.55.169.15:3000/qiushanhe/dm-manage-web/pulls/4

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>

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>

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>

src/views/finance/administration/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="p20">
-    <el-card shadow="always" :body-style="{ padding: '20px' }" />
+    <el-card shadow="always" :body-style="{ padding: '20px' }">
-    <SearchForm />
+      <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>

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', [{
+        .use('script-ext-html-webpack-plugin', [
+          {
             // `runtime` must same as runtimeChunk name. default is `runtime`
             inline: /runtime\..*\.js$/
-        }])
+          }
+        ])
         .end();
       config.optimization.splitChunks({
         chunks: 'all',