sd-new-vue/src/views/process/processApproval/index.vue

<template>
  <div class="processApproval">
    <div class="left-card">
      <div class="top">
        <div class="commons-title title">
          <span>
            {{
              queryData.query.flowName
                ? queryData.query.flowName + (queryData.query.processType ? typeName[queryData.query.processType] : "（发起）")
                : keyName[queryData.query.flowKey] + "（审批）"
            }}
          </span>
          <el-button type="primary" size="small" @click="clickRecords()" v-preReClick>审批记录</el-button>
          <el-button
            type="primary"
            size="small"
            @click="clickViewPackaging()"
            v-if="queryData.query.processType && ['10', '20'].includes(queryData.query.processType) && queryData.query.flowKey == 'order'"
            v-preReClick>
            包装配置
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="clickOrderLog()"
            v-if="queryData.query.processType && ['10', '20'].includes(queryData.query.processType) && queryData.query.flowKey == 'order'"
            v-preReClick>
            订单操作日志
          </el-button>
        </div>
        <div class="line"></div>
        <Subscribe :queryData="detailsData.data" v-if="queryData.query.flowKey == 'apply_buy'" ref="makeDom"></Subscribe>
        <Purchase :queryData="detailsData.data" v-else-if="queryData.query.flowKey == 'purchase'" ref="makeDom"></Purchase>
        <Order :queryData="detailsData.data" v-else-if="queryData.query.flowKey == 'order'" ref="makeDom"></Order>
        <ReturnGoods :queryData="detailsData.data" v-else-if="queryData.query.flowKey == 'purchase_return'" ref="makeDom"></ReturnGoods>
        <OrderDelete :queryData="detailsData.data" :recordList="recordList" v-else-if="queryData.query.flowKey == 'order_delete'" ref="makeDom"></OrderDelete>
      </div>
      <div class="bottom" v-if="route.query.processType != 20">
        <div class="commons-title title">处理意见</div>
        <el-form :model="flowForm" :rules="flowRules" ref="flowFormDom">
          <el-form-item prop="remark" label-width="0px" label="">
            <el-input type="textarea" placeholder="请输入" v-model="flowForm.remark"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              v-if="(!queryData.query.processType || ['30', '40'].includes(queryData.query.processType)) && queryData.query.flowKey != 'purchase_return'"
              @click="handleSaveDraft"
              v-preReClick>
              保存草稿
            </el-button>
            <el-button
              type="primary"
              v-if="(!queryData.query.processType || ['30', '40'].includes(queryData.query.processType)) && queryData.query.flowKey == 'order'"
              @click="handlePackagingConfiguration"
              v-preReClick>
              包装配置
            </el-button>
            <el-button type="primary" v-if="approvalRecordData.buttonInfoList.length == 0" @click="handleSubmit" v-preReClick>提交</el-button>
            <el-button type="primary" v-else v-for="i in approvalRecordData.buttonInfoList" :key="i.type" @click="handleSubmit(i.type)" v-preReClick>
              {{ i.name }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog title="下一处理人" width="400" v-model="dialogVisible">
      <el-form :model="flowForm">
        <el-form-item prop="remark" label="处理人">
          <el-select v-model="flowForm.handleUserId" placeholder="请选择" filterable style="width: 100%">
            <el-option v-for="item in nextHandleUser" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%; text-align: center">
            <el-button type="primary" @click="handleSelectUser" v-preReClick>提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-drawer v-model="drawer" :direction="'rtl'">
      <div class="right-card">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="审批记录" name="first">
            <ul class="flow-chart">
              <li
                v-for="(item, index) in recordList"
                :key="item.id"
                :class="
                  !queryData.query.flowId
                    ? index === 0
                      ? 'flow-orange'
                      : 'flow-grey'
                    : item.status == 2
                    ? 'flow-orange'
                    : item.status == 3 && !queryData.query.flowId
                    ? 'flow-orange'
                    : item.status == 3 && queryData.query.flowId
                    ? 'flow-grey'
                    : ''
                ">
                <div class="left-icon">
                  <i class="iconfont icon-iconm_daick"></i>
                  <i class="iconfont icon-icomx_quertj1 right-btm-status"></i>
                </div>
                <div class="right-conetnt">
                  <div class="name">{{ item.nodeName }}</div>
                  <div class="remark">
                    <div class="label">
                      <span v-if="item.status != 3">办理人：</span>{{ item.processedUser }}<span class="time">{{ item.processedDate }}</span>
                    </div>
                    {{ item.remark }}
                    <div v-for="j in fileObj[item.flowExampleDetailId]" v-if="fileObj[item.flowExampleDetailId]">
                      <a :href="j.fileUrl" style="color: #409eff; line-height: 30px">{{ j.fileName }}</a>
                    </div>
                  </div>
                </div>
                <div class="line"></div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>

    <el-dialog title="包装配置" v-if="openShippingPackage" v-model="openShippingPackage" width="80%">
      <div style="height: calc(100vh - 184px); overflow-y: auto; overflow-x: hidden">
        <el-form :model="formShippingPackage.data" :rules="rulesShippingPackage" ref="shippingPackage">
          <div style="font-weight: 700; margin: 20px 0 10px 0">发货包装</div>
          <div style="margin-bottom: 10px">
            <el-button type="primary" size="small" @click="clickSelectAssembly()">选择常用组合</el-button>
            <el-button type="primary" size="small" @click="clickExpressPacking()">选择快递物流包材</el-button>
          </div>
          <el-table :data="formShippingPackage.data.orderPackageBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
            <el-table-column label="品号" prop="code" width="160" />
            <el-table-column label="品名" prop="name" min-width="220" />
            <el-table-column label="销售单价" prop="internalSellingPrice" width="100" />
            <el-table-column label="成本单价" prop="costPrice" width="100" />
            <el-table-column label="数量" width="120">
              <template #default="{ row, $index }">
                <div class="shippingPackage">
                  <el-form-item
                    :prop="'orderPackageBomList.' + $index + '.quantity'"
                    :rules="rulesShippingPackage.quantity"
                    :inline-message="true"
                    style="width: 100%">
                    <el-input-number
                      onmousewheel="return false;"
                      v-model="row.quantity"
                      placeholder="修正数量"
                      style="width: 100%"
                      :controls="false"
                      :min="0"
                      :precision="0" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="销售小计" width="120">
              <template #default="{ row }">
                {{ moneyFormat(computeMoney(row, "internalSellingPrice"), 2) }}
              </template>
            </el-table-column>
            <el-table-column label="成本小计" width="120">
              <template #default="{ row }">
                {{ moneyFormat(computeMoney(row, "costPrice"), 2) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="80">
              <template #default="{ $index }">
                <el-button type="danger" @click="clickDelete($index)" text>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="font-weight: 700; margin: 20px 0 10px 0">外箱不干胶图稿</div>
          <div style="display: flex; width: 100%">
            <div style="width: 80px; line-height: 32px">不干胶图片:</div>
            <div style="width: calc(100% - 80px)">
              <el-image
                fit="scale-down"
                style="width: 148px; height: 148px; margin-right: 10px; cursor: pointer"
                v-if="formShippingPackage.data.outerBoxSelfAdhesiveStickerFile && formShippingPackage.data.outerBoxSelfAdhesiveStickerFile.fileUrl"
                :src="formShippingPackage.data.outerBoxSelfAdhesiveStickerFile.fileUrl"
                @click="openFile(formShippingPackage.data.outerBoxSelfAdhesiveStickerFile.fileUrl)" />
              <div style="display: flex">
                <el-upload
                  :show-file-list="false"
                  action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                  :data="uploadAdhesiveData"
                  :before-upload="uploadAdhesiveFile"
                  :on-success="
                    (response, uploadFile) => {
                      return handleAdhesiveSuccess(uploadFile);
                    }
                  "
                  style="width: 100%">
                  <el-button type="primary" text>上传文件</el-button>
                </el-upload>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <template #footer>
        <el-button type="primary" @click="clickSaveAssembly" v-preReClick>保存常用组合</el-button>
        <el-button @click="openShippingPackage = false">取 消</el-button>
        <el-button type="primary" @click="clickSaveShippingPackage" v-preReClick>保 存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="选择快递包装" v-if="openExpressPacking" v-model="openExpressPacking" width="90%">
      <SelectBOM :selectStatus="true" :expressStatus="true" @selectBOM="selectExpressPacking"></SelectBOM>
      <template #footer>
        <el-button @click="openExpressPacking = false">关 闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="保存常用组合" v-if="openAssembly" v-model="openAssembly" width="500">
      <el-form :model="formShippingPackage.data" :rules="rulesAssembly" ref="assembly">
        <el-form-item label="组合名称" prop="assemblyName">
          <el-input v-model="formShippingPackage.data.assemblyName" placeholder="请输入组合名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="openAssembly = false">关 闭</el-button>
        <el-button type="primary" @click="submitAssembly" v-preReClick>保 存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="选择常用组合" v-if="openSelectAssembly" v-model="openSelectAssembly" width="700">
      <SelectAssembly @selectAssembly="selectAssembly"></SelectAssembly>
      <template #footer>
        <el-button @click="openSelectAssembly = false">关 闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="包装配置" v-if="openViewPackaging" v-model="openViewPackaging" width="80%">
      <div style="height: calc(100vh - 184px); overflow-y: auto; overflow-x: hidden">
        <div style="font-weight: 700; margin: 20px 0 10px 0">发货包装</div>
        <el-table :data="viewPackaging.data.orderPackageBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
          <el-table-column label="品号" prop="code" width="160" />
          <el-table-column label="品名" prop="name" min-width="220" />
          <el-table-column label="销售单价" prop="internalSellingPrice" width="100" />
          <el-table-column label="成本单价" prop="costPrice" width="100" />
          <el-table-column label="数量" prop="quantity" width="120" />
          <el-table-column label="销售小计" width="120">
            <template #default="{ row }">
              {{ moneyFormat(computeMoney(row, "internalSellingPrice"), 2) }}
            </template>
          </el-table-column>
          <el-table-column label="成本小计" width="120">
            <template #default="{ row }">
              {{ moneyFormat(computeMoney(row, "costPrice"), 2) }}
            </template>
          </el-table-column>
        </el-table>
        <div style="font-weight: 700; margin: 20px 0 10px 0">外箱不干胶图稿</div>
        <div style="display: flex; width: 100%">
          <div style="width: 80px; line-height: 32px">不干胶图片:</div>
          <div style="width: calc(100% - 80px)">
            <el-image
              fit="scale-down"
              style="width: 148px; height: 148px; margin-right: 10px; cursor: pointer"
              v-if="viewPackaging.data.outerBoxSelfAdhesiveStickerFile && viewPackaging.data.outerBoxSelfAdhesiveStickerFile.fileUrl"
              :src="viewPackaging.data.outerBoxSelfAdhesiveStickerFile.fileUrl"
              @click="openFile(viewPackaging.data.outerBoxSelfAdhesiveStickerFile.fileUrl)" />
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="openViewPackaging = false">关 闭</el-button>
      </template>
    </el-dialog>

    <el-drawer v-model="drawerOrderLog" :direction="'rtl'">
      <byTable :hidePagination="true" :source="logsList.data" :pagination="logsList.pagination" :config="configLogs"> </byTable>
    </el-drawer>
  </div>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import useTagsViewStore from "/src/store/modules/tagsView.js";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
// 申购单
import Subscribe from "/src/components/process/subscribe";
// 采购合同
import Purchase from "/src/components/process/purchase";
// 新建订单
import Order from "/src/components/process/order";
import refreshStore from "/src/store/modules/refresh";
import SelectBOM from "/src/views/group/BOM/management/index";
import SelectAssembly from "/src/components/selectAssembly/index";
import ReturnGoods from "/src/components/process/returnGoods.vue";
// 删除订单
import OrderDelete from "/src/components/process/order-delete";
const typeName = ref({
  10: "（审批）",
  20: "（详情）",
  30: "（发起）",
  40: "（发起）",
});
const keyName = ref({
  apply_buy: "申购流程",
  purchase: "采购流程",
  order: "新建订单流程",
  purchase_return: "采购退货流程",
  order_delete: "订单删除流程",
});
const flowKeyCollect = reactive({
  apply_buy: {
    backPath: "/group/oa/subscribe",
    edit: "/applyBuy/edit",
    add: "/applyBuy/add",
    detail: "/applyBuy/detail",
  },
  purchase: {
    backPath: "/group/purchase/purchase-contract",
    edit: "/purchase/edit",
    add: "/purchase/add",
    detail: "/purchase/detail",
  },
  order: {
    backPath: "/subsidiary/order/subsidiary-order-management",
    edit: "/orderInfo/edit",
    add: "/orderInfo/add",
    detail: "/orderInfo/detail",
  },
  purchase_return: {
    backPath: "/group/purchase/return-goods",
    detail: "/purchaseReturn/detail",
  },
  order_delete: {
    backPath: "/subsidiary/order/subsidiary-order-management",
    edit: "/orderInfo/edit",
    add: "/orderInfo/add",
    detail: "/orderInfo/detail",
  },
});
const detailsData = reactive({
  data: {},
});
const router = useRouter();
const route = useRoute();
// tab切换逻辑
const activeName = ref("first");
// 意见表单
const flowForm = reactive({
  flowKey: "",
  tenantType: "",
  handleUserId: "",
  remark: "",
  data: {},
});
const flowRules = reactive({
  // remark: [{ required: true, message: "请输入处理意见", trigger: "blur" }],
});

//组件实例
const { proxy } = getCurrentInstance();
const flowFormDom = ref(null);
let dialogVisible = ref(false);
const nextHandleUser = ref([]);
const handleSelectUser = () => {
  if (!flowForm.handleUserId) {
    return ElMessage({
      message: "请选择下一节点处理人！",
      type: "info",
    });
  }
  handleSubmit();
};
const handleResult = (res) => {
  if (res !== null && res.success) {
    skipPage();
  } else {
    dialogVisible.value = true;
    nextHandleUser.value = res.userList;
  }
};
// 提交逻辑
const handleSubmit = async (_type) => {
  try {
    // 调用发起组件的提交事件
    const flag = await proxy.$refs.makeDom.handleSubmit();
    if (flag) {
      flowFormDom.value.validate((valid) => {
        if (valid) {
          if (queryData.query.flowKey == "order") {
            ElMessageBox.confirm("请确认包装配置", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                processSubmit(_type);
              })
              .catch(() => {});
          } else {
            processSubmit(_type);
          }
        }
      });
    }
  } catch (err) {
    console.log("数据未填完整！", err);
  }
};
const processSubmit = (_type) => {
  const data = { ...proxy.$refs.makeDom.getFormData() };
  if (queryData.query.processType == "10" || queryData.query.processType == "30") {
    proxy
      .post("/flowProcess/jump", {
        ...flowForm,
        data,
        handleType: _type,
        version: queryData.query.version,
        flowId: queryData.query.flowId,
      })
      .then((res) => {
        handleResult(res);
      });
    return;
  } else {
    proxy
      .post("/flowProcess/initiate", {
        ...flowForm,
        data,
      })
      .then((res) => {
        handleResult(res);
      });
  }
};
// 页面跳转
const skipPage = () => {
  const useTagsStore = useTagsViewStore();
  useTagsStore.delVisitedView(router.currentRoute.value);
  if (queryData.query.processType && queryData.query.processType != "40") {
    router.replace({
      path: "/oa/1/dealWith",
    });
  } else {
    ElMessage({ message: "操作成功!", type: "success" });
    if (queryData.query.flowKey == "order") {
      refreshStore().setRefresh("order");
    }
    router.replace({
      path: flowKeyCollect[queryData.query.flowKey].backPath,
    });
  }
};
const queryData = reactive({
  query: {},
  data: {},
});
// 记录
const recordList = ref([]);
const fileIds = ref([]);
const fileObj = ref({});
const approvalRecordData = ref({
  buttonInfoList: [],
});
const getRecords = (_id) => {
  if (_id) {
    proxy
      .post("/flowExample/getApprovalRecord", {
        id: _id,
      })
      .then((res) => {
        recordList.value = res.recordList;
        queryData.data.recordList = res.recordList;
        approvalRecordData.value = res;
        fileIds.value = res.recordList.map((item) => {
          return item.flowExampleDetailId;
        });
        proxy.post("fileInfo/getList", { businessIdList: fileIds.value }).then((res2) => {
          fileObj.value = res2;
        });
      });
  } else {
    proxy
      .post("/flowExample/getFlowNode", {
        flowKey: queryData.query.flowKey,
      })
      .then((res) => {
        recordList.value = res;
      });
  }
};
const handleSaveDraft = async () => {
  const flag = await proxy.$refs.makeDom.handleSubmit();
  if (flag) {
    let data = proxy.$refs.makeDom.getFormData();
    if (queryData.query.flowKey == "order") {
      data.status = "0";
    }
    if (data.id) {
      proxy.post(flowKeyCollect[queryData.query.flowKey].edit, data).then(() => {
        skipPage();
      });
    } else {
      proxy.post(flowKeyCollect[queryData.query.flowKey].add, data).then(() => {
        skipPage();
      });
    }
  }
};
onMounted(() => {
  if (route.query) {
    queryData.query = route.query;
  }
  //processType 10 为审批 20为查看 30回退发起 40为草稿修改
  flowForm.flowKey = queryData.query.flowKey;
  flowForm.tenantType = queryData.query.tenantType;
  if (queryData.query.random) {
    useTagsViewStore().visitedViews = useTagsViewStore().visitedViews.map((item) => {
      if (item.query && item.query.random === queryData.query.random) {
        return {
          ...item,
          name: queryData.query.flowName,
          title: queryData.query.flowName,
        };
      } else {
        return {
          ...item,
        };
      }
    });
  }
  if (queryData.query.id) {
    proxy.post(flowKeyCollect[queryData.query.flowKey].detail, { id: queryData.query.id }).then((res) => {
      detailsData.data = { ...res };
    });
  }
  getRecords(queryData.query.flowId);
});
const drawer = ref(false);
const clickRecords = () => {
  drawer.value = true;
};
const formShippingPackage = reactive({
  data: {
    assemblyName: "",
    orderPackageBomList: [],
    outerBoxSelfAdhesiveStickerFile: {},
  },
});
const rulesShippingPackage = ref({
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
});
const openShippingPackage = ref(false);
const handlePackagingConfiguration = () => {
  let orderData = proxy.$refs.makeDom.getFormData();
  if (orderData.orderPackageBomList && orderData.orderPackageBomList.length > 0) {
    formShippingPackage.data.orderPackageBomList = orderData.orderPackageBomList;
  } else {
    formShippingPackage.data.orderPackageBomList = [];
  }
  if (orderData.outerBoxSelfAdhesiveStickerFile) {
    formShippingPackage.data.outerBoxSelfAdhesiveStickerFile = orderData.outerBoxSelfAdhesiveStickerFile;
  } else {
    formShippingPackage.data.outerBoxSelfAdhesiveStickerFile = {};
  }
  openShippingPackage.value = true;
};
const openExpressPacking = ref(false);
const clickExpressPacking = () => {
  openExpressPacking.value = true;
};
const selectExpressPacking = (data) => {
  if (formShippingPackage.data.orderPackageBomList && formShippingPackage.data.orderPackageBomList.length > 0) {
    let list = formShippingPackage.data.orderPackageBomList.filter((item) => item.bomSpecId === data.id);
    if (list && list.length > 0) {
      return ElMessage("快递物流包材已添加");
    }
    formShippingPackage.data.orderPackageBomList.push({
      bomSpecId: data.id,
      code: data.code,
      name: data.name,
      costPrice: data.costPrice,
      internalSellingPrice: data.internalSellingPrice,
      quantity: undefined,
    });
  } else {
    formShippingPackage.data.orderPackageBomList = [
      {
        bomSpecId: data.id,
        code: data.code,
        name: data.name,
        costPrice: data.costPrice,
        internalSellingPrice: data.internalSellingPrice,
        quantity: undefined,
      },
    ];
  }
  ElMessage({ message: "添加成功", type: "success" });
};
const computeMoney = (item, label) => {
  let money = 0;
  if (item.quantity && item[label]) {
    money = Number(Math.round(item.quantity * item[label] * 100) / 100);
  }
  return money;
};
const clickDelete = (index) => {
  formShippingPackage.data.orderPackageBomList.splice(index, 1);
};
const uploadAdhesiveData = ref({});
const uploadAdhesiveFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadAdhesiveData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const handleAdhesiveSuccess = (UploadFile) => {
  formShippingPackage.data.outerBoxSelfAdhesiveStickerFile = {
    id: UploadFile.raw.id,
    fileName: UploadFile.raw.fileName,
    fileUrl: UploadFile.raw.fileUrl,
  };
};
const openFile = (path) => {
  window.open(path);
};
const openAssembly = ref(false);
const rulesAssembly = ref({
  assemblyName: [{ required: true, message: "请输入组合名称", trigger: "blur" }],
});
const clickSaveAssembly = () => {
  if (formShippingPackage.data.orderPackageBomList && formShippingPackage.data.orderPackageBomList.length > 0) {
    formShippingPackage.data.assemblyName = "";
    openAssembly.value = true;
  } else {
    return ElMessage("请添加快递物流包材");
  }
};
const submitAssembly = () => {
  proxy.$refs.assembly.validate((valid) => {
    if (valid) {
      proxy
        .post("/packagingAssembly/add", { name: formShippingPackage.data.assemblyName, packagingAssemblyBomList: formShippingPackage.data.orderPackageBomList })
        .then(() => {
          ElMessage({ message: "保存成功!", type: "success" });
          openAssembly.value = false;
        });
    }
  });
};
const openSelectAssembly = ref(false);
const clickSelectAssembly = () => {
  openSelectAssembly.value = true;
};
const selectAssembly = (item) => {
  if (item.id) {
    proxy.post("/packagingAssembly/getPackagingBomList", { id: item.id }).then((res) => {
      if (res && res.length > 0) {
        formShippingPackage.data.orderPackageBomList = res.map((resItem) => {
          return {
            bomSpecId: resItem.id,
            code: resItem.code,
            name: resItem.name,
            costPrice: resItem.costPrice,
            internalSellingPrice: resItem.internalSellingPrice,
            quantity: undefined,
          };
        });
      }
      ElMessage({ message: "选择完成", type: "success" });
      openSelectAssembly.value = false;
    });
  } else {
    return ElMessage("选择失败,请重新选择");
  }
};
const clickSaveShippingPackage = () => {
  proxy.$refs.shippingPackage.validate((valid) => {
    if (valid) {
      proxy.$refs.makeDom.saveShippingPackage(formShippingPackage.data);
      ElMessage({ message: "保存完成", type: "success" });
      openShippingPackage.value = false;
    }
  });
};
const viewPackaging = reactive({
  data: {
    orderPackageBomList: [],
    outerBoxSelfAdhesiveStickerFile: {},
  },
});
const openViewPackaging = ref(false);
const clickViewPackaging = () => {
  let orderData = proxy.$refs.makeDom.getFormData();
  if (orderData.orderPackageBomList && orderData.orderPackageBomList.length > 0) {
    viewPackaging.data.orderPackageBomList = orderData.orderPackageBomList;
  } else {
    viewPackaging.data.orderPackageBomList = [];
  }
  if (orderData.outerBoxSelfAdhesiveStickerFile) {
    viewPackaging.data.outerBoxSelfAdhesiveStickerFile = orderData.outerBoxSelfAdhesiveStickerFile;
  } else {
    viewPackaging.data.outerBoxSelfAdhesiveStickerFile = {};
  }
  openViewPackaging.value = true;
};
const logsList = ref({
  data: [],
  pagination: {
    pageNum: 1,
    pageSize: 999,
    id: route.query.id,
  },
});
const drawerOrderLog = ref(false);
const logType = ref([
  { dictKey: "10", dictValue: "新增订单" },
  { dictKey: "20", dictValue: "图稿上传" },
  { dictKey: "21", dictValue: "修改税率" },
  { dictKey: "30", dictValue: "删除订单" },
]);
const configLogs = computed(() => {
  return [
    {
      attrs: {
        label: "操作时间",
        prop: "createTime",
        width: 160,
        align: "center",
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "userName",
        align: "center",
      },
    },
    {
      attrs: {
        label: "行为",
        prop: "type",
        width: 100,
        align: "center",
      },
      render(val) {
        return proxy.dictKeyValue(val, logType.value);
      },
    },
  ];
});
const clickOrderLog = () => {
  if (route.query.id) {
    proxy.post("/orderOperatingLog/page", logsList.value.pagination).then((res) => {
      logsList.value.data = res.rows;
    });
  }
  drawerOrderLog.value = true;
};
</script>
<style lang="scss" scoped>
.processApproval {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 120px);
  .left-card {
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: column;
    .top {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      background: #fff;
      padding: 20px;
      .line {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
      }
    }
    .bottom {
      margin-top: 10px;
      height: 190px;
      background: #fff;
      padding: 20px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
}
.right-card {
  background: #fff;
  border-radius: 4px;
  padding: 0 20px 20px;
  width: 100%;
  box-sizing: border-box;
  .flow-chart {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 200px);
    padding: 0;
    margin: 0;
    li {
      margin: 0;
      padding: 0 0 20px;
      list-style: none;
      display: flex;
      justify-content: space-between;
      position: relative;
      .right-conetnt {
        flex: 1;
        .name {
          font-size: 12px;
          color: #39c55a;
          margin-bottom: 10px;
          span {
            color: #999;
          }
        }
        .time {
          float: right;
        }
        .remark {
          padding: 10px;
          color: #666666;
          font-size: 12px;
          background: #f1f1f1;
          border-radius: 2px;
          .label {
            color: #999;
            margin-bottom: 10px;
          }
        }
      }
      .left-icon {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #0084ff;
        border-radius: 10px;
        color: #fff;
        font-size: 20px;
        position: relative;
        margin-right: 27px;
        z-index: 2;
        .right-btm-status {
          position: absolute;
          bottom: 0px;
          right: -10px;
          height: 20px;
          width: 20px;
          line-height: 16px;
          border-radius: 10px;
          background: #39c55a;
          border: 2px solid #fff;
          font-size: 12px;
          box-sizing: border-box;
        }
      }
    }
    li::before {
      content: "";
      position: absolute;
      top: 0;
      left: 20px;
      width: 2px;
      height: 100%;
      background: #ddd;
      z-index: 1;
    }
    li:last-child::before {
      display: none;
    }
    .flow-orange {
      .right-btm-status {
        background: #ff9a00 !important;
      }
      .name {
        color: #ff9a00 !important;
      }
      .left-icon {
        background: #ff9a00 !important;
      }
    }
    .flow-grey {
      .right-btm-status {
        background: #999 !important;
      }
      .name {
        color: #999 !important;
      }
      .left-icon {
        background: #999 !important;
      }
    }
    .flow-red {
      .right-btm-status {
        background: #ff4d4f !important;
      }
      .name {
        color: #ff4d4f !important;
      }
      .left-icon {
        background: #ff4d4f !important;
      }
    }
  }
}
::v-deep(.el-drawer) {
  width: 400px !important;
}
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.shippingPackage {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>