优化表格

src/views/financialsector/FinanceHome.vue

@@ -34,13 +34,15 @@
 
     <!-- 模板内容 -->
     <div class="content">
-      <el-tabs type="border-card">
+      <el-tabs type="border-card" v-model="Tabmenu">
         <template v-for="item in ServiceList" :key="item.label">
-          <el-tab-pane v-if="item.state" :label="item.label" >
+          <el-tab-pane :name="item.label" v-if="item.state" :label="item.label">
             <span v-if="item.label == '提货'">提货</span>
             <span v-if="item.label == '干线'">干线</span>
-            <span v-if="item.label == '仓储'"><FinancialWarehousing :templateData="templateInfo"/></span>
-            <span v-if="item.label == '配送'"><FinancialDelivery/></span>
+            <span v-if="item.label == '仓储'"
+              ><FinancialWarehousing :templateData="templateInfo"
+            /></span>
+            <span v-if="item.label == '配送'"><FinancialDelivery /></span>
             <span v-if="item.label == '安装'">安装</span>
           </el-tab-pane>
         </template>
@@ -50,7 +52,6 @@
 </template>
 
 <script setup>
-
 import { ref, defineAsyncComponent } from 'vue';
 //仓储模板
 const FinancialWarehousing = defineAsyncComponent(() =>
@@ -61,10 +62,11 @@ const FinancialDelivery = defineAsyncComponent(() =>
   import('@/views/financialsector/Financialse/FinancialDelivery.vue')
 );
 const form = ref({});
-const tabNum=ref('干线')
-const templateInfo=ref({
-  name:'参数'
-})
+const Tabmenu = ref('仓储');
+const templateInfo = ref({
+  name: '参数',
+});
+// 菜单列表
 const ServiceList = ref([
   {
     label: '提货',
@@ -99,13 +101,23 @@ const ServiceList = ref([
 ]);
 // 点击菜单
 const isChecked = val => {
-  console.log(val,'点击的');
-  val.state=!val.state
+  //菜单隐藏/显示
+  val.state = !val.state;
+  //设置激活菜单
+  Tabmenu.value = val.label;
+  // 如果当前菜单被关闭则显示最新菜单
+  if (!val.state && form.value.ServiceType.length) {
+    Tabmenu.value = ServiceList.value.find(res => res.state).label;
+  }
 };
 // 点击移除
 const removeTag = value => {
-  ServiceList.value.find(res => res.value == value).check  = false;
-  ServiceList.value.find(res => res.value == value).state  = false;
+  ServiceList.value.find(res => res.value == value).check = false;
+  ServiceList.value.find(res => res.value == value).state = false;
+  // 激活菜单设置为已经存在的
+  if (form.value.ServiceType.length) {
+    Tabmenu.value = ServiceList.value.find(res => res.state).label;
+  }
 };
 </script>
 

src/views/financialsector/Financialse/FinancialDelivery.vue

@@ -10,6 +10,7 @@
         clearable
         placeholder="选择计费类型"
         style="width: 240px"
+        @change="chargetype"
       >
         <el-option
           v-for="item in Warehousebillingmode"
@@ -48,23 +49,105 @@
     <!-- 是否区分品类  -->
     <div class="el_Storage">
       <span class="el_table_span">是否区分品类</span>
-      <el-radio-group v-model="form.CalculationBasis" class="el_Cselect">
-        <el-radio v-for="item in CalculationBasis" :key="item.label" :label="item.value">{{
+      <el-radio-group v-model="form.Distinguishcategories" class="el_Cselect">
+        <el-radio v-for="item in Distinguishcategories" :key="item.label" :label="item.value">{{
           item.label
         }}</el-radio>
       </el-radio-group>
     </div>
+
+    <!-- 是否有遗留件  -->
+    <div class="el_Storage">
+      <span class="el_table_span">是否有遗留件</span>
+      <el-radio-group v-model="form.Leftoverparts" class="el_Cselect">
+        <el-radio v-for="item in Leftoverparts" :key="item.label" :label="item.value">{{
+          item.label
+        }}</el-radio>
+      </el-radio-group>
+    </div>
+
+    <!-- 商配/市配  -->
+    <div class="el_Storage">
+      <el-tabs class="demo-tabs">
+        <el-tab-pane :label="WarehousebillingmodeTitle">
+          <!-- 商配/市配内容 -->
+          <div class="el_Commercial_ercial">
+            <!-- 按件计费 -->
+            <template v-for="Item in Commercialcial" :key="Item.title">
+              <div class="el_Storage">
+                <div class="Storage-cont">
+                  <!-- 标题 -->
+                  <span class="el_table_span">{{ Item.title }}</span>
+                  <!-- 表格  -->
+                  <div
+                    class="el_Storagecategory"
+                    v-loading="Item.Storageloading"
+                    element-loading-text="Loading..."
+                  >
+                    <div class="el_table_span">
+                      <div class="el_table_id">序号</div>
+                      <div class="el_table_title">产品品类</div>
+                    </div>
+                    <!-- 表格循环 -->
+                    <div class="el_table_td" v-for="item in Item.sequence" :key="item.id">
+                      <!-- 序号 -->
+                      <div class="el_table_idNumber">{{ item.id }}</div>
+                      <!-- 选择的品类 -->
+                      <el-select
+                        class="el_Cselect"
+                        v-model="item.Warehousecategory"
+                        filterable
+                        clearable
+                        placeholder="请选择品类"
+                        style="width: 240px"
+                      >
+                        <!-- 品类列表 -->
+                        <el-option
+                          v-for="option in item.StoragecategoryList"
+                          :key="option.value"
+                          :label="option.label"
+                          :value="option.value"
+                        />
+                      </el-select>
+                      <div class="el_table_operation">
+                        <span
+                          @click="storagereduce(Item, item.id)"
+                          v-if="item.reduce"
+                          class="el_table_operation_span_a"
+                          >-</span
+                        >
+                        <span
+                          @click="storageplus(Item, item.id)"
+                          v-if="item.plus"
+                          class="el_table_operation_span_b"
+                          >+</span
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-const form = ref({}); //表单
+const form = ref({
+  Warehousebillingmode: '1', //仓储计费类型
+  Distinguishcategories: '1', //是否区分品类
+  Leftoverparts: '1', //是否有遗留件
+}); //表单
 // 配送服务类型
 const Warehousebillingmode = ref([
   { label: '市配', value: '1' },
   { label: '商配', value: '2' },
 ]);
+const WarehousebillingmodeTitle = ref('市配'); //配送服务类型标题
 // 配送计费模式
 const ServiceList = ref([
   {
@@ -105,11 +188,202 @@ const ServiceList = ref([
   },
 ]);
 
+const Commercialcial = ref([
+  {
+    title: '按件数计费', // 标题
+    state: false, //是否显示
+    Storageloading: false, //加载效果
+    sequence: [
+      //表格
+      {
+        id: 1, //序号
+        plus: true, //加号显示
+        reduce: false, //减号显示
+        StoragecategoryList: [], //品类
+      },
+      {
+        id: 2,
+        plus: true,
+        reduce: true,
+        StoragecategoryList: [],
+      },
+    ],
+  },
+  {
+    title: '按重量计费',
+    state: false, //是否显示
+    Storageloading: false, //加载效果
+    sequence: [
+      //表格
+      {
+        id: 1, //序号
+        plus: true, //加号显示
+        reduce: false, //减号显示
+        StoragecategoryList: [], //品类
+      },
+      {
+        id: 2,
+        plus: true,
+        reduce: true,
+        StoragecategoryList: [],
+      },
+    ],
+  },
+  {
+    title: '按方计费',
+    state: false, //是否显示
+    Storageloading: false, //加载效果
+    sequence: [
+      //表格
+      {
+        id: 1, //序号
+        plus: true, //加号显示
+        reduce: false, //减号显示
+        StoragecategoryList: [], //品类
+      },
+      {
+        id: 2,
+        plus: true,
+        reduce: true,
+        StoragecategoryList: [],
+      },
+    ],
+  },
+  {
+    title: '按整车计费',
+    state: false, //是否显示
+    Storageloading: false, //加载效果
+    sequence: [
+      //表格
+      {
+        id: 1, //序号
+        plus: true, //加号显示
+        reduce: false, //减号显示
+        StoragecategoryList: [], //品类
+      },
+      {
+        id: 2,
+        plus: true,
+        reduce: true,
+        StoragecategoryList: [],
+      },
+    ],
+  },
+  {
+    title: '按点位计费',
+    state: false,
+    state: false, //是否显示
+    Storageloading: false, //加载效果
+    sequence: [
+      //表格
+      {
+        id: 1, //序号
+        plus: true, //加号显示
+        reduce: false, //减号显示
+        StoragecategoryList: [], //品类
+      },
+      {
+        id: 2,
+        plus: true,
+        reduce: true,
+        StoragecategoryList: [],
+      },
+    ],
+  },
+  {
+    title: '按吨计费',
+    state: false, //是否显示
+    Storageloading: false, //加载效果
+    sequence: [
+      //表格
+      {
+        id: 1, //序号
+        plus: true, //加号显示
+        reduce: false, //减号显示
+        StoragecategoryList: [], //品类
+      },
+      {
+        id: 2,
+        plus: true,
+        reduce: true,
+        StoragecategoryList: [],
+      },
+    ],
+  },
+  {
+    title: '按公里计费',
+    state: false, //是否显示
+    Storageloading: false, //加载效果
+    sequence: [
+      //表格
+      {
+        id: 1, //序号
+        plus: true, //加号显示
+        reduce: false, //减号显示
+        StoragecategoryList: [], //品类
+      },
+      {
+        id: 2,
+        plus: true,
+        reduce: true,
+        StoragecategoryList: [],
+      },
+    ],
+  },
+]);
+
 // 是否区分品类
 const Distinguishcategories = ref([
-    {label: '是', value: '1'},
-    {label: '否', value: '0'},
-])
+  { label: '是', value: '1' },
+  { label: '否', value: '0' },
+]);
+// 是否有遗留件
+const Leftoverparts = ref([
+  { label: '是', value: '1' },
+  { label: '否', value: '0' },
+]);
+// 计费类型选择
+const chargetype = val => {
+  console.log(val);
+  if (val) {
+    WarehousebillingmodeTitle.value = Warehousebillingmode.value.find(
+      res => res.value == val
+    ).label;
+  }
+};
+//案件计费
+const Storageloading = ref(false);
+// 仓储品类配置
+const StoragecategoryList = ref([
+  {
+    id: 1,
+    plus: true,
+    reduce: false,
+  },
+  {
+    id: 2,
+    plus: true,
+    reduce: true,
+  },
+]);
+// 附加费品类
+const Additionalcategories = ref([
+  {
+    label: '衣柜',
+    value: '1',
+  },
+  {
+    label: '橱柜',
+    value: '2',
+  },
+]);
+Commercialcial.value.forEach(res => {
+  console.log(res, '第一层');
+  res.sequence.forEach(rues => {
+    console.log(rues, '第二曾');
+    rues.StoragecategoryList = { ...Additionalcategories.value };
+  });
+});
 // 点击菜单
 const isChecked = val => {
   console.log(val, '点击的');
@@ -118,6 +392,61 @@ const isChecked = val => {
 const removeTag = value => {
   ServiceList.value.find(res => res.value == value).check = false;
 };
+
+// 移除对象
+function removeItemById(array, id) {
+  const index = array.sequence.findIndex(item => item.id === id);
+  if (index !== -1) {
+    array.sequence.splice(index, 1);
+    array.sequence.forEach((item, index) => {
+      item.id = index + 1;
+    });
+  }
+  let timerId = setTimeout(() => {
+    array.Storageloading = false;
+    clearTimeout(timerId); // 在回调函数内部清除定时器
+  }, 300);
+}
+// 添加对象
+
+function addItemAfterId(array, id) {
+  console.log(array, 'array');
+  const newItem = {
+    id: array.sequence.length + 1, // 新对象的 ID 为当前数组长度加 1
+    plus: true, //加号
+    reduce: true, //减号
+    StoragecategoryList: [ ...Additionalcategories.value ], //品类
+  };
+
+
+
+  const index = array.sequence.findIndex(item => item.id === id);
+  if (index !== -1) {
+    array.sequence.splice(index + 1, 0, newItem); // 在找到的 ID 后面插入新对象
+    // 重新排序 ID
+    array.sequence.forEach((item, index) => {
+      item.id = index + 1;
+    });
+  }
+  let timerId = setTimeout(() => {
+    array.Storageloading = false;
+    clearTimeout(timerId); // 在回调函数内部清除定时器
+  }, 300);
+
+  // 取消定时器
+}
+// 仓储减
+const storagereduce = (item, id) => {
+  console.log(item);
+  item.Storageloading = true;
+  removeItemById(item, id);
+};
+// 仓储加
+const storageplus = (item, id) => {
+  console.log(item, '按钮接收参数');
+  item.Storageloading = true;
+  addItemAfterId(item, id);
+};
 </script>
 
 <style scoped lang="scss">
@@ -167,7 +496,7 @@ const removeTag = value => {
   }
   .el_table_span {
     font-size: 16px;
-    font-weight: 500;
+    font-weight: bold;
     display: inline-block;
     width: 160px;
   }
@@ -256,4 +585,21 @@ const removeTag = value => {
     }
   }
 }
+
+:deep(.demo-tabs) {
+  .el-tabs__item {
+    font-size: 26px;
+    font-weight: bold;
+  }
+
+  .el_Commercial_ercial {
+    width: 100%;
+    height: 500px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    padding: 4px;
+    border-radius: 4px;
+    overflow-y: scroll;
+  }
+}
 </style>

src/views/financialsector/Financialse/FinancialWarehousing.vue

@@ -78,17 +78,17 @@
             <div class="el_table_idNumber">{{ item.id }}</div>
             <el-select
               class="el_Cselect"
-              v-model="item.Warehousecategory"
+              v-model="item.WarehousecategoryInput"
               filterable
               clearable
               placeholder="请选择品类"
               style="width: 240px"
             >
               <el-option
-                v-for="item in Warehousecategory"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="items in item.Additionalcategories"
+                :key="items.value"
+                :label="items.label"
+                :value="items.value"
               />
             </el-select>
             <div class="el_table_operation">
@@ -208,10 +208,10 @@
                 style="width: 240px"
               >
                 <el-option
-                  v-for="item in Additionalcategories"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                  v-for="items in item.Additionalcategories"
+                  :key="items.value"
+                  :label="items.label"
+                  :value="items.value"
                 />
               </el-select>
               <div class="el_table_operation">
@@ -237,14 +237,13 @@
 </template>
 
 <script setup>
-
 import { ref } from 'vue';
 import { defineProps } from 'vue';
 // 接收参数
 const props = defineProps({
-  templateData: Object 
+  templateData: Object,
 });
-console.log(props,'来自父页面参数');
+console.log(props, '来自父页面参数');
 const Storageloading = ref(false); //仓储品类加载
 const goriesloading = ref(false); //仓储品类加载
 console.log('仓储子页面');
@@ -324,11 +323,16 @@ const StoragecategoryList = ref([
     id: 1,
     plus: true,
     reduce: false,
-  },
-  {
-    id: 2,
-    plus: true,
-    reduce: true,
+    Additionalcategories: [
+      {
+        label: '衣柜',
+        value: '1',
+      },
+      {
+        label: '橱柜',
+        value: '2',
+      },
+    ],
   },
 ]);
 // 附加费品类配置
@@ -337,11 +341,16 @@ const AdditionalcategoriesList = ref([
     id: 1,
     plus: true,
     reduce: false,
-  },
-  {
-    id: 2,
-    plus: true,
-    reduce: true,
+    Additionalcategories: [
+      {
+        label: '衣柜',
+        value: '1',
+      },
+      {
+        label: '橱柜',
+        value: '2',
+      },
+    ],
   },
 ]);
 // 附加费品类
@@ -418,6 +427,7 @@ const Additionalfeebilling = ref([
     label: '否',
   },
 ]);
+
 // 移除对象
 function removeItemById(array, id) {
   const index = array.findIndex(item => item.id === id);
@@ -433,12 +443,16 @@ function removeItemById(array, id) {
     clearTimeout(timerId); // 在回调函数内部清除定时器
   }, 300);
 }
+
 // 添加对象
-function addItemAfterId(array, id) {
+function addItemAfterId(array, id, data) {
+  console.log(array);
   const newItem = {
     id: array.length + 1, // 新对象的 ID 为当前数组长度加 1
-    plus: true,
-    reduce: true,
+    plus: true, //是否显示加号
+    reduce: true, //是否显示减号
+    WarehousecategoryInput: '', //选择框值
+    Additionalcategories: [...data], //选择框列表,防止后期需要改动列表值
   };
   const index = array.findIndex(item => item.id === id);
   if (index !== -1) {
@@ -449,33 +463,32 @@ function addItemAfterId(array, id) {
     });
   }
   let timerId = setTimeout(() => {
-    goriesloading.value = false;
-    Storageloading.value = false;
+    goriesloading.value = false; //关闭加载效果
+    Storageloading.value = false; //关闭加载效果
     clearTimeout(timerId); // 在回调函数内部清除定时器
   }, 300);
-
   // 取消定时器
 }
 // 仓储减
-const storagereduce = val => {
-  console.log(val);
-  Storageloading.value = true;
-  removeItemById(StoragecategoryList.value, val);
+const storagereduce = id => {
+  // ID当前点击的
+  Storageloading.value = true; //开启加载效果
+  removeItemById(StoragecategoryList.value, id); //传入配置项和对应的ID
 };
 // 仓储加
-const storageplus = val => {
+const storageplus = id => {
   Storageloading.value = true;
-  addItemAfterId(StoragecategoryList.value, val);
+  addItemAfterId(StoragecategoryList.value, id, Warehousecategory.value);
 };
 // 附加品类加
-const categoriesplus = val => {
+const categoriesplus = id => {
   goriesloading.value = true;
-  addItemAfterId(AdditionalcategoriesList.value, val);
+  addItemAfterId(AdditionalcategoriesList.value, id, Additionalcategories.value);
 };
 // 附加品类减
-const categoriesduce = val => {
+const categoriesduce = id => {
   goriesloading.value = true;
-  removeItemById(AdditionalcategoriesList.value, val);
+  removeItemById(AdditionalcategoriesList.value, id);
 };
 </script>