@idooel/components 0.0.2-beta.3 → 0.0.2-beta.31

package/packages/table/src/action.vue

@@ -1,173 +1,177 @@
-<template>
-  <div class="g-table__action">
-    <div class="table-action__item" v-for="(item, idx) in execOperationExpression(dataSource)" :key="idx">
-      <template v-if="item.type == 'text'">
-        <span @click="handleClickText(item)">{{ item.label }}</span>
-      </template>
-      <template v-else-if="item.type == 'confirm'">
-        <div>
-          <a-popconfirm :title="item.message" @confirm="handleClickConfirm(item)">
-            {{ item.label }}
-          </a-popconfirm>
-        </div>
-      </template>
-      <template v-else-if="item.type == 'dropdown'">
-        <a-dropdown>
-          <a-menu slot="overlay" @click="handleDropdownClick">
-            <a-menu-item :key="`${item.key || ''}${menuKeyDelimiter}${opt.value || ''}`" v-for="opt in execOperationExpression(item.optionList)">
-              <template v-if="opt.type == 'confirm'">
-                <a-popconfirm :title="opt.message" @confirm="handleClickConfirm(opt)">
-                  {{ opt.label }}
-                </a-popconfirm>
-              </template>
-              <template v-else-if="opt.type == 'modal-confirm'">
-                <div style="width: 100%" @click="handleClickModalConfirm(opt)">{{ opt.label }}</div>
-                <ele-modal-confirm v-bind="opt.modalConfirm" v-on="$listeners" v-model="showModalConfirm"></ele-modal-confirm>
-              </template>
-              <template v-else>
-                {{ opt.label }}
-              </template>
-            </a-menu-item>
-          </a-menu>
-         <span>{{ item.label }}</span>
-        </a-dropdown>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { v5 as uuidv5 } from 'uuid'
-import { type, route } from '@idooel/shared'
-import { parse } from '@idooel/expression'
-import { CONTEXT } from '../../utils'
-const MENU_KEY_NAMESPACE = 'f7b3b8b0-1b7b-11ec-9621-0242ac130002'
-export default {
-  props: {
-    record: {
-      type: Object
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    }
-  },
-  inject: {
-    requestTreeData: {
-      default: void 0
-    },
-    requestTableData: {
-      default: void 0
-    }
-  },
-  data() {
-    return {
-      showModalConfirm: false
-    }
-  },
-  provide () {
-    return {
-      [CONTEXT]: () => {
-        return {
-          _route: this.$route.query,
-          _routeMeta: this.$route.meta,
-          exposed: this.builtInMethods,
-          ...this.record
-        }
-      }
-    }
-  },
-  computed: {
-    menuKeyDelimiter () {
-      return uuidv5('_', MENU_KEY_NAMESPACE)
-    },
-    builtInMethods () {
-      return { 
-        requestTreeData: this.requestTreeData, 
-        requestTableData: this.requestTableData,
-        closeModalConfirm: this.closeModalConfirm,
-        showModalConfirm: this.handleClickModalConfirm,
-        currentRowData: this.record
-      }
-    }
-  },
-  methods: {
-    closeModalConfirm () {
-      this.showModalConfirm = false
-    },
-    handleClickModalConfirm () {
-      this.showModalConfirm = true
-    },
-    execOperationExpression (dataSource = []) {
-      const ret = dataSource.map(item => {
-        const { show } = item
-        if (type.isUndefined(show)) {
-          return item
-        } else if (type.isBool(show)) {
-          if (show) return item
-        } else if (type.isStr(show)) {
-          const parseRet = parse(show, { 
-            ...this.record, 
-            _route: route.searchToQueryParams(window.location.search) 
-          })
-          if (parseRet) return item
-        }
-      }).filter(item => item)
-      return ret
-    },
-    handleClickConfirm (props) {
-      //TODO generate event by special rule
-      const { eventName, value, key } = props
-      this.$emit(eventName || key, { 
-        key: value || key, 
-        record: this.record,
-        builtInMethods: this.builtInMethods,
-        exposed: this.builtInMethods
-      })
-    },
-    handleDropdownClick (props) {
-      const { key } = props
-      const [parent, child] = key.split(this.menuKeyDelimiter)
-      if (!parent || !child) {
-        throw new Error('key is required')
-      }
-      const currentDropdown = this.dataSource.find(item => item.key === parent)
-      const currentClickTarget = currentDropdown.optionList.find(item => item.value === child)
-      const { eventName, type, key: currentKey } = currentClickTarget
-      //TODO generate event by special rule
-      if (type === 'confirm' || type === 'modal-confirm') return
-      this.$emit(eventName || currentKey, { 
-        key: child, 
-        record: this.record, 
-        builtInMethods: this.builtInMethods,
-        exposed: this.builtInMethods
-      })
-    },
-    handleClickText (props) {
-      const { eventName, key } = props
-      this.$emit(eventName || key, { 
-        key, 
-        record: this.record, 
-        builtInMethods: this.builtInMethods,
-        exposed: this.builtInMethods
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-table__action {
-  display: flex;
-  flex-direction: row;
-  .table-action__item {
-    font-size: 14px;
-    color: #409EFF;
-    margin-left: 16px;
-    cursor: pointer;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
+<template>
+  <div class="g-table__action">
+    <div class="table-action__item" v-for="(item, idx) in execOperationExpression(dataSource)" :key="idx">
+      <template v-if="item.type == 'text'">
+        <span @click="handleClickText(item)">{{ item.label }}</span>
+      </template>
+      <template v-else-if="item.type == 'confirm'">
+        <div>
+          <a-popconfirm :title="item.message" @confirm="handleClickConfirm(item)">
+            {{ item.label }}
+          </a-popconfirm>
+        </div>
+      </template>
+      <template v-else-if="item.type == 'dropdown'">
+        <a-dropdown>
+          <a-menu slot="overlay" @click="handleDropdownClick">
+            <a-menu-item :key="`${item.key || ''}${menuKeyDelimiter}${opt.value || ''}`" v-for="opt in execOperationExpression(item.optionList)">
+              <template v-if="opt.type == 'confirm'">
+                <a-popconfirm :title="opt.message" @confirm="handleClickConfirm(opt)">
+                  {{ opt.label }}
+                </a-popconfirm>
+              </template>
+              <template v-else-if="opt.type == 'modal-confirm'">
+                <div style="width: 100%" @click="handleClickModalConfirm(opt)">{{ opt.label }}</div>
+                <ele-modal-confirm v-bind="opt.modalConfirm" v-on="$listeners" v-model="showModalConfirm"></ele-modal-confirm>
+              </template>
+              <template v-else>
+                {{ opt.label }}
+              </template>
+            </a-menu-item>
+          </a-menu>
+         <span>{{ item.label }}</span>
+        </a-dropdown>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v5 as uuidv5 } from 'uuid'
+import { type, route } from '@idooel/shared'
+import { parse } from '@idooel/expression'
+import { CONTEXT } from '../../utils'
+const MENU_KEY_NAMESPACE = 'f7b3b8b0-1b7b-11ec-9621-0242ac130002'
+export default {
+  props: {
+    record: {
+      type: Object
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  inject: {
+    requestTreeData: {
+      default: void 0
+    },
+    requestTableData: {
+      default: void 0
+    },
+    keepAliveRefresh: {
+      default: void 0
+    }
+  },
+  data() {
+    return {
+      showModalConfirm: false
+    }
+  },
+  provide () {
+    return {
+      [CONTEXT]: () => {
+        return {
+          _route: this.$route.query,
+          _routeMeta: this.$route.meta,
+          exposed: this.builtInMethods,
+          ...this.record
+        }
+      }
+    }
+  },
+  computed: {
+    menuKeyDelimiter () {
+      return uuidv5('_', MENU_KEY_NAMESPACE)
+    },
+    builtInMethods () {
+      return { 
+        requestTreeData: this.requestTreeData, 
+        requestTableData: this.requestTableData,
+        keepAliveRefresh: this.keepAliveRefresh,
+        closeModalConfirm: this.closeModalConfirm,
+        showModalConfirm: this.handleClickModalConfirm,
+        currentRowData: this.record
+      }
+    }
+  },
+  methods: {
+    closeModalConfirm () {
+      this.showModalConfirm = false
+    },
+    handleClickModalConfirm () {
+      this.showModalConfirm = true
+    },
+    execOperationExpression (dataSource = []) {
+      const ret = dataSource.map(item => {
+        const { show } = item
+        if (type.isUndefined(show)) {
+          return item
+        } else if (type.isBool(show)) {
+          if (show) return item
+        } else if (type.isStr(show)) {
+          const parseRet = parse(show, { 
+            ...this.record, 
+            _route: route.searchToQueryParams(window.location.search) 
+          })
+          if (parseRet) return item
+        }
+      }).filter(item => item)
+      return ret
+    },
+    handleClickConfirm (props) {
+      //TODO generate event by special rule
+      const { eventName, value, key } = props
+      this.$emit(eventName || key, { 
+        key: value || key, 
+        record: this.record,
+        builtInMethods: this.builtInMethods,
+        exposed: this.builtInMethods
+      })
+    },
+    handleDropdownClick (props) {
+      const { key } = props
+      const [parent, child] = key.split(this.menuKeyDelimiter)
+      if (!parent || !child) {
+        throw new Error('key is required')
+      }
+      const currentDropdown = this.dataSource.find(item => item.key === parent)
+      const currentClickTarget = currentDropdown.optionList.find(item => item.value === child)
+      const { eventName, type, key: currentKey } = currentClickTarget
+      //TODO generate event by special rule
+      if (type === 'confirm' || type === 'modal-confirm') return
+      this.$emit(eventName || currentKey, { 
+        key: child, 
+        record: this.record, 
+        builtInMethods: this.builtInMethods,
+        exposed: this.builtInMethods
+      })
+    },
+    handleClickText (props) {
+      const { eventName, key } = props
+      this.$emit(eventName || key, { 
+        key, 
+        record: this.record, 
+        builtInMethods: this.builtInMethods,
+        exposed: this.builtInMethods
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-table__action {
+  display: flex;
+  flex-direction: row;
+  .table-action__item {
+    font-size: 14px;
+    color: #409EFF;
+    margin-left: 16px;
+    cursor: pointer;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
 </style>