@aochuang/common 1.0.0 → 1.0.1

package/components/advanced-filter/advanced-filter-scene-form.vue

@@ -0,0 +1,95 @@
+<template>
+  <ui-form ref="form" :rules="formRules" :model="formData" label-width="80px" label-position="top">
+    <ui-form-row>
+      <ui-form-cell prop="name" label="场景名称">
+        <ui-textbox v-model="formData.name" placeholder="场景名称，最多10个字符" :maxlength="10" style="width: 344px"></ui-textbox>
+      </ui-form-cell>
+    </ui-form-row>
+    <ui-form-row>
+      <ui-form-cell prop="data" label="筛选条件">
+        <advanced-filter-condition
+          ref="condition"
+          :field-data="fieldData"
+          v-model="formData.data"
+        >
+        </advanced-filter-condition>
+      </ui-form-cell>
+    </ui-form-row>
+    <ui-form-row>
+      <ui-form-cell>
+        <ui-switch v-model="formData.isDefault">设为默认</ui-switch>
+      </ui-form-cell>
+    </ui-form-row>
+    <ui-toolbar slot="toolbar">
+      <ui-toolbar-item>
+        <ui-button>取消</ui-button>
+      </ui-toolbar-item>
+      <ui-toolbar-item>
+        <ui-button type="primary" :click="handleConfirmClick">确定</ui-button>
+      </ui-toolbar-item>
+    </ui-toolbar>
+  </ui-form>
+</template>
+<script>
+import AdvancedFilterCondition from './advanced-filter-condition'
+
+export default {
+  name: 'UiAdvancedFilterSceneForm',
+  components: {
+    AdvancedFilterCondition
+  },
+  props: {
+    data: {
+      type: Object
+    },
+    fieldData: {
+      type: Array
+    },
+    confirmMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      formData: {
+        name: '',
+        data: [],
+        isDefault: false
+      }
+    }
+  },
+  computed: {
+    formRules () {
+      return {
+        name: [{
+          required: true,
+          message: '场景名称不能为空',
+          trigger: 'blur'
+        }],
+        data: [{
+          required: true,
+          message: '筛选条件不能为空',
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created () {
+    if (this.data) {
+      this.formData = Object.assign({}, this.data)
+    }
+  },
+  methods: {
+    handleConfirmClick () {
+      return Promise.all([
+        this.$refs.form.validate(),
+        this.$refs.condition.validate()
+      ]).then(() => {
+        return this.confirmMethod && this.confirmMethod({
+          data: this.formData
+        })
+      })
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-scene-item.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="ui-advanced-filter-scene-item" :class="{'is-active': active, 'is-dirty': active && activeDirty}" @click="handleClick">
+    <slot>
+      {{ label }}
+    </slot>
+    <span class="ui-advanced-filter-scene-item__arrow" v-if="arrow">
+      <i class="el-icon-arrow-down"></i>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterSceneItem',
+  props: {
+    label: {
+      type: String
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    activeDirty: {
+      type: Boolean,
+      default: false
+    },
+    arrow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter-scene-item{
+  height: 20px;
+  line-height: 20px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #F4F5F7;
+  margin-right: 8px;
+  color: #344563;
+  transition: all .25s;
+  border: 2px solid #F4F5F7;
+  &:hover {
+    background-color: #EBECF0;
+  }
+  &.is-active {
+    background-color: #344563;
+    border-color: #344563;
+    color: #fff;
+  }
+  &.is-dirty {
+    color: #344563;
+    border-color: #344563;
+    background-color: #EBECF0;
+  }
+}
+</style>

package/components/advanced-filter/advanced-filter-scene-manage.vue

@@ -0,0 +1,264 @@
+<template>
+  <ui-form class="ui-advanced-filter-scene-manage">
+    <ui-form-row>
+      <ui-form-cell :show-label="false">
+        <div class="ui-advanced-filter-scene-manage__tips">
+          <ac-tips>您可通过拖拽管理场景显示顺序</ac-tips>
+        </div>
+        <div class="ui-advanced-filter-scene-manage__transfer">
+          <advanced-filter-scene-transfer
+            v-model="showSceneIds"
+            :all-scene-data="allSceneData"
+          >
+            <template slot="item-extend" slot-scope="{ data, type }">
+              <div class="ui-advanced-filter-scene-manage__tools">
+                <span class="ui-advanced-filter-scene-manage__tools-item" v-if="data.isDefault === 1">
+                  <span class="ui-advanced-filter-scene-manage__default">默</span>
+                </span>
+                <template v-if="!(data.isSystem === 1 && data.isDefault === 1)">
+                  <ui-popover
+                    class="ui-advanced-filter-scene-manage__tools-item"
+                    :visible="showPopoverMap[data.sceneId]"
+                    @input="handleScenePopoverChange(data, $event)"
+                  >
+                    <template slot="reference">
+                      <div class="ui-advanced-filter-scene-manage__tools-more" :class="{'is-active': showPopoverMap[data.sceneId]}" title="更多">
+                        <ui-icon class="ui-advanced-filter-scene-manage__tools-icon" name="more-line"></ui-icon>
+                      </div>
+                    </template>
+                    <div class="ui-advanced-filter-scene-manage__tools-menu">
+                      <div class="ui-advanced-filter-scene-manage__tools-menu-item" v-if="data.isSystem !== 1" @click="handleEditClick(data)">编辑</div>
+                      <div class="ui-advanced-filter-scene-manage__tools-menu-item is-divided" v-if="data.isDefault !== 1 && type === 'showArea'" @click="handleSettingDefaultClick(data)">设为默认</div>
+                      <div class="ui-advanced-filter-scene-manage__tools-menu-item is-danger" v-if="data.isSystem !== 1" @click="handleDeleteClick(data)">删除</div>
+                    </div>
+                  </ui-popover>
+                </template>
+              </div>
+            </template>
+          </advanced-filter-scene-transfer>
+        </div>
+      </ui-form-cell>
+    </ui-form-row>
+    <ui-form-row>
+      <ui-form-cell :show-label="false">
+        <ui-button @click="handleAddClick" icon="add-line">新建场景</ui-button>
+      </ui-form-cell>
+    </ui-form-row>
+    <ui-toolbar slot="toolbar">
+      <ui-toolbar-item>
+        <ui-button>取消</ui-button>
+      </ui-toolbar-item>
+      <ui-toolbar-item>
+        <ui-button type="primary" :click="handleConfirmClick">确定</ui-button>
+      </ui-toolbar-item>
+    </ui-toolbar>
+    <ui-dialog
+      title="新建场景"
+      size="medium"
+      v-model="showAddDialog"
+    >
+      <advanced-filter-scene-form
+        :field-data="fieldData"
+        :confirm-method="createSceneMethod"
+      >
+      </advanced-filter-scene-form>
+    </ui-dialog>
+    <ui-dialog
+      title="编辑场景"
+      size="medium"
+      v-model="showEditDialog"
+    >
+      <advanced-filter-scene-form
+        :data="currentScene"
+        :field-data="fieldData"
+        :confirm-method="updateSceneMethod"
+      >
+      </advanced-filter-scene-form>
+    </ui-dialog>
+    <ac-loading :visible="loading"></ac-loading>
+  </ui-form>
+</template>
+<script>
+import AdvancedFilterSceneForm from './advanced-filter-scene-form'
+import AdvancedFilterSceneTransfer from './advanced-filter-scene-transfer'
+import AcTips from '../../common/tips'
+import AcLoading from '../../common/loading'
+
+export default {
+  name: 'UiAdvancedFilterSceneManage',
+  components: {
+    AcTips,
+    AcLoading,
+    AdvancedFilterSceneForm,
+    AdvancedFilterSceneTransfer
+  },
+  props: {
+    allSceneData: {
+      type: Array
+    },
+    hideScene: {
+      type: Array
+    },
+    fieldData: {
+      type: Array
+    },
+    fetchConfigMethod: {
+      type: Function
+    },
+    updateConfigMethod: {
+      type: Function
+    },
+    updateSceneMethod: {
+      type: Function
+    },
+    createSceneMethod: {
+      type: Function
+    },
+    deleteSceneMethod: {
+      type: Function
+    },
+    saveDefaultSceneMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      showSceneIds: [],
+      currentScene: null,
+      showAddDialog: false,
+      showEditDialog: false,
+      showPopoverMap: {}
+    }
+  },
+  created () {
+    if (this.fetchConfigMethod) {
+      this.loading = true
+      this.fetchConfigMethod().then(() => {
+        this.syncShowSceneIds()
+      }).finally(() => {
+        this.loading = false
+      })
+    } else {
+      this.syncShowSceneIds()
+    }
+  },
+  watch: {
+    hideScene () {
+      this.syncShowSceneIds()
+    }
+  },
+  methods: {
+    syncShowSceneIds () {
+      if (this.hideScene && this.hideScene.length) {
+        this.showSceneIds = (this.allSceneData || []).filter(v => !this.hideScene.includes(v.sceneId)).map(v => v.sceneId)
+      } else {
+        this.showSceneIds = (this.allSceneData || []).map(v => v.sceneId)
+      }
+    },
+    handleScenePopoverChange (scene, value) {
+      this.$set(this.showPopoverMap, scene.sceneId, value)
+    },
+    handleAddClick () {
+      this.showAddDialog = true
+    },
+    handleEditClick (scene) {
+      this.currentScene = scene
+      this.showEditDialog = true
+      this.$set(this.showPopoverMap, scene.sceneId, false)
+    },
+    handleDeleteClick (scene) {
+      this.deleteSceneMethod && this.deleteSceneMethod({
+        data: scene
+      })
+      this.$set(this.showPopoverMap, scene.sceneId, false)
+    },
+    handleConfirmClick () {
+      if (!this.updateConfigMethod) {
+        return
+      }
+      return this.updateConfigMethod({
+        showSceneIds: this.showSceneIds,
+        hideSceneIds: (this.allSceneData || []).filter(v => !this.showSceneIds.includes(v.sceneId)).map(v => v.sceneId)
+      })
+    },
+    handleSettingDefaultClick (scene) {
+      if (!this.saveDefaultSceneMethod) {
+        return
+      }
+      this.$set(this.showPopoverMap, scene.sceneId, false)
+      return this.saveDefaultSceneMethod({
+        data: scene
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter-scene-manage__tools{
+  display: flex;
+  flex-direction: row;
+  font-size: 12px;
+}
+.ui-advanced-filter-scene-manage__tools-item{
+  margin-left: 6px;
+}
+.ui-advanced-filter-scene-manage__tools-more{
+  height: 24px;
+  line-height: 24px;
+  border-radius: 3px;
+  padding: 0 6px;
+  &.is-active {
+    .ui-advanced-filter-scene-manage__tools-icon{
+      color: #0052CC;
+    }
+  }
+}
+.ui-advanced-filter-scene-manage__tools-icon{
+  color: #999;
+  cursor: pointer;
+  &.is-primary {
+    &:hover {
+      color: #0052CC;
+    }
+  }
+  &.is-danger {
+    &:hover {
+      color: #f56c6c;
+    }
+  }
+}
+.ui-advanced-filter-scene-manage__tools-menu{
+  padding: 6px 0;
+  min-width: 100px;
+  min-height: 24px;
+}
+.ui-advanced-filter-scene-manage__tools-menu-item{
+  padding: 6px 12px;
+  cursor: pointer;
+  vertical-align: top;
+  &.is-danger {
+    color: #f56c6c;
+  }
+  &:hover {
+    background-color: #f3f3f3;
+  }
+}
+.ui-advanced-filter-scene-manage__tools-menu-item.is-divided {
+  position: relative;
+}
+.ui-advanced-filter-scene-manage__default{
+  font-size: 14px;
+  background-color: #fb9244;
+  font-weight: bold;
+  color: #fff;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  display: inline-block;
+  transform: scale(.7);
+  vertical-align: top;
+  margin-top: 2px;
+}
+</style>

package/components/advanced-filter/advanced-filter-scene-transfer.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="ui-advanced-filter-scene-transfer">
+    <div class="ui-advanced-filter-scene-transfer__panel">
+      <div class="ui-advanced-filter-scene-transfer__panel-head">
+        <ui-checkbox
+          :indeterminate="showSceneCheckIndeterminate"
+          :value="showSceneCheckAll"
+          @input="handleShowCheckAllChange"
+        >显示的场景</ui-checkbox>
+      </div>
+      <div class="ui-advanced-filter-scene-transfer__panel-body">
+        <template v-if="showSceneData && showSceneData.length">
+          <div class="ui-advanced-filter-scene-transfer__menu">
+            <ui-checkbox-group v-model="checkShowSceneIds">
+              <ui-sortable @sort="handleShowSceneSortChange">
+                <ui-sortable-item
+                  v-for="scene in showSceneData"
+                  :key="scene.sceneId"
+                >
+                  <div
+                    class="ui-advanced-filter-scene-transfer__menu-item"
+                    @mouseenter="handleMenuItemMouseEnter(scene)"
+                    @mouseleave="handleMenuItemMouseLeave(scene)"
+                  >
+                    <div class="ui-advanced-filter-scene-transfer__menu-item-main" :title="scene.name">
+                      <ui-checkbox :label="scene.sceneId">{{ scene.name }}</ui-checkbox>
+                    </div>
+                    <div class="ui-advanced-filter-scene-transfer__menu-item-extend">
+                      <slot name="item-extend" :data="scene" type="showArea"></slot>
+                    </div>
+                  </div>
+                </ui-sortable-item>
+              </ui-sortable>
+            </ui-checkbox-group>
+          </div>
+        </template>
+        <template v-else>
+          <div class="ui-advanced-filter-scene-transfer__empty">
+            <ui-empty text="暂无显示场景数据"></ui-empty>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="ui-advanced-filter-scene-transfer__toolbar">
+      <div class="ui-advanced-filter-scene-transfer__toolbar-item">
+        <ui-button @click="handleLeftClick" :disabled="!checkHideSceneIds || !checkHideSceneIds.length">左移</ui-button>
+      </div>
+      <div class="ui-advanced-filter-scene-transfer__toolbar-item">
+        <ui-button @click="handleRightClick" :disabled="!checkShowSceneIds || !checkShowSceneIds.length">右移</ui-button>
+      </div>
+    </div>
+    <div class="ui-advanced-filter-scene-transfer__panel">
+      <div class="ui-advanced-filter-scene-transfer__panel-head">
+        <ui-checkbox
+          :indeterminate="hideSceneCheckIndeterminate"
+          :value="hideSceneCheckAll"
+          @input="handleHideCheckAllChange"
+        >隐藏的场景</ui-checkbox>
+      </div>
+      <div class="ui-advanced-filter-scene-transfer__panel-body">
+          <template v-if="hideSceneData && hideSceneData.length">
+            <div class="ui-advanced-filter-scene-transfer__menu">
+              <ui-checkbox-group v-model="checkHideSceneIds">
+                <div
+                  class="ui-advanced-filter-scene-transfer__menu-item"
+                  v-for="scene in hideSceneData"
+                  :key="scene.sceneId"
+                  @mouseenter="handleMenuItemMouseEnter(scene)"
+                  @mouseleave="handleMenuItemMouseLeave(scene)"
+                >
+                  <div class="ui-advanced-filter-scene-transfer__menu-item-main" :title="scene.name">
+                    <ui-checkbox :label="scene.sceneId">{{ scene.name }}</ui-checkbox>
+                  </div>
+                  <div class="ui-advanced-filter-scene-transfer__menu-item-extend">
+                    <slot name="item-extend" :data="scene" type="hideArea"></slot>
+                  </div>
+                </div>
+              </ui-checkbox-group>
+            </div>
+          </template>
+          <template v-else>
+            <div class="ui-advanced-filter-scene-transfer__empty">
+              <ui-empty text="暂无隐藏场景数据"></ui-empty>
+            </div>
+          </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterSceneTransfer',
+  props: {
+    value: {
+      type: Array
+    },
+    allSceneData: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      hoverItem: null,
+      checkShowSceneIds: [],
+      checkHideSceneIds: []
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value || []
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    showSceneData () {
+      if (!this.innerValue || !this.innerValue.length) {
+        return []
+      }
+      return this.allSceneData.filter(v => this.innerValue.includes(v.sceneId))
+    },
+    hideSceneData () {
+      if (!this.innerValue || !this.innerValue.length) {
+        return this.allSceneData
+      }
+      return this.allSceneData.filter(v => !this.innerValue.includes(v.sceneId))
+    },
+    showSceneCheckIndeterminate () {
+      return this.checkShowSceneIds.length > 0 && this.checkShowSceneIds.length < this.showSceneData.length
+    },
+    showSceneCheckAll () {
+      return this.checkShowSceneIds.length > 0 && this.checkShowSceneIds.length >= this.showSceneData.length
+    },
+    hideSceneCheckIndeterminate () {
+      return this.checkHideSceneIds.length > 0 && this.checkHideSceneIds.length < this.hideSceneData.length
+    },
+    hideSceneCheckAll () {
+      return this.checkHideSceneIds.length > 0 && this.checkHideSceneIds.length < this.hideSceneData.length
+    }
+  },
+  watch: {
+    sceneData () {
+      this.checkInvalidSceneData()
+    }
+  },
+  methods: {
+    checkInvalidSceneData () {
+      this.checkShowSceneIds = (this.checkShowSceneIds || []).filter(v => this.allSceneData.some(vv => vv.sceneId === v))
+      this.checkHideSceneIds = (this.checkHideSceneIds || []).filter(v => this.allSceneData.some(vv => vv.sceneId === v))
+    },
+    handleShowSceneSortChange (evt) {
+      const nextActiveApp = [...this.showSceneData]
+      const sourceItem = this.showSceneData[evt.oldIndex]
+      nextActiveApp.splice(evt.oldIndex, 1)
+      nextActiveApp.splice(evt.newIndex, 0, sourceItem)
+      this.innerValue = nextActiveApp.map(v => v.sceneId)
+    },
+    handleLeftClick () {
+      const checkHideSceneIds = [].concat(this.checkHideSceneIds, this.showSceneData.map(v => v.sceneId))
+      this.checkHideSceneIds = []
+      this.innerValue = this.allSceneData.filter(v => checkHideSceneIds.includes(v.sceneId)).map(v => v.sceneId)
+    },
+    handleRightClick () {
+      const checkShowSceneIds = [].concat(this.checkShowSceneIds, this.hideSceneData.map(v => v.sceneId))
+      this.checkShowSceneIds = []
+      this.innerValue = this.allSceneData.filter(v => !checkShowSceneIds.includes(v.sceneId)).map(v => v.sceneId)
+    },
+    handleShowCheckAllChange (value) {
+      if (value) {
+        this.checkShowSceneIds = this.showSceneData.map(v => v.sceneId)
+      } else {
+        this.checkShowSceneIds = []
+      }
+    },
+    handleHideCheckAllChange (value) {
+      if (value) {
+        this.checkHideSceneIds = this.hideSceneData.map(v => v.sceneId)
+      } else {
+        this.checkHideSceneIds = []
+      }
+    },
+    handleMenuItemMouseEnter (item) {
+      // clearTimeout(this._hoverTimer)
+      // this.hoverItem = item
+    },
+    handleMenuItemMouseLeave () {
+      // clearTimeout(this._hoverTimer)
+      // this._hoverTimer = setTimeout(() => {
+      //   this.hoverItem = null
+      // }, 100)
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._hoverTimer)
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter-scene-transfer{
+  display: flex;
+  flex-direction: row;
+  height: 360px;
+}
+.ui-advanced-filter-scene-transfer__panel{
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.ui-advanced-filter-scene-transfer__toolbar{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.ui-advanced-filter-scene-transfer__toolbar-item{
+  margin: 12px;
+}
+.ui-advanced-filter-scene-transfer__panel-head{
+  border-bottom: 1px solid #ddd;
+  background-color: #f9f9f9;
+  padding: 3px 18px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.ui-advanced-filter-scene-transfer__panel-body{
+  flex: 1;
+  min-height: 0;
+}
+.ui-advanced-filter-scene-transfer__menu {
+  height: 100%;
+  overflow: auto;
+  padding: 6px 0;
+  box-sizing: border-box;
+}
+.ui-advanced-filter-scene-transfer__menu-item {
+  padding: 6px 6px 6px 18px;
+  line-height: 24px;
+  height: 24px;
+  display: flex;
+  flex-direction: row;
+  box-sizing: content-box;
+  transition: all .25s;
+  cursor: pointer;
+  &:hover {
+    background-color: #f3f3f3;
+  }
+  .ui-checkbox {
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  .el-checkbox__label{
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+.ui-advanced-filter-scene-transfer__menu-item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ui-advanced-filter-scene-transfer__empty{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>