meixioacomponent 0.4.2 → 0.4.6

package/packages/components/base/basePlainTable/basePlainTable.vue

@@ -17,8 +17,9 @@
         :align="`left`"
         :prop="item.value"
         :label="item.label"
-        :width="item.width"
+        :width="isAverageWidth ? '' : item.width"
         v-for="(item, index) in tableConfig"
+        :fixed="item.fixed ? item.fixed : false"
       >
         <template slot="header" slot-scope="scope">
           <span class="plain-table-header-text">
@@ -27,12 +28,26 @@
         </template>
 
         <template slot-scope="scope">
-          <slot :name="item.value" :scope="scope.row" v-if="item.template">
-          </slot>
+          <slot
+            :name="item.value"
+            :scope="scope.row"
+            v-if="item.template"
+          ></slot>
 
-          <span v-else class="cell-content-text">{{
-            scope.row[`${item.value}`]
-          }}</span>
+          <span
+            v-else
+            class="cell-content-text"
+            :style="{
+              color: item.color,
+            }"
+            :class="[
+              item.fn ? 'handle-primary' : '',
+              item.type ? item.type : '',
+            ]"
+            @click="rowClick(item, scope.row)"
+          >
+            {{ nomalRowValue(scope.row, item) }}
+          </span>
         </template>
       </el-table-column>
     </el-table>
@@ -40,17 +55,18 @@
 </template>
 
 <script>
-import baseDefaultSvgVue from "../baseDefaultSvg/baseDefaultSvg.vue";
+import { FilterTime } from '../../../utils/utils'
+import baseDefaultSvgVue from '../baseDefaultSvg/baseDefaultSvg.vue'
 export default {
-  name: "basePlainTable",
+  name: 'basePlainTable',
   data() {
     return {
       id: null,
-    };
+    }
   },
   created() {
     if (this.$props.tableId) {
-      this.id = this.$props.tableId;
+      this.id = this.$props.tableId
     }
   },
   components: {
@@ -71,10 +87,31 @@ export default {
       type: String,
     },
     height: {
-      default: "auto",
+      default: 'auto',
+    },
+
+    isAverageWidth: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    rowClick(item, row) {
+      if (!item.fn) return
+      item.fn(row)
+    },
+
+    // 返回普通格式的字段
+    nomalRowValue(row, item) {
+      const value = row[item.value]
+      if (item.type == 'time') {
+        return FilterTime(value, 'YYYY-MM-DD HH:mm:ss')
+      } else {
+        return value
+      }
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -101,4 +138,33 @@ export default {
   }
   //   background: var(--color-gray-d);
 }
+
+.handle-primary {
+  cursor: pointer;
+  text-decoration: underline !important;
+}
+
+.primary,
+.handle-primary {
+  color: var(--color-primary) !important;
+}
+
+.success {
+  color: var(--color-success) !important;
+}
+.error {
+  color: var(--color-error) !important;
+}
+
+.warn {
+  color: var(--color-warn) !important;
+}
+
+.primary,
+.handle-primary,
+.success,
+.error,
+.warn {
+  font-weight: var(--font-weight-g);
+}
 </style>

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

@@ -30,7 +30,7 @@
           class="button-icon"
           :iconClass="iconClass"
           @iconClick="iconClick"
-          :color="module ? 'text-white' : 'd'"
+          :color="module ? 'var(--text-white)' : 'd'"
         ></base-icon>
         <span class="inner-span" v-if="buttonText">{{ buttonText }}</span>
       </el-button>

package/packages/components/base/baseSection/baseSection.vue

@@ -22,14 +22,14 @@
 
 <script>
 export default {
-  name: "baseSection",
+  name: 'baseSection',
   data() {
-    return {};
+    return {}
   },
   mounted() {
     this.$nextTick(() => {
-      this.init();
-    });
+      this.init()
+    })
   },
   beforeDestroy() {},
   props: {
@@ -55,24 +55,24 @@ export default {
   computed: {
     module: {
       set(val) {
-        this.$emit("input", val);
+        this.$emit('input', val)
       },
       get() {
-        return this.$props.value;
+        return this.$props.value
       },
     },
   },
   methods: {
     init() {
-      if (!this.$props.event) return;
+      if (!this.$props.event) return
     },
     handleOpen() {
-      if (this.$props.disable) return;
-      this.module = !this.module;
-      this.$emit("visibleContent", this.module);
+      if (this.$props.disable) return
+      this.module = !this.module
+      this.$emit('visibleContent', this.module)
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -106,9 +106,22 @@ export default {
     }
   }
   .header-text {
+    position: relative;
+    display: inline-block;
     color: var(--font-color-d);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-kg);
+    margin-left: var(--margin-4);
+    &::before {
+      top: 0px;
+      left: -10px;
+      width: 4px;
+      height: 100%;
+      content: '';
+      position: absolute;
+      border-radius: var(--radius);
+      background: var(--color-primary);
+    }
   }
   .section-content {
     padding: calc(var(--padding-4) * 2) 0px;

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

@@ -0,0 +1,6 @@
+import baseSingleImgUpload from './index.vue'
+
+baseSingleImgUpload.install = function (Vue) {
+  Vue.component(baseSingleImgUpload.name, baseSingleImgUpload)
+}
+export default baseSingleImgUpload

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

@@ -0,0 +1,147 @@
+<template>
+  <div class="upload-avatar-wrap">
+    <BaseAvatar
+      :size="`l`"
+      :shape="shape"
+      :type="avatartType"
+      v-if="type == 'avatar'"
+      :view="avatartType == 'img' ? true : false"
+      :source="avatartType == 'img' ? url : iconSource"
+    ></BaseAvatar>
+
+    <div class="img-wrap" :style="imgStyle" v-else>
+      <BaseImg
+        fit="cover"
+        :src="url"
+        :shape="shape"
+        :event="url ? true : false"
+      ></BaseImg>
+    </div>
+
+    <el-button
+      type="primary"
+      size="mini"
+      @click="handleCheckImg"
+      :disabled="disabled"
+    >
+      选择图片
+    </el-button>
+    <BaseUploadItem
+      :fileType="`img`"
+      :cropper="cropper"
+      ref="baseUploadItem"
+      :uploadType="`single`"
+      style="display: none;"
+      :cropperConfig="cropperConfig"
+      @uploadEd="uploadEd($event)"
+    ></BaseUploadItem>
+  </div>
+</template>
+
+<script>
+import BaseImg from '../baseImg/baseImg.vue'
+import BaseAvatar from '../baseAvatar/baseAvatar.vue'
+import BaseUploadItem from '../baseUpload/baseUploadItem.vue'
+export default {
+  name: 'baseSingleImgUpload',
+  data() {
+    return {
+      value: [],
+    }
+  },
+  created() {
+    this.init()
+  },
+  components: { BaseAvatar, BaseImg, BaseUploadItem },
+  props: {
+    url: {},
+    shape: { default: 'cir' },
+    type: {
+      default: 'avatar',
+    },
+    imgSize: {
+      type: Array,
+      default: () => [300, 200],
+    },
+    cropper: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    avatartType() {
+      const { url } = this.$props
+      return url ? 'img' : 'icon'
+    },
+    iconSource() {
+      if (this.type == 'avatar') {
+        return 'meixicomponenticon-user'
+      } else {
+        return 'meixicomponenticon-tupian_huaban'
+      }
+    },
+    imgStyle() {
+      const { imgSize } = this.$props
+      return {
+        width: `${imgSize[0]}px`,
+        height: `${imgSize[1]}px`,
+      }
+    },
+    cropperConfig() {
+      const { type } = this.$props
+      if (type == 'avatar') {
+        return {
+          croppetShape: 'circ',
+          cropperOutline: [80, 80],
+        }
+      } else {
+        return {
+          croppetShape: 'rect',
+          cropperOutline: [100, 100],
+        }
+      }
+    },
+  },
+  methods: {
+    init() {
+      const { url } = this.$props
+      if (url) {
+        this.value.push({ url })
+      }
+    },
+    handleCheckImg() {
+      this.$refs.baseUploadItem.clickFile()
+    },
+    uploadEd(value) {
+      if (value.length >= 0) {
+        this.$emit('uploadEd', value[0].url)
+      }
+    },
+  },
+  watch: {
+    url(newVal, oldVal) {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.upload-avatar-wrap {
+  width: 100%;
+  display: flex;
+  min-height: 160px;
+  background: inherit;
+  align-items: center;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  justify-content: space-between;
+  padding: var(--padding-5) calc(var(--padding-5) * 4);
+}
+</style>

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

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

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

@@ -0,0 +1,159 @@
+<template>
+  <el-select
+    :size="size"
+    ref="target"
+    v-if="selectStore"
+    v-model="module"
+    :filterable="true"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :multiple="multiple"
+    :loading="selectLoading"
+    :multipleLimit="multipleLimit"
+    @visible-change="visibleChange"
+    style="width: 100%; height: 100%;"
+  >
+    <div class="select-empty" slot="empty">
+      <el-button
+        type="primary"
+        size="mini"
+        icon="el-icon-refresh"
+        :loading="selectLoading"
+        @click="loadSelectData"
+      >
+        尝试刷新数据
+      </el-button>
+    </div>
+    <div class="option-wrap">
+      <div class="option-wrap-header">
+        <el-button
+          size="mini"
+          type="info"
+          title="重新刷新数据"
+          :disabled="selectLoading"
+          icon="el-icon-refresh"
+          @click="loadSelectData"
+        ></el-button>
+      </div>
+      <el-option
+        :key="item.value"
+        :disabled="item.disabled"
+        v-for="item in selectData"
+        :label="item[`${selectConfig.label}`]"
+        :value="item[`${selectConfig.value}`]"
+      ></el-option>
+    </div>
+  </el-select>
+</template>
+
+<script>
+import componentConfig from '../../../config/componentConfig'
+export default {
+  name: 'baseStoreSelect',
+  data() {
+    return {}
+  },
+
+  props: {
+    size: {},
+    value: {},
+    multiple: {},
+    disabled: {},
+    useStore: {},
+    useSlot: {
+      default: false,
+    },
+    multipleLimit: {},
+    params: {},
+    placeholder: {
+      default: '请选择',
+    },
+  },
+  created() {},
+  mounted() {
+    this.loadSelectData()
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.$props.value
+      },
+    },
+
+    selectLoading() {
+      return this.selectStore?.getLoading()
+    },
+    selectStore() {
+      const { useStore } = this.$props
+      return componentConfig.selectStore.getStore(useStore)
+    },
+    selectData() {
+      return this.selectStore.getData()
+    },
+    selectConfig() {
+      return this.selectStore.getConfig()
+    },
+  },
+
+  methods: {
+    focus() {
+      this.$refs.target.focus()
+    },
+
+    getSelectData() {
+      return this.selectData
+    },
+
+    getSelectConfig() {
+      return this.selectConfig
+    },
+
+    loadSelectData() {
+      const { params } = this.$props
+      this.selectStore?.loadData(params)
+    },
+
+    visibleChange(visible) {
+      if (!visible) return
+      if (this.selectData) return
+      this.loadSelectData()
+    },
+  },
+
+  watch: {
+    '$props.params': {
+      deep: true,
+      handler(newVal, oldVal) {
+        this.module = null
+        this.selectStore.cancelLoad()
+        this.loadSelectData()
+      },
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.option-wrap {
+  width: 100%;
+  height: auto;
+  .option-wrap-header {
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    justify-content: flex-end;
+    padding: 0px var(--padding-4);
+    margin-bottom: var(--margin-4);
+  }
+}
+.select-empty {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--padding-4) * 2);
+}
+</style>

package/packages/components/base/baseToggle/toggle.vue

@@ -8,17 +8,28 @@
         disabled: disabled,
         selected: item.value == module,
       }"
+      :style="{
+        background: item.value == module ? toggleColor[index] : '',
+      }"
       v-for="(item, index) in toggleList"
     >
       <base-icon
         :size="`l`"
-        :color="`s`"
+        :color="item.value == module ? `${toggleTextColor[index]}` : 's'"
         v-if="item.icon"
         :name="item.icon"
         :event="disabled ? false : true"
         @iconClick="handletoggle(item)"
       ></base-icon>
-      <span v-else>{{ item.label }}</span>
+      <span
+        :style="{
+          color:
+            item.value == module ? `${toggleTextColor[index]} !important` : '',
+        }"
+        v-else
+      >
+        {{ item.label }}
+      </span>
     </div>
   </div>
 </template>
@@ -49,6 +60,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    toggleColor: {
+      type: Array,
+      default: () => ['var(--color-primary)', 'var(--color-error)'],
+    },
+    toggleTextColor: {
+      type: Array,
+      default: () => ['var(--text-white)', 'var(--text-white)'],
+    },
   },
   computed: {
     module: {
@@ -63,7 +82,7 @@ export default {
   methods: {
     handletoggle(item) {
       const { disabled } = this.$props
-      if (disabled) return
+      if (disabled || item.value == this.module) return
       const { beforeHandle } = this.$props
       if (beforeHandle) {
         beforeHandle(() => {

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

@@ -5,7 +5,7 @@
     placeholder="请选择"
     size="mini"
     @visible-change="visibleChange"
-    clearable
+    :clearable="clearable"
     :disabled="disabled"
     :multiple="multiple"
     style="width: 100%;"
@@ -84,6 +84,11 @@ export default {
       },
     },
 
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+
     multiple: {
       type: Boolean,
       default: false,
@@ -208,6 +213,7 @@ export default {
           let node = this.$refs.tree.getNode(val)
           this.optionData[0][`${this.$props.nodeKey}`] = val
           this.optionData[0][`${this.label}`] = node[`${this.label}`]
+          this.$emit('onSingleValueChange', node)
         })
       } else {
         this.$refs.tree.setCurrentKey(null)

package/packages/components/base/baseUpload/baseUpload.vue

@@ -7,15 +7,20 @@
         :size="outline"
         :isGroup="true"
         :uploadItem="item"
+        :disabled="disabled"
         v-for="(item, index) in module"
+        v-dragging="{ item: item, list: module }"
         @handleDeleteUploadItem="handleDeleteUploadItem(index)"
       ></baseUploadItemVue>
+
       <baseUploadItemVue
         :type="`upload`"
         v-show="!isMax"
         ref="itemUpload"
         :isGroup="true"
         :size="outline"
+        v-if="!disabled"
+        :disabled="disabled"
         :fileSize="fileSize"
         :fileType="fileType"
         :uploadType="`multiple`"
@@ -43,6 +48,11 @@ export default {
       uploadLoading: false,
     }
   },
+  mounted() {
+    this.$dragging.$on('dragged', ({ value }) => {
+      this.onDragEnd(value)
+    })
+  },
   beforeDestroy() {
     if (this.dynamicmount) {
       this.uploadEd()
@@ -76,6 +86,10 @@ export default {
     fileSize: {
       default: 99,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     module: {
@@ -89,7 +103,13 @@ export default {
   },
   methods: {
     handleDeleteUploadItem(index) {
+      const { disabled } = this.$props
+      if (disabled) return
       this.module.splice(index, 1)
+      this.$emit('onDelUploadItem', index)
+    },
+    onDragEnd() {
+      this.$emit('onDragEnd')
     },
   },
 }
@@ -117,6 +137,9 @@ export default {
       font-size: var(--font-size-s);
     }
   }
+  .drag-content {
+    display: flex;
+  }
 
   /deep/ .el-loading-mask {
     z-index: 1 !important;