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

<template>
  <div class="content_max">
    <!-- 仓储计费类型 -->
    <div class="el_Storage">
      <span class="el_table_span">仓储计费类型</span>
      <el-select
        class="el_Cselect"
        v-model="form.warehousePricingType"
        filterable
        clearable
        placeholder="选择计费类型"
        style="width: 240px"
      >
        <el-option
          v-for="item in Storagebillingtype"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <!-- 仓储计费模式 -->
    <div class="el_Storage">
      <span class="el_table_span">仓储计费模式</span>
      <el-select
        class="el_Cselect"
        v-model="form.warehousePricingMode"
        filterable
        clearable
        placeholder="选择仓储计费模式"
        style="width: 240px"
      >
        <el-option
          v-for="item in Warehousebillingmode"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <!-- 计算基准 -->
    <div class="el_Storage">
      <span class="el_table_span">计算基准</span>
      <el-radio-group v-model="form.warehouseCalculationBasis" class="el_Cselect">
        <el-radio v-for="item in CalculationBasis" :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
        @change="categoriesDisplayChange"
        v-model="form.warehouseIsByCategory"
        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" v-if="categoriesDisplay">
      <div class="Storage-cont">
        <span class="el_table_span">仓储品类配置</span>
        <!-- 表格  -->
        <div
          class="el_Storagecategory"
          v-loading="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 StoragecategoryList" :key="item.id">
            <div class="el_table_idNumber">{{ item.id }}</div>
            <el-select
              class="el_Cselect"
              v-model="item.warehousePieceCategory"
              filterable
              remote
              clearable
              reserve-keyword
              placeholder="请选择品类"
              style="width: 240px"
              remote-show-suffix
              :remote-method="categoriesearch"
              @focus="categoriesSearchfocus(item)"
            >
              <!-- @remote-method="changeCategory(item.warehousePieceCategory)" -->
              <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="storagereduce(item.id)"
                v-if="item.reduce"
                class="el_table_operation_span_a"
                >-</span
              >
              <span @click="storageplus(item.id)" v-if="item.plus" class="el_table_operation_span_b"
                >+</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr class="el_hr" />
    <!-- 附加费 -->
    <div class="el_Surcharge_title">
      <span>附加费</span>
    </div>
    <div class="el_Surcharge">
      <!-- 附加费计价单位 -->
      <div class="el_Storage">
        <span class="el_table_span">附加费计价单位</span>
        <el-select
          class="el_Cselect"
          v-model="form.warehouseSubjoinFeeUnit"
          filterable
          clearable
          placeholder="选择计费类型"
          style="width: 240px"
        >
          <el-option
            v-for="item in Surchargepricingunit"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <!-- 是否有管理费 -->
      <div class="el_Storage">
        <span class="el_table_span">是否有管理费</span>
        <el-radio-group v-model="form.warehouseIsManageFee" class="el_Cselect">
          <el-radio v-for="item in Managementfees" :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.warehouseIsOperateFee" class="el_Cselect">
          <el-radio v-for="item in Operatingunloading" :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.warehouseIsSortFee" class="el_Cselect">
          <el-radio v-for="item in Sortingfee" :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
          @change="AdditionalDisplayChange"
          v-model="form.warehouseIsCategorySubjoin"
          class="el_Cselect"
        >
          <el-radio v-for="item in Additionalfeebilling" :key="item.label" :label="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </div>

      <!-- 附加费品类配置 -->
      <div class="el_Storage" v-if="SurchargeDisplay">
        <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.warehousePieceCategory"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请选择品类"
                style="width: 240px"
                remote-show-suffix
                :remote-method="categoriesearch"
                @focus="categoriesSearchfocus(item)"
              >
                <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>
    <div class="el_submit">
      <el-button type="primary" @click="Submit">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { defineProps, defineEmits ,defineComponent} from 'vue';
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { $_priceTemplate, $_basicdataBrande } from '@/api/financialsector/index'; //价格模板
import { ElMessage } from 'element-plus';
import { postFindCategoryInfo } from '@/api/distribution/CreateOrder.js';
const SelectOpin = ref(null); //当前点击的品类搜索框
// 获取点击的品类(附加品类配置)
const categoriesDisplay = ref(false); //是否区分品类（显示/隐藏）
const SurchargeDisplay = ref(false); //附加费是否按品类计费(显示/隐藏)
const categoriesSearchfocus = item => {
  console.log(item, 'item');
  SelectOpin.value = item; //获取当前点击的是那个品类输入框
};
// 附加品类的搜索
const categoriesearch = goodsName => {
  console.log(goodsName, '当前搜索参数');
  if (!goodsName) {
    return;
  }
  let data = {
    goodsName: goodsName,
  };
  let selectionList = null;
  // StateName:'storage',//仓储标识
  // StateName:'additional',//附加费标识
  if (SelectOpin.value.StateName == 'storage') {
    selectionList = StoragecategoryList.value.find(res => res.id == SelectOpin.value.id); //当前是那个选择框
  } else {
    selectionList = AdditionalcategoriesList.value.find(res => res.id == SelectOpin.value.id); //当前是那个选择框
  }
  console.log(selectionList, 'selectionList');
  postFindCategoryInfo(data).then(res => {
    console.log(res, '附加费品类计费');
    if (res.data.code == 200) {
      if (res.data.data.length) {
        selectionList.Additionalcategories = []; //如果有新的参数就清空之前的
        res.data.data.forEach(item => {
          selectionList.Additionalcategories.push({
            label: item.goodsName,
            value: item.goodsId,
          });
        });
      }
    }
  });
};

const emit = defineEmits(['request-data']);
defineComponent({
  emits: ['request-data'],
});
// 接收参数
const props = defineProps({
  templateData: Object,
});
console.log(props, '来自父页面参数');
const Storageloading = ref(false); //仓储品类加载
const goriesloading = ref(false); //仓储品类加载
const form = ref({
  warehouseCalculationBasis: '1', // 计算基准
  warehouseIsByCategory: '0', //是否区分品类
  warehouseIsManageFee: '0', //是否有管理费
  warehouseIsOperateFee: '0', //是否有操作/装卸费
  warehouseIsSortFee: '0', //是否有分拣费
  warehouseIsCategorySubjoin: '0', //附加费用是否按品类计费
}); //表单
// 仓储计费类型
const Storagebillingtype = ref([]);
// 仓储计费模式
const Warehousebillingmode = ref([]);
// 计算基准
const CalculationBasis = ref([]);
// 是否区分品类
const Distinguishcategories = ref([]);
// 仓库品类列表
const Warehousecategory = ref([
  {
    label: '衣柜',
    value: '1',
  },
  {
    label: '橱柜',
    value: '2',
  },
]);
// 仓储品类配置
const StoragecategoryList = ref([
  {
    id: 1,
    plus: true,
    reduce: false,
    StateName: 'storage', //仓储标识
    warehousePieceCategory: '', //输入的值
    Additionalcategories: [],
  },
]);
// 附加费品类配置
const AdditionalcategoriesList = ref([
  {
    id: 1,
    plus: true,
    reduce: false,
    StateName: 'additional', //附加费标识
    warehousePieceCategory: '', //输入的值
    Additionalcategories: [],
  },
]);
// 附加费品类
const Additionalcategories = ref([
  {
    label: '衣柜',
    value: '1',
  },
  {
    label: '橱柜',
    value: '2',
  },
]);
// 附加计费单位
const Surchargepricingunit = ref([]);
// 是否有管理费
const Managementfees = ref([]);
// 是否有操作/装卸费
const Operatingunloading = ref([]);
// 是否有分拣费
const Sortingfee = ref([]);
// 附加费用是否统一计费
const Additionalfeebilling = ref([]);

// 移除对象
function removeItemById(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;
    Storageloading.value = false;
    clearTimeout(timerId); // 在回调函数内部清除定时器
  }, 300);
}
// StateName:'storage',//仓储标识
// StateName:'additional',//附加费标识
// 添加对象
function addItemAfterId(array, id, StateName) {
  console.log(array);
  const newItem = {
    id: array.length + 1, // 新对象的 ID 为当前数组长度加 1
    plus: true, //是否显示加号
    reduce: true, //是否显示减号
    StateName, //标识
    warehousePieceCategory: '', //选择框值
    Additionalcategories: [], //选择框列表,防止后期需要改动列表值
  };
  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; //关闭加载效果
    Storageloading.value = false; //关闭加载效果
    clearTimeout(timerId); // 在回调函数内部清除定时器
  }, 300);
  // 取消定时器
}
// 仓储减
const storagereduce = id => {
  // ID当前点击的
  Storageloading.value = true; //开启加载效果
  removeItemById(StoragecategoryList.value, id); //传入配置项和对应的ID
};
// StateName:'storage',//仓储标识
// StateName:'additional',//附加费标识
// 仓储加
const storageplus = id => {
  Storageloading.value = true;
  addItemAfterId(StoragecategoryList.value, id, 'storage');
};
// 附加品类加
const categoriesplus = id => {
  goriesloading.value = true;
  addItemAfterId(AdditionalcategoriesList.value, id, 'additional');
};
// 附加品类减
const categoriesduce = id => {
  goriesloading.value = true;
  removeItemById(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') {
        Managementfees.value = { ...Distinguishcategories.value }; //是否有管理费
        Operatingunloading.value = { ...Distinguishcategories.value }; //是否有操作/装卸费
        Sortingfee.value = { ...Distinguishcategories.value }; //是否有分拣费用
        Additionalfeebilling.value = { ...Distinguishcategories.value }; //附加费用是否统一计费
      }
    })
    .catch(() => {})
    .finally(() => {});
}
// 页面初始化必要请求
const onLoad = () => {
  updateDictionary(Storagebillingtype.value, 'warehouse_pricing_type'); //仓储计费类型
  updateDictionary(Warehousebillingmode.value, 'warehouse_pricing_mode'); //仓储计费模式
  updateDictionary(CalculationBasis.value, 'warehouse_calculation_basis'); //计算基准
  updateDictionary(Distinguishcategories.value, 'price_yes_no'); //是否区分品类
  updateDictionary(Surchargepricingunit.value, 'warehouse_pricing_unit'); //附加费计价单位
};
onLoad();
// 新增
const Submit = async () => {
  await emit('request-data'); //通知父页面传递数据
  console.log(props, 'props');
  if (!props.templateData.TemplateName) {
    ElMessage({
      message: '请输入模板名称',
      type: 'warning',
    });
    return;
  } else {
    form.value.name = props.templateData.TemplateName; //模板名称
  }
  if (!props.templateData.brand) {
    ElMessage({
      message: '请选择品牌',
      type: 'warning',
    });
    return;
  } else {
    form.value.brandId = props.templateData.brand; //品牌ID
  }

  form.value.serviceType = '3'; //服务类型（仓储固定参数）
  // 如果勾选了区分品类判断是否填写了仓储品类配置
  if (categoriesDisplay.value) {
    let storage = StoragecategoryList.value.find(res => !res.warehousePieceCategory); //查看仓储品类配置是否完全没有填写
    if (storage) {
      // 如果勾选了,并且查到了有没有填写的就提示必须填写
      ElMessage({
        message: '请填写仓储品类配置',
        type: 'warning',
      });
      return;
    } else {
      console.log(StoragecategoryList.value, 'StoragecategoryList.value');
      // 如果都填写了进行数据处理
      form.value.warehousePieceCategory = StoragecategoryList.value
        .map(res => res.warehousePieceCategory)
        .join(',');
    }
  }
  // 如果勾选了附加费是否按品类计费判断是否填写了附加品类配置
  if (SurchargeDisplay.value) {
    let Surcharge = AdditionalcategoriesList.value.find(res => !res.warehousePieceCategory); //查看附加费品类配置是否完全没有填写
    if (Surcharge) {
      // 如果勾选了,并且查到了有没有填写的就提示必须填写
      ElMessage({
        message: '请填写附加品类配置',
        type: 'warning',
      });
      return;
    } else {
      // 如果都填写了进行数据处理
      form.value.warehouseSubjoinCategory = AdditionalcategoriesList.value
        .map(res => res.warehousePieceCategory)
        .join(',');
    }
  }

  console.log(form.value, '要提交的参数');
  let data = {
    ...form.value,
  };
  $_priceTemplate(data).then(res => {
    console.log(res, '提交成功之后返回值');
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      emit('request-data',res.data.data);//把获取到的数据传递给父页面
    }
    // res.data.data 返回的参数
  });
};
// 是否区分品类事件
const categoriesDisplayChange = val => {
  console.log(val);
  if (val == 1) {
    categoriesDisplay.value = true;
    StoragecategoryList.value = [
      {
        id: 1,
        plus: true,
        reduce: false,
        StateName: 'storage', //仓储标识
        warehousePieceCategory: '', //输入的值
        Additionalcategories: [],
      },
    ];
  } else {
    categoriesDisplay.value = false;
  }
};
// 附加费是否按品类计费
const AdditionalDisplayChange = val => {
  if (val == 1) {
    SurchargeDisplay.value = true;
    AdditionalcategoriesList.value = [
      {
        id: 1,
        plus: true,
        reduce: false,
        StateName: 'additional', //附加费标识
        warehousePieceCategory: '', //输入的值
        Additionalcategories: [],
      },
    ];
  } else {
    SurchargeDisplay.value = false;
  }
};
</script>

<style scoped lang="scss">
.content_max {
  padding: 10px;
}
.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;
      }
    }
  }
}
.el_hr {
  height: 1px;
  background-color: #378cbe;
  border: none;
  border-radius: 10px;
}
.el_Surcharge_title {
  margin-bottom: 10px;
}
.el_Surcharge {
}
.el_submit {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>