JLH/JLHWEB/src/views/quote/mattressQuote/components/Statistic.vue

<template>
  <div style="display: table">
    <el-row class="statistic-row h-full" :gutter="8" style="width: 180px" :class="{ 'is-admin': userInfo.usermode === 0 }">
      <el-col :span="24" v-for="(item, index) in statisticData" :key="index">
        <StatisticItem :data="item" v-bind="$attrs" :iforigin="props.iforigin" @click="handleClick(item)" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="mattressQuoteDetail_statistic">
import { ref, watch } from "vue";
import StatisticItem from "./StatisticItem.vue";
import { useUserStore } from "@/stores/modules/user";

interface WidgetProps {
  data: any;
  differ?: any;
  iforigin?: any;
}

interface statisticDataProps {
  /**
   * @desciption: replace关键字
   */
  key: string;
  label: string;
  subtitle?: string;
  value: number;
  origin?: number;
  /**
   * @desciption: 大小单类型
   */
  type?: number;
  power?: () => boolean;
}

const props = withDefaults(defineProps<WidgetProps>(), {
  iforigin: false
});

const emit = defineEmits(["click"]);

const { userInfo } = useUserStore();

// const statisticData = ref<statisticDataProps[]>([
//   {
//     label: "【标准金额】",
//     value: 0,
//     origin: 0
//   },
//   {
//     label: "【大单金额】",
//     value: 0,
//     origin: 0
//   },
//   {
//     label: "【车间成本】",
//     value: 0,
//     origin: 0,
//     power: () => {
//       console.log("userInfo.usermode342 :>> ", userInfo.usermode);
//       return userInfo.usermode === 0;
//     }
//   },
//   {
//     label: "【不含税出厂价】",
//     value: 0,
//     origin: 0,
//     power: () => {
//       return userInfo.usermode === 0;
//     }
//   },
//   {
//     label: "【部门含税价】",
//     value: 0,
//     origin: 0,
//     subtitle: "财务底价",
//     power: () => {
//       return userInfo.usermode === 0;
//     }
//   },
//   {
//     label: "【税金】",
//     value: 0,
//     origin: 0,
//     power: () => {
//       return userInfo.usermode === 0;
//     }
//   },
//   {
//     label: "【部门含税价】",
//     value: 0,
//     origin: 0,
//     power: () => {
//       return userInfo.usermode === 0;
//     }
//   },
//   {
//     label: "【外币价】",
//     value: 0,
//     origin: 0,
//     subtitle: "报价金额",
//     power: () => {
//       return userInfo.usermode === 0;
//     }
//   }
// ]);
const statisticData = ref<statisticDataProps[]>([
  {
    label: "【散单金额】",
    value: 0,
    origin: 0,
    key: "【部门含税价】",
    type: 1
  },
  {
    label: "【小单金额】",
    value: 0,
    origin: 0,
    key: "【部门含税价】",
    type: 4
  },
  {
    label: "【标准金额】",
    value: 0,
    origin: 0,
    key: "【部门含税价】",
    type: 2
  },
  {
    label: "【大单金额】",
    value: 0,
    origin: 0,
    key: "【部门含税价】",
    type: 3
  }
]);

watch(
  () => props.differ,
  val => {
    console.log("props.differ val :>> ", val);
    statisticData.value = statisticData.value.filter(o => {
      // let tg = val.find(item => item.label === o.key);

      let tg = val.find(item => item.type === o.type);
      if (tg) {
        let tgRl = tg.replace.find(item => item.label === o.key);
        o.value = tgRl ? tgRl.value : 0;
        console.log("tgRl,  :>> ", props.iforigin, tgRl);
        if (props.iforigin) {
          let tgori = tg.replace_origin.find(item => item.label === o.key);
          o.origin = tgori ? tgori.value : 0;
        }
      }
      if (o?.power) {
        return o.power();
      } else {
        return true;
      }
    });
    // statisticData.value = statisticData.value.filter(o => o);
  },
  { immediate: true, deep: true }
);

const handleClick = (item: any) => {
  if (userInfo.usermode === 0) {
    emit("click", item);
  }
};
</script>

<style lang="scss" scoped>
.statistic-row {
  border-radius: 8px;
  // background-color: $color-gray-3;
  padding: 8px 12px;
  // background-color: $color-primary-400;
  background-color: $color-primary-000;

  &.is-admin {
    cursor: pointer;
  }

  > .el-col:not(:nth-child(1)) {
    margin-top: 8px;

    .statistic-card {
      border-top: 0.5px solid var(--lj-color-text-border) !important;
    }
  }
}
</style>