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

<template>
  <LjDrawer
    v-if="visible"
    ref="LjDrawerRef"
    :class="`${prefixCls}`"
    :id="prefixCls"
    direction="rtl"
    size="60%"
    destroy-on-close
    append-to-body
    :show-close="false"
    @close="autoClose"
  >
    <template #header>
      <div class="flx-justify-between">
        <div class="">详细报价</div>
        <div class="flx-shrink">
          <el-button type="danger" :icon="Close" text circle @click="cancelClick"></el-button>
        </div>
      </div>
    </template>
    <template #default>
      <LjHeader class="flx-1" title="单据统计" />
      <FormulaGroup :data="isNormalFormulas" :fields="fieldsReplace" />
    </template>
  </LjDrawer>
</template>

<script setup lang="ts" name="mattressQuoteDetail_AllFormula">
import { ref, computed, watch, nextTick } from "vue";
import LjDrawer from "@/components/LjDrawer/index.vue";
import { useI18n } from "vue-i18n";
import { useDesign } from "@/hooks/useDesign";
import { useGlobalStore } from "@/stores/modules/global";
import { Close, Search } from "@element-plus/icons-vue";
import FormulaGroup from "./FormulaGroup.vue";
import LjHeader from "@/components/LjHeader/index.vue";

const { t } = useI18n();
const { prefixCls } = useDesign("bednet-formal-detail");
const globalStore = useGlobalStore();

const visible = ref(false);
const LjDrawerRef = ref();
const formulaList = ref<any>([]);
const fieldsReplace = ref<any>([]);
// const mainData = ref<any>({});
const formulaMxList = ref<any>([]);

const isNormalFormulas = computed(() => {
  return formulaList.value.filter((item: any) => item.type == 0);
});

const isMxFormulas = computed(() => {
  return formulaList.value.filter((item: any) => item.type == 2);
});
const isWeigthFormulas = computed(() => {
  return formulaList.value.filter((item: any) => item.type == 3);
});

const autoClose = () => {
  setTimeout(() => {
    visible.value = false;
  }, 200);
};

const cancelClick = () => {
  // searchField.value = "";
  LjDrawerRef.value.hide();
  // selectColumn.value = [];
  // ifAllSelect.value = false;
};

/**
 * @description 显示组件
 */
const open = (formulas: any, replace: any) => {
  visible.value = true;
  formulaList.value = formulas;
  fieldsReplace.value = replace;
  // mainData.value = data;

  formulaMxList.value;

  nextTick(() => {
    //   list.value = cloneDeep(params);
    //   oriList.value = cloneDeep(params);

    //   let arr: string[] = [];
    //   params.map((item: any) => {
    //     if (item.basicinfo && item.basicinfo.hasOwnProperty("group")) {
    //       item.basicinfo.group && !arr.includes(item.basicinfo.group) && arr.push(item.basicinfo.group);
    //     }
    //   });
    //   groupList.value = arr;

    //   selectGroup.value = group;

    LjDrawerRef.value.show();
    //   console.log("open columnsDrag.value :>> ", columnsDrag.value);

    //   nextTick(() => {
    //     initDragSelect();
    //   });
  });
};

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
$prefix-cls: "#{$namespace}-bednet-formal-detail";

.#{$prefix-cls} {
  .summary-wrapper {
    &__label-item {
      position: relative;
      margin-right: $space-a3;

      &::after {
        content: "=";
        position: absolute;
        bottom: 0;
        right: -$space-b3;
        font-size: 24px;
        color: $color-text-disable;
      }
    }
  }
}
</style>