byt-ui 0.0.19 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "byt-ui",
-  "version": "0.0.19",
+  "version": "0.1.0",
   "private": false,
   "description": "byt组件库",
   "author": {
@@ -35,7 +35,7 @@
     "babel-preset-env": "^1.7.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "node-sass": "4.14.1",
+    "sass": "^1.69.5",
     "sass-loader": "10.0.4",
     "vue-cli-plugin-styleguidist": "~4.45.1",
     "vue-template-compiler": "^2.6.14"
@@ -68,6 +68,6 @@
   "license": "MIT",
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "registry": "https://registry.npmjs.com/"
   }
 }

package/packages/components/basic-view/index.vue

@@ -2,7 +2,7 @@
  * @Description:
  * @Author: 王国火
  * @Date: 2022-07-12 17:47:20
- * @LastEditTime: 2023-09-13 09:50:53
+ * @LastEditTime: 2024-03-04 15:16:54
  * @LastEditors: hcm
 -->
 
@@ -43,6 +43,7 @@
         :column-config="{resizable: true}"
         :row-config="{isCurrent: true, isHover: true}"
         :show-overflow="showOverflow"
+        v-bind="vxeTableProp"
       >
         <template v-for="(column,index) in columns">
           <vxe-column
@@ -66,6 +67,7 @@
             :width="column.width"
             :title="column.label"
             :align="column.align||'center'"
+            v-bind="column.prop"
             :key="index"
           >
             <template #default="scope">
@@ -93,13 +95,14 @@
             :width="column.width"
             :title="column.label"
             :align="column.align||'center'"
+            v-bind="column.prop"
             :key="index"
           ></vxe-column>
         </template>
 
         <template #empty>
           <el-empty description="暂无数据！">
-            <el-button type="primary" @click="onSearch">重试</el-button>
+            <el-button v-if="emptyBtnShow" type="primary" @click="onSearch">重试</el-button>
           </el-empty>
         </template>
       </vxe-table>
@@ -164,8 +167,16 @@ export default {
         return []
       }
     },
+    vxeTableProp: { // vxeTableProp(会使用v-bind展开)
+      type: Object,
+      default: null
+    },
+    emptyBtnShow: {
+      type: Boolean,
+      default: true
+    },
     /** 表格列配置*/
-    columns: {
+    columns: { // column.prop(会使用v-bind展开)
       type: Array,
       required: true,
       default() {

package/packages/components/form-view/index.vue

@@ -2,12 +2,12 @@
  * @Description:
  * @Author: 王国火
  * @Date: 2022-07-13 08:46:34
- * @LastEditTime: 2023-09-13 09:54:09
+ * @LastEditTime: 2023-10-16 10:21:19
  * @LastEditors: hcm
 -->
 <!--  -->
 <template>
-  <el-form ref="form" :model="form" :inline="inline" :label-width="`${labelWidth}px`">
+  <el-form ref="form" :model="form" :inline="inline" :label-width="`${labelWidth}px`" @submit.native.prevent>
     <el-form-item :label="item.label" :key="index" v-for="(item,index) in searchList">
       <template v-if="item.type=='input' || !item.type">
         <!-- update by hcm  回车触发过滤 -->
@@ -74,10 +74,10 @@
         >
         </el-date-picker>
       </template>
-      <!-- add by hcm  加插槽 增加灵活性 -->
-      <slot name="filters"></slot>
     </el-form-item>
 
+    <!-- add by hcm  加插槽 增加灵活性 -->
+    <slot name="filters"></slot>
     <el-form-item>
       <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
       <el-button icon="el-icon-refresh-right" @click="onReset">重置</el-button>

package/packages/components/message-push-target/MessageOne.vue

@@ -0,0 +1,348 @@
+<!--
+ * @Author: hcm
+ * @Date: 2023-05-29 13:18:19
+ * @LastEditors: hcm
+ * @LastEditTime: 2024-04-10 17:09:38
+ * @Description: 消息推送选择目标组件
+-->
+<template>
+  <div :class="`mpt-box ${boxClass}`">
+    <div :class="`mpt-target ${targetClass}`">
+      <div v-if="currentValue && currentValue.length > 0" class="mpt-target-show" @click="handleClick">
+        <div v-for="(labelList, itemKey) in labelMap" :key="itemKey" class="mpt-tag-box">
+          <div class="mpt-tag-tip">{{ itemKey || '' }}</div>
+          <div class="mpt-tag-body">
+            <el-tag v-for="label in labelList" :key="label" class="mpt-tag" size="mini"> {{ label }}</el-tag>
+          </div>
+        </div>
+      </div>
+      <el-cascader
+        v-model="currentValue"
+        ref="mptCascader"
+        :class="`mpt-cascader ${!currentValue || currentValue.length === 0 ? 'mpt-block' : ''}`"
+        :options="optionList"
+        :props="props"
+        :clearable="clearable"
+        :filterable="filterable"
+        :multiple="multiple"
+        :disabled="disabled"
+        @change="change"
+      >
+      </el-cascader>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MessageOne',
+  props: {
+    // '10': '企业微信','20': '企业微信群','30': '企业微信群机器人','40': '短信','50': '邮件','60': '小程序','70': '公众号','80': 'app'
+    channelType: {
+      type: [String, Number],
+      default: null
+    },
+    channelTypeDisabled: { // channelType对应不能选择key数组
+      type: Object,
+      default: () => ({
+        '10': ['robot'],
+        '20': ['robot', 'user', 'dept', 'role'],
+        '30': ['user', 'dept', 'role'],
+        '40': ['robot'],
+        '50': ['robot'],
+        '60': ['robot'],
+        '70': ['robot'],
+        '80': ['robot']
+      })
+    },
+    optionKeyMap: { // 下拉数据源 keyMap
+      type: Object,
+      default: () => ({
+        'user': '员工',
+        'dept': '部门',
+        'role': '角色',
+        'robot': '机器人'
+      })
+    },
+    optionMap: { // 下拉数据源
+      type: Object,
+      default: null
+    },
+    value: { // 单选时，传入值，如'user$$111'
+      type: [String, Number],
+      default: null
+    },
+    valueList: { // 多选时，传入数组，如['user$$111', 'dept$$221']
+      type: Array,
+      default: null
+    },
+    multiple: { // 推送目标允许多选
+      type: Boolean,
+      default: true
+    },
+    boxClass: { // 自定义 大盒子class
+      type: String,
+      default: ''
+    },
+    targetClass: { // 自定义 目标选择class
+      type: String,
+      default: ''
+    },
+    typeClass: { // 自定义 推送类型选择class
+      type: String,
+      default: ''
+    },
+    clearable: { // 推送目标允许清空
+      type: Boolean,
+      default: true
+    },
+    filterable: { // 推送目标允许过滤
+      type: Boolean,
+      default: true
+    },
+    disabled: { // 禁止编辑
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      currentValue: null,
+      // dataList: null
+      props: { multiple: true }
+      // mock
+      // multiple: true,
+      // optionMap: {
+      //   'user': [
+      //     { value: '111', label: '张三' },
+      //     { value: '112', label: '李四' },
+      //     { value: '113', label: '王五' }
+      //   ],
+      //   'dept': [
+      //     { value: '221', label: '杭州一部' },
+      //     { value: '222', label: '杭州二部' },
+      //     { value: '223', label: '杭州三部' }
+      //   ]
+      // }
+    }
+  },
+  watch: {
+    value() {
+      if (this.value) {
+        const list = this.value.split('$$')
+        this.currentValue = [list[0], list[1]]
+        this.$emit('labelMapInit', this.labelMap, this.channelType)
+        console.log('value转化:', this.currentValue)
+      }
+    },
+    valueList: {
+      handler() {
+        if (this.valueList) {
+          this.currentValue = this.valueList.map(value => {
+            const list = value.split('$$')
+            return [list[0], list[1]]
+          })
+          console.log('valueList转化:', this.currentValue)
+          this.$emit('labelMapInit', this.labelMap, this.channelType)
+        } else {
+          this.currentValue = []
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  computed: {
+    optionList() {
+      const optionList = []
+      for (const key in this.optionMap) {
+        optionList.push({
+          label: this.optionKeyMap[key],
+          value: key,
+          disabled: (this.channelTypeDisabled[this.channelType] || []).indexOf(key) > -1,
+          children: this.optionMap[key] || []
+        })
+      }
+      // console.log('map转optionList：', optionList)
+      return optionList
+    },
+    labelMap() {
+      const map = {}
+      if (this.multiple && this.currentValue) { // 值格式 currentValue:[['','',''], ['','','']]
+        this.currentValue.forEach(valList => {
+          const obj0 = this.optionList.filter(n => n.value === valList[0])[0] || {}
+          const obj1 = (obj0.children || []).filter(n => n.value === valList[1])[0] || {}
+          // console.log(111111111111, valList, obj0, obj1)
+          if (!map[obj0.label]) {
+            map[obj0.label] = []
+          }
+          map[obj0.label].push(obj1.label)
+        })
+      } else if (!this.multiple && this.currentValue && this.currentValue[0]) { // 值格式 currentValue:['','','']
+        const obj0 = this.optionList.filter(n => n.value === this.currentValue[0])[0] || {}
+        const obj1 = (obj0.children || []).filter(n => n.value === this.currentValue[1])[0] || {}
+        map[obj0.label] = [obj1.label]
+      }
+      // console.log('labelMap转换:', map)
+      return map
+    }
+  },
+  /** ***************************初始化  end  *************************** **/
+  /** *************************生命周期钩子 start************************* **/
+  created() {
+    this.props.multiple = this.multiple
+  },
+  mounted() {},
+  /** **************************生命周期钩子 end************************** **/
+  /** ***************************methods start*************************** **/
+  methods: {
+    // -----其他方法 start-----
+    // 按钮点击事件
+    handleClick() {
+      console.log(this.$refs.mptCascader)
+      // 主动触发点击事件
+      this.$refs.mptCascader.$el.click()
+      // dispatchEvent(new MouseEvent('click'));
+    },
+    change() {
+      let val = null
+      if (this.multiple) {
+        if (this.currentValue) {
+          val = this.currentValue.map(value => {
+            return `${value[0]}$$${value[1]}`
+          })
+        }
+      } else {
+        val = `${this.currentValue[0]}$$${this.currentValue[1]}`
+      }
+      // console.log('MessageOne返回值:', val, this.channelType, this.labelMap, this.currentValue)
+      this.$emit('change', val, this.channelType, this.labelMap, this.currentValue)
+    }
+    // -----其他方法  end -----
+    // -----增删改查 start-----
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mpt-box {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  // border: 1px solid #dadada;
+  // border-radius: 4px;
+  // padding: 4px;
+}
+.mpt-target {
+  position: relative;
+  display: flex;
+  flex: 1;
+}
+.mpt-target-show {
+  z-index: 1;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  cursor: pointer;
+}
+.mpt-tag-box {
+  display: inline-block;
+  // width: 95%;
+  margin-top: 4px;
+  border: 1px solid #dadada;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 16px;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  position: relative;
+}
+.mpt-tag-box:first-child {
+  margin-top: 2px;
+}
+.mpt-tag-tip {
+  width: 100px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background: #409EFE;
+  color: #ffffff;
+  font-size: 14px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+.mpt-tag-body {
+  display: flex;
+  flex: 1;
+  padding-top: 4px;
+  padding-left: 4px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+.mpt-tag {
+  margin-right: 4px;
+  margin-bottom: 4px;
+}
+.mpt-cascader {
+  display: none;
+  width: 100%;
+}
+.mpt-block {
+  display: block;
+}
+.mpt-target:has(.is-focus) {
+  .mpt-cascader {
+    display: block;
+  }
+  .mpt-target-show {
+    display: none;
+  }
+}
+.mpt-type {
+  width: 125px;
+}
+// 美化滚动条
+.mpt-target-show::-webkit-scrollbar {
+  width: 6px;
+  height: 10px;
+}
+.mpt-target-show::-webkit-scrollbar-track {
+  width: 6px;
+  background: rgba(#101F1C, 0.1);
+}
+.mpt-target-show::-webkit-scrollbar-thumb {
+  background-color: rgba(144,147,153,.45);
+  background-clip: padding-box;
+  min-height: 28px;
+  transition: background-color .2s;
+  cursor: pointer;
+}
+.mpt-target-show::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144,147,153,.2);
+}
+// 美化滚动条
+.mpt-target-show::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+.mpt-target-show::-webkit-scrollbar-track {
+  display: none;
+}
+.mpt-target-show::-webkit-scrollbar-thumb {
+  display: none;
+}
+.mpt-target-show:hover::-webkit-scrollbar-track {
+  display: block;
+}
+.mpt-target-show:hover::-webkit-scrollbar-thumb {
+  display: block;
+}
+</style>

package/packages/components/message-push-target/index.vue

@@ -0,0 +1,212 @@
+<!--
+ * @Author: hcm
+ * @Date: 2023-05-29 13:18:19
+ * @LastEditors: hcm
+ * @LastEditTime: 2024-04-11 09:37:02
+ * @Description: 消息推送选择目标
+-->
+<template>
+  <div :class="`mpt-box-multi ${multiBoxClass}`">
+    <div v-for="multiKey in multiKeys" :key="multiKey">
+      <div v-if="!titleHide" class="mpt-title">{{ channelTypeMap[multiKey] }}</div>
+      <MessageOne
+        :channel-type="multiKey"
+        :value-list="formMap[multiKey]"
+        :box-class="boxClass"
+        :target-class="targetClass"
+        :type-class="typeClass"
+        :clearable="clearable"
+        :filterable="filterable"
+        :multiple="multiple"
+        :disabled="disabled"
+        :option-map="optionMap"
+        :channel-type-disabled="channelTypeDisabled"
+        :option-key-map="optionKeyMap"
+        @change="messageOneChange"
+        @labelMapInit="labelMapInit"
+      ></MessageOne>
+    </div>
+    <!-- multiKeys null 为单框模式 -->
+    <MessageOne
+      v-if="!multiKeys"
+      :value-list="formMap.value"
+      :box-class="boxClass"
+      :target-class="targetClass"
+      :type-class="typeClass"
+      :clearable="clearable"
+      :filterable="filterable"
+      :multiple="multiple"
+      :disabled="disabled"
+      :option-map="optionMap"
+      @change="messageOneChange"
+      @labelMapInit="labelMapInit"
+    ></MessageOne>
+  </div>
+</template>
+
+<script>
+import MessageOne from './MessageOne.vue'
+
+export default {
+  name: 'BytMessagePushTarget',
+  components: {
+    MessageOne
+  }, // 组件
+  props: {
+    titleHide: {
+      type: Boolean,
+      default: false
+    },
+    multiKeys: { // null 表示单框模式
+      type: Array,
+      default: () => ['10', '20', '30', '40', '50', '60', '70', '80'] // channelType数组
+    },
+    channelTypeMap: { // 字典可传入，避免字典更新，要发包
+      type: Object,
+      default: () => ({
+        '10': '企业微信',
+        '20': '企业微信群',
+        '30': '企业微信群机器人',
+        '40': '短信',
+        '50': '邮件',
+        '60': '小程序',
+        '70': '公众号',
+        '80': 'app'
+      })
+    },
+    channelTypeDisabled: { // 默认值在子组件内，默认值必须undefined
+      type: Object,
+      default: undefined
+    },
+    optionKeyMap: { // 默认值在子组件内，默认值必须undefined
+      type: Object,
+      default: undefined
+    },
+    targetMap: { // { '40': ['dept$$221'] }
+      type: Object,
+      default: null
+    },
+    // option数据源，模式1
+    optionUrl: {
+      type: String,
+      default: '/news/chain/getSourceMap'
+    },
+    requestFun: {
+      type: Function,
+      default: null
+    },
+    // option数据源，模式2
+    optionMapProp: {
+      type: Object,
+      default: null
+    },
+    multiBoxClass: { // 自定义 大盒子class
+      type: String,
+      default: ''
+    },
+    boxClass: { // 自定义 大盒子class
+      type: String,
+      default: ''
+    },
+    targetClass: { // 自定义 目标选择class
+      type: String,
+      default: ''
+    },
+    typeClass: { // 自定义 推送类型选择class
+      type: String,
+      default: ''
+    },
+    clearable: { // 推送目标允许清空
+      type: Boolean,
+      default: true
+    },
+    filterable: { // 推送目标允许过滤
+      type: Boolean,
+      default: true
+    },
+    multiple: { // 推送目标允许多选
+      type: Boolean,
+      default: true
+    },
+    disabled: { // 禁止编辑
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      optionMap: null, // {'user': [{ value: '111', label: '张三' }], 'dept': [{ value: '221', label: '杭州一部' }]}
+      formMap: {}, // { '40': ['dept$$221'] }
+      formNameMap: {} // {'短信': {'部门': '杭州一部'}}
+    }
+  },
+  watch: {
+    targetMap: {
+      handler() {
+        if (this.targetMap) {
+          this.formMap = this.targetMap
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  computed: {
+  },
+  /** ***************************初始化  end  *************************** **/
+  /** *************************生命周期钩子 start************************* **/
+  created() {
+    this.getOptionMap()
+  },
+  mounted() {},
+  /** **************************生命周期钩子 end************************** **/
+  /** ***************************methods start*************************** **/
+  methods: {
+    // -----其他方法 start-----
+    messageOneChange(value, channelType, labelMap) {
+      // console.log(111, value, channelType, labelMap)
+      if (this.multiKeys) {
+        this.formMap[channelType] = value
+        this.formNameMap[this.channelTypeMap[channelType]] = labelMap
+        this.$emit('change', this.formMap, this.formNameMap)
+      } else {
+        this.$emit('change', value, labelMap)
+      }
+    },
+    labelMapInit(labelMap, channelType) {
+      if (this.multiKeys) {
+        this.formNameMap[this.channelTypeMap[channelType]] = labelMap
+      }
+    },
+    // -----其他方法  end -----
+    // -----增删改查 start-----
+    getOptionMap() {
+      if (this.optionMapProp) {
+        this.optionMap = this.optionMapProp
+      } else if (this.requestFun) {
+        this.loading = true
+        this.requestFun({
+          url: this.optionUrl,
+          method: 'get',
+          data: {}
+        }).then(res => {
+          this.optionMap = res.data || {}
+        }).finally(() => {
+          this.loading = false
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mpt-box-multi {
+  position: relative;
+}
+.mpt-title {
+  border-left: 4px solid #409EFE;
+  padding-left: 6px;
+  margin-bottom: 4px;
+}
+</style>

package/packages/components.js

@@ -2,15 +2,19 @@
  * @Description: 
  * @Author: 王国火
  * @Date: 2022-09-19 14:31:00
- * @LastEditTime: 2022-09-19 14:32:39
- * @LastEditors: 王国火
+ * @LastEditTime: 2024-02-27 16:36:04
+ * @LastEditors: hcm
  */
 import BaseView from "./components/basic-view/index"
 import FormView from "./components/form-view/index"
+import BytMessagePushTarget from "./components/message-push-target/index"
+import BytMessageOne from "./components/message-push-target/MessageOne"
 
 const components=[
   BaseView,
-  FormView
+  FormView,
+  BytMessagePushTarget,
+  BytMessageOne
 ]
 
 export default components