fix

src/components/basic-form/index.vue

@@ -10,14 +10,14 @@
           <div v-for='sub in item.children' :key='sub.label' class='full-width sub-item'>
             <el-col :span='24'>
               <div class='full-width item '>
-                <xsub :option='option' :item='sub' :form='form' :disable='option.detail'/>
+                <xsub :option='option' :item='sub' :form='form' :disable='option.detail' @change='change'/>
               </div>
             </el-col>
           </div>
         </div>
       </el-col>
       <!--      input-->
-      <xsub v-else :option='option' :item='item' :form='form' :disable='option.detail'/>
+      <xsub v-else :option='option' :item='item' :form='form' :disable='option.detail' @change='change'/>
     </el-form>
   </div>
 </template>
@@ -55,6 +55,12 @@ export default {
       form: null,
       disable: true
     }
+  },
+  methods: {
+    change (res) {
+      this.$emit('change', res)
+      console.log(res)
+    }
   }
 }
 </script>

src/components/basic-form/sub.vue

@@ -4,12 +4,13 @@
       <div class='flex item full-width'>
         <el-form-item class='full-width '>
           <template v-slot:label>
-            <div class='label white-bg full-width padding-left text-left bold'>
+            <div class='label light-red-bg full-width padding-left text-left bold' >
               {{ item.label }}
             </div>
           </template>
           <div class='full-width text-left flex full-width'>
-            <input v-model='form[item.prop]' :disabled='disable' :placeholder='`请输入` + item.label'
+            <input v-model='editData[item.prop]' :disabled='disable' :placeholder='`请输入` + item.label'
+                   @change='change($event,item)'
                    class='full-width'/>
             <el-icon v-if='!disable' class="padding-right">
               <edit/>
@@ -30,10 +31,11 @@
           </template>
           <div class='full-width flex flex-align-start full-height text-left full-width'
                style='white-space: pre-wrap;text-overflow: ellipsis;'>
-              <textarea v-model='form[item.prop]' :disabled='disable'
+              <textarea v-model='editData[item.prop]' :disabled='disable'
                         :placeholder='`请输入` + item.label'
                         :style='`height:` + item.rows * 35 + `px`'
                         class='full-width padding-right full-height padding-top'
+                        @change='change($event,item)'
                         style='line-height:20px;resize:none '/>
             <el-icon v-if='!disable' class="padding-right padding-top">
               <edit/>
@@ -54,7 +56,8 @@
           </template>
           <div class='full-width flex flex-align-start full-height text-left full-width'
                style='white-space: pre-wrap;text-overflow: ellipsis;'>
-            <el-select v-model="item.data" class="m-2" :placeholder="`请选择${item.label}`" @change='change'>
+            <el-select v-model="editData[item.prop]" class="m-2" :placeholder="`请选择${item.label}`"
+                       @change='change($event,item)'>
               <el-option
                   v-for="item in item.dict"
                   :key="item.value"
@@ -80,7 +83,8 @@
           </template>
           <div class='full-width flex flex-align-start full-height text-left full-width'
                style='white-space: pre-wrap;text-overflow: ellipsis;'>
-            <el-select v-model="item.data" class="m-2" :placeholder="`请选择${item.label}`" @change='change'>
+            <el-select class="m-2" :placeholder="`请选择${item.label}`" @change='change($event,item)'
+                       :disabled='disable'>
               <el-option
                   v-for="item in item.dict"
                   :key="item.value"
@@ -101,12 +105,13 @@
           <template v-slot:label>
             <div :style='`height:` + item.rows * 35 + `px`'
                  class='label white-bg full-width text-left padding-left bold'>
-              {{ item.label }}{{item.type}}
+              {{ item.label }}{{ item.type }}
             </div>
           </template>
           <div class='full-width flex flex-align-start full-height text-left full-width'
                style='white-space: pre-wrap;text-overflow: ellipsis;'>
-            <el-cascader :options="item.dict" class="m-2" :placeholder="`请选择${item.label}`" @change='change'>
+            <el-cascader ref='area' :options="item.dict" v-model="editData[item.prop]" :disabled='disable' class="m-2"
+                         :placeholder="`请选择${item.label}`" @change='change($event,item)'>
             </el-cascader>
             <el-icon v-if='!disable' class="padding-right padding-top">
               <edit/>
@@ -115,20 +120,51 @@
         </el-form-item>
       </div>
     </el-col>
-<!--    -->
+    <!--   daterange -->
     <el-col v-if='item.type ==="daterange" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
       <div class='flex item full-width'>
         <el-form-item class='full-width '>
           <template v-slot:label>
             <div :style='`height:` + item.rows * 35 + `px`'
                  class='label white-bg full-width text-left padding-left bold'>
-              {{ item.label }}{{item.type}}
+              {{ item.label }}{{ item.type }}
             </div>
           </template>
           <div class='full-width flex flex-align-start full-height text-left full-width'
                style='white-space: pre-wrap;text-overflow: ellipsis;'>
-            <el-cascader :options="item.dict" class="m-2" :placeholder="`请选择${item.label}`" @change='change'>
-            </el-cascader>
+            <el-date-picker
+                v-model="editData[item.prop]"
+                :disabled='disable'
+                type="daterange"
+                @change='change($event,item)'
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder='结束日期'
+                value-format='YYYY-MM-DD'
+                format='YYYY-MM-DD'
+            />
+            <el-icon v-if='!disable' class="padding-right padding-top">
+              <edit/>
+            </el-icon>
+          </div>
+        </el-form-item>
+      </div>
+    </el-col>
+    <!--number-->
+    <el-col v-if='item.type ==="number" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
+      <div class='flex item full-width'>
+        <el-form-item class='full-width '>
+          <template v-slot:label>
+            <div :style='`height:` + item.rows * 35 + `px`'
+                 class='label white-bg full-width text-left padding-left bold'>
+              {{ item.label }}{{ item.type }}
+            </div>
+          </template>
+          <div class='full-width flex flex-align-start full-height text-left full-width'
+               style='white-space: pre-wrap;text-overflow: ellipsis;'>
+            <el-input-number v-model='editData[item.prop]' :disabled='disable'
+                             :placeholder='`请输入` + item.label' step='2'
+                             @change='change($event,item)'></el-input-number>
             <el-icon v-if='!disable' class="padding-right padding-top">
               <edit/>
             </el-icon>
@@ -189,30 +225,68 @@ export default {
         }
       },
       immediate: true
+    },
+    form: {
+      handler (val) {
+        this.editData = val
+      },
+      immediate: true
+    },
+    editData: {
+      deep: true,
+      immediate: false
     }
   },
   data () {
     return {
       data: {},
-      dic: []
+      dic: [],
+      editData: null
     }
   },
   methods: {
     async getDic (expand) {
+      const local = localStorage.getItem('lazy-list')
+      if (local) {
+        return JSON.parse(local)
+      }
       const tmp = await this.$api.common.basicFormRequest(expand.dict)
-      return tmp.data.map(item => this.mapTree(item, expand))
+      const result = tmp.data.map(item => this.mapTree(item, expand))
+      localStorage.setItem('lazy-list', JSON.stringify(result))
+      return result
     },
     mapTree (item, expand) {
       const haveChildren = Array.isArray(item.children) && item.children.length > 0
       return {
-        key: item.id,
+        key: item.label,
         value: item[expand.props.value],
         label: item[expand.props.label],
         children: haveChildren ? item.children.map(i => this.mapTree(i, expand)) : []
       }
     },
-    change (res) {
-      console.log(res)
+    change (res, item) {
+      if (item.type === 'area') {
+        this.editData[item.prop] = res[0]
+        const tmp = this.$refs.area.getCheckedNodes()[0].pathLabels
+        const keys = Object.keys(res)
+        if (keys.length === 3) {
+          this.editData.provinceCode = res[0]
+          this.editData.province = tmp[0]
+          this.editData.cityCode = res[1]
+          this.editData.city = tmp[1]
+          this.editData.districtCode = res[2]
+          this.editData.district = tmp[2]
+        } else if (keys.length === 2) {
+          this.editData.provinceCode = res[0]
+          this.editData.province = tmp[0]
+          this.editData.cityCode = res[1]
+          this.editData.city = res[1]
+        } else {
+          this.editData.provinceCode = res[0]
+          this.editData.province = res[0]
+        }
+      }
+      this.$emit('change', this.editData)
     }
 
   }
@@ -220,6 +294,35 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
+.form {
+  border-right: #CCCFCE solid 1px;
+  border-left: #CCCFCE solid 1px;
+  border-bottom: #CCCFCE solid 1px;
+
+  .item {
+    :deep(.el-form-item--default) {
+      margin-bottom: 0;
+      padding: 0;
+    }
+  }
+
+  .label {
+    padding-right: 10px;
+    border-right: #CCCFCE solid 1px;
+  }
+
+  .sub-item {
+    border-left: #CCCFCE solid 1px;
+  }
 
+  .sub-item:first-child {
+    border-left: none;
+  }
+}
+
+.form:first-child {
+  padding: 0;
+  border: #CCCFCE solid 1px;
+}
 </style>

src/layout/top.vue

@@ -84,7 +84,7 @@ export default {
   z-index: 1;
   background-color: white;
   top: 0;
-  left: 240px;
+  left: 200px;
   right: 0;
   position: fixed;
   border-bottom: whitesmoke solid 1px;

src/views/home/component/proinfo.vue

@@ -7,7 +7,7 @@
         <base-button :title="btnTips" :width="60" icon="EditPen" @click="edit"/>
       </div>
     </div>
-    <basic-form :data="data" :option="option" class="mt-10"/>
+    <basic-form :data="data" :option="option" class="mt-10" />
     <div class="flex flex-col mt-20">
       <div class="flex flex-center flex-justify-between margin">
         <span class="grey font-18 bold">发行明细</span>

vite.config.js

@@ -33,8 +33,8 @@ export default defineConfig({
     proxy: {
       '/api': {
         // 正式环境地址
-        target: 'https://dev.wutongresearch.club/api',
-        // target: 'http://192.168.31.181:8110',
+        // target: 'https://dev.wutongresearch.club/api',
+        target: 'http://192.168.31.181:8110',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }