cnhis-design-vue 2.1.78 → 2.1.80

package/packages/big-table/src/components/AutoLayoutButton.vue

@@ -1,307 +1,307 @@
-<script>
-import { Icon, Tooltip, Progress, Switch, Popover, Button, Dropdown, Menu, Checkbox, Input, Popconfirm } from 'ant-design-vue';
-import resize from 'vue-resize-directive';
-import vexutils from '@/utils/vexutils';
-import SvgIcon from '@/component/svg/index.vue';
-import utils from '@/utils/utils-map';
-import preventReClick from '@/directive/preventReClick';
-export default {
-  name: 'AutoLayoutButton',
-  inject: ['registerEvent', 'unregisterEvent', 'dispatchEvent'],
-  data() {
-    return {
-      showList: [],
-      hideList: [],
-      btnShowWidthObj: {},
-      btnIcons: {
-        // 按钮icon 映射
-        copy: 'copy',
-        pencil: 'edit',
-        delete: 'delete',
-        add: 'plus-circle',
-        download: 'download',
-        label: 'tag',
-        queding: 'check',
-        del: 'close'
-      }
-    };
-  },
-  props: {
-    btnList: {
-      type: Array,
-      default: () => []
-    },
-    row: {
-      type: Object,
-      default: () => ({})
-    },
-    index: {
-      type: Number,
-      default: () => ({})
-    }
-  },
-  computed: {
-    handleName() {
-      return function(item, key = 'name') {
-        return item.alias || item[key];
-      };
-    },
-    // showBtnList() {
-    //   if (!Array.isArray(this.btnList)) return [];
-    //   let res = this.btnList
-    //     .map(btn => {
-    //       if (btn.isShow == '1' && btn.type != 'LINK') {
-    //         let config = {
-    //           btnStyle: vexutils.getBtnStyle(btn),
-    //           btnType: btn.showStyle == 'none_bg' || btn.showStyle === 'only_icon' ? 'link' : 'primary',
-    //           btnGhost: btn.showStyle == 'white_bg',
-    //           btnTitle: this.handleName(btn)
-    //         };
-    //         return Object.assign(btn, config);
-    //       } else {
-    //         return null;
-    //       }
-    //     })
-    //     .filter(Boolean);
-    //   return res;
-    // }
-  },
-  render() {
-    const row = this.row;
-    const index = this.index;
-    if(window._talbe_row_btn_debugger){
-      console.log(this.btnList,'----------------btnList')
-      console.log(this.hideList,'----------------hideList')
-    }
-    return (
-      <div class="c_auto-layout-wrap" ref="layoutWrap">
-        {this.showList.length === 0 && this.hideList.length === 0 ? (
-          this.renderAllBtn(this.btnList)
-        ) : (
-          <div>
-            {this.renderAllBtn(this.showList)}
-            {this.retnderHideBtn()}
-          </div>
-        )}
-      </div>
-    );
-  },
-  watch: {
-    btnList:{
-      handler(){
-        this.reset();
-        this.onResize();
-      }
-    }
-  },
-  beforeCreate() {},
-  created() {
-    this.debouncePageResize = utils.debounce(this.handlePageResize, 300);
-    this.attachEvent();
-  },
-  beforeMount() {},
-  mounted() {
-    this.onResize();
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    getBtnIcon(btn, mr = '8px') {
-      let icon;
-      if (btn.icon) {
-        if (this.btnIcons[btn.icon]) {
-          icon = <a-icon type={this.btnIcons[btn.icon]} style={{
-                  marginRight: mr
-                }} />;
-        } else {
-          icon = (
-            <a-tooltip title={this.handleName(btn)}>
-              <svg-icon
-                iconClass={btn.icon}
-                style={{
-                  marginRight: mr
-                }}
-              />
-            </a-tooltip>
-          );
-        }
-      } else if (btn.iconSetting) {
-        icon = (
-          <svg-icon
-            iconClass={JSON.parse(btn.iconSetting).icon}
-            style={{
-              marginRight: mr
-            }}
-          />
-        );
-      }
-      return [icon];
-    },
-
-    renderAllBtn(list) {
-      const row = this.row;
-      const index = this.index;
-      return list.map((btn, j) => {
-        let btnTitle = this.handleName(btn);
-        return (
-          <a-button
-            v-preventReClick={1000}
-            ref={`rowBtnItem${btn.sid}`}
-            key={btn.sid + j}
-            data-key={btn.sid}
-            on-click={e => this.clickBtn(row, btn, index, e, j)}
-            class="btn-custom-class row-btn"
-            style={{
-              ...vexutils.getBtnStyle(btn),
-              ...{
-                display: !row.__isInlineEditing ? 'inline-block' : 'none'
-              }
-            }}
-            disabled={row.__isDisableInlineEdit}
-            type={btn.showStyle == 'none_bg' || btn.showStyle === 'only_icon' ? 'link' : 'primary'}
-            ghost={btn.showStyle == 'white_bg'}
-            size="small"
-            title={btnTitle}
-          >
-            {this.getBtnIcon(btn)}
-            {btn.showStyle === 'only_icon' ? '' : btnTitle}
-          </a-button>
-        );
-      });
-    },
-
-    retnderHideBtn() {
-      const row = this.row;
-      const index = this.index;
-      if (this.hideList.length === 0) return;
-      return (
-        <a-dropdown trigger={['hover']}>
-          <a-icon type="more" style="cursor: pointer;" />
-          <a-menu slot="overlay">
-            {this.hideList.map((b, j) => {
-              return b ? (
-                <a-menu-item key={b.sid + j} class="c_dropdown-btn" on-click={e => this.clickBtn(row, b, index, e.domEvent, j)}>
-                  {this.getBtnIcon(b)}
-                   {b.showStyle === 'only_icon' ? '' : this.handleName(b)}
-                </a-menu-item>
-              ): null;
-            })}
-          </a-menu>
-        </a-dropdown>
-      );
-    },
-
-   async onResize() {
-      // utils.debounce(this.handlePageResize(), 300);
-        this.$nextTick(()=>{
-          this.debouncePageResize();
-        });
-    },
-
-    handlePageResize() {
-        if(window._talbe_row_btn_debugger){
-          console.log(this.btnList,'----------------handlePageResize')
-        }
-        const layoutWrap = this.$refs.layoutWrap;
-        if(!layoutWrap) return;
-        let wrapWidth = layoutWrap.clientWidth;
-        let btnTotalWidth = 0;
-        let showBtnListWidth = 0;
-        let hideIndex = -1;
-        let len = this?.btnList?.length || 0;
-        let last = len -1 > 0 ? len -1 : 0;
-        this.btnList.forEach((btn, i) => {
-          // 记录宽度
-          let btnDom = this.$refs[`rowBtnItem${btn.sid}`];
-          if (btnDom && !this.btnShowWidthObj[btn.id]) {
-            this.btnShowWidthObj[btn.id] =  btnDom?.$el?.offsetWidth || 0;
-            btn.btnClientWidth = btnDom?.$el?.offsetWidth || 0;
-          }
-          if (hideIndex > 0) {
-            btn.showType = '_hide';
-            return;
-          }
-          // 最后一个不用加
-          let mg = last == i ? 0: 10;
-          btnTotalWidth += (this.btnShowWidthObj[btn.id] || 0) + mg;
-          if (btnTotalWidth < (wrapWidth)) {
-            btn.showType = '_show';
-            showBtnListWidth = btnTotalWidth
-          } else {
-            btn.showType = '_hide';
-            hideIndex = i;
-          }
-        });
-        this.hideList = [];
-        this.showList = [];
-        this.btnList.forEach(btn => {
-          if (btn.showType === '_hide') {
-            this.hideList.push(btn);
-          } else {
-            this.showList.push(btn);
-          }
-        });
-        // 边界处理
-        // 如果有 hideList 有数据
-        // 展示的按钮宽度和加上“更多按钮”的宽度大于容器的宽度，showList 最后一个按钮移动到 hideList
-        if(this.hideList.length > 0 && (showBtnListWidth + 15 + 10 > wrapWidth)){
-            let t = this.showList.pop();
-            t && this.hideList.unshift(t);
-        }
-    },
-
-    clickBtn(row, btn, index, e, j) {
-      this.$emit('clickBtn', row, btn, index, e, j);
-    },
-
-    attachEvent() {
-      this.registerEvent('operatorColumn-resize', this.onResize);
-      // this.$on('hook:beforeDestroy', () => {
-      //   console.log(('unregisterEvent-----'))
-      //   this.unregisterEvent('operatorColumn-resize', this.onResize);
-      // });
-    },
-
-    reset(){
-      // 重置
-      this.hideList = [];
-      this.showList = [];
-    }
-  },
-  components: {
-    [Icon.name]: Icon,
-    [Button.name]: Button,
-    [Tooltip.name]: Tooltip,
-    [Progress.name]: Progress,
-    [Switch.name]: Switch,
-    [Popover.name]: Popover,
-    [Dropdown.name]: Dropdown,
-    [Popconfirm.name]: Popconfirm,
-    [Menu.name]: Menu,
-    [Menu.Item.name]: Menu.Item,
-    [Menu.ItemGroup.name]: Menu.ItemGroup,
-    SvgIcon
-  },
-  directives: { resize, preventReClick }
-};
-</script>
-
-<style lang="less" scoped>
-.c_auto-layout-wrap {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  .row-btn + .row-btn {
-    margin-left: 10px;
-  }
-  .row-btn + .ant-dropdown-trigger {
-    margin-left: 10px;
-  }
-}
-.ant-dropdown-menu-item.c_dropdown-btn{
-  justify-content: flex-start;
-}
-</style>
+<script>
+import { Icon, Tooltip, Progress, Switch, Popover, Button, Dropdown, Menu, Checkbox, Input, Popconfirm } from 'ant-design-vue';
+import resize from 'vue-resize-directive';
+import vexutils from '@/utils/vexutils';
+import SvgIcon from '@/component/svg/index.vue';
+import utils from '@/utils/utils-map';
+import preventReClick from '@/directive/preventReClick';
+export default {
+  name: 'AutoLayoutButton',
+  inject: ['registerEvent', 'unregisterEvent', 'dispatchEvent'],
+  data() {
+    return {
+      showList: [],
+      hideList: [],
+      btnShowWidthObj: {},
+      btnIcons: {
+        // 按钮icon 映射
+        copy: 'copy',
+        pencil: 'edit',
+        delete: 'delete',
+        add: 'plus-circle',
+        download: 'download',
+        label: 'tag',
+        queding: 'check',
+        del: 'close'
+      }
+    };
+  },
+  props: {
+    btnList: {
+      type: Array,
+      default: () => []
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: Number,
+      default: () => ({})
+    }
+  },
+  computed: {
+    handleName() {
+      return function(item, key = 'name') {
+        return item.alias || item[key];
+      };
+    },
+    // showBtnList() {
+    //   if (!Array.isArray(this.btnList)) return [];
+    //   let res = this.btnList
+    //     .map(btn => {
+    //       if (btn.isShow == '1' && btn.type != 'LINK') {
+    //         let config = {
+    //           btnStyle: vexutils.getBtnStyle(btn),
+    //           btnType: btn.showStyle == 'none_bg' || btn.showStyle === 'only_icon' ? 'link' : 'primary',
+    //           btnGhost: btn.showStyle == 'white_bg',
+    //           btnTitle: this.handleName(btn)
+    //         };
+    //         return Object.assign(btn, config);
+    //       } else {
+    //         return null;
+    //       }
+    //     })
+    //     .filter(Boolean);
+    //   return res;
+    // }
+  },
+  render() {
+    const row = this.row;
+    const index = this.index;
+    if(window._talbe_row_btn_debugger){
+      console.log(this.btnList,'----------------btnList')
+      console.log(this.hideList,'----------------hideList')
+    }
+    return (
+      <div class="c_auto-layout-wrap" ref="layoutWrap">
+        {this.showList.length === 0 && this.hideList.length === 0 ? (
+          this.renderAllBtn(this.btnList)
+        ) : (
+          <div>
+            {this.renderAllBtn(this.showList)}
+            {this.retnderHideBtn()}
+          </div>
+        )}
+      </div>
+    );
+  },
+  watch: {
+    btnList:{
+      handler(){
+        this.reset();
+        this.onResize();
+      }
+    }
+  },
+  beforeCreate() {},
+  created() {
+    this.debouncePageResize = utils.debounce(this.handlePageResize, 300);
+    this.attachEvent();
+  },
+  beforeMount() {},
+  mounted() {
+    this.onResize();
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    getBtnIcon(btn, mr = '8px') {
+      let icon;
+      if (btn.icon) {
+        if (this.btnIcons[btn.icon]) {
+          icon = <a-icon type={this.btnIcons[btn.icon]} style={{
+                  marginRight: mr
+                }} />;
+        } else {
+          icon = (
+            <a-tooltip title={this.handleName(btn)}>
+              <svg-icon
+                iconClass={btn.icon}
+                style={{
+                  marginRight: mr
+                }}
+              />
+            </a-tooltip>
+          );
+        }
+      } else if (btn.iconSetting) {
+        icon = (
+          <svg-icon
+            iconClass={JSON.parse(btn.iconSetting).icon}
+            style={{
+              marginRight: mr
+            }}
+          />
+        );
+      }
+      return [icon];
+    },
+
+    renderAllBtn(list) {
+      const row = this.row;
+      const index = this.index;
+      return list.map((btn, j) => {
+        let btnTitle = this.handleName(btn);
+        return (
+          <a-button
+            v-preventReClick={1000}
+            ref={`rowBtnItem${btn.sid}`}
+            key={btn.sid + j}
+            data-key={btn.sid}
+            on-click={e => this.clickBtn(row, btn, index, e, j)}
+            class="btn-custom-class row-btn"
+            style={{
+              ...vexutils.getBtnStyle(btn),
+              ...{
+                display: !row.__isInlineEditing ? 'inline-block' : 'none'
+              }
+            }}
+            disabled={row.__isDisableInlineEdit}
+            type={btn.showStyle == 'none_bg' || btn.showStyle === 'only_icon' ? 'link' : 'primary'}
+            ghost={btn.showStyle == 'white_bg'}
+            size="small"
+            title={btnTitle}
+          >
+            {this.getBtnIcon(btn)}
+            {btn.showStyle === 'only_icon' ? '' : btnTitle}
+          </a-button>
+        );
+      });
+    },
+
+    retnderHideBtn() {
+      const row = this.row;
+      const index = this.index;
+      if (this.hideList.length === 0) return;
+      return (
+        <a-dropdown trigger={['hover']}>
+          <a-icon type="more" style="cursor: pointer;" />
+          <a-menu slot="overlay">
+            {this.hideList.map((b, j) => {
+              return b ? (
+                <a-menu-item key={b.sid + j} class="c_dropdown-btn" on-click={e => this.clickBtn(row, b, index, e.domEvent, j)}>
+                  {this.getBtnIcon(b)}
+                   {b.showStyle === 'only_icon' ? '' : this.handleName(b)}
+                </a-menu-item>
+              ): null;
+            })}
+          </a-menu>
+        </a-dropdown>
+      );
+    },
+
+   async onResize() {
+      // utils.debounce(this.handlePageResize(), 300);
+        this.$nextTick(()=>{
+          this.debouncePageResize();
+        });
+    },
+
+    handlePageResize() {
+        if(window._talbe_row_btn_debugger){
+          console.log(this.btnList,'----------------handlePageResize')
+        }
+        const layoutWrap = this.$refs.layoutWrap;
+        if(!layoutWrap) return;
+        let wrapWidth = layoutWrap.clientWidth;
+        let btnTotalWidth = 0;
+        let showBtnListWidth = 0;
+        let hideIndex = -1;
+        let len = this?.btnList?.length || 0;
+        let last = len -1 > 0 ? len -1 : 0;
+        this.btnList.forEach((btn, i) => {
+          // 记录宽度
+          let btnDom = this.$refs[`rowBtnItem${btn.sid}`];
+          if (btnDom && !this.btnShowWidthObj[btn.id]) {
+            this.btnShowWidthObj[btn.id] =  btnDom?.$el?.offsetWidth || 0;
+            btn.btnClientWidth = btnDom?.$el?.offsetWidth || 0;
+          }
+          if (hideIndex > 0) {
+            btn.showType = '_hide';
+            return;
+          }
+          // 最后一个不用加
+          let mg = last == i ? 0: 10;
+          btnTotalWidth += (this.btnShowWidthObj[btn.id] || 0) + mg;
+          if (btnTotalWidth < (wrapWidth)) {
+            btn.showType = '_show';
+            showBtnListWidth = btnTotalWidth
+          } else {
+            btn.showType = '_hide';
+            hideIndex = i;
+          }
+        });
+        this.hideList = [];
+        this.showList = [];
+        this.btnList.forEach(btn => {
+          if (btn.showType === '_hide') {
+            this.hideList.push(btn);
+          } else {
+            this.showList.push(btn);
+          }
+        });
+        // 边界处理
+        // 如果有 hideList 有数据
+        // 展示的按钮宽度和加上“更多按钮”的宽度大于容器的宽度，showList 最后一个按钮移动到 hideList
+        if(this.hideList.length > 0 && (showBtnListWidth + 15 + 10 > wrapWidth)){
+            let t = this.showList.pop();
+            t && this.hideList.unshift(t);
+        }
+    },
+
+    clickBtn(row, btn, index, e, j) {
+      this.$emit('clickBtn', row, btn, index, e, j);
+    },
+
+    attachEvent() {
+      this.registerEvent('operatorColumn-resize', this.onResize);
+      // this.$on('hook:beforeDestroy', () => {
+      //   console.log(('unregisterEvent-----'))
+      //   this.unregisterEvent('operatorColumn-resize', this.onResize);
+      // });
+    },
+
+    reset(){
+      // 重置
+      this.hideList = [];
+      this.showList = [];
+    }
+  },
+  components: {
+    [Icon.name]: Icon,
+    [Button.name]: Button,
+    [Tooltip.name]: Tooltip,
+    [Progress.name]: Progress,
+    [Switch.name]: Switch,
+    [Popover.name]: Popover,
+    [Dropdown.name]: Dropdown,
+    [Popconfirm.name]: Popconfirm,
+    [Menu.name]: Menu,
+    [Menu.Item.name]: Menu.Item,
+    [Menu.ItemGroup.name]: Menu.ItemGroup,
+    SvgIcon
+  },
+  directives: { resize, preventReClick }
+};
+</script>
+
+<style lang="less" scoped>
+.c_auto-layout-wrap {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .row-btn + .row-btn {
+    margin-left: 10px;
+  }
+  .row-btn + .ant-dropdown-trigger {
+    margin-left: 10px;
+  }
+}
+.ant-dropdown-menu-item.c_dropdown-btn{
+  justify-content: flex-start;
+}
+</style>