ezhizao_dms_vue/src/views/business/reviseBath/index.vue

<template>
  <div class="page-container column-container">
    <!-- 搜索区 -->
    <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="产品描述：">
        <el-input placeholder="请输入产品描述" @keydown.enter.prevent @keyup.enter="handleQuery" clearable
          v-model="queryParams.productDescription"  @blur="handleTrimQuarms" style="width: 160px" />
      </el-form-item>
      <el-form-item label="计划单号：">
        <el-input placeholder="请输入计划单号" @keydown.enter.prevent @keyup.enter="handleQuery" clearable
          v-model="queryParams.productionPlanNo"  @blur="handleTrimQuarms" style="width: 160px" />
      </el-form-item>
      <el-form-item label="批号状态：" label-width="100px">
        <el-select v-model="queryParams.lotCodeStatusCode" clearable placeholder="请选择批号状态" style="width: 150px">
          <el-option v-for="dict in lot_code_status_code" :key="dict.value" :label="dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" icon="Search" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表区 -->
    <div class="el-table-container">
      <div class="el-table-inner-container">
        <el-table v-loading="loading" :data="productionPlanList" height="100%">
          <el-table-column type="index" label="行号" width="50" align="center"></el-table-column>
          <el-table-column label="客户简称" prop="companyAlias" width="150" align="center" />
          <el-table-column label="生产计划单号" prop="productionPlanNo" width="110" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="handleColumnClick(scope.row)"><span>{{ scope.row.productionPlanNo
                  }}</span></el-button>
            </template></el-table-column>
          <el-table-column label="序号" width="60" prop="lineNumber" align="center" />
          <el-table-column label="产品描述" prop="productDescription" align="center" />
          <el-table-column label="图纸版本" prop="technologyVersion" width="70" align="center" />
          <el-table-column label="总投产量" prop="productionQuantity" width="80" align="center" />
          <el-table-column label="总批数" prop="totalLotNumber" width="80" align="center" />
          <el-table-column label="单批量" prop="oneLotQuantity" width="80" align="center" />
          <el-table-column label="尾批量" prop="lastLotQuantity" width="80" align="center" />
          <el-table-column label="批号状态" prop="lotCodeStatusCode" width="100" align="center">
            <template #default="scope">
              <dict-tag :options="lot_code_status_code" :value="scope.row.lotCodeStatusCode" />
            </template>
          </el-table-column>
          <el-table-column label="累计投产量" prop="pickUpQuantity" width="80" align="center" />
          <el-table-column label="累计投产批数" prop="lotTotalNumber" width="90" align="center" />
          <el-table-column label="库位" prop="storageLocation" width="80" align="center" />
          <el-table-column label="领料部门" prop="requisitionDepartmentName" align="center" fixed="right">
            <template #default="scope">
              <span>{{ scope.row.requisitionDepartmentName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="下达日期" prop="issueDate" width="120" align="center" />

          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="View" v-hasPermi="['business:productionPlan:query']"
                @click="handleView(scope.row)">查看</el-button>
              <el-button icon="edit" link type="warning" v-hasPermi="['business:productionPlan:edit']"
                @click="handleUpdateProduction(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
    <!-- 已经生产的批次 -->
    <produced-lot ref="producedLotFormRef"></produced-lot>
    <!-- 工艺版本变更弹窗 -->
    <production-dialog ref="productionDetailRef" @handleUpdateSuccess="handleFresh" />
  </div>
</template>

<script setup name="ReviseBath">
import { getP2Plan } from "@/api/business/p2.js";
import producedLot from "./producedLotForm.vue";
import productionDialog from "./DialogProduction";
import { ref } from "vue";
import router from "@/router";
import queryStore from "@/store/modules/query";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
/** 查询 对象 */
const productionPlanList = ref([]);
const loading = ref(true);
const total = ref(2);
const { plan_status } = proxy.useDict("plan_status");
const { lot_code_status_code } = proxy.useDict("lot_code_status_code");

/** 查询对象 */
const queryParams = ref({
  productionPlanNo: "",
  productDescription: "",
  planStatus: "",
  pullP2PlanDetails: false,
  pageNum: 1,
  pageSize: 10,
  startTime: "",
  endTime: "",
});

onMounted(() => {
  getList();
});

/****************************  方法区  ****************************/

/** 查询生产计划列表 */
function getList() {
  loading.value = true;
  const listQueryParams = queryStore().reviseBathParams;
  if (listQueryParams != null) {
    queryParams.value = listQueryParams;
  }
  getP2Plan(queryParams.value).then((res) => {
    productionPlanList.value = res.rows;
    total.value = res.total;
    loading.value = false;
    queryParams.value.pullP2PlanDetails = false;
    // console.log(productionPlanList.value[0])
  });
}
/** 打开计划查询页 */
function handleColumnClick(row) {
  // router.push({ path: "/Production/lot/" + row.productionPlanNo });
  router.push({
    name: "lotInfo",
    params: {
      productionPlanNo: row.productionPlanNo,
      lineNumber: row.lineNumber,
    },
  });
}
/** 查看按钮操作 */
function handleView(row) {
  proxy.$refs.producedLotFormRef.open(row);
}
function handleFresh() {
  console.log(queryParams.value)
  getList();
}
function handleTrimQuarms(){
  queryParams.value.productionPlanNo = queryParams.value.productionPlanNo !=null&&queryParams.value.productionPlanNo !=""?queryParams.value.productionPlanNo.trim():null;
  queryParams.value.productDescription = queryParams.value.productDescription !=null&&queryParams.value.productDescription !=""?queryParams.value.productDescription.trim():null;
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  const listQueryParams = JSON.parse(JSON.stringify(queryParams.value));
  queryStore().setReviseBathParams(listQueryParams);
  getList();
}

//打开修改生产计划的版本弹窗
function handleUpdateProduction(row) {
  proxy.$refs.productionDetailRef.open(row);
}
/**
 * 同步P2生产计划
 */
const handleSyncP2Plan = () => {
  queryParams.value.pullP2PlanDetails = true;
  getList();
};
</script>

<style lang="scss" scoped>
.hyperlink {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.dashboard-total-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 120px;
  background-color: #f2f2f2;
  border-radius: 10px;

  >div:first-child {
    display: flex;
    flex: 2;
    justify-content: center;
    align-items: center;
  }

  >div.dashboard-total-item-label {
    display: flex;
    flex: 3;
    flex-direction: column;
    justify-content: center;

    >span {
      display: block;
      width: 60%;
      text-align: center;

      &:first-child {
        font-size: 16px;
        margin-bottom: 4px;
        letter-spacing: 2px;
      }

      &:last-child {
        font-weight: bold;
        font-size: 24px;
      }
    }
  }
}

.dashboard-total-item>.dashboard-total-item-label>span:last-child {
  color: #444444;
}

.dashboard-total-item>.dashboard-total-item-label>span:last-child>span:first-child {
  margin-right: 8px;
}

.dashboard-total-item>.dashboard-total-item-label>span:last-child>span:last-child {
  color: #4367df;
}

.dashboard-total-item>.number-label {
  font-size: 40px;
  margin-left: 16px;
  font-weight: bold;
  color: #5a6ac3;
}
</style>