inl-ui 0.0.37 → 0.0.39

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

@@ -1,434 +1,434 @@
-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 planOldApi from "@/api/productionPlan_old";
-
-import "./assets/productionPlan.less";
-
-let producedList: any = []; // 计划产销
-let consumeList: any = []; // 计划消耗
-
-const monthPlan = {
-  month: null,
-  production: null, // 入洗量
-  marketing: null, // 销量
-};
-
-const com = defineComponent({
-  setup() {
-    const searchFormRef = ref();
-    const searchFormState = ref({
-      year: dayjs().format("YYYY"),
-    });
-
-    // 获取计划产销、计划消耗
-    const getdata = async () => {
-      const resp = await planOldApi.getProduced();
-      const resp2 = await planOldApi.getConsumeList();
-      // console.log(resp, resp2);
-      producedList = resp.data;
-      consumeList = resp2.data;
-    };
-    getdata();
-
-    const visible = ref(false);
-    const modalName = ref("新增年计划");
-
-    const disabledDate = (current: Dayjs) => {
-      return current && current < dayjs().endOf("day");
-    };
-
-    const formState = ref({
-      year: dayjs().format("YYYY"),
-      planSale: [], // 计划产销
-      planTime: [], // 计划消耗
-    });
-    const formRef = ref();
-    const activeKey = ref("1");
-
-    const handleCancel = () => {
-      visible.value = false;
-      formRef.value.resetFields();
-      activeKey.value = "1";
-    };
-
-    const handleOk = async () => {
-      const resp = await planOldApi.yearSave(formState.value);
-
-      if (resp && (resp as any).message === "OK") {
-        message.success("保存成功！");
-        handleCancel();
-      }
-    };
-
-    const monthPlanVisible = ref(false);
-    const monthPlanFormState = ref({
-      isAverage: "1", // 是否平均分配
-      allotType: null, // 指定产销方式
-      monthDto: [cloneDeep(monthPlan)], // 月计划
-    });
-    const monthPlanFormRef = ref();
-
-    const monthPlanHandleCancel = () => {
-      monthPlanFormRef.value.resetFields();
-    };
-
-    const monthPlanHandleOk = async () => {
-      await monthPlanFormRef.value.validateFields();
-
-      let type;
-      if (monthPlanFormState.value.isAverage === "1") {
-        type = "1";
-      } else {
-        if (monthPlanFormState.value.allotType === "1") {
-          type = "3";
-        } else {
-          type = "2";
-        }
-      }
-      const resp = await planOldApi.monthSave({
-        ...monthPlanFormState.value,
-        type,
-        year: 2022,
-      });
-
-      if (resp && (resp as any).message === "OK") {
-        message.success("保存成功！");
-        monthPlanHandleCancel();
-      }
-    };
-
-    const addYear = () => {
-      modalName.value = "新增年计划";
-      formState.value.planSale = cloneDeep(producedList);
-      formState.value.planTime = cloneDeep(consumeList);
-
-      visible.value = true;
-    };
-
-    const editPlan = async (type: string) => {
-      if (type === "month") {
-        modalName.value = "编辑月计划";
-      }
-      const resp = await planOldApi.findYear("2022");
-      formState.value = resp.data;
-      visible.value = true;
-    };
-
-    return () => (
-      <div class="productionPlan">
-        <a-row class="row" style="margin-bottom: 10px">
-          <a-col span="6">
-            <a-button type="primary" onClick={addYear}>
-              新增年计划
-            </a-button>
-          </a-col>
-        </a-row>
-
-        <a-form
-          model={searchFormState.value}
-          ref={searchFormRef}
-          name="basic"
-          labelCol={{ style: { width: "100px" } }}
-          autocomplete="off"
-        >
-          <a-row class="row" gutter={[16, 16]}>
-            <a-col span="12">
-              <a-form-item label="" name="year">
-                <a-date-picker
-                  v-model={[searchFormState.value.year, "value"]}
-                  picker="year"
-                  format="YYYY"
-                  valueFormat="YYYY"
-                />
-              </a-form-item>
-            </a-col>
-
-            <a-col span="12" style={{ textAlign: "right" }}>
-              <a-space>
-                <a-button type="primary" onClick={() => {}}>
-                  查询
-                </a-button>
-                <a-button
-                  onClick={() => {
-                    searchFormRef.value.resetFields();
-                  }}
-                >
-                  重置
-                </a-button>
-              </a-space>
-            </a-col>
-          </a-row>
-        </a-form>
-
-        <div class="planBox">
-          <div class="line flex">
-            <div class="left">周期分类</div>
-            <div class="center">计划周期</div>
-            <div class="right">操作</div>
-          </div>
-
-          {new Array(13).fill("").map((item: any, index: number) => (
-            <div class="line flex">
-              <div class="left">年计划</div>
-              <div class="center">2022年</div>
-              <div class="right">
-                <a-space>
-                  <a-button
-                    type="link"
-                    onClick={() => {
-                      monthPlanVisible.value = true;
-                    }}
-                  >
-                    生成月计划
-                  </a-button>
-                  {/* <a-button type='link'>日计划</a-button> */}
-                  <a-button
-                    type="link"
-                    onClick={() => {
-                      editPlan("month");
-                    }}
-                  >
-                    编辑
-                  </a-button>
-                </a-space>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <a-modal
-          v-model={[monthPlanVisible.value, "visible"]}
-          title="生成月计划"
-          width="700px"
-          destroyOnClose
-          okText="生成月计划"
-          onOk={monthPlanHandleOk}
-          onCancel={monthPlanHandleCancel}
-          wrapClassName="productionPlanMonthPlanModal"
-        >
-          <a-form
-            model={monthPlanFormState.value}
-            ref={monthPlanFormRef}
-            name="basic"
-            labelCol={{ style: { width: "100px" } }}
-            autocomplete="off"
-          >
-            <a-row class="row" gutter={[16, 16]}>
-              <a-col span="12">
-                <a-form-item
-                  label="是否平均分配"
-                  name="isAverage"
-                  rules={[{ required: true, message: "不能为空!" }]}
-                >
-                  <a-select
-                    v-model={[monthPlanFormState.value.isAverage, "value"]}
-                    style="width: 100%"
-                  >
-                    <a-select-option value="1">是</a-select-option>
-                    <a-select-option value="0">否</a-select-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-
-              {monthPlanFormState.value.isAverage === "0" && (
-                <a-col span="12">
-                  <a-form-item
-                    label=""
-                    name="allotType"
-                    rules={[{ required: true, message: "不能为空!" }]}
-                  >
-                    <a-select
-                      v-model={[monthPlanFormState.value.allotType, "value"]}
-                      placeholder="指定产销方式"
-                      style="width: 100%"
-                    >
-                      <a-select-option value="1">占比</a-select-option>
-                      <a-select-option value="2">数量</a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-              )}
-            </a-row>
-          </a-form>
-
-          {monthPlanFormState.value.isAverage === "0" && (
-            <div>
-              {monthPlanFormState.value.allotType && (
-                <a-button
-                  type="primary"
-                  onClick={() => {
-                    monthPlanFormState.value.monthDto.push(
-                      cloneDeep(monthPlan)
-                    );
-                  }}
-                >
-                  添加
-                </a-button>
-              )}
-              {monthPlanFormState.value.allotType === "1" && (
-                <div class="line flex">
-                  <div class="col1">月份</div>
-                  <div class="col2">入洗量(%)</div>
-                  <div class="col3">销量(%)</div>
-                  <div class="right">操作</div>
-                </div>
-              )}
-              {monthPlanFormState.value.allotType === "2" && (
-                <div class="line flex">
-                  <div class="col1">月份</div>
-                  <div class="col2">入洗量(吨)</div>
-                  <div class="col3">商品煤1销量(吨)</div>
-                  <div class="right">操作</div>
-                </div>
-              )}
-              <div class="monthPlanBox">
-                {monthPlanFormState.value.allotType && (
-                  <div class="line">
-                    {monthPlanFormState.value.monthDto.map(
-                      (item: any, index: number) => (
-                        <div class="line flex">
-                          <div class="col1">
-                            <a-select
-                              v-model={[item.month, "value"]}
-                              style="width: 80%"
-                              placeholder="指定月"
-                            >
-                              {new Array(12)
-                                .fill("")
-                                .map((month: any, idx: number) => (
-                                  <a-select-option key={idx} value={idx + 1}>
-                                    {idx + 1}月
-                                  </a-select-option>
-                                ))}
-                            </a-select>
-                          </div>
-                          <div class="col2">
-                            <a-input-number
-                              v-model={[item.production, "value"]}
-                              style="width: 80%; "
-                              min="0"
-                              controls={false}
-                            />
-                          </div>
-                          <div class="col3">
-                            <a-input-number
-                              v-model={[item.marketing, "value"]}
-                              style="width: 80%; "
-                              min="0"
-                              controls={false}
-                            />
-                          </div>
-                          <div class="right">
-                            <delete-outlined
-                              style={{ color: "red" }}
-                              onClick={() => {
-                                monthPlanFormState.value.monthDto.splice(
-                                  index,
-                                  1
-                                );
-                              }}
-                            />
-                          </div>
-                        </div>
-                      )
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </a-modal>
-
-        <a-modal
-          v-model={[visible.value, "visible"]}
-          title={modalName.value}
-          width="700px"
-          destroyOnClose
-          onOk={handleOk}
-          onCancel={handleCancel}
-          wrapClassName="productionPlanModal"
-        >
-          <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="year">
-                  <a-date-picker
-                    disabledDate={disabledDate}
-                    v-model={[formState.value.year, "value"]}
-                    picker="year"
-                    format="YYYY"
-                    valueFormat="YYYY"
-                  />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-
-          <a-tabs v-model={[activeKey.value, "activeKey"]}>
-            <a-tab-pane key="1" tab="计划产销">
-              <div class="line flex">
-                <div class="col1">生产环节</div>
-                <div class="col2">名称</div>
-                <div class="col3">计划</div>
-                <div class="right">单位</div>
-              </div>
-              <div class="modalLinebox">
-                {formState.value.planSale.map((item: any, index: number) => (
-                  <div class="line flex">
-                    <div class="col1">{item.productProcessName}</div>
-                    <div class="col2">{item.processTargetName}</div>
-                    <div class="col3">
-                      <a-input-number
-                        v-model={[item.targetValue, "value"]}
-                        style="width:100%; "
-                        min="0"
-                        controls={false}
-                      />
-                    </div>
-                    <div class="right">{item.targetUnit}</div>
-                  </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.planTime.map((item: any, index: number) => (
-                  <div class="line flex">
-                    <div class="col1">{item.processTargetName}</div>
-                    <div class="col2">
-                      <a-input-number
-                        v-model={[item.targetValue, "value"]}
-                        style="width:100%; "
-                        min="0"
-                        controls={false}
-                      />
-                    </div>
-                    <div class="right">{item.targetUnit}</div>
-                  </div>
-                ))}
-              </div>
-            </a-tab-pane>
-          </a-tabs>
-        </a-modal>
-      </div>
-    );
-  },
-});
-
-export default utils.installComponent(com, "production-plan-old");
+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 planOldApi from "@/api/productionPlan_old";
+
+import "./assets/productionPlan.less";
+
+let producedList: any = []; // 计划产销
+let consumeList: any = []; // 计划消耗
+
+const monthPlan = {
+  month: null,
+  production: null, // 入洗量
+  marketing: null, // 销量
+};
+
+const com = defineComponent({
+  setup() {
+    const searchFormRef = ref();
+    const searchFormState = ref({
+      year: dayjs().format("YYYY"),
+    });
+
+    // 获取计划产销、计划消耗
+    const getdata = async () => {
+      const resp = await planOldApi.getProduced();
+      const resp2 = await planOldApi.getConsumeList();
+      // console.log(resp, resp2);
+      producedList = resp.data;
+      consumeList = resp2.data;
+    };
+    getdata();
+
+    const visible = ref(false);
+    const modalName = ref("新增年计划");
+
+    const disabledDate = (current: Dayjs) => {
+      return current && current < dayjs().endOf("day");
+    };
+
+    const formState = ref({
+      year: dayjs().format("YYYY"),
+      planSale: [], // 计划产销
+      planTime: [], // 计划消耗
+    });
+    const formRef = ref();
+    const activeKey = ref("1");
+
+    const handleCancel = () => {
+      visible.value = false;
+      formRef.value.resetFields();
+      activeKey.value = "1";
+    };
+
+    const handleOk = async () => {
+      const resp = await planOldApi.yearSave(formState.value);
+
+      if (resp && (resp as any).message === "OK") {
+        message.success("保存成功！");
+        handleCancel();
+      }
+    };
+
+    const monthPlanVisible = ref(false);
+    const monthPlanFormState = ref({
+      isAverage: "1", // 是否平均分配
+      allotType: null, // 指定产销方式
+      monthDto: [cloneDeep(monthPlan)], // 月计划
+    });
+    const monthPlanFormRef = ref();
+
+    const monthPlanHandleCancel = () => {
+      monthPlanFormRef.value.resetFields();
+    };
+
+    const monthPlanHandleOk = async () => {
+      await monthPlanFormRef.value.validateFields();
+
+      let type;
+      if (monthPlanFormState.value.isAverage === "1") {
+        type = "1";
+      } else {
+        if (monthPlanFormState.value.allotType === "1") {
+          type = "3";
+        } else {
+          type = "2";
+        }
+      }
+      const resp = await planOldApi.monthSave({
+        ...monthPlanFormState.value,
+        type,
+        year: 2022,
+      });
+
+      if (resp && (resp as any).message === "OK") {
+        message.success("保存成功！");
+        monthPlanHandleCancel();
+      }
+    };
+
+    const addYear = () => {
+      modalName.value = "新增年计划";
+      formState.value.planSale = cloneDeep(producedList);
+      formState.value.planTime = cloneDeep(consumeList);
+
+      visible.value = true;
+    };
+
+    const editPlan = async (type: string) => {
+      if (type === "month") {
+        modalName.value = "编辑月计划";
+      }
+      const resp = await planOldApi.findYear("2022");
+      formState.value = resp.data;
+      visible.value = true;
+    };
+
+    return () => (
+      <div class="productionPlan">
+        <a-row class="row" style="margin-bottom: 10px">
+          <a-col span="6">
+            <a-button type="primary" onClick={addYear}>
+              新增年计划
+            </a-button>
+          </a-col>
+        </a-row>
+
+        <a-form
+          model={searchFormState.value}
+          ref={searchFormRef}
+          name="basic"
+          labelCol={{ style: { width: "100px" } }}
+          autocomplete="off"
+        >
+          <a-row class="row" gutter={[16, 16]}>
+            <a-col span="12">
+              <a-form-item label="" name="year">
+                <a-date-picker
+                  v-model={[searchFormState.value.year, "value"]}
+                  picker="year"
+                  format="YYYY"
+                  valueFormat="YYYY"
+                />
+              </a-form-item>
+            </a-col>
+
+            <a-col span="12" style={{ textAlign: "right" }}>
+              <a-space>
+                <a-button type="primary" onClick={() => {}}>
+                  查询
+                </a-button>
+                <a-button
+                  onClick={() => {
+                    searchFormRef.value.resetFields();
+                  }}
+                >
+                  重置
+                </a-button>
+              </a-space>
+            </a-col>
+          </a-row>
+        </a-form>
+
+        <div class="planBox">
+          <div class="line flex">
+            <div class="left">周期分类</div>
+            <div class="center">计划周期</div>
+            <div class="right">操作</div>
+          </div>
+
+          {new Array(13).fill("").map((item: any, index: number) => (
+            <div class="line flex">
+              <div class="left">年计划</div>
+              <div class="center">2022年</div>
+              <div class="right">
+                <a-space>
+                  <a-button
+                    type="link"
+                    onClick={() => {
+                      monthPlanVisible.value = true;
+                    }}
+                  >
+                    生成月计划
+                  </a-button>
+                  {/* <a-button type='link'>日计划</a-button> */}
+                  <a-button
+                    type="link"
+                    onClick={() => {
+                      editPlan("month");
+                    }}
+                  >
+                    编辑
+                  </a-button>
+                </a-space>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <a-modal
+          v-model={[monthPlanVisible.value, "visible"]}
+          title="生成月计划"
+          width="700px"
+          destroyOnClose
+          okText="生成月计划"
+          onOk={monthPlanHandleOk}
+          onCancel={monthPlanHandleCancel}
+          wrapClassName="productionPlanMonthPlanModal"
+        >
+          <a-form
+            model={monthPlanFormState.value}
+            ref={monthPlanFormRef}
+            name="basic"
+            labelCol={{ style: { width: "100px" } }}
+            autocomplete="off"
+          >
+            <a-row class="row" gutter={[16, 16]}>
+              <a-col span="12">
+                <a-form-item
+                  label="是否平均分配"
+                  name="isAverage"
+                  rules={[{ required: true, message: "不能为空!" }]}
+                >
+                  <a-select
+                    v-model={[monthPlanFormState.value.isAverage, "value"]}
+                    style="width: 100%"
+                  >
+                    <a-select-option value="1">是</a-select-option>
+                    <a-select-option value="0">否</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+
+              {monthPlanFormState.value.isAverage === "0" && (
+                <a-col span="12">
+                  <a-form-item
+                    label=""
+                    name="allotType"
+                    rules={[{ required: true, message: "不能为空!" }]}
+                  >
+                    <a-select
+                      v-model={[monthPlanFormState.value.allotType, "value"]}
+                      placeholder="指定产销方式"
+                      style="width: 100%"
+                    >
+                      <a-select-option value="1">占比</a-select-option>
+                      <a-select-option value="2">数量</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+              )}
+            </a-row>
+          </a-form>
+
+          {monthPlanFormState.value.isAverage === "0" && (
+            <div>
+              {monthPlanFormState.value.allotType && (
+                <a-button
+                  type="primary"
+                  onClick={() => {
+                    monthPlanFormState.value.monthDto.push(
+                      cloneDeep(monthPlan)
+                    );
+                  }}
+                >
+                  添加
+                </a-button>
+              )}
+              {monthPlanFormState.value.allotType === "1" && (
+                <div class="line flex">
+                  <div class="col1">月份</div>
+                  <div class="col2">入洗量(%)</div>
+                  <div class="col3">销量(%)</div>
+                  <div class="right">操作</div>
+                </div>
+              )}
+              {monthPlanFormState.value.allotType === "2" && (
+                <div class="line flex">
+                  <div class="col1">月份</div>
+                  <div class="col2">入洗量(吨)</div>
+                  <div class="col3">商品煤1销量(吨)</div>
+                  <div class="right">操作</div>
+                </div>
+              )}
+              <div class="monthPlanBox">
+                {monthPlanFormState.value.allotType && (
+                  <div class="line">
+                    {monthPlanFormState.value.monthDto.map(
+                      (item: any, index: number) => (
+                        <div class="line flex">
+                          <div class="col1">
+                            <a-select
+                              v-model={[item.month, "value"]}
+                              style="width: 80%"
+                              placeholder="指定月"
+                            >
+                              {new Array(12)
+                                .fill("")
+                                .map((month: any, idx: number) => (
+                                  <a-select-option key={idx} value={idx + 1}>
+                                    {idx + 1}月
+                                  </a-select-option>
+                                ))}
+                            </a-select>
+                          </div>
+                          <div class="col2">
+                            <a-input-number
+                              v-model={[item.production, "value"]}
+                              style="width: 80%; "
+                              min="0"
+                              controls={false}
+                            />
+                          </div>
+                          <div class="col3">
+                            <a-input-number
+                              v-model={[item.marketing, "value"]}
+                              style="width: 80%; "
+                              min="0"
+                              controls={false}
+                            />
+                          </div>
+                          <div class="right">
+                            <delete-outlined
+                              style={{ color: "red" }}
+                              onClick={() => {
+                                monthPlanFormState.value.monthDto.splice(
+                                  index,
+                                  1
+                                );
+                              }}
+                            />
+                          </div>
+                        </div>
+                      )
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </a-modal>
+
+        <a-modal
+          v-model={[visible.value, "visible"]}
+          title={modalName.value}
+          width="700px"
+          destroyOnClose
+          onOk={handleOk}
+          onCancel={handleCancel}
+          wrapClassName="productionPlanModal"
+        >
+          <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="year">
+                  <a-date-picker
+                    disabledDate={disabledDate}
+                    v-model={[formState.value.year, "value"]}
+                    picker="year"
+                    format="YYYY"
+                    valueFormat="YYYY"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+
+          <a-tabs v-model={[activeKey.value, "activeKey"]}>
+            <a-tab-pane key="1" tab="计划产销">
+              <div class="line flex">
+                <div class="col1">生产环节</div>
+                <div class="col2">名称</div>
+                <div class="col3">计划</div>
+                <div class="right">单位</div>
+              </div>
+              <div class="modalLinebox">
+                {formState.value.planSale.map((item: any, index: number) => (
+                  <div class="line flex">
+                    <div class="col1">{item.productProcessName}</div>
+                    <div class="col2">{item.processTargetName}</div>
+                    <div class="col3">
+                      <a-input-number
+                        v-model={[item.targetValue, "value"]}
+                        style="width:100%; "
+                        min="0"
+                        controls={false}
+                      />
+                    </div>
+                    <div class="right">{item.targetUnit}</div>
+                  </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.planTime.map((item: any, index: number) => (
+                  <div class="line flex">
+                    <div class="col1">{item.processTargetName}</div>
+                    <div class="col2">
+                      <a-input-number
+                        v-model={[item.targetValue, "value"]}
+                        style="width:100%; "
+                        min="0"
+                        controls={false}
+                      />
+                    </div>
+                    <div class="right">{item.targetUnit}</div>
+                  </div>
+                ))}
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </a-modal>
+      </div>
+    );
+  },
+});
+
+export default utils.installComponent(com, "production-plan-old");