inl-ui 0.0.37 → 0.0.39

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

@@ -1,1169 +1,1174 @@
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-  provide,
-} from "vue";
-
-import {
-  MenuFoldOutlined,
-  DownOutlined,
-  RedoOutlined,
-} from "@ant-design/icons-vue";
-import * as thingApis from "@/api/thingInstance";
-import utils from "@/utils";
-import { message } from "ant-design-vue";
-import { listFilter, treeBycodeFilter } from "@/pageComponent/hooks/filters";
-import useTreeSearch from "./hooks/useTreeSearch";
-import useTableList from "./hooks/useTableList";
-import { Search } from "./hooks/filters";
-import thingModal from "./modal";
-import editThing from "./component/editThing";
-import addThing from "./component/addThing";
-import thingDetail from "./component/thingDetail";
-import "./less/thingInstance.less";
-
-import { useRoute } from "vue-router";
-import moment from "moment";
-import { customRequest } from "@/pageComponent/utils/upload";
-
-const props = {
-  thingCode: {
-    type: String,
-    default: "",
-  },
-};
-const triggerModeList = [
-  {
-    code: "get",
-    name: "GET时触发",
-  },
-  {
-    code: "timer",
-    name: "定时触发",
-  },
-  {
-    code: "change",
-    name: "数据变化时触发",
-  },
-];
-const com = defineComponent({
-  components: { thingModal, editThing, thingDetail, addThing },
-  props,
-  setup(_props, _context) {
-    const route = useRoute();
-
-    // 模型树
-    const {
-      tree,
-      searchValue,
-      expandedKeys,
-      autoExpandParent,
-      selectedKeyArr,
-      fieldNames,
-      generateKey,
-      generateList,
-    } = useTreeSearch({
-      title: "name",
-      children: "child",
-    });
-    let treeDataRecord;
-    const filterTree = (arr: any[], key: string) => {
-      let have: boolean = false;
-      for (let i = 0; i < arr.length; i++) {
-        const obj = arr[i];
-        let childHave: boolean = false;
-        if (obj.child && obj.child.length != 0) {
-          childHave = filterTree(obj.child, key).have;
-        }
-        if (obj.name.indexOf(key) !== -1 || childHave) {
-          have = true;
-        } else {
-          arr.splice(i, 1);
-          i--;
-        }
-      }
-      return { arr, have };
-    };
-
-    watch(
-      () => searchValue.value,
-      (value) => {
-        tree.data = filterTree(
-          JSON.parse(JSON.stringify(treeDataRecord)),
-          searchValue.value
-        ).arr;
-      }
-    );
-    const getTreeData = () => {
-      thingApis.findAllThingForTree().then((res) => {
-        refresh();
-        res.data.forEach((ele: any) => {
-          ele.first = true;
-        });
-        const data = generateKey("0", res.data);
-        generateList(data);
-        treeDataRecord = data;
-        tree.data = filterTree(
-          JSON.parse(JSON.stringify(treeDataRecord)),
-          searchValue.value
-        ).arr;
-      });
-    };
-    const canAdd = ref(true);
-    const getOpiton = async () => {
-      queryOpts.value = [];
-      columnData.value = [];
-      const res: any = await thingApis.findByCode(formQuery.thingCode);
-      if (res.data.tableName === "-") {
-        canAdd.value = false;
-      } else {
-        canAdd.value = true;
-      }
-      res.data.thingPropertyList.forEach((ele: any) => {
-        if (ele.display && ele.queryDisplay) {
-          queryOpts.value.push({ ...ele, operation: "LIKE" });
-        }
-        if (ele.display && ele.listDisplay) {
-          columnData.value.push({
-            title: ele.displayLabel,
-            dataIndex: ele.code,
-            key: ele.displayType,
-            sort: ele.sort,
-          });
-        }
-      });
-      queryOpts.value.sort((a, b) => {
-        return a.sort - b.sort;
-      });
-      const list = queryOpts.value.filter((n) => n.sort === null);
-      const newList = queryOpts.value.filter((n) => n.sort !== null);
-      queryOpts.value = [...newList, ...list];
-    };
-
-    const thingNode = ref();
-
-    const selectNode = (
-      selectedKeys: string[] | number[],
-      { selected, node }: any
-    ) => {
-      if (formQuery.thingCode === node.code) {
-        return;
-      }
-      if (selected) {
-        formQuery.thingCode = node.code;
-        thingNode.value = node;
-      } else {
-        formQuery.thingCode = "";
-        thingNode.value = null;
-      }
-
-      selectedKeyArr.value = selectedKeys;
-      currPage.value = 1;
-      refresh();
-      getOpiton();
-    };
-
-    const expandNode = (keys: string[]) => {
-      expandedKeys.value = keys;
-      autoExpandParent.value = false;
-    };
-
-    // table
-    const queryFormRef = ref();
-    const formQuery: any = reactive({});
-    const getList = async () => {
-      const param: any = { ...formQuery, wherePojoList: [] };
-
-      queryOpts.value.forEach((ele: any) => {
-        if (ele.value) {
-          param.wherePojoList.push({
-            column: ele.columnName,
-            operation: ele.operation,
-            valueList: [ele.value],
-          });
-        }
-      });
-      const res: any = await thingApis.indInsts({
-        ...param,
-        pageNum: currPage.value,
-        pageSize: pageSize.value,
-      });
-      const resObj: any = {
-        columnData: [],
-        data: [],
-        totalNum: res.data?.total,
-      };
-      columnData.value.sort((a, b) => {
-        return a.sort - b.sort;
-      });
-      const list = columnData.value.filter((n) => n.sort === null);
-      resObj.columnData = columnData.value.filter((n) => n.sort !== null);
-      resObj.columnData = [...resObj.columnData, ...list].map((item) => item);
-      resObj.columnData.push({
-        title: "操作",
-        dataIndex: "action",
-        key: "action",
-      });
-      resObj.data = res.data?.list.map((ele: any) => ({
-        ...ele.staticMap.map,
-        thingPropertyList: ele.thingInst?.thing?.thingPropertyList,
-      }));
-      return resObj;
-    };
-    const state = reactive<{
-      selectedRowKeys: string[];
-      selectedRows: any[];
-      modalVisible: boolean;
-    }>({
-      selectedRowKeys: [],
-      selectedRows: [],
-      modalVisible: true,
-    });
-    const onSelectChange = (selectedRowKeys: string[], selectedRows: any[]) => {
-      state.selectedRowKeys = selectedRowKeys;
-      state.selectedRows = selectedRows;
-    };
-    const {
-      isLoading,
-      columns,
-      tableList,
-      pagination,
-      refresh,
-      currPage,
-      pageSize,
-    } = useTableList(getList, "list", "total");
-    const reset = () => {
-      queryOpts.value.forEach((ele) => {
-        ele.value = "";
-        ele.operation = "LIKE";
-      });
-      refresh();
-    };
-    const pageData = reactive({
-      editData: {},
-      addData: {},
-      thingCode: "",
-      id: "",
-    });
-
-    // all table
-    const queryAllFormRef = ref();
-    const columnsAll = [
-      // {
-      //   dataIndex: "id",
-      //   title: "实例ID",
-      // },
-      {
-        dataIndex: "name",
-        title: "实例名称",
-      },
-      {
-        dataIndex: "code",
-        title: "实例编码",
-      },
-      {
-        dataIndex: "thingName",
-        title: "物模型名称",
-      },
-      {
-        dataIndex: "thingCode",
-        title: "物模型编码",
-      },
-      { title: "操作", key: "action" },
-    ];
-    const formQueryAll: any = ref([
-      // { label: "实例ID", column: "instanceId", operation: "LIKE", value: null },
-      {
-        label: "实例名称",
-        column: "instanceName",
-        operation: "LIKE",
-        value: null,
-      },
-      {
-        label: "实例编码",
-        column: "instanceCode",
-        operation: "LIKE",
-        value: null,
-      },
-      { label: "属性ID", column: "propertyId", operation: "LIKE", value: null },
-      {
-        label: "属性名称",
-        column: "displayLabel",
-        operation: "LIKE",
-        value: null,
-      },
-      {
-        label: "属性编码",
-        column: "propertyCode",
-        operation: "LIKE",
-        value: null,
-      },
-    ]);
-    const getListAll = async () => {
-      const param: any = { wherePojoList: [] };
-
-      formQueryAll.value.forEach((ele: any) => {
-        if (ele.value) {
-          param.wherePojoList.push({
-            column: ele.column,
-            operation: ele.operation,
-            valueList: [ele.value],
-          });
-        }
-      });
-      const resp = await thingApis.indInstsAll({
-        ...param,
-        pageNum: currPageAll.value,
-        pageSize: pageSizeAll.value,
-      });
-
-      const resObj: any = {
-        columnData: [],
-        data: resp.data?.list,
-        totalNum: resp.data?.total,
-      };
-      return resObj;
-    };
-
-    const {
-      isLoading: isLoadingAll,
-      tableList: tableListAll,
-      pagination: paginationAll,
-      refresh: refreshAll,
-      currPage: currPageAll,
-      pageSize: pageSizeAll,
-    } = useTableList(getListAll, "list", "total");
-    const resetAll = () => {
-      formQueryAll.value.forEach((ele) => {
-        ele.value = "";
-        ele.operation = "LIKE";
-      });
-      refreshAll();
-    };
-    const stateAll = reactive<{
-      selectedRowKeys: string[];
-      selectedRows: any[];
-    }>({
-      selectedRowKeys: [],
-      selectedRows: [],
-    });
-    const onSelectChangeAll = (
-      selectedRowKeys: string[],
-      selectedRows: any[]
-    ) => {
-      stateAll.selectedRowKeys = selectedRowKeys;
-      stateAll.selectedRows = selectedRows;
-    };
-
-    // 弹框
-    const modalRef = ref<any>(null);
-    const toEdit = async (row?: any) => {
-      const res: any = await thingApis.findThingProperties(row.ID);
-      pageData.thingCode = row.THING_CODE;
-      pageData.editData = res.data;
-      page.value = "edit";
-    };
-    const toCreate = async (row?: any) => {
-      const res: any = await thingApis.findByCode(formQuery.thingCode);
-      if (res.data.tableName === "-") {
-        message.error("该模型不支持新增实例！");
-        return false;
-      }
-      pageData.thingCode = formQuery.thingCode;
-      pageData.addData = res.data;
-      page.value = "add";
-    };
-    const toDetail = async (row: any, hideEdit = false) => {
-      hideBtnLine.value = false;
-      hideEditBtn.value = hideEdit;
-      const res: any = await thingApis.findThingProperties(row.ID);
-      pageData.id = row.ID;
-      pageData.thingCode = row.THING_CODE;
-      pageData.editData = res.data;
-      page.value = "detail";
-    };
-    const deleteThing = async (row) => {
-      const res: any = await thingApis.deleteThing(row.ID.toString());
-
-      if (formQuery.thingCode) {
-        refresh();
-      } else {
-        refreshAll();
-      }
-
-      if ((res.code = "M0000")) {
-        message.success("删除成功");
-      }
-    };
-    const queryOpts = ref<any[]>([]);
-    const columnData = ref<any>([]);
-    const batchDelete = async () => {
-      for (const row of state.selectedRows) {
-        const res: any = await thingApis.deleteThing(row.ID.toString());
-      }
-      if (formQuery.thingCode) {
-        refresh();
-        state.selectedRowKeys = [];
-        state.selectedRows = [];
-      } else {
-        refreshAll();
-        stateAll.selectedRowKeys = [];
-        stateAll.selectedRows = [];
-      }
-
-      message.success("删除成功");
-    };
-    const importModal = ref(false);
-
-    const newThing = ref(null);
-
-    onMounted(() => {
-      const { newThingInfo } = route?.query;
-      if (newThingInfo) {
-        newThing.value = JSON.parse(newThingInfo as any);
-
-        toNewThing(newThing.value);
-      } else {
-        getTreeData();
-        refreshAll();
-      }
-    });
-
-    const isInit = ref(false);
-
-    watch(
-      () => [tree.data, _props.thingCode],
-      (e) => {
-        if (e[0] && e[1] && e[1] !== "" && !isInit.value) {
-          page.value = "list";
-          searchValue.value = "";
-
-          formQuery.thingCode = _props.thingCode;
-          const { node, key } = treeBycodeFilter(tree.data, _props.thingCode);
-
-          thingNode.value = node;
-          selectedKeyArr.value = [key];
-          const keys = new Search({
-            treeData: tree.data,
-            key,
-          });
-          const keyData = keys.rtn();
-          expandedKeys.value = keyData.expandedKeys;
-          refresh();
-          getOpiton();
-        } else {
-          formQuery.thingCode = "";
-          selectedKeyArr.value = [];
-          thingNode.value = null;
-
-          isInit.value = false;
-        }
-      },
-      {
-        immediate: true,
-        deep: true,
-      }
-    );
-
-    const page = ref("list");
-    const file = ref();
-
-    const exportFun = (resource: any, name: string) => {
-      const blob = new Blob([resource], {
-        type: "text/html;charset=UTF-8",
-      });
-      const a = document.createElement("a");
-      a.href = URL.createObjectURL(blob);
-      a.download = name;
-      a.style.display = "none";
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-    };
-
-    // 配点模板下载
-    const dynamicExport = async (exportName: string, node?: any) => {
-      const param: any = {};
-      if (node) {
-        param.thingCode = formQuery.thingCode;
-      }
-
-      message.info("正在导出，请稍后");
-      const res: any = await thingApis.exportExcelTemplate(param);
-
-      exportFun(res, exportName);
-    };
-
-    // 导出全部
-    const exportAll = async (ids: any[] = []) => {
-      const param: any = {};
-      if (ids.length > 0) {
-        param.ids = ids;
-      }
-
-      message.info("正在导出，请稍后");
-      const res: any = await thingApis.exportPointExcelTemplate(param);
-      exportFun(res, `物实例数据-${moment().format("YYYYMMDDHHmmss")}.xls`);
-    };
-
-    // 选中树物实例导出
-    const exportThing = async (ids: any[] = []) => {
-      if (thingNode.value) {
-        const param: any = {};
-        param.thingCode = formQuery.thingCode;
-        if (ids.length > 0) {
-          param.ids = ids;
-        }
-
-        message.info("正在导出，请稍后");
-        const res: any = await thingApis.exportPointExcelTemplate(param);
-        exportFun(
-          res,
-          `物实例数据-${thingNode.value.name}-${moment().format(
-            "YYYYMMDDHHmmss"
-          )}.xls`
-        );
-      }
-    };
-
-    const renderPointModal = (node?: any) => {
-      const exportName = `动态属性${
-        node ? "-" + node?.name : ""
-      }-${moment().format("YYYYMMDDHHmmss")}.xls`;
-      return (
-        <a-modal
-          v-model={[importModal.value, "visible"]}
-          title={"批量配点" + (node ? " - " + node?.name : "")}
-          class="pointModal"
-          width={800}
-          footer={null}
-          onCancel={() => {
-            importModal.value = false;
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              backgroundColor: "rgba(255, 146, 20, 0.1)",
-            }}
-          >
-            <a-alert
-              message="请先下载当前所有的动态属性并按要求填写信息，否则可能导入失败。上传文件后将覆盖式更新，请谨慎操作！"
-              banner
-            />
-            <a-button
-              type="link"
-              onClick={() => {
-                dynamicExport(exportName, node);
-              }}
-            >
-              {exportName}
-            </a-button>
-          </div>
-          <a-upload-dragger
-            showUploadList={false}
-            accept=".xls,.xlsx"
-            customRequest={async (e) => {
-              const res = await customRequest(e, thingApis.importExcel);
-              importModal.value = false;
-            }}
-          >
-            <p class="ant-upload-drag-icon">
-              <inbox-outlined></inbox-outlined>
-            </p>
-            <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-            <p class="ant-upload-hint">支持格式：xls/xlsx</p>
-          </a-upload-dragger>
-        </a-modal>
-      );
-    };
-
-    const initHandle = () => {
-      canAdd.value = true;
-      searchValue.value = "";
-      expandedKeys.value = [];
-
-      stateAll.selectedRowKeys = [];
-      stateAll.selectedRows = [];
-
-      state.selectedRowKeys = [];
-      state.selectedRows = [];
-      state.modalVisible = true;
-
-      isInit.value = true;
-
-      getTreeData();
-      refreshAll();
-    };
-
-    const isLoad = ref(false);
-    const hideEditBtn = ref(false);
-    const hideBtnLine = ref(false);
-    const toNewThing = async (row: any) => {
-      page.value = "detail";
-      isLoad.value = true;
-
-      const res: any = await thingApis.findThingProperties(row.id);
-      pageData.id = row.id;
-      pageData.thingCode = row.thingInst.thingCode;
-      pageData.editData = res.data;
-
-      isLoad.value = false;
-    };
-    provide("toNewThing", toNewThing);
-
-    const toRouter = async (row: any) => {
-      _context.emit("toRouter", row);
-    };
-    provide("toRouter", toRouter);
-
-    return () => (
-      <div
-        class="thingApp flex"
-        style={{ justifyContent: isLoad.value ? "center" : "" }}
-      >
-        {page.value === "edit" ? (
-          <editThing
-            data={pageData.editData}
-            triggerModeList={triggerModeList}
-            onBack={() => {
-              refresh();
-              page.value = "detail";
-            }}
-            onBackList={() => {
-              refresh();
-              page.value = "list";
-            }}
-            onToDetail={(res) => {
-              toDetail(res);
-            }}
-            onToRoute={() => {
-              _context.emit("toRoute");
-            }}
-          />
-        ) : (
-          ""
-        )}
-        {page.value === "add" ? (
-          <addThing
-            data={pageData.addData}
-            triggerModeList={triggerModeList}
-            onBack={() => {
-              refresh();
-              page.value = "list";
-            }}
-            onBackList={() => {
-              refresh();
-              page.value = "list";
-            }}
-            onToDetail={(res) => {
-              toDetail(res);
-            }}
-            onToRoute={() => {
-              _context.emit("toRoute");
-            }}
-          />
-        ) : (
-          ""
-        )}
-        {page.value === "detail" ? (
-          <a-spin spinning={isLoad.value}>
-            {!isLoad.value && (
-              <thingDetail
-                data={pageData.editData}
-                id={pageData.id}
-                hideBtnLine={hideBtnLine.value}
-                hideEditBtn={hideEditBtn.value}
-                onBack={() => {
-                  if (formQuery.thingCode) {
-                    refresh();
-                  } else {
-                    refreshAll();
-                    if (newThing.value) {
-                      newThing.value = null;
-                      getTreeData();
-                    }
-                  }
-                  page.value = "list";
-                }}
-                onBackList={() => {
-                  if (formQuery.thingCode) {
-                    refresh();
-                  } else {
-                    refreshAll();
-                    if (newThing.value) {
-                      newThing.value = null;
-                      getTreeData();
-                    }
-                  }
-                  page.value = "list";
-                }}
-                onToEdit={(res) => {
-                  toEdit(res);
-                }}
-              />
-            )}
-          </a-spin>
-        ) : (
-          ""
-        )}
-        <div
-          class="thingInstance flex"
-          style={page.value !== "list" ? "display:none" : ""}
-        >
-          <div class="left_wrap">
-            <div class="flex_lr_c">
-              <div class="flex-center title flex1">
-                <span>物模型</span>
-
-                <div class="flex gap">
-                  <RedoOutlined onClick={initHandle} title="刷新" />
-                  {/* <MenuFoldOutlined /> */}
-                </div>
-              </div>
-            </div>
-
-            <div class="tree_data">
-              <a-input-search
-                class="search"
-                v-model={[searchValue.value, "value", ["trim"]]}
-                style="margin-bottom: 8px"
-                placeholder="搜索"
-                allowClear
-              />
-              <div
-                class="mar-t-20 tree_wrap"
-                style={{ height: "calc(100vh - 240px)" }}
-              >
-                {tree.data.length ? (
-                  <a-tree
-                    show-line
-                    blockNode={true}
-                    tree-data={tree.data}
-                    field-names={fieldNames}
-                    onSelect={selectNode}
-                    onExpand={expandNode}
-                    selectedKeys={selectedKeyArr.value}
-                    expandedKeys={expandedKeys.value}
-                    autoExpandParent={autoExpandParent.value}
-                    v-slots={{
-                      title: (ele: any) => {
-                        return (
-                          <span class="tree-node-title">
-                            <span style={ele.first ? "font-weight:700" : ""}>
-                              {ele.name}
-                            </span>
-                          </span>
-                        );
-                      },
-                    }}
-                  ></a-tree>
-                ) : null}
-              </div>
-            </div>
-          </div>
-          <div class="table_wrap">
-            {!formQuery.thingCode ? (
-              // <a-empty
-              //   image="/micro-assets/platform-web/empty.png"
-              //   image-style={{
-              //     height: "17.57rem",
-              //   }}
-              //   v-slots={{
-              //     description: () => (
-              //       <span style={{ fontSize: "1rem", color: "#354052" }}>
-              //         请先在左侧选择一个物规格
-              //       </span>
-              //     ),
-              //   }}
-              // ></a-empty>
-              <>
-                <div class="option">
-                  <a-form
-                    ref={queryAllFormRef}
-                    model={formQueryAll.value}
-                    labelCol={{ span: 8 }}
-                    wrapperCol={{ span: 16 }}
-                    onSubmit={refreshAll}
-                  >
-                    <a-row gutter={24}>
-                      {formQueryAll.value.map((formItem: any) => (
-                        <a-col span={6}>
-                          <a-form-item label={formItem.label}>
-                            <div class="flex">
-                              <div class="flex">
-                                <a-select
-                                  class="searchSelect"
-                                  v-model={[formItem.operation, "value"]}
-                                >
-                                  <a-select-option value="EQ">
-                                    {"="}
-                                  </a-select-option>
-                                  <a-select-option value="NE">
-                                    {"!="}
-                                  </a-select-option>
-                                  <a-select-option value="GT">
-                                    {">"}
-                                  </a-select-option>
-                                  <a-select-option value="GTE">
-                                    {">="}
-                                  </a-select-option>
-                                  <a-select-option value="LT">
-                                    {"<"}
-                                  </a-select-option>
-                                  <a-select-option value="LTE">
-                                    {"<="}
-                                  </a-select-option>
-                                  <a-select-option value="LIKE">
-                                    {"包含"}
-                                  </a-select-option>
-                                </a-select>
-                                <a-input
-                                  v-model={[formItem.value, "value", ["trim"]]}
-                                  allowClear={true}
-                                />
-                              </div>
-                            </div>
-                          </a-form-item>
-                        </a-col>
-                      ))}
-                      <a-col span={18} class="align-r">
-                        <a-space size={16}>
-                          <a-button type="primary" html-type="submit">
-                            查询
-                          </a-button>
-                          <a-button onClick={resetAll}>重置</a-button>
-                        </a-space>
-                      </a-col>
-                    </a-row>
-                  </a-form>
-                </div>
-                <a-space size={16}>
-                  <a-button
-                    type="primary"
-                    onClick={() => {
-                      exportAll();
-                    }}
-                    ghost
-                  >
-                    导出全部
-                  </a-button>
-                  <a-button
-                    type="primary"
-                    disabled={stateAll.selectedRowKeys.length == 0}
-                    onClick={() => {
-                      exportAll(stateAll.selectedRowKeys);
-                    }}
-                  >
-                    导出选中
-                  </a-button>
-
-                  {renderPointModal()}
-                  <a-button
-                    onClick={() => {
-                      importModal.value = true;
-                    }}
-                    type="primary"
-                    ghost
-                  >
-                    批量配点
-                  </a-button>
-                </a-space>
-                <div class="mar-t-20">
-                  <a-table
-                    rowKey={(record) => record.thingInst.id}
-                    columns={columnsAll}
-                    row-selection={{
-                      selectedRowKeys: stateAll.selectedRowKeys,
-                      onChange: onSelectChangeAll,
-                    }}
-                    dataSource={tableListAll.value}
-                    loading={isLoadingAll.value}
-                    pagination={paginationAll}
-                    v-slots={{
-                      bodyCell: ({ column, record }) => {
-                        if (column.dataIndex) {
-                          return record.thingInst[column.dataIndex];
-                        }
-
-                        if (column.key === "action") {
-                          return (
-                            <a-space>
-                              <a
-                                onClick={() => {
-                                  toEdit({
-                                    ...record,
-                                    ID: record.thingInst.id,
-                                    THING_CODE: record.thingInst.thingCode,
-                                  });
-                                }}
-                              >
-                                编辑
-                              </a>
-                              <a
-                                onClick={() => {
-                                  // // 本页打开
-                                  // toDetail({
-                                  //   ...record,
-                                  //   ID: record.thingInst.id,
-                                  //   THING_CODE: record.thingInst.thingCode,
-                                  // });
-
-                                  // 新页签打开
-                                  toRouter(
-                                    decodeURI(
-                                      JSON.stringify({
-                                        id: record.thingInst.id,
-                                        thingInst: {
-                                          name: record.thingInst.name,
-                                          thingCode: record.thingInst.thingCode,
-                                        },
-                                      })
-                                    )
-                                  );
-                                }}
-                              >
-                                详情
-                              </a>
-                              <a-popconfirm
-                                title="确认删除?"
-                                ok-text="确定"
-                                cancel-text="取消"
-                                onConfirm={() => {
-                                  deleteThing({
-                                    ...record,
-                                    ID: record.thingInst.id,
-                                  });
-                                }}
-                              >
-                                <a-button size="small" type="link">
-                                  删除
-                                </a-button>
-                              </a-popconfirm>
-                            </a-space>
-                          );
-                        }
-                      },
-                    }}
-                  ></a-table>
-                </div>
-              </>
-            ) : (
-              <>
-                <div class="option">
-                  <a-form
-                    ref={queryFormRef}
-                    model={formQuery}
-                    labelCol={{ span: 8 }}
-                    wrapperCol={{ span: 16 }}
-                    onSubmit={refresh}
-                  >
-                    <a-row gutter={24}>
-                      {queryOpts.value.map((item: any) => {
-                        return (
-                          <a-col span={6}>
-                            <a-form-item label={item.displayLabel}>
-                              <div class="flex">
-                                <a-select
-                                  class="searchSelect"
-                                  v-model={[item.operation, "value"]}
-                                >
-                                  <a-select-option value="EQ">
-                                    {"="}
-                                  </a-select-option>
-                                  <a-select-option value="NE">
-                                    {"!="}
-                                  </a-select-option>
-                                  <a-select-option value="GT">
-                                    {">"}
-                                  </a-select-option>
-                                  <a-select-option value="GTE">
-                                    {">="}
-                                  </a-select-option>
-                                  <a-select-option value="LT">
-                                    {"<"}
-                                  </a-select-option>
-                                  <a-select-option value="LTE">
-                                    {"<="}
-                                  </a-select-option>
-                                  <a-select-option value="LIKE">
-                                    {"包含"}
-                                  </a-select-option>
-                                </a-select>
-                                <a-input
-                                  v-model={[item.value, "value", ["trim"]]}
-                                  allowClear={true}
-                                />
-                              </div>
-                            </a-form-item>
-                          </a-col>
-                        );
-                      })}
-                      <a-col
-                        span={24 - (queryOpts.value.length % 4) * 6}
-                        class="align-r"
-                      >
-                        <a-space size={16}>
-                          <a-button type="primary" html-type="submit">
-                            查询
-                          </a-button>
-                          <a-button onClick={reset}>重置</a-button>
-                          {/* <a-space size={5}>
-                            <span>更多</span>
-                            <DownOutlined />
-                          </a-space> */}
-                        </a-space>
-                      </a-col>
-                    </a-row>
-                  </a-form>
-                </div>
-                <a-space size={16}>
-                  <a-button
-                    type="primary"
-                    onClick={() => toCreate()}
-                    disabled={!formQuery.thingCode || !canAdd.value}
-                  >
-                    新增
-                  </a-button>
-                  <a-upload
-                    showUploadList={false}
-                    accept=".xls,.xlsx"
-                    customRequest={(e) =>
-                      customRequest(e, thingApis.importPointExcel)
-                    }
-                  >
-                    <a-button type="primary" ghost>
-                      批量导入
-                    </a-button>
-                  </a-upload>
-                  <a-button
-                    type="primary"
-                    onClick={() => {
-                      exportThing();
-                    }}
-                    ghost
-                  >
-                    导出全部
-                  </a-button>
-                  <a-button
-                    type="primary"
-                    disabled={state.selectedRowKeys.length == 0}
-                    onClick={() => {
-                      exportThing(state.selectedRowKeys);
-                    }}
-                  >
-                    导出选中
-                  </a-button>
-
-                  <a-popconfirm
-                    title="确认删除?"
-                    ok-text="确定"
-                    cancel-text="取消"
-                    onConfirm={() => {
-                      batchDelete();
-                    }}
-                  >
-                    <a-button
-                      type="danger"
-                      disabled={state.selectedRowKeys.length == 0}
-                    >
-                      删除选中
-                    </a-button>
-                  </a-popconfirm>
-
-                  {renderPointModal(thingNode.value)}
-                  <a-button
-                    onClick={() => {
-                      importModal.value = true;
-                    }}
-                    type="primary"
-                    ghost
-                  >
-                    批量配点
-                  </a-button>
-                </a-space>
-                <div class="mar-t-20">
-                  <a-table
-                    rowKey="ID"
-                    columns={columns.value}
-                    row-selection={{
-                      selectedRowKeys: state.selectedRowKeys,
-                      onChange: onSelectChange,
-                    }}
-                    dataSource={tableList.value}
-                    loading={isLoading.value}
-                    pagination={pagination}
-                    v-slots={{
-                      bodyCell: ({ column, record }) => {
-                        if (column.key === "select") {
-                          return listFilter(
-                            record.thingPropertyList,
-                            record[column.dataIndex],
-                            column.dataIndex
-                          );
-                        }
-                        if (column.dataIndex === "action") {
-                          return (
-                            <a-space>
-                              <a
-                                onClick={() => {
-                                  toEdit(record);
-                                }}
-                              >
-                                编辑
-                              </a>
-                              <a
-                                onClick={() => {
-                                  // // 本页打开
-                                  // toDetail(record);
-
-                                  // 新页签打开
-                                  toRouter(
-                                    decodeURI(
-                                      JSON.stringify({
-                                        id: record.ID,
-                                        thingInst: {
-                                          name: record.NAME,
-                                          thingCode: record.THING_CODE,
-                                        },
-                                      })
-                                    )
-                                  );
-                                }}
-                              >
-                                详情
-                              </a>
-                              <a-popconfirm
-                                title="确认删除?"
-                                ok-text="确定"
-                                cancel-text="取消"
-                                onConfirm={() => {
-                                  deleteThing(record);
-                                }}
-                              >
-                                <a-button size="small" type="link">
-                                  删除
-                                </a-button>
-                              </a-popconfirm>
-                            </a-space>
-                          );
-                        }
-                      },
-                    }}
-                  ></a-table>
-                </div>
-              </>
-            )}
-          </div>
-          <thing-modal ref={modalRef} />
-        </div>
-      </div>
-    );
-  },
-});
-export default utils.installComponent(com, "thing-instance");
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  provide,
+} from "vue";
+
+import {
+  MenuFoldOutlined,
+  DownOutlined,
+  RedoOutlined,
+} from "@ant-design/icons-vue";
+import * as thingApis from "@/api/thingInstance";
+import utils from "@/utils";
+import { message } from "ant-design-vue";
+import { listFilter, treeBycodeFilter } from "@/pageComponent/hooks/filters";
+import useTreeSearch from "./hooks/useTreeSearch";
+import useTableList from "./hooks/useTableList";
+import { Search } from "./hooks/filters";
+import thingModal from "./modal";
+import editThing from "./component/editThing";
+import addThing from "./component/addThing";
+import thingDetail from "./component/thingDetail";
+import "./less/thingInstance.less";
+
+import { useRoute } from "vue-router";
+import moment from "moment";
+import { customRequest } from "@/pageComponent/utils/upload";
+
+const props = {
+  thingCode: {
+    type: String,
+    default: "",
+  },
+};
+const triggerModeList = [
+  {
+    code: "get",
+    name: "GET时触发",
+  },
+  {
+    code: "timer",
+    name: "定时触发",
+  },
+  {
+    code: "change",
+    name: "数据变化时触发",
+  },
+];
+const com = defineComponent({
+  components: { thingModal, editThing, thingDetail, addThing },
+  props,
+  setup(_props, _context) {
+    const route = useRoute();
+
+    // 模型树
+    const {
+      tree,
+      searchValue,
+      expandedKeys,
+      autoExpandParent,
+      selectedKeyArr,
+      fieldNames,
+      generateKey,
+      generateList,
+    } = useTreeSearch({
+      title: "name",
+      children: "child",
+    });
+    let treeDataRecord;
+    const filterTree = (arr: any[], key: string) => {
+      let have: boolean = false;
+      for (let i = 0; i < arr.length; i++) {
+        const obj = arr[i];
+        let childHave: boolean = false;
+        if (obj.child && obj.child.length != 0) {
+          childHave = filterTree(obj.child, key).have;
+        }
+        if (obj.name.indexOf(key) !== -1 || childHave) {
+          have = true;
+        } else {
+          arr.splice(i, 1);
+          i--;
+        }
+      }
+      return { arr, have };
+    };
+
+    watch(
+      () => searchValue.value,
+      (value) => {
+        tree.data = filterTree(
+          JSON.parse(JSON.stringify(treeDataRecord)),
+          searchValue.value
+        ).arr;
+      }
+    );
+    const getTreeData = () => {
+      thingApis.findAllThingForTree().then((res) => {
+        refresh();
+        res.data.forEach((ele: any) => {
+          ele.first = true;
+        });
+        const data = generateKey("0", res.data);
+        generateList(data);
+        treeDataRecord = data;
+        tree.data = filterTree(
+          JSON.parse(JSON.stringify(treeDataRecord)),
+          searchValue.value
+        ).arr;
+      });
+    };
+    const canAdd = ref(true);
+    const getOpiton = async () => {
+      queryOpts.value = [];
+      columnData.value = [];
+      const res: any = await thingApis.findByCode(formQuery.thingCode);
+      if (res.data.tableName === "-") {
+        canAdd.value = false;
+      } else {
+        canAdd.value = true;
+      }
+      res.data.thingPropertyList.forEach((ele: any) => {
+        if (ele.display && ele.queryDisplay) {
+          queryOpts.value.push({ ...ele, operation: "LIKE" });
+        }
+        if (ele.display && ele.listDisplay) {
+          columnData.value.push({
+            title: ele.displayLabel,
+            dataIndex: ele.code,
+            key: ele.displayType,
+            sort: ele.sort,
+          });
+        }
+      });
+      queryOpts.value.sort((a, b) => {
+        return a.sort - b.sort;
+      });
+      const list = queryOpts.value.filter((n) => n.sort === null);
+      const newList = queryOpts.value.filter((n) => n.sort !== null);
+      queryOpts.value = [...newList, ...list];
+    };
+
+    const thingNode = ref();
+
+    const selectNode = (
+      selectedKeys: string[] | number[],
+      { selected, node }: any
+    ) => {
+      if (formQuery.thingCode === node.code) {
+        return;
+      }
+      if (selected) {
+        formQuery.thingCode = node.code;
+        thingNode.value = node;
+      } else {
+        formQuery.thingCode = "";
+        thingNode.value = null;
+      }
+
+      selectedKeyArr.value = selectedKeys;
+      currPage.value = 1;
+      refresh();
+      getOpiton();
+    };
+
+    const expandNode = (keys: string[]) => {
+      expandedKeys.value = keys;
+      autoExpandParent.value = false;
+    };
+
+    // table
+    const queryFormRef = ref();
+    const formQuery: any = reactive({});
+    const getList = async () => {
+      const param: any = { ...formQuery, wherePojoList: [] };
+
+      queryOpts.value.forEach((ele: any) => {
+        if (ele.value) {
+          param.wherePojoList.push({
+            column: ele.columnName,
+            operation: ele.operation,
+            valueList: [ele.value],
+          });
+        }
+      });
+      const res: any = await thingApis.indInsts({
+        ...param,
+        pageNum: currPage.value,
+        pageSize: pageSize.value,
+      });
+      const resObj: any = {
+        columnData: [],
+        data: [],
+        totalNum: res.data?.total,
+      };
+      columnData.value.sort((a, b) => {
+        return a.sort - b.sort;
+      });
+      const list = columnData.value.filter((n) => n.sort === null);
+      resObj.columnData = columnData.value.filter((n) => n.sort !== null);
+      resObj.columnData = [...resObj.columnData, ...list].map((item) => item);
+      resObj.columnData.push({
+        title: "操作",
+        dataIndex: "action",
+        key: "action",
+      });
+      resObj.data = res.data?.list.map((ele: any) => ({
+        ...ele.staticMap.map,
+        thingPropertyList: ele.thingInst?.thing?.thingPropertyList,
+      }));
+      return resObj;
+    };
+    const state = reactive<{
+      selectedRowKeys: string[];
+      selectedRows: any[];
+      modalVisible: boolean;
+    }>({
+      selectedRowKeys: [],
+      selectedRows: [],
+      modalVisible: true,
+    });
+    const onSelectChange = (selectedRowKeys: string[], selectedRows: any[]) => {
+      state.selectedRowKeys = selectedRowKeys;
+      state.selectedRows = selectedRows;
+    };
+    const {
+      isLoading,
+      columns,
+      tableList,
+      pagination,
+      refresh,
+      currPage,
+      pageSize,
+    } = useTableList(getList, "list", "total");
+    const reset = () => {
+      queryOpts.value.forEach((ele) => {
+        ele.value = "";
+        ele.operation = "LIKE";
+      });
+      refresh();
+    };
+    const pageData = reactive({
+      editData: {},
+      addData: {},
+      thingCode: "",
+      id: "",
+    });
+
+    // all table
+    const queryAllFormRef = ref();
+    const columnsAll = [
+      // {
+      //   dataIndex: "id",
+      //   title: "实例ID",
+      // },
+      {
+        dataIndex: "name",
+        title: "实例名称",
+      },
+      {
+        dataIndex: "code",
+        title: "实例编码",
+      },
+      {
+        dataIndex: "thingName",
+        title: "物模型名称",
+      },
+      {
+        dataIndex: "thingCode",
+        title: "物模型编码",
+      },
+      { title: "操作", key: "action" },
+    ];
+    const formQueryAll: any = ref([
+      // { label: "实例ID", column: "instanceId", operation: "LIKE", value: null },
+      {
+        label: "实例名称",
+        column: "instanceName",
+        operation: "LIKE",
+        value: null,
+      },
+      {
+        label: "实例编码",
+        column: "instanceCode",
+        operation: "LIKE",
+        value: null,
+      },
+      { label: "属性ID", column: "propertyId", operation: "LIKE", value: null },
+      {
+        label: "属性名称",
+        column: "displayLabel",
+        operation: "LIKE",
+        value: null,
+      },
+      {
+        label: "属性编码",
+        column: "propertyCode",
+        operation: "LIKE",
+        value: null,
+      },
+    ]);
+    const getListAll = async () => {
+      const param: any = { wherePojoList: [] };
+
+      formQueryAll.value.forEach((ele: any) => {
+        if (ele.value) {
+          param.wherePojoList.push({
+            column: ele.column,
+            operation: ele.operation,
+            valueList: [ele.value],
+          });
+        }
+      });
+      const resp = await thingApis.indInstsAll({
+        ...param,
+        pageNum: currPageAll.value,
+        pageSize: pageSizeAll.value,
+      });
+
+      const resObj: any = {
+        columnData: [],
+        data: resp.data?.list,
+        totalNum: resp.data?.total,
+      };
+      return resObj;
+    };
+
+    const {
+      isLoading: isLoadingAll,
+      tableList: tableListAll,
+      pagination: paginationAll,
+      refresh: refreshAll,
+      currPage: currPageAll,
+      pageSize: pageSizeAll,
+    } = useTableList(getListAll, "list", "total");
+    const resetAll = () => {
+      formQueryAll.value.forEach((ele) => {
+        ele.value = "";
+        ele.operation = "LIKE";
+      });
+      refreshAll();
+    };
+    const stateAll = reactive<{
+      selectedRowKeys: string[];
+      selectedRows: any[];
+    }>({
+      selectedRowKeys: [],
+      selectedRows: [],
+    });
+    const onSelectChangeAll = (
+      selectedRowKeys: string[],
+      selectedRows: any[]
+    ) => {
+      stateAll.selectedRowKeys = selectedRowKeys;
+      stateAll.selectedRows = selectedRows;
+    };
+
+    // 弹框
+    const modalRef = ref<any>(null);
+    const toEdit = async (row?: any) => {
+      const res: any = await thingApis.findThingProperties(row.ID);
+      pageData.thingCode = row.THING_CODE;
+      pageData.editData = res.data;
+      page.value = "edit";
+    };
+    const toCreate = async (row?: any) => {
+      const res: any = await thingApis.findByCode(formQuery.thingCode);
+      if (res.data.tableName === "-") {
+        message.error("该模型不支持新增实例！");
+        return false;
+      }
+      pageData.thingCode = formQuery.thingCode;
+      pageData.addData = res.data;
+      page.value = "add";
+    };
+    const toDetail = async (row: any, hideEdit = false, hideBack = false) => {
+      hideBtnLine.value = false;
+      hideEditBtn.value = hideEdit;
+      hideBackBtn.value = hideBack;
+      const res: any = await thingApis.findThingProperties(row.ID);
+      pageData.id = row.ID;
+      pageData.thingCode = row.THING_CODE;
+      pageData.editData = res.data;
+      page.value = "detail";
+    };
+    const deleteThing = async (row) => {
+      const res: any = await thingApis.deleteThing(row.ID.toString());
+
+      if (formQuery.thingCode) {
+        refresh();
+      } else {
+        refreshAll();
+      }
+
+      if ((res.code = "M0000")) {
+        message.success("删除成功");
+      }
+    };
+    const queryOpts = ref<any[]>([]);
+    const columnData = ref<any>([]);
+    const batchDelete = async () => {
+      for (const row of state.selectedRows) {
+        const res: any = await thingApis.deleteThing(row.ID.toString());
+      }
+      if (formQuery.thingCode) {
+        refresh();
+        state.selectedRowKeys = [];
+        state.selectedRows = [];
+      } else {
+        refreshAll();
+        stateAll.selectedRowKeys = [];
+        stateAll.selectedRows = [];
+      }
+
+      message.success("删除成功");
+    };
+    const importModal = ref(false);
+
+    const newThing = ref(null);
+
+    onMounted(() => {
+      const { newThingInfo } = route?.query;
+      if (newThingInfo) {
+        newThing.value = JSON.parse(newThingInfo as any);
+
+        toNewThing(newThing.value);
+      } else {
+        getTreeData();
+        refreshAll();
+      }
+    });
+
+    const isInit = ref(false);
+
+    watch(
+      () => [tree.data, _props.thingCode],
+      (e) => {
+        if (e[0] && e[1] && e[1] !== "" && !isInit.value) {
+          page.value = "list";
+          searchValue.value = "";
+
+          formQuery.thingCode = _props.thingCode;
+          const { node, key } = treeBycodeFilter(tree.data, _props.thingCode);
+
+          thingNode.value = node;
+          selectedKeyArr.value = [key];
+          const keys = new Search({
+            treeData: tree.data,
+            key,
+          });
+          const keyData = keys.rtn();
+          expandedKeys.value = keyData.expandedKeys;
+          refresh();
+          getOpiton();
+        } else {
+          formQuery.thingCode = "";
+          selectedKeyArr.value = [];
+          thingNode.value = null;
+
+          isInit.value = false;
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+
+    const page = ref("list");
+    const file = ref();
+
+    const exportFun = (resource: any, name: string) => {
+      const blob = new Blob([resource], {
+        type: "text/html;charset=UTF-8",
+      });
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = name;
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    };
+
+    // 配点模板下载
+    const dynamicExport = async (exportName: string, node?: any) => {
+      const param: any = {};
+      if (node) {
+        param.thingCode = formQuery.thingCode;
+      }
+
+      message.info("正在导出，请稍后");
+      const res: any = await thingApis.exportExcelTemplate(param);
+
+      exportFun(res, exportName);
+    };
+
+    // 导出全部
+    const exportAll = async (ids: any[] = []) => {
+      const param: any = {};
+      if (ids.length > 0) {
+        param.ids = ids;
+      }
+
+      message.info("正在导出，请稍后");
+      const res: any = await thingApis.exportPointExcelTemplate(param);
+      exportFun(res, `物实例数据-${moment().format("YYYYMMDDHHmmss")}.xls`);
+    };
+
+    // 选中树物实例导出
+    const exportThing = async (ids: any[] = []) => {
+      if (thingNode.value) {
+        const param: any = {};
+        param.thingCode = formQuery.thingCode;
+        if (ids.length > 0) {
+          param.ids = ids;
+        }
+
+        message.info("正在导出，请稍后");
+        const res: any = await thingApis.exportPointExcelTemplate(param);
+        exportFun(
+          res,
+          `物实例数据-${thingNode.value.name}-${moment().format(
+            "YYYYMMDDHHmmss"
+          )}.xls`
+        );
+      }
+    };
+
+    const renderPointModal = (node?: any) => {
+      const exportName = `动态属性${
+        node ? "-" + node?.name : ""
+      }-${moment().format("YYYYMMDDHHmmss")}.xls`;
+      return (
+        <a-modal
+          v-model={[importModal.value, "visible"]}
+          title={"批量配点" + (node ? " - " + node?.name : "")}
+          class="pointModal"
+          width={800}
+          footer={null}
+          onCancel={() => {
+            importModal.value = false;
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              backgroundColor: "rgba(255, 146, 20, 0.1)",
+            }}
+          >
+            <a-alert
+              message="请先下载当前所有的动态属性并按要求填写信息，否则可能导入失败。上传文件后将覆盖式更新，请谨慎操作！"
+              banner
+            />
+            <a-button
+              type="link"
+              onClick={() => {
+                dynamicExport(exportName, node);
+              }}
+            >
+              {exportName}
+            </a-button>
+          </div>
+          <a-upload-dragger
+            showUploadList={false}
+            accept=".xls,.xlsx"
+            customRequest={async (e) => {
+              const res = await customRequest(e, thingApis.importExcel);
+              importModal.value = false;
+            }}
+          >
+            <p class="ant-upload-drag-icon">
+              <inbox-outlined></inbox-outlined>
+            </p>
+            <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
+            <p class="ant-upload-hint">支持格式：xls/xlsx</p>
+          </a-upload-dragger>
+        </a-modal>
+      );
+    };
+
+    const initHandle = () => {
+      canAdd.value = true;
+      searchValue.value = "";
+      expandedKeys.value = [];
+
+      stateAll.selectedRowKeys = [];
+      stateAll.selectedRows = [];
+
+      state.selectedRowKeys = [];
+      state.selectedRows = [];
+      state.modalVisible = true;
+
+      isInit.value = true;
+
+      getTreeData();
+      refreshAll();
+    };
+
+    const isLoad = ref(false);
+    const hideEditBtn = ref(false);
+    const hideBtnLine = ref(false);
+    const hideBackBtn = ref(false);
+    const toNewThing = async (row: any) => {
+      page.value = "detail";
+      isLoad.value = true;
+      hideBackBtn.value = true;
+
+      const res: any = await thingApis.findThingProperties(row.id);
+      pageData.id = row.id;
+      pageData.thingCode = row.thingInst.thingCode;
+      pageData.editData = res.data;
+
+      isLoad.value = false;
+    };
+    provide("toNewThing", toNewThing);
+
+    const toRouter = async (row: any) => {
+      _context.emit("toRouter", row);
+    };
+    provide("toRouter", toRouter);
+
+    return () => (
+      <div
+        class="thingApp flex"
+        style={{ justifyContent: isLoad.value ? "center" : "" }}
+      >
+        {page.value === "edit" ? (
+          <editThing
+            data={pageData.editData}
+            triggerModeList={triggerModeList}
+            hideBackBtn={hideBackBtn.value}
+            onBack={() => {
+              refresh();
+              page.value = "detail";
+            }}
+            onBackList={() => {
+              refresh();
+              page.value = "list";
+            }}
+            onToDetail={(res) => {
+              toDetail(res);
+            }}
+            onToRoute={() => {
+              _context.emit("toRoute");
+            }}
+          />
+        ) : (
+          ""
+        )}
+        {page.value === "add" ? (
+          <addThing
+            data={pageData.addData}
+            triggerModeList={triggerModeList}
+            onBack={() => {
+              refresh();
+              page.value = "list";
+            }}
+            onBackList={() => {
+              refresh();
+              page.value = "list";
+            }}
+            onToDetail={(res) => {
+              toDetail(res);
+            }}
+            onToRoute={() => {
+              _context.emit("toRoute");
+            }}
+          />
+        ) : (
+          ""
+        )}
+        {page.value === "detail" ? (
+          <a-spin spinning={isLoad.value}>
+            {!isLoad.value && (
+              <thingDetail
+                data={pageData.editData}
+                id={pageData.id}
+                hideBtnLine={hideBtnLine.value}
+                hideEditBtn={hideEditBtn.value}
+                hideBackBtn={hideBackBtn.value}
+                onBack={() => {
+                  if (formQuery.thingCode) {
+                    refresh();
+                  } else {
+                    refreshAll();
+                    if (newThing.value) {
+                      newThing.value = null;
+                      getTreeData();
+                    }
+                  }
+                  page.value = "list";
+                }}
+                onBackList={() => {
+                  if (formQuery.thingCode) {
+                    refresh();
+                  } else {
+                    refreshAll();
+                    if (newThing.value) {
+                      newThing.value = null;
+                      getTreeData();
+                    }
+                  }
+                  page.value = "list";
+                }}
+                onToEdit={(res) => {
+                  toEdit(res);
+                }}
+              />
+            )}
+          </a-spin>
+        ) : (
+          ""
+        )}
+        <div
+          class="thingInstance flex"
+          style={page.value !== "list" ? "display:none" : ""}
+        >
+          <div class="left_wrap">
+            <div class="flex_lr_c">
+              <div class="flex-center title flex1">
+                <span>物模型</span>
+
+                <div class="flex gap">
+                  <RedoOutlined onClick={initHandle} title="刷新" />
+                  {/* <MenuFoldOutlined /> */}
+                </div>
+              </div>
+            </div>
+
+            <div class="tree_data">
+              <a-input-search
+                class="search"
+                v-model={[searchValue.value, "value", ["trim"]]}
+                style="margin-bottom: 8px"
+                placeholder="搜索"
+                allowClear
+              />
+              <div
+                class="mar-t-20 tree_wrap"
+                style={{ height: "calc(100vh - 240px)" }}
+              >
+                {tree.data.length ? (
+                  <a-tree
+                    show-line
+                    blockNode={true}
+                    tree-data={tree.data}
+                    field-names={fieldNames}
+                    onSelect={selectNode}
+                    onExpand={expandNode}
+                    selectedKeys={selectedKeyArr.value}
+                    expandedKeys={expandedKeys.value}
+                    autoExpandParent={autoExpandParent.value}
+                    v-slots={{
+                      title: (ele: any) => {
+                        return (
+                          <span class="tree-node-title">
+                            <span style={ele.first ? "font-weight:700" : ""}>
+                              {ele.name}
+                            </span>
+                          </span>
+                        );
+                      },
+                    }}
+                  ></a-tree>
+                ) : null}
+              </div>
+            </div>
+          </div>
+          <div class="table_wrap">
+            {!formQuery.thingCode ? (
+              // <a-empty
+              //   image="/micro-assets/platform-web/empty.png"
+              //   image-style={{
+              //     height: "17.57rem",
+              //   }}
+              //   v-slots={{
+              //     description: () => (
+              //       <span style={{ fontSize: "1rem", color: "#354052" }}>
+              //         请先在左侧选择一个物规格
+              //       </span>
+              //     ),
+              //   }}
+              // ></a-empty>
+              <>
+                <div class="option">
+                  <a-form
+                    ref={queryAllFormRef}
+                    model={formQueryAll.value}
+                    labelCol={{ span: 8 }}
+                    wrapperCol={{ span: 16 }}
+                    onSubmit={refreshAll}
+                  >
+                    <a-row gutter={24}>
+                      {formQueryAll.value.map((formItem: any) => (
+                        <a-col span={6}>
+                          <a-form-item label={formItem.label}>
+                            <div class="flex">
+                              <div class="flex">
+                                <a-select
+                                  class="searchSelect"
+                                  v-model={[formItem.operation, "value"]}
+                                >
+                                  <a-select-option value="EQ">
+                                    {"="}
+                                  </a-select-option>
+                                  <a-select-option value="NE">
+                                    {"!="}
+                                  </a-select-option>
+                                  <a-select-option value="GT">
+                                    {">"}
+                                  </a-select-option>
+                                  <a-select-option value="GTE">
+                                    {">="}
+                                  </a-select-option>
+                                  <a-select-option value="LT">
+                                    {"<"}
+                                  </a-select-option>
+                                  <a-select-option value="LTE">
+                                    {"<="}
+                                  </a-select-option>
+                                  <a-select-option value="LIKE">
+                                    {"包含"}
+                                  </a-select-option>
+                                </a-select>
+                                <a-input
+                                  v-model={[formItem.value, "value", ["trim"]]}
+                                  allowClear={true}
+                                />
+                              </div>
+                            </div>
+                          </a-form-item>
+                        </a-col>
+                      ))}
+                      <a-col span={18} class="align-r">
+                        <a-space size={16}>
+                          <a-button type="primary" html-type="submit">
+                            查询
+                          </a-button>
+                          <a-button onClick={resetAll}>重置</a-button>
+                        </a-space>
+                      </a-col>
+                    </a-row>
+                  </a-form>
+                </div>
+                <a-space size={16}>
+                  <a-button
+                    type="primary"
+                    onClick={() => {
+                      exportAll();
+                    }}
+                    ghost
+                  >
+                    导出全部
+                  </a-button>
+                  <a-button
+                    type="primary"
+                    disabled={stateAll.selectedRowKeys.length == 0}
+                    onClick={() => {
+                      exportAll(stateAll.selectedRowKeys);
+                    }}
+                  >
+                    导出选中
+                  </a-button>
+
+                  {renderPointModal()}
+                  <a-button
+                    onClick={() => {
+                      importModal.value = true;
+                    }}
+                    type="primary"
+                    ghost
+                  >
+                    批量配点
+                  </a-button>
+                </a-space>
+                <div class="mar-t-20">
+                  <a-table
+                    rowKey={(record) => record.thingInst.id}
+                    columns={columnsAll}
+                    row-selection={{
+                      selectedRowKeys: stateAll.selectedRowKeys,
+                      onChange: onSelectChangeAll,
+                    }}
+                    dataSource={tableListAll.value}
+                    loading={isLoadingAll.value}
+                    pagination={paginationAll}
+                    v-slots={{
+                      bodyCell: ({ column, record }) => {
+                        if (column.dataIndex) {
+                          return record.thingInst[column.dataIndex];
+                        }
+
+                        if (column.key === "action") {
+                          return (
+                            <a-space>
+                              <a
+                                onClick={() => {
+                                  toEdit({
+                                    ...record,
+                                    ID: record.thingInst.id,
+                                    THING_CODE: record.thingInst.thingCode,
+                                  });
+                                }}
+                              >
+                                编辑
+                              </a>
+                              <a
+                                onClick={() => {
+                                  // // 本页打开
+                                  // toDetail({
+                                  //   ...record,
+                                  //   ID: record.thingInst.id,
+                                  //   THING_CODE: record.thingInst.thingCode,
+                                  // });
+
+                                  // 新页签打开
+                                  toRouter(
+                                    decodeURI(
+                                      JSON.stringify({
+                                        id: record.thingInst.id,
+                                        thingInst: {
+                                          name: record.thingInst.name,
+                                          thingCode: record.thingInst.thingCode,
+                                        },
+                                      })
+                                    )
+                                  );
+                                }}
+                              >
+                                详情
+                              </a>
+                              <a-popconfirm
+                                title="确认删除?"
+                                ok-text="确定"
+                                cancel-text="取消"
+                                onConfirm={() => {
+                                  deleteThing({
+                                    ...record,
+                                    ID: record.thingInst.id,
+                                  });
+                                }}
+                              >
+                                <a-button size="small" type="link">
+                                  删除
+                                </a-button>
+                              </a-popconfirm>
+                            </a-space>
+                          );
+                        }
+                      },
+                    }}
+                  ></a-table>
+                </div>
+              </>
+            ) : (
+              <>
+                <div class="option">
+                  <a-form
+                    ref={queryFormRef}
+                    model={formQuery}
+                    labelCol={{ span: 8 }}
+                    wrapperCol={{ span: 16 }}
+                    onSubmit={refresh}
+                  >
+                    <a-row gutter={24}>
+                      {queryOpts.value.map((item: any) => {
+                        return (
+                          <a-col span={6}>
+                            <a-form-item label={item.displayLabel}>
+                              <div class="flex">
+                                <a-select
+                                  class="searchSelect"
+                                  v-model={[item.operation, "value"]}
+                                >
+                                  <a-select-option value="EQ">
+                                    {"="}
+                                  </a-select-option>
+                                  <a-select-option value="NE">
+                                    {"!="}
+                                  </a-select-option>
+                                  <a-select-option value="GT">
+                                    {">"}
+                                  </a-select-option>
+                                  <a-select-option value="GTE">
+                                    {">="}
+                                  </a-select-option>
+                                  <a-select-option value="LT">
+                                    {"<"}
+                                  </a-select-option>
+                                  <a-select-option value="LTE">
+                                    {"<="}
+                                  </a-select-option>
+                                  <a-select-option value="LIKE">
+                                    {"包含"}
+                                  </a-select-option>
+                                </a-select>
+                                <a-input
+                                  v-model={[item.value, "value", ["trim"]]}
+                                  allowClear={true}
+                                />
+                              </div>
+                            </a-form-item>
+                          </a-col>
+                        );
+                      })}
+                      <a-col
+                        span={24 - (queryOpts.value.length % 4) * 6}
+                        class="align-r"
+                      >
+                        <a-space size={16}>
+                          <a-button type="primary" html-type="submit">
+                            查询
+                          </a-button>
+                          <a-button onClick={reset}>重置</a-button>
+                          {/* <a-space size={5}>
+                            <span>更多</span>
+                            <DownOutlined />
+                          </a-space> */}
+                        </a-space>
+                      </a-col>
+                    </a-row>
+                  </a-form>
+                </div>
+                <a-space size={16}>
+                  <a-button
+                    type="primary"
+                    onClick={() => toCreate()}
+                    disabled={!formQuery.thingCode || !canAdd.value}
+                  >
+                    新增
+                  </a-button>
+                  <a-upload
+                    showUploadList={false}
+                    accept=".xls,.xlsx"
+                    customRequest={(e) =>
+                      customRequest(e, thingApis.importPointExcel)
+                    }
+                  >
+                    <a-button type="primary" ghost>
+                      批量导入
+                    </a-button>
+                  </a-upload>
+                  <a-button
+                    type="primary"
+                    onClick={() => {
+                      exportThing();
+                    }}
+                    ghost
+                  >
+                    导出全部
+                  </a-button>
+                  <a-button
+                    type="primary"
+                    disabled={state.selectedRowKeys.length == 0}
+                    onClick={() => {
+                      exportThing(state.selectedRowKeys);
+                    }}
+                  >
+                    导出选中
+                  </a-button>
+
+                  <a-popconfirm
+                    title="确认删除?"
+                    ok-text="确定"
+                    cancel-text="取消"
+                    onConfirm={() => {
+                      batchDelete();
+                    }}
+                  >
+                    <a-button
+                      type="danger"
+                      disabled={state.selectedRowKeys.length == 0}
+                    >
+                      删除选中
+                    </a-button>
+                  </a-popconfirm>
+
+                  {renderPointModal(thingNode.value)}
+                  <a-button
+                    onClick={() => {
+                      importModal.value = true;
+                    }}
+                    type="primary"
+                    ghost
+                  >
+                    批量配点
+                  </a-button>
+                </a-space>
+                <div class="mar-t-20">
+                  <a-table
+                    rowKey="ID"
+                    columns={columns.value}
+                    row-selection={{
+                      selectedRowKeys: state.selectedRowKeys,
+                      onChange: onSelectChange,
+                    }}
+                    dataSource={tableList.value}
+                    loading={isLoading.value}
+                    pagination={pagination}
+                    v-slots={{
+                      bodyCell: ({ column, record }) => {
+                        if (column.key === "select") {
+                          return listFilter(
+                            record.thingPropertyList,
+                            record[column.dataIndex],
+                            column.dataIndex
+                          );
+                        }
+                        if (column.dataIndex === "action") {
+                          return (
+                            <a-space>
+                              <a
+                                onClick={() => {
+                                  toEdit(record);
+                                }}
+                              >
+                                编辑
+                              </a>
+                              <a
+                                onClick={() => {
+                                  // // 本页打开
+                                  // toDetail(record);
+
+                                  // 新页签打开
+                                  toRouter(
+                                    decodeURI(
+                                      JSON.stringify({
+                                        id: record.ID,
+                                        thingInst: {
+                                          name: record.NAME,
+                                          thingCode: record.THING_CODE,
+                                        },
+                                      })
+                                    )
+                                  );
+                                }}
+                              >
+                                详情
+                              </a>
+                              <a-popconfirm
+                                title="确认删除?"
+                                ok-text="确定"
+                                cancel-text="取消"
+                                onConfirm={() => {
+                                  deleteThing(record);
+                                }}
+                              >
+                                <a-button size="small" type="link">
+                                  删除
+                                </a-button>
+                              </a-popconfirm>
+                            </a-space>
+                          );
+                        }
+                      },
+                    }}
+                  ></a-table>
+                </div>
+              </>
+            )}
+          </div>
+          <thing-modal ref={modalRef} />
+        </div>
+      </div>
+    );
+  },
+});
+export default utils.installComponent(com, "thing-instance");