cnhis-design-vue 2.1.14 → 2.1.15

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

@@ -1,270 +1,270 @@
-<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',
-  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" v-resize={() => this.onResize()}>
-        {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.debouncePageResize();
-      }
-    }
-  },
-  beforeCreate() {},
-  created() {
-    this.debouncePageResize = utils.debounce(this.handlePageResize, 300)
-  },
-  beforeMount() {},
-  mounted() {},
-  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}
-            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 (
-                <a-menu-item key={b.sid} 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>
-              );
-            })}
-          </a-menu>
-        </a-dropdown>
-      );
-    },
-
-    onResize() {
-      // utils.debounce(this.handlePageResize(), 300);
-      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 hideIndex = -1;
-        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;
-          }
-          btnTotalWidth += (this.btnShowWidthObj[btn.id] || 0) + 10;
-          if (btnTotalWidth < (wrapWidth-15)) {
-            btn.showType = '_show';
-          } 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);
-          }
-        });
-    },
-
-    clickBtn(row, btn, index, e, j) {
-      this.$emit('clickBtn', row, btn, index, e, j);
-    }
-  },
-  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 {
-    margin-right: 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',
+  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" v-resize={() => this.onResize()}>
+        {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.debouncePageResize();
+      }
+    }
+  },
+  beforeCreate() {},
+  created() {
+    this.debouncePageResize = utils.debounce(this.handlePageResize, 300)
+  },
+  beforeMount() {},
+  mounted() {},
+  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}
+            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 (
+                <a-menu-item key={b.sid} 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>
+              );
+            })}
+          </a-menu>
+        </a-dropdown>
+      );
+    },
+
+    onResize() {
+      // utils.debounce(this.handlePageResize(), 300);
+      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 hideIndex = -1;
+        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;
+          }
+          btnTotalWidth += (this.btnShowWidthObj[btn.id] || 0) + 10;
+          if (btnTotalWidth < (wrapWidth-15)) {
+            btn.showType = '_show';
+          } 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);
+          }
+        });
+    },
+
+    clickBtn(row, btn, index, e, j) {
+      this.$emit('clickBtn', row, btn, index, e, j);
+    }
+  },
+  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 {
+    margin-right: 10px;
+  }
+}
+.ant-dropdown-menu-item.c_dropdown-btn{
+  justify-content: flex-start;
+}
+</style>