inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/productManager/index.tsx

@@ -1,349 +1,349 @@
-import { defineComponent, reactive, toRaw, ref, onMounted } from "vue";
-import {
-  Form,
-  Row,
-  Col,
-  FormItem,
-  Input,
-  Button,
-  Select,
-  Space,
-  Table,
-  message,
-  Modal,
-  SelectOption,
-} from "ant-design-vue";
-import CommonForm from "@/pageComponent/views/projectManager/components/commonForm";
-import Detail from "./update";
-import "./less/index.less";
-import { ProductApi } from "@/api/product";
-import useTable from "@/pageComponent/views/projectManager/hooks/useTable";
-import { useRouter } from "vue-router";
-import { productItem } from "./utils/formRules";
-import { productTypeEnums, productStageEnums } from "./utils/emuns";
-import {
-  blobDownload,
-  blobPrint,
-} from "@/pageComponent/views/projectManager/utils/index";
-import utils from "@/utils";
-import dayjs, { Dayjs } from "dayjs";
-import type { FormInstance } from "ant-design-vue";
-export interface FormOptionI {
-  keyword?: string;
-  productManager?: string;
-  type?: number;
-  stage?: number;
-}
-export interface ProductItemI {
-  code: string;
-  productManager: string;
-  name: string;
-  shorterForm: string;
-  productManagerMobile: string;
-  type?: number;
-  [propName: string]: any;
-}
-const columns = [
-  {
-    title: "产品编号",
-    dataIndex: "code",
-    key: "code",
-  },
-  {
-    title: "产品简称",
-    dataIndex: "shorterForm",
-    key: "shorterForm",
-  },
-  {
-    title: "产品名称",
-    dataIndex: "name",
-    key: "name",
-  },
-  {
-    title: "产品类型",
-    dataIndex: "type",
-    key: "type",
-    slots: { customRender: "type" },
-  },
-  {
-    title: "产品经理",
-    dataIndex: "productManager",
-    key: "productManager",
-  },
-  {
-    title: "产品经理电话",
-    dataIndex: "productManagerMobile",
-    key: "productManagerMobile",
-  },
-  {
-    title: "产品阶段",
-    dataIndex: "stage",
-    key: "stage",
-    slots: { customRender: "stage" },
-  },
-  {
-    title: "操作",
-    dataIndex: "action",
-    key: "action",
-    slots: { customRender: "action" },
-  },
-];
-const defaultModalState: ProductItemI = {
-  code: "",
-  productManager: "",
-  name: "",
-  shorterForm: "",
-  productManagerMobile: "",
-  type: undefined,
-};
-function modalCreate() {
-  const visible = ref<boolean>(false);
-  const formRef = ref<FormInstance>();
-  const showModal = () => {
-    visible.value = true;
-    formRef.value?.resetFields();
-  };
-  const handleOk = (callback: () => void) => {
-    formRef.value?.validate().then((res) => {
-      ProductApi.add(res).then(() => {
-        visible.value = false;
-        callback && callback();
-      });
-    });
-  };
-  return {
-    visible,
-    showModal,
-    handleOk,
-    formRef,
-  };
-}
-const comp = defineComponent({
-  components: { CommonForm, Detail },
-  setup() {
-    const router = useRouter();
-    const formQuery = reactive<FormOptionI>({
-      keyword: "",
-      productManager: "",
-      type: undefined,
-      stage: undefined,
-    });
-    const state = reactive<{
-      detailShow: Boolean;
-      proId: String;
-      editStatus: Boolean;
-    }>({
-      detailShow: false,
-      proId: "",
-      editStatus: false,
-    });
-    const managerList = ref<any[]>([]);
-    const {
-      table,
-      page,
-      search,
-      getList,
-      pageChange,
-      sizeChange,
-      pageSizeOptions,
-      showTotal,
-      defaultPageSize,
-    } = useTable(
-      ProductApi.getList,
-      { data: toRaw(formQuery) },
-      {
-        list: "productList",
-        total: "totalCount",
-      }
-    );
-    const remove = (id: string) => {
-      ProductApi.remove(id).then((res) => {
-        message.success("删除成功");
-        getList();
-      });
-    };
-
-    const { visible, showModal, handleOk, formRef } = modalCreate();
-    const toDetail = (id, isEdit) => {
-      state.detailShow = true;
-      state.proId = id;
-      state.editStatus = isEdit;
-    };
-    const getTableSlot = () => {
-      return {
-        action: ({ record }: any) => {
-          return (
-            <Space>
-              <a onClick={() => toDetail(record.id, false)}>详情</a>
-              <a onClick={() => toDetail(record.id, true)}>编辑</a>
-              <a-popconfirm
-                title="确定要删除吗"
-                onConfirm={() => {
-                  remove(record.id);
-                }}
-              >
-                <a>删除</a>
-              </a-popconfirm>
-            </Space>
-          );
-        },
-        type: ({ record }: any) => {
-          let value: string | undefined = "--";
-          if (record.type) {
-            value = productTypeEnums.find(
-              (item) => item.value === record.type
-            )?.label;
-          }
-          return <span>{value}</span>;
-        },
-        stage: ({ record }: any) => {
-          let value: string | undefined = "--";
-          if (record.stage) {
-            value = productStageEnums.find(
-              (item) => item.value === record.stage
-            )?.label;
-          }
-          return <span>{value}</span>;
-        },
-      };
-    };
-    const getManagerList = () => {
-      ProductApi.managerList().then((res) => {
-        managerList.value = res.data;
-      });
-    };
-    const exportData = () => {
-      const filename =
-        "产品管理_" + dayjs().format("YYYY_MM_DD_HHmm") + ".xlsx";
-      ProductApi.exportData(toRaw(formQuery)).then((res) =>
-        blobDownload(res, filename)
-      );
-    };
-    const printData = () => {
-      ProductApi.printData(toRaw(formQuery)).then((res) => blobPrint(res));
-    };
-    onMounted(() => {
-      getList();
-      getManagerList();
-    });
-    return () => (
-      <div class="product bg-fff">
-        {state.detailShow && (
-          <detail
-            productId={state.proId}
-            editStatus={state.editStatus}
-            onBack={() => (state.detailShow = false)}
-            onFresh={getList}
-          />
-        )}
-        <div style={state.detailShow ? "display:none" : ""}>
-          <div class="option">
-            <Form>
-              <Row gutter={20}>
-                <Col span={6}>
-                  <FormItem label="产品名称" name="keyword">
-                    <Input v-model={[formQuery.keyword, "value"]} allowClear />
-                  </FormItem>
-                </Col>
-                <Col span={6}>
-                  <FormItem label="产品经理" name="productManager">
-                    <Select
-                      v-model={[formQuery.productManager, "value"]}
-                      allowClear
-                    >
-                      {managerList.value.map((name) => {
-                        return (
-                          <SelectOption value={name} key={name}>
-                            {name}
-                          </SelectOption>
-                        );
-                      })}
-                    </Select>
-                  </FormItem>
-                </Col>
-                <Col span={6}>
-                  <FormItem label="产品类型" name="type">
-                    <Select v-model={[formQuery.type, "value"]} allowClear>
-                      {productTypeEnums.map((item) => {
-                        return (
-                          <SelectOption value={item.value}>
-                            {item.label}
-                          </SelectOption>
-                        );
-                      })}
-                    </Select>
-                  </FormItem>
-                </Col>
-                <Col span={6}>
-                  <FormItem label="产品阶段" name="stage">
-                    <Select v-model={[formQuery.stage, "value"]} allowClear>
-                      {productStageEnums.map((item) => {
-                        return (
-                          <SelectOption value={item.value}>
-                            {item.label}
-                          </SelectOption>
-                        );
-                      })}
-                    </Select>
-                  </FormItem>
-                </Col>
-                <Col span={24} class="align-r">
-                  <Button type="primary" onClick={getList}>
-                    查询
-                  </Button>
-                </Col>
-              </Row>
-            </Form>
-          </div>
-          <Space>
-            <Button type="primary" onClick={showModal}>
-              新增
-            </Button>
-            <Button type="primary" onClick={exportData}>
-              导出
-            </Button>
-            <Button type="primary" onClick={printData}>
-              打印
-            </Button>
-          </Space>
-          <div class="mar-t-20">
-            <Table
-              columns={columns}
-              dataSource={table.list}
-              loading={table.loading}
-              v-slots={getTableSlot()}
-              pagination={{
-                ...page,
-                showSizeChanger: true,
-                onChange: pageChange,
-                onShowSizeChange: sizeChange,
-                defaultPageSize,
-                pageSizeOptions,
-                showTotal,
-                showQuickJumper: true,
-              }}
-            />
-          </div>
-        </div>
-        <Modal
-          width={680}
-          v-model={[visible.value, "visible"]}
-          title="新建产品"
-          onOk={() => handleOk(search)}
-        >
-          <CommonForm
-            formRef={formRef}
-            paramList={productItem}
-            model={defaultModalState}
-            colSpan={{
-              xxl: 12,
-              xl: 12,
-            }}
-          />
-        </Modal>
-      </div>
-    );
-  },
-});
-
-export default utils.installComponent(comp, "product-manage");
+import { defineComponent, reactive, toRaw, ref, onMounted } from "vue";
+import {
+  Form,
+  Row,
+  Col,
+  FormItem,
+  Input,
+  Button,
+  Select,
+  Space,
+  Table,
+  message,
+  Modal,
+  SelectOption,
+} from "ant-design-vue";
+import CommonForm from "@/pageComponent/views/projectManager/components/commonForm";
+import Detail from "./update";
+import "./less/index.less";
+import { ProductApi } from "@/api/product";
+import useTable from "@/pageComponent/views/projectManager/hooks/useTable";
+import { useRouter } from "vue-router";
+import { productItem } from "./utils/formRules";
+import { productTypeEnums, productStageEnums } from "./utils/emuns";
+import {
+  blobDownload,
+  blobPrint,
+} from "@/pageComponent/views/projectManager/utils/index";
+import utils from "@/utils";
+import dayjs, { Dayjs } from "dayjs";
+import type { FormInstance } from "ant-design-vue";
+export interface FormOptionI {
+  keyword?: string;
+  productManager?: string;
+  type?: number;
+  stage?: number;
+}
+export interface ProductItemI {
+  code: string;
+  productManager: string;
+  name: string;
+  shorterForm: string;
+  productManagerMobile: string;
+  type?: number;
+  [propName: string]: any;
+}
+const columns = [
+  {
+    title: "产品编号",
+    dataIndex: "code",
+    key: "code",
+  },
+  {
+    title: "产品简称",
+    dataIndex: "shorterForm",
+    key: "shorterForm",
+  },
+  {
+    title: "产品名称",
+    dataIndex: "name",
+    key: "name",
+  },
+  {
+    title: "产品类型",
+    dataIndex: "type",
+    key: "type",
+    slots: { customRender: "type" },
+  },
+  {
+    title: "产品经理",
+    dataIndex: "productManager",
+    key: "productManager",
+  },
+  {
+    title: "产品经理电话",
+    dataIndex: "productManagerMobile",
+    key: "productManagerMobile",
+  },
+  {
+    title: "产品阶段",
+    dataIndex: "stage",
+    key: "stage",
+    slots: { customRender: "stage" },
+  },
+  {
+    title: "操作",
+    dataIndex: "action",
+    key: "action",
+    slots: { customRender: "action" },
+  },
+];
+const defaultModalState: ProductItemI = {
+  code: "",
+  productManager: "",
+  name: "",
+  shorterForm: "",
+  productManagerMobile: "",
+  type: undefined,
+};
+function modalCreate() {
+  const visible = ref<boolean>(false);
+  const formRef = ref<FormInstance>();
+  const showModal = () => {
+    visible.value = true;
+    formRef.value?.resetFields();
+  };
+  const handleOk = (callback: () => void) => {
+    formRef.value?.validate().then((res) => {
+      ProductApi.add(res).then(() => {
+        visible.value = false;
+        callback && callback();
+      });
+    });
+  };
+  return {
+    visible,
+    showModal,
+    handleOk,
+    formRef,
+  };
+}
+const comp = defineComponent({
+  components: { CommonForm, Detail },
+  setup() {
+    const router = useRouter();
+    const formQuery = reactive<FormOptionI>({
+      keyword: "",
+      productManager: "",
+      type: undefined,
+      stage: undefined,
+    });
+    const state = reactive<{
+      detailShow: Boolean;
+      proId: String;
+      editStatus: Boolean;
+    }>({
+      detailShow: false,
+      proId: "",
+      editStatus: false,
+    });
+    const managerList = ref<any[]>([]);
+    const {
+      table,
+      page,
+      search,
+      getList,
+      pageChange,
+      sizeChange,
+      pageSizeOptions,
+      showTotal,
+      defaultPageSize,
+    } = useTable(
+      ProductApi.getList,
+      { data: toRaw(formQuery) },
+      {
+        list: "productList",
+        total: "totalCount",
+      }
+    );
+    const remove = (id: string) => {
+      ProductApi.remove(id).then((res) => {
+        message.success("删除成功");
+        getList();
+      });
+    };
+
+    const { visible, showModal, handleOk, formRef } = modalCreate();
+    const toDetail = (id, isEdit) => {
+      state.detailShow = true;
+      state.proId = id;
+      state.editStatus = isEdit;
+    };
+    const getTableSlot = () => {
+      return {
+        action: ({ record }: any) => {
+          return (
+            <Space>
+              <a onClick={() => toDetail(record.id, false)}>详情</a>
+              <a onClick={() => toDetail(record.id, true)}>编辑</a>
+              <a-popconfirm
+                title="确定要删除吗"
+                onConfirm={() => {
+                  remove(record.id);
+                }}
+              >
+                <a>删除</a>
+              </a-popconfirm>
+            </Space>
+          );
+        },
+        type: ({ record }: any) => {
+          let value: string | undefined = "--";
+          if (record.type) {
+            value = productTypeEnums.find(
+              (item) => item.value === record.type
+            )?.label;
+          }
+          return <span>{value}</span>;
+        },
+        stage: ({ record }: any) => {
+          let value: string | undefined = "--";
+          if (record.stage) {
+            value = productStageEnums.find(
+              (item) => item.value === record.stage
+            )?.label;
+          }
+          return <span>{value}</span>;
+        },
+      };
+    };
+    const getManagerList = () => {
+      ProductApi.managerList().then((res) => {
+        managerList.value = res.data;
+      });
+    };
+    const exportData = () => {
+      const filename =
+        "产品管理_" + dayjs().format("YYYY_MM_DD_HHmm") + ".xlsx";
+      ProductApi.exportData(toRaw(formQuery)).then((res) =>
+        blobDownload(res, filename)
+      );
+    };
+    const printData = () => {
+      ProductApi.printData(toRaw(formQuery)).then((res) => blobPrint(res));
+    };
+    onMounted(() => {
+      getList();
+      getManagerList();
+    });
+    return () => (
+      <div class="product bg-fff">
+        {state.detailShow && (
+          <detail
+            productId={state.proId}
+            editStatus={state.editStatus}
+            onBack={() => (state.detailShow = false)}
+            onFresh={getList}
+          />
+        )}
+        <div style={state.detailShow ? "display:none" : ""}>
+          <div class="option">
+            <Form>
+              <Row gutter={20}>
+                <Col span={6}>
+                  <FormItem label="产品名称" name="keyword">
+                    <Input v-model={[formQuery.keyword, "value"]} allowClear />
+                  </FormItem>
+                </Col>
+                <Col span={6}>
+                  <FormItem label="产品经理" name="productManager">
+                    <Select
+                      v-model={[formQuery.productManager, "value"]}
+                      allowClear
+                    >
+                      {managerList.value.map((name) => {
+                        return (
+                          <SelectOption value={name} key={name}>
+                            {name}
+                          </SelectOption>
+                        );
+                      })}
+                    </Select>
+                  </FormItem>
+                </Col>
+                <Col span={6}>
+                  <FormItem label="产品类型" name="type">
+                    <Select v-model={[formQuery.type, "value"]} allowClear>
+                      {productTypeEnums.map((item) => {
+                        return (
+                          <SelectOption value={item.value}>
+                            {item.label}
+                          </SelectOption>
+                        );
+                      })}
+                    </Select>
+                  </FormItem>
+                </Col>
+                <Col span={6}>
+                  <FormItem label="产品阶段" name="stage">
+                    <Select v-model={[formQuery.stage, "value"]} allowClear>
+                      {productStageEnums.map((item) => {
+                        return (
+                          <SelectOption value={item.value}>
+                            {item.label}
+                          </SelectOption>
+                        );
+                      })}
+                    </Select>
+                  </FormItem>
+                </Col>
+                <Col span={24} class="align-r">
+                  <Button type="primary" onClick={getList}>
+                    查询
+                  </Button>
+                </Col>
+              </Row>
+            </Form>
+          </div>
+          <Space>
+            <Button type="primary" onClick={showModal}>
+              新增
+            </Button>
+            <Button type="primary" onClick={exportData}>
+              导出
+            </Button>
+            <Button type="primary" onClick={printData}>
+              打印
+            </Button>
+          </Space>
+          <div class="mar-t-20">
+            <Table
+              columns={columns}
+              dataSource={table.list}
+              loading={table.loading}
+              v-slots={getTableSlot()}
+              pagination={{
+                ...page,
+                showSizeChanger: true,
+                onChange: pageChange,
+                onShowSizeChange: sizeChange,
+                defaultPageSize,
+                pageSizeOptions,
+                showTotal,
+                showQuickJumper: true,
+              }}
+            />
+          </div>
+        </div>
+        <Modal
+          width={680}
+          v-model={[visible.value, "visible"]}
+          title="新建产品"
+          onOk={() => handleOk(search)}
+        >
+          <CommonForm
+            formRef={formRef}
+            paramList={productItem}
+            model={defaultModalState}
+            colSpan={{
+              xxl: 12,
+              xl: 12,
+            }}
+          />
+        </Modal>
+      </div>
+    );
+  },
+});
+
+export default utils.installComponent(comp, "product-manage");