阶梯报价、成本报价 ​

<template>
  <div class="detail-page">
    <q-detail-page-layout
      ref="layoutRef"
      v-bind="options"
    ></q-detail-page-layout>

    <!-- 阶梯报价 -->
    <ladder-price-modal
      v-model="ladderPriceVisible"
      :value="ladderPriceValue"
      :cachePayload="ladderPriceCachePayload"
      disabled
    ></ladder-price-modal>

    <!-- 成本模板 详情 -->
    <cost-price-detail
      v-model="priceDetailShow"
      :currentRow="priceRow"
      :priceData="priceData"
      :groups="priceGroups"
      :priceMap="priceMap"
      :cachePageData="cachePageData"
      :cachePayload="cachePayload"
    ></cost-price-detail>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive } from "vue";
import type { ComponentPublicInstance } from "vue";
import type { VxeColumnSlotTypes, VxeTableDataRow } from "vxe-table";
import type { GlobalPageLayoutTypes } from "@qqt-product/ui";

import { useRefInstanceHook } from "@qqt-product/ui";
import { loadJS, getRemoteJsFilePath } from "@qqt-product/ui";

// 全局数据缓存
// 当前行 currentRow, 当前用户信息 userInfo
import { useGlobalStoreWithDefaultValue } from "@/use/useGlobalStore";

import CostPriceDetail from "./components/costPriceDetail.vue";
import LadderPriceDisplay from "./components/ladderPriceDisplay.vue";
import LadderPriceModal from "./components/ladderPriceModal.vue";
// 工具函数及types
import qqtUtils from "@qqt-product/utils";
const { cloneDeep } = qqtUtils;

const ladderPriceVisible = ref<boolean>(false);
const ladderPriceValue = ref<string>("");
// 缓存行信息
const ladderPriceCachePayload =
  ref<VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>>();

const cachePageData = ref<GlobalPageLayoutTypes.RecordString>({});
const priceDetailShow = ref<boolean>(false);
const priceRow = ref<GlobalPageLayoutTypes.CurrentRow>({
  templateNumber: "",
  templateVersion: 0,
  templateAccount: "",
  busAccount: "",
  elsAccount: "",
});
const priceGroups = ref<GlobalPageLayoutTypes.Group[]>([]);
const priceData = ref<GlobalPageLayoutTypes.RecordString>({});
const priceMap = ref<GlobalPageLayoutTypes.RecordString>({});

// 缓存行信息
const cachePayload =
  ref<VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>>();
const { token, userInfo } = useGlobalStoreWithDefaultValue();

// 组件 ref
const layoutRef = ref<ComponentPublicInstance | null>(null);

const { pageData } = useRefInstanceHook(layoutRef);

const openCostPrice = async (
  payload: VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>
) => {
  const row = payload.row;
  cachePayload.value = payload;
  const costFormJson = row.costFormJson || "";

  if (costFormJson) {
    try {
      const obj = JSON.parse(costFormJson);

      const {
        templateName = "",
        templateAccount = "",
        templateNumber = "",
        templateVersion = 0,
        busAccount = "",
        elsAccount = "",
        id = "",
      } = obj;

      priceRow.value = {
        templateName,
        templateAccount,
        templateNumber,
        templateVersion,
        busAccount,
        elsAccount,
        id,
      };

      priceData.value = obj.data
        ? (obj.data as GlobalPageLayoutTypes.RecordString)
        : {};

      const filePath: string = getRemoteJsFilePath({
        currentRow: priceRow.value,
        userInfo: userInfo.value as GlobalPageLayoutTypes.UserInfo,
        businessType: "costForm",
        role: "purchase",
        token: token.value,
      });

      const config = (await loadJS(
        `${filePath}?t=${+new Date()}`
      )) as GlobalPageLayoutTypes.RemoteConfig;
      const groups = (config.groups as GlobalPageLayoutTypes.Group[]) || [];
      const itemColumns = config.itemColumns || [];
      if (groups && groups.length) {
        priceGroups.value = cloneDeep(groups);
        // 获取 group 分组的 sum 合计列的 field
        priceMap.value = groups.reduce((acc, group) => {
          if (acc[group.groupCode]) {
            acc[group.groupCode] = "";
          }
          const { field = "" } = itemColumns.find(
            (n) => n.groupCode === group.groupCode && n.sum === "1"
          ) || { field: "" };
          acc[group.groupCode] = field;
          return acc;
        }, {});
      }

      cachePageData.value = cloneDeep(pageData.value);
      priceDetailShow.value = true;
    } catch (err) {
      console.log(err);
    }
  }
};

const handleAfterRemoteConfig = (config) => {
  const itemColumns = config.itemColumns || [];
  itemColumns.forEach((n) => {
    if (n.field == "costFormJson") {
      n.slots = {
        default(
          payload: VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>
        ) {
          const row = payload.row;
          let name = "";
          let flag = false;
          try {
            const costFormJson = row.costFormJson || "";
            if (costFormJson) {
              const obj = JSON.parse(costFormJson);
              if (obj.templateName) {
                name = obj.templateName;
                flag = true;
              }
            }
          } catch (err) {
            flag = false;
            console.log(err);
          }

          const elem = flag ? (
            <a style="color: #1677ff;" onClick={() => openCostPrice(payload)}>
              {name}
            </a>
          ) : null;

          // 报价方式 quotePriceWay
          // 数据字典 srmQuotePriceWay (0: 常规报价, 1: 阶梯报价, 2: 成本报价)

          return [row.quotePriceWay === "2" ? elem : null];
        },
      };
    }

    // 阶梯报价JSON
    if (n.field === "ladderPriceJson") {
      n.fieldType = "";
      n.width = 250;
      n.slots = {
        default(
          payload: VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>
        ) {
          const { row, column } = payload;
          const val = row[column.field] || "";
          const handleLadderPriceClick = () => {
            ladderPriceCachePayload.value = payload;
            ladderPriceValue.value = val;
            ladderPriceVisible.value = true;
          };

          // 报价方式 quotePriceWay
          // 数据字典 srmQuotePriceWay (0: 常规报价, 1: 阶梯报价, 2: 成本报价)
          const elem =
            row.quotePriceWay === "1" ? (
              <LadderPriceDisplay
                value={val}
                onClick={handleLadderPriceClick}
                disabled={true}
              ></LadderPriceDisplay>
            ) : null;

          return [elem];
        },
      };
    }
  });
  return config;
};

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // ...
  handleAfterRemoteConfig,
});
</script>

<template>
  <div :class="['ladder-price-display', str && !props.disabled ? 'set' : '']">
    <a-tooltip overlayClassName="tip-overlay-class">
      <template #title>
        <div class="grid">
          <vxe-table
            ref="xGrid"
            auto-resize
            border
            row-id="id"
            size="mini"
            :data="tableData"
          >
            <vxe-table-column
              type="seq"
              :title="srmI18n('i18n_alert_seq', '序号')"
              width="80"
            ></vxe-table-column>
            <vxe-table-column
              field="ladder"
              :title="srmI18n('i18n_title_ladderLeve', '阶梯级')"
              width="140"
            ></vxe-table-column>
            <vxe-table-column
              field="price"
              :title="srmI18n('i18n_title_price', '含税价')"
              width="140"
            ></vxe-table-column>
            <vxe-table-column
              field="netPrice"
              :title="srmI18n('i18n_title_netPrice', '不含税价')"
              width="140"
            ></vxe-table-column>
          </vxe-table>
        </div>
      </template>
      {{ str }}
    </a-tooltip>
    <a class="icons">
      <StockOutlined @click="handleClick" />
      <CloseCircleOutlined
        v-show="str && !props.disabled"
        class="clear"
        @click="handleClear"
      />
    </a>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { StockOutlined, CloseCircleOutlined } from "@ant-design/icons-vue";
// 国际化
import { srmI18n } from "@/utils/srmI18n";
// ui组件库 types
import type { GlobalPageLayoutTypes } from "@qqt-product/ui";

type Props = {
  value: string;
  disabled?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  value: "",
  disabled: false,
});

const emit = defineEmits<{
  (e: "click"): void;
  (e: "clear"): void;
}>();

const str = computed<string>(() => {
  if (props.value) {
    try {
      const arr = JSON.parse(props.value);
      if (Array.isArray(arr)) {
        return arr.map((n) => `${n.ladder}:${n.price || ""}`).join(";");
      }
    } catch (err) {
      console.log("parse ladderPriceJSON error :>> ", err);
    }
  }
  return "";
});

const tableData = computed<GlobalPageLayoutTypes.RecordString[]>(() => {
  if (props.value) {
    try {
      const arr = JSON.parse(props.value);
      if (Array.isArray(arr)) {
        return arr;
      }
    } catch (err) {
      console.log("parse ladderPriceJSON error :>> ", err);
    }
  }
  return [];
});

const handleClick = () => emit("click");
const handleClear = () => emit("clear");
</script>

<style lang="less" scoped>
.ladder-price-display {
  position: relative;
  height: 36px;
  line-height: 36px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  a:hover {
    color: #1677ff;
  }
  &.set {
    padding-right: 42px;
  }
  .icons {
    position: absolute;
    // display: inline-block
    font-size: 16px;
    right: 0px;
    top: 3px;
    z-index: 10;
  }
  .clear {
    color: red;
    margin-left: 8px;
    &.unDelete {
      color: rgba(0, 0, 0, 0.25);
      cursor: not-allowed;
    }
  }
}
</style>

<template>
  <div class="checkPrice">
    <q-basic-modal
      :visible="modelValue"
      :width="1000"
      :title="srmI18n('i18n_title_ladderSetting', '阶梯设置')"
      :maskClosable="false"
      :keyboard="false"
      :bodyStyle="{ padding: '0 12px' }"
      @cancel="handleCancel"
      @ok="handleOk"
    >
      <div class="form" v-if="!disabled">
        <a-form
          style="display: flex; flex-flow: row wrap; margin: 4px"
          layout="inline"
        >
          <a-form-item
            style="margin-right: 12px"
            :label="srmI18n('i18n_title_ladderCount', '阶梯数量')"
          >
            <a-input-number
              style="width: 200px"
              placeholder="请输入大于0的阶梯数量"
              v-model:value="form.ladderQuantity"
              :min="0"
              @pressEnter="setData"
            />
          </a-form-item>
          <a-form-item style="margin-right: 12px">
            <a-button type="primary" @click="setData">{{
              srmI18n("i18n_title_add", "添加")
            }}</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="grid" style="margin-top: 12px">
        <vxe-grid
          ref="xGrid"
          v-bind="gridConfig"
          :columns="columns"
          :data="tableData"
        >
          <template #empty>
            <q-empty></q-empty>
          </template>
        </vxe-grid>
      </div>
    </q-basic-modal>
  </div>
</template>

<script lang="tsx" setup>
import { ref, toRefs, watch } from "vue";
import { srmI18n } from "@/utils/srmI18n";
// ui组件库 types
import type { GlobalPageLayoutTypes } from "@qqt-product/ui";
import type {
  VxeGridInstance,
  VxeGridProps,
  VxeGridPropTypes,
  VxeColumnSlotTypes,
  VxeTableDataRow,
} from "vxe-table";

import { editVxeTableConfig } from "@qqt-product/ui";
import { message as Message } from "ant-design-vue";
import qqtUtils from "@qqt-product/utils";
const { cloneDeep } = qqtUtils;

interface Props {
  modelValue: boolean;
  value: string;
  cachePayload:
    | VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>
    | undefined;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  value: "",
  disabled: false,
});
const { modelValue, disabled } = toRefs(props);

const emit = defineEmits<{
  (e: "update:modelValue", modelValue: boolean): void;
  (e: "success", val: string): void;
}>();

const LT = "< x <";
const ELT = "<= x <";
const GT = "<= x";

const xGrid = ref<VxeGridInstance>();

const rawState = {
  ladderQuantity: "",
};

const form = ref<GlobalPageLayoutTypes.RecordString>(rawState);

const tableData = ref<GlobalPageLayoutTypes.RecordString[]>([]);

const gridConfig: VxeGridProps = {
  ...editVxeTableConfig,
  rowConfig: {
    keyField: "id",
    isHover: true,
    isCurrent: true,
  },
  radioConfig: {
    trigger: "row",
  },
  height: 340,
  keyboardConfig: {},
  menuConfig: {},
  mouseConfig: {}, // 鼠标配置项
  areaConfig: {}, // 按键配置项
};

const columns: VxeGridPropTypes.Columns = [
  { type: "seq", width: 60, fixed: "left" },
  {
    field: "ladder",
    title: srmI18n("i18n_title_ladderLeve", "阶梯级"),
    width: 150,
  },
  {
    field: "ladderQuantity",
    title: srmI18n("i18n_title_ladderCount", "阶梯数量"),
    minWidth: 150,
  },
  {
    field: "price",
    title: srmI18n("i18n_title_price", "含税价"),
    minWidth: 150,
  },
  {
    field: "netPrice",
    title: srmI18n("i18n_title_netPrice", "不含税价"),
    minWidth: 150,
  },
  {
    field: "grid_operation",
    // fixed: 'right',
    title: "操作",
    width: 140,
    slots: {
      default({
        $rowIndex,
      }: VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>) {
        const handleDelete = () => {
          tableData.value.splice($rowIndex, 1);
        };

        return [
          <a-button
            type="text"
            danger
            disabled={
              disabled.value || $rowIndex !== tableData.value.length - 1
            }
            onClick={handleDelete}
          >
            {srmI18n(`i18n_title_delete`, "删除")}
          </a-button>,
        ];
      },
    },
  },
];

const setNltRow = () => {
  if (tableData.value.length <= 1) return;
  if (tableData.value.length > 2) {
    let last = tableData.value[tableData.value.length - 1];
    let prev = tableData.value[tableData.value.length - 2];
    prev.ladder = `${prev.ladderQuantity} ${ELT} ${last.ladderQuantity}`;
  } else {
    let last = tableData.value[tableData.value.length - 1];
    last.ladder = `${last.ladderQuantity} ${GT}`;
  }
};

const setData = () => {
  const val = form.value.ladderQuantity;
  if (!val) {
    Message.error(srmI18n("title_pleaseEnterladderCount", "请输入阶梯数量"));
    return;
  }
  if (val <= 1) {
    Message.error(srmI18n("i18n_title_ladderMostOne", "梯数量必须大于1"));
    return;
  }
  let taxCode = "";
  let taxRate = "";
  if (props.cachePayload) {
    taxCode = props.cachePayload.row.taxCode || "";
    taxRate = props.cachePayload.row.taxRate || "";
  }

  if (tableData.value.length === 0) {
    let row = {
      ladderQuantity: 0,
      ladder: `0 ${LT} ${val}`,
      price: "",
      netPrice: "",
      taxCode,
      taxRate,
    };
    tableData.value.push(row);
  } else {
    let flag = tableData.value.every((n) => n.ladderQuantity < val);
    if (!flag) {
      Message.error(
        srmI18n(
          "i18n_title_ladderMostLastLadderCount",
          "阶梯数量必须大于上一阶梯数量"
        )
      );
      return;
    }
  }
  let row = {
    ladderQuantity: val,
    ladder: `${val} ${GT}`,
    price: "",
    netPrice: "",
    taxCode,
    taxRate,
  };
  tableData.value.push(row);
  setNltRow();

  form.value.ladderQuantity = "";
};

const resetData = () => {
  tableData.value = [];
  form.value = { ...rawState };
};

watch(modelValue, (bool) => {
  if (bool) {
    init();
  } else {
    resetData();
  }
});

const handleCancel = () => {
  emit("update:modelValue", false);
};

const handleOk = () => {
  const arr = cloneDeep(tableData.value);
  emit("success", JSON.stringify(arr));
  handleCancel();
};

const init = () => {
  if (props.value) {
    try {
      const arr = JSON.parse(props.value);
      if (Array.isArray(arr)) {
        tableData.value = arr;
      }
    } catch (err) {
      console.log("parse ladderPriceJSON error :>> ", err);
    }
  }
};
</script>