inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/card-center/cardWarehouse.tsx

@@ -1,679 +1,679 @@
-import {
-  defineComponent,
-  ref,
-  reactive,
-  onMounted,
-  PropType,
-  watch,
-  nextTick,
-} from "vue";
-import { message, Modal } from "ant-design-vue";
-import utils from "@/utils";
-import cardTable from "@/pageComponent/hooks/cardTable";
-import cardDetail from "./components/cardDetail";
-import api, { setInstance } from "@/api/cardCenter";
-import useClipboard from "vue-clipboard3";
-import inlCard from "inl-card";
-import { filter, iconObj } from "@/pageComponent/hooks/filters";
-
-export interface IUrlObj {
-  // 日志列表
-  list: string;
-  // 筛选列表
-  searchList: string;
-}
-export interface Item {
-  id?: string | number;
-  cardName?: string;
-  endpoint?: string;
-  developer?: string;
-  enabled?: boolean;
-  createDt?: any;
-  reference?: string;
-  remark?: string;
-  description?: string;
-  length?: string;
-  width?: string;
-  size?: string;
-  equipment?: string;
-  pageDetail?: string;
-  parameter?: string;
-}
-
-const CardWareHouse = defineComponent({
-  props: {
-    url: {
-      type: Object as PropType<Partial<IUrlObj>>,
-      default: () => ({}),
-    },
-    prefix: {
-      type: String,
-    },
-    serverName: {
-      type: String,
-    },
-  },
-  components: { cardDetail },
-  setup(prop) {
-    setInstance({ prefix: prop.prefix, serverName: prop.serverName });
-    const urlMap = { ...prop.url };
-
-    const formRef = ref();
-
-    const showTableList = ref(false);
-    const height = ref(0);
-    const itemHeight = ref(0);
-
-    const pattern = ref("list");
-
-    const formState = reactive<{
-      endpoint?: string; // 适用终端
-      enabled?: boolean | null; // 启用状态
-      developer?: string; // 开发者
-    }>({
-      enabled: null,
-    });
-    // 一键复制
-    const { toClipboard } = useClipboard();
-
-    const state = reactive({
-      terminalList: [], // 适用终端
-      enabledList: [
-        { name: "全部", code: null },
-        { name: "是", code: true },
-        { name: "否", code: false },
-      ],
-      developerList: [],
-      descriptionList: [
-        {
-          name: "折线图",
-          code: "line",
-        },
-        {
-          name: "面积图",
-          code: "area",
-        },
-        {
-          name: "柱状图",
-          code: "column",
-        },
-        {
-          name: "雷达图",
-          code: "radar",
-        },
-        {
-          name: "饼图",
-          code: "pie",
-        },
-        {
-          name: "其他图表",
-          code: "other",
-        },
-      ],
-    });
-    const column = [
-      {
-        title: "ID",
-        dataIndex: "id",
-        width: "13%",
-      },
-      {
-        title: "卡片名称",
-        dataIndex: "cardName",
-        width: "10%",
-      },
-      {
-        title: "纵横比例(px)",
-        dataIndex: "size",
-        width: "8%",
-      },
-      {
-        title: "适用终端",
-        dataIndex: "endpoint",
-        width: "5%",
-      },
-      {
-        title: "标签描述",
-        dataIndex: "description",
-        width: "8%",
-      },
-      {
-        title: "引用名称",
-        dataIndex: "reference",
-        width: "15%",
-        ellipsis: true,
-      },
-      {
-        title: "是否启用",
-        dataIndex: "enabled",
-        width: "5%",
-      },
-      {
-        title: "开发者",
-        dataIndex: "developer",
-        width: "7%",
-      },
-      {
-        title: "备注说明",
-        dataIndex: "remark",
-        width: "10%",
-        ellipsis: true,
-      },
-      {
-        title: "操作",
-        dataIndex: "action",
-        width: "20%",
-      },
-    ];
-
-    // table
-    const {
-      currPage,
-      isLoading,
-      refresh,
-      tableList,
-      handlePageChange,
-      total,
-      pageSize,
-      hanldePageSizeChange,
-    } = cardTable(
-      () =>
-        api.cardGetList(urlMap.list)({
-          ...formState,
-          pageNum: currPage.value,
-          pageSize: pageSize.value,
-        }),
-      "records"
-    );
-    refresh();
-    watch(
-      () => currPage.value,
-      (e) => {
-        showTableList.value = false;
-        setTimeout(() => {
-          showTableList.value = true;
-        }, 50);
-      },
-      {
-        immediate: true,
-      }
-    );
-    // 重置表单
-    const handleReset = () => {
-      formRef.value.resetFields();
-      refresh();
-    };
-    const handleCopy = async (name: string) => {
-      try {
-        await toClipboard(name);
-        message.success("复制成功");
-      } catch (error) {
-        message.error("复制失败");
-      }
-    };
-
-    const visible = ref(false);
-    const cancel = () => {
-      visible.value = false;
-    };
-
-    const submit = () => {
-      refresh();
-    };
-
-    // 详情数据
-    const data = ref({});
-
-    // 详情弹窗
-    const detailsVisible = ref(false);
-    // 获取终端
-    const getEnumList = async () => {
-      const res = await api.getEnumList(urlMap.list)("EndpointEnum");
-      state.terminalList = res.data;
-    };
-    const handleSave = async () => {
-      const res = await api.cardSaveOrUpdate(urlMap.list)(data.value);
-      if (res.data) {
-        detailsVisible.value = false;
-        message.success("保存成功");
-        refresh();
-      } else {
-        message.error("请求失败");
-      }
-    };
-    const handleDelete = async (id: number) => {
-      const res = await api.cardDelete(urlMap.list)(id);
-      if (res.status) message.success("删除成功");
-      refresh();
-    };
-    const handleChange = async (id: number, enabled: boolean) => {
-      const res = await api.cardAvailable(urlMap.list)(id, enabled);
-      if (res) message.success("下发成功");
-    };
-    const form = reactive({
-      type: "",
-      title: "",
-      id: "",
-    });
-    watch(
-      () => form.type,
-      (e) => {
-        if (e == "add") {
-          form.title = "新增卡片";
-        } else if (e === "edit") {
-          form.title = "编辑卡片";
-        } else {
-          form.title = "卡片详情";
-        }
-      }
-    );
-    const getHeight = () => {
-      height.value =
-        document.getElementById("cardgridContent")?.clientHeight || 0;
-      console.log(height.value);
-
-      itemHeight.value = height.value / 2;
-      console.log(itemHeight.value);
-    };
-    onMounted(async () => {
-      getEnumList();
-    });
-    return () => (
-      <div class="cardWareHouse">
-        <div
-          class="cardWareHouse_title"
-          style="display: flex;justify-content: space-between;margin-bottom:20px"
-        >
-          <span id="copyMy" style="font-weight: 600;">
-            所有卡片
-            <span style={{ color: "#ccc", marginLeft: "10px" }}>
-              v{inlCard.version}
-            </span>
-          </span>
-          <a-radio-group
-            v-model={[pattern.value, "value"]}
-            size="small"
-            onChange={async () => {
-              await nextTick();
-              await getHeight();
-              showTableList.value = true;
-            }}
-          >
-            <a-radio-button value="card">
-              <icon-font
-                type={"icon-gongyituguanli_quanjucaozuo_wangge"}
-                style={pattern.value === "card" ? "" : "color:#A5AABD"}
-              ></icon-font>
-            </a-radio-button>
-            <a-radio-button value="list">
-              <icon-font
-                type={"icon-kaifazhezhongxin_caidanguanli"}
-                style={pattern.value === "list" ? "" : "color:#A5AABD"}
-              ></icon-font>
-            </a-radio-button>
-          </a-radio-group>
-        </div>
-        <div>
-          <a-form
-            label-col={{ span: 8 }}
-            wrapper-col={{ span: 16 }}
-            ref={formRef}
-            model={formState}
-            colon={false}
-            onSubmit={submit}
-          >
-            <a-row grade={24}>
-              <a-col span={6}>
-                <a-form-item name="endpoint" label="适用终端">
-                  <a-select
-                    allowClear
-                    placeholder="适用终端搜索"
-                    v-model={[formState.endpoint, "value"]}
-                  >
-                    {state.terminalList &&
-                      state.terminalList.map((item: any) => (
-                        <a-select-option value={item.code} key={item.code}>
-                          {item.name}
-                        </a-select-option>
-                      ))}
-                  </a-select>
-                </a-form-item>
-              </a-col>
-              <a-col span={6}>
-                <a-form-item name="enabled" label="是否启用">
-                  <a-select
-                    allowClear
-                    placeholder=""
-                    v-model={[formState.enabled, "value"]}
-                  >
-                    {state.enabledList.map((item: any) => (
-                      <a-select-option value={item.code} key={item.code}>
-                        {item.name}
-                      </a-select-option>
-                    ))}
-                  </a-select>
-                </a-form-item>
-              </a-col>
-              <a-col span={6}>
-                <a-form-item name="developer" label="开发者">
-                  <a-input
-                    v-model={[formState.developer, "value"]}
-                    placeholder="开发者搜索"
-                  />
-                </a-form-item>
-              </a-col>
-              <a-col span={6} style={{ textAlign: "right" }}>
-                <a-space>
-                  <a-button type="primary" html-type="submit">
-                    查询
-                  </a-button>
-                  <a-button onClick={handleReset}>重置</a-button>
-                </a-space>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <div class="card">
-          {pattern.value === "list" ? (
-            <>
-              <div style={"margin-bottom: 20px;"}>
-                <a-button
-                  type="primary"
-                  onClick={() => {
-                    form.type = "add";
-                    data.value = {};
-                    detailsVisible.value = true;
-                  }}
-                >
-                  新增卡片
-                </a-button>
-              </div>
-              <a-table
-                dataSource={tableList.value}
-                columns={column}
-                rowKey="id"
-                pagination={{
-                  pageSize: pageSize.value,
-                  current: currPage.value,
-                  showSizeChanger: true,
-                  showQuickJumper: true,
-                  showTotal: (total: number) => `共${total}条`,
-                  total: total.value,
-                  "onUpdate:current": handlePageChange,
-                  "onUpdate:pageSize": hanldePageSizeChange,
-                }}
-                loading={isLoading.value}
-                v-slots={{
-                  bodyCell: ({ column, record }) => {
-                    if (column.dataIndex === "size") {
-                      return `${record.length ? record.length : "-"}*${
-                        record.width ? record.width : "-"
-                      }`;
-                    }
-                    if (column.dataIndex === "endpoint") {
-                      return filter(
-                        state.terminalList,
-                        record.endpoint,
-                        "code",
-                        "name"
-                      );
-                    }
-                    if (column.dataIndex === "description") {
-                      return filter(
-                        state.descriptionList,
-                        record.description,
-                        "code",
-                        "name"
-                      );
-                    }
-                    if (column.dataIndex === "enabled") {
-                      return (
-                        <a-switch
-                          v-model={[record.enabled, "checked"]}
-                          onChange={() => {
-                            handleChange(record.id, record.enabled);
-                          }}
-                        ></a-switch>
-                      );
-                    }
-
-                    if (column.dataIndex === "action") {
-                      return (
-                        <a-space>
-                          <a-button
-                            type="link"
-                            onClick={() => {
-                              handleCopy(record.reference);
-                            }}
-                          >
-                            复制引用名
-                          </a-button>
-                          <a-button
-                            type="link"
-                            onClick={() => {
-                              form.type = "detail";
-                              data.value = record;
-                              detailsVisible.value = true;
-                            }}
-                          >
-                            详情
-                          </a-button>
-                          <a-button
-                            type="link"
-                            onClick={() => {
-                              form.type = "edit";
-                              data.value = record;
-                              detailsVisible.value = true;
-                            }}
-                          >
-                            修改
-                          </a-button>
-                          <a-popconfirm
-                            title="确认删除？"
-                            onConfirm={() => {
-                              handleDelete(record.id);
-                            }}
-                          >
-                            <a-button type="link">删除</a-button>
-                          </a-popconfirm>
-                        </a-space>
-                      );
-                    }
-                  },
-                }}
-              />
-            </>
-          ) : (
-            <div class="cardgrid">
-              <div
-                class="cardgrid-content"
-                id="cardgridContent"
-                style={{ height: height.value ? `${height.value}px` : "" }}
-              >
-                <div
-                  class="cardgrid-item addCard"
-                  style={{ height: `${itemHeight.value}px` }}
-                >
-                  <img
-                    src="/micro-assets/platform-web/defaultCard.png"
-                    alt=""
-                  />
-                  <a-button
-                    type="primary"
-                    onClick={() => {
-                      form.type = "add";
-                      data.value = {};
-                      detailsVisible.value = true;
-                    }}
-                  >
-                    新增卡片
-                  </a-button>
-                </div>
-                {showTableList.value &&
-                  tableList.value.map((item, index) => (
-                    <div
-                      class="cardgrid-item"
-                      style={{ height: `${itemHeight.value}px` }}
-                    >
-                      <div class="cardgrid-item-cardView">
-                        <inl-card-box
-                          componentName={item.reference}
-                          titleName={item.cardName}
-                          index={index}
-                        ></inl-card-box>
-                      </div>
-                      <div class="cardgrid-item-info">
-                        <div class="cardgrid-item-info-top">
-                          <div class="cardgrid-item-info-top-cardName">
-                            <span style={{ marginRight: "10px" }}>
-                              {item.cardName}
-                            </span>
-                            <a-switch v-model={[item.enabled, "checked"]} />
-                          </div>
-                          <div class="cardgrid-item-info-top-size">
-                            <span>{`${item.length ? item.length : "-"}*${
-                              item.width ? item.width : "-"
-                            }`}</span>
-                          </div>
-                        </div>
-                        <div class="cardgrid-item-info-center">
-                          <a-typography-paragraph copyable>
-                            {item.reference}
-                          </a-typography-paragraph>
-                          {/* <span>{item.reference}</span>
-                          <a-button
-                            type="text"
-                            onClick={() => {
-                              handleCopy(item.reference);
-                            }}
-                            v-slots={{
-                              icon: () => (
-                                <icon-font
-                                  type={"icon-zengshangaicha_fuzhi"}
-                                ></icon-font>
-                              ),
-                            }}
-                          ></a-button> */}
-                        </div>
-                        <div class="cardgrid-item-info-bottom">
-                          <div class="cardgrid-item-info-bottom-type">
-                            <span>
-                              <icon-font
-                                type={iconObj[item.endpoint]}
-                              ></icon-font>
-                              <span>
-                                {filter(
-                                  state.terminalList,
-                                  item.endpoint,
-                                  "code",
-                                  "name"
-                                )}
-                              </span>
-                            </span>
-                            <span>
-                              <icon-font
-                                type={iconObj[item.description || "other"]}
-                              ></icon-font>
-                              <span>
-                                {filter(
-                                  state.descriptionList,
-                                  item.description || "other",
-                                  "code",
-                                  "name"
-                                )}
-                              </span>
-                            </span>
-                          </div>
-                          <div class="cardgrid-item-info-bottom-developer">
-                            <span>{item.developer}</span>
-                            <div>
-                              <a-popover
-                                placement="bottomLeft"
-                                v-slots={{
-                                  content: () => (
-                                    <div>
-                                      <a-button
-                                        type="link"
-                                        block
-                                        onClick={() => {
-                                          form.type = "edit";
-                                          data.value = item;
-                                          detailsVisible.value = true;
-                                        }}
-                                      >
-                                        修改卡片
-                                      </a-button>
-                                      <a-button
-                                        type="link"
-                                        block
-                                        onClick={() => {
-                                          handleDelete(item.id);
-                                        }}
-                                      >
-                                        删除
-                                      </a-button>
-                                    </div>
-                                  ),
-                                }}
-                              >
-                                <a-button
-                                  type="text"
-                                  v-slots={{
-                                    icon: () => <ellipsis-outlined />,
-                                  }}
-                                  class="cardgrid-item-info-bottom-developer-more"
-                                ></a-button>
-                              </a-popover>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-              </div>
-              <div style={{ textAlign: "right" }} class="pagination">
-                <a-pagination
-                  pageSize={pageSize.value}
-                  current={currPage.value}
-                  showSizeChanger={true}
-                  showQuickJumper={true}
-                  showTotal={(total: number) => `共${total}条`}
-                  total={total.value}
-                  onUpdate:current={handlePageChange}
-                  onUpdate:pageSize={hanldePageSizeChange}
-                />
-              </div>
-            </div>
-          )}
-        </div>
-        <a-modal
-          v-model={[detailsVisible.value, "visible"]}
-          title={form.title}
-          centered={true}
-          footer={false}
-          width={900}
-          keyboard={false}
-          maskClosable={false}
-        >
-          {detailsVisible.value ? (
-            <cardDetail
-              terminalList={state.terminalList}
-              descriptionList={state.descriptionList}
-              formData={data.value}
-              disabled={form.type === "detail" ? true : false}
-              onSave={(e) => {
-                data.value = e;
-                handleSave();
-              }}
-              onClose={() => {
-                detailsVisible.value = false;
-                data.value = {};
-              }}
-            ></cardDetail>
-          ) : null}
-        </a-modal>
-      </div>
-    );
-  },
-});
-export default utils.installComponent(CardWareHouse, "card-wardhouse");
+import {
+  defineComponent,
+  ref,
+  reactive,
+  onMounted,
+  PropType,
+  watch,
+  nextTick,
+} from "vue";
+import { message, Modal } from "ant-design-vue";
+import utils from "@/utils";
+import cardTable from "@/pageComponent/hooks/cardTable";
+import cardDetail from "./components/cardDetail";
+import api, { setInstance } from "@/api/cardCenter";
+import useClipboard from "vue-clipboard3";
+import inlCard from "inl-card";
+import { filter, iconObj } from "@/pageComponent/hooks/filters";
+
+export interface IUrlObj {
+  // 日志列表
+  list: string;
+  // 筛选列表
+  searchList: string;
+}
+export interface Item {
+  id?: string | number;
+  cardName?: string;
+  endpoint?: string;
+  developer?: string;
+  enabled?: boolean;
+  createDt?: any;
+  reference?: string;
+  remark?: string;
+  description?: string;
+  length?: string;
+  width?: string;
+  size?: string;
+  equipment?: string;
+  pageDetail?: string;
+  parameter?: string;
+}
+
+const CardWareHouse = defineComponent({
+  props: {
+    url: {
+      type: Object as PropType<Partial<IUrlObj>>,
+      default: () => ({}),
+    },
+    prefix: {
+      type: String,
+    },
+    serverName: {
+      type: String,
+    },
+  },
+  components: { cardDetail },
+  setup(prop) {
+    setInstance({ prefix: prop.prefix, serverName: prop.serverName });
+    const urlMap = { ...prop.url };
+
+    const formRef = ref();
+
+    const showTableList = ref(false);
+    const height = ref(0);
+    const itemHeight = ref(0);
+
+    const pattern = ref("list");
+
+    const formState = reactive<{
+      endpoint?: string; // 适用终端
+      enabled?: boolean | null; // 启用状态
+      developer?: string; // 开发者
+    }>({
+      enabled: null,
+    });
+    // 一键复制
+    const { toClipboard } = useClipboard();
+
+    const state = reactive({
+      terminalList: [], // 适用终端
+      enabledList: [
+        { name: "全部", code: null },
+        { name: "是", code: true },
+        { name: "否", code: false },
+      ],
+      developerList: [],
+      descriptionList: [
+        {
+          name: "折线图",
+          code: "line",
+        },
+        {
+          name: "面积图",
+          code: "area",
+        },
+        {
+          name: "柱状图",
+          code: "column",
+        },
+        {
+          name: "雷达图",
+          code: "radar",
+        },
+        {
+          name: "饼图",
+          code: "pie",
+        },
+        {
+          name: "其他图表",
+          code: "other",
+        },
+      ],
+    });
+    const column = [
+      {
+        title: "ID",
+        dataIndex: "id",
+        width: "13%",
+      },
+      {
+        title: "卡片名称",
+        dataIndex: "cardName",
+        width: "10%",
+      },
+      {
+        title: "纵横比例(px)",
+        dataIndex: "size",
+        width: "8%",
+      },
+      {
+        title: "适用终端",
+        dataIndex: "endpoint",
+        width: "5%",
+      },
+      {
+        title: "标签描述",
+        dataIndex: "description",
+        width: "8%",
+      },
+      {
+        title: "引用名称",
+        dataIndex: "reference",
+        width: "15%",
+        ellipsis: true,
+      },
+      {
+        title: "是否启用",
+        dataIndex: "enabled",
+        width: "5%",
+      },
+      {
+        title: "开发者",
+        dataIndex: "developer",
+        width: "7%",
+      },
+      {
+        title: "备注说明",
+        dataIndex: "remark",
+        width: "10%",
+        ellipsis: true,
+      },
+      {
+        title: "操作",
+        dataIndex: "action",
+        width: "20%",
+      },
+    ];
+
+    // table
+    const {
+      currPage,
+      isLoading,
+      refresh,
+      tableList,
+      handlePageChange,
+      total,
+      pageSize,
+      hanldePageSizeChange,
+    } = cardTable(
+      () =>
+        api.cardGetList(urlMap.list)({
+          ...formState,
+          pageNum: currPage.value,
+          pageSize: pageSize.value,
+        }),
+      "records"
+    );
+    refresh();
+    watch(
+      () => currPage.value,
+      (e) => {
+        showTableList.value = false;
+        setTimeout(() => {
+          showTableList.value = true;
+        }, 50);
+      },
+      {
+        immediate: true,
+      }
+    );
+    // 重置表单
+    const handleReset = () => {
+      formRef.value.resetFields();
+      refresh();
+    };
+    const handleCopy = async (name: string) => {
+      try {
+        await toClipboard(name);
+        message.success("复制成功");
+      } catch (error) {
+        message.error("复制失败");
+      }
+    };
+
+    const visible = ref(false);
+    const cancel = () => {
+      visible.value = false;
+    };
+
+    const submit = () => {
+      refresh();
+    };
+
+    // 详情数据
+    const data = ref({});
+
+    // 详情弹窗
+    const detailsVisible = ref(false);
+    // 获取终端
+    const getEnumList = async () => {
+      const res = await api.getEnumList(urlMap.list)("EndpointEnum");
+      state.terminalList = res.data;
+    };
+    const handleSave = async () => {
+      const res = await api.cardSaveOrUpdate(urlMap.list)(data.value);
+      if (res.data) {
+        detailsVisible.value = false;
+        message.success("保存成功");
+        refresh();
+      } else {
+        message.error("请求失败");
+      }
+    };
+    const handleDelete = async (id: number) => {
+      const res = await api.cardDelete(urlMap.list)(id);
+      if (res.status) message.success("删除成功");
+      refresh();
+    };
+    const handleChange = async (id: number, enabled: boolean) => {
+      const res = await api.cardAvailable(urlMap.list)(id, enabled);
+      if (res) message.success("下发成功");
+    };
+    const form = reactive({
+      type: "",
+      title: "",
+      id: "",
+    });
+    watch(
+      () => form.type,
+      (e) => {
+        if (e == "add") {
+          form.title = "新增卡片";
+        } else if (e === "edit") {
+          form.title = "编辑卡片";
+        } else {
+          form.title = "卡片详情";
+        }
+      }
+    );
+    const getHeight = () => {
+      height.value =
+        document.getElementById("cardgridContent")?.clientHeight || 0;
+      console.log(height.value);
+
+      itemHeight.value = height.value / 2;
+      console.log(itemHeight.value);
+    };
+    onMounted(async () => {
+      getEnumList();
+    });
+    return () => (
+      <div class="cardWareHouse">
+        <div
+          class="cardWareHouse_title"
+          style="display: flex;justify-content: space-between;margin-bottom:20px"
+        >
+          <span id="copyMy" style="font-weight: 600;">
+            所有卡片
+            <span style={{ color: "#ccc", marginLeft: "10px" }}>
+              v{inlCard.version}
+            </span>
+          </span>
+          <a-radio-group
+            v-model={[pattern.value, "value"]}
+            size="small"
+            onChange={async () => {
+              await nextTick();
+              await getHeight();
+              showTableList.value = true;
+            }}
+          >
+            <a-radio-button value="card">
+              <icon-font
+                type={"icon-gongyituguanli_quanjucaozuo_wangge"}
+                style={pattern.value === "card" ? "" : "color:#A5AABD"}
+              ></icon-font>
+            </a-radio-button>
+            <a-radio-button value="list">
+              <icon-font
+                type={"icon-kaifazhezhongxin_caidanguanli"}
+                style={pattern.value === "list" ? "" : "color:#A5AABD"}
+              ></icon-font>
+            </a-radio-button>
+          </a-radio-group>
+        </div>
+        <div>
+          <a-form
+            label-col={{ span: 8 }}
+            wrapper-col={{ span: 16 }}
+            ref={formRef}
+            model={formState}
+            colon={false}
+            onSubmit={submit}
+          >
+            <a-row grade={24}>
+              <a-col span={6}>
+                <a-form-item name="endpoint" label="适用终端">
+                  <a-select
+                    allowClear
+                    placeholder="适用终端搜索"
+                    v-model={[formState.endpoint, "value"]}
+                  >
+                    {state.terminalList &&
+                      state.terminalList.map((item: any) => (
+                        <a-select-option value={item.code} key={item.code}>
+                          {item.name}
+                        </a-select-option>
+                      ))}
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col span={6}>
+                <a-form-item name="enabled" label="是否启用">
+                  <a-select
+                    allowClear
+                    placeholder=""
+                    v-model={[formState.enabled, "value"]}
+                  >
+                    {state.enabledList.map((item: any) => (
+                      <a-select-option value={item.code} key={item.code}>
+                        {item.name}
+                      </a-select-option>
+                    ))}
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col span={6}>
+                <a-form-item name="developer" label="开发者">
+                  <a-input
+                    v-model={[formState.developer, "value"]}
+                    placeholder="开发者搜索"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col span={6} style={{ textAlign: "right" }}>
+                <a-space>
+                  <a-button type="primary" html-type="submit">
+                    查询
+                  </a-button>
+                  <a-button onClick={handleReset}>重置</a-button>
+                </a-space>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <div class="card">
+          {pattern.value === "list" ? (
+            <>
+              <div style={"margin-bottom: 20px;"}>
+                <a-button
+                  type="primary"
+                  onClick={() => {
+                    form.type = "add";
+                    data.value = {};
+                    detailsVisible.value = true;
+                  }}
+                >
+                  新增卡片
+                </a-button>
+              </div>
+              <a-table
+                dataSource={tableList.value}
+                columns={column}
+                rowKey="id"
+                pagination={{
+                  pageSize: pageSize.value,
+                  current: currPage.value,
+                  showSizeChanger: true,
+                  showQuickJumper: true,
+                  showTotal: (total: number) => `共${total}条`,
+                  total: total.value,
+                  "onUpdate:current": handlePageChange,
+                  "onUpdate:pageSize": hanldePageSizeChange,
+                }}
+                loading={isLoading.value}
+                v-slots={{
+                  bodyCell: ({ column, record }) => {
+                    if (column.dataIndex === "size") {
+                      return `${record.length ? record.length : "-"}*${
+                        record.width ? record.width : "-"
+                      }`;
+                    }
+                    if (column.dataIndex === "endpoint") {
+                      return filter(
+                        state.terminalList,
+                        record.endpoint,
+                        "code",
+                        "name"
+                      );
+                    }
+                    if (column.dataIndex === "description") {
+                      return filter(
+                        state.descriptionList,
+                        record.description,
+                        "code",
+                        "name"
+                      );
+                    }
+                    if (column.dataIndex === "enabled") {
+                      return (
+                        <a-switch
+                          v-model={[record.enabled, "checked"]}
+                          onChange={() => {
+                            handleChange(record.id, record.enabled);
+                          }}
+                        ></a-switch>
+                      );
+                    }
+
+                    if (column.dataIndex === "action") {
+                      return (
+                        <a-space>
+                          <a-button
+                            type="link"
+                            onClick={() => {
+                              handleCopy(record.reference);
+                            }}
+                          >
+                            复制引用名
+                          </a-button>
+                          <a-button
+                            type="link"
+                            onClick={() => {
+                              form.type = "detail";
+                              data.value = record;
+                              detailsVisible.value = true;
+                            }}
+                          >
+                            详情
+                          </a-button>
+                          <a-button
+                            type="link"
+                            onClick={() => {
+                              form.type = "edit";
+                              data.value = record;
+                              detailsVisible.value = true;
+                            }}
+                          >
+                            修改
+                          </a-button>
+                          <a-popconfirm
+                            title="确认删除？"
+                            onConfirm={() => {
+                              handleDelete(record.id);
+                            }}
+                          >
+                            <a-button type="link">删除</a-button>
+                          </a-popconfirm>
+                        </a-space>
+                      );
+                    }
+                  },
+                }}
+              />
+            </>
+          ) : (
+            <div class="cardgrid">
+              <div
+                class="cardgrid-content"
+                id="cardgridContent"
+                style={{ height: height.value ? `${height.value}px` : "" }}
+              >
+                <div
+                  class="cardgrid-item addCard"
+                  style={{ height: `${itemHeight.value}px` }}
+                >
+                  <img
+                    src="/micro-assets/platform-web/defaultCard.png"
+                    alt=""
+                  />
+                  <a-button
+                    type="primary"
+                    onClick={() => {
+                      form.type = "add";
+                      data.value = {};
+                      detailsVisible.value = true;
+                    }}
+                  >
+                    新增卡片
+                  </a-button>
+                </div>
+                {showTableList.value &&
+                  tableList.value.map((item, index) => (
+                    <div
+                      class="cardgrid-item"
+                      style={{ height: `${itemHeight.value}px` }}
+                    >
+                      <div class="cardgrid-item-cardView">
+                        <inl-card-box
+                          componentName={item.reference}
+                          titleName={item.cardName}
+                          index={index}
+                        ></inl-card-box>
+                      </div>
+                      <div class="cardgrid-item-info">
+                        <div class="cardgrid-item-info-top">
+                          <div class="cardgrid-item-info-top-cardName">
+                            <span style={{ marginRight: "10px" }}>
+                              {item.cardName}
+                            </span>
+                            <a-switch v-model={[item.enabled, "checked"]} />
+                          </div>
+                          <div class="cardgrid-item-info-top-size">
+                            <span>{`${item.length ? item.length : "-"}*${
+                              item.width ? item.width : "-"
+                            }`}</span>
+                          </div>
+                        </div>
+                        <div class="cardgrid-item-info-center">
+                          <a-typography-paragraph copyable>
+                            {item.reference}
+                          </a-typography-paragraph>
+                          {/* <span>{item.reference}</span>
+                          <a-button
+                            type="text"
+                            onClick={() => {
+                              handleCopy(item.reference);
+                            }}
+                            v-slots={{
+                              icon: () => (
+                                <icon-font
+                                  type={"icon-zengshangaicha_fuzhi"}
+                                ></icon-font>
+                              ),
+                            }}
+                          ></a-button> */}
+                        </div>
+                        <div class="cardgrid-item-info-bottom">
+                          <div class="cardgrid-item-info-bottom-type">
+                            <span>
+                              <icon-font
+                                type={iconObj[item.endpoint]}
+                              ></icon-font>
+                              <span>
+                                {filter(
+                                  state.terminalList,
+                                  item.endpoint,
+                                  "code",
+                                  "name"
+                                )}
+                              </span>
+                            </span>
+                            <span>
+                              <icon-font
+                                type={iconObj[item.description || "other"]}
+                              ></icon-font>
+                              <span>
+                                {filter(
+                                  state.descriptionList,
+                                  item.description || "other",
+                                  "code",
+                                  "name"
+                                )}
+                              </span>
+                            </span>
+                          </div>
+                          <div class="cardgrid-item-info-bottom-developer">
+                            <span>{item.developer}</span>
+                            <div>
+                              <a-popover
+                                placement="bottomLeft"
+                                v-slots={{
+                                  content: () => (
+                                    <div>
+                                      <a-button
+                                        type="link"
+                                        block
+                                        onClick={() => {
+                                          form.type = "edit";
+                                          data.value = item;
+                                          detailsVisible.value = true;
+                                        }}
+                                      >
+                                        修改卡片
+                                      </a-button>
+                                      <a-button
+                                        type="link"
+                                        block
+                                        onClick={() => {
+                                          handleDelete(item.id);
+                                        }}
+                                      >
+                                        删除
+                                      </a-button>
+                                    </div>
+                                  ),
+                                }}
+                              >
+                                <a-button
+                                  type="text"
+                                  v-slots={{
+                                    icon: () => <ellipsis-outlined />,
+                                  }}
+                                  class="cardgrid-item-info-bottom-developer-more"
+                                ></a-button>
+                              </a-popover>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+              <div style={{ textAlign: "right" }} class="pagination">
+                <a-pagination
+                  pageSize={pageSize.value}
+                  current={currPage.value}
+                  showSizeChanger={true}
+                  showQuickJumper={true}
+                  showTotal={(total: number) => `共${total}条`}
+                  total={total.value}
+                  onUpdate:current={handlePageChange}
+                  onUpdate:pageSize={hanldePageSizeChange}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+        <a-modal
+          v-model={[detailsVisible.value, "visible"]}
+          title={form.title}
+          centered={true}
+          footer={false}
+          width={900}
+          keyboard={false}
+          maskClosable={false}
+        >
+          {detailsVisible.value ? (
+            <cardDetail
+              terminalList={state.terminalList}
+              descriptionList={state.descriptionList}
+              formData={data.value}
+              disabled={form.type === "detail" ? true : false}
+              onSave={(e) => {
+                data.value = e;
+                handleSave();
+              }}
+              onClose={() => {
+                detailsVisible.value = false;
+                data.value = {};
+              }}
+            ></cardDetail>
+          ) : null}
+        </a-modal>
+      </div>
+    );
+  },
+});
+export default utils.installComponent(CardWareHouse, "card-wardhouse");