gyyg-components 0.3.18 → 0.3.20

package/src/components/MecSelectAndButton/MecSelectAndButton.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="select-button-box">
+    <el-select
+      v-model="selected"
+      @clear="clear"
+      @change="handleChange"
+      :placeholder="placeholder"
+      :multiple="multiple || false"
+      :clearable="clearable"
+      :disabled="disabled"
+      :size="size"
+      v-bind="$attrs"
+      :filterable="filterable"
+      :value="selected"
+      style="width: 100%"
+      @visible-change="visibleChange"
+    >
+      <el-option
+        v-for="item in option"
+        :key="item[props.value]"
+        :label="item[props.label]"
+        :value="item[props.value]"
+        :disabled="item.disabled"
+      ></el-option>
+    </el-select>
+    <el-button :icon="buttonIcon" :type="buttonType" @click="btnClick">{{
+      buttonText
+    }}</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MecSelectAndButton",
+  props: {
+    value: {
+      default: null,
+      required: true,
+    },
+    options: {
+      required: true,
+    },
+    multiple: {
+      default: false,
+    },
+    props: {
+      default() {
+        return {
+          label: "name",
+          value: "id",
+        };
+      },
+    },
+    placeholder: {
+      type: String,
+      default: "请选择",
+    },
+    clearable: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+      defalut: false,
+    },
+    size: String,
+    filterable: {
+      type: Boolean,
+      defalut: false,
+    },
+    buttonIcon: {
+      type: String,
+      default: "el-icon-plus",
+    },
+    buttonText: {
+      type: String,
+      default: "新增",
+    },
+    buttonType: {
+      type: String,
+      default: "",
+    },
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selected: "",
+      option: [],
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.selected = val;
+      },
+      immediate: true,
+    },
+    options: {
+      handler: function () {
+        if (!Array.isArray(this.options) && this.options) {
+          if (this.options instanceof Promise) {
+            this.options.then((val) => {
+              this.option = val.data || val;
+            });
+          }
+          if (typeof this.options == "function") {
+            this.options().then((val) => {
+              this.option = val.data || val;
+            });
+          }
+        } else {
+          this.option = this.options;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    handleChange(val) {
+      this.selected = val;
+      let info = this.option.filter((item) => item[this.props.value] == val);
+      this.$emit("input", this.selected);
+      this.$emit("update:value", val);
+      this.$emit("change", val, info.length > 0 ? info[0] : {});
+    },
+    clear() {
+      this.selected = "";
+      this.$emit("clear");
+    },
+    visibleChange(val) {
+      if (val && this.isVisible) {
+        if (!Array.isArray(this.options) && this.options) {
+          if (this.options instanceof Promise) {
+            this.options.then((val) => {
+              this.option = val.data || val;
+            });
+          }
+          if (typeof this.options == "function") {
+            this.options().then((val) => {
+              this.option = val.data || val;
+            });
+          }
+        } else {
+          this.option = this.options;
+        }
+      }
+    },
+    btnClick(btn) {
+      this.$emit("btnClick", btn);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.select-button-box {
+  display: flex;
+  align-items: center;
+}
+/deep/ .el-button {
+  height: 40px;
+  margin-left: 10px;
+}
+</style>

package/src/components/MecTable/MecTable.vue

@@ -47,7 +47,7 @@
                     :width="col.width"
                     :sortable="col.sortable"
                     :show-overflow-tooltip="col.showOverflowTooltip"
-                    :key="index"
+                    :key="col.id"
                     :fixed="col.fixed"
                     :prop="col.bind"
                 >
@@ -205,7 +205,7 @@ export default {
             required: false,
             default: () => {
                 return {
-                    backgroundColor: "#EFF3F8",
+                    backgroundColor: "#efefef",
                     fontWeight: 'normal',
                     color: '#303133',
                 }
@@ -276,6 +276,7 @@ export default {
     data() {
         return {
             multipleSelection: [],
+            column: []
         }
     },
     methods: {
@@ -329,8 +330,8 @@ export default {
     watch: {
         columns: {
             handler: function (val) {
-
-                this.column = val;
+                console.log(val);   
+                this.column = [...val];
             },
             immediate: true,
             deep: true,
@@ -343,7 +344,9 @@ export default {
     background-color: #fff;
     height: 100%;
 }
-
+/deep/ .el-table {
+    margin-bottom: 10px;
+}
 .pagination-layout {
     text-align: right;
     padding: 0px 10px 5px 0;
@@ -385,4 +388,5 @@ export default {
     font-size: 15px;
     color: #F56C6C;
 }
+
 </style>