logpm_page/src/views/Pricesystem/Price/PriceBill.vue

<template>
  <div v-loading="details.loadingObj.pageLoading">
    <el-form label-width="130px" :model="details.form" ref="formRef">
      <!-- 计价方式 -->
      <el-form-item
        label="计价方式"
        prop="pickupPricingType"
        :rules="[{ required: true, message: '请选择计价方式', trigger: ['blur', 'change'] }]"
      >
        <el-select
          v-model="details.form.pickupPricingType"
          clearable
          multiple
          placeholder="请选择计价方式"
          style="width: 20vw"
          @change="handleChangePrcieMethod"
        >
          <el-option
            v-for="item in details.priceMethodType"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 整车计费 -->
    <el-divider content-position="left">整车计费</el-divider>
    <el-form
      v-for="(value, index) in details.form.VehicleBillingDetal"
      :key="value"
      label-width="130px"
      inline
      :model="value"
      ref="VehicleBillingFormRef"
    >
      <!-- 计价方式 -->
      <el-form-item
        label="车型"
        prop="pickupPricingType"
        :rules="[{ required: true, message: '请选择车型', trigger: ['blur', 'change'] }]"
      >
        <el-select
          v-model="value.pickupPricingType"
          style="width: 13vw"
          clearable
          placeholder="请选择车型"
          @change="handleChangePrcieMethod"
        >
          <el-option
            v-for="item in details.priceMethodType"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="整车计费(元/车)"
        prop="pickupPricing"
        :rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]"
      >
        <el-input-number
          v-model="value.pickupPricing"
          style="width: 13vw"
          :controls="false"
          :precision="2"
          :value-on-clear="0"
          :min="0"
        />
      </el-form-item>

      <el-form-item>
        <div class="button_container">
          <div class="el_table_operation">
            <!-- 新增 -->
            <span
              v-if="value.plus"
              @click="handlePlus(value, index)"
              class="el_table_operation_span_b"
              >+
            </span>
            <!-- 删除 -->
            <span
              v-if="value.reduce"
              @click="handleReduce(value, index)"
              class="el_table_operation_span_a"
              >-
            </span>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <!-- 品类计费 -->
    <!-- <template v-if="details.form.pickupIsByCategory === '1'"> -->
    <el-divider content-position="left">品类管理</el-divider>

    <template v-for="value in details.form.billTemplateDetail" :key="value.title">
      <!-- 附加费品类 -->
      <el-form-item
        label-width="130px"
        v-if="details.form.pickupPricingType.includes(value.code)"
        :label="value.title"
      >
        <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, index) in value.categories">
            <div class="el_table_idNumber">{{ index }}</div>
            <el-select
              :ref="value.title + index"
              class="el_Cselect"
              v-model="item.goods"
              filterable
              clearable
              placeholder="请选择品类"
              style="width: 240px"
              :loading="item.loading"
              @change="handleChangeCategory(item)"
              remote
              reserve-keyword
              default-first-option
              :remote-method="value => debounce(remoteMethod(value, item), 500)"
            >
              <el-option
                v-for="val in item.goodsArr"
                :key="val.goodsId"
                :label="val.goodsName"
                :value="val.goodsId"
              />
            </el-select>
            <div class="el_table_operation">
              <!-- 新增 -->
              <span
                v-if="item.plus"
                @click="handlePlus(value, index)"
                class="el_table_operation_span_b"
                >+
              </span>
              <!-- 删除 -->
              <span
                v-if="item.reduce"
                @click="handleReduce(value, index)"
                class="el_table_operation_span_a"
                >-
              </span>
            </div>
          </div>
        </div>
      </el-form-item>
    </template>
    <!-- </template> -->

    <!-- 操作按钮 -->
    <div class="flex-c-c">
      <el-button type="primary" icon="Refresh" @click="resetFormData">重置</el-button>
      <el-button type="primary" icon="Position" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { debounce, deepClone } from '@/utils/util';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getDictionaryBiz } from '@/api/system/dict';

import { postFindCategoryInfo } from '@/api/distribution/CreateOrder.js';

const instance = getCurrentInstance();

/** 表单实例 */
const formRef = ref();

const VehicleBillingFormRef = ref();

// 品类价格
interface categories {
  /** 品类名称 */
  goodsName: string;
  /** 品类id */
  goodsId: string;
  /** 显示新增 */
  plus: boolean;
  /** 显示删除 */
  reduce: boolean;
  /** 品类名映射 */
  goods: string;
  /** 模糊查询存放品类的数组 */
  goodsArr: {}[];
  /** loading */
  loading: boolean;
}

interface BillTemplateDetail {
  /** 标题 */
  title: string;
  /** 对应的code */
  code: string;
  /** 品类数组 */
  categories: categories[];
}

/** 整车计费 */
interface VehicleBilling {
  /** 车型 */
  pickupPricingType: string;
  /** 车型计费(元/车) */
  pickupPricing: number;
  /** 显示新增 */
  plus: boolean;
  /** 显示删除 */
  reduce: boolean;
}

/** 页面数据 */
const details = reactive({
  /** 计价方式集合 */
  priceMethodType: [
    {
      label: '按件',
      value: '0',
    },
    {
      label: '按整车',
      value: '1',
    },
    {
      label: '按方',
      value: '2',
    },
    {
      label: '按重量',
      value: '3',
    },
  ],

  /** 表单数据 */
  form: {
    /** 计价方式 */
    pickupPricingType: [],
    /** 计费模版详情 */
    billTemplateDetail: [] as BillTemplateDetail[],
    VehicleBillingDetal: [
      {
        /** 车型 */
        pickupPricingType: '',
        /** 车型计费(元/车) */
        pickupPricing: 0,
        plus: true,
        reduce: false,
      },
      {
        /** 车型 */
        pickupPricingType: '',
        /** 车型计费(元/车) */
        pickupPricing: 0,
        plus: true,
        reduce: true,
      },
    ] as VehicleBilling[],
  },
  /** 初始化form数据 */
  initForm: {},
  /** loading */
  loadingObj: {
    pageLoading: false,
  },
});

const validatePrice = (rule: any, value: any, callback: any) => {
  console.log('value :>> ', value);
  console.log('!value :>> ', !value);
  const message = '请输入大于0的费用';

  if (!value) {
    callback(new Error(message));
    return false;
  } else if (value <= 0) {
    callback(new Error(message));
    return false;
  } else {
    callback();
  }
};

const goriesloading = ref(false);

/** 计价方式改变时 */
const handleChangePrcieMethod = value => {
  console.log('value :>> ', value);

  let activeItem: any = {};
  for (let i = 0; i < details.lowestType.length; i++) {
    const item = details.lowestType[i];
    if (item.value !== details.form.pickupMinCostType) continue;
    activeItem = item;
    break;
  }

  if (!activeItem.MappingOrNot) return;
  if (!details.form.pickupPricingType.includes(activeItem.mapValue))
    details.form.pickupMinCostType = '0';
};

/** 处理干线计费模式 */
const handleTrunkLinePricingType = response => {
  const { code, data } = response.data;

  if (code !== 200) return;

  details.priceMethodType = data || [];

  const _billTemplateDetailArr = [];
  for (let i = 0; i < details.priceMethodType.length; i++) {
    const value = details.priceMethodType[i];

    _billTemplateDetailArr.push({
      title: value.dictValue + '计费品类',
      code: value.dictKey,
      categories: [
        {
          reduce: false,
          plus: true,
          goodsName: '',
          goodsId: '',
          goods: '',
          goodsArr: [],
          loading: false,
        },
      ],
    });
  }

  details.form.billTemplateDetail = _billTemplateDetailArr;
};

/** 处理最低计费价格 */
const handleLowestPrice = response => {
  console.log('response :>> ', response);
  const { code, data } = response.data;

  if (code !== 200) return;

  const _dataArr = [];

  if (!data) {
  }

  details.lowestType = data || [];
};

/** 获取业务字典 */
const initDictionaryBiz = async () => {
  try {
    // 干线计费方式
    const trunkLinePromise = getDictionaryBiz('trunk_line_pricing_type');
    // 最低计费价格
    const minCostPromise = getDictionaryBiz('min_cost_type');

    const [trunkLineResult, minCostResult] = await Promise.all([trunkLinePromise, minCostPromise]);

    // 处理干线
    handleTrunkLinePricingType(trunkLineResult);
    handleLowestPrice(minCostResult);

    // 初始化复制form数据
    initFormData();
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
  }
};

initDictionaryBiz();

/** 复制form初始数据 */
const initFormData = () => {
  details.initForm = deepClone(details.form);
};

/** 新增品类 */
const handlePlus = async (value: any, index: number) => {
  value.categories.splice(index + 1, 0, {
    reduce: true,
    plus: true,
    goodsName: '',
    goodsId: '',
    goods: '',
    goodsArr: [],
    loading: false,
  });

  await nextTick();

  instance.ctx.$refs[value.title + (index + 1)][0].focus();
  console.log('instance :>> ', instance.ctx);
};

/** 删除品类 */
const handleReduce = (value: any, index: number) => {
  if (index === 0) return;
  value.categories.splice(index, 1);
};

/** 货物变化时 */
const handleChangeCategory = item => {
  if (!item.goods) {
    item.goodsId = '';
    item.goodsName = '';
    return;
  }

  for (let i = 0; i < item.goodsArr.length; i++) {
    const value = item.goodsArr[i];

    if (item.goods !== value.goodsId) continue;
    item.goodsId = value.goodsId;
    item.goodsName = value.goodsName;
    break;
  }
};

/** 插混品类 */
const remoteMethod = async (value, item) => {
  try {
    if (!value) return;
    item.loading = true;

    const response = await postFindCategoryInfo({ goodsName: value });

    const { code, data } = response.data;

    if (code !== 200) return;

    item.goodsArr = data || [];
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    item.loading = false;
  }
};

/** 重置数据 */
const resetFormData = () => {
  ElMessageBox.confirm('是否重置数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    formRef.value.resetFields();

    details.loadingObj.pageLoading = true;
    details.form = deepClone(details.initForm);
    setTimeout(() => {
      details.loadingObj.pageLoading = false;
    }, 300);
  });
};

/** 提交 */
const handleSubmit = async () => {
  if (details.form.pickupPricingType.length === 0) ElMessage.error('请选择计价方式');

  let isRetrun = false;

  await formRef.value.validate(valid => {
    // if (!valid) return;
    console.log('222 :>> ', 222);
    isRetrun = !valid;
  });

  console.log('VehicleBillingFormRef.value :>> ', VehicleBillingFormRef.value);

  const _VehicleBillingPromiseAll = [];

  for (let i = 0; i < VehicleBillingFormRef.value.length; i++) {
    const value = VehicleBillingFormRef.value[i];
    _VehicleBillingPromiseAll.push(
      value.validate(valid => {
        if (isRetrun || !valid) return (isRetrun = !valid);
      })
    );
  }

  await Promise.all(_VehicleBillingPromiseAll);

  if (isRetrun) return;

  console.log('123 :>> ', 123);
};
</script>

<style lang="scss" scoped>
// 标题
:deep(.el-divider__text.is-left) {
  font-size: 20px;
  font-weight: bold;
  color: var(--el-color-primary);
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
}

.el_Cselect {
  margin-left: 10px;
}
.el_table_span {
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  width: 160px;
}

.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_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;
  }
}

.button_container {
  height: 40px;
  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;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none;
  }
}
</style>