welybug

解决

src/components/byForm/index.vue

@@ -1,260 +1,123 @@
 <template>
   <div class="by-form">
-    <el-form
-      :model="formData"
-      :label-width="formOption.labelWidth"
-      :inline="formOption.inline || false"
-      :rules="rules"
-      :labelPosition="formOption.labelPosition || 'top'"
-      ref="byForm"
-      :disabled="formOption.disabled || false"
-    >
-      <el-form-item
-        :label="i.label"
-        v-for="i in formConfig"
-        :key="i.model"
-        :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%'
-        "
-        :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="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.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>
-        <el-select
-          v-model="formData[i.prop]"
-          :multiple="i.multiple || false"
-          v-else-if="i.type == 'select'"
-          :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-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
-          :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)"
-          :disabled="i.disabled ? i.disabled : false"
-          :format="i.format ? i.format : dateFormatInit(i.itemType)"
-          :value-format="i.format ? i.format : dateFormatInit(i.itemType)"
-          :style="i.style"
-        />
-        <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]"
-        />
-        <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"
-          >
-            {{ j.name || j.label }}
-          </el-checkbox>
-        </el-checkbox-group>
-        <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>
-        </el-radio-group>
-        <el-input-number
-          v-else-if="i.type == 'number'"
-          v-model="formData[i.prop]"
-          :readonly="i.readonly ? i.readonly : false"
-          :placeholder="i.placeholder || $t('common.pleaseEnter')"
-          @change="(e) => commonsEmit(e, i)"
-          :disabled="i.disabled ? i.disabled : false"
-          :min="i.min ? i.min : 0"
-          :max="i.max ? i.max : 9999999999"
-          :step="i.step ? i.step : 1"
-          :precision="i.precision !== '' ? i.precision : 2"
-          :controls="i.controls === false ? false : true"
-          :style="i.style"
-          onmousewheel="return false;"
-        >
-        </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"
-        >
-        </el-tree>
-        <el-cascader
-          v-else-if="i.type == 'cascader'"
-          :options="i.data"
-          :props="i.props"
-          :readonly="i.readonly ? i.readonly : false"
-          :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'">
+    <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>
-        <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"
-          >
-            <!-- <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%"
-        >
-          <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"
-            >
-              <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 || $t('common.pleaseEnter')"
-                  :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>
+        <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>
-            </el-table-column>
-          </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>
-        </div>
-      </el-form-item>
+              <div v-html="i.tipHtml"></div>
+            </el-popover>
+            <span v-else> {{ i.label }}</span>
+          </template>
+          <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;">
+            <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>
+              </el-select>
+            </template>
+          </el-input>
+          <el-select v-model="formData[i.prop]" :multiple="i.multiple || false" v-else-if="i.type == 'select'"
+                     :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-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
+                          :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)"
+                          :disabled="i.disabled ? i.disabled : false" :format="i.format ? i.format : dateFormatInit(i.itemType)"
+                          :value-format="i.format ? i.format : dateFormatInit(i.itemType)" :style="i.style" />
+          <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]" />
+          <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">
+              {{ 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 :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>
+          <el-input-number v-else-if="i.type == 'number'" v-model="formData[i.prop]" :readonly="i.readonly ? i.readonly : false"
+                           :placeholder="i.placeholder || $t('common.pleaseEnter')" @change="(e) => commonsEmit(e, i)"
+                           :disabled="i.disabled ? i.disabled : false" :min="i.min ? i.min : 0" :max="i.max ? i.max : 9999999999"
+                           :step="i.step ? i.step : 1" :precision="i.precision !== '' ? i.precision : 2"
+                           :controls="i.controls === false ? false : true" :style="i.style" onmousewheel="return false;">
+          </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">
+          </el-tree>
+          <el-cascader v-else-if="i.type == 'cascader'" :options="i.data" :props="i.props" :readonly="i.readonly ? i.readonly : false"
+                       :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'">
+            {{ 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]" action="https://winfaster.obs.cn-south-1.myhuaweicloud.com" :data="uploadData"
+                       list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :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%">
+            <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">
+                <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 || $t('common.pleaseEnter')" :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>
+              </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>
+        </el-form-item>
+      </template>
     </el-form>
   </div>
 </template>
@@ -263,7 +126,7 @@ export default {
   name: "byForm",
 };
 </script>
-<script  setup>
+<script setup>
 import { set } from "@vueuse/shared";
 import { reactive } from "vue";
 defineProps({
@@ -288,6 +151,7 @@ defineProps({
     default: false,
   },
 });
+
 const formTableChange = (e, scope, column) => {
   if (column.fn) {
     column.fn(e, scope);
@@ -316,6 +180,10 @@ 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;
@@ -334,6 +202,7 @@ 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") {
@@ -350,6 +219,7 @@ 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);
@@ -513,17 +383,27 @@ loadInit();
 </script>
 
 <style>
+.box-item {
+  background-color: red;
+}
 .form-title {
   font-size: 14px;
   font-weight: bold;
-  margin-top: 22px;
+  margin: 15px 0;
   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;
@@ -531,4 +411,8 @@ loadInit();
 .by-form-json .by-form .el-form .el-form-item {
   margin-bottom: 18px;
 }
-</style>
+
+.by-form-json {
+  padding: 0px !important;
+}
+</style>

src/views/WDLY/outInBound/abnormal/index.vue

@@ -592,7 +592,7 @@ const openModal = () => {
 };
 const activities = ref([]);
 const submitForm = () => {
-  console.log(byform.value);
+  console.log(byform.value, "asdada");
   byform.value.handleSubmit((valid) => {
     if (Number(formData.data.refundAmount) == 0) {
       return ElMessage({