inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/productionPlanManager/productionPlanConfig.tsx

@@ -1,559 +1,559 @@
-import { defineComponent, ref } from "vue";
-import { message } from "ant-design-vue";
-
-import utils from "@/utils";
-import dayjs, { Dayjs } from "dayjs";
-import { cloneDeep } from "lodash";
-import useTableList from "@/pageComponent/hooks/useTableList";
-
-import planOldApi from "@/api/productionPlan_old";
-import "./assets/productionPlan.less";
-
-const formmatDate = (data: string) => dayjs(data).format("YYYY-MM-DD");
-
-const columns = [
-  {
-    title: "生效日期",
-    dataIndex: "validDate",
-    key: "validDate",
-    customRender: ({ text }: any) => formmatDate(text),
-  },
-  {
-    title: "失效日期",
-    dataIndex: "failDate",
-    key: "failDate",
-    customRender: ({ text }: any) => formmatDate(text),
-  },
-  {
-    title: "最后修改人",
-    dataIndex: "updateUser",
-    key: "updateUser",
-  },
-  {
-    title: "最后修改时间",
-    dataIndex: "updateDt",
-    key: "updateDt",
-    customRender: ({ text }: any) => formmatDate(text),
-  },
-  {
-    title: "状态",
-    dataIndex: "validStatus",
-    key: "validStatus",
-  },
-  {
-    title: "操作",
-    key: "operation",
-  },
-];
-
-const periodTypeList = [
-  { id: "PEAK", name: "峰时" },
-  { id: "NORMAL", name: "平时" },
-  { id: "VALLEY", name: "谷时" },
-];
-
-const pricingMethodList = [
-  { id: 1, name: "容量计价" },
-  { id: 2, name: "按需计价" },
-];
-
-const timeObj = {
-  periodType: null, // 时段类型
-  startTime: "00:00", // 起始时间
-  endTime: "00:00", // 结束时间
-};
-
-let paramList: any = [];
-
-const stateList = ["待生效", "生效中", "已失效"]; //生效状态
-
-const com = defineComponent({
-  setup() {
-    const {
-      currPage,
-      isLoading,
-      refresh,
-      tableList,
-      handlePageChange,
-      total,
-      hanldePageSizeChange,
-      pageSize,
-    } = useTableList(() =>
-      planOldApi.getPlanList({
-        currentPage: currPage.value,
-        pageSize: pageSize.value,
-      })
-    );
-
-    refresh();
-
-    // 获取参数配置
-    const allParamList = async () => {
-      const resp = await planOldApi.getParamList();
-      paramList = resp.data;
-    };
-
-    allParamList();
-
-    const formState = ref({
-      validDate: dayjs().format("YYYY-MM-DD"), // 生效日期
-      powerPeriods: [cloneDeep(timeObj)] as any, // 电量时段
-      pricingMethod: null, // 计价方式
-      powerFactorValue: null, // 功率因数基准值
-      planParams: [] as any, // 排产参数配置
-    });
-    const formRef = ref();
-    const activeKey = ref("1");
-    const visible = ref(false);
-    const modalName = ref("新增排产配置");
-
-    const addConfig = () => {
-      if (
-        tableList.value.length > 0 &&
-        (tableList.value[0] as any).validStatus === 1
-      ) {
-        message.info({
-          content: "有待生效配置时，不能新增配置！",
-        });
-        return;
-      }
-      if (tableList.value && tableList.value.length > 0) {
-        formState.value.validDate = dayjs().add(2, "day").format("YYYY-MM-DD");
-      }
-
-      editType.value = true;
-      modalName.value = "新增排产配置";
-      formState.value.planParams = cloneDeep(paramList);
-      visible.value = true;
-    };
-
-    const editType = ref(false);
-    const canEditHandle = async (row: any, canEdit = true) => {
-      const resp = await planOldApi.findById(row.id);
-      // console.log(resp);
-      formState.value = resp.data;
-      formState.value.validDate = dayjs(formState.value.validDate).format(
-        "YYYY-MM-DD"
-      );
-      editType.value = canEdit;
-      modalName.value = canEdit ? "编辑排产配置" : "查看排产配置";
-      visible.value = true;
-    };
-
-    const disabledDate = (current: Dayjs) => {
-      return current < dayjs().startOf("day");
-    };
-
-    const disabledDateMore2Day = (current: Dayjs) => {
-      return current < dayjs().add(2, "day").startOf("day");
-    };
-
-    const handleCancel = () => {
-      visible.value = false;
-      formRef.value.resetFields();
-      activeKey.value = "1";
-
-      formState.value.powerPeriods = [cloneDeep(timeObj)];
-      formState.value.validDate = dayjs().format("YYYY-MM-DD"); // 生效日期
-      formState.value.pricingMethod = null; // 计价方式
-      formState.value.powerFactorValue = null; // 功率因数基准值
-      formState.value.planParams = []; // 排产参数配置
-    };
-
-    const handleOk = async () => {
-      await formRef.value.validateFields();
-
-      if (!formState.value.pricingMethod) {
-        message.error({
-          content: "计价方式不能为空",
-        });
-        return;
-      }
-      if (!formState.value.powerFactorValue) {
-        message.error({
-          content: "功率因数基准值不能为空",
-        });
-        return;
-      }
-      let val, val2;
-      formState.value.powerPeriods.forEach((item: any, idx: number) => {
-        item.periodSort = idx;
-        if (!item.periodType) {
-          val = "时段类型";
-        }
-        if (!item.endTime) {
-          val2 = "结束时间";
-        }
-      });
-      if (val) {
-        message.error({
-          content: val + "不能为空",
-        });
-        return;
-      }
-      if (val2) {
-        message.error({
-          content: val2 + "不能为空",
-        });
-        return;
-      }
-      if (
-        formState.value.powerPeriods[formState.value.powerPeriods.length - 1]
-          .endTime !== "00:00"
-      ) {
-        message.error({
-          content: "电量时段不足24小时，请确认！",
-        });
-        return;
-      }
-
-      let resp;
-      if (modalName.value === "编辑排产配置") {
-        resp = await planOldApi.planUpdate(formState.value);
-      } else {
-        resp = await planOldApi.planSave(formState.value);
-      }
-
-      if (resp && (resp as any).message === "OK") {
-        message.success("保存成功！");
-        handleCancel();
-
-        refresh();
-      }
-    };
-
-    const addTime = () => {
-      const { powerPeriods } = formState.value;
-
-      if (!powerPeriods[powerPeriods.length - 1].periodType) {
-        message.error("请选择时段类型！");
-        return;
-      }
-
-      if (!powerPeriods[powerPeriods.length - 1].endTime) {
-        message.error("请选择结束时间！");
-        return;
-      }
-
-      if (powerPeriods[powerPeriods.length - 1].endTime === "00:00") {
-        message.error("结束时间为00:00，不能继续添加！", 10);
-        return;
-      }
-
-      const obj = cloneDeep(timeObj);
-      if (powerPeriods.length > 0) {
-        obj.startTime = powerPeriods[powerPeriods.length - 1].endTime;
-      }
-      powerPeriods.push(obj);
-    };
-
-    const changeEndTime = (time: any, timeString: string) => {
-      const { powerPeriods } = formState.value;
-      const { startTime, endTime } = powerPeriods[powerPeriods.length - 1];
-
-      if (
-        endTime !== "00:00" &&
-        dayjs(endTime, "HH:mm").diff(dayjs(startTime, "HH:mm")) <= 0
-      ) {
-        message.error("结束时间应大于起始时间！", 10);
-        powerPeriods[powerPeriods.length - 1].endTime = "00:00";
-      }
-    };
-
-    return () => (
-      <div class="productionPlanConfig">
-        <a-row class="row" style="margin-bottom: 10px">
-          <a-col span="6">
-            <a-button type="primary" onClick={addConfig}>
-              新增配置
-            </a-button>
-          </a-col>
-        </a-row>
-
-        <a-table
-          dataSource={tableList.value}
-          columns={columns}
-          pagination={{
-            current: currPage.value,
-            pageSize: pageSize.value,
-            showTotal: (num: number) => `共${num}条`,
-            showQuickJumper: true,
-            showSizeChanger: true,
-            total: total.value,
-            onChange: handlePageChange,
-            "onUpdate:current": handlePageChange,
-            "onUpdate:pageSize": hanldePageSizeChange,
-          }}
-          loading={isLoading.value}
-          v-slots={{
-            bodyCell: ({ text, record, index, column }: any) => {
-              if (column.key === "validStatus") {
-                return <span class={[`c${text}`]}>{stateList[text - 1]}</span>;
-              }
-
-              if (column.key === "operation") {
-                const { validStatus } = record;
-                return (
-                  <>
-                    {validStatus === 1 ? (
-                      <a-button
-                        size="small"
-                        type="link"
-                        onClick={() => canEditHandle(record)}
-                      >
-                        编辑
-                      </a-button>
-                    ) : (
-                      <a-button
-                        size="small"
-                        type="link"
-                        onClick={() => canEditHandle(record, false)}
-                      >
-                        查看
-                      </a-button>
-                    )}
-                  </>
-                );
-              }
-            },
-          }}
-        ></a-table>
-
-        <a-modal
-          v-model={[visible.value, "visible"]}
-          title={modalName.value}
-          width="700px"
-          destroyOnClose
-          wrapClassName="productionPlanModal"
-          v-slots={{
-            footer: () => (
-              <div class="modal_footer">
-                <a-button onClick={handleCancel}>取消</a-button>
-
-                {editType.value && (
-                  <a-button type="primary" onClick={handleOk}>
-                    确定
-                  </a-button>
-                )}
-              </div>
-            ),
-          }}
-        >
-          <a-form
-            model={formState.value}
-            ref={formRef}
-            name="basic"
-            labelCol={{ style: { width: "100px" } }}
-            autocomplete="off"
-          >
-            <a-row class="row" gutter={[16, 16]}>
-              <a-col span="12">
-                <a-form-item
-                  label="生效日期"
-                  name="validDate"
-                  rules={[{ required: true, message: "不能为空!" }]}
-                >
-                  {editType.value ? (
-                    <a-date-picker
-                      disabledDate={
-                        tableList.value && tableList.value.length > 0
-                          ? disabledDateMore2Day
-                          : disabledDate
-                      }
-                      v-model={[formState.value.validDate, "value"]}
-                      format="YYYY-MM-DD"
-                      valueFormat="YYYY-MM-DD"
-                    />
-                  ) : (
-                    formState.value.validDate
-                  )}
-                </a-form-item>
-              </a-col>
-            </a-row>
-
-            <a-tabs v-model={[activeKey.value, "activeKey"]}>
-              <a-tab-pane key="1" tab="基本配置">
-                <div class="titleLine flex-center">电量时段维护</div>
-                {/* <a-button type='primary' onClick={addTime}>
-                  添加时段
-                </a-button> */}
-
-                <div class="line flex">
-                  <div class="col1">时段类型</div>
-                  <div class="col2">起始时间(包含)</div>
-                  <div class="col3">结束时间(不包含)</div>
-                  <div class="right">操作</div>
-                </div>
-                <div class="timeLinebox">
-                  {formState.value.powerPeriods.map(
-                    (item: any, index: number) => (
-                      <div class="line flex">
-                        <div class="col1">
-                          {editType.value &&
-                          index === formState.value.powerPeriods.length - 1 ? (
-                            <a-select
-                              v-model={[
-                                formState.value.powerPeriods[index].periodType,
-                                "value",
-                              ]}
-                              style="width: 80%"
-                            >
-                              {periodTypeList.map((type: any, idx: number) => (
-                                <a-select-option key={type.id} value={type.id}>
-                                  {type.name}
-                                </a-select-option>
-                              ))}
-                            </a-select>
-                          ) : (
-                            periodTypeList.filter((pt: any) => {
-                              return (
-                                pt.id ===
-                                formState.value.powerPeriods[index].periodType
-                              );
-                            })[0]?.name
-                          )}
-                        </div>
-                        <div class="col2">{item.startTime}</div>
-                        <div class="col3">
-                          {editType.value &&
-                          index === formState.value.powerPeriods.length - 1 ? (
-                            <a-time-picker
-                              v-model={[
-                                formState.value.powerPeriods[index].endTime,
-                                "value",
-                              ]}
-                              format="HH:mm"
-                              valueFormat="HH:mm"
-                              onChange={changeEndTime}
-                              allowClear={false}
-                            />
-                          ) : (
-                            formState.value.powerPeriods[index].endTime
-                          )}
-                        </div>
-                        <div class="right flex-center">
-                          {editType.value &&
-                            index !== 0 &&
-                            index ===
-                              formState.value.powerPeriods.length - 1 && (
-                              <minus-square-outlined
-                                style={{ color: "red" }}
-                                onClick={() => {
-                                  formState.value.powerPeriods.splice(index, 1);
-                                }}
-                              />
-                            )}
-
-                          {editType.value &&
-                            index ===
-                              formState.value.powerPeriods.length - 1 && (
-                              <plus-square-outlined
-                                style={{ color: "blue" }}
-                                onClick={addTime}
-                              />
-                            )}
-                        </div>
-                      </div>
-                    )
-                  )}
-                </div>
-
-                <div class="titleLine flex-center">电量其他配置</div>
-
-                <div class="powerConfigLine flex">
-                  <div class="col1">配置名称</div>
-                  <div class="col2">选项</div>
-                </div>
-                <div class="powerConfigLine flex">
-                  <div class="col1">计价方式</div>
-                  <div
-                    class="col2"
-                    style={{ textAlign: editType.value ? "left" : "unset" }}
-                  >
-                    {editType.value ? (
-                      <a-select
-                        v-model={[formState.value.pricingMethod, "value"]}
-                        style="width: 100%"
-                        disabled={!editType.value}
-                      >
-                        {pricingMethodList.map((type: any, idx: number) => (
-                          <a-select-option key={type.id} value={type.id}>
-                            {type.name}
-                          </a-select-option>
-                        ))}
-                      </a-select>
-                    ) : (
-                      pricingMethodList[formState.value.pricingMethod!]?.name
-                    )}
-                  </div>
-                </div>
-                <div class="powerConfigLine flex">
-                  <div class="col1">功率因数基准值</div>
-                  <div class="col2">
-                    {editType.value ? (
-                      <a-input-number
-                        v-model={[formState.value.powerFactorValue, "value"]}
-                        precision={2}
-                        style="width: 100%;"
-                        min="0"
-                        controls={false}
-                      />
-                    ) : (
-                      formState.value.powerFactorValue
-                    )}
-                  </div>
-                </div>
-              </a-tab-pane>
-
-              <a-tab-pane key="2" tab="参数配置">
-                <div class="line flex">
-                  <div class="col1">名称</div>
-                  <div class="col2">单价</div>
-                  <div class="right">单位</div>
-                </div>
-                <div class="modalLinebox">
-                  {formState.value.planParams.map(
-                    (item: any, index: number) => (
-                      <div class="line flex" key={item.id}>
-                        <div class="col1">
-                          <a-space>
-                            {item.paramName}
-                            {item.promptDext !== null && (
-                              <a-tooltip
-                                v-slots={{
-                                  title: () => item.promptDext,
-                                }}
-                              >
-                                <info-circle-outlined />
-                              </a-tooltip>
-                            )}
-                          </a-space>
-                        </div>
-                        <div class="col2">
-                          {editType.value ? (
-                            <a-input-number
-                              v-model={[item.paramValue, "value"]}
-                              style="width:100%; "
-                              precision={2}
-                              min="0"
-                              controls={false}
-                            />
-                          ) : (
-                            item.paramValue
-                          )}
-                        </div>
-                        <div class="right">{item.paramUnit}</div>
-                      </div>
-                    )
-                  )}
-                </div>
-              </a-tab-pane>
-            </a-tabs>
-          </a-form>
-        </a-modal>
-      </div>
-    );
-  },
-});
-
-export default utils.installComponent(com, "production-plan-config");
+import { defineComponent, ref } from "vue";
+import { message } from "ant-design-vue";
+
+import utils from "@/utils";
+import dayjs, { Dayjs } from "dayjs";
+import { cloneDeep } from "lodash";
+import useTableList from "@/pageComponent/hooks/useTableList";
+
+import planOldApi from "@/api/productionPlan_old";
+import "./assets/productionPlan.less";
+
+const formmatDate = (data: string) => dayjs(data).format("YYYY-MM-DD");
+
+const columns = [
+  {
+    title: "生效日期",
+    dataIndex: "validDate",
+    key: "validDate",
+    customRender: ({ text }: any) => formmatDate(text),
+  },
+  {
+    title: "失效日期",
+    dataIndex: "failDate",
+    key: "failDate",
+    customRender: ({ text }: any) => formmatDate(text),
+  },
+  {
+    title: "最后修改人",
+    dataIndex: "updateUser",
+    key: "updateUser",
+  },
+  {
+    title: "最后修改时间",
+    dataIndex: "updateDt",
+    key: "updateDt",
+    customRender: ({ text }: any) => formmatDate(text),
+  },
+  {
+    title: "状态",
+    dataIndex: "validStatus",
+    key: "validStatus",
+  },
+  {
+    title: "操作",
+    key: "operation",
+  },
+];
+
+const periodTypeList = [
+  { id: "PEAK", name: "峰时" },
+  { id: "NORMAL", name: "平时" },
+  { id: "VALLEY", name: "谷时" },
+];
+
+const pricingMethodList = [
+  { id: 1, name: "容量计价" },
+  { id: 2, name: "按需计价" },
+];
+
+const timeObj = {
+  periodType: null, // 时段类型
+  startTime: "00:00", // 起始时间
+  endTime: "00:00", // 结束时间
+};
+
+let paramList: any = [];
+
+const stateList = ["待生效", "生效中", "已失效"]; //生效状态
+
+const com = defineComponent({
+  setup() {
+    const {
+      currPage,
+      isLoading,
+      refresh,
+      tableList,
+      handlePageChange,
+      total,
+      hanldePageSizeChange,
+      pageSize,
+    } = useTableList(() =>
+      planOldApi.getPlanList({
+        currentPage: currPage.value,
+        pageSize: pageSize.value,
+      })
+    );
+
+    refresh();
+
+    // 获取参数配置
+    const allParamList = async () => {
+      const resp = await planOldApi.getParamList();
+      paramList = resp.data;
+    };
+
+    allParamList();
+
+    const formState = ref({
+      validDate: dayjs().format("YYYY-MM-DD"), // 生效日期
+      powerPeriods: [cloneDeep(timeObj)] as any, // 电量时段
+      pricingMethod: null, // 计价方式
+      powerFactorValue: null, // 功率因数基准值
+      planParams: [] as any, // 排产参数配置
+    });
+    const formRef = ref();
+    const activeKey = ref("1");
+    const visible = ref(false);
+    const modalName = ref("新增排产配置");
+
+    const addConfig = () => {
+      if (
+        tableList.value.length > 0 &&
+        (tableList.value[0] as any).validStatus === 1
+      ) {
+        message.info({
+          content: "有待生效配置时，不能新增配置！",
+        });
+        return;
+      }
+      if (tableList.value && tableList.value.length > 0) {
+        formState.value.validDate = dayjs().add(2, "day").format("YYYY-MM-DD");
+      }
+
+      editType.value = true;
+      modalName.value = "新增排产配置";
+      formState.value.planParams = cloneDeep(paramList);
+      visible.value = true;
+    };
+
+    const editType = ref(false);
+    const canEditHandle = async (row: any, canEdit = true) => {
+      const resp = await planOldApi.findById(row.id);
+      // console.log(resp);
+      formState.value = resp.data;
+      formState.value.validDate = dayjs(formState.value.validDate).format(
+        "YYYY-MM-DD"
+      );
+      editType.value = canEdit;
+      modalName.value = canEdit ? "编辑排产配置" : "查看排产配置";
+      visible.value = true;
+    };
+
+    const disabledDate = (current: Dayjs) => {
+      return current < dayjs().startOf("day");
+    };
+
+    const disabledDateMore2Day = (current: Dayjs) => {
+      return current < dayjs().add(2, "day").startOf("day");
+    };
+
+    const handleCancel = () => {
+      visible.value = false;
+      formRef.value.resetFields();
+      activeKey.value = "1";
+
+      formState.value.powerPeriods = [cloneDeep(timeObj)];
+      formState.value.validDate = dayjs().format("YYYY-MM-DD"); // 生效日期
+      formState.value.pricingMethod = null; // 计价方式
+      formState.value.powerFactorValue = null; // 功率因数基准值
+      formState.value.planParams = []; // 排产参数配置
+    };
+
+    const handleOk = async () => {
+      await formRef.value.validateFields();
+
+      if (!formState.value.pricingMethod) {
+        message.error({
+          content: "计价方式不能为空",
+        });
+        return;
+      }
+      if (!formState.value.powerFactorValue) {
+        message.error({
+          content: "功率因数基准值不能为空",
+        });
+        return;
+      }
+      let val, val2;
+      formState.value.powerPeriods.forEach((item: any, idx: number) => {
+        item.periodSort = idx;
+        if (!item.periodType) {
+          val = "时段类型";
+        }
+        if (!item.endTime) {
+          val2 = "结束时间";
+        }
+      });
+      if (val) {
+        message.error({
+          content: val + "不能为空",
+        });
+        return;
+      }
+      if (val2) {
+        message.error({
+          content: val2 + "不能为空",
+        });
+        return;
+      }
+      if (
+        formState.value.powerPeriods[formState.value.powerPeriods.length - 1]
+          .endTime !== "00:00"
+      ) {
+        message.error({
+          content: "电量时段不足24小时，请确认！",
+        });
+        return;
+      }
+
+      let resp;
+      if (modalName.value === "编辑排产配置") {
+        resp = await planOldApi.planUpdate(formState.value);
+      } else {
+        resp = await planOldApi.planSave(formState.value);
+      }
+
+      if (resp && (resp as any).message === "OK") {
+        message.success("保存成功！");
+        handleCancel();
+
+        refresh();
+      }
+    };
+
+    const addTime = () => {
+      const { powerPeriods } = formState.value;
+
+      if (!powerPeriods[powerPeriods.length - 1].periodType) {
+        message.error("请选择时段类型！");
+        return;
+      }
+
+      if (!powerPeriods[powerPeriods.length - 1].endTime) {
+        message.error("请选择结束时间！");
+        return;
+      }
+
+      if (powerPeriods[powerPeriods.length - 1].endTime === "00:00") {
+        message.error("结束时间为00:00，不能继续添加！", 10);
+        return;
+      }
+
+      const obj = cloneDeep(timeObj);
+      if (powerPeriods.length > 0) {
+        obj.startTime = powerPeriods[powerPeriods.length - 1].endTime;
+      }
+      powerPeriods.push(obj);
+    };
+
+    const changeEndTime = (time: any, timeString: string) => {
+      const { powerPeriods } = formState.value;
+      const { startTime, endTime } = powerPeriods[powerPeriods.length - 1];
+
+      if (
+        endTime !== "00:00" &&
+        dayjs(endTime, "HH:mm").diff(dayjs(startTime, "HH:mm")) <= 0
+      ) {
+        message.error("结束时间应大于起始时间！", 10);
+        powerPeriods[powerPeriods.length - 1].endTime = "00:00";
+      }
+    };
+
+    return () => (
+      <div class="productionPlanConfig flex">
+        <a-row class="row" style="margin-bottom: 10px">
+          <a-col span="6">
+            <a-button type="primary" onClick={addConfig}>
+              新增配置
+            </a-button>
+          </a-col>
+        </a-row>
+
+        <a-table
+          dataSource={tableList.value}
+          columns={columns}
+          pagination={{
+            current: currPage.value,
+            pageSize: pageSize.value,
+            showTotal: (num: number) => `共${num}条`,
+            showQuickJumper: true,
+            showSizeChanger: true,
+            total: total.value,
+            onChange: handlePageChange,
+            "onUpdate:current": handlePageChange,
+            "onUpdate:pageSize": hanldePageSizeChange,
+          }}
+          loading={isLoading.value}
+          v-slots={{
+            bodyCell: ({ text, record, index, column }: any) => {
+              if (column.key === "validStatus") {
+                return <span class={[`c${text}`]}>{stateList[text - 1]}</span>;
+              }
+
+              if (column.key === "operation") {
+                const { validStatus } = record;
+                return (
+                  <>
+                    {validStatus === 1 ? (
+                      <a-button
+                        size="small"
+                        type="link"
+                        onClick={() => canEditHandle(record)}
+                      >
+                        编辑
+                      </a-button>
+                    ) : (
+                      <a-button
+                        size="small"
+                        type="link"
+                        onClick={() => canEditHandle(record, false)}
+                      >
+                        查看
+                      </a-button>
+                    )}
+                  </>
+                );
+              }
+            },
+          }}
+        ></a-table>
+
+        <a-modal
+          v-model={[visible.value, "visible"]}
+          title={modalName.value}
+          width="700px"
+          destroyOnClose
+          wrapClassName="productionPlanModal"
+          v-slots={{
+            footer: () => (
+              <div class="modal_footer">
+                <a-button onClick={handleCancel}>取消</a-button>
+
+                {editType.value && (
+                  <a-button type="primary" onClick={handleOk}>
+                    确定
+                  </a-button>
+                )}
+              </div>
+            ),
+          }}
+        >
+          <a-form
+            model={formState.value}
+            ref={formRef}
+            name="basic"
+            labelCol={{ style: { width: "100px" } }}
+            autocomplete="off"
+          >
+            <a-row class="row" gutter={[16, 16]}>
+              <a-col span="12">
+                <a-form-item
+                  label="生效日期"
+                  name="validDate"
+                  rules={[{ required: true, message: "不能为空!" }]}
+                >
+                  {editType.value ? (
+                    <a-date-picker
+                      disabledDate={
+                        tableList.value && tableList.value.length > 0
+                          ? disabledDateMore2Day
+                          : disabledDate
+                      }
+                      v-model={[formState.value.validDate, "value"]}
+                      format="YYYY-MM-DD"
+                      valueFormat="YYYY-MM-DD"
+                    />
+                  ) : (
+                    formState.value.validDate
+                  )}
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-tabs v-model={[activeKey.value, "activeKey"]}>
+              <a-tab-pane key="1" tab="基本配置">
+                <div class="titleLine flex-center">电量时段维护</div>
+                {/* <a-button type='primary' onClick={addTime}>
+                  添加时段
+                </a-button> */}
+
+                <div class="line flex">
+                  <div class="col1">时段类型</div>
+                  <div class="col2">起始时间(包含)</div>
+                  <div class="col3">结束时间(不包含)</div>
+                  <div class="right">操作</div>
+                </div>
+                <div class="timeLinebox">
+                  {formState.value.powerPeriods.map(
+                    (item: any, index: number) => (
+                      <div class="line flex">
+                        <div class="col1">
+                          {editType.value &&
+                          index === formState.value.powerPeriods.length - 1 ? (
+                            <a-select
+                              v-model={[
+                                formState.value.powerPeriods[index].periodType,
+                                "value",
+                              ]}
+                              style="width: 80%"
+                            >
+                              {periodTypeList.map((type: any, idx: number) => (
+                                <a-select-option key={type.id} value={type.id}>
+                                  {type.name}
+                                </a-select-option>
+                              ))}
+                            </a-select>
+                          ) : (
+                            periodTypeList.filter((pt: any) => {
+                              return (
+                                pt.id ===
+                                formState.value.powerPeriods[index].periodType
+                              );
+                            })[0]?.name
+                          )}
+                        </div>
+                        <div class="col2">{item.startTime}</div>
+                        <div class="col3">
+                          {editType.value &&
+                          index === formState.value.powerPeriods.length - 1 ? (
+                            <a-time-picker
+                              v-model={[
+                                formState.value.powerPeriods[index].endTime,
+                                "value",
+                              ]}
+                              format="HH:mm"
+                              valueFormat="HH:mm"
+                              onChange={changeEndTime}
+                              allowClear={false}
+                            />
+                          ) : (
+                            formState.value.powerPeriods[index].endTime
+                          )}
+                        </div>
+                        <div class="right flex-center">
+                          {editType.value &&
+                            index !== 0 &&
+                            index ===
+                              formState.value.powerPeriods.length - 1 && (
+                              <minus-square-outlined
+                                style={{ color: "red" }}
+                                onClick={() => {
+                                  formState.value.powerPeriods.splice(index, 1);
+                                }}
+                              />
+                            )}
+
+                          {editType.value &&
+                            index ===
+                              formState.value.powerPeriods.length - 1 && (
+                              <plus-square-outlined
+                                style={{ color: "blue" }}
+                                onClick={addTime}
+                              />
+                            )}
+                        </div>
+                      </div>
+                    )
+                  )}
+                </div>
+
+                <div class="titleLine flex-center">电量其他配置</div>
+
+                <div class="powerConfigLine flex">
+                  <div class="col1">配置名称</div>
+                  <div class="col2">选项</div>
+                </div>
+                <div class="powerConfigLine flex">
+                  <div class="col1">计价方式</div>
+                  <div
+                    class="col2"
+                    style={{ textAlign: editType.value ? "left" : "unset" }}
+                  >
+                    {editType.value ? (
+                      <a-select
+                        v-model={[formState.value.pricingMethod, "value"]}
+                        style="width: 100%"
+                        disabled={!editType.value}
+                      >
+                        {pricingMethodList.map((type: any, idx: number) => (
+                          <a-select-option key={type.id} value={type.id}>
+                            {type.name}
+                          </a-select-option>
+                        ))}
+                      </a-select>
+                    ) : (
+                      pricingMethodList[formState.value.pricingMethod!]?.name
+                    )}
+                  </div>
+                </div>
+                <div class="powerConfigLine flex">
+                  <div class="col1">功率因数基准值</div>
+                  <div class="col2">
+                    {editType.value ? (
+                      <a-input-number
+                        v-model={[formState.value.powerFactorValue, "value"]}
+                        precision={2}
+                        style="width: 100%;"
+                        min="0"
+                        controls={false}
+                      />
+                    ) : (
+                      formState.value.powerFactorValue
+                    )}
+                  </div>
+                </div>
+              </a-tab-pane>
+
+              <a-tab-pane key="2" tab="参数配置">
+                <div class="line flex">
+                  <div class="col1">名称</div>
+                  <div class="col2">单价</div>
+                  <div class="right">单位</div>
+                </div>
+                <div class="modalLinebox">
+                  {formState.value.planParams.map(
+                    (item: any, index: number) => (
+                      <div class="line flex" key={item.id}>
+                        <div class="col1">
+                          <a-space>
+                            {item.paramName}
+                            {item.promptDext !== null && (
+                              <a-tooltip
+                                v-slots={{
+                                  title: () => item.promptDext,
+                                }}
+                              >
+                                <info-circle-outlined />
+                              </a-tooltip>
+                            )}
+                          </a-space>
+                        </div>
+                        <div class="col2">
+                          {editType.value ? (
+                            <a-input-number
+                              v-model={[item.paramValue, "value"]}
+                              style="width:100%; "
+                              precision={2}
+                              min="0"
+                              controls={false}
+                            />
+                          ) : (
+                            item.paramValue
+                          )}
+                        </div>
+                        <div class="right">{item.paramUnit}</div>
+                      </div>
+                    )
+                  )}
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+          </a-form>
+        </a-modal>
+      </div>
+    );
+  },
+});
+
+export default utils.installComponent(com, "production-plan-config");