inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/projectManager/detail.tsx

@@ -1,463 +1,463 @@
-import { defineComponent, reactive, toRaw, ref, onMounted, watch } from "vue";
-import {
-  Form,
-  Row,
-  Col,
-  FormItem,
-  Input,
-  Button,
-  Select,
-  Space,
-  Table,
-  message,
-  Modal,
-  TreeSelect,
-  SelectOption,
-} from "ant-design-vue";
-import { useRoute, useRouter } from "vue-router";
-import { ProjectApi, CustomApi, ProjectCompistionApi } from "@/api/project";
-import { ProductApi, VersionApi } from "@/api/product";
-import { updateProjectItem, projectCompostionItem } from "./utils/formRules";
-import { projectCompositionTypeEnums, userDtEnums } from "./utils/emuns";
-import useTreeSearch from "./hooks/useTreeSearch";
-import CommonForm from "./components/commonForm";
-import { validateProjectDt } from "./utils/index";
-import type { FormInstance } from "ant-design-vue";
-import { ProjectItemI } from "./index";
-const customEnum = [{ name: "非标", id: "-666" }];
-const columns = [
-  {
-    title: "项目分项",
-    dataIndex: "name",
-    key: "name",
-  },
-  {
-    title: "分项承建类型",
-    dataIndex: "type",
-    key: "type",
-    slots: { customRender: "type" },
-  },
-  {
-    title: "系统名称",
-    dataIndex: "productName",
-    key: "productName",
-    slots: { customRender: "productName" },
-  },
-  {
-    title: "版本号",
-    dataIndex: "productVersionName",
-    key: "productVersionName",
-    slots: { customRender: "productVersionName" },
-  },
-  {
-    title: "创建人",
-    dataIndex: "createUser",
-    key: "createUser",
-    slots: { customRender: "createUser" },
-  },
-  {
-    title: "创建时间",
-    dataIndex: "createDt",
-    key: "createDt",
-    slots: { customRender: "createDt" },
-  },
-  {
-    title: "修改人",
-    dataIndex: "updateUser",
-    key: "updateUser",
-  },
-  {
-    title: "修改时间",
-    dataIndex: "updateDt",
-    key: "updateDt",
-    slots: { customRender: "updateDt" },
-  },
-  {
-    title: "操作",
-    dataIndex: "action",
-    key: "action",
-    slots: { customRender: "action" },
-  },
-];
-const defaultAddForm = {
-  name: "",
-};
-interface stateI {
-  tableList: any[];
-  modalShow: boolean;
-  versionList: any[];
-  addForm: {
-    name?: string;
-    productId?: string;
-    type?: number;
-    productVersionId?: string;
-  };
-  isNew?: boolean;
-}
-
-const useProject = (projectId: string) => {
-  const keyword = ref<string>("");
-  const formProjectRef = ref<FormInstance>();
-  const projectState = reactive<stateI>({
-    tableList: [],
-    modalShow: false,
-    addForm: defaultAddForm,
-    isNew: false,
-    versionList: [],
-  });
-  const getList = () => {
-    ProjectCompistionApi.getList(keyword.value, projectId).then((res) => {
-      projectState.tableList = res.data;
-    });
-  };
-  const getVersion = (productId: string) => {
-    VersionApi.getList({ productId }).then((res) => {
-      projectState.versionList = res.data;
-    });
-  };
-  const productChange = (id: string) => {
-    projectState.addForm.productVersionId = undefined;
-    getVersion(id);
-  };
-
-  const showModalProject = (data: any, isNew?: boolean) => {
-    formProjectRef.value?.resetFields();
-    projectState.modalShow = true;
-    projectState.isNew = isNew;
-    projectState.addForm = { ...data };
-    if (!isNew && data.productId) {
-      getVersion(data.productId);
-    }
-    if (!isNew && data.type == 2) {
-      projectState.addForm.productId = "-666";
-      projectState.addForm.productVersionId = "-666";
-    }
-  };
-  const handleOk = () => {
-    formProjectRef.value?.validate().then((res) => {
-      const data = { ...res, projectId };
-      const httpReq = projectState.isNew
-        ? ProjectCompistionApi.add
-        : ProjectCompistionApi.modify;
-      if (!projectState.isNew) {
-        data.id = projectState.addForm.id;
-        console.log(projectState.addForm);
-      }
-      httpReq(data).then(() => {
-        getList();
-        projectState.modalShow = false;
-        message.success("操作成功");
-      });
-    });
-  };
-  const remove = async (id: string) => {
-    ProjectCompistionApi.remove(id).then(() => {
-      message.success("删除成功");
-      getList();
-    });
-  };
-
-  return {
-    projectState,
-    formProjectRef,
-    showModalProject,
-    getList,
-    keyword,
-    handleOk,
-    remove,
-    productChange,
-    getVersion,
-  };
-};
-export default defineComponent({
-  components: { CommonForm },
-  props: {
-    projectId: {
-      type: String,
-      required: true,
-    },
-
-    editStatus: Boolean,
-  },
-  setup(_props, { emit }) {
-    const route = useRoute();
-    const router = useRouter();
-    const projectId = _props.projectId;
-    const formRef = ref<FormInstance>();
-    let productArr: any[] = [];
-    const state = reactive<{
-      projectInfo: ProjectItemI;
-      productSummary: any[];
-      versionList: any[];
-    }>({ projectInfo: {}, productSummary: [], versionList: [] });
-    // 项目组成
-    const {
-      projectState,
-      formProjectRef,
-      showModalProject,
-      getList,
-      keyword,
-      handleOk,
-      remove,
-      productChange,
-    } = useProject(projectId);
-    const getTableSlot = () => {
-      return {
-        action: ({ record }: any) => {
-          return (
-            <a-space>
-              <a
-                onClick={() => {
-                  showModalProject(record, false);
-                }}
-              >
-                编辑
-              </a>
-              <a-popconfirm
-                title="确定要删除吗"
-                onConfirm={() => {
-                  remove(record.id);
-                }}
-              >
-                <a>删除</a>
-              </a-popconfirm>
-            </a-space>
-          );
-        },
-        type: ({ record }: any) => {
-          const value = projectCompositionTypeEnums.find(
-            (item) => item.value === record.type
-          )?.label;
-          return <span>{value || "--"}</span>;
-        },
-        productName: ({ record }: any) => {
-          return <span>{record.type === 2 ? "非标" : record.productName}</span>;
-        },
-        productVersionName: ({ record }: any) => {
-          return <span>{record.type === 2 ? "非标" : record.productName}</span>;
-        },
-      };
-    };
-    const getDetail = () => {
-      ProjectApi.detail(projectId).then((res) => {
-        state.projectInfo = res.data;
-      });
-    };
-    const getProductSummary = () => {
-      ProductApi.productSummary().then((res) => {
-        state.productSummary = res.data;
-      });
-    };
-    const { tree, fieldNames } = useTreeSearch({
-      label: "name",
-      children: "subList",
-      title: "name",
-      value: "id",
-    });
-    const getCustomList = () => {
-      CustomApi.getCustomTreeList().then((res) => {
-        tree.data = res.data;
-      });
-    };
-    const customChange = (id: string) => {
-      if (!id) return;
-      CustomApi.detail(id).then(({ data }) => {
-        state.projectInfo = {
-          customerManager: data.customerManager,
-          customerManagerMobile: data.customerManagerMobile,
-          salesManager: data.salesManager,
-          salesManagerMobile: data.salesManagerMobile,
-          district: data.district,
-        };
-      });
-    };
-
-    const submit = () => {
-      formRef.value?.validate().then((res) => {
-        Object.keys(res).forEach((key: string) => {
-          if (key.indexOf("Dt") > -1 && res[key]) {
-            res[key] = res[key].format("YYYY-MM-DD 00:00:00");
-          }
-        });
-        const data = { ...res, id: projectId };
-        ProjectApi.modify(data).then(() => {
-          message.success("保存成功");
-          emit("fresh");
-          back();
-        });
-      });
-    };
-    const typeChange = (type: number) => {
-      projectState.addForm = {
-        ...projectState.addForm,
-        type,
-        productId: undefined,
-        productVersionId: undefined,
-      };
-    };
-    const back = () => {
-      emit("back");
-    };
-    onMounted(() => {
-      getDetail();
-      getCustomList();
-      getList();
-      getProductSummary();
-    });
-    return () => (
-      <div class="project_detail bg-fff pad-b-70">
-        <div class="detail_footer">
-          <a-space size={25}>
-            <a-button type="primary" ghost onClick={back}>
-              返回
-            </a-button>
-            <a-button type="primary" onClick={submit}>
-              确定
-            </a-button>
-          </a-space>
-        </div>
-        <div>
-          <h3 class="bold">基本信息</h3>
-          <div class="mar-t-20">
-            <CommonForm
-              formRef={formRef}
-              paramList={updateProjectItem.concat(userDtEnums)}
-              model={toRaw(state.projectInfo)}
-              edit={_props.editStatus}
-              v-slots={{
-                slot_customerId: (model: any) => {
-                  return (
-                    <TreeSelect
-                      v-model={[model.value.customerId, "value"]}
-                      show-search
-                      allow-clear
-                      fieldNames={fieldNames}
-                      tree-default-expand-all
-                      tree-data={tree.data}
-                      disabled
-                      onChange={customChange}
-                    ></TreeSelect>
-                  );
-                },
-              }}
-            />
-          </div>
-        </div>
-
-        <div class="mar-t-30">
-          <h3 class="bold">项目组成</h3>
-          <div class="mar-t-20">
-            <div class="align-r">
-              <a-space>
-                <a-input
-                  placeholder="请输入项目分项查询"
-                  v-model={[keyword.value, "value"]}
-                />
-                <a-button type="primary" onClick={getList}>
-                  查询
-                </a-button>
-                {_props.editStatus && (
-                  <a-button
-                    type="primary"
-                    onClick={() => showModalProject(defaultAddForm, true)}
-                  >
-                    新增
-                  </a-button>
-                )}
-              </a-space>
-              <a-table
-                class="mar-t-20"
-                columns={columns}
-                dataSource={projectState.tableList}
-                pagination={false}
-                v-slots={getTableSlot()}
-                scroll={{ y: "260px" }}
-              ></a-table>
-            </div>
-          </div>
-        </div>
-        <a-modal
-          title={projectState.isNew ? "新建产品" : "编辑产品"}
-          v-model={[projectState.modalShow, "visible"]}
-          onOk={handleOk}
-        >
-          <CommonForm
-            formRef={formProjectRef}
-            paramList={projectCompostionItem}
-            model={toRaw(projectState.addForm)}
-            colSpan={{
-              xxl: 24,
-              xl: 24,
-              lg: 24,
-            }}
-            v-slots={{
-              slot_type: (model: any) => {
-                return (
-                  <a-select
-                    v-model={[model.value.type, "value"]}
-                    onChange={typeChange}
-                  >
-                    {projectCompositionTypeEnums.map((item) => {
-                      return (
-                        <a-select-option value={item.value}>
-                          {item.label}
-                        </a-select-option>
-                      );
-                    })}
-                  </a-select>
-                );
-              },
-              slot_productId: (model: any) => {
-                return (
-                  <a-select
-                    v-model={[model.value.productId, "value"]}
-                    onChange={productChange}
-                  >
-                    {model.value.type == 1 &&
-                      state.productSummary.map((item) => {
-                        return (
-                          <a-select-option value={item.id}>
-                            {item.name}
-                          </a-select-option>
-                        );
-                      })}
-                    {model.value.type == 2 &&
-                      customEnum.map((item) => {
-                        return (
-                          <a-select-option value={item.id}>
-                            {item.name}
-                          </a-select-option>
-                        );
-                      })}
-                  </a-select>
-                );
-              },
-              slot_productVersionId: (model: any) => {
-                return (
-                  <a-select v-model={[model.value.productVersionId, "value"]}>
-                    {model.value.type == 1 &&
-                      projectState.versionList.map((item) => {
-                        return (
-                          <a-select-option value={item.id}>
-                            {item.name}
-                          </a-select-option>
-                        );
-                      })}
-                    {model.value.type == 2 &&
-                      customEnum.map((item) => {
-                        return (
-                          <a-select-option value={item.id}>
-                            {item.name}
-                          </a-select-option>
-                        );
-                      })}
-                  </a-select>
-                );
-              },
-            }}
-          />
-        </a-modal>
-      </div>
-    );
-  },
-});
+import { defineComponent, reactive, toRaw, ref, onMounted, watch } from "vue";
+import {
+  Form,
+  Row,
+  Col,
+  FormItem,
+  Input,
+  Button,
+  Select,
+  Space,
+  Table,
+  message,
+  Modal,
+  TreeSelect,
+  SelectOption,
+} from "ant-design-vue";
+import { useRoute, useRouter } from "vue-router";
+import { ProjectApi, CustomApi, ProjectCompistionApi } from "@/api/project";
+import { ProductApi, VersionApi } from "@/api/product";
+import { updateProjectItem, projectCompostionItem } from "./utils/formRules";
+import { projectCompositionTypeEnums, userDtEnums } from "./utils/emuns";
+import useTreeSearch from "./hooks/useTreeSearch";
+import CommonForm from "./components/commonForm";
+import { validateProjectDt } from "./utils/index";
+import type { FormInstance } from "ant-design-vue";
+import { ProjectItemI } from "./index";
+const customEnum = [{ name: "非标", id: "-666" }];
+const columns = [
+  {
+    title: "项目分项",
+    dataIndex: "name",
+    key: "name",
+  },
+  {
+    title: "分项承建类型",
+    dataIndex: "type",
+    key: "type",
+    slots: { customRender: "type" },
+  },
+  {
+    title: "系统名称",
+    dataIndex: "productName",
+    key: "productName",
+    slots: { customRender: "productName" },
+  },
+  {
+    title: "版本号",
+    dataIndex: "productVersionName",
+    key: "productVersionName",
+    slots: { customRender: "productVersionName" },
+  },
+  {
+    title: "创建人",
+    dataIndex: "createUser",
+    key: "createUser",
+    slots: { customRender: "createUser" },
+  },
+  {
+    title: "创建时间",
+    dataIndex: "createDt",
+    key: "createDt",
+    slots: { customRender: "createDt" },
+  },
+  {
+    title: "修改人",
+    dataIndex: "updateUser",
+    key: "updateUser",
+  },
+  {
+    title: "修改时间",
+    dataIndex: "updateDt",
+    key: "updateDt",
+    slots: { customRender: "updateDt" },
+  },
+  {
+    title: "操作",
+    dataIndex: "action",
+    key: "action",
+    slots: { customRender: "action" },
+  },
+];
+const defaultAddForm = {
+  name: "",
+};
+interface stateI {
+  tableList: any[];
+  modalShow: boolean;
+  versionList: any[];
+  addForm: {
+    name?: string;
+    productId?: string;
+    type?: number;
+    productVersionId?: string;
+  };
+  isNew?: boolean;
+}
+
+const useProject = (projectId: string) => {
+  const keyword = ref<string>("");
+  const formProjectRef = ref<FormInstance>();
+  const projectState = reactive<stateI>({
+    tableList: [],
+    modalShow: false,
+    addForm: defaultAddForm,
+    isNew: false,
+    versionList: [],
+  });
+  const getList = () => {
+    ProjectCompistionApi.getList(keyword.value, projectId).then((res) => {
+      projectState.tableList = res.data;
+    });
+  };
+  const getVersion = (productId: string) => {
+    VersionApi.getList({ productId }).then((res) => {
+      projectState.versionList = res.data;
+    });
+  };
+  const productChange = (id: string) => {
+    projectState.addForm.productVersionId = undefined;
+    getVersion(id);
+  };
+
+  const showModalProject = (data: any, isNew?: boolean) => {
+    formProjectRef.value?.resetFields();
+    projectState.modalShow = true;
+    projectState.isNew = isNew;
+    projectState.addForm = { ...data };
+    if (!isNew && data.productId) {
+      getVersion(data.productId);
+    }
+    if (!isNew && data.type == 2) {
+      projectState.addForm.productId = "-666";
+      projectState.addForm.productVersionId = "-666";
+    }
+  };
+  const handleOk = () => {
+    formProjectRef.value?.validate().then((res) => {
+      const data = { ...res, projectId };
+      const httpReq = projectState.isNew
+        ? ProjectCompistionApi.add
+        : ProjectCompistionApi.modify;
+      if (!projectState.isNew) {
+        data.id = projectState.addForm.id;
+        console.log(projectState.addForm);
+      }
+      httpReq(data).then(() => {
+        getList();
+        projectState.modalShow = false;
+        message.success("操作成功");
+      });
+    });
+  };
+  const remove = async (id: string) => {
+    ProjectCompistionApi.remove(id).then(() => {
+      message.success("删除成功");
+      getList();
+    });
+  };
+
+  return {
+    projectState,
+    formProjectRef,
+    showModalProject,
+    getList,
+    keyword,
+    handleOk,
+    remove,
+    productChange,
+    getVersion,
+  };
+};
+export default defineComponent({
+  components: { CommonForm },
+  props: {
+    projectId: {
+      type: String,
+      required: true,
+    },
+
+    editStatus: Boolean,
+  },
+  setup(_props, { emit }) {
+    const route = useRoute();
+    const router = useRouter();
+    const projectId = _props.projectId;
+    const formRef = ref<FormInstance>();
+    let productArr: any[] = [];
+    const state = reactive<{
+      projectInfo: ProjectItemI;
+      productSummary: any[];
+      versionList: any[];
+    }>({ projectInfo: {}, productSummary: [], versionList: [] });
+    // 项目组成
+    const {
+      projectState,
+      formProjectRef,
+      showModalProject,
+      getList,
+      keyword,
+      handleOk,
+      remove,
+      productChange,
+    } = useProject(projectId);
+    const getTableSlot = () => {
+      return {
+        action: ({ record }: any) => {
+          return (
+            <a-space>
+              <a
+                onClick={() => {
+                  showModalProject(record, false);
+                }}
+              >
+                编辑
+              </a>
+              <a-popconfirm
+                title="确定要删除吗"
+                onConfirm={() => {
+                  remove(record.id);
+                }}
+              >
+                <a>删除</a>
+              </a-popconfirm>
+            </a-space>
+          );
+        },
+        type: ({ record }: any) => {
+          const value = projectCompositionTypeEnums.find(
+            (item) => item.value === record.type
+          )?.label;
+          return <span>{value || "--"}</span>;
+        },
+        productName: ({ record }: any) => {
+          return <span>{record.type === 2 ? "非标" : record.productName}</span>;
+        },
+        productVersionName: ({ record }: any) => {
+          return <span>{record.type === 2 ? "非标" : record.productName}</span>;
+        },
+      };
+    };
+    const getDetail = () => {
+      ProjectApi.detail(projectId).then((res) => {
+        state.projectInfo = res.data;
+      });
+    };
+    const getProductSummary = () => {
+      ProductApi.productSummary().then((res) => {
+        state.productSummary = res.data;
+      });
+    };
+    const { tree, fieldNames } = useTreeSearch({
+      label: "name",
+      children: "subList",
+      title: "name",
+      value: "id",
+    });
+    const getCustomList = () => {
+      CustomApi.getCustomTreeList().then((res) => {
+        tree.data = res.data;
+      });
+    };
+    const customChange = (id: string) => {
+      if (!id) return;
+      CustomApi.detail(id).then(({ data }) => {
+        state.projectInfo = {
+          customerManager: data.customerManager,
+          customerManagerMobile: data.customerManagerMobile,
+          salesManager: data.salesManager,
+          salesManagerMobile: data.salesManagerMobile,
+          district: data.district,
+        };
+      });
+    };
+
+    const submit = () => {
+      formRef.value?.validate().then((res) => {
+        Object.keys(res).forEach((key: string) => {
+          if (key.indexOf("Dt") > -1 && res[key]) {
+            res[key] = res[key].format("YYYY-MM-DD 00:00:00");
+          }
+        });
+        const data = { ...res, id: projectId };
+        ProjectApi.modify(data).then(() => {
+          message.success("保存成功");
+          emit("fresh");
+          back();
+        });
+      });
+    };
+    const typeChange = (type: number) => {
+      projectState.addForm = {
+        ...projectState.addForm,
+        type,
+        productId: undefined,
+        productVersionId: undefined,
+      };
+    };
+    const back = () => {
+      emit("back");
+    };
+    onMounted(() => {
+      getDetail();
+      getCustomList();
+      getList();
+      getProductSummary();
+    });
+    return () => (
+      <div class="project_detail bg-fff pad-b-70">
+        <div class="detail_footer">
+          <a-space size={25}>
+            <a-button type="primary" ghost onClick={back}>
+              返回
+            </a-button>
+            <a-button type="primary" onClick={submit}>
+              确定
+            </a-button>
+          </a-space>
+        </div>
+        <div>
+          <h3 class="bold">基本信息</h3>
+          <div class="mar-t-20">
+            <CommonForm
+              formRef={formRef}
+              paramList={updateProjectItem.concat(userDtEnums)}
+              model={toRaw(state.projectInfo)}
+              edit={_props.editStatus}
+              v-slots={{
+                slot_customerId: (model: any) => {
+                  return (
+                    <TreeSelect
+                      v-model={[model.value.customerId, "value"]}
+                      show-search
+                      allow-clear
+                      fieldNames={fieldNames}
+                      tree-default-expand-all
+                      tree-data={tree.data}
+                      disabled
+                      onChange={customChange}
+                    ></TreeSelect>
+                  );
+                },
+              }}
+            />
+          </div>
+        </div>
+
+        <div class="mar-t-30">
+          <h3 class="bold">项目组成</h3>
+          <div class="mar-t-20">
+            <div class="align-r">
+              <a-space>
+                <a-input
+                  placeholder="请输入项目分项查询"
+                  v-model={[keyword.value, "value"]}
+                />
+                <a-button type="primary" onClick={getList}>
+                  查询
+                </a-button>
+                {_props.editStatus && (
+                  <a-button
+                    type="primary"
+                    onClick={() => showModalProject(defaultAddForm, true)}
+                  >
+                    新增
+                  </a-button>
+                )}
+              </a-space>
+              <a-table
+                class="mar-t-20"
+                columns={columns}
+                dataSource={projectState.tableList}
+                pagination={false}
+                v-slots={getTableSlot()}
+                scroll={{ y: "260px" }}
+              ></a-table>
+            </div>
+          </div>
+        </div>
+        <a-modal
+          title={projectState.isNew ? "新建产品" : "编辑产品"}
+          v-model={[projectState.modalShow, "visible"]}
+          onOk={handleOk}
+        >
+          <CommonForm
+            formRef={formProjectRef}
+            paramList={projectCompostionItem}
+            model={toRaw(projectState.addForm)}
+            colSpan={{
+              xxl: 24,
+              xl: 24,
+              lg: 24,
+            }}
+            v-slots={{
+              slot_type: (model: any) => {
+                return (
+                  <a-select
+                    v-model={[model.value.type, "value"]}
+                    onChange={typeChange}
+                  >
+                    {projectCompositionTypeEnums.map((item) => {
+                      return (
+                        <a-select-option value={item.value}>
+                          {item.label}
+                        </a-select-option>
+                      );
+                    })}
+                  </a-select>
+                );
+              },
+              slot_productId: (model: any) => {
+                return (
+                  <a-select
+                    v-model={[model.value.productId, "value"]}
+                    onChange={productChange}
+                  >
+                    {model.value.type == 1 &&
+                      state.productSummary.map((item) => {
+                        return (
+                          <a-select-option value={item.id}>
+                            {item.name}
+                          </a-select-option>
+                        );
+                      })}
+                    {model.value.type == 2 &&
+                      customEnum.map((item) => {
+                        return (
+                          <a-select-option value={item.id}>
+                            {item.name}
+                          </a-select-option>
+                        );
+                      })}
+                  </a-select>
+                );
+              },
+              slot_productVersionId: (model: any) => {
+                return (
+                  <a-select v-model={[model.value.productVersionId, "value"]}>
+                    {model.value.type == 1 &&
+                      projectState.versionList.map((item) => {
+                        return (
+                          <a-select-option value={item.id}>
+                            {item.name}
+                          </a-select-option>
+                        );
+                      })}
+                    {model.value.type == 2 &&
+                      customEnum.map((item) => {
+                        return (
+                          <a-select-option value={item.id}>
+                            {item.name}
+                          </a-select-option>
+                        );
+                      })}
+                  </a-select>
+                );
+              },
+            }}
+          />
+        </a-modal>
+      </div>
+    );
+  },
+});