update：字典配置

src/assets/css/index.css

@@ -274,8 +274,8 @@ div {
 }
 
 .el-dialog__body {
-  font-size: 18px;
-  color: #242c43;
+  font-size: 16px;
+  color: #404a62;
   text-align: center;
   padding: 0 16px;
 }
@@ -285,12 +285,6 @@ div {
 .dialog_box .el-dialog__footer {
   padding: 16px;
 }
-.result_box .el-dialog__body {
-  padding: 0px;
-}
-.sold_up_dialog .el-dialog__body {
-  padding: 24px 24px 4px;
-}
 /* 设置tab切换的样式 */
 .el-tabs__item.is-disabled {
   color: #8890a7 !important;

src/bg-ui/bg-filter-group.vue

@@ -5,7 +5,7 @@
         <slot name="left_action"></slot>
       </div>
       <div class="right-filter">
-        <el-input :placeholder="placeholder" v-model="modelValue">
+        <el-input :placeholder="placeholder" v-model="value">
           <template #append>
             <div class="append-btn" @click="search">
               <bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
@@ -32,7 +32,7 @@ import { computed, onMounted, reactive, toRefs, watch,ref } from "vue"
   
 const state = reactive({
   showFlag: false,
-  modelValue: ""
+  value: ""
 })
 
 const props = defineProps({
@@ -47,20 +47,20 @@ const props = defineProps({
 })
 
 watch(props,(n,o) => {
-  state.modelValue = n.modelValue
+  state.value = n.modelValue
 })
-watch(() => state.modelValue,(n,o) => {
+watch(() => state.value,(n,o) => {
   emit('update:modelValue',n)
 })
 const emit = defineEmits(['search','update:modelValue'])
 const search = () => {
-  emit('search',state.modelValue)
+  emit('search',state.value)
 }
 const moreFilter = () => {
   state.showFlag = !state.showFlag
 }
 onMounted(() => {
-  state.modelValue = props.modelValue
+  state.value = props.modelValue
 })
-const { modelValue,showFlag } = toRefs(state)
+const { value,showFlag } = toRefs(state)
 </script>
\ No newline at end of file

src/bg-ui/bg-switch-ele.vue

+<template>
+  <el-switch
+    class="bg-switch-ele"
+    v-model="value"
+    :active-value="1"
+    :inactive-value="0"
+    inline-prompt
+    :active-text="activeText"
+    :inactive-text="inactiveText"
+    @change="changeState"
+  />
+</template>
+
+<script setup>
+import { onMounted, reactive, toRefs, watch } from "vue"
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  activeText: {
+    type: String,
+    default: "是",
+  },
+  inactiveText: {
+    type: String,
+    default: "否"
+  },
+  rowId: {
+    type: Number,
+    default: null
+  }
+})
+const state = reactive({
+  value: 1
+})
+const emit = defineEmits(['changeState'])
+const changeState = () => {
+  if (props.rowId) {
+    let params = {
+      state: state.value,
+      id: props.rowId
+    }
+    emit('changeState',params)
+  }else {
+    emit('changeState',state.value)
+  }
+}
+onMounted(()=> {
+  state.value = props.modelValue
+})
+const { value } = toRefs(state)
+</script>

src/bg-ui/bg-switch.vue

@@ -58,24 +58,22 @@ export default {
     },
     now_style() {
       return {
-        color: this.colors[this.now_index],
         borderColor: this.colors[this.now_index],
+        backgroundColor: this.colors[this.now_index],
       };
     },
     now_label_style() {
       return this.now_index == 0
         ? { left: this.circle_height + this.gap + 5 + "px" }
-        : { left: "10px" };
+        : { left: "6px" };
     },
     now_circle_style() {
       return this.now_index == 0
         ? {
             left: this.gap + "px",
-            backgroundColor: this.colors[this.now_index],
           }
         : {
             right: this.gap + "px",
-            backgroundColor: this.colors[this.now_index],
           };
     },
   },

src/bg-ui/bg-table-btns-more.vue

+<template>
+  <div class="bg-table-btns-more" :style="style" @click.stop>
+    <bg-table-btn
+      v-for="(item, index) in operations"
+      :key="index"
+      :disabled="isDisabled(item)"
+      @click="clickAction(item)"
+    >
+      {{ getName(item) }}
+    </bg-table-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BgTableBtnsMore",
+  props: {
+    operations: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      style: {},
+    };
+  },
+  methods: {
+    isDisabled({ disabled }) {
+      if (typeof disabled === "function") {
+        return disabled();
+      } else if (typeof disabled === "boolean") {
+        return disabled;
+      } else if (typeof disabled === "undefined") {
+        return false;
+      } else {
+        return !!disabled;
+      }
+    },
+    clickAction({ callback }) {
+      typeof callback === "function" && callback();
+    },
+    getName({ name }) {
+      if (typeof name === "function") {
+        return name();
+      } else {
+        return name;
+      }
+    },
+    upStyle() {
+      let { top, right } = this.$parent.$el.getBoundingClientRect();
+      let { width } = window.document.body.getBoundingClientRect();
+
+      this.style = {
+        position: "fixed",
+        top: `${top + 16}px`,
+        right: `${width - right - 16}px`,
+      };
+    },
+  },
+  mounted() {
+    document.body.append(this.$el);
+    this.upStyle();
+  },
+  beforeDestroy() {
+    this.$el && this.$el.remove();
+  },
+};
+</script>

src/bg-ui/bg-table-btns.vue

+<template>
+  <div class="bg-table-btns">
+    <bg-table-btn
+      v-for="(item, index) in curOperations"
+      :key="index"
+      :disabled="isDisabled(item)"
+      @click="clickAction(item)"
+    >
+      {{ getName(item) }}
+    </bg-table-btn>
+    <a
+      class="bg-table-btn"
+      @mouseenter="showMOreBtns"
+      @mouseleave="hideMoreBtns"
+      v-if="otherOperations.length > 0"
+    >
+      <!-- <i class="el-icon-more" /> -->
+      <bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
+      <bg-table-btns-more
+        :operations="otherOperations"
+        @mouseenter="showMOreBtns"
+        @mouseleave="hideMoreBtns"
+        v-if="showMore"
+      />
+    </a>
+  </div>
+</template>
+
+<script>
+import BgTableBtnsMore from "./bg-table-btns-more.vue";
+
+export default {
+  name: "BgTableBtns",
+  components: { BgTableBtnsMore },
+  props: {
+    operations: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showMore: false,
+      timer: null,
+    };
+  },
+  computed: {
+    curOperations() {
+      return this.operations.slice(0, this.operations.length > 3 ? 2 : 3);
+    },
+    otherOperations() {
+      return this.operations.slice(2, this.operations.length);
+    },
+  },
+  methods: {
+    isDisabled({ disabled }) {
+      if (typeof disabled === "function") {
+        return disabled();
+      } else if (typeof disabled === "boolean") {
+        return disabled;
+      } else if (typeof disabled === "undefined") {
+        return false;
+      } else {
+        return !!disabled;
+      }
+    },
+    clickAction({ callback }) {
+      typeof callback === "function" && callback();
+    },
+    getName({ name }) {
+      if (typeof name === "function") {
+        return name();
+      } else {
+        return name;
+      }
+    },
+    showMOreBtns() {
+      if (this.timer) clearTimeout(this.timer);
+
+      this.showMore = true;
+    },
+    hideMoreBtns() {
+      if (this.timer) clearTimeout(this.timer);
+
+      this.timer = setTimeout(() => {
+        this.showMore = false;
+      }, 50);
+    },
+  },
+};
+</script>

src/bg-ui/index.js

@@ -33,6 +33,8 @@
  import BgPagination from './bg-pagination.vue'
  import BgInnerTabs from './bg-inner-tabs.vue'
  import BgFilterGroup from './bg-filter-group.vue'
+ import BgSwitchEle from './bg-switch-ele.vue'
+ import BgTableBtns from './bg-table-btns.vue'
  
 const components = {
   BgIcon,//字体图标
@@ -67,6 +69,8 @@ const components = {
   BgPagination,// 分页组件
   BgInnerTabs,//内部tab
   BgFilterGroup,//高级搜索
+  BgSwitchEle,
+  BgTableBtns,
 };
 
 const install = (Vue) => {

src/bg-ui/index.scss

@@ -659,11 +659,11 @@ a {
   }
   th,
   td {
-    padding: 12px 0!important;
+    padding: 11px 0!important;
     > .cell {
       padding: 0 10px !important;
       color: #404a62;
-      line-height: 18px;
+      line-height: 14px;
     }
   }
 
@@ -2036,29 +2036,31 @@ a {
 .bg-switch {
   display: inline-block;
   vertical-align: middle;
-  width: 64px;
-  height: 28px;
-  border-radius: 14px;
-  border: solid 2px #275a9d;
+  width: 44px;
+  height: 20px;
+  border-radius: 10px;
+  border: solid 2px #2b4695;
   position: relative;
-  color: #275a9d;
+  color: #fff;
+  background-color: #2b4695;
   cursor: pointer;
   user-select: none;
 
   > .label {
     font-size: 12px;
-    font-weight: 600;
-    line-height: 24px;
+    font-weight: 400;
+    line-height: 15px;
     position: absolute;
+    color: #fff;
   }
 
   > .circle {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     position: absolute;
-    top: 3px;
-    background-color: #275a9d;
+    // top: 2px;
+    background-color: #fff;
   }
 
   &.disabled {
@@ -2471,4 +2473,64 @@ a {
     border: 1px solid #e6e9ef;
     padding: 24px 16px 8px;
   }
+}
+// 表格操作按钮组
+.bg-table-btns {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.bg-table-btns-more {
+  position: absolute;
+  top: 28px;
+  right: -16px;
+  z-index: 19;
+  padding: 4px 0;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
+  border-radius: 4px;
+  border: solid 1px #e6e9ef;
+  width: 88px;
+
+  .bg-table-btn {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    display: block;
+    padding: 0 16px;
+    margin: 0;
+    color: #202531;
+    line-height: 34px;
+    padding-left: 16px;
+    &:hover {
+      background-color: #f2f3f7;
+      color: #202531;
+    }
+    
+    &.disabled {
+      color: #a9b1c7;
+    }
+    &::before {
+      display: none;
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+}
+
+.bg-switch-ele {
+  width: 44px;
+  height: 20px;
+  .el-switch__core {
+    width: 100%;
+  }
 }
\ No newline at end of file