erp_fans/src/views/MES/productionTask/index.vue

<template>
  <div class="pageIndexClass">
    <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
             :selectConfig="selectConfig" :action-list="[ {
                text: '打印任务单',
                action: () => openModal('add'),
                disabled: selectIds.length==0,
              } 
              
        ]" :table-events="{
          //element talbe事件都能传
          select: selectRow,
       'select-all':selectRow
        }" @get-list="getList">

      <template #orderCode="{ item }">
        <div style="width: 100%" class="el-click" @click="lookDetails(item)">
          {{item.orderCode}}
        </div>
      </template>

      <template #pic="{ item }">
        <div v-if="item.fileList &&item.fileList.length > 0">
          <img :src="item.fileList[0].fileUrl" class="pic" @click="handleClickFile(item.fileList[0])" />
        </div>
        <div v-else></div>
      </template>

      <template #picOne="{ item }">
        <div v-if="item.fileListOne &&item.fileListOne.length > 0">
          <img :src="item.fileListOne[0].fileUrl" class="pic" @click="handleClickFile(item.fileListOne[0])" />
        </div>
        <div v-else></div>
      </template>

      <template #size="{ item }">
        <div v-if="item.productLength && item.productWidth && item.productHeight">
          <span>{{ item.productLength }}</span>*
          <span>{{ item.productWidth }}</span>*
          <span>{{ item.productHeight }}</span>
        </div>
      </template>

      <template #isOverdue="{item}">
        <div style="width: 100%">
          <span class="red" v-if="item.isOverdue=='1'"> 逾期 </span>
          <span v-else> 未逾期 </span>
        </div>
      </template>

      <template #progress="{item}">
        <div style="width: 100%">
          <el-progress type="circle" :percentage="(Number(item.finishQuantity) / Number(item.quantity))*100" width="60"
                       :status="(Number(item.finishQuantity) / Number(item.quantity))*100 == 100 ? 'success' : ''" />
        </div>
      </template>

      <template #prodTag="{ item }">
        <div style="width: 100%">
          <el-popover placement="top-start" :width="300" trigger="hover">
            <div>
              备注：{{item.prodRemark}}
            </div>
            <template #reference>
              <div style="width:100%;display:inline-block">
                <el-tag style="margin-right: 8px" type="success" v-for="(tag, index) in item.prodTags" :key="index">
                  {{ dictKeyValue(tag, contractTag) }}
                </el-tag>
              </div>
            </template>
          </el-popover>
        </div>
      </template>

      <template #other="{item}">
        <div style="width: 100%">
          <div>
            完成：
          </div>
          <div style="border-top:1px solid #ebeef5;margin-top:3px">
            结存：
          </div>
        </div>
      </template>

      <template v-for="(slotItem, index) in processesData" v-slot:[slotItem.id]="{ item }" :key="slotItem.id">
        <div style="width:100%">
          <div>
            <span v-if="isShowCotent(slotItem,item)" style="font-weight:700;min-width:50px;line-height:18px;display:inline-block"
                  :class="showCotentQuantity(slotItem,item)">
              {{showCotent(slotItem,item,'finishQuantity')}}
            </span>
            <div v-else class="no-bk">
              -
            </div>
          </div>
          <div style="border-top:1px solid #ebeef5;margin-top:3px">
            <div v-if="isShowCotent(slotItem,item)">
              {{showCotent(slotItem,item,'balanceQuantity') || `&nbsp`}}
            </div>
            <div v-else class="no-bk">
              -
            </div>
          </div>

        </div>
      </template>
    </byTable>

    <el-dialog :title="'打印任务单'" v-model="dialogVisible" width="840px" destroy-on-close :before-close="beforeClose">
      <div style="height:calc(100vh - 280px);overflow:auto;padding: 0 10px">
        <div id="pdfDom" style="width:100%">
          <!-- <div style="font-size:20px;text-align:center">
            {{printData.name}}
          </div> -->
          <div v-for="item in printList" :key="item.id" style="margin-bottom:20px">
            <div style="font-size:32px;font-weight:700;color:#000;text-align:center">
              生产任务单
            </div>
            <div style="float:right;margin: 20px 0px 5px 0;">
              {{printTime}}
            </div>
            <table class="table" border>
              <tr>
                <td style="width:25%">
                  <div :ref="item.id">
                  </div>
                </td>
                <td style="width:75%">
                  <div style="display:flex;margin-bottom:10px">
                    <div style="width:50%">
                      <div class="top-title">
                        订单号
                      </div>
                      <div>
                        {{item.orderCode}}
                      </div>
                    </div>
                    <div style="width:50%">
                      <div class="top-title">
                        交期
                      </div>
                      <div v-if="item.deliveryPeriod">
                        {{item.deliveryPeriod.substr(0,10)}}
                      </div>
                    </div>
                  </div>
                  <div style="display:flex;margin-bottom:10px">
                    <div style="width:50%">
                      <div class="top-title">
                        产品编码
                      </div>
                      <div>
                        {{item.productCode}}
                      </div>
                    </div>
                    <div style="width:50%">
                      <div class="top-title">
                        生产数量
                      </div>
                      <div>
                        {{item.quantity}}
                      </div>
                    </div>
                  </div>
                  <div style="margin-bottom:10px">
                    <div class="top-title">
                      产品名称
                    </div>
                    <div>
                      {{item.productName}}
                    </div>
                  </div>
                  <div style="margin-bottom:10px">
                    <div class="top-title">
                      产品尺寸(cm)
                    </div>
                    <div>
                      {{item.productLength}} * {{item.productWidth}} * {{item.productHeight}}
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="text-align:center" rowspan="4">
                  <div>
                    <div style="font-weight:700">产品图</div>
                    <img v-if="item.fileList &&item.fileList.length > 0" class="bigImg" :src="item.fileList[0].fileUrl" alt="">
                  </div>
                  <!-- <div style="margin-top:20px">
                    <div style="font-weight:700">设计图</div>
                    <img v-if="item.fileListOne &&item.fileListOne.length > 0" class="bigImg" :src="item.fileListOne[0].fileUrl" alt="">
                  </div> -->
                </td>
                <td style="height:60px;vertical-align:top">
                  <div>
                    <div class="top-title">
                      产品备注
                    </div>
                    <div>
                      {{item.productRemark}}
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="height:60px;vertical-align:top">
                  <div class="top-title">
                    生产工序
                  </div>
                  <div>
                    <!-- <el-checkbox v-for="proess in item.productionTaskProgressList" :key="proess.processesId" :label="proess.progressName"
                                 size="small" /> -->
                    <span v-for="(proess,index) in item.productionTaskProgressList" :key="proess.processesId">{{proess.progressName}} <span
                            v-if="index<item.productionTaskProgressList.length-1"> > </span> </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="height:107px">
                  <div style="margin-bottom:10px">
                    <div class="top-title">
                      原材料编码
                    </div>
                    <div>
                      {{item.rawMaterialCode}}
                    </div>
                  </div>
                  <div>
                    <div class="top-title">
                      原材料名称
                    </div>
                    <div>
                      {{item.rawMaterialName}}
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="vertical-align:top">
                  <div class="top-title">BOM</div>
                  <div>
                    <table border class="table son">
                      <tr>
                        <td style="width:85%">名称</td>
                        <!-- <td style="width:15%">单价</td> -->
                        <td style="width:15%">数量</td>
                      </tr>
                      <tr v-for="son in item.contractProductBomList" :key="son.id">
                        <td>
                          <div>
                            {{son.productCode}}
                          </div>
                          <div>
                            {{son.productName}}
                          </div>
                        </td>
                        <!-- <td>{{son.price}}</td> -->
                        <td>{{son.quantity}}</td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>

            </table>
            <div style="page-break-after: always"></div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false" size="defualt">取 消</el-button>
        <el-button type="primary" v-print="printObj" size="defualt">打 印</el-button>
      </template>
    </el-dialog>

    <el-dialog title="备注" v-model="remarkDialog" width="500" destroy-on-close v-if="remarkDialog">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
      </byForm>
      <template #footer>
        <el-button @click="remarkDialog = false" size="defualt" v-debounce>取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="defualt" v-debounce>
          确 定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog title="记录查看" v-model="recordDialog" width="70%" destroy-on-close v-if="recordDialog">
      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="采购记录" name="1">
        </el-tab-pane>
        <el-tab-pane label="出入库流水记录" name="2">
        </el-tab-pane>
      </el-tabs>
      <byForm :formConfig="recordFormConfig" :formOption="recordFormOption" v-model="formData.recordData">
        <template #detail1 v-if="activeName=='1'">
          <div style="width:100%">
            <el-table :data="formData.recordData.purchaseProductList">
              <el-table-column label="商品图片" width="80">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="openImg(row.fileUrl)" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="商品编码" width="160" />
              <el-table-column prop="productName" label="商品名称" min-width="130" />
              <el-table-column label="尺寸 (cm)" width="140">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="颜色" prop="productColor" width="160" />
              <el-table-column label="采购数量" prop="quantity" width="100" />
            </el-table>
          </div>
        </template>
        <template #detail2 v-if="activeName=='2'">
          <div style="width:100%">
            <el-table :data="formData.recordData.stockJournalDetailsList">
              <el-table-column label="类型" width="100" :formatter="(row) => row.opType=='1'?'入库':'出库'" />
              <el-table-column label="商品图片" width="80">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="openImg(row.fileUrl)" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="商品编码" width="160" />
              <el-table-column prop="productName" label="商品名称" min-width="130" />
              <el-table-column label="尺寸 (cm)" width="140">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="颜色" prop="productColor" width="160" />
              <el-table-column label="数量" prop="quantity" width="100" />
            </el-table>
          </div>
        </template>
      </byForm>
      <!-- <template #footer>
        <el-button @click="recordDialog = false" size="defualt" v-debounce>关闭</el-button>
      </template> -->
    </el-dialog>
  </div>

</template>

<script setup>
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import QRCode from "qrcodejs2-fix";
import moment from "moment";

const { proxy } = getCurrentInstance();
const contractTag = computed(
  () => proxy.useUserStore().allDict["contract_prod_tag"]
);
const companyData = ref([]);
const loading = ref(false);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    produceStatus: "",
    staDeliveryPeriod: "",
    endDeliveryPeriod: "",
    beginTime: "",
    endTime: "",
    isOverdue: "",
  },
});
const treeData = ref([]);
const dialogVisible = ref(false);
const remarkDialog = ref(false);

const modalType = ref("add");
const statusData = ref([
  {
    label: "未开始",
    value: "0",
  },
  {
    label: "生产中",
    value: "1",
  },
  {
    label: "生产完成",
    value: "2",
  },
  {
    label: "出库中",
    value: "5",
  },
  {
    label: "已出库",
    value: "10",
  },
]);

const isOverdueData = ref([
  {
    label: "是",
    value: "1",
  },
  {
    label: "否",
    value: "0",
  },
]);

const contractTypeData = ref([
  {
    dictKey: "3",
    dictValue: "打样订单",
  },
  {
    dictKey: "2",
    dictValue: "内销订单",
  },
  {
    dictKey: "1",
    dictValue: "外贸订单(退税)",
  },
  {
    dictKey: "4",
    dictValue: "外贸订单(不退税)",
  },
]);

const selectConfig = computed(() => [
  {
    label: "业务公司",
    prop: "contractCompanyId",
    data: companyData.value,
    isFilter: false,
  },
  {
    label: "工厂",
    prop: "companyId",
    data: companyData.value,
  },
  {
    label: "生产状态",
    prop: "produceStatus",
    data: statusData.value,
  },
  {
    label: "是否逾期",
    prop: "isOverdue",
    data: isOverdueData.value,
  },
  {
    type: "time",
    label: "交期",
    placeholder: "开始日期",
    prop: "staDeliveryPeriod",
    placeholderOne: "结束日期",
    propOne: "endDeliveryPeriod",
  },
  {
    type: "time",
    label: "下单日期",
    placeholder: "开始日期",
    prop: "beginTime",
    placeholderOne: "结束日期",
    propOne: "endTime",
  },
]);
const config = ref([
  {
    type: "selection",
    attrs: {
      checkAtt: "isCheck",
      width: 60,
    },
  },
  {
    attrs: {
      label: "操作",
      width: "160",
      align: "left",
      // fixed: "right",
    },
    renderHTML(row) {
      return [
        {
          attrs: {
            label: "打印任务单",
            type: "primary",
            text: true,
          },
          el: "button",
          click() {
            printQrCode(row);
          },
        },
        {
          attrs: {
            label: "备注",
            type: "primary",
            text: true,
          },
          el: "button",
          click() {
            openRemark(row);
          },
        },
      ];
    },
  },
  {
    attrs: {
      label: "业务公司",
      prop: "contractCompanyName",
      width: 110,
    },
  },
  {
    attrs: {
      label: "是否逾期",
      slot: "isOverdue",
      width: 80,
      fixed: "left",
    },
  },
  {
    attrs: {
      label: "订单类型",
      prop: "contractType",
      width: 110,
    },
    render(val) {
      return proxy.dictKeyValue(val, contractTypeData.value);
    },
  },
  {
    attrs: {
      label: "工厂",
      prop: "companyName",
      width: 100,
      // align: "center",
    },
  },
  {
    attrs: {
      label: "业务员",
      prop: "saleUserName",
      width: 100,
      // align: "center",
    },
  },
  {
    attrs: {
      label: "订单号",
      slot: "orderCode",
      width: 130,
    },
  },
  {
    attrs: {
      label: "产品图片",
      slot: "pic",
      width: 80,
    },
  },
  // {
  //   attrs: {
  //     label: "设计图",
  //     slot: "picOne",
  //     width: 80,
  //   },
  // },
  {
    attrs: {
      label: "产品编码",
      prop: "productCode",
      width: 130,
    },
  },
  {
    attrs: {
      label: "产品名称",
      prop: "productName",
      "min-width": 200,
    },
  },
  {
    attrs: {
      label: "产品尺寸 (cm)",
      slot: "size",
      width: 160,
    },
  },
  {
    attrs: {
      label: "产品颜色",
      prop: "productColor",
      width: 160,
    },
  },
  {
    attrs: {
      label: "生产件数",
      prop: "quantity",
      width: 100,
    },
  },
  {
    attrs: {
      label: "完成进度",
      slot: "progress",
      width: 90,
    },
  },
  {
    attrs: {
      label: "已完成",
      prop: "finishQuantity",
      width: 100,
    },
  },
  {
    attrs: {
      label: "未完成",
      prop: "incomplete",
      width: 100,
    },
  },
  {
    attrs: {
      label: "生产状态",
      prop: "produceStatus",
      width: 100,
    },
    render(val) {
      return proxy.dictValueLabel(val, statusData.value);
    },
  },
  {
    attrs: {
      label: "生产指示",
      slot: "prodTag",
      "min-width": 220,
    },
  },
  {
    attrs: {
      label: "下单时间",
      prop: "orderCreateTime",
      width: 160,
    },
  },
  {
    attrs: {
      label: "交期",
      prop: "deliveryPeriod",
      width: 100,
    },
    render(val) {
      if (val) {
        return val.slice(0, 10);
      }
      return "";
    },
  },
  // {
  //   attrs: {
  //     label: "投产时间",
  //     prop: "produceTime",
  //     width: 160,
  //   },
  // },
  {
    attrs: {
      label: "完成时间",
      prop: "finishTime",
      width: 160,
    },
  },

  {
    attrs: {
      label: "生产用时",
      prop: "usageTime",
      width: 100,
    },
  },
  {
    attrs: {
      label: "备注",
      prop: "remark",
      "min-width": 200,
    },
  },
  {
    attrs: {
      label: "",
      slot: "other",
      align: "center",
      width: 70,
      fixed: "right",
    },
  },
]);
const formData = reactive({
  data: {},
  recordData: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
});
const formDom = ref(null);
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "remark",
      itemType: "textarea",
      label: "备注",
      itemWidth: 100,
      disabled: false,
    },
  ];
});
const rules = ref({
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
});

const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/produceOrderDetail/page", sourceList.value.pagination)
    .then((res) => {
      res.rows.forEach((x) => {
        if (x.prodTag) {
          x.prodTags = x.prodTag.split(",");
        } else {
          x.prodTags = [];
        }
        x.incomplete = x.quantity - x.finishQuantity;
      });
      sourceList.value.data = res.rows.map((x) => ({ ...x, isCheck: true }));
      sourceList.value.pagination.total = res.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
      const productIdList = res.rows.map((x) => x.productId);
      // 请求文件数据并回显
      if (productIdList.length > 0) {
        // proxy.getFile(productIdList, sourceList.value.data, "productId");
        proxy
          .post("/fileInfo/getList", { businessIdList: productIdList })
          .then((fileObj) => {
            for (let i = 0; i < sourceList.value.data.length; i++) {
              const ele = sourceList.value.data[i];
              for (const key in fileObj) {
                if (
                  ele.productId == key &&
                  fileObj[ele.productId] &&
                  fileObj[ele.productId].length > 0
                ) {
                  ele.fileList = fileObj[ele.productId].filter(
                    (x) => x.businessType == "0"
                  );
                }
              }
            }
          });
      }

      const productIdListOne = res.rows.map((x) => x.contractDetailId);
      // 请求文件数据并回显
      if (productIdListOne.length > 0) {
        proxy
          .post("/fileInfo/getList", { businessIdList: productIdListOne })
          .then((fileObj) => {
            for (let i = 0; i < sourceList.value.data.length; i++) {
              const ele = sourceList.value.data[i];
              for (const key in fileObj) {
                if (
                  ele.contractDetailId == key &&
                  fileObj[ele.contractDetailId] &&
                  fileObj[ele.contractDetailId].length > 0
                ) {
                  ele.fileListOne = fileObj[ele.contractDetailId].filter(
                    (x) => x.businessType == "0"
                  );
                }
              }
            }
          });
        // proxy.getFile(
        //   productIdListOne,
        //   sourceList.value.data,
        //   "contractDetailId",
        //   "fileListOne"
        // );
      }
    });
};

const printList = ref([]);

const selectIds = ref([]);
const selectRow = (data) => {
  selectIds.value = data.map((x) => x.id);
};
const printTime = ref("");
const openModal = () => {
  proxy.msgTip("请稍后", 2);
  proxy
    .post("/produceOrderDetail/detailByIds", { taskIds: selectIds.value })
    .then((res) => {
      printList.value = res;
      for (let i = 0; i < printList.value.length; i++) {
        const iele = printList.value[i];
        for (let j = 0; j < sourceList.value.data.length; j++) {
          const jele = sourceList.value.data[j];
          if (iele.id == jele.id) {
            iele.fileList = jele.fileList;
            iele.fileListOne = jele.fileListOne;
            break;
          }
        }
      }
      printTime.value = moment().format("yyyy-MM-DD HH:mm:ss");
      dialogVisible.value = true;
      nextTick(() => {
        for (let i = 0; i < printList.value.length; i++) {
          const row = printList.value[i];
          proxy.$refs[row.id][0].innerHTML = ""; //清除二维码方法一
          new QRCode(proxy.$refs[row.id][0], {
            text: row.id,
            width: 200,
            height: 200,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
          });
        }
      });
    });
};

const submitForm = () => {
  formDom.value.handleSubmit((valid) => {
    submitLoading.value = true;
    proxy.post("/produceOrderDetail/editRemark", formData.data).then(
      (res) => {
        proxy.msgTip("操作成功", 1);
        remarkDialog.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};

const getDtl = (row) => {
  modalType.value = "edit";
  proxy.post("/shopInfo/detail", { id: row.id }).then((res) => {
    formData.data = res;
    dialogVisible.value = true;
  });
};
const processesData = ref([]);
const getProcesses = () => {
  proxy
    .post("/productionProcesses/page", { pageNum: 1, pageSize: 9999 })
    .then((res) => {
      for (let i = 0; i < res.rows.length; i++) {
        const ele = res.rows[i];
        let attrs = {
          label: `[ ${ele.name} ]`,
          slot: ele.id,
          isNeedHeaderSlot: false,
          width: 70,
          align: "center",
          fixed: "right",
        };
        config.value.push({
          attrs,
        });
      }

      // config.value.push({
      //   attrs: {
      //     label: "操作",
      //     width: "160",
      //     align: "center",
      //     fixed: "right",
      //   },
      //   renderHTML(row) {
      //     return [
      //       {
      //         attrs: {
      //           label: "打印任务单",
      //           type: "primary",
      //           text: true,
      //         },
      //         el: "button",
      //         click() {
      //           printQrCode(row);
      //         },
      //       },
      //       {
      //         attrs: {
      //           label: "备注",
      //           type: "primary",
      //           text: true,
      //         },
      //         el: "button",
      //         click() {
      //           openRemark(row);
      //         },
      //       },
      //     ];
      //   },
      // });
      processesData.value = res.rows;
    });
};
getProcesses();
getList();
const printType = ref(false);

const printQrCode = (row) => {
  printType.value = true;
  selectIds.value = [row.id];
  openModal();
};
const beforeClose = () => {
  if (printType.value) {
    selectIds.value = [];
  }
  dialogVisible.value = false;
};
const printObj = ref({
  id: "pdfDom",
  popTitle: "",
  extraCss:
    "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
});

const handleClickFile = (file) => {
  window.open(file.fileUrl, "_blank");
};

const isShowCotent = (slot, item) => {
  if (item && item.productionTaskProgressList) {
    return item.productionTaskProgressList.some(
      (x) => x.processesId == slot.id
    );
  } else {
    return false;
  }
};
const showCotent = (slot, item, att) => {
  if (item && item.productionTaskProgressList) {
    const current = item.productionTaskProgressList.find(
      (x) => x.processesId == slot.id
    );
    if (current) {
      return current[att];
    }
  } else {
    return false;
  }
};

const showCotentQuantity = (slot, item) => {
  if (item && item.productionTaskProgressList) {
    const current = item.productionTaskProgressList.find(
      (x) => x.processesId == slot.id
    );
    if (current && Number(current.finishQuantity) > 0) {
      if (Number(current.finishQuantity) >= item.quantity) {
        return "tag-active";
      } else if (Number(current.finishQuantity) < item.quantity) {
        return "tag-active-1";
      }
    }
  }
};

const getDict = () => {
  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 9999,
      keyword: "",
      tenantId: proxy.useUserStore().user.tenantId,
      type: 0,
    })
    .then((res) => {
      companyData.value = res.data.map((x) => ({
        ...x,
        label: x.deptName,
        value: x.deptId,
      }));
      // treeData.value = proxy.handleTree(res.data, "deptId");
    });
};
getDict();

const openRemark = (row) => {
  formData.data = {
    id: row.id,
    remark: row.remark,
  };
  remarkDialog.value = true;
};
const recordDialog = ref(false);
const recordFormOption = reactive({
  inline: true,
  labelWidth: 40,
  itemWidth: 100,
});
const recordFormConfig = computed(() => {
  return [
    {
      type: "title1",
      title: "采购记录",
      isShow: activeName.value == "1",
    },
    {
      type: "slot",
      slotName: "detail1",
      label: " ",
      isShow: activeName.value == "1",
    },
    {
      type: "title1",
      title: "出入库流水记录",
      isShow: activeName.value == "2",
    },
    {
      type: "slot",
      slotName: "detail2",
      label: " ",
      isShow: activeName.value == "2",
    },
  ];
});
const activeName = ref("1");
const lookDetails = (item) => {
  activeName.value = "1";
  recordDialog.value = true;
  proxy
    .post("/produceOrder/detail", {
      id: item.produceOrderId,
    })
    .then((res) => {
      formData.recordData = res;
      if (
        formData.recordData.purchaseProductList &&
        formData.recordData.purchaseProductList.length > 0
      ) {
        let productIds = formData.recordData.purchaseProductList.map(
          (x) => x.productId
        );
        proxy.getFileData({
          businessIdList: productIds,
          data: formData.recordData.purchaseProductList,
          att: "productId",
          businessType: "0",
          fileAtt: "fileList",
          filePathAtt: "fileUrl",
        });
      }
      if (
        formData.recordData.stockJournalDetailsList &&
        formData.recordData.stockJournalDetailsList.length > 0
      ) {
        let productIds = formData.recordData.stockJournalDetailsList.map(
          (x) => x.productId
        );
        proxy.getFileData({
          businessIdList: productIds,
          data: formData.recordData.stockJournalDetailsList,
          att: "productId",
          businessType: "0",
          fileAtt: "fileList",
          filePathAtt: "fileUrl",
        });
      }
    });
};
</script>

<style lang="scss" scoped>
::v-deep(.el-progress__text) {
  font-size: 14px !important;
}
.content {
  padding: 20px;
}
.pic {
  object-fit: contain;
  width: 50px;
  height: 50px;
  cursor: pointer;
  vertical-align: middle;
}
.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  td {
    text-align: left;
    padding: 10px;
    font-size: 13px;
    // padding: 5px 10px;
    .top-title {
      font-weight: 700;
      margin-bottom: 5px;
    }
    .bigImg {
      object-fit: contain;
      width: 160px;
      height: 320px;
      cursor: pointer;
      margin-top: 10px;
      vertical-align: middle;
    }
  }
}
.son {
  td {
    text-align: left;
    padding: 5px !important;
  }
}
.no-bk {
  // background: #f3f3f3;
  // height: 50px;
}
.red {
  background: red;
  border-radius: 2px;
  padding: 4px;
  color: #fff;
}

::v-deep(.el-table-fixed-column--right) {
  // vertical-align: top !important;
  padding: 0px !important;
  // border: 1px solid #ebeef5 !important;
  .cell {
    padding: 0px !important;
  }
}
</style>