store+统计分析+用户管理

web/src/components/OperateCom.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="operate">
+
+    <template v-if="operateList.length < 4">
+      <a-button
+        v-for="item in operateList"
+        :key="item.type"
+        type="primary"
+        style="margin-right: 5px"
+        :class="['operateCol', item.type]"
+        :disabled="item.disabled"
+        @click="munuClick(item.type)"
+        >{{ item.label }}
+      </a-button>
+    </template>
+   
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OperateCom',
+  components: {  },
+  props: {
+    operateList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    record: {
+      type: Object,
+      default:()=>{}
+    },
+    flag: {
+      type: String,
+      default:''
+    }
+  },
+
+  data() {
+    return {}
+  },
+  watch: {
+    operateList: {
+      handler(n, o) {},
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {},
+  methods: {
+    munuClick(type) {
+      this.$emit('operateForm', type, { ...this.record })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.moreIcon{
+  color:#fff !important
+}
+:deep(.ant-btn) {
+  padding: 0px 7px !important;
+  height: 24px !important;
+  font-size: 13px !important;
+  letter-spacing: -1px;
+  border-radius: 4px;
+  & > span + .anticon {
+    margin-inline-start: 4px;
+  }
+}
+:deep(.ant-btn-primary) {
+  box-shadow: none !important;
+  background: var(--theme-btn3);
+}
+:deep(.ant-btn,.ant-btn-primary){
+  &:hover{
+    opacity: 0.9;
+  }
+  &:disabled{
+    color: rgba(255,255,255,0.5);
+  }
+  }
+.operate{
+  display: flex;
+  justify-content: center;
+}
+.operateCol {
+  background: var(--theme-btn3);
+
+  &.more {
+    background: var(--theme-btn1);
+  }
+
+  &.del {
+    background: var(--theme-btn2);
+  }
+
+}
+.ant-dropdown .ant-dropdown-menu{
+  background-color:var(--theme-opert-bg)!important;
+}
+
+</style>