@idooel/components 0.0.1 → 0.0.2

package/packages/radio/src/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <a-radio-group :value="value" @change="onChange" :disabled="disabled">
+    <a-radio v-for="item in dataSource" :key="item.value" :value="item.value">
+      {{ item.label }}
+    </a-radio>
+  </a-radio-group>
+</template>
+
+<script>
+export default {
+  name: 'ele-radio',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Array, Number]
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    value (val) {
+      console.log('valvalval', val)
+    }
+  },
+  methods: {
+    onChange (e) {
+      this.$emit('change', e.target.value)
+      this.$emit('input', e.target.value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ant-radio-group {
+  text-align: left;
+  line-height: 32px;
+}
+.has-error {
+  .ant-radio-group {
+    ::v-deep .ant-radio-wrapper {
+      color: var(--idooel-form-border-err-color);
+    }
+    ::v-deep .ant-radio-inner {
+      border-color: var(--idooel-form-border-err-color);
+    }
+  }
+}
+</style>

package/packages/select/index.js

@@ -1,5 +1,5 @@
-import EleSelect from './src/index.vue'
-
-EleSelect.install = Vue => Vue.component(EleSelect.name, EleSelect)
-
+import EleSelect from './src/index.vue'
+
+EleSelect.install = Vue => Vue.component(EleSelect.name, EleSelect)
+
 export default EleSelect

package/packages/select/src/index.vue

@@ -1,35 +1,106 @@
-<template>
-  <a-select :value="value" style="width: 100%" @change="onChange">
-    <a-select-option v-for="item in dataSource" :key="item.value" :value="item.value">
-      {{ item.label }}
-    </a-select-option>
-  </a-select>
-</template>
-
-<script>
-export default {
-  name: 'ele-select',
-  props: {
-    value: {
-      type: [String, Array, Number]
-    },
-    defaultValue: {
-      type: [String, Array, Number]
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    onChange (value) {
-      this.$emit('change', value)
-      this.$emit('input', value)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
+<template>
+  <a-select :disabled="disabled" :mode="getMode" :value="value" style="width: 100%" @change="onChange">
+    <a-select-option v-for="item in innerDataSource" :key="item.value" :value="item.value">
+      {{ item.label }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script>
+import { net, type } from '@idooel/shared'
+export default {
+  name: 'ele-select',
+  props: {
+    init: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [String, Array, Number]
+    },
+    defaultValue: {
+      type: [String, Array, Number]
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    url: {
+      type: String,
+      default: 'api-basic/workbench/dicttype/enum/selectList'
+    },
+    code: {
+      type: String,
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    mode: {
+      type: String
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      innerDataSource: []
+    }
+  },
+  computed: {
+    isInitRequest () {
+      if (this.init) {
+        return true
+      }
+      if (this.code || !type.isEmpty(this.params)) {
+        return true
+      }
+      return false
+    },
+    getMode () {
+      if (this.multiple) {
+        return 'multiple'
+      }
+      return this.mode
+    }
+  },
+  watch: {
+    dataSource: {
+      handler (dataSource) {
+        this.innerDataSource = dataSource
+      },
+      immediate: true
+    }
+  },
+  created () {
+    this.isInitRequest && this.fetchDataSourceByUrl()
+  },
+  methods: {
+    fetchDataSourceByUrl () {
+      net.get(this.url, { code: this.code, ...this.params }).then(resp => {
+        const { data } = resp
+        this.innerDataSource = data.map(item => {
+          return {
+            label: item.name,
+            value: item.code
+          }
+        })
+      })
+    },
+    onChange (value) {
+      this.$emit('change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
 </style>

package/packages/select-entity/index.js

@@ -0,0 +1,5 @@
+import EleSelectEntity from './src/index.vue'
+
+EleSelectEntity.install = Vue => Vue.component(EleSelectEntity.name, EleSelectEntity)
+
+export default EleSelectEntity

package/packages/select-entity/src/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="g-select-entity__wrapper" :class="disabled ? 'g-select-entity__disabled' : ''">
+    <span class="select-entity__input">
+      <a-tag
+        v-for="(item, inx) in getValueList"
+        :key="item.value"
+        :closable="!disabled && !getIsMaxCount"
+        @close="onClose(...arguments, inx, item)"
+      >
+        {{ item.label }}
+      </a-tag>
+      <a-tag v-if="getIsMaxCount">......</a-tag>
+    </span>
+    <span class="select-entity__addon" @click="onChange">{{ addonAfter }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-select-entity',
+  props: {
+    value: {
+      type: [Array, Object]
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    maxCount: {
+      type: Number,
+      default: 7
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    addonAfter: {
+      type: String,
+      default: '选择'
+    }
+  },
+  computed: {
+    getValueList () {
+      if (this.value) {
+        if (this.multiple) {
+          return this.getIsMaxCount ? this.value.slice(0, this.maxCount) : this.value
+        }
+        return type.isArray(this.value) ? this.value : [this.value]
+      }
+      return []
+    },
+    getIsMaxCount () {
+      if (this.value && this.multiple) {
+        return this.value.length >= this.maxCount
+      }
+      return false
+    }
+  },
+  methods: {
+    onChange () {
+      if (this.disabled) return
+      this.$emit('change', this.value)
+      this.$emit('evoke')
+    },
+    onClose (e, inx, props) {
+      e = window.event || e
+      e.preventDefault()
+      if (!this.multiple) {
+        this.$emit('close', props)
+        this.$emit('change', null)
+        return
+      }
+      this.value.splice(inx, 1)
+      this.$emit('close', props)
+      this.$emit('change', this.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-select-entity__wrapper {
+  font-size: 14px;
+  line-height: 30px;
+  position: relative;
+  width: 100%;
+  display: flex;
+  color: var(--idoole-black-07);
+  border-radius: 4px;
+  border: 1px solid var(--idooel-form-title-border-color);
+  &:hover {
+    border-color: var(--idooel-primary-color);
+  }
+  .select-entity__input {
+    padding: 0 11px;
+    background-color: #fff;
+    border-radius: 4px;
+    flex-grow: 1;
+    min-height: 30px;
+    text-align: left;
+  }
+  .select-entity__addon {
+    padding: 0 11px;
+    color: var(--idoole-black-07);
+    background-color: var(--idoole-black-02);
+    border-left: 1px solid var(--idooel-form-title-border-color);
+    cursor: pointer;
+    min-height: 30px;
+    white-space: nowrap;
+  }
+}
+.has-error .g-select-entity__wrapper {
+  border-color: var(--idooel-form-border-err-color);
+}
+.g-select-entity__disabled .select-entity__input {
+  background-color: var(--idoole-black-02);
+}
+</style>

package/packages/table/index.js

@@ -1,5 +1,5 @@
-import EleTable from './src/index.vue'
-
-EleTable.install = Vue => Vue.component(EleTable.name, EleTable)
-
+import EleTable from './src/index.vue'
+
+EleTable.install = Vue => Vue.component(EleTable.name, EleTable)
+
 export default EleTable

package/packages/table/src/action.vue

@@ -1,104 +1,173 @@
-<template>
-  <div class="g-table__action">
-    <div class="table-action__item" v-for="(item, idx) in dataSource" :key="idx">
-      <template v-if="item.type == 'text'">
-        <span>{{ item.label }}</span>
-      </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 execDropdownOptExpression(item.optionList)">
-              <template v-if="opt.type == 'confirm'">
-                <a-popconfirm :title="opt.message" @confirm="handleClickConfirm(opt)">
-                  {{ opt.label }}
-                </a-popconfirm>
-              </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'
-const MENU_KEY_NAMESPACE = 'f7b3b8b0-1b7b-11ec-9621-0242ac130002'
-export default {
-  props: {
-    record: {
-      type: Object
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    menuKeyDelimiter () {
-      return uuidv5('_', MENU_KEY_NAMESPACE)
-    }
-  },
-  methods: {
-    execDropdownOptExpression (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)
-      console.log('ret', ret)
-      return ret
-    },
-    handleClickConfirm (props) {
-      //TODO generate event by special rule
-      const { eventName, value } = props
-      this.$emit(eventName, { key: value, record: this.record })
-    },
-    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 } = currentClickTarget
-      //TODO generate event by special rule
-      if (type === 'confirm') return
-      this.$emit(eventName, { key: child, record: this.record })
-    },
-    handleClickText (props) {
-      const { eventName, key } = props
-      this.$emit(eventName, { key, record: this.record })
-    }
-  }
-}
-</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
+    }
+  },
+  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;
+    }
+  }
+}
 </style>