fit2cloud-ui-plus 0.0.1-beta.0 → 0.0.1-beta.3

package/examples/layout/components/AppHeader.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="header-wrapper">
+    <div class="logo">
+      <img src="../../assets/logo.png" height="25" alt="" />
+    </div>
+    <div class="right">
+      <span class="version">{{ PackageJSON.version }}</span> 
+      <a href="https://github.com/fit2cloud-ui/fit2cloud-ui" target="_blank"><img src="../../assets/github.png" height="30" alt="" /></a>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import PackageJSON from "../../../package.json";
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.header-wrapper {
+  // background-color: #fff;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  .logo {
+    margin-left: 15px;
+  }
+  .version {
+    font-size: 16px;
+    margin-right: 25px;
+    vertical-align: super;
+    color: #ffffff;
+  }
+}
+</style>
+

package/examples/layout/components/Sidebar.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-scrollbar>
+    <div class="sidebar" v-for="(item, index) in routes" :key="index">
+      <h1>{{ item.name }}</h1>
+      <ul v-for="(child, i) in item.children" :key="i">
+        <li
+          :class="{ active: showPath === Path(child.path, item.path) }"
+          @click="toPath(child.path, item.path)"
+        >
+          {{ child.name }}
+        </li>
+      </ul>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { routes } from "../../router/index";
+
+const route = useRoute();
+const router = useRouter();
+const showPath = ref("");
+
+onMounted(() => {
+  showPath.value = route.path || "/";
+});
+
+function Path(path: String, parentPath: String) {
+  return `${parentPath}/${path}`;
+}
+
+function toPath(path: String, parentPath: String) {
+  showPath.value = Path(path, parentPath);
+  router.push(Path(path, parentPath));
+}
+</script>
+<style lang="scss" scoped>
+$themeColor: #2d61a2;
+.sidebar {
+  h1 {
+    font-size: 16px;
+    margin-top: 20px;
+    padding-left: 10px;
+  }
+  ul {
+    line-height: 35px;
+    color: #666666;
+    // margin-left:25px;
+    li {
+      cursor: pointer;
+      padding: 5px 0;
+      padding-left: 10px;
+      &:hover {
+        color: $themeColor;
+      }
+    }
+    .active {
+      background-color: #e6f7ff;
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        border-left: 3px solid $themeColor;
+      }
+    }
+  }
+}
+</style>

package/examples/layout/index.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import AppHeader from "./components/AppHeader.vue";
+import Sidebar from "./components/Sidebar.vue";
+</script>
+
+<template>
+  <div class="app-wrapper">
+    <div class="app-header">
+      <app-header>header</app-header>
+    </div>
+    <div class="app-container">
+      <el-scrollbar class="page-component__scroll" ref="componentScrollBar">
+        <div class="app-main">
+          <sidebar class="sidebar-container" />
+          <div class="main-wrapper">
+            <router-view></router-view>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "./layout.scss" as *;
+.app-wrapper {
+  height: 100%;
+  width: 100%;
+}
+.app-header {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  background-color: #004a71;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
+  z-index: 1500;
+}
+.app-container {
+  height: 100%;
+  padding: 0;
+}
+.app-main {
+  width: 1140px;
+  margin: 0 auto;
+}
+
+.main-wrapper {
+
+  // width: 100%;
+  :v-deep.page-container {
+    position: relative;
+  }
+}
+</style>

package/examples/layout/layout.scss

@@ -0,0 +1,75 @@
+$headerHeight: 70px;
+$sideBarWidth: 270px;
+$themeColor: #2d61a2;
+
+.header-wrapper {
+  height: $headerHeight;
+  width: 1140px;
+  padding: 0;
+  margin: 0 auto;
+  // line-height: $headerHeight;
+  // border-bottom: 1px solid #dcdfe6;
+}
+
+.page-component__scroll {
+  height: calc(100vh - #{$headerHeight});
+  margin-top: $headerHeight;
+}
+
+.sidebar-container {
+  transition: width 0.28s;
+  width: $sideBarWidth !important;
+  height: calc(100% - #{$headerHeight});
+  position: fixed;
+  top: $headerHeight;
+  bottom: 0;
+  z-index: 88;
+  overflow: hidden;
+  border-right: 1px solid #f0f0f0;
+}
+
+.main-wrapper {
+  padding: 32px 50px 50px $sideBarWidth + 30px;
+}
+
+.attributesButton {
+  color: $themeColor;
+}
+
+@media (max-width: 1200px) {
+
+  .header-wrapper {
+    width: 100%;
+  }
+
+  .app-main {
+    width: 100% !important;
+  }
+
+  .attributesButton {
+    right: 0;
+  }
+
+  .is-fixed {
+    right: 0;
+  }
+}
+
+@media (min-width: 1600px) {
+
+  .header-wrapper {
+    width: 80%;
+  }
+
+  .app-main {
+    width: 80% !important;
+  }
+
+  .attributesButton {
+    right: 8%;
+  }
+
+  .is-fixed {
+    right: 10%;
+  }
+}

package/examples/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+// 整体引入
+import Fit2CloudPlus from '@/index'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import router from "./router/index";
+// import pages from './pages/index'
+import CodeExample from "./components/CodeExample.vue";
+import "github-markdown-css";
+
+// UI样式
+import '@/styles/index.scss';
+
+const app = createApp(App);
+// pages(app)
+app.use(router).use(ElementPlus, { size: 'default', zIndex: 3000 })
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+app.use(Fit2CloudPlus);
+app.component('code-example', CodeExample)
+
+
+app.mount("#app");

package/examples/markdown/getting-started.md

@@ -0,0 +1,38 @@
+# 快速上手
+
+FIT2CLOUD UI 是基于Element UI二次开发的Vue组件库，提供企业软件开发时常用的组件，过滤器，指令等
+
+## 安装
+
+推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
+
+```
+npm install fit2cloud-ui
+```
+
+使用时需要安装Element UI
+
+```
+npm install element-ui
+```
+
+
+## 完整引入
+
+在 main.js 中写入以下内容：
+
+```
+import Vue from 'vue';
+import ElementUI from 'element-ui'
+import Fit2CloudUI from 'fit2cloud-ui';
+import "fit2cloud-ui/src/styles/index.scss"; // 已经包含了element ui的scss
+import App from './App.vue';
+
+Vue.use(ElementUI);
+Vue.use(Fit2CloudUI);
+
+new Vue({
+ el: '#app',
+ render: h => h(App)
+});
+```

package/examples/pages/filter-bar/demo/BaseFilterBar.vue

@@ -0,0 +1,70 @@
+<demo>基本用法</demo>
+<template>
+  <div>
+    <div>
+      <h4>
+        1、使用slot
+      </h4>
+      <FuFilterBar ref="filterRef" @exec="exec" :result-count="count" size="small">
+        <template #default>
+          <FuFilterSelect size="small" label="事件类型" field="type" :options="options" multiple clearable filterable use-select-all/>
+          <FuFilterDate size="small" label="操作日期" field="date" />
+          <FuFilterDateTime size="small" label="操作时间" field="datetime" />
+        </template>
+      </FuFilterBar>
+      <h4>
+        1、使用components传参
+      </h4>
+      <fu-filter-bar ref="filterRef" @exec="exec" :result-count="count" size="small" :components="components" />
+    </div>
+    <pre class="condition_display">{{ condition }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+const options = [{ label: "选项1", value: 1 },
+{ label: "选项2", value: 2 },
+{ label: "选项3", value: 3 },
+{ label: "选项4", value: 4 },
+{ label: "选项5", value: 5 },
+{ label: "选项6", value: 6 },
+{ label: "选项7", value: 7 },
+{ label: "选项8", value: 8 },
+{ label: "选项9", value: 9 },
+{ label: "选项10", value: 10 },
+]
+const components = [
+  {
+    field: "groups",
+    label: "区域",
+    component: "FuFilterSelect",
+    options: [{ label: "北区", value: "1" }, { label: "南区", value: "2" }, { label: "东区", value: "3" }],
+    multiple: true,
+    clearable: true,
+    filterable: true
+  },
+  {
+    field: "date",
+    label: "操作日期",
+    component: "FuFilterDate"
+  }
+]
+
+const count = ref(0)
+const condition = ref({})
+
+function exec(c: any) {
+  condition.value = c
+  count.value = Object.keys(condition).length * 10
+}
+</script>
+
+<style lang="scss" scoped>
+.condition_display {
+  width: 100%;
+  overflow-y: auto;
+  background-color: #f5f9ff;
+}
+</style>

package/examples/pages/filter-bar/demo/SetConditionsDemo.vue

@@ -0,0 +1,66 @@
+<demo>回显条件</demo>
+<template>
+  <div>
+    <div>
+      <fu-filter-bar ref="filterRef" @exec="exec" :result-count="count" size="small">
+        <template #default>
+          <fu-filter-select size="small" label="事件类型" field="event_type" :options="options" clearable filterable />
+          <fu-filter-select size="small" label="操作用户" field="user" :options="users" multiple clearable filterable />
+          <fu-filter-date size="small" label="操作日期" field="date" />
+          <fu-filter-date-time size="small" label="操作时间" field="datetime" />
+        </template>
+      </fu-filter-bar>
+    </div>
+    <pre class="condition_display">{{ condition }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from "vue"
+const options = [{ label: "选项1", value: 1 },
+{ label: "选项2", value: 2 },
+{ label: "选项3", value: 3 },
+{ label: "选项4", value: 4 },
+{ label: "选项5", value: 5 },
+{ label: "选项6", value: 6 },
+{ label: "选项7", value: 7 },
+{ label: "选项8", value: 8 },
+{ label: "选项9", value: 9 },
+{ label: "选项10", value: 10 },
+]
+const users = [{ label: "用户1", value: 1 },
+{ label: "用户2", value: 2 },
+{ label: "用户3", value: 3 },
+{ label: "用户4", value: 4 },
+{ label: "用户5", value: 5 },
+{ label: "用户6", value: 6 },
+{ label: "用户7", value: 7 },
+{ label: "用户8", value: 8 },
+{ label: "用户9", value: 9 },
+{ label: "用户10", value: 10 },
+]
+const count = ref(0)
+const condition = ref({})
+const filterRef = ref()
+
+function init() {
+  filterRef.value?.setConditions({ user: { value: [2, 3, 4] } })
+}
+function exec(c: any) {
+  condition.value = c
+  count.value = Object.keys(c).length * 10
+}
+onMounted(() => {
+  nextTick(() => {
+    init()
+  });
+})
+</script>
+
+<style lang="scss" scoped>
+.condition_display {
+  width: 100%;
+  overflow-y: auto;
+  background-color: #f5f9ff;
+}
+</style>

package/examples/pages/filter-bar/demo/SlotDemo.vue

@@ -0,0 +1,77 @@
+<demo>插槽示例</demo>
+<template>
+  <div>
+    <div>
+      <fu-filter-bar ref="filter" @exec="exec" :result-count="count" size="small">
+        <template #tl>
+          <el-button>导出数据</el-button>
+        </template>
+        <template #default>
+          <fu-filter-select size="small" label="事件类型" field="type" :options="options" multiple clearable filterable />
+          <fu-filter-date size="small" label="操作日期" field="date" />
+          <fu-filter-date-time size="small" label="操作时间" field="datetime" />
+        </template>
+        <template #buttons>
+          <fu-table-column-select type="button" :columns="columns" size="small"/>
+        </template>
+      </fu-filter-bar>
+    </div>
+    <pre class="condition_display">{{ condition }}</pre>
+    <fu-table :data="tableData" :columns="columns">
+      <el-table-column type="selection"></el-table-column>
+      <el-table-column prop="date" label="日期" min-width="120"></el-table-column>
+      <el-table-column prop="name" label="姓名" min-width="120"></el-table-column>
+      <el-table-column prop="address" label="地址"></el-table-column>
+    </fu-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+const options = [{ label: "选项1", value: 1 },
+{ label: "选项2", value: 2 },
+{ label: "选项3", value: 3 },
+{ label: "选项4", value: 4 },
+{ label: "选项5", value: 5 },
+{ label: "选项6", value: 6 },
+{ label: "选项7", value: 7 },
+{ label: "选项8", value: 8 },
+{ label: "选项9", value: 9 },
+{ label: "选项10", value: 10 },
+]
+
+const tableData= [{
+    date: "2016-05-02",
+    name: "张三",
+    address: "北京朝阳区财富中心 0室",
+  }, {
+    date: "2016-05-04",
+    name: "张三",
+    address: "北京朝阳区财富中心 1室",
+  }, {
+    date: "2016-05-01",
+    name: "张三",
+    address: "北京朝阳区财富中心 2室",
+  }, {
+    date: "2016-05-03",
+    name: "张三",
+    address: "北京朝阳区财富中心 3室",
+  }]
+const count = ref(0)
+const condition = ref({})
+const columns= ref([])
+
+function exec(condition: any) {
+  condition.value = condition
+  count.value = Object.keys(condition).length * 10
+}
+
+</script>
+
+<style lang="scss" scoped>
+.condition_display {
+  width: 100%;
+  overflow-y: auto;
+  background-color: #f5f9ff;
+}
+</style>

package/examples/pages/filter-bar/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <!-- 一级标题 -->
+    <h1 class="component-h1">FilterBar 筛选条</h1>
+    <!-- 一级描述 -->
+    <p>搜索条，提供快速搜索，高级搜索，自定义按钮</p>
+    <!-- BaseTable内容 -->
+    <div class="component-block" v-for="(item, index) in comList" :key="index">
+      <h2>{{ item.title }}</h2>
+      <p>{{ item.titleDesc }}</p>
+      <code-example :description="item.description" :component="item.component" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseFilterBar from "./demo/BaseFilterBar.vue";
+import SetConditionsDemo from "./demo/SetConditionsDemo.vue";
+import SlotDemo from "./demo/SlotDemo.vue";
+
+const comList = [
+  {
+    title: "基本用法",
+    titleDesc: "使用FilterBar",
+    component: BaseFilterBar,
+  },
+  {
+    title: "回显条件",
+    titleDesc: "设置初始条件，搜索框自动回显",
+    component: SetConditionsDemo,
+    description: `筛选组件需要提供init和getCondition方法，如果在mounted中初始化必须使用this.$nextTick`
+  },
+  {
+    title: "插槽示例",
+    titleDesc: "可以通过插槽设置上部左侧内容、上部右侧内容",
+    component: SlotDemo,
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+.component-block {
+  margin-top: 40px;
+
+  p {
+    font-size: 14px;
+    color: #5e6d82;
+    line-height: 1.5em;
+  }
+
+  h2 {
+    font-weight: 400;
+    color: #1f2f3d;
+  }
+}
+</style>

package/examples/pages/index.ts

@@ -0,0 +1,11 @@
+/* Components */
+import type { App } from "vue";
+
+const pages = (app:App)=>{
+  const components= import.meta.globEager('./*/index.vue')
+  Object.keys(components).forEach(key => {
+    let component = components[key].default
+    app.component(component.name, component)
+  })
+}
+export default pages

package/examples/pages/read-write-switch/demo/BaseDemo.vue

@@ -0,0 +1,30 @@
+<demo>基本用法</demo>
+<template>
+  <div style="line-height: 40px;">
+    <fu-read-write-switch :data="input" v-model="write" @change="change">
+      <el-input v-model="input" @blur="blur" @keydown="keydown" />
+    </fu-read-write-switch>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+const write = ref(false)
+const input = ref("单击填写")
+
+function change(obj: any) {
+  console.log(obj)
+}
+function read() {
+  write.value = false
+}
+function blur() {
+  read()
+}
+function keydown(e: Event) {
+  const event = e as KeyboardEvent
+  if (event.key === "Enter") {
+    read()
+  }
+}
+</script>

package/examples/pages/read-write-switch/demo/CustomContentDemo.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="line-height: 40px;">
+    <fu-read-write-switch>
+      <!-- 自定义读内容 v-slot:read -->
+      <template #read>
+        <div>自定义读内容: {{ input }}</div>
+      </template>
+
+      <!-- 自定义写内容 v-slot:default -->
+      <template #default="{read}">
+        自定义写内容:
+        <el-input v-model="input" @blur="read" style="width: 200px"/>
+      </template>
+    </fu-read-write-switch>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CustomContentDemo",
+  data() {
+    return {
+      write: false,
+      input: "单击填写"
+    }
+  }
+}
+</script>

package/examples/pages/read-write-switch/demo/InputRwSwitchDemo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <fu-input-rw-switch v-model="input" placeholder="单击填写"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InputRwSwitchDemo",
+  data() {
+    return {
+      input: "单击填写"
+    }
+  }
+}
+</script>