imeik-bizui 0.0.1

package/README.md

@@ -0,0 +1,35 @@
+# imeik-imui
+
+## 安装组件库
+```
+npm install imeik-imui
+```
+
+### 使用组件库
+在main.js中引入组件库
+```
+import imui from 'imeik-imui'
+import 'imeik-imui/dist/imeik-imui.css'
+import { getToken } from '@/utils/auth'
+
+Vue.use(imui, {
+  userTokenFunc: getToken,
+  env: process.env.NODE_ENV,
+  app: process.env.VUE_APP_ID
+})
+```
+
+App.vue中
+```
+/**
+  * 通过这里把组件可能用到的属性传递过去
+  */
+setComponentsProps() {
+  this.$bizui.enums = this.enums
+  this.$bizui.enumsOptions = this.enumsOptions
+  this.$bizui.userId = this.userInfo.objectCode
+  this.$bizui.departmentCode = this.userInfo.departmentObjectCode
+  this.$bizui.employeeNo = this.userInfo.employeeNo
+  this.$bizui.userInfo = this.userInfo
+}
+```

package/dist/bizui/api/applycenter.js

@@ -0,0 +1,19 @@
+// 申请中心相关接口
+import request from '../utils/applycenterRequest.js'
+
+/**
+ * 获取有权限的基础数据
+ * /applyCenter-admin/baseData/getTagData
+ *
+ * "permissionIdentifier": "", // 权限标识
+ * "tagCode": "", // 标签code
+ *
+ * "tagValueCodeList": [] // 标签值code列表
+ */
+export function getPermissionedTagData(data) {
+  return request({
+    url: '/applyCenter-admin/baseData/getTagData',
+    method: 'post',
+    data
+  })
+}

package/dist/bizui/api/user.js

@@ -0,0 +1,24 @@
+// 用户运营平台相关接口
+import request from '../utils/userRequest.js'
+
+/**
+ * 添加文件上传信息
+ */
+export function findAliToken() {
+  return request({
+    url: '/qxcollege/admin/fileUpload/findAliToken',
+    method: 'post',
+    data: {}
+  })
+}
+
+/**
+ * 获取视频上传信息
+ */
+export function findAliVideoToken() {
+  return request({
+    url: '/qxcollege/admin/fileUpload/findAliVideoToken',
+    method: 'post',
+    data: {}
+  })
+}

package/dist/bizui/index.js

@@ -0,0 +1,86 @@
+// 导入样式
+import 'windi.css'
+import 'viewerjs/dist/viewer.css'
+
+// 导入卡片组件
+import ImCard from './src/ImCard'
+// 导入对话框组件
+import ImDialog from './src/ImDialog'
+// 导入抽屉组件
+import ImDrawer from './src/ImDrawer'
+// 导入表单组件
+import ImForm from './src/ImForm'
+// 导入分页组件
+import ImPagination from './src/ImPagination'
+// 导入搜索区域组件
+import ImSearchArea from './src/ImSearchArea'
+// 导入表格组件
+import ImTable from './src/ImTable'
+// 导入表格区域组件
+import ImTableArea from './src/ImTableArea'
+// 导入包装器组件
+import ImWrapper from './src/ImWrapper'
+// 导入带边框的表格单元格组件
+import ImTableCellWithBorder from './src/ImTableCellWithBorder'
+// 导入加载中组件
+import ImLoading from './src/ImLoading'
+// 导入卡片头部组件
+import CardHeader from './src/FormWidgets/CardHeader'
+// 导入表单分割线组件
+import FormSplit from './src/FormWidgets/FormSplit'
+// 导入固定底部组件
+import FixedBottom from './src/FormWidgets/FixedBottom'
+
+// 导入第三方库
+import VueViewer from 'v-viewer'
+
+// 表单组件也可以单独使用
+import FormComponents from './src/FormComponents/index.js'
+
+// 定义组件列表
+const components = {
+  ImWrapper,
+  ImSearchArea,
+  ImTableArea,
+  ImPagination,
+  ImForm,
+  ImTable,
+  ImDrawer,
+  ImDialog,
+  ImCard,
+  ImLoading,
+  ImTableCellWithBorder,
+  CardHeader,
+  FormSplit,
+  FixedBottom,
+  ...FormComponents
+}
+
+// 定义插件
+const ImUI = {
+  install(Vue, options = {}) {
+    // 注册全局组件
+    Object.entries(components).forEach(([name, component]) => {
+      Vue.component(name, component)
+    })
+
+    // 添加原型方法
+    Vue.prototype.$bizui = {
+      ...options
+    }
+
+    // 使用第三方插件
+    Vue.use(VueViewer, {
+      defaultOptions: {
+        zIndex: 9999 // 控制显示层级为最高
+      }
+    })
+
+    // 非生产环境下输出日志
+    if (process.env.NODE_ENV !== 'production') {
+      console.log('Vue.prototype.$imui', Vue.prototype.$imui)
+    }
+  }
+}
+
+export default ImUI

package/dist/bizui/src/FormComponents/ImBr.vue

@@ -0,0 +1,10 @@
+// 这是一个用来换行的控件,当一行不满的时候需要换行可以用它 // 配合notInForm使用
+<template>
+  <br />
+</template>
+
+<script>
+export default {
+  name: 'ImBr'
+}
+</script>

package/dist/bizui/src/FormComponents/ImButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    :style="attrs.style"
+    style="min-height: 50px; line-height: 50px; transform: translate(-12px, -17px);"
+  >
+    <el-button
+      v-for="(opt, idx) in attrs.options"
+      :key="idx"
+      v-bind="opt.attrs"
+      v-on="opt.listeners"
+    >
+      {{ opt.label }}
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImButton',
+  props: {
+    value: {
+      type: String,
+      default: undefined
+    },
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  }
+}
+</script>

package/dist/bizui/src/FormComponents/ImCascader.vue

@@ -0,0 +1,113 @@
+<template>
+  <span v-if="attrs.isView">{{ selectLabel }}</span>
+  <el-cascader
+    v-else
+    ref="cascaderRef"
+    v-model="myValue"
+    v-bind="attrs"
+    :placeholder="attrs.placeholder || `请选择${label}`"
+    v-on="listeners"
+    @change="onChange"
+  />
+</template>
+
+<script>
+export default {
+  name: 'ImCascader',
+  props: {
+    value: {
+      type: [String, Array, Number, Boolean],
+      default: undefined
+    },
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    label: {
+      type: String,
+      default() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      myValue: undefined
+    }
+  },
+  computed: {
+    selectLabel() {
+      if (!this.myValue) {
+        return '-'
+      }
+      const labels = []
+      // 判断当前是多选还是单选，两种形式获取label的方式不同
+      const isMultiple = this.attrs?.props?.multiple
+      this?.attrs?.options?.forEach((item) => {
+        if (isMultiple) {
+          if (this.myValue.includes(item.value)) {
+            labels.push(item.label)
+          }
+        } else {
+          if (item.value === this.myValue) {
+            labels.push(item.label)
+          }
+        }
+      })
+
+      return labels.join(',') || '-'
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  methods: {
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+
+        // 修复组件初始化数据默认不勾选问题
+        if (!this.myValue || !this.myValue[0]) return
+        this.$nextTick(() => {
+          if (this.attrs.props?.multiple) {
+            if (Array.isArray(this.myValue[0])) return
+            const nodes = this.$refs.cascaderRef?.panel?.checkedNodePaths
+            if (!nodes.length) return
+            this.myValue = nodes.map((group) => {
+              return group.map((item) => item.value)
+            })
+            // this.onChange(this.myValue)
+          } else if (!Array.isArray(this.myValue)) {
+            const [node] = this.$refs.cascaderRef?.getCheckedNodes()
+            if (!node) return
+            this.myValue = node.pathNodes.map((item) => item.value)
+            // this.onChange(this.myValue)
+          }
+        })
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+    onChange(value) {
+      this.$emit('select', {
+        nodes: this.$refs.cascaderRef?.getCheckedNodes() ?? [],
+        value
+      })
+      this.$emit('input', this.myValue)
+    }
+  }
+}
+</script>

package/dist/bizui/src/FormComponents/ImColorPicker.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <el-input
+      v-model="myValue"
+      :style="attrs.style || inputStyle"
+      :placeholder="attrs.placeholder"
+    >
+      <el-color-picker
+        slot="append"
+        v-model="myValue"
+        class="custom-color-picker"
+        :show-alpha="attrs.alpha"
+        :disabled="attrs.disabled"
+        size="mini"
+        @change="onChange"
+      />
+    </el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImColorPicker',
+  props: {
+    value: {
+      type: String,
+      default: undefined
+    },
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      myValue: undefined
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  methods: {
+    setMyValue() {
+      this.myValue = this.value
+    },
+
+    onChange() {
+      this.$emit('input', this.myValue)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.custom-color-picker {
+  transform: translate(0, 1px);
+}
+
+/deep/.el-color-picker--mini .el-color-picker__trigger {
+  width: 26px;
+  height: 26px;
+}
+</style>

package/dist/bizui/src/FormComponents/ImDatePicker.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="isView ? 'pickerContainer' : 'pickerForm'">
+    <span v-if="isView" class="pickerView" :title="dateLabel">
+      {{ dateLabel }}
+    </span>
+    <el-date-picker
+      v-else
+      v-model="myValue"
+      v-bind="attrs"
+      unlink-panels
+      v-on="listeners"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  name: 'ImDatePicker',
+  props: {
+    value: {
+      type: [String, Object, Array, Number, Date],
+      default: undefined
+    },
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      myValue: undefined
+    }
+  },
+  computed: {
+    isView() {
+      return this.attrs.isView
+    },
+
+    dateLabel() {
+      if (!this.myValue) {
+        return ''
+      }
+      if (Array.isArray(this.myValue)) {
+        return this.myValue.map(item => this.formatDate(item)).join(' ~ ')
+      } else {
+        return this.formatDate(this.myValue)
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  methods: {
+    formatDate(date) {
+      if (this.attrs.labelFormat) {
+        return date ? moment(date).format(this.attrs.labelFormat) : ''
+      }
+      if (['daterange', 'date'].includes(this.attrs.type)) {
+        return date ? moment(date).format('YYYY-MM-DD') : ''
+      }
+      if (['datetimerange', 'datetime'].includes(this.attrs.type)) {
+        return date ? moment(date).format('YYYY-MM-DD HH:mm:ss') : ''
+      }
+      return date
+    },
+
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+    onChange() {
+      this.$emit('input', this.myValue)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-range-editor--small.el-input__inner {
+  height: 32px !important;
+}
+.pickerContainer {
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+}
+.pickerForm {
+  height: 32px;
+}
+.pickerView {
+  display: inline-block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+}
+</style>

package/dist/bizui/src/FormComponents/ImEnumCheckboxGroup.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-checkbox-group
+    v-model="myValue"
+    v-bind="attrs"
+    v-on="listeners"
+    @change="onUpdate"
+  >
+    <el-checkbox
+      v-for="item in options"
+      :key="item.label + Math.random()"
+      :label="item.value"
+    >
+      <slot name="label" :item="item">
+        {{ item.label }}
+      </slot>
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script>
+// import { mapGetters } from 'vuex'
+export default {
+  name: 'ImEnumCheckboxGroup',
+  props: {
+    value: {
+      type: [String, Array, Number, Boolean],
+      default: undefined
+    },
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      myValue: undefined
+    }
+  },
+  computed: {
+    // ...mapGetters(['enums']),
+    enums() {
+      return this.$imui.enums
+    },
+    options() {
+      if (!this.attrs.enumKey) {
+        console.log('ImEnumSelect 组件需要在attrs里增加enumKey字段,表明使用哪个枚举值')
+        return []
+      }
+
+      const list = this.enums[this.attrs.enumKey] || []
+      // 支持传入filter进行自定义筛选
+      return this.attrs.filter ? this.attrs.filter(list) : list
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  methods: {
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+
+    onUpdate() {
+      this.$emit('input', this.myValue)
+      this.$emit('change', this.myValue)
+    }
+  }
+}
+</script>

package/dist/bizui/src/FormComponents/ImGroupSelect.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-select
+    v-model="myValue"
+    v-bind="attrs"
+    v-on="listeners"
+    @change="onUpdate"
+  >
+    <el-option-group
+      v-for="opt in attrs.options"
+      :key="opt.label + Math.random()"
+      :label="opt.label"
+    >
+      <el-option
+        v-for="optItem in opt.options"
+        :key="optItem.label + Math.random()"
+        :disabled="optItem.disabled"
+        :label="optItem.label"
+        :value="optItem.value"
+      />
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'ImGroupSelect',
+  props: {
+    value: {
+      type: [String, Array, Number, Boolean],
+      default: undefined
+    },
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      myValue: undefined
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  methods: {
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+    onUpdate() {
+      this.$emit('input', this.myValue)
+    }
+  }
+}
+</script>