newtv-ui-3.0 0.0.1

package/packages/form/src/form.js

@@ -0,0 +1,46 @@
+export const formProps = {
+  data: {
+    type: Array,
+    default: [],
+  },
+  form: {
+    type: Object,
+    default: () => {},
+  },
+  labelWidth: {
+    type: String,
+    default: '90px',
+  },
+  // 表单域标签的位置
+  labelPosition: {
+    type: String,
+    default: 'right',
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  column: {
+    type: Number,
+    default: 0,
+  },
+  edit: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export const initTypeValue = {
+  input: '',
+  textarea: '',
+  select: '',
+  radio: '',
+  checkbox: [],
+  tag: [],
+  datePicker: '',
+}
+
+export default {
+  formProps,
+  initTypeValue,
+}

package/packages/form/src/form.vue

@@ -0,0 +1,233 @@
+<script>
+  import { defineComponent, reactive, ref, toRef, toRefs } from 'vue'
+  import { formProps, initTypeValue } from './form.js'
+  import FormItem from './form-item.vue'
+  export default defineComponent({
+    name: 'fgForm',
+    props: formProps,
+    components: { FormItem },
+    setup(__props, { emit }) {
+      const props = __props
+
+      const form = props.form
+
+      const rules = reactive({})
+
+      let formData = props.data
+
+      formData.forEach((item) => {
+        if (item.rules) {
+          rules[item.props] = item.rules
+        }
+      })
+      /* -------------- tagFn ./S -------------- */
+      const addTag = (key, tag) => {
+        let inputValueArr = tag.split(' ')
+        for (var i in inputValueArr) {
+          if (form[key].indexOf(inputValueArr[i]) == -1 && inputValueArr[i] !== '') {
+            form[key].push(inputValueArr[i])
+          }
+        }
+        // form[key].push(tag)
+      }
+
+      const deleteTag = (key, tag) => {
+        form[key].splice(form[key].indexOf(tag), 1)
+        emit('deleteTag', key, tag)
+      }
+
+      /* -------------- tagFn ./E -------------- */
+
+      /* -------------- 表单相关方法 ./S -------------- */
+      // 获取form值
+      const getFormDate = () => {
+        return form
+      }
+
+      const fgFormRef = ref(null)
+      // 表单验证
+      const validate = (cb) => {
+        fgFormRef.value.validate((valid) => {
+          if (valid) {
+            cb && cb(valid)
+          } else {
+            cb && cb(null)
+          }
+        })
+      }
+
+      // 单独表单验证
+      const validateField = (options, cb) => {
+        fgFormRef.value.validateField(options, (valid) => {
+          if (valid) {
+            cb && cb(valid)
+          } else {
+            cb && cb(false)
+          }
+        })
+      }
+
+      const resetFields = () => {
+        fgFormRef.value.resetFields()
+      }
+      const clearValidate = (data) => {
+        fgFormRef.value.clearValidate(data)
+      }
+      const handleChange = (val, prop, event) => {
+        emit('change', val, prop, event)
+      }
+      const selectRemoveTag = (val, prop) => {
+        emit('selectRemoveTag', val, prop)
+      }
+
+      /* -------------- 表单相关方法 ./E -------------- */
+
+      return {
+        inline: props.inline,
+        labelWidth: props.labelWidth,
+        labelPosition: props.labelPosition,
+        column: props.column,
+        edit: toRef(props, 'edit'),
+        form: toRef(props, 'form'),
+        rules,
+        formData,
+        addTag,
+        deleteTag,
+        getFormDate,
+        validate,
+        fgFormRef,
+        validateField,
+        handleChange,
+        resetFields,
+        selectRemoveTag,
+        clearValidate,
+      }
+    },
+  })
+</script>
+
+<template>
+  <el-form
+      ref="fgFormRef"
+      class="fg-form"
+      :class="{ 'view-form': edit }"
+      :inline="column > 0 ? false : inline"
+      :label-width="labelWidth"
+      :label-position="labelPosition"
+      :model="form"
+      :rules="rules"
+      :disabled="edit"
+  >
+    <el-row
+        :gutter="20"
+        v-if="column > 0"
+    >
+      <el-col
+          v-for="(item, key) in formData"
+          :key="`fgFormItem${key}`"
+          :span="item.span || 24 / column"
+          v-show="!item.isHide"
+      >
+        <slot v-if="item.type == 'split'">
+          <h6
+              class="form_split"
+              v-if="!item.template"
+          >{{ item.label }}</h6>
+          <div
+              class="form_split"
+              v-else
+              v-html="item.template"
+          ></div>
+        </slot>
+        <slot
+            v-else-if="item.type == 'slot'"
+            :name="item.props"
+            :item="item"
+        ></slot>
+        <form-item
+            v-else
+            :key="`fgFormItem${key}`"
+            :item="item"
+            :form="form"
+            :edit="edit"
+            @addTag="addTag"
+            @deleteTag="deleteTag"
+            @change="handleChange"
+            @selectRemoveTag="selectRemoveTag"
+        ></form-item>
+      </el-col>
+    </el-row>
+    <template v-else>
+      <template
+          v-for="(item, key) in formData"
+          :key="`fgFormItem${key}`"
+      >
+        <slot v-if="!item.isHide && item.type == 'split'">
+          <h6
+              class="form_split"
+              v-if="!item.template"
+          >{{ item.label }}</h6>
+          <div
+              class="form_split"
+              v-else
+              v-html="item.template"
+          ></div>
+        </slot>
+        <slot
+            v-else-if="!item.isHide && item.type == 'slot'"
+            :name="item.props"
+            :item="item"
+        ></slot>
+        <form-item
+            v-else-if="!item.isHide"
+            :item="item"
+            :key="`fgFormItem${key}`"
+            :form="form"
+            :edit="edit"
+            @addTag="addTag"
+            @deleteTag="deleteTag"
+            @change="handleChange"
+            @selectRemoveTag="selectRemoveTag"
+        ></form-item>
+      </template>
+    </template>
+  </el-form>
+</template>
+
+<style lang="scss">
+  .view-form {
+    .el-input.is-disabled .el-input__inner,
+    .el-textarea.is-disabled .el-textarea__inner,
+    .el-select .el-input.is-disabled .el-input__inner:hover,
+    .el-input.is-disabled .el-input__wrapper,
+    .el-input.is-disabled .el-input__wrapper:hover,
+    .el-select .el-input.is-disabled .el-input__wrapper:hover {
+      background: transparent;
+      box-shadow: none;
+      cursor: default;
+    }
+    .el-select .el-input.is-disabled .el-select__caret,
+    .el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label-wrap
+    > .el-form-item__label:before,
+    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
+    .el-input__prefix {
+      display: none;
+    }
+    .is-disabled.is-text {
+      padding: 8px 0 8px 11px;
+      margin-left: 0;
+    }
+    .el-button.is-disabled,
+    .el-button.is-disabled:focus,
+    .el-button.is-disabled:hover {
+      cursor: default;
+    }
+    .el-form-item {
+      margin-bottom: 0;
+    }
+    .el-form-item__label {
+      color: #74767a;
+    }
+  }
+</style>

package/packages/icon-tips/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import fgIconTips from './src/icon-tips.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+fgIconTips.install = function (Vue) {
+  Vue.component(fgIconTips.name, fgIconTips)
+}
+
+// 默认导出组件
+export default fgIconTips

package/packages/icon-tips/src/icon-tips.vue

@@ -0,0 +1,49 @@
+<script>
+import { defineComponent, ref, nextTick, toRef, watch } from 'vue'
+import { InfoFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'fgIconTips',
+  components: { InfoFilled },
+  props: {
+    iconTooltipContent: {
+      type: String,
+      default: '',
+    },
+    iconTooltipPlacement: {
+      type: String,
+      default: 'top',
+    },
+    iconTooltipEffect: {
+      type: String,
+      default: 'light',
+    },
+    rawContent: {
+      type: Boolean,
+      default: true,
+    },
+  },
+})
+</script>
+
+<template>
+  <el-tooltip
+    class="fg-icon-tooltip"
+    :content="iconTooltipContent"
+    :placement="iconTooltipPlacement"
+    :effect="iconTooltipEffect"
+    :raw-content="rawContent"
+  >
+    <el-icon class="fg-icon-tip">
+      <InfoFilled />
+    </el-icon>
+  </el-tooltip>
+</template>
+
+<style scoped>
+.fg-icon-tip.el-icon {
+  color: #fa983e;
+  margin-left: 5px;
+}
+</style>

package/packages/index.js

@@ -0,0 +1,49 @@
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+import './assets/iconfont/iconfont.css'
+
+import fgMenu from './menu/src/menu.vue'
+import fgTable from './table/src/table.vue'
+import fgCard from './cardTable/src/cardTable.vue'
+import fgPagination from './pagination/src/pagination.vue'
+import fgForm from './form/src/form.vue'
+import fgTag from './tags/src/tag.vue'
+import fgAvatarUpload from './avatar-upload/src/upload.vue'
+import fgIconTips from './icon-tips/src/icon-tips.vue'
+
+const components = [fgMenu, fgForm, fgTable, fgCard, fgPagination, fgTag, fgAvatarUpload, fgIconTips]
+
+const install = (app, options) => {
+  app.use(ElementPlus, { size: 'default', zIndex: 300, locale: zhCn })
+  // 判断是否安装
+  if (install.installed) return
+  // 遍历注册全局组件
+  components.map((component) => app.component(component.name, component))
+
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+}
+
+// 判断是否是直接引入文件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  // 以下是具体的组件列表
+  fgMenu,
+  fgTable,
+  fgCard,
+  fgPagination,
+  fgForm,
+  fgTag,
+  fgAvatarUpload,
+  fgIconTips,
+  ...Object.values(ElementPlusIconsVue)
+}

package/packages/menu/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import fgMenu from './src/menu.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+fgMenu.install = function (Vue) {
+  Vue.component(fgMenu.name, fgMenu)
+}
+
+// 默认导出组件
+export default fgMenu

package/packages/menu/src/menu.js

@@ -0,0 +1,27 @@
+export const menuProps = {
+  menuList: {
+    type: Array,
+    default: [],
+  },
+  isCollapse: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: String,
+    default: '/',
+  },
+  defaultOpeneds: {
+    type: [Array, Object],
+    default: null,
+  },
+  //我的工作台禁止折叠
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export default {
+  menuProps,
+}

package/packages/menu/src/menu.vue

@@ -0,0 +1,84 @@
+<script>
+import { defineComponent, reactive, toRef, watch, ref } from 'vue'
+import { menuProps } from './menu.js'
+import SubMenuItem from './sub-item.vue'
+
+export default defineComponent({
+  name: 'fgMenu',
+  props: menuProps,
+  components: {
+    SubMenuItem,
+  },
+  setup(__props) {
+    const menus = ref(null)
+    const props = __props
+    // const state = reactive(props)
+
+    /* watch(props, (newData) => {
+      state.active = newData.active
+    }) */
+    const handleClose = (key, keyPath) => {
+      if (props.isOpen) {
+        menus.value.open(keyPath)
+      }
+    }
+    return {
+      menus,
+      handleClose,
+      menuList: __props.menuList,
+      active: toRef(props, 'active'),
+      isCollapse: toRef(props, 'isCollapse'),
+      defaultOpeneds: __props.defaultOpeneds,
+      isOpen: toRef(props, 'isOpen'),
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="fg-menu">
+    <slot name="title"></slot>
+    <div class="scroll">
+      <el-scrollbar>
+        <el-menu
+          :default-active="active"
+          :collapse="isCollapse"
+          :collapse-transition="false"
+          :default-openeds="defaultOpeneds"
+          router
+          ref="menus"
+          @close="handleClose"
+        >
+          <sub-menu-item
+            v-for="(item, index) in menuList"
+            :key="`menu${index}`"
+            :item="item"
+            :path="item.path"
+          />
+        </el-menu>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.fg-menu {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .scroll {
+    flex: 1;
+    overflow: auto;
+  }
+  .el-menu {
+    border: 0;
+  }
+  .iconfont {
+    padding-right: 10px;
+  }
+  .mark * {
+    vertical-align: top;
+    margin-top: 3px;
+  }
+}
+</style>

package/packages/menu/src/sub-item.vue

@@ -0,0 +1,108 @@
+<script>
+  import { defineComponent, reactive } from 'vue'
+
+  export default defineComponent({
+    name: 'subMenuItem',
+    props: {
+      path: {
+        type: String,
+        default: '',
+      },
+      item: {
+        type: Object,
+        default: () => {},
+      },
+    },
+    setup(__props, context) {
+      // 检测是否显示
+      const isHidden = (item) => {
+        if (item.hidden || (item.meta && item.meta.hidden)) {
+          return false
+        }
+        return true
+      }
+
+      // 检测是否存在子目录
+      const hasChildren = (children = [], parent) => {
+        const showingChildren = children.filter((item) => {
+          if (item.hidden) {
+            return false
+          } else {
+            return true
+          }
+        })
+
+        if (!parent.meta || (parent.meta && !parent.meta.title)) {
+          return true
+        }
+
+        if (showingChildren.length === 0) {
+          return true
+        }
+        return false
+      }
+
+      return {
+        isHidden,
+        hasChildren,
+      }
+    },
+  })
+</script>
+
+<template>
+  <el-sub-menu
+      v-if="!item.hidden && !hasChildren(item.children, item)"
+      :index="path"
+  >
+    <template #title>
+      <i
+          class="iconfont"
+          :class="item.icon"
+      ></i>
+      <span>
+        {{ item.meta && item.meta.title }}
+      </span>
+      <el-badge
+          v-if="item.mark"
+          class="mark"
+          :value="item.mark"
+          :max="99"
+      />
+    </template>
+
+    <template
+        v-for="child in item.children"
+        :key="child.path"
+    >
+      <sub-menu-item
+          v-if="!item.hidden"
+          :item="child"
+          :path="child.path"
+      />
+    </template>
+
+  </el-sub-menu>
+  <template v-else>
+    <el-menu-item
+        v-if="!item.hidden"
+        :index="path"
+    >
+      <i
+          class="iconfont"
+          :class="item.icon"
+      ></i>
+      <template #title>
+        <span>
+          {{ item.meta && item.meta.title }}
+        </span>
+        <el-badge
+            v-if="item.mark"
+            class="mark"
+            :value="item.mark"
+            :max="99"
+        />
+      </template>
+    </el-menu-item>
+  </template>
+</template>

package/packages/pagination/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import fgPagination from './src/pagination.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+fgPagination.install = function (Vue) {
+  Vue.component(fgPagination.name, fgPagination)
+}
+
+// 默认导出组件
+export default fgPagination