meixioacomponent 0.4.2 → 0.4.6

package/packages/components/proForm/proForm/{pro_form_item.vue → proFormItem/pro_form_item.vue}

@@ -8,9 +8,9 @@
       'form-item-wrap': true,
     }"
   >
-    <div class="item-content" v-if="!typeOftemplate && !isEdit">
+    <div class="item-content" v-if="!typeOftemplate" v-show="!isEdit">
       <p
-        v-if="!spContentType"
+        v-if="!spContentType && selectMounted"
         class="content-value"
         @click="handleClick('content')"
         :class="[`${config.click ? 'click' : config.color}`]"
@@ -71,7 +71,12 @@
       ></base-icon>
     </div>
 
-    <div class="item-handle-wrap" :class="[`${config.type}`]" v-else>
+    <div
+      class="item-handle-wrap"
+      :class="[`${config.type}`]"
+      v-if="!typeOftemplate"
+      v-show="isEdit"
+    >
       <!-- input输入框 -->
       <el-input
         ref="target"
@@ -83,65 +88,62 @@
         style="width: 100%; height: 100%;"
       ></el-input>
       <!-- 数字类型无小数 -->
-      <el-input-number
+      <BaseNumberInput
+        v-else-if="config.type == 'number'"
         ref="target"
         :size="size"
-        :controls="false"
-        v-model.number="module"
+        v-model="module"
+        :unit="config.unit"
         :disabled="isDisabled"
         :maxlength="config.maxlength"
-        v-else-if="config.type == 'number'"
-        style="width: 100%; height: 100%;"
-      ></el-input-number>
+      ></BaseNumberInput>
+
       <!--数字类型两位小数  -->
-      <el-input-number
-        :size="size"
+
+      <BaseNumberInput
+        v-else-if="config.type == 'number2'"
         ref="target"
+        :size="size"
+        v-model="module"
         :precision="2"
-        :controls="false"
-        v-model.number="module"
+        :unit="config.unit"
         :disabled="isDisabled"
         :maxlength="config.maxlength"
-        style="width: 100%; height: 100%;"
-        v-else-if="config.type == 'number2'"
-      ></el-input-number>
+      ></BaseNumberInput>
+
       <!-- select选择器 -->
-      <el-select
+
+      <baseStoreSelect
         :size="size"
         ref="target"
         v-model="module"
-        placeholder="请选择"
         :multiple="multiple"
-        :filterable="true"
-        :loading="selectLoading"
         :disabled="isDisabled"
-        @visible-change="visibleChange"
-        style="width: 100%; height: 100%;"
-        v-else-if="config.type == 'select' && selectStore"
+        :params="config.params"
+        :useStore="config.useStore"
+        v-else-if="config.type == 'select'"
+        @hook:mounted="selectMounted = true"
         :multipleLimit="config.multipleLimit"
-      >
-        <el-option
-          v-for="item in selectData"
-          :key="item.value"
-          :label="item[`${selectConfig.label}`]"
-          :value="item[`${selectConfig.value}`]"
-        ></el-option>
-      </el-select>
-      <!-- 时间选择器 -->
+      ></baseStoreSelect>
+
       <el-date-picker
-        type="date"
         align="right"
         v-model="module"
         :size="size"
         ref="target"
+        :type="datePickType"
         placeholder="选择日期"
-        value-format="yyyy-MM-dd HH:mm:ss"
         :disabled="isDisabled"
+        v-else-if="isDatePick"
+        value-format="timestamp"
         :prefix-icon="`el-icon-time`"
+        :rangeSeparator="datePickPlace[1]"
+        :endPlaceholder="datePickPlace[2]"
+        :startPlaceholder="datePickPlace[0]"
         style="width: 100%; height: 100%;"
-        v-else-if="config.type == 'time'"
         :picker-options="config.pickerOptions"
       ></el-date-picker>
+
       <!-- 单选框 -->
       <el-radio-group
         v-model="module"
@@ -189,10 +191,19 @@
         v-if="config.type == 'textarea'"
         :show-word-limit="config.maxlength ? true : false"
       ></el-input>
-      <!-- 插槽 -->
-      <slot name="template" v-else-if="config.type == 'template'"></slot>
+    </div>
+    <!-- 插槽 -->
+
+    <div
+      class="item-handle-wrap"
+      :class="[`${config.type}`]"
+      v-else-if="typeOftemplate"
+    >
+      <slot name="template" v-if="config.type == 'template'"></slot>
       <slot name="area" v-else-if="config.type == 'area'"></slot>
+      <slot name="numberUnit" v-else-if="config.type == 'numberUnit'"></slot>
     </div>
+
     <!-- 确定的按钮 -->
     <div class="bottom-handle-wrap" v-show="isEdit && !form">
       <el-button
@@ -216,13 +227,17 @@
 </template>
 
 <script>
+import BaseNumberInput from '../../../base/baseNumberInput/index.vue'
+import baseStoreSelect from '../../../base/baseStoreSelect/index.vue'
 //
-import componentConfig from '../../../config/componentConfig'
+import { FilterTime } from '../../../../utils/utils'
 export default {
+  name: 'baseFormItem',
   data() {
     return {
       isEdit: false,
       oldValue: null,
+      selectMounted: false,
     }
   },
   created() {
@@ -248,7 +263,6 @@ export default {
     config: {
       type: Object,
     },
-
     form: {
       type: Boolean,
       default: false,
@@ -257,19 +271,15 @@ export default {
       type: String,
       default: `right`,
     },
-
     value: {},
-
     size: {
       type: String,
       default: 'small',
     },
-
     width: {
       type: String,
     },
   },
-
   computed: {
     isDisabled() {
       const { config, disabled } = this.$props
@@ -278,20 +288,6 @@ export default {
     multiple() {
       return this.$props.config.multipleLimit ? true : false
     },
-    selectLoading() {
-      return this.selectStore?.getLoading()
-    },
-    selectStore() {
-      return componentConfig.selectStore.getStore(this.$props.config.useStore)
-    },
-
-    selectData() {
-      return this.selectStore.getData()
-    },
-
-    selectConfig() {
-      return this.selectStore.getConfig()
-    },
 
     spContentType() {
       let configType = this.$props.config.type
@@ -305,34 +301,28 @@ export default {
       }
       return false
     },
-
     typeOftemplate() {
       const { type } = this.$props.config
-
-      if (type == 'template' || type == 'area') {
+      if (type == 'template' || type == 'area' || type == 'numberUnit') {
         return true
       }
-
       return false
     },
-
     contentValue() {
       let type = this.$props.config.type
       switch (type) {
         case 'input':
         case 'textarea':
           return this.module
-
         case 'select':
-          let list = this.selectData
-          const selectConfig = this.selectConfig
-          if (list.length > 0) {
+          let list = this.$refs.target.getSelectData()
+          const selectConfig = this.$refs.target.getSelectConfig()
+          if (list) {
             if (!this.multiple) {
-              if (this.module) {
+              if (this.module && list.length > 0) {
                 let index = list.findIndex((item) => {
                   return item[`${selectConfig.value}`] == this.module
                 })
-
                 return list[index][`${selectConfig.label}`]
               } else {
                 return '暂无数据'
@@ -343,7 +333,6 @@ export default {
                 let index = list.findIndex((citem) => {
                   return citem[`${selectConfig.value}`] == item
                 })
-
                 text += text
                   ? ` / ${list[index][`${selectConfig.label}`]}`
                   : list[index][`${selectConfig.label}`]
@@ -351,52 +340,73 @@ export default {
               return text
             }
           } else {
-            this.loadSelectData()
+            this.$refs.target.loadSelectData()
             return this.$props.config.value
           }
 
-        // case "time":
-        //   if (this.module) {
-        //     let config = this.$props.config;
-        //     let format = config.format ? config.format : "YYYY-MM-DD";
-        //     return FilterTime(this.module, format);
-        //   } else {
-        //     return "暂无时间";
-        //   }
-
         default:
+          if (this.isDatePick) {
+            if (this.module) {
+              return this.filterTimestamp()
+            } else {
+              return '暂无时间'
+            }
+          }
           return this.module
       }
     },
+    datePickPlace() {
+      const { datePickPlace } = this.$props.config
+      if (!datePickPlace || datePickPlace.length < 2) {
+        return ['开始日期', '至', '结束日期']
+      }
+      return datePickPlace
+    },
     type() {
       return this.$props.config.type
     },
-
     checkMax() {
       let max = this.$props.config.max
       return max ? max : this.$props.config.list.length
     },
-
     checkMin() {
       let min = this.$props.config.min
       return min < 0 || min == undefined || min == null ? 0 : min
     },
+    isDatePick() {
+      const type = this.type
+      return type == 'time' || type == 'datetime' || type == 'daterange'
+    },
+    datePickType() {
+      const type = this.type
+      switch (type) {
+        case 'time':
+          return 'date'
+        case 'datetime':
+          return 'datetime'
+        case 'daterange':
+          return 'daterange'
+        default:
+          break
+      }
+    },
+
     module: {
       get() {
-        let type = this.$props.config.type
-        if (type == 'select') {
-          if (this.selectData.length <= 0) {
-            this.loadSelectData()
+        const value = this.$props.value
+        if (this.isDatePick) {
+          const type = this.type
+          if (type == 'time' || type == 'datetime') {
+            return this.returnTimestamp(value)
+          } else if (type == 'daterange') {
+            const _value = this.returnDaterangeTimestamp(value)
+            return _value
           }
         }
-
-        return this.$props.value
+        return value
       },
       set(val) {
         this.$emit('input', val)
-        if (this.$props.disableWatcher) {
-          this.triggerDisable(val)
-        }
       },
     },
   },
@@ -407,6 +417,10 @@ export default {
       } else {
         this.isEdit = false
       }
+      const type = this.$props.config.type
+      if (type != 'select') {
+        this.selectMounted = true
+      }
     },
     handleContent() {
       if (this.$props.config.click) {
@@ -449,14 +463,7 @@ export default {
     handleConfirm() {
       this.isEdit = false
     },
-    loadSelectData() {
-      this.selectStore.loadData()
-    },
-    visibleChange(visible) {
-      if (!visible) return
-      if (this.selectData.length > 0) return
-      this.loadSelectData()
-    },
+
     triggerDisable(val) {
       let effects = this.$props.disableWatcher.effects
       effects.forEach((item) => {
@@ -466,16 +473,56 @@ export default {
           result: item.fn(val),
         }
 
-        console.log(val)
         this.$emit('disableWatcherResult', obj)
       })
     },
+
+    // 返回 *1000的时间戳
+    returnTimestamp(value) {
+      if (value) {
+        if (value.toString().length <= 10) {
+          return value * 1000
+        }
+      }
+      return value
+    },
+
+    // 返回daterange的时间戳
+    returnDaterangeTimestamp(timestampArray) {
+      if (timestampArray instanceof Array) {
+        return timestampArray.map((item) => {
+          return this.returnTimestamp(item)
+        })
+      }
+      return timestampArray
+    },
+
+    // 转换时间戳
+    filterTimestamp() {
+      const config = this.$props.config
+      const type = this.type
+      let format = config.format ? config.format : 'YYYY-MM-DD HH:mm:ss'
+      if (type != 'daterange') {
+        return FilterTime(this.module, format)
+      } else {
+        let timeStr = FilterTime(this.module[0], format)
+        timeStr += ` - ${this.datePickPlace[1]} - `
+        timeStr += FilterTime(this.module[1], format)
+      }
+    },
   },
   watch: {
     form(newVal, oldVal) {
       this.init()
     },
+
+    module(newVal, oldVal) {
+      if (this.$props.disableWatcher) {
+        this.triggerDisable(newVal)
+      }
+    },
   },
+  components: { BaseNumberInput, baseStoreSelect },
 }
 </script>
 
@@ -606,6 +653,10 @@ export default {
     }
   }
 
+  .radio {
+    background-color: var(--color-table-header) !important;
+  }
+
   .content-value {
     color: var(--font-color-ds) !important;
   }
@@ -635,4 +686,15 @@ export default {
     min-height: 24px;
   }
 }
+
+/deep/ .el-textarea.is-disabled .el-textarea__inner {
+  background-color: var(--color-table-header) !important;
+  &:hover {
+    border-color: transparent !important;
+  }
+}
+
+/deep/ .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
+  background-color: var(--color-table-header) !important;
+}
 </style>

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

@@ -11,7 +11,7 @@
       <div
         :key="item.key"
         v-for="item in module"
-        v-show="!item.renderHide"
+        v-show="!item.renderHide && !item.hide"
         class="pro-form-item-content"
         :class="[`chunk-${chunkLength}`]"
         :style="{
@@ -21,9 +21,12 @@
         <el-form-item
           :prop="item.key"
           :label="item.label"
+          v-if="formType != 'template'"
           :class="[`${flexClass}`, size]"
         >
-          <span slot="label" class="item-label">{{ item.label }}</span>
+          <span slot="label" class="item-label lable-text">
+            {{ item.label }}
+          </span>
 
           <template>
             <pro_form_itemVue
@@ -43,10 +46,10 @@
               <template slot="template" v-if="item.type == 'template'">
                 <slot :name="`form-${item.key}`" :scope="module"></slot>
               </template>
-              <template slot="area" v-if="item.type == 'area'">
+              <template slot="area" v-else-if="item.type == 'area'">
                 <baseAreaVue
                   v-model="item.value"
-                  :disable="item.disabled"
+                  :disable="item.disabled || disabled"
                   :ref="`area-${item.key}`"
                   :style="{ width: `100%` }"
                   :class="[`form-item-${item.key}`]"
@@ -57,17 +60,36 @@
                   "
                 ></baseAreaVue>
               </template>
+
+              <template slot="numberUnit" v-else-if="item.type == 'numberUnit'">
+                <BaseNumberInput
+                  :select="true"
+                  :size="size"
+                  v-model="item.value"
+                  :maxlength="item.maxlength"
+                  :select-store="item.useStore"
+                  :disabled="item.disabled || disabled"
+                  @selectChange="selectChange($event, item.linkKey)"
+                  :link-value="findFormItemOfKey(item.linkKey).value"
+                ></BaseNumberInput>
+              </template>
             </pro_form_itemVue>
 
             <baseUploadVue
               v-model="item.value"
               :max="formConfig.max"
+              :disabled="disabled"
+              @onDragEnd="onDragEnd"
               v-if="formType == `upload`"
               :uploadPath="item.uploadPath"
               :class="[`form-item-${item.key}`]"
             ></baseUploadVue>
           </template>
         </el-form-item>
+
+        <template v-if="formType == 'template'">
+          <slot :name="formConfig.key"></slot>
+        </template>
       </div>
     </el-form>
     <baseButtonHandleVue
@@ -93,18 +115,18 @@
 </template>
 
 <script>
-import pro_form_itemVue from './pro_form_item.vue'
+import pro_form_itemVue from './proFormItem/pro_form_item.vue'
 import baseAreaVue from '../../base/baseArea/baseArea.vue'
 import baseUploadVue from '../../base/baseUpload/baseUpload.vue'
 import pro_formItem_skeletonVue from './pro_form-item_skeleton.vue'
 import baseButtonHandleVue from '../../base/baseButtonHandle/baseButtonHandle.vue'
 //
 import { ArrayChunk } from '../../../utils/utils'
+import BaseNumberInput from '../../base/baseNumberInput/index.vue'
 export default {
   name: 'baseForm',
   data() {
     return {
-      loading: true,
       handleConfig: [],
       chunkLength: null,
       formItemWidth: null,
@@ -178,12 +200,18 @@ export default {
       default: false,
     },
 
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
     footButtonText: { type: Array, default: () => ['取消', '确定'] },
   },
   components: {
     baseAreaVue,
     baseUploadVue,
     pro_form_itemVue,
+    BaseNumberInput,
     baseButtonHandleVue,
     pro_formItem_skeletonVue,
   },
@@ -294,7 +322,6 @@ export default {
       }
     },
     submitVerifiData(params) {
-      console.log(params)
       if (this.$props.rules) {
         // element 验证单条表单修改
         let confrim = true
@@ -342,7 +369,9 @@ export default {
       }
       let nodeScope = this.$refs.proFormWrap
       let dom = nodeScope.querySelector(`.form-item-${firstKey}`)
-      dom.scrollIntoView()
+      if (dom) {
+        dom.scrollIntoView()
+      }
     },
 
     async onSubmit() {
@@ -391,6 +420,8 @@ export default {
             this.$set(formItem, 'renderHide', result)
           } else if (type == 'disable') {
             this.$set(formItem, 'disabled', result)
+          } else if (type == 'template') {
+            formItem.type = result
           }
         }
       }
@@ -400,15 +431,32 @@ export default {
       const { labelWidth } = this.$props
       this.formItemWidth = `calc(100% - ${labelWidth}) !important`
     },
-  },
-  watch: {
-    chunkLength(newVal, oldVal) {
-      if (this.loading) {
-        setTimeout(() => {
-          this.loading = false
-        }, 750)
+
+    onDragEnd() {
+      this.$emit('onDragEnd')
+    },
+
+    findFormItemOfKey(key) {
+      let index = this.module.findIndex((item) => {
+        return item.key == key
+      })
+      if (index > -1) {
+        return this.module[index]
       }
     },
+    selectChange(value, key) {
+      let item = this.findFormItemOfKey(key)
+      item.value = value
+    },
+  },
+  watch: {
+    // module: {
+    //   deep: true,
+    //   handler(newVal, oldVal) {
+    //     console.log(newVal)
+    //     // this.$refs.form.$emit('el.form.change')
+    //   },
+    // },
   },
 }
 </script>
@@ -455,8 +503,8 @@ export default {
   /deep/ .el-form-item__content {
     width: 100% !important;
     box-sizing: border-box;
-    padding-right: var(--padding-5);
     margin-left: 0px !important;
+    padding-right: calc(var(--padding-4) * 2) !important;
   }
   .flex-row {
     display: flex;
@@ -491,5 +539,11 @@ export default {
       padding-top: 0px;
     }
   }
+
+  .lable-text {
+    color: var(--form-label-color) !important;
+    font-weight: 400 !important;
+    font-size: var(--font-size-base);
+  }
 }
 </style>