logpm_page/src/views/financialsector/Financialse/FinancialDelivery.vue

<template>
  <div class="content_max">
    <!-- 配送服务类型 -->
    <div class="el_Storage">
      <span class="el_table_span">仓储计费类型</span>
      <el-select
        class="el_Cselect"
        v-model="form.Warehousebillingmode"
        filterable
        placeholder="选择计费类型"
        style="width: 240px"
        @change="chargetype"
      >
        <el-option
          v-for="item in Warehousebillingmode"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <!-- 配送计费模式 -->
    <div class="el_select_check">
      <div class="el_Storage el_Service">
        <span class="el_table_span name">服务类型</span>
        <el-select
          v-model="form.ServiceType"
          filterable
          placeholder="请选择服务类型"
          :popper-append-to-body="false"
          style="width: 760px"
          multiple
          @remove-tag="removeTag"
        >
          <el-option
            v-for="item in ServiceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <el-checkbox v-model="item.check" @change="isChecked(item)">
              {{ item.label }}
            </el-checkbox>
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 是否区分品类  -->
    <div class="el_Storage">
      <span class="el_table_span">是否区分品类</span>
      <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" v-if="WarehousebillingmodeTitle">
      <el-tabs class="demo-tabs">
        <el-tab-pane
          :label="WarehousebillingmodeTitle"
          v-loading="Deliveryloading"
          element-loading-text="Loading..."
        >
          <!-- 商配/市配内容 -->
          <div class="el_Commercial_ercial" v-if="StateDelivery">
            <!-- 按件计费 -->
            <template v-for="Item in Commercialcial" :key="Item.title">
              <div class="el_Storage" v-if="Item.state">
                <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 class="el_Surchargebilling">
      <span class="el_title_span">附加费计费</span>
      <!-- 是否有分货费  -->
      <div class="el_Storage">
        <span class="el_table_span">是否有分货费</span>
        <el-radio-group v-model="form.Distributionfee" class="el_Cselect">
          <el-radio v-for="item in Distributionfee" :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.Operatingfee" class="el_Cselect">
          <el-radio v-for="item in Operatingfee" :key="item.label" :label="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </div>

      <!-- 是否有上楼费  -->
      <div class="el_Storage el_upstairs">
        <div class="el_upstairs_a">
          <span class="el_table_span">是否有上楼费</span>
          <el-radio-group v-model="form.upstairs" class="el_Cselect">
            <el-radio v-for="item in upstairs" :key="item.label" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </div>

        <div class="el_upstairs_b">
          <span class="el_table_span">是否配置免费层数</span>
          <el-radio-group v-model="form.Numberlayers" class="el_Cselect">
            <el-radio v-for="item in Numberlayers" :key="item.label" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 是否有平移费  -->
      <div class="el_Storage">
        <span class="el_table_span">是否有平移费</span>
        <el-radio-group v-model="form.Translationfee" class="el_Cselect">
          <el-radio v-for="item in Translationfee" :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.Surchargefee" class="el_Cselect">
          <el-radio v-for="item in Surchargefee" :key="item.label" :label="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </div>

      <!-- 附加费品类 -->
      <div class="el_Storage">
        <div class="Storage-cont">
          <span class="el_table_span">附加费品类</span>
          <!-- 表格  -->
          <div
            class="el_Storagecategory"
            v-loading="goriesloading"
            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 AdditionalcategoriesList" :key="item.id">
              <div class="el_table_idNumber">{{ item.id }}</div>
              <el-select
                class="el_Cselect"
                v-model="item.AdditionalcategoriesInput"
                filterable
                clearable
                placeholder="请选择品类"
                style="width: 240px"
              >
                <el-option
                  v-for="items in item.Additionalcategories"
                  :key="items.value"
                  :label="items.label"
                  :value="items.value"
                />
              </el-select>
              <div class="el_table_operation">
                <span
                  @click="categoriesduce(item.id)"
                  v-if="item.reduce"
                  class="el_table_operation_span_a"
                  >-</span
                >
                <span
                  @click="categoriesplus(item.id)"
                  v-if="item.plus"
                  class="el_table_operation_span_b"
                  >+</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最低计费  -->
      <div class="el_Storage el_Minimumbilling">
        <span class="el_table_title">最低计费</span>
        <div class="el_Storage">
          <div class="el_Minimumbillingbox">
            <!-- 是否最低计费 -->
            <div class="el_Minimumbilling_a">
              <span class="el_table_span">是否最低计费</span>
              <el-radio-group v-model="form.Minimumbilling" class="el_Cselect">
                <el-radio v-for="item in Minimumbilling" :key="item.label" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </div>
            <!-- 最低计费方式 -->
            <div class="el_Minimumbilling_b">
              <span class="el_table_span">最低计费方式</span>
              <el-radio-group v-model="form.Billingmethod" class="el_Cselect">
                <el-radio v-for="item in Billingmethod" :key="item.label" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>

      <!-- 最低计费类型  -->
      <div class="el_Storage">
        <span class="el_table_span">最低计费类型</span>
        <el-radio-group v-model="form.chargetype" class="el_Cselect">
          <el-radio v-for="item in chargetypeSelect" :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.Upwardjudgment" class="el_Cselect">
          <el-radio v-for="item in Upwardjudgment" :key="item.label" :label="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getDictionaryBiz } from '@/api/system/dict'; //字典
//表单
const form = ref({
  Warehousebillingmode: '', //仓储计费类型
  Distinguishcategories: '0', //是否区分品类
  Leftoverparts: '0', //是否有遗留件
  Distributionfee: '0', //是否有分货费
  Operatingfee: '0', //是否有操作装卸费
  upstairs: '0', //是否有上楼费
  Numberlayers: '0', //是否配置免费层数
  Translationfee: '0', //是否有平移费
  Surchargefee: '0', //附加费
  Minimumbilling: '0', //是否最低计费
  Billingmethod: '1', //最低计费方式
  chargetype: '1', //最低计费类型
  Upwardjudgment: '0', //是否向上判断
});
// 是否向上判断
const Upwardjudgment = ref([]);
// 最低计费类型
const chargetypeSelect = ref([]);
// 最低计费方式
const Billingmethod = ref([]);
// 是否显示服务类型选择的列表
const StateDelivery = ref(false);
// 是否最低计费
const Minimumbilling = ref([]);
// 附加品类loading
const goriesloading = ref(false);
// 附加费品类配置
const AdditionalcategoriesList = ref([
  {
    id: 1,
    plus: true,
    reduce: false,
    AdditionalcategoriesInput: '', //选择框值
    Additionalcategories: [
      {
        label: '衣柜',
        value: '1',
      },
      {
        label: '橱柜',
        value: '2',
      },
    ],
  },
]);
// 附加费是否统一计费
const Surchargefee = ref([]);
//是否有平移费
const Translationfee = ref([]);
//是否配置免费层数
const Numberlayers = ref([]);
// 是否有上楼费
const upstairs = ref([]);
//是否有分货费
const Distributionfee = ref([]);
//是否有操作装卸费
const Operatingfee = ref([]);
const Deliveryloading = ref(false);
// 配送服务类型
const Warehousebillingmode = ref([]);
const WarehousebillingmodeTitle = ref(''); //配送服务类型标题
// 配送计费模式
const ServiceList = ref([]);
const Commercialcial = ref([
  //   {
  //     title: '按公里计费',
  //     state: false, //是否显示
  //     Storageloading: false, //加载效果
  //     sequence: [
  //       //表格
  //       {
  //         id: 1, //序号
  //         plus: true, //加号显示
  //         reduce: false, //减号显示
  //         StoragecategoryList: [], //品类
  //         Warehousecategory: '', //选择的值
  //       },
  //     ],
  //   },
]);
// 是否区分品类
const Distinguishcategories = ref([]);
// 是否有遗留件
const Leftoverparts = ref([]);
// 计费类型选择
const chargetype = val => {
  console.log(val);
  if (val) {
    WarehousebillingmodeTitle.value = Warehousebillingmode.value.find(
      res => res.value == val
    ).label;
  }
};
//案件计费
const Storageloading = ref(false);
// 附加费品类
const Additionalcategories = ref([
  {
    label: '衣柜',
    value: '1',
  },
  {
    label: '橱柜',
    value: '2',
  },
]);
// 页面初始化添加品类
Commercialcial.value.forEach(res => {
  res.sequence.forEach(rues => {
    rues.StoragecategoryList = { ...Additionalcategories.value };
  });
});
const Timedelive = () => {
  Deliveryloading.value = true;
  let timerId = setTimeout(() => {
    Deliveryloading.value = false;
    clearTimeout(timerId); // 在回调函数内部清除定时器
  }, 300);
};

// 根据当前选择的服务类型来选择是否显示框框
const CommercialcialDisplay = () => {
  if (Commercialcial.value.find(res => res.state)) {
    StateDelivery.value = true;
  } else {
    StateDelivery.value = false;
  }
};

// 点击菜单
const isChecked = value => {
  if (!WarehousebillingmodeTitle.value) {
    ElMessage({
      message: '请先选择仓储计费类型',
      type: 'warning',
    });
    form.value.ServiceType = []; //清空选择
    value.check = false; //取消当前勾选
    return;
  }
  console.log(value, '当前点击的菜单');
  //   找到当前点击的菜单,显示对应的列表
  let data = ServiceList.value.find(res => res.label == value.label);
  Commercialcial.value.find(res => res.title == data.label).state = !Commercialcial.value.find(
    res => res.title == data.label
  ).state;

  CommercialcialDisplay(); // 根据当前选择的服务类型来选择是否显示框框
  Timedelive(); //加载效果
};
// 点击移除
const removeTag = value => {
  Deliveryloading.value = true;
  let data = ServiceList.value.find(res => res.value == value);
  data.check = false;
  Commercialcial.value.find(res => res.title == data.label).state = false;
  // 根据当前选择的服务类型来选择是否显示框框
  CommercialcialDisplay(); // 根据当前选择的服务类型来选择是否显示框框
  Timedelive(); //加载效果
};

// 移除对象
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], //品类
    Warehousecategory: '', //选择的值
  };

  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);
};
// 附加品类加移除对象
function FmremoveItemById(array, id) {
  const index = array.findIndex(item => item.id === id);
  if (index !== -1) {
    array.splice(index, 1);
    array.forEach((item, index) => {
      item.id = index + 1;
    });
  }
  let timerId = setTimeout(() => {
    goriesloading.value = false;
    clearTimeout(timerId); // 在回调函数内部清除定时器
  }, 300);
}

// 附加品类加添加对象
function FmaddItemAfterId(array, id, data) {
  console.log(array);
  const newItem = {
    id: array.length + 1, // 新对象的 ID 为当前数组长度加 1
    plus: true, //是否显示加号
    reduce: true, //是否显示减号
    WarehousecategoryInput: '', //选择框值
    Additionalcategories: [...data], //选择框列表,防止后期需要改动列表值
  };
  const index = array.findIndex(item => item.id === id);
  if (index !== -1) {
    array.splice(index + 1, 0, newItem); // 在找到的 ID 后面插入新对象
    // 重新排序 ID
    array.forEach((item, index) => {
      item.id = index + 1;
    });
  }
  let timerId = setTimeout(() => {
    goriesloading.value = false; //关闭加载效果
    clearTimeout(timerId); // 在回调函数内部清除定时器
  }, 300);
  // 取消定时器
}
// 附加品类加
const categoriesplus = id => {
  goriesloading.value = true;
  FmaddItemAfterId(AdditionalcategoriesList.value, id, Additionalcategories.value);
};
// 附加品类减
const categoriesduce = id => {
  goriesloading.value = true;
  FmremoveItemById(AdditionalcategoriesList.value, id);
};

function updateDictionary(targetArray, dictionaryType) {
  getDictionaryBiz(dictionaryType)
    .then(res => {
      console.log(res, '字典');
      if (res.data.code == 200) {
        if (res.data.data.length) {
          res.data.data.forEach(item => {
            targetArray.push({
              value: item.dictKey,
              label: item.dictValue,
              id: item.id,
            });
          });
        }
      }
      // 是否类型
      if (dictionaryType == 'price_yes_no') {
        Leftoverparts.value= {...Distinguishcategories.value};//是否有遗留件
        Distributionfee.value= {...Distinguishcategories.value};//是否有分货费
        Operatingfee.value= {...Distinguishcategories.value};//是否有操作/装卸费
        upstairs.value= {...Distinguishcategories.value};//是否有上楼费
        Numberlayers.value= {...Distinguishcategories.value};//是否配置免费层数
        Translationfee.value= {...Distinguishcategories.value};//是否有平移费
        Surchargefee.value= {...Distinguishcategories.value};//附加费是否统一计费
        Minimumbilling.value= {...Distinguishcategories.value};//是否最低计费
        Upwardjudgment.value= {...Distinguishcategories.value};//是否向上判断
      }
      //服务类型
      if (dictionaryType == 'dispatch_pricing_type') {
        Commercialcial.value = []; //清空服务类型
        res.data.data.forEach(res => {
          let data = {
            title: res.dictValue, // 标题
            id: res.id, //码表ID
            state: false, //是否显示
            Storageloading: false, //加载效果
            sequence: [
              //表格
              {
                id: 1, //序号
                plus: true, //加号显示
                reduce: false, //减号显示
                StoragecategoryList: [], //品类
                Warehousecategory: '', //选择的值
              },
            ],
          };
          Commercialcial.value.push({
            ...data,
          });
        });
      }
    })
    .catch(() => {})
    .finally(() => {});
}
// 页面初始化必要请求
const onLoad = () => {
  updateDictionary(Warehousebillingmode.value, 'dispatch_type'); //仓储计费类型
  updateDictionary(ServiceList.value, 'dispatch_pricing_type'); //仓储计费类型
  updateDictionary(Distinguishcategories.value, 'price_yes_no'); //是否区分品类 
  updateDictionary(Billingmethod.value, 'min_cost_way'); //是否区分品类  
  updateDictionary(chargetypeSelect.value, 'min_cost_type'); //最低计费类型  
};
onLoad();
</script>

<style scoped lang="scss">
.content_max {
  padding: 10px;
}

.el_Service {
  display: flex;
  align-items: center;
  .name {
    margin-right: 10px;
  }
  .el-checkbox {
    width: 100% !important;
    padding: 0 30px;
    .el-checkbox__label {
      width: 100%;
      margin-left: 20px;
    }
  }

  .name {
    font-size: 16px;
  }
}

.el-checkbox {
  width: 100% !important;
  padding-left: 10px;
  box-sizing: border-box;
  .el-checkbox__label {
    margin-left: 20px;
  }
}

.el-select-dropdown__item {
  padding: 0;
}
.el-select-dropdown__item::after {
  content: '';
  display: none;
}
.el_Storage {
  margin-bottom: 30px;
  .el_Cselect {
    margin-left: 10px;
  }
  .el_table_span {
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    width: 160px;
  }
  .Storage-cont {
    /* 禁止双击选中文本 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+/Edge */
    user-select: none; /* Standard syntax */
    display: flex;
    .el_Storagecategory {
      border: 1px solid #ccc;
      .el_table_span {
        display: flex;
        width: 100%;
        background-color: #ebeef5;
        padding: 4px;
        box-sizing: border-box;
      }
      .el_table_id {
        width: 62px;
        font-weight: 600;
        color: #606266;
      }
      .el_table_title {
        font-weight: 600;
        color: #606266;
      }
      .el_table_td {
        display: flex;
        height: 40px;
        align-items: center;
        border-bottom: 1px solid #ccc;
        position: relative;
        .el_table_operation {
          width: 70px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          right: -80px;
          .el_table_operation_span_a,
          .el_table_operation_span_b {
            font-size: 20px;
            font-weight: bold;
            width: 40%;
            border: 2px solid #f00;
            color: #f00;
            height: 70%;
            border-radius: 6px;
            display: block;
            line-height: 23px;
            text-align: center;
            cursor: pointer;
          }
          .el_table_operation_span_b {
            border: 2px solid #0d83b7;
            color: #0d83b7;
          }

          .el_table_operation_span_a:hover {
            background-color: #f00;
            color: #ccc;
          }
          .el_table_operation_span_b:hover {
            background-color: #0d83b7;
            color: #ccc;
          }
        }
      }
      .el_table_idNumber {
        width: 50px;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ccc;
      }
      :deep(.el-input__wrapper) {
        box-shadow: none;
      }
    }
  }
}

:deep(.demo-tabs) {
  .el-tabs__item {
    font-size: 26px;
    font-weight: bold;
  }

  .el_Commercial_ercial {
    width: 100%;
    max-height: 500px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 4px;
    overflow-y: scroll;
  }
}
.el_Surchargebilling {
  .el_title_span {
    font-weight: bold;
  }
}

.el_upstairs {
  display: flex;
  .el_upstairs_b {
    margin-left: 70px;
  }
}
.el_Minimumbilling {
  .el_table_title {
    font-weight: bold;
  }
  .el_Minimumbillingbox {
    display: flex;
  }
  .el_Minimumbilling_b {
    margin-left: 70px;
  }
}
</style>