htui-yllkbz 1.1.12 → 1.1.13

package/src/packages/SelectTable/index.ts

@@ -0,0 +1,15 @@
+/*
+ * @Descripttion:
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-15 15:48:37
+ */
+import SelectTable from "./index.vue";
+
+(SelectTable as any).install = function (Vue: any) {
+
+  Vue.component(SelectTable.name, SelectTable);
+};
+export default SelectTable;

package/src/packages/SelectTable/index.vue

@@ -0,0 +1,188 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-11 11:06:51
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-25 11:46:02
+-->
+<template>
+  <el-popover placement="bottom"
+              title=""
+              class="ht-popover"
+              v-model="state.visible"
+              :width="width||600"
+              @show="show"
+              @hide="hide"
+              trigger="click">
+    <div slot="reference"
+         @click="!state.config.disabled?state.visible = !state.visible:state.visible=false"
+         class="ht-contnet">
+      <el-input readonly
+                @blur="blurInput"
+                :placeholder="placeholder"
+                :disabled="state.config.disabled"
+                @focus="focusInput"
+                :suffix-icon="state.icon"
+                v-model="state.name"></el-input>
+      <el-button type="text"
+                 class="ht-close"
+                 v-if="state.name&&state.config.clearable"
+                 @click.native.stop="clear">
+        <div><i class="el-icon-circle-close"></i></div>
+      </el-button>
+    </div>
+    <CommonTable @callback="callback"
+                 :searchPlaceholder="searchPlaceholder"
+                 :columns="state.columns"
+                 :visible.sync="state.visible"
+                 :ref="state.config.key||'ht-table'"
+                 :confige="state.config"></CommonTable>
+  </el-popover>
+</template>
+<script lang='ts'>
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import CommonTable from "@/packages/SelectTable/CommonTable.vue";
+import { ConfigProp } from "@/packages/type";
+import "@/packages/style.scss";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 输入框内容 */
+  name?: string;
+  /** icon图标 */
+  icon: string;
+  /** 是否展示弹窗 */
+  show: boolean;
+  columns?: Column[];
+  visible: boolean;
+  config: ConfigProp;
+}
+interface Confige {
+  url: string;
+  type: "get" | "post";
+  /* 展示的字段 */
+  text: string;
+  /** 默认值 */
+  value: string;
+  columns: Column[] | undefined;
+}
+interface Column {
+  key: string;
+  title: string;
+  width?: number;
+}
+
+@Component({
+  components: {
+    CommonTable,
+  },
+})
+export default class SelectTable extends Vue {
+  /**  通用样式 */
+  @Prop() comStyle!: string;
+  @Prop() config!: string;
+  @Prop() width!: number;
+  /** 同原生placeholder */
+  @Prop() placeholder!: string;
+  /**搜索框 同原生placeholder */
+  @Prop() searchPlaceholder!: string;
+  @Prop() columns!: Column[] | undefined;
+
+  /** 数据 */
+  state: State = {
+    config: {
+      key: "",
+      disabled: false,
+      clearable: false,
+      value: "",
+      name: "",
+      ajax: {
+        url: "",
+        params: {},
+      },
+
+      text: undefined,
+    },
+    visible: false,
+    loading: false,
+    name: "",
+    show: false,
+    icon: "el-icon-arrow-down",
+    columns: [
+      {
+        key: "code",
+        title: "编码",
+      },
+      {
+        key: "name",
+        title: "名称",
+      },
+      {
+        key: "description",
+        title: "描述",
+      },
+    ],
+  };
+  /** 生命周期 */
+  /** 方法 */
+  created() {
+    this.state.config = JSON.parse(this.config);
+    this.columns ? (this.state.columns = this.columns) : "";
+    //this.state.columns = this.columns??;
+  }
+  /** 显示弹层 */
+  show() {
+    this.state.icon = "el-icon-arrow-up";
+    this.state.show = true;
+
+    //
+  }
+  /** 回调 */
+  callback(row: any | undefined, type?: string) {
+    const { config } = this.state;
+    const text = config.text || "name";
+    if (row) {
+      this.state.name = row[text];
+    } else {
+      this.state.name = undefined;
+    }
+    // console.log("change", row, type);
+    this.$emit("change", row, type);
+    if (type) {
+      this.state.visible = false;
+    }
+  }
+  /** 隐藏弹窗 */
+  hide() {
+    this.state.icon = "el-icon-arrow-down";
+    this.state.show = false;
+  }
+  /** 焦点移入移出 */
+  blurInput() {
+    const { show } = this.state;
+    this.state.icon = show ? "el-icon-arrow-up" : "el-icon-arrow-down";
+  }
+
+  focusInput() {
+    this.state.icon = "el-icon-circle-close";
+    this.state.visible = !this.state.config.disabled;
+  }
+  /** 清除内容 */
+  clear() {
+    //
+    if (!this.state.config.disabled) {
+      const ref: any = this.$refs[this.state.config.key || "ht-table"];
+      this.state.visible = false;
+      ref.clearCheck();
+    }
+  }
+  /** 监听 */
+  @Watch("config")
+  watchConfig(value: string) {
+    this.state.config = JSON.parse(value);
+  }
+  /** 计算属性 */
+}
+</script>
+

package/src/packages/index.ts

@@ -0,0 +1,35 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-10-21 10:08:41
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-15 15:06:00
+ */
+
+// 导入开关选择组件
+import selectTable from './SelectTable/index'
+
+// 存储组件列表
+const components = [
+  selectTable
+]
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+const install = function (Vue: any) {
+  // 判断是否安装
+  if ((install as any).installed) return
+  // 遍历注册全局组件
+  components.map(component => Vue.component(component.name, component))
+}
+// 判断是否是直接引入文件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  // 以下是具体的组件列表
+  selectTable
+}
+

package/src/packages/style.scss

@@ -0,0 +1,13 @@
+.ht-contnet {
+  position: relative;
+  .ht-close {
+    position: absolute;
+    padding: 0px;
+    width: 16px;
+    height: 16px;
+    top: 8px;
+    right: 8px;
+    color: #ccc;
+    float: right;
+  }
+}

package/src/packages/type.ts

@@ -0,0 +1,55 @@
+/*
+ * @Descripttion:
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-10-25 17:05:17
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-14 17:30:49
+ */
+/** 初始的默认条数 */
+export const defalutPageSize = 10
+/** 分页显示传入的参数 
+ * @param currentPage(当前页码)
+ * @param pageSize(每页条数)
+ * @param total(总条数)
+*/
+export interface CurrentType {
+  currentPage: number;
+  pageSize: number;
+  total: number;
+}
+export interface ConfigProp {
+  /** 展示的相关列表code */
+  key: string;
+  /** 是否可用 */
+  disabled: boolean;
+  /** 清除内容 */
+  clearable?: boolean;
+  /** 默认值 */
+  value?: string; //code:"344"
+  /** value对应的匹配值 */
+  name?: string;
+  ajax: {
+    /** 请求地址 */
+    url: string;
+    /** 请求类型 */
+    type?: "get" | "post";
+    /** 头部参数 */
+    params: any;
+    /** body参数 */
+    data?: any;
+  };
+  /** 展示的内容 */
+  text?: string | number;
+  table?: {
+    rowkey?: string;
+    height?: number;
+    columns: Column[] | undefined;
+  };
+
+}
+export interface Column {
+  key: string;
+  title: string;
+  width?: number;
+}

package/src/router/index.ts

@@ -0,0 +1,41 @@
+import { RouteConfig } from "vue-router";
+import index from "../views/Index.vue";
+import Login from "vue-kst-auth";
+const routes: Array<RouteConfig> = [
+  {
+    path: "/login",
+    name: "登录",
+    component: Login as any
+  },
+  {
+    path: "/",
+    name: "首页",
+    component: index,
+    children: [
+      {
+        path: "",
+        name: "",
+        meta: {
+          title:"模板首页"
+        },
+        component: () =>
+          import(/* webpackChunkName: "about" */ "../views/About.vue")
+      }
+    ]
+  },
+  {
+    path: "/about",
+    name: "About",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue")
+  }
+];
+
+// const router = new VueRouter({
+//   routes
+// });
+
+export default routes;

package/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from "vue";
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

package/src/store/baseData.ts

@@ -0,0 +1,44 @@
+export default {
+  state: {
+    // "企业名称",
+    enterpriseName: "星环视界智能科技",
+    // "基本请求路径",
+    baseUrl: "",
+    /** 授权 */
+    grantedPolicies: {},
+    /** 部门人员 */
+    organizationUsers: [],
+    /** 部门 */
+    organizationUnit: [],
+    /** 人员 */
+    users: [],
+    /** 严重等级 */
+    severityLevel: [],
+    /** 资产分类 */
+    assetTypes: [],
+    /** 位置 */
+    positions: [],
+    /** 分组 */
+    grids: []
+  },
+  getters: {
+    getBaseData: (state: any) => (name: string) => state[name]
+  },
+  mutations: {
+    setBaseData(state: any, baseData: any) {
+      for (const key in baseData) {
+        if (baseData.hasOwnProperty(key) && !/(^\?)|(^？)/.test(key)) {
+          let element: string = baseData[key];
+          if (/^baseUrl/.test(key)) {
+            element = element.replace(/\/$/g, "");
+          }
+          state[key] = element;
+        }
+      }
+    },
+    setBaseDataApi(state: any, payload: { key: string; value: any }) {
+      state[payload.key] = payload.value;
+    }
+  },
+  actions: {}
+};

package/src/store/index.ts

@@ -0,0 +1,14 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import baseData from "./baseData"; // 基本数据
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {
+    baseData
+  }
+});

package/src/styles.scss

@@ -0,0 +1,6 @@
+/* theme color */
+
+/* icon font path, required */
+
+/** $--font-path: '/publicData/styles/theme/fonts'; */
+/** @import "/publicData/styles/theme/index.css"; */

package/src/views/About.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>模板框架</div>
+</template>

package/src/views/Index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div id="index">
+    <el-container style="height: 100vh" class="index">
+      <el-header style="padding: 0; height: min-content">
+        <xhkj-layout02>
+          <router-link to="/login" slot="navEnd">注销</router-link>
+        </xhkj-layout02>
+      </el-header>
+      <el-container class="body">
+        <el-aside :width="state.collapsed ? '66px' : '230px'" class="left">
+          <!--导航菜单-->
+          <el-menu
+            :default-active="state.defaultIndex"
+            router
+            :collapse="state.collapsed"
+            :collapse-transition="false"
+          >
+            <el-menu-item index="/">
+              <i class="el-icon-s-check"></i>
+              <span slot="title">导航1</span>
+            </el-menu-item>
+            <el-menu-item index="/">
+              <i class="el-icon-s-promotion"></i>
+              <span slot="title">导航2</span>
+            </el-menu-item>
+            <el-menu-item index="/">
+              <i class="el-icon-s-order"></i>
+              <span slot="title">导航3</span>
+            </el-menu-item>
+          </el-menu>
+          <el-button
+            class="action-btn"
+            :title="state.collapsed ? '展开菜单' : '收起菜单'"
+            type="text"
+            size="medium"
+            :icon="state.collapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+            @click="state.collapsed = !state.collapsed"
+            style="font-size: 16px"
+          ></el-button>
+        </el-aside>
+        <el-main style="padding: 8px 0 0 15px" class="cont">
+          <router-view v-if="state.loading"></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+    <div
+      v-if="state.isLogin"
+      is="common-datas"
+      @commonDatas="commonDatas"
+      @error="error"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { baseConfig } from "vue-kst-auth";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 是否登陆 */
+  isLogin: boolean;
+  /** 默认选中导航 */
+  defaultIndex: string;
+  /** 菜单是否收缩 */
+  collapsed: boolean;
+}
+
+@Component({
+  components: {},
+})
+export default class App extends Vue {
+  /** 数据 */
+  state: State = {
+    loading: false,
+    isLogin: false,
+    defaultIndex: "/",
+    collapsed: true,
+  };
+  /** 生命周期 */
+  created() {
+    // 动态加载引用文件
+    const files = this.$store.getters.getBaseData("files");
+    const filesKeys: string[] = Object.keys(files);
+    let heatStr = document.getElementsByTagName("head")[0].innerHTML;
+    filesKeys.forEach((cur) => {
+      const src = files[cur];
+      if (src && /\.css$/.test(src.toString())) {
+        heatStr += `<link rel="stylesheet" href="${src}?v=${Date.now()}" />`;
+      }
+      if (src && /\.ico$/.test(src.toString())) {
+        heatStr += `<link rel="icon" href="${src}">`;
+      }
+    });
+    document.getElementsByTagName("head")[0].innerHTML = heatStr;
+    this.state.isLogin = baseConfig.getLoginState() || false;
+  }
+  mounted() {
+    this.state.defaultIndex = this.$route.path;
+  }
+  /** 方法 */
+  /** 接收基础数据 */
+  commonDatas(msg: any) {
+    const [res] = msg.detail;
+    this.state.loading = true;
+    /** 授权 */
+    if (
+      res.SessionState &&
+      res.SessionState.auth &&
+      res.SessionState.auth.grantedPolicies
+    ) {
+      this.$store.commit("setBaseDataApi", {
+        key: "grantedPolicies",
+        value: res.SessionState.auth.grantedPolicies,
+      });
+    }
+    /** 部门人员数据 */
+    if (res.organizationUsers) {
+      this.$store.commit("setBaseDataApi", {
+        key: "organizationUsers",
+        value: res.organizationUsers.items,
+      });
+    }
+    /** 部门数据 */
+    if (res.organizationUnit) {
+      this.$store.commit("setBaseDataApi", {
+        key: "organizationUnit",
+        value: res.organizationUnit,
+      });
+    }
+    /** 人员数据 */
+    if (res.users) {
+      this.$store.commit("setBaseDataApi", {
+        key: "users",
+        value: res.users.items,
+      });
+    }
+    /** 严重等级 */
+    if (res.severityLevel) {
+      this.$store.commit("setBaseDataApi", {
+        key: "severityLevel",
+        value: res.severityLevel,
+      });
+    }
+    // /** 基础数据 */
+    // if (res.baseData && res.baseData.items) {
+    //   const data: any[] = res.baseData.items;
+    //   // 资产分类
+    //   const assetTypes = data.filter(val => val.category == "AssetCategory");
+    //   this.$store.commit("setBaseDataApi", {
+    //     key: "assetTypes",
+    //     value: assetTypes
+    //   });
+    //   // 位置
+    //   const positions = data.filter(val => val.category == "positions");
+    //   this.$store.commit("setBaseDataApi", {
+    //     key: "positions",
+    //     value: positions
+    //   });
+    //   // 分组
+    //   const grids = data.filter(val => val.category == "AlertGroup");
+    //   this.$store.commit("setBaseDataApi", {
+    //     key: "grids",
+    //     value: grids
+    //   });
+    // }
+  }
+  error() {
+    this.state.loading = true;
+    // console.log("获取基础信息错误");
+  }
+  /** 监听 */
+  @Watch("$route.path", { deep: true })
+  ondata(val: string) {
+    this.state.defaultIndex = val || "/";
+  }
+}
+</script>
+
+<style lang="scss">
+body,
+html {
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: none;
+  &:link {
+    color: #476ef3;
+  }
+  a:visited {
+    color: #551a8b;
+  }
+  a:hover {
+    color: #335ff7;
+  }
+  a:active {
+    color: #0000ff;
+  }
+}
+.index {
+  background: url("/publicData/images/bg.png ") center no-repeat;
+  background-size: 100% 100%;
+  font-family: "SourceHanSansCN-Normal", "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #333333;
+  font-size: 12px;
+}
+</style>
+<style lang="scss" scoped>
+.index {
+  .el-menu {
+    background: none;
+    border: none;
+  }
+  .body {
+    .left {
+      box-sizing: border-box;
+      border-right: 1px solid #e6e6e6;
+      position: relative;
+      .action-btn {
+        position: absolute;
+        bottom: 0;
+        right: 6px;
+      }
+    }
+  }
+}
+</style>