laisiao/src/DRP/SDrpManagement/order/detail/index.vue

<template>
  <div>
    <detail-template
      :headData="mainAreaData"
      :title="'订单号:' + orderData.sonum"
      :tabs="['订单明细', '订单进度', '发货单', '收支明细', '出库单', '物流单']"
      :delParam="{
        id: '20221108152102',
        content: { sa_orderids: [router.currentRoute.value.query.id] },
      }"
      :disable="
        utils.isDisabled(orderData.status, [
          '提交',
          '审核',
          '关闭',
          '预提交',
          '确认',
          '手工关闭',
        ])
      "
      size="small"
      :hideBorder="false"
      ownertable="sa_order"
    >
      <template #operation>
        <a-space>
          <edit
            v-if="utils.hasPermission('update')"
            :data="orderData"
            @onSuccess="mianData"
            :disabled="
              utils.isDisabled(
                orderData.status,
                ['提交', '审核', '关闭'],
                specialOrder('编辑')
              )
            "
          ></edit>
          <a-button
            v-if="canPrintBoolean"
            type="primary"
            size="mini"
            @click="printData"
            >打印</a-button
          >
          <a-button
            v-if="
              orderData.type === '特殊订单' &&
              utils.hasPermission('preSubmission')
            "
            type="primary"
            @click="preSubmission"
            :disabled="
              utils.isDisabled(orderData.status, [
                '提交',
                '审核',
                '关闭',
                '预提交',
                '确认',
                '手工关闭',
              ])
            "
            >预提交</a-button
          >
          <a-button
            v-if="utils.hasPermission('submit')"
            type="primary"
            @click="submitOrder"
            :disabled="
              utils.isDisabled(
                orderData.status,
                ['提交', '审核', '关闭'],
                specialOrder('提交')
              )
            "
            >提交</a-button
          >
          <!-- <a-button type="primary" @click="backOrder" :disabled="utils.isDisabled(orderData.status,['新建','审核','关闭'],specialOrder('撤回'))">撤回</a-button> -->
        </a-space>
      </template>
      <template #customContent>
        <a-divider orientation="left" orientation-margin="0px"
          ><span class="almm">支付信息</span></a-divider
        >
        <div
          class="account-item-panel"
          v-for="item in orderData.sa_accountclassinfos"
          :key="item.index"
        >
          <div class="account-item-panel-content">
            <p style="color: red; font-weight: bold">{{ item.accountname }}</p>
            <a-divider type="vertical" />
            <p>
              实时余额: ¥<span class="accountAmount">{{
                utils.formatAmount(item.realbalance, {
                  name: "hideFields",
                  key: "realbalance",
                })
              }}</span>
            </p>
            <a-divider type="vertical" />
            <p>
              当时余额: ¥<span class="accountAmount">{{
                utils.formatAmount(item.balance, {
                  name: "hideFields",
                  key: "balance",
                })
              }}</span>
            </p>
            <a-divider type="vertical" />
            <p>
              信用额度: ¥{{
                utils.formatAmount(item.creditquota, {
                  name: "hideFields",
                  key: "creditquota",
                })
              }}
            </p>
            <a-divider type="vertical" />
            <div>
              本单支出:
              <span style="color: red"
                >¥{{
                  utils.formatAmount(item.amount, {
                    name: "hideFields",
                    key: "amount",
                  })
                }}</span
              >
            </div>
          </div>
        </div>
      </template>
      <template #tab0>
        <product-list
          ref="prodlist"
          :columns="utils.TBLayout('orderMxTable')"
          tableName="orderMxTable"
          rowKey="sa_orderitemsid"
          :param="param"
          size="small"
          :hideBorder="true"
          @onSelect="onProdSelect"
        >
          <template #operation>
            <a-space class="mt-10">
              <!-- 添加商品 -->
              <a-button
                :disabled="
                  utils.isDisabled(orderData.status, [
                    '确认',
                    '提交',
                    '审核',
                    '关闭',
                  ])
                "
                :type="isEditDisabled ? 'primary' : 'dashed'"
                @click="editRowProd"
                >{{ isEditDisabled ? "行编辑" : "保存" }}</a-button
              >
              <select-product
                ref="selectProd"
                v-if="utils.hasPermission('orderMxedit')"
                :pagination="isPromotion"
                :isSelect="isPromotion"
                :selectAll="isPromotion"
                :columns="utils.TBLayout('orderAddTable')"
                :needQuestSearch="isPromotion ? true : false"
                :disabled="
                  utils.isDisabled(
                    orderData.status,
                    ['提交', '审核', '关闭'],
                    specialOrder('编辑')
                  )
                "
                :param="listParam"
                @onSelectChange="(VAL)=>{isPromotion ? showQtyModal(VAL):addProductToBody(VAL)}"
              >
                <template #more>
                  <a-tabs
                    v-model:activeKey="activeKey"
                    v-if="isPromotion"
                    @change="tabChange"
                  >
                    <a-tab-pane
                      v-for="(item, index) in packagetypeOptions"
                      :key="index"
                      :tab="item"
                    ></a-tab-pane>
                  </a-tabs>
                </template>
                <template #tb_cell="{ data }">
                  <template v-if="data.column.dataIndex === 'qty'">
                    <a-input-number
                      style="width: 100%"
                      id="inputNumber"
                      :precision="2"
                      v-model:value="data.record.qty"
                      :min="data.record.orderminqty"
                      :step="data.record.orderaddqty"
                      :disabled="isPromotion"
                      @blur="onAddQtyChange(data.record)"
                    />
                  </template>
                  <template
                    v-if="
                      data.column.dataIndex === 'iscustom' &&
                      data.record.iscustomsize == 1
                    "
                  >
                    <a-button
                      type="link"
                      @click="openCustom(data)"
                      v-if="!data.record.isselect"
                      >定制信息</a-button
                    >
                    <a-tag v-else closable @close="closeInfo(data.record)">{{
                      infoFun(data.record)
                    }}</a-tag>
                  </template>
                </template>
              </select-product>
              <a-button
                v-if="utils.hasPermission('orderMxedit')"
                :disabled="
                  utils.isDisabled(
                    orderData.status,
                    ['提交', '审核', '关闭'],
                    selectProductList.length == 0
                  )
                "
                type="primary"
                @click="deleteProd"
                >删除商品</a-button
              >
              <changePromotionQty v-if="isPromotion" :orderData="orderData" @changePromotionQty="changePromotionEmit"/>
            </a-space>
          </template>
          <template #tb_cell="{ data }">
            <template
              v-if="
                data.column.dataIndex === 'qty' &&
                utils.hasPermission('orderMxedit')
              "
            >
              <a-input-number
                v-if="orderData.type == '特殊订单'"
                v-model:value="data.record.qty"
                :disabled="
                  utils.isDisabled(
                    orderData.status,
                    ['提交', '审核', '关闭'],
                    isEditDisabled
                  )
                "
                @change="inputChange(data.record, 'qty')"
              ></a-input-number>
              <a-input-number
                v-else
                v-model:value="data.record.qty"
                :precision="2"
                :disabled="
                  utils.isDisabled(
                    orderData.status,
                    ['提交', '审核', '关闭'],
                    isEditDisabled
                  )
                "
                :min="data.record.orderminqty"
                :step="data.record.orderaddqty"
                @change="inputChange(data.record, 'qty')"
              ></a-input-number>
            </template>
            <template
              v-if="
                data.column.dataIndex === 'remarks' &&
                utils.hasPermission('orderMxedit')
              "
            >
              <a-input
                style="width: 100%"
                :disabled="
                  utils.isDisabled(
                    orderData.status,
                    ['提交', '审核', '关闭'],
                    isEditDisabled
                  )
                "
                v-model:value="data.record.remarks"
                :min="1"
                @change="inputChange(data.record)"
              />
            </template>
            <template v-if="data.column.dataIndex === 'stockstatus'">
              {{
                data.record.invbalqty -
                  data.record.undeliqtysum -
                  data.record.unsoldqty >
                0
                  ? "有货"
                  : "无货"
              }}
            </template>
          </template>
        </product-list>
      </template>
      <template #tab1>
        <od-progress></od-progress>
      </template>
      <template #tab2>
        <dispatch-temp></dispatch-temp>
      </template>
      <template #tab3>
        <income-mx></income-mx>
      </template>
      <template #tab4>
        <sale-out-bill></sale-out-bill>
      </template>
      <template #tab5>
        <logistics-order></logistics-order>
      </template>
    </detail-template>
    <a-modal
      v-model:open="open"
      wrapClassName="oder-modal"
      title="定制信息"
      @ok="handleOk"
      style="text-align: left"
      :closable="false"
    >
      <div
        class="mt-10"
        style="display: flex; justify-content: space-evenly; margin-top: 20px"
      >
        <div style="display: flex; align-items: center; color: red">
          <span class="label">品号:{{ prod.record.itemno }}</span>
          <span
            class="label overflow"
            style="max-width: 220px; margin-left: 10px"
            >品名:
            <a-tooltip
              placement="topLeft"
              :title="prod.record.itemname"
              arrow-point-at-center
            >
              {{ prod.record.itemname }}
            </a-tooltip>
          </span>
        </div>
      </div>
      <div class="mt-10" v-if="prod.record.cheekschemeid > 0">
        <span class="label">工艺</span>
        <a-select
          v-model:value="prod.record.customcheek"
          style="width: 400px"
          placeholder="选择工艺"
        >
          <a-select-option
            v-for="item in prod.record.cheekschemedetails"
            :key="item.sa_sizeschemedetailid"
            :value="item.num"
            >{{ item.num }}</a-select-option
          >
        </a-select>
      </div>
      <div class="mt-10" v-if="prod.record.colorschemeid > 0">
        <span class="label">颜色</span>
        <a-select
          v-model:value="prod.record.customcolors"
          style="width: 400px"
          placeholder="选择颜色"
        >
          <a-select-option
            v-for="item in prod.record.colorsschemedetails"
            :key="item.sa_sizeschemedetailid"
            :value="item.num"
            >{{ item.num }}</a-select-option
          >
        </a-select>
      </div>
      <div class="mt-10" v-if="prod.record.materialschemeid > 0">
        <span class="label">选项</span>
        <a-select
          v-model:value="prod.record.custommaterial"
          style="width: 400px"
          placeholder="选择选项"
        >
          <a-select-option
            v-for="item in prod.record.materialschemedetails"
            :key="item.sa_sizeschemedetailid"
            :value="item.num"
            >{{ item.num }}</a-select-option
          >
        </a-select>
      </div>
      <div
        class="mt-10"
        v-if="prod.record.spec == '自定义' || prod.record.spec == 'custom'"
      >
        <span class="label">长度</span>
        <a-select
          v-if="prod.record.lengthschemedetails.length > 0"
          v-model:value="prod.record.length"
          style="width: 400px"
          placeholder="选择长度"
        >
          <a-select-option
            v-for="item in prod.record.lengthschemedetails"
            :key="item.sa_sizeschemedetailid"
            :value="item.num"
            >{{ item.num }}</a-select-option
          >
        </a-select>
        <a-input
          v-else
          style="width: 400px"
          v-model:value="prod.record.length"
          :placeholder="`输入${prod.record.lengthmin}到${prod.record.lengthmax}毫米`"
          @blur="
            validInput(
              prod.record,
              prod.record.lengthmin,
              prod.record.lengthmax,
              'length'
            )
          "
        >
        </a-input>
      </div>
      <div
        class="mt-10"
        v-if="prod.record.spec == '自定义' || prod.record.spec == 'custom'"
      >
        <span class="label">宽度</span>
        <a-select
          v-if="prod.record.widthschemedetails.length > 0"
          v-model:value="prod.record.width"
          style="width: 400px"
          placeholder="选择宽度"
        >
          <a-select-option
            v-for="item in prod.record.widthschemedetails"
            :key="item.sa_sizeschemedetailid"
            :value="item.num"
            >{{ item.num }}</a-select-option
          >
        </a-select>
        <a-input
          v-else
          style="width: 400px"
          v-model:value="prod.record.width"
          :placeholder="`输入${prod.record.widthmin}到${prod.record.widthmax}毫米`"
          @blur="
            validInput(
              prod.record,
              prod.record.widthmin,
              prod.record.widthmax,
              'width'
            )
          "
        >
        </a-input>
      </div>
    </a-modal>
    <a-modal v-model:open="qtyModal" :width="400" title="购买套数" ok-text="确认" cancel-text="取消" @ok="promotionToBillBody" @cancel="hideModal">
      <a-input placeholder="输入购买套数" v-model:value="promotionQty" type="number" style="margin:20px 0;" @change="promotionQtyChange"></a-input>
    </a-modal>
  </div>
</template>

<script setup>
import Api from "@/api/api";

import productList from "@/template/normalTable/index.vue";
import SelectProduct from "@/template/selectProduct/index.vue";
import detailTemplate from "@/components/detailTemplate/index.vue";
import edit from "./modules/edit.vue";
import OdProgress from "./tabs/progress.vue";
import DispatchTemp from "./tabs/dispatch.vue";
import IncomeMx from "./tabs/income.vue";
import saleOutBill from "./tabs/saleOutBill.vue";
import logisticsOrder from "./tabs/logisticsOrder.vue";
import changePromotionQty from "./modules/changePromotionQty.vue";
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/modules/auth";
import { useBaseStore } from "@/stores/modules/base";
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import {
  onMounted,
  ref,
  getCurrentInstance,
  createVNode,
  computed,
  nextTick,
} from "vue";
import utils from "@/utils/utils";
const store = useAuthStore();
const base = useBaseStore();

let { app } = storeToRefs(store);
const router = useRouter();
const mainAreaData = ref([]);
const isPromotion = computed(() => {
  return orderData.value.packagetype !== "" ? true : false;
});
const selectProd = ref();

const activeKey = ref(0);
const param = ref({
  id: 20221109093902,
  content: {
    sa_orderid: router.currentRoute.value.query.id, //订单ID
    pageNumber: 1,
    pageSize: 20,
    where: {
      condition: "",
    },
  },
});
let time = ref(null);
const prodlist = ref(null);
const orderData = ref({});
const selectProductList = ref([]);
const getId = computed(() => {
  let id = 0;
  switch (orderData.value.type) {
    case "标准订单":
      id = 20221109153502;
      break;
    case "促销订单":
      id = 20230107182302;
      break;
    default:
      id = 20221109153502;
      break;
  }
  return id;
});
const specialOrder = (btn) => {
  if (orderData.value.type === "特殊订单") {
    if (orderData.value.status === "确认" && btn === "提交") {
      return false;
    } else if (orderData.value.status === "预提交") {
      return true;
    } else if (orderData.value.status === "新建" && btn === "编辑") {
      return false;
    } else {
      return true;
    }
  } else {
    return false;
  }
};
const listParam = ref({});
const mianData = async () => {
  const res = await Api.requested({
    id: "20221108151302",
    content: {
      nocache: true,
      sa_orderid: router.currentRoute.value.query.id,
    },
  });
  orderData.value = res.data;

  listParam.value = {
    id: getId.value,
    content: {
      sa_orderid: res.data.sa_orderid,
      pageNumber: 1,
      pageSize: 20,
      where: { condition: "" },
    },
  };
  changeDataStructure(res.data);
  isPromotion ? getPackagetype() : "";
};
const changeDataStructure = (data) => {
  mainAreaData.value = utils.FormLayout("detailsHead", data);

  if (data.type === "促销订单") {
    mainAreaData.value.splice(0, 0, {
      label: "活动名称",
      value: data.promname,
      span: 4,
      style: function () {
        return { fontWeight: "bold", color: "#52c41a" };
      },
    });
    mainAreaData.value.splice(1, 0, {
      label: "方案编码",
      value: data.promnum,
      span: 2,
      style: function () {
        return { fontWeight: "bold", color: "#52c41a" };
      },
    });
  }
};
const isEditDisabled = ref(true);
const editRowProd = () => {
  if (isEditDisabled.value) {
    isEditDisabled.value = !isEditDisabled.value;
    return false;
  }
  if (hasChangeData.value.length == 0) {
    isEditDisabled.value = true;
  } else {
    updateProd(hasChangeData.value, "修改成功", () => {
      hasChangeData.value = [];
      isEditDisabled.value = true;
    });
  }
};
const changePromotionEmit = (data,fn)=>{
  updateProd(data,'修改成功',fn)
}
const updateProd = async (data, msg, fn) => {
  const res = await Api.post({
    id: 20221109093602,
    content: {
      sa_orderid: orderData.value.sa_orderid,
      sys_enterpriseid: orderData.value.sys_enterpriseid,
      type: orderData.value.type,
      sa_contractid: orderData.value.sa_contractid,
      items: data.map((e) => {
        return {
          sa_orderitemsid: e.sa_orderitemsid,
          itemid: e.itemid,
          qty: e.qty,
          price: e.price,
          amount: 0,
          defaultprice: e.defaultprice,
          remarks: e.remarks,
          length: e.length ? e.length : 0,
          width: e.width ? e.width : 0,
          sa_promotion_itemsid: e.sa_promotion_itemsid,
          customcolors: e.customcolors ? e.customcolors : "",
          customcheek: e.customcheek ? e.customcheek : "",
          custommaterial: e.custommaterial ? e.custommaterial : "",
        };
      }),
    },
  });
  utils.message(res, msg, () => {
    mianData();
    prodlist.value.listData();
    fn ? fn() : "";
  });
};
const validInput = async (record, min, max, type) => {
  if (!record[type]) return;
  if (record[type] > max) {
    record[type] = max;
  } else if (record[type] < min) {
    record[type] = min;
  } else {
    record[type] = record[type];
  }
};
const qtyModal = ref(false)
const promotionQty  = ref(null)
const promotionList = ref([])
const showQtyModal = (val)=>{
  qtyModal.value = true
  promotionList.value = val
}
const hideModal = ()=>{
  qtyModal.value = false
  promotionQty.value = null
  selectProd.value.visible = false
}
const promotionToBillBody = ()=>{
  addProductToBody(promotionList.value)
  hideModal()
}
const addProductToBody = async (val) => {
  
  let param = {
    id: 2024020201095102,
    content: {
      sa_orderid: orderData.value.sa_orderid,
      sys_enterpriseid: orderData.value.sys_enterpriseid,
      type: orderData.value.type,
      sa_contractid: 0,
      items: val,
    },
  };
  base.addRepeatProd(param,()=>{
    if (isPromotion) {
      message.error('该套餐已存在,请勿重复添加!')
      return false
    }
  }).then((res) => {
    console.log(res)
    const allowAdd = (e) => {
      if (e.iscustomsize == 1) {
        if (!e.length || !e.width) {
          message.error(e.itemname + "定制信息有误,请检查!");
        } else if (e.cheekschemeid > 0 && !e.customcheek) {
          message.error(e.itemname + "工艺定制信息有误,请检查!");
        } else if (e.colorschemeid > 0 && !e.customcolors) {
          message.error(e.itemname + "颜色定制信息有误,请检查!");
        } else if (e.materialschemeid > 0 && !e.custommaterial) {
          message.error(e.itemname + "选项定制信息有误,请检查!");
        } else {
          return {
            sa_orderitemsid: 0,
            itemid: e.itemid,
            qty:isPromotion ?e.qty * promotionQty.value : e.qty,
            length: e.length ? e.length : 0,
            width: e.width ? e.width : 0,
            customcolors: e.customcolors ? e.customcolors : 0,
            customcheek: e.customcheek ? e.customcheek : 0,
            custommaterial: e.custommaterial ? e.custommaterial : 0,
            sa_promotion_itemsid: e.sa_promotion_itemsid ?  e.sa_promotion_itemsid : 0,
          };
        }
      } else {
        return {
          sa_orderitemsid: 0,
          itemid: e.itemid,
          sa_promotion_itemsid: e.sa_promotion_itemsid ?  e.sa_promotion_itemsid : 0 ,
          qty: isPromotion ? e.qty * promotionQty.value : e.qty,
          length: 0,
          width: 0,
        };
      }
    };
    let data = val.map((e) => {
      return allowAdd(e);
    });
    data.some((e) => e == undefined)
      ? ""
      : updateProd(data, "添加成功", () => {
          prodlist.value.tableRecord = [];
        });
  });
};

const onAddQtyChange = (val) => {
  utils
    .validateInputNumber(val.orderminqty, val.qty, val.orderaddqty)
    .then((res) => {
      val.qty = res;
    });
};
const hasChangeData = ref([]);
const inputChange = (val, type) => {
  switch (type) {
    case "qty":
      val.amount = val.qty * val.price;
      break;
    default:
      break;
  }
  if (
    hasChangeData.value.some((e) => e.sa_orderitemsid == val.sa_orderitemsid)
  ) {
    hasChangeData.value.filter((e) => {
      if (e.sa_orderitemsid == val.sa_orderitemsid) {
        e = val;
        return false;
      }
    });
  } else {
    hasChangeData.value = [...hasChangeData.value, ...[val]];
  }
};
const onProdSelect = (val) => {
  selectProductList.value = val;
};
const deleteProd = () => {
  Modal.confirm({
    title: "删除商品",
    icon: createVNode(ExclamationCircleOutlined),
    content:
      orderData.value.promitionType == "套餐活动"
        ? `该商品为套餐商品，删除后该套餐下所有商品都会被删除，确认删除吗？`
        : `当前选中${selectProductList.value.length}个商品,删除${selectProductList.value.length}个商品!`,
    okText: "确认",
    cancelText: "取消",
    async onOk() {
      const res = await Api.requested({
        id: 20221109093702,
        content: {
          sa_orderid: orderData.value.sa_orderid,
          sa_orderitemsids: selectProductList.value.map((e) => {
            return e.sa_orderitemsid;
          }),
        },
      });
      utils.message(res, "删除成功", () => {
        prodlist.value.reloadSelect();
        selectProductList.value = [];
        prodlist.value.listData();
        mianData();
      });
    },
    onCancel() {},
  });
};
const submitOrder = () => {
  Modal.confirm({
    title: "提交订单",
    icon: createVNode(ExclamationCircleOutlined),
    content: `确认提交该订单吗!`,
    okText: "确认",
    cancelText: "取消",
    async onOk() {
      const res = await Api.post({
        id: 20221108153402,
        content: {
          sa_orderid: orderData.value.sa_orderid,
          sys_enterpriseid: orderData.value.sys_enterpriseid,
          sa_accountclassid: orderData.value.sa_accountclassid,
        },
      });
      utils.message(res, "提交成功", () => {
        mianData();
      });
    },
    onCancel() {},
  });
};
const backOrder = () => {
  Modal.confirm({
    title: "撤回订单",
    icon: createVNode(ExclamationCircleOutlined),
    content: `确认撤回该订单吗!`,
    okText: "确认",
    cancelText: "取消",
    async onOk() {
      const res = await Api.requested({
        id: 20230301190202,
        content: {
          sa_orderid: orderData.value.sa_orderid,
        },
      });
      utils.message(res, "撤回成功", () => {
        mianData();
      });
    },
    onCancel() {},
  });
};
const preSubmission = async () => {
  Modal.confirm({
    title: "预提交订单",
    icon: createVNode(ExclamationCircleOutlined),
    content: `确认预提交该订单吗!`,
    okText: "确认",
    cancelText: "取消",
    async onOk() {
      const res = await Api.requested({
        id: 20230331152503,
        content: {
          sa_orderid: orderData.value.sa_orderid,
          isrecheck: true,
        },
      });
      utils.message(res, "预提交成功", () => {
        mianData();
      });
    },
    onCancel() {},
  });
};
const onSearch = () => {
  param.value.content.pageNumber = 1;
  prodlist.value.listData();
};
const canPrintBoolean = ref(false);
const reportList = ref([]);
const canPrint = async () => {
  const res = await Api.requested({
    id: 20221213094401,
    content: {
      systemappid: app.value.systemappid,
    },
  });
  res.data.length > 0
    ? (canPrintBoolean.value = true)
    : (canPrintBoolean.value = false);
  reportList.value = res.data;
};
const printUrl = async (data) => {
  const res = await Api.requested({
    id: 20221213094501,
    content: {
      sys_reportid: data.sys_reportid,
      dataid: router.currentRoute.value.query.id,
    },
  });
  if (res.code == 1) {
    window.open(process.env.BASE_API + res.data);
  }
};
const record = ref({});
const printRef = ref();
const printData = () => {
  if (reportList.value.length == 1) {
    printUrl(reportList.value[0]);
  } else {
    printRef.value.open = true;
  }
};

const open = ref(false);
const prod = ref({});
const openCustom = (data) => {
  open.value = true;
  prod.value = data;
};
const handleOk = () => {
  prod.value.record.isselect = true;
  prodlist.value.data.some((item) => {
    if (item.itemid == prod.value.itemid) {
      item = prod.value;
    }
  });
  open.value = false;
};

const closeInfo = (data) => {
  data.isselect = false;
  data.customcheek = null;
  data.customcolors = null;
  data.custommaterial = null;
  data.length = null;
  data.width = null;
};
const infoFun = computed(() => {
  return (data) => {
    let customcheek = "",
      customcolors = "",
      custommaterial = "",
      length = "",
      width = "";
    if (data.cheekschemeid > 0)
      customcheek = data.cheekschemedetails.filter(
        (item) => item.num == data.customcheek
      ).length
        ? data.cheekschemedetails.filter(
            (item) => item.num == data.customcheek
          )[0].num
        : "";
    if (data.colorschemeid > 0)
      customcolors = data.colorsschemedetails.filter(
        (item) => item.num == data.customcolors
      ).length
        ? data.colorsschemedetails.filter(
            (item) => item.num == data.customcolors
          )[0].num
        : "";
    if (data.materialschemeid > 0)
      custommaterial = data.materialschemedetails.filter(
        (item) => item.num == data.custommaterial
      ).length
        ? data.materialschemedetails.filter(
            (item) => item.num == data.custommaterial
          )[0].num
        : "";
    if (data.spec == "自定义" || data.spec == "custom") {
      length = data.lengthschemedetails.filter(
        (item) => item.num == data.length
      ).length
        ? data.lengthschemedetails.filter((item) => item.num == data.length)[0]
            .num
        : "";
      width = data.widthschemedetails.filter((item) => item.num == data.width)
        .length
        ? data.widthschemedetails.filter((item) => item.num == data.width)[0]
            .num
        : "";
      if (!width) width = data.width;
      if (!length) length = data.length;
    }
    let result = "";
    if (customcheek) result = result + customcheek + ",";
    if (customcolors) result = result + customcolors + ",";
    if (custommaterial) result = result + custommaterial + ",";
    if (length) result = result + length + "x";
    if (width) result = result + width;

    return result;
  };
});
const onModeClick = async (data) => {
  printUrl(data);
};
const packagetypeOptions = ref([]);
const getPackagetype = async (fn) => {
  const res = await Api.optionstype("package");
  packagetypeOptions.value = res.data.filter((e) => {
    if (e.value == orderData.value.packagetype) {
      return e;
    }
  })[0].subvalues;
  listParam.value.content.pageSize = 100;
  listParam.value.content.where.packagetypemx = packagetypeOptions.value[0];
};
const tabChange = (val) => {
  activeKey.value = val;
  listParam.value.content.where.packagetypemx =
  packagetypeOptions.value[activeKey.value];
  selectProd.value.listData();
};

onMounted(() => {
  mianData();
  canPrint();
});
</script>
<style scoped>
.flex {
  display: flex;
}
.search-input {
  width: 300px;
  margin-bottom: 20px;
}
.account-item-panel-content {
  display: flex;
  align-items: center;
}
.account-item-panel-content p {
  margin: 0;
}
/deep/.ant-input {
  color: #000000 !important;
}
input::placeholder {
  color: #000000 !important;
}
.label {
  display: inline-block;
  margin-right: 10px;
}
.mt-10 {
  margin-bottom: 20px;
}
.overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
<style>
.oder-modal .ant-modal-title {
  display: flex !important;
  justify-content: space-evenly !important;
}
</style>