11

src/components/byForm/index.vue

@@ -3,42 +3,28 @@
     <el-form :model="formData" :label-width="formOption.labelWidth" :inline="formOption.inline || false" :rules="rules"
              :labelPosition="formOption.labelPosition || 'top'" ref="byForm" :disabled="formOption.disabled || false">
       <template v-for="i in formConfig" :key="i.model">
-        <div v-if="i.type == 'title'" class="form-title">
-          {{ i.title }}
-        </div>
-        <el-form-item :label="i.label" :prop="i.prop" v-if="i.isShow || i.isShow == undefined && i.type" :style="
-            i.type == 'title'
-              ? 'width:100%;display:none'
-              : i.itemWidth
-              ? 'width:' + i.itemWidth + '%'
-              : formOption.itemWidth
-              ? 'width:' + formOption.itemWidth + '%'
-              : '100%'
-          " :class="i.type == 'json' ? (i.isHide ? 'by-form-json dn' : 'by-form-json') : i.isHide ? 'dn' : ''">
-          <template #label>
-            <el-popover placement="top" trigger="hover" :width="i.tipWidth" v-if="i.isTip">
-              <template #reference>
-                <span style="color:red">
-                  {{ i.label }}
-                </span>
-              </template>
-              <div v-html="i.tipHtml"></div>
-            </el-popover>
-            <span v-else> {{ i.label }}</span>
-          </template>
+        <el-form-item :label="i.label" :prop="i.prop" v-if="i.isShow || (i.isShow == undefined && i.type)" :style="
+          i.type == 'title'
+            ? 'width:100%'
+            : i.itemWidth
+            ? 'width:' + i.itemWidth + '%'
+            : formOption.itemWidth
+            ? 'width:' + formOption.itemWidth + '%'
+            : '100%'
+        " :class="i.isHide ? 'dn' : ''">
           <el-input v-if="i.type == 'input'" v-model="formData[i.prop]" :placeholder="i.placeholder || $t('common.pleaseEnter')"
                     @input="(e) => commonsEmit(e, i)" @change="(e) => commonsEmitChange(e, i)" :type="i.itemType ? i.itemType : 'text'"
                     :disabled="i.disabled ? i.disabled : false" :max="i.max" :min="i.min" :maxlength="i.maxlength"
                     :readonly="i.readonly ? i.readonly : false" :style="i.style" />
           <el-input v-if="i.type == 'selectInput'" v-model="formData[i.prop]" :placeholder="i.placeholder || $t('common.pleaseEnter')"
-                    @input="(e) => commonsEmit(e, i)" :type="'number'" :precision="4" :disabled="i.disabled ? i.disabled : false" :max="i.max"
-                    :min="i.min" :maxlength="i.maxlength" :readonly="i.readonly ? i.readonly : false" :clearable="i.clearable ? i.clearable : false"
-                    onmousewheel="return false;">
+                    @input="(e) => commonsEmit(e, i)" :type="i.itemType ? i.itemType : 'text'" :disabled="i.disabled ? i.disabled : false"
+                    :max="i.max" :min="i.min" :maxlength="i.maxlength" :readonly="i.readonly ? i.readonly : false">
             <template #prepend>
               <el-select v-model="formData[i.selectProp]" :placeholder="i.selectPlaceholder || $t('common.pleaseSelect')"
-                         @change="(e) => commonsEmit(e, i)" :disabled="i.disabled || i.selectDisabled ? true : false"
-                         :readonly="i.readonly ? i.readonly : false" style="width: 80px">
-                <el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id"> </el-option>
+                         @change="(e) => commonsEmit(e, i)" :disabled="i.disabled ? i.disabled : false" :readonly="i.readonly ? i.readonly : false"
+                         style="width: 80px">
+                <el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id">
+                </el-option>
               </el-select>
             </template>
           </el-input>
@@ -46,14 +32,15 @@
                      :placeholder="i.placeholder || $t('common.pleaseSelect')" @change="(e) => commonsEmit(e, i)"
                      :disabled="i.disabled ? i.disabled : false" :clearable="i.clearable ? i.clearable : false"
                      :filterable="i.filterable ? true : false" :style="i.style" :readonly="i.readonly ? i.readonly : false">
-            <el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id"> </el-option>
+            <el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id">
+            </el-option>
           </el-select>
           <el-tree-select v-model="formData[i.prop]" v-else-if="i.type == 'treeSelect'" :data="i.data" :readonly="i.readonly ? i.readonly : false"
                           :props="{
-              value: i.propsTreeValue || 'id',
-              label: i.propsTreeLabel || 'label',
-              children: i.propsTreeChildren || 'children',
-            }" value-key="id" :placeholder="i.placeholder || $t('common.pleaseSelect')" :disabled="i.disabled ? i.disabled : false" check-strictly
+            value: i.propsTreeValue || 'id',
+            label: i.propsTreeLabel || 'label',
+            children: i.propsTreeChildren || 'children',
+          }" value-key="id" :placeholder="i.placeholder || $t('common.pleaseSelect')" :disabled="i.disabled ? i.disabled : false" check-strictly
                           :style="i.style" />
           <el-date-picker v-model="formData[i.prop]" :readonly="i.readonly ? i.readonly : false" v-else-if="i.type == 'date'" :type="i.itemType"
                           :placeholder="i.placeholder || $t('common.pleaseSelectTime')" @change="(e) => commonsEmit(e, i)"
@@ -67,8 +54,8 @@
               {{ j.name || j.label }}
             </el-checkbox>
           </el-checkbox-group>
-          <el-radio-group v-else-if="i.type == 'radio'" v-model="formData[i.prop]" @change="(e) => commonsEmit(e, i)"
-                          :readonly="i.readonly ? i.readonly : false" :disabled="i.disabled ? i.disabled : false">
+          <el-radio-group v-else-if="i.type == 'radio'" v-model="formData[i.prop]" :readonly="i.readonly ? i.readonly : false"
+                          :disabled="i.disabled ? i.disabled : false">
             <el-radio :border="i.border ? i.border : false" v-for="j in i.data" :key="j.id || j.value" :label="j.id || j.value" name="type">
               {{ j.name || j.label }}
             </el-radio>
@@ -86,10 +73,12 @@
                        :placeholder="i.placeholder || $t('common.pleaseSelect')" @change="(e) => commonsEmit(e, i)"
                        :disabled="i.disabled ? i.disabled : false" :style="i.style">
           </el-cascader>
-          <!-- <div class="form-title" v-else-if="i.type == 'title'">
+          <div class="form-title" v-else-if="i.type == 'title'">
             {{ i.title }}
-          </div> -->
-          <slot :name="i.slotName" v-else-if="i.type == 'slot'"> {{ i.slotName }}插槽占位符 </slot>
+          </div>
+          <slot :name="i.slotName" v-else-if="i.type == 'slot'">
+            {{ i.slotName }}插槽占位符
+          </slot>
           <div class="upload" v-else-if="i.type == 'upload'">
             <el-upload v-model="formData[i.prop]" action="https://winfaster.obs.cn-south-1.myhuaweicloud.com" :data="uploadData"
                        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="handleBeforeUpload">
@@ -113,11 +102,13 @@
               </el-table-column>
             </el-table>
           </div>
-          <div v-else-if="i.type == 'json'">
-            <byForm :formConfig="i.json" :formOption="formOption" v-model="formData[i.prop]" ref="byform" :rules="rules"> </byForm>
+          <div v-else-if="i.type == 'json'" class="by-form-json">
+            <byForm :formConfig="i.json" :formOption="formOption" v-model="formData[i.prop]" ref="byform" :rules="rules">
+            </byForm>
           </div>
         </el-form-item>
       </template>
+
     </el-form>
   </div>
 </template>
@@ -126,7 +117,7 @@ export default {
   name: "byForm",
 };
 </script>
-<script setup>
+<script  setup>
 import { set } from "@vueuse/shared";
 import { reactive } from "vue";
 defineProps({
@@ -151,7 +142,6 @@ defineProps({
     default: false,
   },
 });
-
 const formTableChange = (e, scope, column) => {
   if (column.fn) {
     column.fn(e, scope);
@@ -180,10 +170,6 @@ const handleRemove = (file) => {
   fileListCopy.value.splice(index, 1);
 };
 
-const getLegacyData = (i) => {
-  console.log(i);
-};
-
 const handleBeforeUpload = async (file) => {
   const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
   uploadData.value = res.uploadBody;
@@ -202,7 +188,6 @@ const emit = defineEmits(["update:modelValue"]);
 const formData = computed(() => {
   return proxy.modelValue;
 });
-
 const formDataReset = ref({ ...proxy.modelValue });
 const commonsEmit = (prop, item) => {
   if (item.type == "input" && item.itemType == "number") {
@@ -219,7 +204,6 @@ const commonsEmitChange = (prop, item) => {
     formData.value[item.prop] = prop.trim();
   }
   if (item.fn) {
-    console.log(proxy.formConfig);
     item.fn(prop);
   }
   emit("update:modelValue", formData.value);
@@ -383,27 +367,17 @@ loadInit();
 </script>
 
 <style>
-.box-item {
-  background-color: red;
-}
 .form-title {
   font-size: 14px;
   font-weight: bold;
-  margin: 15px 0;
+  margin-top: 22px;
   color: #333333;
 }
 .by-form .el-form--inline .el-form-item {
   margin-right: 0px;
-
+  padding-right: 32px;
   box-sizing: border-box;
 }
-.by-form .el-form--inline > .el-form-item {
-  padding: 0 10px;
-}
-
-/* .el-form--inline.el-form--label-top{
-  justify-content: space-between;
-} */
 
 .dn {
   display: none !important;
@@ -411,8 +385,4 @@ loadInit();
 .by-form-json .by-form .el-form .el-form-item {
   margin-bottom: 18px;
 }
-
-.by-form-json {
-  padding: 0px !important;
-}
-</style>
+</style>