meixioacomponent 1.1.49 → 2.0.1

package/packages/components/proForm/proForm/proFormItem/pro_form_item.vue

@@ -30,24 +30,19 @@
 
 
         <!--        textarea-->
-        <el-input
+        <t-textarea
             v-if="config.type === 'textarea'"
             v-model="module"
-            :autosize="!config.rows"
-            :rows="config.rows"
-            :size="size"
-            disabled
-            type="textarea"
-        ></el-input>
-
-        <base-icon
-            v-show="!isEdit && !isDisabled"
-            :event="true"
-            :name="`meixicomponenticon-edit`"
-            :size="`s`"
-            :title="`修改`"
-            @iconClick="handleClick('edit')"
-        ></base-icon>
+            :autosize="{ minRows: config.rows}"
+            :size="componentSize"
+            :disabled="disabled"
+        ></t-textarea>
+
+        <t-button shape="square" variant="outline"    v-show="!isEdit && !isDisabled" @click="handleClick('edit')">
+          <template #icon>
+            <edit-icon></edit-icon>
+          </template>
+        </t-button>
       </div>
 
       <div
@@ -57,19 +52,19 @@
           class="item-handle-wrap"
       >
         <!-- input输入框 -->
-        <el-input
+        <t-input
             v-if="config.type === 'input'&&!config.unit"
             ref="target"
             v-model="module"
             :disabled="isDisabled"
             :maxlength="config.maxlength"
             :placeholder="config.placeholder"
-            :size="size"
+            :size="componentSize"
             :style="{
             width:`${config.width? `${config.width}px`:'100%'}  `,
             height:'100%'
           }"
-        ></el-input>
+        ></t-input>
 
         <!--        input输入框但是携带unit-->
         <BaseNumberInput
@@ -138,68 +133,90 @@
             @hook:mounted="selectMounted = true"
         ></baseStoreSelect>
 
-        <el-date-picker
-            v-else-if="isDatePick"
-            ref="target"
+
+        <t-date-picker
+            v-else-if="config.type === 'time'"
             v-model="module"
+            :placeholder="config.placeholder"
+            :clearable="true"
+            :size="componentSize"
             :disabled="isDisabled"
-            :endPlaceholder="datePickPlace[2]"
-            :picker-options="config.pickerOptions"
-            :prefix-icon="`el-icon-time`"
-            :rangeSeparator="datePickPlace[1]"
-            :size="size"
-            :startPlaceholder="datePickPlace[0]"
-            :type="datePickType"
-            align="right"
-            placeholder="选择日期"
-            style="width: 100%; height: 100%;"
-            value-format="timestamp"
-        ></el-date-picker>
+            style="width: 100%;height: 100%"
+            value-type="time-stamp"
+        />
+
+        <t-date-picker
+            v-else-if="config.type === 'datetime'"
+            enable-time-picker
+            v-model="module"
+            :placeholder="config.placeholder"
+            :clearable="true"
+            :size="componentSize"
+            :disabled="isDisabled"
+            style="width: 100%;height: 100%"
+            value-type="time-stamp"
+        />
+        <t-date-range-picker
+            v-else-if="config.type === 'daterange'"
+            v-model="module"
+            :clearable="true"
+            :size="componentSize"
+            :disabled="isDisabled"
+            :placeholder="datePickPlace"
+            style="width: 100%;height: 100%"
+            value-type="time-stamp"
+        />
+
+        <t-date-range-picker
+            v-else-if="config.type === 'datetimerange'"
+            enable-time-picker
+            v-model="module"
+            :clearable="true"
+            :size="componentSize"
+            :disabled="isDisabled"
+            :placeholder="datePickPlace"
+            style="width: 100%;height: 100%"
+            value-type="time-stamp"
+        />
 
         <!-- 单选框 -->
         <base-toggle v-if="config.type === 'radio'" v-model="module" :disabled="isDisabled" :size="size"
                      :toggle-color="['var(--color-primary)']"
                      :toggle-list="config.list"></base-toggle>
         <!-- 选择器 -->
-        <el-checkbox-group
+        <t-checkbox-group
             v-else-if="config.type === 'checkbox'"
             v-model="module"
             :disabled="isDisabled"
             :max="checkMax"
             :min="checkMin"
-            :size="size"
+            :size="componentSize"
             style="width: 100%;"
         >
-          <el-checkbox
+          <t-checkbox
               v-for="(item, index) in config.list"
               :key="index"
               :disabled="isDisabled"
-              :label="item.key"
+              :label="item.label"
+              :value="item.key"
           >
             {{ item.label }}
-          </el-checkbox>
-        </el-checkbox-group>
-        <!-- 文本输入框 -->
-        <el-input
-            v-if="config.type === 'textarea'"
-            ref="target"
-            v-model="module"
-            :autosize="!config.rows"
-            :disabled="isDisabled"
-            :maxlength="config.maxlength"
-            :placeholder="config.placeholder"
-            :rows="config.rows"
-            :show-word-limit="!!config.maxlength"
-            :size="size"
-            type="textarea"
-        ></el-input>
+          </t-checkbox>
+        </t-checkbox-group>
 
         <!--单文件上传-->
-
-        <form-single-upload-item v-if="config.type==='singleUpload'" v-model="module"
+        <form-single-upload-item v-else-if="config.type==='singleUpload'" v-model="module"
                                  :disabled="isDisabled"
                                  :file-type="config.fileType"></form-single-upload-item>
 
+        <!--        textarea-->
+        <t-textarea
+            v-else-if="config.type === 'textarea'"
+            v-model="module"
+            :autosize="{ minRows: config.rows}"
+            :size="componentSize"
+            :disabled="disabled"
+        ></t-textarea>
 
       </div>
       <!-- 插槽 -->
@@ -216,22 +233,30 @@
 
       <!-- 确定的按钮 -->
       <div v-show="isEdit && !form" class="bottom-handle-wrap">
-        <el-button
+        <base-button
             class="dropdown-button"
-            icon="el-icon-check"
             plain
             size="small"
             type="info"
             @click="handleClick('confirm')"
-        ></el-button>
-        <el-button
+        >
+          <template #icon>
+            <check-icon></check-icon>
+          </template>
+
+        </base-button>
+        <base-button
             class="dropdown-button"
-            icon="el-icon-close"
             plain
             size="small"
             type="info"
             @click="handleClick('edit')"
-        ></el-button>
+        >
+          <template #icon>
+            <close-icon></close-icon>
+          </template>
+
+        </base-button>
       </div>
     </div>
     <span v-if="config.notice" class="form-item-notice">{{ config.notice }}</span>
@@ -244,8 +269,9 @@
 <script>
 import BaseNumberInput from '../../../base/baseNumberInput/index.vue'
 import baseStoreSelect from '../../../base/baseStoreSelect/index.vue'
+import {CheckIcon, CloseIcon,EditIcon} from "tdesign-icons-vue"
 //
-import {FilterTime} from '../../../../utils/utils'
+import {FilterTime, TransomComponentSize} from '../../../../utils/utils'
 import FormSingleUploadItem from "./proFormItem/formSingleUploadItem";
 
 export default {
@@ -305,6 +331,11 @@ export default {
 
   },
   computed: {
+
+    componentSize() {
+      return TransomComponentSize(this.$props.size);
+    },
+
     isDisabled() {
       const {config, disabled} = this.$props
       return config.disabled || disabled
@@ -403,21 +434,6 @@ export default {
       const type = this.type
       return type === 'time' || type === 'datetime' || type === 'daterange' || type === 'datetimerange'
     },
-    datePickType() {
-      const type = this.type
-      switch (type) {
-        case 'time':
-          return 'date'
-        case 'datetime':
-          return 'datetime'
-        case 'daterange':
-          return 'daterange'
-        case 'datetimerange':
-          return 'datetimerange'
-        default:
-          break
-      }
-    },
 
     module: {
       get() {
@@ -545,7 +561,7 @@ export default {
       }
     },
   },
-  components: {FormSingleUploadItem, BaseNumberInput, baseStoreSelect},
+  components: {FormSingleUploadItem, BaseNumberInput, baseStoreSelect, CheckIcon, CloseIcon,EditIcon},
 }
 </script>
 

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

@@ -1,12 +1,13 @@
 <template>
   <div ref="proFormWrap" class="pro_form_content">
-    <el-form
+    <t-form
         v-if="!loading"
         ref="form"
-        :label-position="labelPosition"
+        :labelAlign="labelPosition"
         :label-width="labelWidth"
-        :model="formdata"
+        :data="formdata"
         :rules="rules"
+        scrollToFirstError="smooth"
         @submit.native.prevent
     >
       <div
@@ -19,11 +20,11 @@
         }"
           class="pro-form-item-content   "
       >
-        <el-form-item
+        <t-form-item
             v-if="formType !== 'template'"
             :class="[`${flexClass}`, size]"
             :label="item.label"
-            :prop="item.key"
+            :name="item.key"
         >
 
           <div slot="label" class="item-label-wrap">
@@ -59,6 +60,7 @@
                     v-model="item.value"
                     :class="[`form-item-${item.key}`]"
                     :disable="item.disabled || disabled"
+                    :size="size"
                     :style="{ width: `100%` }"
                     @confirmAreaValue="
                     formItemConfirm({
@@ -94,13 +96,13 @@
                 @uploadEd="uploadEd"
             ></baseUploadVue>
           </template>
-        </el-form-item>
+        </t-form-item>
 
         <template v-if="formType === 'template'">
           <slot :name="formConfig.key"></slot>
         </template>
       </div>
-    </el-form>
+    </t-form>
     <baseButtonHandleVue
         v-if="footer"
         :align="`end`"
@@ -330,27 +332,27 @@ export default {
       }
     },
     formAreaConfirm(params) {
-      let result = this.submitVerifiData(params)
-      if (result) {
-        this.$refs[`area-${params.config.key}`][0].doClose()
-        this.$emit('formItemConfirm', params.config)
-      } else {
-        this.$message.error('请重新选择')
-      }
+      this.submitVerifiData(params).then(res => {
+        if (res) {
+          this.$refs[`area-${params.config.key}`][0].doClose()
+          this.$emit('formItemConfirm', params.config)
+        } else {
+          this.$message.error('请重新选择')
+        }
+      })
+
     },
-    submitVerifiData(params) {
+    async submitVerifiData(params) {
       if (this.$props.rules) {
         // element 验证单条表单修改
-        let confrim = true
-        const rulesItem = this.$props.rules[params.config.key]
-        if (rulesItem) {
-          this.$refs.form.validateField(`${params.config.key}`, (errorMsg) => {
-            if (errorMsg) {
-              confrim = false
-            }
-          })
+        let confirm = true
+        const rulesItem = this.$props.rules[params.config.key];
+        if (rulesItem && rulesItem.require) {
+          confirm = await this.$refs.form.validate(
+              {fields: [params.config.key]}
+          );
         }
-        return confrim
+        return confirm
       } else {
         return true
       }
@@ -366,30 +368,22 @@ export default {
     },
 
     checkValidate() {
-      return new Promise((resolve, reject) => {
-        this.$refs.form.validate((validate, Object) => {
-          // 滚动至未填写的项目中
-          if (JSON.stringify(Object) !== '{}') {
-            this.scrollToItem(Object)
+      return new Promise(async (resolve, reject) => {
+
+        const res = await this.$refs.form.validate();
+
+        if (typeof res === 'boolean') {
+          if (res) {
+            resolve({result: true})
           }
-          resolve({result: validate, validateArray: Object})
-        })
+          resolve({result: false})
+        } else {
+          resolve({result: false})
+        }
+
       })
     },
 
-    scrollToItem(object) {
-      let firstKey = null
-      for (const key in object) {
-        if (!firstKey) {
-          firstKey = key
-        }
-      }
-      let nodeScope = this.$refs.proFormWrap
-      let dom = nodeScope.querySelector(`.form-item-${firstKey}`)
-      if (dom) {
-        dom.scrollIntoView()
-      }
-    },
 
     async onSubmit() {
       if (this.$props.rules) {
@@ -510,11 +504,6 @@ export default {
     }
   }
 
-  .pro-form-item-content {
-    /deep/ .el-form-item__content {
-      line-height: inherit !important;
-    }
-  }
 
   .form-skeleton-wrap {
     width: 100%;
@@ -525,7 +514,7 @@ export default {
     justify-content: flex-start;
   }
 
-  /deep/ .el-form {
+  /deep/ .t-form {
     width: 100%;
     height: auto;
     display: flex;
@@ -534,11 +523,15 @@ export default {
     justify-content: flex-start;
   }
 
-  /deep/ .el-form-item {
+  /deep/ .t-form-item {
     width: 100%;
   }
 
-  /deep/ .el-form-item__content {
+  /deep/ .t-form__label--top {
+    margin-top: var(--margin-4);
+  }
+
+  /deep/ .t-form__controls {
     width: 100% !important;
     box-sizing: border-box;
     margin-left: 0 !important;
@@ -588,6 +581,8 @@ export default {
     flex-flow: row wrap;
     display: inline-block;
     justify-content: flex-start;
+    box-sizing: border-box;
+    padding-left: var(--padding-4);
 
   }
 

package/packages/components/proPageTable/oaProTableSearch/oa_pro-table-search.vue

@@ -45,7 +45,7 @@
       <!--      </el-button>-->
     </searchHeaderVue>
     <div v-show="proScreenCardShow" class="search-mid-content">
-      <el-card class="box-card">
+      <t-card  class="box-card">
         <div class="box-card-title">
           <span class="tips-text">筛选条件</span>
 
@@ -80,7 +80,7 @@
             :config="footerHandleConfig"
             :size="`mini`"
         ></baseButtonHandle>
-      </el-card>
+      </t-card>
     </div>
 
     <!-- 高级筛选的弹框 -->

package/packages/components/proPageTable/oaProTableSearch/oa_pro_screen.vue

@@ -3,19 +3,22 @@
     <span class="tips-text">筛选条件</span>
     <div class="screen-item-content" ref="screenItemContent">
       <oa_pro_screen_itemVue
-        :item="item"
-        :key="index"
-        ref="oaProScreenItemVue"
-        :config="proScreenConfig"
-        v-for="(item, index) in proScreenList"
-        @deleteProscreenItem="deleteProscreenItem(index)"
-        :configIndex="item.configIndex < 0 ? null : item.configIndex"
+          :item="item"
+          :key="index"
+          ref="oaProScreenItemVue"
+          :config="proScreenConfig"
+          v-for="(item, index) in proScreenList"
+          @deleteProscreenItem="deleteProscreenItem(index)"
+          :configIndex="item.configIndex < 0 ? null : item.configIndex"
       ></oa_pro_screen_itemVue>
     </div>
     <div class="screen-handle-wrap">
-      <el-button type="info" size="small" @click="insertDefaultItem">
-        <i class="el-icon-plus"></i>
-        添加筛选条件</el-button
+      <base-button type="info" size="small" @click="insertDefaultItem">
+        <template #icon>
+          <plus-icon></plus-icon>
+        </template>
+        添加筛选条件
+      </base-button
       >
     </div>
   </div>
@@ -23,6 +26,8 @@
 
 <script>
 import oa_pro_screen_itemVue from "./oa_pro_screen_item.vue";
+import {PlusIcon} from "tdesign-icons-vue"
+
 export default {
   data() {
     return {};
@@ -31,6 +36,7 @@ export default {
     this.init();
   },
   components: {
+    PlusIcon,
     oa_pro_screen_itemVue,
   },
   props: {
@@ -63,10 +69,12 @@ export default {
   height: auto;
   max-height: 100%;
   background: var(--bg-white);
+
   .tips-text {
     color: var(--font-color-d);
     font-size: var(--font-size-base);
   }
+
   .screen-item-content {
     width: 100%;
     height: auto;
@@ -74,6 +82,7 @@ export default {
     margin-top: var(--margin-5);
     max-height: calc(250px - 70px);
   }
+
   .screen-handle-wrap {
     width: 100%;
     height: 42px;