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
          disabled
          v-model="details.form.pickupPricingType"
          clearable
          multiple
          placeholder="请选择计价方式"
          style="width: 20vw"
        >
          <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>

    <table class="table" border style="border-collapse: collapse">
      <thead class="header">
        <tr align="center">
          <th class="index">序号</th>
          <th width="200px">车型</th>
          <th width="200px">整车计费 ( 元/车 )</th>
          <th width="100px">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(value, index) in details.form.VehicleBillingDetal" :key="value">
          <td class="index">{{ index }}</td>
          <td>
            <el-select class="w100" v-model="value.vehicleType" clearable placeholder="请选择车型">
              <el-option
                v-for="item in details.priceMethodType"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              />
            </el-select>
          </td>
          <td>
            <el-input-number
              class="w100"
              v-model="value.price"
              :controls="false"
              :precision="2"
              :value-on-clear="0"
              :min="0"
            />
          </td>
          <td>
            <el-button
              v-if="index === 0"
              @click="() => handlePlusVehicle(value, index)"
              class="addButton"
              icon="Edit"
              >新 增</el-button
            >
            <el-button
              v-else
              @click="() => handleReduceVehicle(value, index)"
              class="removeButton"
              icon="CircleClose"
              >移 除</el-button
            >
          </td>
        </tr>
      </tbody>
    </table>

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

    <div class="billTemplateDetail_container">
      <template v-for="value in details.form.billTemplateDetail" :key="value.title">
        <template v-if="details.form.pickupPricingType.includes(value.code)">
          <!-- 附加费品类最低计费 -->
          <div>
            <div class="title">{{ value.title }}</div>

            <el-input-number
              v-model="value.pickupMinCostType"
              style="width: 13vw"
              :controls="false"
              :precision="2"
              :value-on-clear="0"
              :min="0"
            />
          </div>

          <!-- 附加费品类 -->
          <div>
            <div class="title">{{ value.title }}</div>

            <table class="table" border>
              <thead class="header">
                <tr>
                  <th class="index">序号</th>
                  <th width="200px">产品品类</th>
                  <th width="200px">按件计费(元/件)</th>
                </tr>
              </thead>

              <tbody>
                <tr v-for="(item, index) in value.categories">
                  <td class="index">{{ index }}</td>
                  <!-- 品类名称 -->
                  <td>{{ item.goodsName }}</td>
                  <!-- 费用 -->
                  <td>
                    <el-input-number
                      class="w100"
                      v-model="item.pickupMinCostType"
                      style="width: 100%"
                      :controls="false"
                      :precision="2"
                      :value-on-clear="0"
                      :min="0"
                    />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </template>
      </template>
    </div>
    <!-- </template> -->

    <!-- 最低计费 -->
    <el-divider content-position="left">最低计费</el-divider>
    <el-form label-width="130px" inline>
      <el-form-item
        label="最低计费价格"
        prop="pickupMinCostType"
        :rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]"
      >
        <el-input-number
          v-model="details.form.pickupMinCostType"
          style="width: 13vw"
          :controls="false"
          :precision="2"
          :value-on-clear="0"
          :min="0"
        />
      </el-form-item>

      <el-form-item
        label="加算价格"
        prop="AddOnPrice"
        :rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]"
      >
        <el-input-number
          v-model="details.form.AddOnPrice"
          style="width: 13vw"
          :controls="false"
          :precision="2"
          :value-on-clear="0"
          :min="0"
        />
      </el-form-item>
    </el-form>

    <div class="flex-c-sb">
      <el-divider content-position="left">提货路径</el-divider>

      <el-button icon="CirclePlus" class="ml10" type="primary" @click="handleAdd">
        新 增
      </el-button>
    </div>
    <table class="table w100" border style="border-collapse: collapse">
      <thead class="header">
        <tr align="center">
          <th width="25%">始发地</th>
          <th width="25%">目的地</th>
          <th width="25%">发货单位</th>
          <th width="25%">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(value, index) in details.form.VehicleBillingDetal" :key="value">
          <td></td>
          <td></td>
          <td></td>
          <td>
            <el-text @click="() => handlePlusVehicle(index)"
              ><el-icon>
                <CirclePlus />
              </el-icon>
              编 辑</el-text
            >
            <el-text class="remove" @click="() => handlePlusVehicle(index)">
              <el-icon>
                <Delete />
              </el-icon>
              删 除</el-text
            >
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 操作按钮 -->
    <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>

  <el-dialog
    title="新增提货路径"
    :visible.sync="details.popUpShow.addVsitied"
    width="70%"
    v-model="details.popUpShow.addVsitied"
  >
    <el-form inline label-width="130px">
      <el-form-item label="始发地">
        <el-select
          class="w100"
          v-model="details.form.startCity"
          clearable
          placeholder="请选择始发地"
        >
          <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="目的地">
        <el-select class="w100" v-model="details.form.endCity" clearable placeholder="请选择目的地">
          <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="模糊查询发货单位">
        <el-select class="w100" v-model="details.form.sendOrgId" clearable placeholder="请选择车型">
          <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>

    <table class="table" border style="border-collapse: collapse">
      <thead class="header">
        <tr align="center">
          <th class="index">序号</th>
          <th width="200px">车型</th>
          <th width="200px">整车计费 ( 元/车 )</th>
          <th width="100px">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(value, index) in details.form.VehicleBillingDetal" :key="value">
          <td class="index">{{ index }}</td>
          <td>
            <el-select class="w100" v-model="value.vehicleType" clearable placeholder="请选择车型">
              <el-option
                v-for="item in details.priceMethodType"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              />
            </el-select>
          </td>
          <td>
            <el-input-number
              class="w100"
              v-model="value.price"
              :controls="false"
              :precision="2"
              :value-on-clear="0"
              :min="0"
            />
          </td>
          <td>
            <el-button
              v-if="index === 0"
              @click="() => handlePlusVehicle(index)"
              class="addButton"
              icon="Edit"
              >新 增</el-button
            >
            <el-button
              v-else
              @click="() => handleReduceVehicle(index)"
              class="removeButton"
              icon="CircleClose"
              >移 除</el-button
            >
          </td>
        </tr>
      </tbody>
    </table>

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

    <div class="billTemplateDetail_container">
      <template v-for="value in details.form.billTemplateDetail" :key="value.title">
        <template v-if="details.form.pickupPricingType.includes(value.code)">
          <!-- 附加费品类最低计费 -->
          <div>
            <div class="title">{{ value.title }}</div>

            <el-input-number
              v-model="value.pickupMinCostType"
              style="width: 13vw"
              :controls="false"
              :precision="2"
              :value-on-clear="0"
              :min="0"
            />
          </div>

          <!-- 附加费品类 -->
          <div>
            <div class="title">{{ value.title }}</div>

            <table class="table" border>
              <thead class="header">
                <tr>
                  <th class="index">序号</th>
                  <th width="200px">产品品类</th>
                  <th width="200px">按件计费(元/件)</th>
                </tr>
              </thead>

              <tbody>
                <tr v-for="(item, index) in value.categories">
                  <td class="index">{{ index }}</td>
                  <!-- 品类名称 -->
                  <td>{{ item.goodsName }}</td>
                  <!-- 费用 -->
                  <td>
                    <el-input-number
                      class="w100"
                      v-model="item.pickupMinCostType"
                      style="width: 100%"
                      :controls="false"
                      :precision="2"
                      :value-on-clear="0"
                      :min="0"
                    />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </template>
      </template>
    </div>
    <!-- </template> -->

    <!-- 最低计费 -->
    <el-divider content-position="left">最低计费</el-divider>
    <el-form label-width="130px" inline>
      <el-form-item
        label="最低计费价格"
        prop="pickupMinCostType"
        :rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]"
      >
        <el-input-number
          v-model="details.form.pickupMinCostType"
          style="width: 13vw"
          :controls="false"
          :precision="2"
          :value-on-clear="0"
          :min="0"
        />
      </el-form-item>

      <el-form-item
        label="加算价格"
        prop="AddOnPrice"
        :rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]"
      >
        <el-input-number
          v-model="details.form.AddOnPrice"
          style="width: 13vw"
          :controls="false"
          :precision="2"
          :value-on-clear="0"
          :min="0"
        />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="details.popUpShow.addVsitied = false">关 闭</el-button>
      <el-button type="primary" @click="handleSubmit">提 交</el-button>
    </span>
  </el-dialog>
</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 props = defineProps({
  templateData: Object,
});

/** 表单实例 */
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;
  /** 车型计费(元/车) */
  price: number;
}

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

  /** 表单数据 */
  form: {
    /** 计价方式 */
    pickupPricingType: [],
    /** 计费模版详情 */
    billTemplateDetail: [] as BillTemplateDetail[],
    VehicleBillingDetal: [
      {
        /** 车型 */
        pickupPricingType: '',
        /** 车型计费(元/车) */
        price: 0,
      },
      {
        /** 车型 */
        pickupPricingType: '',
        /** 车型计费(元/车) */
        price: 0,
      },
    ] as VehicleBilling[],
  },
  /** 初始化form数据 */
  initForm: {},
  /** loading */
  loadingObj: {
    pageLoading: false,
  },
  popUpShow: {
    addVsitied: 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 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];
    if (value.dictKey != '2') {
      const _itemObj = {
        title: value.dictValue + '计费品类',
        code: value.dictKey,
        categories: [
          {
            reduce: false,
            plus: true,
            goodsName: '',
            goodsId: '',
            goods: '',
            goodsArr: [],
            loading: false,
          },
        ],
      };

      if (!props.templateData.request) {
        _billTemplateDetailArr.push(_itemObj);
        continue;
      }

      const _arr = [];

      // 按件
      if (value.dictKey === '1') {
        const { pickupPieceCategorys } = props.templateData.request;

        if (pickupPieceCategorys && pickupPieceCategorys.length !== 0) {
          for (let i = 0; i < pickupPieceCategorys.length; i++) {
            const item = pickupPieceCategorys[i];

            _arr.push({
              reduce: i === 0 ? false : true,
              plus: true,
              goodsName: item.name,
              goodsId: item.id,
              goods: item.name,
              goodsArr: [],
              loading: false,
            });
          }

          _itemObj.categories = _arr;
        }
      }
      // 按重量
      if (value.dictKey === '4') {
        const { pickupWeightCategorys } = props.templateData.request;

        if (pickupWeightCategorys && pickupWeightCategorys.length !== 0) {
          for (let i = 0; i < pickupWeightCategorys.length; i++) {
            const item = pickupWeightCategorys[i];

            _arr.push({
              reduce: i === 0 ? false : true,
              plus: true,
              goodsName: item.name,
              goodsId: item.id,
              goods: item.name,
              goodsArr: [],
              loading: false,
            });
          }

          _itemObj.categories = _arr;
        }
      }

      // 按方
      if (value.dictKey === '3') {
        const { pickupCubeCategorys } = props.templateData.request;

        if (pickupCubeCategorys && pickupCubeCategorys.length !== 0) {
          for (let i = 0; i < pickupCubeCategorys.length; i++) {
            const item = pickupCubeCategorys[i];

            _arr.push({
              reduce: i === 0 ? false : true,
              plus: true,
              goodsName: item.name,
              goodsId: item.id,
              goods: item.name,
              goodsArr: [],
              loading: false,
            });
          }

          _itemObj.categories = _arr;
        }
      }

      _billTemplateDetailArr.push(_itemObj);
    }
  }

  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]);

    await nextTick();

    if (Object.keys(props.templateData).length !== 0) {
      details.form = deepClone(props.templateData.request);

      details.form.pickupPricingType = details.form.pickupPricingType
        ? details.form.pickupPricingType.split(',')
        : [];
      details.form.pickupIsByCategory += '';
      details.form.pickupMinCostType += '';
      details.form.pickupIsUnifyAreaBill += '';
      details.form.pickupIsMinCost += '';
    }

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

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

initDictionaryBiz();

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

/** 新增车辆 */
const handlePlusVehicle = async (index: number) => {
  details.form.VehicleBillingDetal.splice(index + 1, 0, {
    /** 车型 */
    pickupPricingType: '',
    /** 车型计费(元/车) */
    price: 0,
  });

  // await nextTick();

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

/** 删除车辆 */
const handleReduceVehicle = (index: number) => {
  if (index === 0) return;
  details.form.VehicleBillingDetal.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 handleAdd = () => {
  details.popUpShow.addVsitied = true;
};

/** 重置数据 */
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 {
    width: 240px;
    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;
}

.title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--el-color-primary);
  margin-bottom: 10px;
}

.table {
  text-align: center;
  border-color: #e8e8e8;
  font-size: 12px;
  line-height: 17px;
  font-weight: bold;

  td,
  th {
    padding: 5px 10px;
    box-sizing: border-box;
  }

  th.index {
    width: fit-content;
    padding: 0 20px;
  }

  td.index {
    font-size: 14px;
  }

  th {
    height: 32px;
  }

  .header {
    background: #f5f8fa;
  }
}

:deep(.el-divider__text.is-left) {
  font-size: 1.04167vw;
  font-weight: bold;
  color: #d3832a;
}

// 新增按钮
.addButton {
  background: #0086f1;
  border-color: #0086f1;
  color: #fff !important;

  &:hover {
    background: #79bbff;
    border-color: #79bbff;
  }
}

// 移除按钮
.removeButton {
  background: #f85b52;
  border-color: #f85b52;
  color: #fff !important;

  &:hover {
    background: #f89898;
    border-color: #f89898;
  }
}

.w100 {
  width: 100% !important;
}

:deep(.el-text) {
  color: #d3832a !important;
  font-weight: normal;
  cursor: pointer;
  margin-right: 15px;

  &.remove {
    color: #f85b52 !important;
  }
}

.billTemplateDetail_container {
  display: flex;
  flex-wrap: wrap;

  & > div {
    margin-right: 20px;
  }
}
</style>