inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/productionPlanManager/components/Plan.tsx

@@ -1,802 +1,802 @@
-import { defineComponent, ref, watch, nextTick } from "vue";
-import { message } from "ant-design-vue";
-
-import { LeftOutlined } from "@ant-design/icons-vue";
-
-import "../assets/components/Plan.less";
-
-import productionPlanApi from "@/api/productionPlan";
-
-// 数值精度
-const precision = 2;
-
-// 类型
-const typeObj: any = {
-  grossCoal: "毛煤",
-  rawCoal: "原煤",
-};
-
-export default defineComponent({
-  props: {
-    showPlan: {
-      type: Boolean,
-      default: false,
-    },
-    planObj: {
-      type: Object,
-      default: () => ({}),
-    },
-    container: {
-      type: String,
-      default: "yearPCPlan", // yearPCPlan monthPCPlan dayPCPlan
-    },
-    readonly: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  emits: ["update:showPlan", "update:planObj", "refresh"],
-
-  setup(props, context) {
-    const searchFormRef = ref();
-
-    const searchFormState = ref({
-      year: "",
-    });
-
-    const plan: any = ref(null);
-
-    watch(
-      () => props.planObj,
-      async (nVal) => {
-        if (nVal) {
-          let resp: any;
-
-          if (props.container === "yearPCPlan") {
-            resp = await productionPlanApi.showYearPlan({
-              batchId: props.planObj.batchId,
-            });
-          } else if (props.container === "monthPCPlan") {
-            resp = await productionPlanApi.showMonthPlan({
-              batchId: props.planObj.batchId,
-            });
-          } else if (props.container === "dayPCPlan") {
-            resp = await productionPlanApi.showDayPlan({
-              batchId: props.planObj.batchId,
-            });
-          }
-
-          if (resp.data) {
-            plan.value = resp.data;
-          } else {
-            plan.value = null;
-            message.error(resp.message);
-          }
-        }
-      },
-      { deep: true }
-    );
-
-    watch(
-      () => searchFormState.value.year,
-      async (nVal) => {
-        if (nVal) {
-          const resp: any = await productionPlanApi.createYearPlan({
-            year: nVal,
-          });
-
-          if (resp.data) {
-            plan.value = resp.data;
-          } else {
-            plan.value = null;
-            message.error(resp.message);
-          }
-        } else {
-          plan.value = null;
-        }
-      }
-    );
-
-    const ok = async () => {
-      await searchFormRef.value.validateFields();
-
-      let resp: any;
-
-      if (props.container === "yearPCPlan") {
-        if (props.planObj) {
-          // 编辑
-          resp = await productionPlanApi.editYearPlan(plan.value);
-        } else {
-          resp = await productionPlanApi.saveYearPlan(plan.value);
-        }
-      } else if (props.container === "monthPCPlan") {
-        if (props.planObj) {
-          // 编辑
-          resp = await productionPlanApi.editMonthPlan(plan.value);
-        }
-      } else if (props.container === "dayPCPlan") {
-        if (props.planObj) {
-          // 编辑
-          resp = await productionPlanApi.editDayPlan(plan.value);
-        }
-      }
-
-      if (resp.data) {
-        message.success("保存成功！");
-
-        cancelModal();
-        context.emit("refresh");
-      } else {
-        message.error(resp.message);
-      }
-    };
-
-    const cancelModal = () => {
-      context.emit("update:showPlan", false);
-      context.emit("update:planObj", null);
-      searchFormRef.value.resetFields();
-      plan.value = null;
-    };
-
-    const getComputeNum = (result: any) => {
-      return parseFloat(result.toFixed(4));
-    };
-
-    return () => (
-      <div class="Plan">
-        <a-modal
-          v-model={[props.showPlan, "visible"]}
-          wrapClassName="PlanModal"
-          closable={false}
-          maskStyle={{ position: "absolute" }}
-          getContainer={() => document.getElementById(props.container)}
-          onCancel={cancelModal}
-          footer={null}
-          // v-slots={{
-          //   footer: () => (
-          //     <div class='modal_footer'>
-          //       <a-button onClick={cancelModal}>取消</a-button>
-
-          //       <a-button type='primary' onClick={ok}>
-          //         确定
-          //       </a-button>
-          //     </div>
-          //   ),
-          // }}
-        >
-          <div class="pageContent">
-            <div class="top flex-center">
-              <a-button
-                type="text"
-                v-slots={{
-                  icon: () => <LeftOutlined />,
-                }}
-                onClick={cancelModal}
-              >
-                返回
-              </a-button>
-
-              {props.planObj ? (
-                <div class="title">{props.planObj.title}</div>
-              ) : (
-                props.container === "yearPCPlan" && (
-                  <div class="title">
-                    新增{searchFormState.value.year}年排产计划
-                  </div>
-                )
-              )}
-
-              <div>
-                {!props.readonly && plan.value && (
-                  <a-button type="primary" onClick={ok}>
-                    保存
-                  </a-button>
-                )}
-              </div>
-            </div>
-
-            <a-form
-              model={searchFormState.value}
-              ref={searchFormRef}
-              layout="inline"
-              labelAlign="right"
-            >
-              {!props.planObj && props.container === "yearPCPlan" && (
-                <a-form-item
-                  label="选择年"
-                  name="year"
-                  rules={[{ required: true, message: "请输选择" }]}
-                >
-                  <a-date-picker
-                    v-model={[searchFormState.value.year, "value"]}
-                    picker="year"
-                    format="YYYY"
-                    valueFormat="YYYY"
-                  />
-                </a-form-item>
-              )}
-            </a-form>
-
-            {plan.value && (
-              <div class="tableBox flex">
-                {/* 生产 */}
-                {plan.value.productionList.length > 0 && (
-                  <div class="production">
-                    <div class="textLine flexC textLeft fontWeight7 padding borderTop borderLeft borderBottom">
-                      生产
-                    </div>
-
-                    <div class="flex fontWeight7 borderLeft borderBottom">
-                      <div class="textLine coalSeam borderRight flexC">
-                        煤层
-                      </div>
-                      {plan.value.productionList[0].rawCoalList.map(
-                        (rawCoal: any, idx: number) => (
-                          <div class="coalType borderRight" key={idx}>
-                            <div class="textLine borderBottom flexC">
-                              {/* 毛煤 */}
-                              {typeObj[rawCoal.productionType]}
-                            </div>
-                            <div class="textLine flex">
-                              <div class="flex1 borderRight flexC">
-                                计划入洗量(t)
-                              </div>
-                              <div class="flex1 flexC">实际入洗量(t)</div>
-                            </div>
-                          </div>
-                        )
-                      )}
-
-                      <div class="product">
-                        <div class="textLine borderBottom flexC">产品煤</div>
-                        <div class="textLine flex">
-                          <div class="flex1 borderRight flexC">类型</div>
-                          <div class="flex flex4">
-                            <div class="flex1 borderRight flexC">产品煤</div>
-                            {props.container === "dayPCPlan" && (
-                              <div class="flex1 borderRight flexC">系统</div>
-                            )}
-                            <div class="flex1 borderRight flexC">
-                              计划产量(t)
-                            </div>
-                            <div class="flex1 flexC">实际产量(t)</div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 第二行 数据*/}
-                    {plan.value.productionList.map(
-                      (production: any, index: number) => (
-                        <div class="borderLeft borderBottom" key={index}>
-                          <div class="flex borderBottom">
-                            <div class="coalSeam borderRight flexC textLeft">
-                              {/* 煤层一 */}
-                              {production.coalSeamName}
-                            </div>
-
-                            {production.rawCoalList.map(
-                              (rawCoal: any, idx: number) => (
-                                <div class="coalType borderRight">
-                                  <div class="flex high100">
-                                    <div class="flex1 borderRight flexC">
-                                      {/* 计划入洗量(t) */}
-                                      {props.readonly ? (
-                                        <span>
-                                          {rawCoal.planAmount.toFixed(
-                                            precision
-                                          )}
-                                        </span>
-                                      ) : (
-                                        <a-input-number
-                                          v-model={[
-                                            rawCoal.planAmount,
-                                            "value",
-                                          ]}
-                                          size="small"
-                                          controls={false}
-                                          precision={precision}
-                                        />
-                                      )}
-                                    </div>
-                                    <div class="flex1 flexC">
-                                      {/* 实际入洗量(t) */}
-                                      {}
-                                      {!props.readonly &&
-                                      props.container === "dayPCPlan" ? (
-                                        <a-input-number
-                                          v-model={[
-                                            rawCoal.actualQuantity,
-                                            "value",
-                                          ]}
-                                          size="small"
-                                          controls={false}
-                                          precision={precision}
-                                        />
-                                      ) : (
-                                        <span>
-                                          {rawCoal.actualQuantity.toFixed(
-                                            precision
-                                          )}
-                                        </span>
-                                      )}
-                                    </div>
-                                  </div>
-                                </div>
-                              )
-                            )}
-
-                            <div class="product">
-                              <div class="flex">
-                                <div class="textLine flex1 borderBottom borderRight flexC textLeft">
-                                  主产品
-                                </div>
-                                <div class="flex4">
-                                  {production.productCoalInfo.mainProductCoalList.map(
-                                    (mainProductCoal: any, mainIdx: number) => (
-                                      <div
-                                        class="flex borderBottom"
-                                        key={mainIdx}
-                                      >
-                                        {props.container === "dayPCPlan" && (
-                                          <div class="textLine flex1 borderRight flexC">
-                                            系统
-                                          </div>
-                                        )}
-
-                                        <div class="textLine flex1 borderRight flexC textLeft">
-                                          {mainProductCoal.productCoalName}
-                                        </div>
-                                        <div class="textLine flex1 borderRight flexC">
-                                          {/* 计划产量 */}
-                                          {props.readonly ? (
-                                            <span>
-                                              {mainProductCoal.planAmount}
-                                            </span>
-                                          ) : (
-                                            <a-input-number
-                                              v-model={[
-                                                mainProductCoal.planAmount,
-                                                "value",
-                                              ]}
-                                              size="small"
-                                              controls={false}
-                                              precision={precision}
-                                            />
-                                          )}
-                                        </div>
-                                        <div class="textLine flex1 flexC">
-                                          {/* 实际产量 */}
-                                          {!props.readonly &&
-                                          props.container === "dayPCPlan" ? (
-                                            <a-input-number
-                                              v-model={[
-                                                mainProductCoal.actualQuantity,
-                                                "value",
-                                              ]}
-                                              size="small"
-                                              controls={false}
-                                              precision={precision}
-                                            />
-                                          ) : (
-                                            <span>
-                                              {mainProductCoal.actualQuantity.toFixed(
-                                                precision
-                                              )}
-                                            </span>
-                                          )}
-                                        </div>
-                                      </div>
-                                    )
-                                  )}
-                                </div>
-                              </div>
-
-                              <div class="flex">
-                                <div class="textLine flex1 borderRight flexC textLeft">
-                                  辅产品
-                                </div>
-                                <div class="flex4">
-                                  {production.productCoalInfo.auxiliaryProductCoalList.map(
-                                    (
-                                      auxiliaryCoal: any,
-                                      auxiliaryIdx: number
-                                    ) => (
-                                      <div
-                                        class={[
-                                          "flex",
-                                          auxiliaryIdx <
-                                            production.productCoalInfo
-                                              .auxiliaryProductCoalList.length -
-                                              1 && "borderBottom",
-                                        ]}
-                                        key={auxiliaryIdx}
-                                      >
-                                        {props.container === "dayPCPlan" && (
-                                          <div class="textLine flex1 borderRight flexC">
-                                            系统
-                                          </div>
-                                        )}
-
-                                        <div class="textLine flex1 borderRight flexC textLeft">
-                                          {auxiliaryCoal.productCoalName}
-                                        </div>
-                                        <div class="textLine flex1 borderRight flexC">
-                                          {/* 计划产量 */}
-                                          {props.readonly ? (
-                                            <span>
-                                              {auxiliaryCoal.planAmount}
-                                            </span>
-                                          ) : (
-                                            <a-input-number
-                                              v-model={[
-                                                auxiliaryCoal.planAmount,
-                                                "value",
-                                              ]}
-                                              size="small"
-                                              controls={false}
-                                              precision={precision}
-                                            />
-                                          )}
-                                        </div>
-                                        <div class="textLine flex1 flexC">
-                                          {/* 实际产量 */}
-                                          {!props.readonly &&
-                                          props.container === "dayPCPlan" ? (
-                                            <a-input-number
-                                              v-model={[
-                                                auxiliaryCoal.actualQuantity,
-                                                "value",
-                                              ]}
-                                              size="small"
-                                              controls={false}
-                                              precision={precision}
-                                            />
-                                          ) : (
-                                            <span>
-                                              {auxiliaryCoal.actualQuantity.toFixed(
-                                                precision
-                                              )}
-                                            </span>
-                                          )}
-                                        </div>
-                                      </div>
-                                    )
-                                  )}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-
-                          <div class="textLine flex">
-                            <div class="coalSeam"></div>
-
-                            {plan.value.productionList[0].rawCoalList.map(
-                              (rawCoal: any, idx: number) => (
-                                <div class="coalType"></div>
-                              )
-                            )}
-
-                            <div class="product flex">
-                              <div class="flex1 borderRight borderColorT"></div>
-                              <div class="flex flex4">
-                                {props.container === "dayPCPlan" && (
-                                  <div class="flex1 textRight borderRight flexC borderColorT"></div>
-                                )}
-
-                                <div class="flex1 textRight borderRight flexC">
-                                  产品总量(t)：
-                                </div>
-                                <div class="flex1 textRight borderRight flexC">
-                                  {/* 计划产量 */}
-                                  {getComputeNum(
-                                    production.productCoalInfo.mainProductCoalList.reduce(
-                                      (pre: any, cur: any) => {
-                                        return pre + cur.planAmount;
-                                      },
-                                      0
-                                    ) +
-                                      production.productCoalInfo.auxiliaryProductCoalList.reduce(
-                                        (pre: any, cur: any) => {
-                                          return pre + cur.planAmount;
-                                        },
-                                        0
-                                      )
-                                  ).toFixed(precision)}
-                                </div>
-                                <div class="flex1 textRight flexC">
-                                  {/* 实际产量 */}
-                                  {getComputeNum(
-                                    production.productCoalInfo.mainProductCoalList.reduce(
-                                      (pre: any, cur: any) => {
-                                        return pre + cur.actualQuantity;
-                                      },
-                                      0
-                                    ) +
-                                      production.productCoalInfo.auxiliaryProductCoalList.reduce(
-                                        (pre: any, cur: any) => {
-                                          return pre + cur.actualQuantity;
-                                        },
-                                        0
-                                      )
-                                  ).toFixed(precision)}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      )
-                    )}
-                  </div>
-                )}
-
-                <div class="line"></div>
-
-                {plan.value.commodityList.length > 0 && (
-                  <div class="commodity">
-                    <div class="textLine flexC textLeft fontWeight7 padding borderTop borderBottom borderRight">
-                      外运
-                    </div>
-
-                    <div class="fontWeight7">
-                      <div class="textLine coalSeam borderBottom borderRight flexC">
-                        商品煤
-                      </div>
-                      <div class="flex borderBottom">
-                        <div class="textLine flex1 borderRight flexC">
-                          商品煤
-                        </div>
-                        <div class="flex1 borderRight flexC">铁运计划量(t)</div>
-                        {"truckPlanAmount" in plan.value.commodityList[0] && (
-                          <div class="flex1 borderRight flexC">
-                            汽运计划量(t)
-                          </div>
-                        )}
-                        <div class="flex1 borderRight flexC">铁运实际量(t)</div>
-                        {"railwayActualQuantity" in
-                          plan.value.commodityList[0] && (
-                          <div class="flex1 borderRight flexC">
-                            汽运实际量(t)
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* 第二行 数据 */}
-                    <div>
-                      {plan.value.commodityList.map(
-                        (commodity: any, index: number) => (
-                          <div
-                            class={[
-                              "flex borderBottom",
-                              index < plan.value.commodityList.length - 1
-                                ? "borderBottom"
-                                : "",
-                            ]}
-                          >
-                            <div class="textLine flex1 borderRight flexC textLeft">
-                              {/* 商品煤名称 */}
-                              {commodity.commodityCoalName}
-                            </div>
-                            <div class="flex1 borderRight flexC">
-                              {/* 铁运计划量(t) */}
-                              {props.readonly ? (
-                                <div>
-                                  {commodity.railwayPlanAmount.toFixed(
-                                    precision
-                                  )}
-                                </div>
-                              ) : (
-                                <a-input-number
-                                  v-model={[
-                                    commodity.railwayPlanAmount,
-                                    "value",
-                                  ]}
-                                  size="small"
-                                  controls={false}
-                                  precision={precision}
-                                />
-                              )}
-                            </div>
-
-                            {"truckPlanAmount" in commodity && (
-                              <div class="flex1 borderRight flexC">
-                                {/* 汽运计划量(t) */}
-                                {props.readonly ? (
-                                  <div>
-                                    {commodity.truckPlanAmount?.toFixed(
-                                      precision
-                                    )}
-                                  </div>
-                                ) : (
-                                  <a-input-number
-                                    v-model={[
-                                      commodity.truckPlanAmount,
-                                      "value",
-                                    ]}
-                                    size="small"
-                                    controls={false}
-                                    precision={precision}
-                                  />
-                                )}
-                              </div>
-                            )}
-                            <div class="flex1 borderRight flexC">
-                              {/* 铁运实际量(t) */}
-                              {!props.readonly &&
-                              props.container === "dayPCPlan" ? (
-                                <a-input-number
-                                  v-model={[
-                                    commodity.railwayActualQuantity,
-                                    "value",
-                                  ]}
-                                  size="small"
-                                  controls={false}
-                                  precision={precision}
-                                />
-                              ) : (
-                                <span>
-                                  {commodity.railwayActualQuantity?.toFixed(
-                                    precision
-                                  )}
-                                </span>
-                              )}
-                            </div>
-                            {"truckActualQuantity" in commodity && (
-                              <div class="flex1 borderRight flexC">
-                                {/* 汽运实际量(t) */}
-                                {}
-                                {!props.readonly &&
-                                props.container === "dayPCPlan" ? (
-                                  <a-input-number
-                                    v-model={[
-                                      commodity.truckActualQuantity,
-                                      "value",
-                                    ]}
-                                    size="small"
-                                    controls={false}
-                                    precision={precision}
-                                  />
-                                ) : (
-                                  <span>
-                                    {commodity.truckActualQuantity?.toFixed(
-                                      precision
-                                    )}
-                                  </span>
-                                )}
-                              </div>
-                            )}
-                          </div>
-                        )
-                      )}
-
-                      {/* <div> */}
-                      <div class="flex borderBottom">
-                        <div class="textLine flex1 borderRight flexC textRight">
-                          分类总量(t)：
-                        </div>
-                        <div class="flex1 textRight borderRight flexC">
-                          {/* 铁运计划量(t) */}
-                          {getComputeNum(
-                            plan.value.commodityList.reduce(
-                              (pre: any, cur: any) => {
-                                return pre + cur.railwayPlanAmount;
-                              },
-                              0
-                            )
-                          ).toFixed(precision)}
-                        </div>
-                        {"truckPlanAmount" in plan.value.commodityList[0] && (
-                          <div class="flex1 textRight borderRight flexC">
-                            {/* 汽运计划量(t) */}
-                            {getComputeNum(
-                              plan.value.commodityList.reduce(
-                                (pre: any, cur: any) => {
-                                  return pre + cur.truckPlanAmount;
-                                },
-                                0
-                              )
-                            ).toFixed(precision)}
-                          </div>
-                        )}
-                        <div class="flex1 textRight borderRight flexC">
-                          {/* 铁运实际量(t) */}
-                          {getComputeNum(
-                            plan.value.commodityList.reduce(
-                              (pre: any, cur: any) => {
-                                return pre + cur.railwayActualQuantity;
-                              },
-                              0
-                            )
-                          ).toFixed(precision)}
-                        </div>
-                        {"truckActualQuantity" in
-                          plan.value.commodityList[0] && (
-                          <div class="flex1 textRight borderRight flexC">
-                            {/* 汽运实际量(t) */}
-                            {getComputeNum(
-                              plan.value.commodityList.reduce(
-                                (pre: any, cur: any) => {
-                                  return pre + cur.truckActualQuantity;
-                                },
-                                0
-                              )
-                            ).toFixed(precision)}
-                          </div>
-                        )}
-                      </div>
-
-                      <div class="flex borderBottom">
-                        <div class="textLine flex1 borderRight flexC textRight">
-                          外运总量(t)：
-                        </div>
-                        {"truckPlanAmount" in plan.value.commodityList[0] && (
-                          <div class="flex1 textRight borderRight borderColorT flexC"></div>
-                        )}
-                        <div class="flex1 textRight borderRight flexC">
-                          {"truckPlanAmount" in plan.value.commodityList[0]
-                            ? getComputeNum(
-                                plan.value.commodityList.reduce(
-                                  (pre: any, cur: any) => {
-                                    return pre + cur.railwayPlanAmount;
-                                  },
-                                  0
-                                ) +
-                                  plan.value.commodityList.reduce(
-                                    (pre: any, cur: any) => {
-                                      return pre + cur.truckPlanAmount;
-                                    },
-                                    0
-                                  )
-                              ).toFixed(precision)
-                            : getComputeNum(
-                                plan.value.commodityList.reduce(
-                                  (pre: any, cur: any) => {
-                                    return pre + cur.railwayPlanAmount;
-                                  },
-                                  0
-                                )
-                              ).toFixed(precision)}
-                        </div>
-                        {"truckActualQuantity" in
-                          plan.value.commodityList[0] && (
-                          <div class="flex1 textRight borderRight borderColorT flexC"></div>
-                        )}
-                        <div class="flex1 textRight borderRight flexC">
-                          {"truckActualQuantity" in plan.value.commodityList[0]
-                            ? getComputeNum(
-                                plan.value.commodityList.reduce(
-                                  (pre: any, cur: any) => {
-                                    return pre + cur.railwayActualQuantity;
-                                  },
-                                  0
-                                ) +
-                                  plan.value.commodityList.reduce(
-                                    (pre: any, cur: any) => {
-                                      return pre + cur.truckActualQuantity;
-                                    },
-                                    0
-                                  )
-                              ).toFixed(precision)
-                            : getComputeNum(
-                                plan.value.commodityList.reduce(
-                                  (pre: any, cur: any) => {
-                                    return pre + cur.railwayActualQuantity;
-                                  },
-                                  0
-                                )
-                              ).toFixed(precision)}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </a-modal>
-      </div>
-    );
-  },
-});
+import { defineComponent, ref, watch, nextTick } from "vue";
+import { message } from "ant-design-vue";
+
+import { LeftOutlined } from "@ant-design/icons-vue";
+
+import "../assets/components/Plan.less";
+
+import productionPlanApi from "@/api/productionPlan";
+
+// 数值精度
+const precision = 2;
+
+// 类型
+const typeObj: any = {
+  grossCoal: "毛煤",
+  rawCoal: "原煤",
+};
+
+export default defineComponent({
+  props: {
+    showPlan: {
+      type: Boolean,
+      default: false,
+    },
+    planObj: {
+      type: Object,
+      default: () => ({}),
+    },
+    container: {
+      type: String,
+      default: "yearPCPlan", // yearPCPlan monthPCPlan dayPCPlan
+    },
+    readonly: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ["update:showPlan", "update:planObj", "refresh"],
+
+  setup(props, context) {
+    const searchFormRef = ref();
+
+    const searchFormState = ref({
+      year: "",
+    });
+
+    const plan: any = ref(null);
+
+    watch(
+      () => props.planObj,
+      async (nVal) => {
+        if (nVal) {
+          let resp: any;
+
+          if (props.container === "yearPCPlan") {
+            resp = await productionPlanApi.showYearPlan({
+              batchId: props.planObj.batchId,
+            });
+          } else if (props.container === "monthPCPlan") {
+            resp = await productionPlanApi.showMonthPlan({
+              batchId: props.planObj.batchId,
+            });
+          } else if (props.container === "dayPCPlan") {
+            resp = await productionPlanApi.showDayPlan({
+              batchId: props.planObj.batchId,
+            });
+          }
+
+          if (resp.data) {
+            plan.value = resp.data;
+          } else {
+            plan.value = null;
+            message.error(resp.message);
+          }
+        }
+      },
+      { deep: true }
+    );
+
+    watch(
+      () => searchFormState.value.year,
+      async (nVal) => {
+        if (nVal) {
+          const resp: any = await productionPlanApi.createYearPlan({
+            year: nVal,
+          });
+
+          if (resp.data) {
+            plan.value = resp.data;
+          } else {
+            plan.value = null;
+            message.error(resp.message);
+          }
+        } else {
+          plan.value = null;
+        }
+      }
+    );
+
+    const ok = async () => {
+      await searchFormRef.value.validateFields();
+
+      let resp: any;
+
+      if (props.container === "yearPCPlan") {
+        if (props.planObj) {
+          // 编辑
+          resp = await productionPlanApi.editYearPlan(plan.value);
+        } else {
+          resp = await productionPlanApi.saveYearPlan(plan.value);
+        }
+      } else if (props.container === "monthPCPlan") {
+        if (props.planObj) {
+          // 编辑
+          resp = await productionPlanApi.editMonthPlan(plan.value);
+        }
+      } else if (props.container === "dayPCPlan") {
+        if (props.planObj) {
+          // 编辑
+          resp = await productionPlanApi.editDayPlan(plan.value);
+        }
+      }
+
+      if (resp.data) {
+        message.success("保存成功！");
+
+        cancelModal();
+        context.emit("refresh");
+      } else {
+        message.error(resp.message);
+      }
+    };
+
+    const cancelModal = () => {
+      context.emit("update:showPlan", false);
+      context.emit("update:planObj", null);
+      searchFormRef.value.resetFields();
+      plan.value = null;
+    };
+
+    const getComputeNum = (result: any) => {
+      return parseFloat(result.toFixed(4));
+    };
+
+    return () => (
+      <div class="Plan">
+        <a-modal
+          v-model={[props.showPlan, "visible"]}
+          wrapClassName="PlanModal"
+          closable={false}
+          maskStyle={{ position: "absolute" }}
+          getContainer={() => document.getElementById(props.container)}
+          onCancel={cancelModal}
+          footer={null}
+          // v-slots={{
+          //   footer: () => (
+          //     <div class='modal_footer'>
+          //       <a-button onClick={cancelModal}>取消</a-button>
+
+          //       <a-button type='primary' onClick={ok}>
+          //         确定
+          //       </a-button>
+          //     </div>
+          //   ),
+          // }}
+        >
+          <div class="pageContent">
+            <div class="top flex-center">
+              <a-button
+                type="text"
+                v-slots={{
+                  icon: () => <LeftOutlined />,
+                }}
+                onClick={cancelModal}
+              >
+                返回
+              </a-button>
+
+              {props.planObj ? (
+                <div class="title">{props.planObj.title}</div>
+              ) : (
+                props.container === "yearPCPlan" && (
+                  <div class="title">
+                    新增{searchFormState.value.year}年排产计划
+                  </div>
+                )
+              )}
+
+              <div>
+                {!props.readonly && plan.value && (
+                  <a-button type="primary" onClick={ok}>
+                    保存
+                  </a-button>
+                )}
+              </div>
+            </div>
+
+            <a-form
+              model={searchFormState.value}
+              ref={searchFormRef}
+              layout="inline"
+              labelAlign="right"
+            >
+              {!props.planObj && props.container === "yearPCPlan" && (
+                <a-form-item
+                  label="选择年"
+                  name="year"
+                  rules={[{ required: true, message: "请输选择" }]}
+                >
+                  <a-date-picker
+                    v-model={[searchFormState.value.year, "value"]}
+                    picker="year"
+                    format="YYYY"
+                    valueFormat="YYYY"
+                  />
+                </a-form-item>
+              )}
+            </a-form>
+
+            {plan.value && (
+              <div class="tableBox flex">
+                {/* 生产 */}
+                {plan.value.productionList.length > 0 && (
+                  <div class="production">
+                    <div class="textLine flexC textLeft fontWeight7 padding borderTop borderLeft borderBottom">
+                      生产
+                    </div>
+
+                    <div class="flex fontWeight7 borderLeft borderBottom">
+                      <div class="textLine coalSeam borderRight flexC">
+                        煤层
+                      </div>
+                      {plan.value.productionList[0].rawCoalList.map(
+                        (rawCoal: any, idx: number) => (
+                          <div class="coalType borderRight" key={idx}>
+                            <div class="textLine borderBottom flexC">
+                              {/* 毛煤 */}
+                              {typeObj[rawCoal.productionType]}
+                            </div>
+                            <div class="textLine flex">
+                              <div class="flex1 borderRight flexC">
+                                计划入洗量(t)
+                              </div>
+                              <div class="flex1 flexC">实际入洗量(t)</div>
+                            </div>
+                          </div>
+                        )
+                      )}
+
+                      <div class="product">
+                        <div class="textLine borderBottom flexC">产品煤</div>
+                        <div class="textLine flex">
+                          <div class="flex1 borderRight flexC">类型</div>
+                          <div class="flex flex4">
+                            <div class="flex1 borderRight flexC">产品煤</div>
+                            {props.container === "dayPCPlan" && (
+                              <div class="flex1 borderRight flexC">系统</div>
+                            )}
+                            <div class="flex1 borderRight flexC">
+                              计划产量(t)
+                            </div>
+                            <div class="flex1 flexC">实际产量(t)</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 第二行 数据*/}
+                    {plan.value.productionList.map(
+                      (production: any, index: number) => (
+                        <div class="borderLeft borderBottom" key={index}>
+                          <div class="flex borderBottom">
+                            <div class="coalSeam borderRight flexC textLeft">
+                              {/* 煤层一 */}
+                              {production.coalSeamName}
+                            </div>
+
+                            {production.rawCoalList.map(
+                              (rawCoal: any, idx: number) => (
+                                <div class="coalType borderRight">
+                                  <div class="flex high100">
+                                    <div class="flex1 borderRight flexC">
+                                      {/* 计划入洗量(t) */}
+                                      {props.readonly ? (
+                                        <span>
+                                          {rawCoal.planAmount.toFixed(
+                                            precision
+                                          )}
+                                        </span>
+                                      ) : (
+                                        <a-input-number
+                                          v-model={[
+                                            rawCoal.planAmount,
+                                            "value",
+                                          ]}
+                                          size="small"
+                                          controls={false}
+                                          precision={precision}
+                                        />
+                                      )}
+                                    </div>
+                                    <div class="flex1 flexC">
+                                      {/* 实际入洗量(t) */}
+                                      {}
+                                      {!props.readonly &&
+                                      props.container === "dayPCPlan" ? (
+                                        <a-input-number
+                                          v-model={[
+                                            rawCoal.actualQuantity,
+                                            "value",
+                                          ]}
+                                          size="small"
+                                          controls={false}
+                                          precision={precision}
+                                        />
+                                      ) : (
+                                        <span>
+                                          {rawCoal.actualQuantity.toFixed(
+                                            precision
+                                          )}
+                                        </span>
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              )
+                            )}
+
+                            <div class="product">
+                              <div class="flex">
+                                <div class="textLine flex1 borderBottom borderRight flexC textLeft">
+                                  主产品
+                                </div>
+                                <div class="flex4">
+                                  {production.productCoalInfo.mainProductCoalList.map(
+                                    (mainProductCoal: any, mainIdx: number) => (
+                                      <div
+                                        class="flex borderBottom"
+                                        key={mainIdx}
+                                      >
+                                        {props.container === "dayPCPlan" && (
+                                          <div class="textLine flex1 borderRight flexC">
+                                            系统
+                                          </div>
+                                        )}
+
+                                        <div class="textLine flex1 borderRight flexC textLeft">
+                                          {mainProductCoal.productCoalName}
+                                        </div>
+                                        <div class="textLine flex1 borderRight flexC">
+                                          {/* 计划产量 */}
+                                          {props.readonly ? (
+                                            <span>
+                                              {mainProductCoal.planAmount}
+                                            </span>
+                                          ) : (
+                                            <a-input-number
+                                              v-model={[
+                                                mainProductCoal.planAmount,
+                                                "value",
+                                              ]}
+                                              size="small"
+                                              controls={false}
+                                              precision={precision}
+                                            />
+                                          )}
+                                        </div>
+                                        <div class="textLine flex1 flexC">
+                                          {/* 实际产量 */}
+                                          {!props.readonly &&
+                                          props.container === "dayPCPlan" ? (
+                                            <a-input-number
+                                              v-model={[
+                                                mainProductCoal.actualQuantity,
+                                                "value",
+                                              ]}
+                                              size="small"
+                                              controls={false}
+                                              precision={precision}
+                                            />
+                                          ) : (
+                                            <span>
+                                              {mainProductCoal.actualQuantity.toFixed(
+                                                precision
+                                              )}
+                                            </span>
+                                          )}
+                                        </div>
+                                      </div>
+                                    )
+                                  )}
+                                </div>
+                              </div>
+
+                              <div class="flex">
+                                <div class="textLine flex1 borderRight flexC textLeft">
+                                  辅产品
+                                </div>
+                                <div class="flex4">
+                                  {production.productCoalInfo.auxiliaryProductCoalList.map(
+                                    (
+                                      auxiliaryCoal: any,
+                                      auxiliaryIdx: number
+                                    ) => (
+                                      <div
+                                        class={[
+                                          "flex",
+                                          auxiliaryIdx <
+                                            production.productCoalInfo
+                                              .auxiliaryProductCoalList.length -
+                                              1 && "borderBottom",
+                                        ]}
+                                        key={auxiliaryIdx}
+                                      >
+                                        {props.container === "dayPCPlan" && (
+                                          <div class="textLine flex1 borderRight flexC">
+                                            系统
+                                          </div>
+                                        )}
+
+                                        <div class="textLine flex1 borderRight flexC textLeft">
+                                          {auxiliaryCoal.productCoalName}
+                                        </div>
+                                        <div class="textLine flex1 borderRight flexC">
+                                          {/* 计划产量 */}
+                                          {props.readonly ? (
+                                            <span>
+                                              {auxiliaryCoal.planAmount}
+                                            </span>
+                                          ) : (
+                                            <a-input-number
+                                              v-model={[
+                                                auxiliaryCoal.planAmount,
+                                                "value",
+                                              ]}
+                                              size="small"
+                                              controls={false}
+                                              precision={precision}
+                                            />
+                                          )}
+                                        </div>
+                                        <div class="textLine flex1 flexC">
+                                          {/* 实际产量 */}
+                                          {!props.readonly &&
+                                          props.container === "dayPCPlan" ? (
+                                            <a-input-number
+                                              v-model={[
+                                                auxiliaryCoal.actualQuantity,
+                                                "value",
+                                              ]}
+                                              size="small"
+                                              controls={false}
+                                              precision={precision}
+                                            />
+                                          ) : (
+                                            <span>
+                                              {auxiliaryCoal.actualQuantity.toFixed(
+                                                precision
+                                              )}
+                                            </span>
+                                          )}
+                                        </div>
+                                      </div>
+                                    )
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="textLine flex">
+                            <div class="coalSeam"></div>
+
+                            {plan.value.productionList[0].rawCoalList.map(
+                              (rawCoal: any, idx: number) => (
+                                <div class="coalType"></div>
+                              )
+                            )}
+
+                            <div class="product flex">
+                              <div class="flex1 borderRight borderColorT"></div>
+                              <div class="flex flex4">
+                                {props.container === "dayPCPlan" && (
+                                  <div class="flex1 textRight borderRight flexC borderColorT"></div>
+                                )}
+
+                                <div class="flex1 textRight borderRight flexC">
+                                  产品总量(t)：
+                                </div>
+                                <div class="flex1 textRight borderRight flexC">
+                                  {/* 计划产量 */}
+                                  {getComputeNum(
+                                    production.productCoalInfo.mainProductCoalList.reduce(
+                                      (pre: any, cur: any) => {
+                                        return pre + cur.planAmount;
+                                      },
+                                      0
+                                    ) +
+                                      production.productCoalInfo.auxiliaryProductCoalList.reduce(
+                                        (pre: any, cur: any) => {
+                                          return pre + cur.planAmount;
+                                        },
+                                        0
+                                      )
+                                  ).toFixed(precision)}
+                                </div>
+                                <div class="flex1 textRight flexC">
+                                  {/* 实际产量 */}
+                                  {getComputeNum(
+                                    production.productCoalInfo.mainProductCoalList.reduce(
+                                      (pre: any, cur: any) => {
+                                        return pre + cur.actualQuantity;
+                                      },
+                                      0
+                                    ) +
+                                      production.productCoalInfo.auxiliaryProductCoalList.reduce(
+                                        (pre: any, cur: any) => {
+                                          return pre + cur.actualQuantity;
+                                        },
+                                        0
+                                      )
+                                  ).toFixed(precision)}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    )}
+                  </div>
+                )}
+
+                <div class="line"></div>
+
+                {plan.value.commodityList.length > 0 && (
+                  <div class="commodity">
+                    <div class="textLine flexC textLeft fontWeight7 padding borderTop borderBottom borderRight">
+                      外运
+                    </div>
+
+                    <div class="fontWeight7">
+                      <div class="textLine coalSeam borderBottom borderRight flexC">
+                        商品煤
+                      </div>
+                      <div class="flex borderBottom">
+                        <div class="textLine flex1 borderRight flexC">
+                          商品煤
+                        </div>
+                        <div class="flex1 borderRight flexC">铁运计划量(t)</div>
+                        {"truckPlanAmount" in plan.value.commodityList[0] && (
+                          <div class="flex1 borderRight flexC">
+                            汽运计划量(t)
+                          </div>
+                        )}
+                        <div class="flex1 borderRight flexC">铁运实际量(t)</div>
+                        {"railwayActualQuantity" in
+                          plan.value.commodityList[0] && (
+                          <div class="flex1 borderRight flexC">
+                            汽运实际量(t)
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 第二行 数据 */}
+                    <div>
+                      {plan.value.commodityList.map(
+                        (commodity: any, index: number) => (
+                          <div
+                            class={[
+                              "flex borderBottom",
+                              index < plan.value.commodityList.length - 1
+                                ? "borderBottom"
+                                : "",
+                            ]}
+                          >
+                            <div class="textLine flex1 borderRight flexC textLeft">
+                              {/* 商品煤名称 */}
+                              {commodity.commodityCoalName}
+                            </div>
+                            <div class="flex1 borderRight flexC">
+                              {/* 铁运计划量(t) */}
+                              {props.readonly ? (
+                                <div>
+                                  {commodity.railwayPlanAmount.toFixed(
+                                    precision
+                                  )}
+                                </div>
+                              ) : (
+                                <a-input-number
+                                  v-model={[
+                                    commodity.railwayPlanAmount,
+                                    "value",
+                                  ]}
+                                  size="small"
+                                  controls={false}
+                                  precision={precision}
+                                />
+                              )}
+                            </div>
+
+                            {"truckPlanAmount" in commodity && (
+                              <div class="flex1 borderRight flexC">
+                                {/* 汽运计划量(t) */}
+                                {props.readonly ? (
+                                  <div>
+                                    {commodity.truckPlanAmount?.toFixed(
+                                      precision
+                                    )}
+                                  </div>
+                                ) : (
+                                  <a-input-number
+                                    v-model={[
+                                      commodity.truckPlanAmount,
+                                      "value",
+                                    ]}
+                                    size="small"
+                                    controls={false}
+                                    precision={precision}
+                                  />
+                                )}
+                              </div>
+                            )}
+                            <div class="flex1 borderRight flexC">
+                              {/* 铁运实际量(t) */}
+                              {!props.readonly &&
+                              props.container === "dayPCPlan" ? (
+                                <a-input-number
+                                  v-model={[
+                                    commodity.railwayActualQuantity,
+                                    "value",
+                                  ]}
+                                  size="small"
+                                  controls={false}
+                                  precision={precision}
+                                />
+                              ) : (
+                                <span>
+                                  {commodity.railwayActualQuantity?.toFixed(
+                                    precision
+                                  )}
+                                </span>
+                              )}
+                            </div>
+                            {"truckActualQuantity" in commodity && (
+                              <div class="flex1 borderRight flexC">
+                                {/* 汽运实际量(t) */}
+                                {}
+                                {!props.readonly &&
+                                props.container === "dayPCPlan" ? (
+                                  <a-input-number
+                                    v-model={[
+                                      commodity.truckActualQuantity,
+                                      "value",
+                                    ]}
+                                    size="small"
+                                    controls={false}
+                                    precision={precision}
+                                  />
+                                ) : (
+                                  <span>
+                                    {commodity.truckActualQuantity?.toFixed(
+                                      precision
+                                    )}
+                                  </span>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )
+                      )}
+
+                      {/* <div> */}
+                      <div class="flex borderBottom">
+                        <div class="textLine flex1 borderRight flexC textRight">
+                          分类总量(t)：
+                        </div>
+                        <div class="flex1 textRight borderRight flexC">
+                          {/* 铁运计划量(t) */}
+                          {getComputeNum(
+                            plan.value.commodityList.reduce(
+                              (pre: any, cur: any) => {
+                                return pre + cur.railwayPlanAmount;
+                              },
+                              0
+                            )
+                          ).toFixed(precision)}
+                        </div>
+                        {"truckPlanAmount" in plan.value.commodityList[0] && (
+                          <div class="flex1 textRight borderRight flexC">
+                            {/* 汽运计划量(t) */}
+                            {getComputeNum(
+                              plan.value.commodityList.reduce(
+                                (pre: any, cur: any) => {
+                                  return pre + cur.truckPlanAmount;
+                                },
+                                0
+                              )
+                            ).toFixed(precision)}
+                          </div>
+                        )}
+                        <div class="flex1 textRight borderRight flexC">
+                          {/* 铁运实际量(t) */}
+                          {getComputeNum(
+                            plan.value.commodityList.reduce(
+                              (pre: any, cur: any) => {
+                                return pre + cur.railwayActualQuantity;
+                              },
+                              0
+                            )
+                          ).toFixed(precision)}
+                        </div>
+                        {"truckActualQuantity" in
+                          plan.value.commodityList[0] && (
+                          <div class="flex1 textRight borderRight flexC">
+                            {/* 汽运实际量(t) */}
+                            {getComputeNum(
+                              plan.value.commodityList.reduce(
+                                (pre: any, cur: any) => {
+                                  return pre + cur.truckActualQuantity;
+                                },
+                                0
+                              )
+                            ).toFixed(precision)}
+                          </div>
+                        )}
+                      </div>
+
+                      <div class="flex borderBottom">
+                        <div class="textLine flex1 borderRight flexC textRight">
+                          外运总量(t)：
+                        </div>
+                        {"truckPlanAmount" in plan.value.commodityList[0] && (
+                          <div class="flex1 textRight borderRight borderColorT flexC"></div>
+                        )}
+                        <div class="flex1 textRight borderRight flexC">
+                          {"truckPlanAmount" in plan.value.commodityList[0]
+                            ? getComputeNum(
+                                plan.value.commodityList.reduce(
+                                  (pre: any, cur: any) => {
+                                    return pre + cur.railwayPlanAmount;
+                                  },
+                                  0
+                                ) +
+                                  plan.value.commodityList.reduce(
+                                    (pre: any, cur: any) => {
+                                      return pre + cur.truckPlanAmount;
+                                    },
+                                    0
+                                  )
+                              ).toFixed(precision)
+                            : getComputeNum(
+                                plan.value.commodityList.reduce(
+                                  (pre: any, cur: any) => {
+                                    return pre + cur.railwayPlanAmount;
+                                  },
+                                  0
+                                )
+                              ).toFixed(precision)}
+                        </div>
+                        {"truckActualQuantity" in
+                          plan.value.commodityList[0] && (
+                          <div class="flex1 textRight borderRight borderColorT flexC"></div>
+                        )}
+                        <div class="flex1 textRight borderRight flexC">
+                          {"truckActualQuantity" in plan.value.commodityList[0]
+                            ? getComputeNum(
+                                plan.value.commodityList.reduce(
+                                  (pre: any, cur: any) => {
+                                    return pre + cur.railwayActualQuantity;
+                                  },
+                                  0
+                                ) +
+                                  plan.value.commodityList.reduce(
+                                    (pre: any, cur: any) => {
+                                      return pre + cur.truckActualQuantity;
+                                    },
+                                    0
+                                  )
+                              ).toFixed(precision)
+                            : getComputeNum(
+                                plan.value.commodityList.reduce(
+                                  (pre: any, cur: any) => {
+                                    return pre + cur.railwayActualQuantity;
+                                  },
+                                  0
+                                )
+                              ).toFixed(precision)}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </a-modal>
+      </div>
+    );
+  },
+});