gyyg-components 0.4.7 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -32,6 +32,7 @@
             :type="btn.type"
             :icon="!btn.rightIcon ? btn.icon : ''"
             :loading="btn.loading"
+            :class="btn.class"
             @click="btnClick(btn)"
             >{{ btn.text }}
             <i v-if="btn.rightIcon" :class="btn.icon + ' el-icon--right'"></i>

package/src/components/MecInputDropdown/MecInputDropdown.js

@@ -0,0 +1,5 @@
+import MecInputDropdown from "./MecInputDropdown.vue";
+
+MecInputDropdown.install = Vue => Vue.component(MecInputDropdown.name, MecInputDropdown);
+
+export default MecInputDropdown;

package/src/components/MecInputDropdown/MecInputDropdown.vue

@@ -0,0 +1,280 @@
+<template>
+  <el-input
+    v-model="inputValue"
+    :placeholder="placeholder"
+    :type="inputTypeValue"
+    :disabled="disabled"
+    :readonly="readonly"
+    :size="size"
+    :maxlength="maxlength"
+    :show-word-limit="showWordLimit"
+    :clearable="clearable"
+    :prefix-icon="prefixIcon"
+    :suffix-icon="suffixIcon"
+    :rows="rows"
+    :autosize="autosize"
+    v-bind="$attrs"
+    v-feeInput="isFeeInput"
+    @input="handleInput"
+    @clear="clear"
+    @keyup.enter.native="handleEnter"
+    @blur="handleBlur"
+  >
+    <el-dropdown
+      slot="append"
+      trigger="click"
+      :disabled="disabled || optionList.length === 0"
+      @command="handleDropdownCommand"
+    >
+      <span
+        class="mec-input-dropdown__text"
+        :class="{ 'is-disabled': disabled }"
+      >
+        {{ selectedLabel }}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="item in optionList"
+          :key="getItemKey(item)"
+          :command="item[props.value]"
+          :disabled="item.disabled"
+        >
+          {{ item[props.label] }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-input>
+</template>
+
+<script>
+import feeInput from "@/directive/mec-feeInput/index";
+
+export default {
+  name: "MecInputDropdown",
+  directives: {
+    feeInput,
+  },
+  props: {
+    value: {
+      default: "",
+    },
+    dropdownValue: {
+      default: null,
+    },
+    options: {
+      required: true,
+    },
+    props: {
+      type: Object,
+      default() {
+        return {
+          label: "name",
+          value: "id",
+        };
+      },
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    dropdownPlaceholder: {
+      type: String,
+      default: "请选择",
+    },
+    inputType: {
+      type: String,
+      default: "text",
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "medium",
+    },
+    maxlength: {
+      type: [Number, String],
+      default: -1,
+    },
+    showWordLimit: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    prefixIcon: {
+      type: String,
+      default: "",
+    },
+    suffixIcon: {
+      type: String,
+      default: "",
+    },
+    rows: {
+      default: 2,
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: () => {
+        return { minRows: 2 };
+      },
+    },
+    isFeeInput: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      inputValue: "",
+      selectedDropdown: null,
+      optionList: [],
+    };
+  },
+  computed: {
+    inputTypeValue() {
+      return this.inputType === "textarea" ? "textarea" : this.type;
+    },
+    optionMap() {
+      const map = new Map();
+      this.optionList.forEach((item) => {
+        map.set(item[this.props.value], item);
+      });
+      return map;
+    },
+    selectedInfo() {
+      return this.optionMap.get(this.selectedDropdown) || {};
+    },
+    selectedLabel() {
+      return this.selectedInfo[this.props.label] || this.dropdownPlaceholder;
+    },
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.inputValue = newValue;
+      },
+      immediate: true,
+    },
+    dropdownValue: {
+      handler(newValue) {
+        this.selectedDropdown = newValue;
+        this.selectFirstIfNeeded();
+      },
+      immediate: true,
+    },
+    options: {
+      handler(newOptions) {
+        this.processOptions(newOptions);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    async processOptions(options) {
+      try {
+        let result = options;
+
+        if (options instanceof Promise) {
+          result = await options;
+        } else if (typeof options === "function") {
+          result = await options();
+        }
+
+        this.optionList = Array.isArray(result) ? result : (result && result.data) || [];
+        this.selectFirstIfNeeded();
+      } catch (error) {
+        console.error("Failed to process options:", error);
+        this.optionList = [];
+      }
+    },
+    isEmptyValue(value) {
+      return value === undefined || value === null || value === "";
+    },
+    selectFirstIfNeeded() {
+      if (!this.optionList.length || !this.isEmptyValue(this.selectedDropdown)) {
+        return;
+      }
+
+      const firstOption = this.optionList[0];
+      this.setDropdownValue(firstOption[this.props.value]);
+    },
+    getItemKey(item) {
+      return item[this.props.value];
+    },
+    getOptionInfo(value) {
+      return this.optionMap.get(value) || {};
+    },
+    handleInput(val) {
+      let value = val;
+      if (this.inputType === "number") {
+        value = value.replace(/[^0-9]/g, "");
+      } else if (this.inputType === "chinese") {
+        value = value.replace(/[^\u4e00-\u9fa5]/g, "");
+      } else if (this.inputType === "english") {
+        value = value.replace(/[^a-zA-Z\s]/g, "");
+      } else if (this.inputType === "amount") {
+        value = value.replace(/[^0-9.]/g, "");
+        if (value.split(".").length > 2) {
+          value = value.replace(/\.+$/, "");
+        }
+      } else if (this.inputType === "englishAndNumber") {
+        value = value.replace(/[^a-zA-Z0-9\s]/g, "");
+      }
+
+      this.inputValue = value;
+      this.$emit("input", value);
+      this.$emit("update:value", value);
+    },
+    handleDropdownCommand(val) {
+      if (this.disabled) return;
+
+      this.setDropdownValue(val);
+    },
+    setDropdownValue(val) {
+      this.selectedDropdown = val;
+      console.log(val);
+      const info = this.getOptionInfo(val);
+
+      this.$emit("dropdown-change", val, info);
+      this.$emit("change", val, info);
+      this.$emit("update:dropdownValue", val);
+    },
+    clear() {
+      this.$emit("clear");
+    },
+    handleEnter() {
+      this.$emit("enter");
+    },
+    handleBlur() {
+      this.$emit("blur", this.inputValue);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mec-input-dropdown__text {
+  cursor: pointer;
+  color: #606266;
+  white-space: nowrap;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    color: #c0c4cc;
+  }
+}
+</style>

package/src/components/MecTable/MecTable.vue

@@ -92,6 +92,38 @@
         </el-table-column>
 
         <!-- 有type的列 -->
+        <el-table-column
+          v-else-if="col.type === 'expand'"
+          type="expand"
+          :label="col.label"
+          :align="col.align"
+          :min-width="col.minWidth"
+          :max-width="col.maxWidth"
+          :width="col.width"
+          :key="index + col.type"
+          :fixed="col.fixed"
+        >
+          <template slot-scope="scope">
+            <component
+              v-if="getExpandComponentType(col, scope.row)"
+              :is="getExpandComponentType(col, scope.row)"
+              :row="scope.row"
+              :scope="scope"
+              :tableData="col"
+              v-bind="
+                typeof col.componentProps === 'function'
+                  ? col.componentProps(scope.row)
+                  : col.componentProps
+              "
+              v-on="
+                typeof col.componentListeners === 'function'
+                  ? col.componentListeners(scope.row)
+                  : col.componentListeners || {}
+              "
+            ></component>
+          </template>
+        </el-table-column>
+
         <el-table-column
           v-else
           :label="col.label"
@@ -303,6 +335,13 @@ export default {
       }
       return col.type || "";
     },
+    getExpandComponentType(col, row) {
+      const component =  col.component ;
+      if (typeof component === "function") {
+        return component(row);
+      }
+      return component || "";
+    },
     // 列表选中当前行字体加粗
     selectedRowStyle({ row }) {
       const idArr = this.multipleSelection.map((row) => row[this.rowKey]);
@@ -411,4 +450,4 @@ export default {
   font-size: 15px;
   color: #f56c6c;
 }
-</style>
+</style>

package/src/otherComponents/styleText.vue

@@ -1,9 +1,9 @@
 <template>
-    <div>
+    <span>
         <span class="default-text" :style="[statusStyle]" v-if="tableData.columnType == 'text'"
             :class="tableData.getClass ? tableData.getClass(scope.row) : ''">{{ getText(tableData.bind) }}</span>
         <el-button v-if="tableData.columnType == 'button' && getText(tableData.bind)" size="mini" plain round :type="tableData.setType(this.scope.row)">{{ getText(tableData.bind) }}</el-button>
-    </div>
+    </span>
 </template>
 <script>