meixioacomponent 0.2.30 → 0.2.34

package/lib/style/element/index.css

@@ -1123,7 +1123,7 @@
   margin: 5px 0;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item {
-  padding-right: 40px;
+  padding-right: 0px;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
   color: var(--color-primary);
@@ -1540,7 +1540,8 @@
   border-color: #909399;
 }
 .el-tag.el-tag--info .el-tag__close {
-  color: #909399;
+  color: var(--text-black) !important;
+  background-color: var(--text-white) !important;
 }
 .el-tag.el-tag--info .el-tag__close:hover {
   color: var(--bg-white);
@@ -2014,20 +2015,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.el-select .el-tag {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  border-color: transparent;
-  margin: 2px 0 2px 6px;
-  background-color: #f0f2f5;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  max-width: 100%;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
+
 .el-select .el-tag__close.el-icon-close {
   background-color: #8f959e;
   top: 0;
@@ -5846,7 +5834,7 @@
   margin: 5px 0;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item {
-  padding-right: 40px;
+  padding-right: 0px !important;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
   color: var(--color-primary);
@@ -6738,7 +6726,8 @@
   box-sizing: border-box;
   border-color: transparent;
   margin: 2px 0 2px 6px;
-  background-color: #f0f2f5;
+  color: var(--text-white);
+  background-color: var(--color-success);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -14522,9 +14511,7 @@
 .el-tag.el-tag--info.is-hit {
   border-color: #909399;
 }
-.el-tag.el-tag--info .el-tag__close {
-  color: #909399;
-}
+
 .el-tag.el-tag--info .el-tag__close:hover {
   color: var(--bg-white);
   background-color: #909399;
@@ -15248,6 +15235,8 @@
 .el-tree-node {
   white-space: nowrap;
   outline: 0;
+  margin: var(--margin-3) 0px;
+  padding: 0px var(--padding-3);
 }
 .el-tree-node:focus > .el-tree-node__content {
   background-color: var(--hover-gray);
@@ -20999,9 +20988,7 @@
 .el-tag.el-tag--info.is-hit {
   border-color: #909399;
 }
-.el-tag.el-tag--info .el-tag__close {
-  color: #909399;
-}
+
 .el-tag.el-tag--info .el-tag__close:hover {
   color: var(--bg-white);
   background-color: #909399;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.2.30",
+  "version": "0.2.34",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/basePopoverButton/index.vue

@@ -19,6 +19,7 @@
       :disabled="disabled"
       class="popover-button"
       :type="module ? 'selected' : 'info'"
+      :class="{ 'is-single': !buttonText && buttonIcon }"
     >
       <base-icon
         :size="`s`"
@@ -135,4 +136,7 @@ export default {
     }
   }
 }
+.is-single {
+  padding: 7px !important;
+}
 </style>

package/packages/components/base/baseTreeSelect/index.js

@@ -0,0 +1,7 @@
+import baseTreeSelect from "./index.vue";
+
+baseTreeSelect.install = function (Vue) {
+  Vue.component(baseTreeSelect.name, baseTreeSelect);
+};
+
+export default baseTreeSelect;

package/packages/components/base/baseTreeSelect/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <el-select
+    ref="select"
+    :value="value"
+    placeholder="请选择"
+    size="mini"
+    @visible-change="visibleChange"
+    clearable
+    :multiple="multiple"
+    style="width: 100%"
+    @clear="clear"
+    @remove-tag="removeTag"
+  >
+    <el-option
+      ref="option"
+      class="option"
+      :key="index"
+      v-for="(item, index) in optionData"
+      :value="item[`${nodeKey}`]"
+      :label="item[`${label}`]"
+    >
+      <div style="display: none"></div>
+    </el-option>
+    <el-tree
+      ref="tree"
+      class="tree"
+      :data="data"
+      :props="props"
+      highlight-current
+      :node-key="nodeKey"
+      :show-checkbox="multiple"
+      :default-expanded-keys="[value]"
+      :expand-on-click-node="true"
+      @node-click="handleNodeClick"
+      @check="handleNodeMultiplyClick"
+    ></el-tree>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "baseTreeSelect",
+
+  data() {
+    return {
+      optionData: null,
+    };
+  },
+  created() {
+    this.setOptionData();
+  },
+  mounted() {
+    if (!this.isEmpty(this.data)) {
+      this.init(this.value);
+    }
+  },
+  props: {
+    // v-model绑定
+    value: {
+      type: [String, Number, Array],
+      default: "",
+    },
+    // 树形的数据
+    data: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    // 每个树节点用来作为唯一标识的属性
+    nodeKey: {
+      type: [String, Number],
+      default: "id",
+    },
+    // tree的props配置
+    props: {
+      type: Object,
+      default: function () {
+        return {
+          label: "label",
+          children: "children",
+        };
+      },
+    },
+
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+
+    checkFather: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    label() {
+      return this.$props.props.label;
+    },
+  },
+  methods: {
+    // 设置optionsData
+    setOptionData() {
+      this.optionData = [];
+      let obj = {};
+      this.$set(obj, `${this.label}`, "");
+      this.$set(obj, `${this.$props.nodeKey}`, "");
+      this.optionData.push(obj);
+    },
+    // 是否为空
+    isEmpty(val) {
+      for (let key in val) {
+        return false;
+      }
+      return true;
+    },
+    // 当选择器为单选时调用该方法
+    handleNodeClick(data) {
+      if (this.$props.multiple) return;
+      let props = this.$props.props;
+      if (data[`${props.children}`]) {
+        if (this.$props.checkFather) {
+          this.$emit("input", data[this.nodeKey]);
+          this.$refs.select.visible = false;
+        } else {
+          // 当父节点不能点击时，不让它高亮
+          this.$refs.tree.setCurrentKey(this.value);
+        }
+      } else {
+        this.$emit("input", data[this.nodeKey]);
+        this.$refs.select.visible = false;
+      }
+    },
+    // 初始化并且赋值
+    init(val) {
+      // 是否是多选
+      if (this.multiple) {
+        this.setMultipleValue(val);
+      } else {
+        this.setSingleValue(val);
+      }
+    },
+    // 当选择框出现时
+    visibleChange(e) {
+      if (e) {
+        let selectDom = document.querySelector(".is-current");
+        this.$nextTick(() => {
+          this.$refs.select.scrollToOption({ $el: selectDom });
+        });
+      }
+    },
+    // 清空值
+    clear() {
+      this.$emit("input", "");
+    },
+    // 多选被选择时
+    handleNodeMultiplyClick(
+      checkedNodes,
+      checkedKeys,
+      halfCheckedNodes,
+      halfCheckedKeys
+    ) {
+      this.$emit("input", checkedKeys.checkedKeys);
+    },
+    // 移除tag时
+    removeTag(e) {
+      let index = this.value.findIndex((item) => {
+        return item == e;
+      });
+      if (index > -1) {
+        this.value.splice(index, 1);
+      }
+    },
+
+    // 设置多选数据
+    setMultipleValue(val) {
+      if (val.length > 0) {
+        this.$nextTick(() => {
+          let nodeKey = this.$props.nodeKey;
+          let label = this.label;
+          this.$refs.tree.setCheckedKeys(val, false);
+          let nodes = this.$refs.tree.getCheckedNodes();
+          this.optionData = [];
+          nodes.forEach((item) => {
+            let obj = {};
+            this.$set(obj, `${nodeKey}`, item[`${nodeKey}`]);
+            this.$set(obj, `${label}`, item[`${label}`]);
+            this.optionData.push(obj);
+          });
+        });
+      } else {
+        this.setOptionData();
+        this.$refs.tree.setCheckedKeys([]);
+      }
+    },
+
+    // 设置单选时的数据
+    setSingleValue(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(val);
+          let node = this.$refs.tree.getNode(val);
+          this.optionData[0][`${this.$props.nodeKey}`] = val;
+          this.optionData[0][`${this.label}`] = node[`${this.label}`];
+        });
+      } else {
+        this.$refs.tree.setCurrentKey(null);
+      }
+    },
+  },
+  watch: {
+    value: function (val) {
+      if (!this.isEmpty(this.data)) {
+        this.init(val);
+      }
+    },
+    data: function (val) {
+      if (!this.isEmpty(val)) {
+        this.init(this.value);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.option {
+  height: auto;
+  line-height: 1;
+  padding: 0;
+  background-color: #fff;
+}
+.tree {
+  padding: var(--padding-2) var(--padding-2);
+  font-weight: var(--font-weight-g);
+}
+
+/deep/ .el-select-dropdown__item {
+  padding: 0px !important;
+}
+</style>

package/packages/components/index.js

@@ -33,6 +33,7 @@ import baseProTable from "./proPageTable/index";
 import baseMoverVerifiBar from "./base/baseMoverVerifiBar";
 import baseTimeLine from "./base/baseTimeLine";
 import basePopoverButton from "./base/basePopoverButton";
+import baseTreeSelect from "./base/baseTreeSelect";
 // js 文件相关
 import Theme from "../config/theme/theme";
 import DynamicMount from "./dynamicmount/index.js";
@@ -80,6 +81,7 @@ const meixicomponents = [
   baseMoverVerifiBar,
   baseTimeLine,
   basePopoverButton,
+  baseTreeSelect
 ];
 
 const install = (Vue) => {
@@ -132,6 +134,7 @@ export default {
   baseMoverVerifiBar,
   baseTimeLine,
   basePopoverButton,
+  baseTreeSelect,
   Theme,
   SelectStore,
   useImg,

package/packages/components/proForm/dialogForm/baseDialogForm.vue

@@ -15,7 +15,7 @@
     >
       <div
         :key="item.key"
-        v-for="item in formArray"
+        v-for="item in module"
         class="dialog-form-content-item"
       >
         <div class="content-item-header">
@@ -27,13 +27,24 @@
             :size="size"
             :footer="false"
             :formConfig="item"
+            :disables="disables"
             :labelWidth="labelWidth"
-            :formList="item.formList"
+            v-model="item.formList"
             :rules="returnRules(item.key)"
             :labelPosition="setLabelPosition(item.formType)"
             :formType="item.formType ? item.formType : 'default'"
             ref="proFormVue"
-          ></pro_formVue>
+            @disableWatcherResult="disableWatcherResult"
+          >
+            <template v-for="slotItem in slotList">
+              <template :slot="`form-${slotItem}`">
+                <slot
+                  :scope="item.formList"
+                  :name="`formslot-${slotItem}`"
+                ></slot>
+              </template>
+            </template>
+          </pro_formVue>
         </div>
       </div>
     </div>
@@ -50,9 +61,19 @@ import baseButtonHandleVue from "../../base/baseButtonHandle/baseButtonHandle.vu
 export default {
   name: "baseDialogForm",
   data() {
-    return {};
+    return {
+      slotList: [],
+    };
   },
+  created() {
+    this.createSlots();
+  },
+  mounted() {},
   props: {
+    disables: {
+      type: Object,
+    },
+    // 距离顶部的距离
     top: {
       type: Number,
       default: () => {
@@ -74,7 +95,7 @@ export default {
       require: true,
     },
     // 需要渲染的数据
-    formArray: {
+    value: {
       type: Array,
       require: true,
     },
@@ -101,7 +122,55 @@ export default {
     pro_formVue,
     baseButtonHandleVue,
   },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+  },
   methods: {
+    createSlots() {
+      for (let i = 0; i < this.module.length; i++) {
+        let item = this.module[i];
+        for (let j = 0; j < item.formList.length; j++) {
+          let citem = item.formList[j];
+          if (citem.type == "template") {
+            this.slotList.push(citem.key);
+          }
+        }
+      }
+    },
+
+    disableWatcherResult(params) {
+      const { result, type, key } = params;
+      let index = 0;
+      let cindex = -1;
+
+      for (let i = 0; i < this.module.length; i++) {
+        let item = this.module[i];
+        for (let j = 0; j < item.formList.length; j++) {
+          let citem = item.formList[j];
+          if (citem.key == key) {
+            index = i;
+            cindex = j;
+            break;
+          }
+        }
+      }
+
+      if (cindex > -1) {
+        let formItem = this.module[index].formList[cindex];
+        if (type == "hide") {
+          this.$set(formItem, "renderHide", result);
+        } else if (type == "disable") {
+          this.$set(formItem, "disabled", result);
+        }
+      }
+    },
     setLabelPosition(type) {
       if (!type) {
         return "right";
@@ -127,9 +196,9 @@ export default {
 
     getFormValue() {
       let obj = {};
-      for (let i = 0; i < this.formArray.length; i++) {
+      for (let i = 0; i < this.module.length; i++) {
         let result = this.$refs.proFormVue[i].returnFormValue();
-        obj[`${this.formArray[i].key}`] = result;
+        obj[`${this.module[i].key}`] = result;
       }
       return obj;
     },

package/packages/components/proForm/proForm/pro_form-item_skeleton.vue

@@ -20,7 +20,7 @@ export default {
 <style lang="less" scoped>
 .form-item-skeleton-wrap {
   width: 100%;
-  height: 100%;
+  height: 60px;
   display: flex;
   align-items: center;
   flex-flow: row nowrap;
@@ -31,7 +31,7 @@ export default {
     margin-right: var(--margin-5);
   }
   .skeleton-right {
-    height: 60px;
+    height: 100%;
     width: calc(70% - 10px);
   }
 }