htui-yllkbz 1.1.10 → 1.1.14

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.1.10",
+  "version": "1.1.14",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",
   "private": false,
   "files": [
     "lib/**",
-    "types"
+    "types",
+    "src"
   ],
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-15 14:41:40
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-25 11:45:18
+-->
+<template>
+  <div id="app">
+    <SelectTable :width="200"
+                 :columns="[]"
+                 :config="JSON.stringify({
+           key: 'code',
+           disabled:false,
+           clearable:true,
+           value:undefined,
+           name:'id',
+           ajax:{
+          type:'get',
+          url: '/asset-model/api/app/asset-model-instance',
+           },  
+         text:'name',
+         })"></SelectTable>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import SelectTable from "@/packages/SelectTable/index.vue";
+@Component({
+  components: { SelectTable },
+})
+export default class App extends Vue {
+  /** 生命周期 */
+  created() {
+    // 动态加载引用文件
+    const files = this.$store.getters.getBaseData("files");
+    const filesKeys = 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;
+  }
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: "SourceHanSansCN-Normal", "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #505050;
+  font-size: 14px;
+}
+body {
+  font-family: "SourceHanSansCN-Normal";
+  font-size: 14px;
+}
+</style>

package/src/main.ts

@@ -0,0 +1,63 @@
+import Vue from "vue";
+import App from "./App.vue";
+import VueRouter from "vue-router";
+import routes from "./router";
+import store from "./store";
+import ElementUI from "element-ui";
+import "./styles.scss";
+import { _axios, baseConfig } from "vue-kst-auth";
+// import axios from "axios";
+Vue.use(ElementUI);
+Vue.use(VueRouter);
+
+/** 设置axios返回类型 */
+Vue.config.productionTip = false;
+/** 获取配置文件 */
+_axios.get(`${process.env.BASE_URL}/baseConfig.json`).then((res: any) => {
+  /** 将配置文件转换赋值 */
+  store.commit("setBaseData", res.data);
+
+  const router = new VueRouter({
+    mode: "history",
+    base: res.data.baseUrl,
+    routes
+  });
+  router.beforeEach((to: any, from: any, next: any) => {
+    /* 路由发生变化修改页面meta */
+    if (to.meta.content) {
+      const head = document.getElementsByTagName("head");
+      const meta = document.createElement("meta");
+      meta.content = to.meta.content;
+      head[0].appendChild(meta);
+    }
+    /* 路由发生变化修改页面title */
+    if (to.meta.title) {
+      document.title = to.meta.title;
+    }
+    if (baseConfig.getLoginState() || /login/.test(to.path)) {
+      // 授权配置
+      baseConfig.setOAuthConfig(store.getters.getBaseData("oAuthConfig"));
+      baseConfig.setLoginTitle(store.getters.getBaseData("enterpriseName")); // 企业名称
+      // 设置验证租户有效性地址
+      baseConfig.setIsTenantAvailable(
+        store.getters.getBaseData("isTenantAvailable")
+      );
+      // 设置登录地址
+      baseConfig.setLoginUrl(store.getters.getBaseData("loginUrl"));
+      // 设置获取当前登录租户相关信息地址
+      baseConfig.setcurrentLoginInfoUrl(
+        store.getters.getBaseData("currentLoginInfoUrl")
+      );
+      next();
+    } else {
+      next(false);
+      next("/login");
+    }
+  });
+
+  new Vue({
+    router,
+    store,
+    render: h => h(App)
+  }).$mount("#app");
+});

package/src/packages/SelectTable/CommonTable.vue

@@ -0,0 +1,241 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-15 14:50:56
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-25 11:20:02
+-->
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-11 11:23:24
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-14 16:03:32
+-->
+<template>
+  <div v-loading="state.loading">
+    <header>
+      <el-input :placeholder="searchPlaceholder||请输入关键字查询"
+                class="htui-search"
+                v-model="state.filterData.Filter"></el-input>
+    </header>
+    <article>
+      <el-table ref="comTable"
+                :height="confige.table&&confige.table.height?confige.table.height:250"
+                :row-key="confige.table&&confige.table.rowkey?confige.table.rowkey:'id'"
+                :data="dataSource"
+                tooltip-effect="dark"
+                @row-click="rowClick"
+                style="width: 100%">
+        <el-table-column width="55">
+          <template slot-scope="{row}">
+            <el-checkbox @click.native.prevent
+                         :value="state.checkObj&&state.checkObj.id===row.id"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="序号"
+                         width="55">
+          <template slot-scope="scope">
+            {{(state.filterData.currentPage-1)*state.filterData.MaxResultCount+(scope.$index+1)}}
+          </template>
+        </el-table-column>
+        <el-table-column :label="item.title"
+                         :key='item.key'
+                         v-for="item in columns"
+                         :show-overflow-tooltip="true"
+                         :prop="item.key"
+                         :width="item.width||120">
+        </el-table-column>
+
+      </el-table>
+    </article>
+    <footer>
+      <el-row>
+        <el-col :span="24">
+          <p style="width:90px;float:left">共{{dataSource.length}}条</p>
+
+          <el-pagination v-if="false"
+                         @current-change="handleCurrentChange"
+                         @size-change="handelSizeChange"
+                         :page-sizes="[10, 20, 50, 100]"
+                         :current-page="state.filterData.currentPage"
+                         :page-size="state.filterData.MaxResultCount"
+                         layout="total, sizes, prev, pager, next, jumper"
+                         :total="state.filterData.totalCount">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </footer>
+  </div>
+</template>
+<script lang='ts'>
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { _axios } from "vue-kst-auth";
+import { AxiosRequestConfig } from "axios";
+import { Column, ConfigProp } from "@/packages/type";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** table数据 */
+  dataSource: any[];
+  /** 是否展示分页 */
+  showPage: boolean;
+  filterData: {
+    currentPage: number;
+    MaxResultCount: number;
+    SkipCount: number;
+    totalCount: number;
+    Filter: string;
+  };
+
+  checkObj?: any;
+}
+
+@Component
+export default class Index extends Vue {
+  /** 默认的table头 */
+  @Prop() columns!: Column[];
+  /**  同原生placeholder */
+  @Prop() searchPlaceholder!: string;
+  /** 相关配置信息 */
+  @Prop() confige!: ConfigProp;
+  /** 相关配置信息 */
+  @Prop() visible!: boolean;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    dataSource: [],
+    showPage: true,
+    filterData: {
+      currentPage: 1,
+      Filter: "",
+      MaxResultCount: 1000,
+      SkipCount: 0,
+      totalCount: 0,
+    },
+    checkObj: undefined,
+  };
+  /** 生命周期 */
+  created() {
+    this.getDataSource();
+  }
+  /** 方法 */
+  /** 改变输入框 */
+  // handelChange() {
+  //   this.state.filterData.SkipCount = 0;
+  //   this.state.filterData.currentPage = 1;
+  //   this.getDataSource();
+  // }
+
+  /**   用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） */
+  rowClick(row: any) {
+    const { checkObj } = this.state;
+    if (checkObj && checkObj.id === row.id) {
+      this.state.checkObj = undefined;
+    } else {
+      this.state.checkObj = row;
+    }
+    this.$emit("callback", this.state.checkObj, "click");
+  }
+  /** 此处进行分页处理 */
+
+  topage(res: any) {
+    /** 此处不分页 */
+    if (Array.isArray(res)) {
+      this.state.dataSource = res;
+    } else if (res.items && res.items.length) {
+      this.state.dataSource = res.items;
+      this.state.filterData.totalCount = res.totalCount;
+    } else {
+      this.state.dataSource = [];
+    }
+    this.toFindData();
+  }
+  clearCheck() {
+    this.state.checkObj = undefined;
+    this.$emit("callback", this.state.checkObj);
+  }
+  /**  去查找默认值*/
+  toFindData() {
+    const { name, value } = this.confige;
+    const { dataSource } = this.state;
+    const findIndex = dataSource.findIndex(
+      (item) => item[name ?? "id"] === value
+    );
+    if (dataSource.length) {
+      this.state.checkObj = dataSource[findIndex];
+    }
+    this.$emit("callback", this.state.checkObj);
+  }
+
+  /** 翻页 */
+  handleCurrentChange(val: number) {
+    this.state.filterData.currentPage = val || 1;
+    const { MaxResultCount = 0, currentPage } = this.state.filterData;
+    this.state.filterData.SkipCount = (currentPage - 1) * MaxResultCount;
+    this.getDataSource();
+  }
+  /** 更新每页条数 */
+  handelSizeChange(val: number) {
+    this.state.filterData.currentPage = 1;
+    this.state.filterData.MaxResultCount = val;
+    const { MaxResultCount = 0, currentPage } = this.state.filterData;
+    this.state.filterData.SkipCount = (currentPage - 1) * MaxResultCount;
+    this.getDataSource();
+  }
+  /** 监听 */
+  /** 计算属性 */
+  get dataSource() {
+    const { filterData, dataSource } = this.state;
+    const data = filterData.Filter;
+    return dataSource.filter((item) => JSON.stringify(item).includes(data));
+  }
+  @Watch("confige")
+  getDataSource() {
+    const { ajax } = this.confige;
+    const { type = "get", url, params, data } = ajax;
+
+    this.state.loading = true;
+    if (type === "get") {
+      const param: AxiosRequestConfig = {
+        params: { ...this.state.filterData, ...params },
+      };
+      _axios
+        .get(url, {
+          ...param,
+        })
+        .then((res) => {
+          this.topage(res.data);
+        })
+        .catch(() => {
+          this.$notify.error("请求失败");
+        })
+        .finally(() => {
+          this.state.loading = false;
+        });
+    } else {
+      const param: AxiosRequestConfig = {
+        params: { ...this.state.filterData, ...params },
+        data: { ...this.state.filterData, ...data },
+      };
+      _axios
+        .post(url, {
+          ...param,
+        })
+        .then((res) => {
+          this.topage(res.data);
+        })
+        .catch(() => {
+          this.$notify.error("请求失败");
+        })
+        .finally(() => {
+          this.state.loading = false;
+        });
+    }
+    //this._ax  --asset-model/api/app/asset-model-instance
+  }
+}
+</script>
+<style lang='scss' scoped></style>

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,190 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-11 11:06:51
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-29 18:25:09
+-->
+<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";
+import ElementUI from "element-ui";
+Vue.use(ElementUI);
+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;
+}