lxf 1 年之前
父节点
当前提交
bc1c473ca5
共有 1 个文件被更改,包括 127 次插入44 次删除
  1. 127 44
      src/components/byForm/index.vue

+ 127 - 44
src/components/byForm/index.vue

@@ -7,7 +7,8 @@
       :rules="rules"
       :labelPosition="formOption.labelPosition || 'top'"
       ref="byForm"
-      :disabled="formOption.disabled || false">
+      :disabled="formOption.disabled || false"
+    >
       <el-form-item
         :label="i.label"
         v-for="i in formConfig"
@@ -15,9 +16,16 @@
         :prop="i.prop"
         v-show="i.isShow || i.isShow == undefined"
         :style="
-          i.type == 'title' ? 'width:100%;' : i.itemWidth ? 'width:' + i.itemWidth + '%' : formOption.itemWidth ? 'width:' + formOption.itemWidth + '%' : '100%'
+          i.type == 'title'
+            ? 'width:100%'
+            : i.itemWidth
+            ? 'width:' + i.itemWidth + '%'
+            : formOption.itemWidth
+            ? 'width:' + formOption.itemWidth + '%'
+            : '100%'
         "
-        :class="i.isHide ? 'dn' : '' + i.type == 'title' ? ' title-bold' : ''">
+        :class="i.isHide ? 'dn' : ''"
+      >
         <el-input
           v-if="i.type == 'input'"
           v-model="formData[i.prop]"
@@ -30,7 +38,8 @@
           :min="i.min"
           :maxlength="i.maxlength"
           :readonly="i.readonly ? i.readonly : false"
-          :style="i.style" />
+          :style="i.style"
+        />
         <el-input
           v-if="i.type == 'selectInput'"
           v-model="formData[i.prop]"
@@ -41,7 +50,8 @@
           :max="i.max"
           :min="i.min"
           :maxlength="i.maxlength"
-          :readonly="i.readonly ? i.readonly : false">
+          :readonly="i.readonly ? i.readonly : false"
+        >
           <template #prepend>
             <el-select
               v-model="formData[i.selectProp]"
@@ -49,8 +59,15 @@
               @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>
+              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>
@@ -63,8 +80,15 @@
           :disabled="i.disabled ? i.disabled : 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>
+          :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-select>
         <el-tree-select
           v-model="formData[i.prop]"
@@ -80,7 +104,8 @@
           :placeholder="i.placeholder || '请选择'"
           :disabled="i.disabled ? i.disabled : false"
           check-strictly
-          :style="i.style" />
+          :style="i.style"
+        />
         <el-date-picker
           v-model="formData[i.prop]"
           :readonly="i.readonly ? i.readonly : false"
@@ -90,18 +115,26 @@
           @change="(e) => commonsEmit(e, i)"
           :disabled="i.disabled ? i.disabled : false"
           :format="i.format ? i.format : dateFormatInit(i.itemType)"
-          :value-format="i.format ? i.format : dateFormatInit(i.itemType)" />
+          :value-format="i.format ? i.format : dateFormatInit(i.itemType)"
+        />
         <el-switch
           :disabled="i.disabled ? i.disabled : false"
           v-else-if="i.type == 'switch'"
           :readonly="i.readonly ? i.readonly : false"
-          v-model="formData[i.prop]" />
+          v-model="formData[i.prop]"
+        />
         <el-checkbox-group
           v-else-if="i.type == 'checkbox'"
           v-model="formData[i.prop]"
           :readonly="i.readonly ? i.readonly : false"
-          :disabled="i.disabled ? i.disabled : false">
-          <el-checkbox v-for="j in i.data" :key="j.id || j.value" :label="j.id || j.value" name="type">
+          :disabled="i.disabled ? i.disabled : false"
+        >
+          <el-checkbox
+            v-for="j in i.data"
+            :key="j.id || j.value"
+            :label="j.id || j.value"
+            name="type"
+          >
             {{ j.name || j.label }}
           </el-checkbox>
         </el-checkbox-group>
@@ -109,8 +142,15 @@
           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">
+          :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>
         </el-radio-group>
@@ -126,14 +166,16 @@
           :step="i.step ? i.step : 1"
           :precision="i.precision !== '' ? i.precision : 2"
           :controls="i.controls === false ? false : true"
-          :style="i.style">
+          :style="i.style"
+        >
         </el-input-number>
         <el-tree
           v-else-if="i.type == 'tree'"
           :data="i.data"
           :props="i.props"
           :readonly="i.readonly ? i.readonly : false"
-          :show-checkbox="i.showCheckbox || true">
+          :show-checkbox="i.showCheckbox || true"
+        >
         </el-tree>
         <el-cascader
           v-else-if="i.type == 'cascader'"
@@ -143,9 +185,15 @@
           :placeholder="i.placeholder || '请选择'"
           @change="(e) => commonsEmit(e, i)"
           :disabled="i.disabled ? i.disabled : false"
-          :style="i.style">
+          :style="i.style"
+        >
         </el-cascader>
-        <slot :name="i.slotName" v-else-if="i.type == 'slot'"> {{ i.slotName }}插槽占位符 </slot>
+        <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 class="upload" v-else-if="i.type == 'upload'">
           <el-upload
             v-model="formData[i.prop]"
@@ -154,22 +202,39 @@
             list-type="picture-card"
             :on-remove="handleRemove"
             :on-success="handleSuccess"
-            :before-upload="handleBeforeUpload">
+            :before-upload="handleBeforeUpload"
+          >
             <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
             <el-icon><Plus /></el-icon>
           </el-upload>
         </div>
-        <div v-else-if="i.type == 'table'" class="by-form-table" style="width: 100%">
+        <div
+          v-else-if="i.type == 'table'"
+          class="by-form-table"
+          style="width: 100%"
+        >
           <el-table :data="formData[i.prop]" style="width: 100%">
-            <el-table-column :prop="j.prop" :label="j.label" :width="i.width" v-for="(j, jindex) in i.column">
+            <el-table-column
+              :prop="j.prop"
+              :label="j.label"
+              :width="i.width"
+              v-for="(j, jindex) in i.column"
+            >
               <template #default="scope" v-if="j.type">
                 <component
                   @change="(e) => formTableChange(e, scope, j)"
                   v-model="scope.row[j.prop]"
                   :is="formTableObj[j.type]"
                   :placeholder="j.placeholder || '请输入'"
-                  :type="j.type == 'number' ? 'number' : 'text'">
-                  <el-option :label="n.title || n.name || n.label" :value="n.id || n.value" v-for="n in j.data" :key="n.id" v-if="j.type == 'select'">
+                  :type="j.type == 'number' ? 'number' : 'text'"
+                >
+                  <el-option
+                    :label="n.title || n.name || n.label"
+                    :value="n.id || n.value"
+                    v-for="n in j.data"
+                    :key="n.id"
+                    v-if="j.type == 'select'"
+                  >
                   </el-option>
                 </component>
               </template>
@@ -177,7 +242,14 @@
           </el-table>
         </div>
         <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>
+          <byForm
+            :formConfig="i.json"
+            :formOption="formOption"
+            v-model="formData[i.prop]"
+            ref="byform"
+            :rules="rules"
+          >
+          </byForm>
         </div>
       </el-form-item>
     </el-form>
@@ -188,7 +260,7 @@ export default {
   name: "byForm",
 };
 </script>
-<script setup>
+<script  setup>
 import { set } from "@vueuse/shared";
 import { reactive } from "vue";
 defineProps({
@@ -235,7 +307,9 @@ const handleSuccess = (res, file, files) => {
 };
 
 const handleRemove = (file) => {
-  const index = fileListCopy.value.findIndex((x) => x.uid === file.uid || x.id === file.id);
+  const index = fileListCopy.value.findIndex(
+    (x) => x.uid === file.uid || x.id === file.id
+  );
   fileListCopy.value.splice(index, 1);
 };
 
@@ -315,9 +389,16 @@ const commonRecursive = (arr, labelKey, labelVal, childrenName) => {
       arr[i].children = arr[i][childrenName];
     }
     arr[i].checked = false;
-    typeof arr[i][labelVal] == String ? (arr[i].key = arr[i][labelVal]) : (arr[i].key = JSON.stringify(arr[i][labelVal]));
+    typeof arr[i][labelVal] == String
+      ? (arr[i].key = arr[i][labelVal])
+      : (arr[i].key = JSON.stringify(arr[i][labelVal]));
     if (childrenName) {
-      this.commonRecursive(arr[i][childrenName], labelKey, labelVal, childrenName);
+      this.commonRecursive(
+        arr[i][childrenName],
+        labelKey,
+        labelVal,
+        childrenName
+      );
     }
   }
 };
@@ -332,7 +413,12 @@ const commonGetdata = (isLoad, i) => {
     }
     proxy.formConfig[i].data = getFormat(isLoad.resUrl, message);
     if (isLoad.labelKey) {
-      commonRecursive(proxy.formConfig[i].data, isLoad.labelKey, isLoad.labelVal, isLoad.childrenName);
+      commonRecursive(
+        proxy.formConfig[i].data,
+        isLoad.labelKey,
+        isLoad.labelVal,
+        isLoad.childrenName
+      );
     }
     console.log(proxy.formConfig[i].data);
   });
@@ -341,7 +427,9 @@ const commonGetdata = (isLoad, i) => {
 //根据resurl获取数据
 const getFormat = (formatStr, props) => {
   if (!formatStr) return props;
-  return formatStr.split(".").reduce((total, cur) => (!total ? "" : total[cur]), props);
+  return formatStr
+    .split(".")
+    .reduce((total, cur) => (!total ? "" : total[cur]), props);
 };
 
 //初始化所有表单
@@ -418,6 +506,12 @@ loadInit();
 </script>
 
 <style>
+.form-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-top: 22px;
+  color: #333333;
+}
 .by-form .el-form--inline .el-form-item {
   margin-right: 0px;
   padding-right: 32px;
@@ -430,15 +524,4 @@ loadInit();
 .by-form-json .by-form .el-form .el-form-item {
   margin-bottom: 18px;
 }
-</style>
-
-<style lang="scss" scoped>
-::v-deep(.title-bold) {
-  margin-bottom: 0px !important;
-  margin-top: 16px !important;
-  .el-form-item__label {
-    font-weight: 700 !important;
-    color: black !important;
-  }
-}
-</style>
+</style>