meixioacomponent 1.1.49 → 2.0.2

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

@@ -1,42 +1,17 @@
+<!--废弃-->
 <template>
-  <el-select
-      ref="select"
-      :clearable="clearable"
+  <t-tree-select
+      v-model="module"
       :disabled="disabled"
       :multiple="multiple"
+      :keys="{
+        value:nodeKey,
+        ...props
+      }"
+      :clearable="true"
       :placeholder="placeholder"
-      :size="size"
-      :value="value"
-      style="width: 100%;"
-      @clear="clear"
-      @visible-change="visibleChange"
-      @remove-tag="removeTag"
-  >
-    <el-option
-        v-for="(item, index) in optionData"
-        :key="index"
-        ref="option"
-        :label="item[`${label}`]"
-        :value="item[`${nodeKey}`]"
-        class="option"
-        style="display: none;"
-    >
-      <div style="display: none;"></div>
-    </el-option>
-    <el-tree
-        ref="tree"
-        :data="data"
-        :default-expanded-keys="[value]"
-        :expand-on-click-node="true"
-        :node-key="nodeKey"
-        :props="props"
-        :show-checkbox="multiple"
-        class="tree"
-        highlight-current
-        @check="handleNodeMultiplyClick"
-        @node-click="handleNodeClick"
-    ></el-tree>
-  </el-select>
+      :data="data"
+  ></t-tree-select>
 </template>
 
 <script>
@@ -49,12 +24,10 @@ export default {
     }
   },
   created() {
-    this.setOptionData()
+
   },
   mounted() {
-    if (!this.isEmpty(this.data)) {
-      this.init(this.value)
-    }
+
   },
   props: {
     // v-model绑定
@@ -118,117 +91,17 @@ export default {
     label() {
       return this.$props.props.label
     },
+    module:{
+      set(val){
+        this.$emit('input',val);
+      },
+      get(){
+        return this.$props.value
+      }
+    }
   },
   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}`]
-          this.$emit('onSingleValueChange', node)
-        })
-      } else {
-        this.$refs.tree.setCurrentKey(null)
-      }
-    },
   },
   watch: {
     value: function (val) {

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

@@ -1,37 +1,32 @@
 <template xmlns="http://www.w3.org/1999/html">
   <div
-    ref="baseUploadItemWarpRefs"
-    v-loading="uploadLoading"
-    :contenteditable="contenteditable"
-    :style="{ width: `${outline[0] + 2}px`, height: `${outline[1] + 2}px` }"
-    class="base-upload-item-wrap"
-    @click="clickFile"
-    @mouseenter="mouseenter"
-    v-on:paste="onPasteFile"
+      ref="baseUploadItemWarpRefs"
+      v-loading="uploadLoading"
+      :contenteditable="contenteditable"
+      :style="{ width: `${outline[0] + 2}px`, height: `${outline[1] + 2}px` }"
+      class="base-upload-item-wrap"
+      @click="clickFile"
+      @mouseenter="mouseenter"
+      v-on:paste="onPasteFile"
   >
     <div
-      v-if="type === 'upload'"
-      v-show="!uploadedValue"
-      :style="wrapStyle"
-      class="type-upload"
+        v-if="type === 'upload'"
+        v-show="!uploadedValue"
+        :style="wrapStyle"
+        class="type-upload"
     >
       <input
-        v-if="type === 'upload'"
-        ref="inputFile"
-        :accept="accept"
-        :multiple="uploadType !== 'single'"
-        style="display: none"
-        type="file"
-        @change="onInputFileChange"
+          v-if="type === 'upload'"
+          ref="inputFile"
+          :accept="accept"
+          :multiple="uploadType !== 'single'"
+          style="display: none"
+          type="file"
+          @change="onInputFileChange"
       />
 
       <div v-if="!uploadedValue" class="is-upload-pro-img">
-        <base-icon
-          :active="true"
-          :iconClass="`element`"
-          :name="`el-icon-upload`"
-          class="upload-icon"
-        ></base-icon>
+        <upload-icon></upload-icon>
         <div :class="{ disabled: disabled }" class="upload-notic-wrap">
           <div v-if="fileType === 'img'" class="primary-color">点击上传</div>
           <div>
@@ -42,45 +37,43 @@
     </div>
     <div v-if="uploadedValue" class="type-pre-views">
       <div
-        v-if="fileType === 'img' || fileType === 'video'"
-        style="width: 100%; height: 100%"
+          v-if="fileType === 'img' || fileType === 'video'"
+          style="width: 100%; height: 100%"
       >
         <div v-if="!disabled" class="handleUploadItem">
-          <base-icon
-            :color="`d`"
-            :event="true"
-            :name="`meixicomponenticon-close`"
-            :plain="true"
-            :size="`l`"
-            style="width: 32px; height: 32px"
-            @iconClick="handleDeleteUploadItem"
-          ></base-icon>
+          <t-button shape="square" variant="outline" @click="handleDeleteUploadItem">
+            <template #icon>
+              <CloseIcon
+              ></CloseIcon>
+            </template>
+          </t-button>
+
         </div>
 
         <!-- 图片的回显 -->
 
         <baseImgVue
-          v-if="fileType === 'img'"
-          :event="true"
-          :fit="`contain`"
-          :src="uploadedValue"
+            v-if="fileType === 'img'"
+            :event="true"
+            :fit="`contain`"
+            :src="uploadedValue"
         ></baseImgVue>
 
         <!-- 视频的回显 -->
         <BaseVideo
-          v-if="fileType === 'video'"
-          :resource="uploadedValue"
+            v-if="fileType === 'video'"
+            :resource="uploadedValue"
         ></BaseVideo>
       </div>
       <!-- 其它文件的回显 -->
 
       <uploadItemVue
-        v-else-if="fileType === 'other'"
-        :item="uploadedValue"
-        :style="{ width: `${outline[0]}px` }"
-        :type="`appendix`"
-        style="margin: 0; padding: 0"
-        @deleteAppendixItem="handleDeleteUploadItem"
+          v-else-if="fileType === 'other'"
+          :item="uploadedValue"
+          :style="{ width: `${outline[0]}px` }"
+          :type="`appendix`"
+          style="margin: 0; padding: 0"
+          @deleteAppendixItem="handleDeleteUploadItem"
       ></uploadItemVue>
     </div>
   </div>
@@ -90,9 +83,10 @@
 import BaseVideo from "../baseVideo/index.vue";
 import baseImgVue from "../baseImg/baseImg.vue";
 import uploadItemVue from "../upload/uploadItem.vue";
+import {CloseIcon, UploadIcon} from "tdesign-icons-vue"
 //
-import { baseUploadMixins } from "./mixins";
-import { UseWaterMark } from "meixiwatermark";
+import {baseUploadMixins} from "./mixins";
+import {UseWaterMark} from "meixiwatermark";
 
 export default {
   name: "baseUploadItem",
@@ -103,12 +97,15 @@ export default {
     };
   },
 
-  mounted() {},
+  mounted() {
+  },
   mixins: [baseUploadMixins],
   components: {
     BaseVideo,
     baseImgVue,
     uploadItemVue,
+    UploadIcon,
+    CloseIcon
   },
   props: {
     type: {
@@ -197,7 +194,7 @@ export default {
 
     uploadedValue() {
       if (this.module) {
-        const { fileType } = this.$props;
+        const {fileType} = this.$props;
         if (fileType != "other") {
           return this.module[0]?.url;
         }
@@ -231,7 +228,7 @@ export default {
     },
 
     wrapStyle() {
-      const { outline } = this.$props;
+      const {outline} = this.$props;
 
       return {
         width: `${outline[0]}px`,
@@ -241,7 +238,7 @@ export default {
   },
   methods: {
     clickFile() {
-      const { disabled } = this.$props;
+      const {disabled} = this.$props;
       if (disabled) return;
       this.$refs.inputFile.value = "";
       this.$refs.inputFile.click();
@@ -249,7 +246,7 @@ export default {
 
     async returnFiles(files) {
       let list = [];
-      const { fileSize } = this.$props;
+      const {fileSize} = this.$props;
       for (let i = 0; i < files.length; i++) {
         if (files[i].size < fileSize * 1048576) {
           let obj = {
@@ -267,7 +264,7 @@ export default {
     },
 
     onInputFileChange(e) {
-      const { autoUpload } = this.$props;
+      const {autoUpload} = this.$props;
 
       if (!autoUpload) {
         this.$emit("onInputFileChange", e);
@@ -295,33 +292,33 @@ export default {
       }
 
       if (
-        cropper &&
-        !isGroup &&
-        fileType === "img" &&
-        uploadType === "single"
+          cropper &&
+          !isGroup &&
+          fileType === "img" &&
+          uploadType === "single"
       ) {
         this.userCropper(files[0]);
       } else if (
-        useWaterMark &&
-        fileType === "img" &&
-        uploadType === "single"
+          useWaterMark &&
+          fileType === "img" &&
+          uploadType === "single"
       ) {
         const reader = new FileReader();
         reader.readAsDataURL(files[0]);
         reader.onload = await (async (readRes) => {
           let useWaterMarkInstance = new UseWaterMark(
-            null,
-            {
-              text: `${useWaterMark}`,
-              observer: false,
-            },
-            useWaterMarkProps,
-            {
-              immediately: false,
-              canvasHeight: 0,
-              canvasWidth: 0,
-              imgUrl: readRes.target.result,
-            }
+              null,
+              {
+                text: `${useWaterMark}`,
+                observer: false,
+              },
+              useWaterMarkProps,
+              {
+                immediately: false,
+                canvasHeight: 0,
+                canvasWidth: 0,
+                imgUrl: readRes.target.result,
+              }
           );
           let fileBlob = await useWaterMarkInstance.getWaterBlobFile();
           const time = Date.now();
@@ -346,7 +343,7 @@ export default {
     },
 
     userCropper(file) {
-      const { cropperConfig } = this.$props;
+      const {cropperConfig} = this.$props;
       const module = require("../../../config/use/useCropper").default;
       module.startCropper({
         img: file,
@@ -383,7 +380,7 @@ export default {
     },
 
     async onPasteFile() {
-      const { disabled, autoUpload } = this.$props;
+      const {disabled, autoUpload} = this.$props;
       if (this.uploadLoading || disabled) return;
       const items = (event.clipboardData || window.clipboardData).items;
       const rowList = [];

package/packages/components/base/baseUpload/mixins.js

@@ -1,4 +1,3 @@
-import { Notification } from "element-ui";
 import componentConfig from "../../../config/componentConfig";
 import useUpload from "../../../config/use/UseUpload";
 

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

@@ -3,23 +3,22 @@
     <base-img v-if="type == 'img'" :src="resource" :event="true" :fit="`contain`"></base-img>
     <base-video v-if="type == 'video'" :resource="resource"></base-video>
     <!-- 删除icon -->
-    <base-icon
-      :size="`l`"
-      :color="`d`"
-      :event="true"
-      :plain="true"
-      v-if="!disabled"
-      class="handleUploadItem"
-      style="width: 32px; height: 32px;"
-      :name="`meixicomponenticon-close`"
-      @iconClick="handleDeleteUploadItem"
-    ></base-icon>
+    <t-button shape="square" variant="outline" @click="handleDeleteUploadItem" v-if="!disabled">
+      <template #icon>
+        <close-icon
+            @click="handleDeleteUploadItem"
+        ></close-icon>
+      </template>
+    </t-button>
+
   </div>
 </template>
 
 <script>
 import baseImg from '../baseImg/baseImg.vue'
 import baseVideo from '../baseVideo/index.vue'
+import {CloseIcon} from "tdesign-icons-vue"
+
 export default {
   data() {
     return {}
@@ -44,11 +43,11 @@ export default {
       require: true,
     },
   },
-  components: { baseImg, baseVideo },
+  components: {baseImg, baseVideo, CloseIcon},
 
   computed: {
     wrapSize() {
-      const { outLine } = this.$props
+      const {outLine} = this.$props
       return {
         width: `${outLine[0]}px`,
         height: `${outLine[1]}px`,
@@ -57,6 +56,7 @@ export default {
   },
   methods: {
     handleDeleteUploadItem() {
+      if (this.disabled) return;
       this.$emit('handleDeleteUploadItem')
     },
   },
@@ -88,6 +88,7 @@ export default {
     position: absolute;
     border-radius: var(--radius);
     background: rgba(0, 0, 0, 0.3);
+
     /deep/ i {
       color: var(--text-white) !important;
     }

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

@@ -4,27 +4,40 @@
       <div v-if="img" class="img_has-content">
         <base-img :event="true" :size="[70,70]" :src="img"></base-img>
         <div class="img_content-mask">
-          <base-icon :disable="disabled" :event="!disabled" icon-class="element" name="el-icon-refresh"
-                     size="`l`"
-                     @iconClick="onAddClick"></base-icon>
+
+          <t-button shape="square" variant="outline" :disable="disabled" @click="onAddClick">
+            <template #icon>
+              <RefreshIcon
+              ></RefreshIcon>
+            </template>
+          </t-button>
+
+
         </div>
       </div>
       <div v-else :class="{'disabled':disabled}" class="img_empty-content">
-        <base-icon :disable="disabled" :event="!disabled" icon-class="element"
-                   name="el-icon-plus"
-                   size="`l`"
-                   @iconClick="onAddClick"></base-icon>
+
+
+        <t-button shape="square" variant="outline" :disable="disabled" @click="onAddClick">
+          <template #icon>
+            <plus-icon></plus-icon>
+          </template>
+        </t-button>
+
       </div>
 
     </div>
     <div class="title-wrap">
-      <el-input v-model="titleValue" :disabled="disabled" :maxlength="maxlength" :placeholder="placeholder"
-                size="mini"></el-input>
+      <t-input :disabled="disabled" v-model="titleValue" :maxlength="maxlength" :placeholder="placeholder"
+               size="small"></t-input>
     </div>
 
     <div v-if="img" class="handle-close">
-      <base-icon :disable="disabled" :event="!disabled" icon-class="element" name="el-icon-close"
-                 @iconClick="onHandleEmpty"></base-icon>
+      <t-button shape="square" variant="outline" :disable="disabled" @click="onHandleEmpty">
+        <template #icon>
+          <close-icon></close-icon>
+        </template>
+      </t-button>
     </div>
     <input
         ref="inputFile"
@@ -41,6 +54,7 @@
 import {defineComponent} from 'vue'
 import useUpload from "../../../config/use/UseUpload";
 import componentConfig from "../../../config/componentConfig";
+import {CloseIcon, PlusIcon, RefreshIcon} from "tdesign-icons-vue"
 
 export default defineComponent({
   name: "baseUploadImgAndName",
@@ -51,6 +65,9 @@ export default defineComponent({
   },
   mounted() {
   },
+  components: {
+    PlusIcon, RefreshIcon, CloseIcon
+  },
   props: {
     imgSrc: {},
     title: {},

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

@@ -11,11 +11,25 @@
       @destroy="destroy"
   >
     <div slot="dialog-content" class="dialog-content">
-      <el-steps :active="stepActive" simple>
-        <el-step icon="el-icon-folder-add" title="上传文件"></el-step>
-        <el-step icon="el-icon-upload" title="导入数据"></el-step>
-        <el-step icon="el-icon-check" title="导入完成"></el-step>
-      </el-steps>
+      <t-steps :current="stepActive" readonly>
+        <t-step-item title="上传文件" :content="stepActive>0?'已完成状态':'进行中状态'">
+          <template #icon>
+            <UploadIcon></UploadIcon>
+          </template>
+        </t-step-item>
+
+        <t-step-item title="导入数据" :content="stepActive>1?'已完成状态':'进行中状态'">
+          <template #icon>
+            <FolderImportIcon></FolderImportIcon>
+          </template>
+        </t-step-item>
+
+        <t-step-item title="导入数据" :content="stepActive>2?'已完成状态':'进行中状态'">
+          <template #icon>
+            <CheckIcon></CheckIcon>
+          </template>
+        </t-step-item>
+      </t-steps>
 
       <div class="custom-upload-content" v-on:paste="onPasteFile">
         <span class="notice-text">
@@ -24,15 +38,15 @@
           >支持黏贴文件上传)
         </span>
         <div v-show="stepActive == 0" class="upload-handle-wrap">
-          <el-input
+          <t-input
               v-model="fileName"
               :disabled="true"
-              :size="`mini`"
+              size="small"
               style="margin-right: var(--margin-4);"
-          ></el-input>
-          <el-button size="mini" type="primary" @click="onHandleFile">
+          ></t-input>
+          <base-button size="mini" type="primary" @click="onHandleFile">
             选择文件
-          </el-button>
+          </base-button>
 
           <base-upload-item
               ref="baseUploadItemRef"
@@ -82,6 +96,8 @@
 <script>
 import BaseDefaultSvg from '../baseDefaultSvg/baseDefaultSvg.vue'
 import baseUploadItem from '../baseUpload/baseUploadItem.vue'
+import {CheckIcon, FolderImportIcon, UploadIcon} from "tdesign-icons-vue"
+
 
 export default {
   name: 'baseUploadTemplate',
@@ -138,7 +154,7 @@ export default {
       type: Function,
     },
   },
-  components: {baseUploadItem, BaseDefaultSvg},
+  components: {baseUploadItem, BaseDefaultSvg, UploadIcon, FolderImportIcon, CheckIcon},
   computed: {
     module: {
       set(val) {