@wp1001/ui 2.9.13

package/packages/components/xtable/searcher.js

@@ -0,0 +1,477 @@
+import render, { OPS, COMPONENT_OPS } from './searcher.jsx'
+import { Message, Confirm, Prompt } from '../../utils/index.js'
+
+const { storage } = StardustBrowser
+const { deepCopy } = StardustJs.funcs
+
+export default {
+  name: 'Searcher',
+  props: {
+    uid: String,
+    columns: Array,
+    config: Object
+  },
+  emits: ['search', 'save'],
+  data () {
+    return {
+      visible: false,
+      activeName: 'search',
+      sortableColumns: [],
+      sortOptions: [
+        { text: '升序', value: 'asc' },
+        { text: '降序', value: 'desc' }
+      ],
+      sorts: [],
+      conditionNo: 1,
+      conditions: [],
+      expression: '',
+      viewName: '',
+      views: [],
+      tourGuide: {
+        visible: false,
+        steps: [
+          {
+            target: '.views-select', title: '1. 选择视图',
+            description: `
+              <div style="color: var(--el-color-danger)">视图，是一组查询条件。</div>
+              这里选择下拉框里的某个视图，然后可以利用此视图进行数据查询。<br><br>
+              如果还没有自定义的视图，则需要添加。鼠标放到下拉框上，点击下拉框右侧的小叉号，以取消选中当前的默认视图，然后才能去新增条件，并保存为新的视图。<br><br>
+              <div style="color: var(--el-color-success)">现在，请试着点击下拉框右侧的小叉号。</div>
+            `
+          },
+          {
+            target: '.add-condition', title: '2. 新增条件',
+            description: `
+              这里可添加任意多个查询条件，每个条件可：
+              <ol style="list-style: disc; padding-left: 13px;">
+                <li>选择任意字段</li>
+                <li>选择任意查询方式</li>
+                <li>填写任意值，或选择任意选项、时间</li>
+              </ol>
+              然后，任意组合这些查询条件，从而可进行任意查询。<br><br>
+              <div style="color: var(--el-color-success)">现在，请试着点击"新增条件"按钮。</div>
+            `
+          },
+          {
+            target: '.x-select.field-select', title: '3. 选择字段',
+            description: `
+              这里有所有你需要查看、操作的字段，可以选择其中任意一个。<br><br>
+              <div style="color: var(--el-color-success)">现在，请试着选择某个字段。</div>
+            `
+          },
+          {
+            target: '.x-select.condition-select', title: '4. 选择查询方式',
+            description: `
+              这里有所有你需要用到的查询方式，不同的字段类型对应着不同的查询方式，可选择提供的任意一个方式。<br><br>
+              <div style="color: var(--el-color-success)">现在，请试着选择某个查询方式。</div>
+            `
+          },
+          {
+            target: '.value-container', title: '5. 填写值/选择选项、时间',
+            description: `
+              这里填写你要查询的关键词，或选择对应的下拉选项，或选择时间。<br><br>
+              <div style="color: var(--el-color-success)">现在，请试着填写某个关键词，或选择某个选项、时间。</div>
+            `
+          },
+          {
+            target: '.condition-expression', title: '6. 组合查询条件',
+            description: `
+              鉴于你可以添加多个条件，每个条件可任意组合，且支持数学逻辑中的“与”、“或”关系。<br>
+              这里就需要明确表达出你想用哪几个条件来查询，并且这些条件是以什么样的方式来组合。<br>
+              示例如下：<br>
+              <ol style="list-style: disc; padding-left: 13px;">
+                <li>条件1、条件2、条件3同时成立，表达式为：<span style="color: var(--el-color-warning)">1 and 2 and 3</span></li>
+                <li>条件1、条件2同时成立，或者条件3成立，表达式为：<span style="color: var(--el-color-warning)">(1 and 2) or 3</span></li>
+                <li>条件1、条件2同时成立，或条件2、条件3同时成立，表达式为：<span style="color: var(--el-color-warning)">(1 and 2) or (2 and 3)</span></li>
+              </ol>
+              <div style="color: var(--el-color-primary)">你想简单查询，表达式就非常简单。如果你想复杂查询，那么表达式就需要按需填写了。</div>
+              <br>
+              <div style="color: var(--el-color-success)">
+                现在，请试着填写表达式。如果你刚刚只添加了一个条件，且其序号为1，那么这里的表达式暂时填写
+                <span style="color: var(--el-color-warning)">1</span>
+                就好
+              </div>
+            `
+          },
+          {
+            target: '.save-view', title: '7. 保存视图',
+            description: `
+              刚才你已经新增了若干个条件，并且填写了条件表达式。现在可以保存这些条件为视图，这样下次可以直接选择此视图方便地查询数据。<br><br>
+              <div style="color: var(--el-color-success)">现在，点击“保存当前视图”按钮，并为其填写一个合适的名字。</div>
+            `
+          },
+          {
+            target: '.searcher.pc-x-drawer .el-drawer__footer .el-button--primary', title: '8. 查询数据',
+            description: `
+              现在，上面已经有了查询条件，试着点击“查询”按钮，即可查询数据了。
+            `
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    key () {
+      return `Searcher[${this.uid}]`
+    },
+    currentView () {
+      return this.views.find(v => v.name === this.viewName)
+    }
+  },
+  watch: {
+    config: 'init'
+  },
+  created () {
+    this.init()
+  },
+  render,
+  methods: {
+    init () {
+      let { views = [], viewName, ...others } = this.uid && storage.local.getJson(this.key, {}) || {}
+      if (this.config.views) {
+        this.config.views.forEach(view => view.is_system = true)
+        views = this.config.views.concat(views)
+      }
+      if (views.length && !viewName) viewName = views[0].name
+      Object.assign(this, { views, viewName })
+
+      const settings = storage.local.getJson('Settings[' + this.uid + ']')
+      if (settings?.viewName) this.viewName = settings.viewName
+
+      this.sortableColumns = this.columns.filter(col => !col.virtual)
+
+      if (this.viewName) {
+        this.handleSelectView(this.viewName)
+      } else {
+        this.setCurrentView(this.config.traditional ? this.config : others)
+      }
+    },
+    open () {
+      this.visible = true
+    },
+    close () {
+      this.visible = false
+    },
+    getCurrentView () {
+      return {
+        sorts: this.sorts,
+        conditionNo: this.conditionNo,
+        conditions: this.conditions.map(con => {
+          const { item, ops, component, ...others } = con
+          return others
+        }),
+        expression: this.expression
+      }
+    },
+    saveCache () {
+      const cache = { views: this.views.filter(view => !view.is_system) }
+      if (this.viewName && this.currentView) {
+        cache.viewName = this.viewName
+        Object.assign(this.currentView, this.getCurrentView())
+      } else {
+        Object.assign(cache, this.getCurrentView())
+      }
+      storage.local.setJson(this.key, cache)
+    },
+    setCurrentView (view) {
+      if (!view) return
+      view.conditions?.forEach(con => {
+        const { prop, op, value, universal } = con
+        con.item = this.columns.find(col => col.prop === prop)
+        this.handleSelectField(con, prop)
+        this.handleSelectOp(con, op)
+        con.value = value
+        const comp = con.item.comp || con.component
+        con.ops = COMPONENT_OPS[universal ? 'universal' : comp].map(key => OPS[key])
+      })
+      if (!view.conditionNo && view.conditions?.length) {
+        view.conditionNo = Math.max.apply(null, view.conditions.map(con => con.no)) + 1
+      }
+      this.viewName = view.name
+      Object.assign(this, view)
+    },
+    handleSearch () {
+      let params = null
+      try {
+        params = this.calcParams()
+      } catch (err) {
+        Message.w(err.toString())
+        return false
+      }
+      this.uid && params && this.saveCache()
+      params = params || { where: {} }
+      params.page = 1
+      this.$emit('search', params)
+      this.visible = false
+      return true
+    },
+    handleReset () {
+      const view = {
+        sorts: [],
+        conditionNo: 1,
+        conditions: [],
+        expression: ''
+      }
+      Object.assign(this, view)
+      this.setCurrentView(view)
+    },
+    calcParams () {
+      const tree = this.calcTree()
+      if (!tree) return
+      const parse = (tree, where) => {
+        const branch = []
+        const type = '[Op.' + tree.type + ']'
+        where[type] = branch
+        for (let item of tree.items) {
+          if (typeof item === 'string') {
+            const condition = this.conditions.find(con => con.no === item * 1)
+            if (!condition) {
+              throw '条件不存在: ' + item
+            } else {
+              if (!this.checkFilled(condition)) {
+                if (this.config.traditional || this.config.ignoreUnfilled) continue
+                throw '条件不完整: ' + item
+              }
+            }
+            branch.push(this.parseCondition(condition))
+          } else {
+            const sub = {}
+            branch.push(sub)
+            parse(item, sub)
+          }
+        }
+        if (!branch.length) delete where[type]
+      }
+      const where = {}
+      parse(tree, where)
+      const params = { where }
+      if (this.sorts.length) {
+        params.order = deepCopy(this.sorts)
+      }
+      return params
+    },
+    calcTree (normalize = true) {
+      const expression = this.expression.trim()
+        .replaceAll('&&', 'and')
+        .replaceAll('||', 'or')
+        .replace(/and/ig, 'and')
+        .replace(/or/ig, 'or')
+      if (!expression) return null
+      const symbols = expression.split(/(\(|\)|\s)/).filter(p => p.trim())
+
+      const calc = (tree, symbols) => {
+        while (symbols.length) {
+          const ele = symbols.shift()
+          if (['and', 'or'].includes(ele)) {
+            if (tree.type && tree.type !== ele) {
+              throw '串联不同逻辑表达式请使用小括号区分'
+            }
+            tree.type = ele
+          } else if (ele === '(') {
+            const item = { type: '', items: [] }
+            tree.items.push(item)
+            item._parent = tree
+            calc(item, symbols)
+            break
+          } else if (ele === ')') {
+            calc(tree._parent, symbols)
+            delete tree._parent
+          } else {
+            tree.items.push(ele)
+          } 
+        }
+      }
+      const tree = { type: '', items: [] }
+      calc(tree, symbols)
+      if (normalize) {
+        tree.type ||= 'and'
+      }
+
+      return tree
+    },
+    calcExpression (tree) {
+      const calc = (branch) => {
+        if (!branch) return ''
+        if (typeof branch === 'string') return branch
+        const { type, items } = branch
+        if (!items.length) return ''
+        return '(' + items.map(calc).filter(e => e).join(' ' + type + ' ') + ')'
+      }
+      let expression = calc(tree).slice(1, -1)
+      while (/\(\d+\)/.test(expression)) {
+        expression = expression.replace(/\((\d+)\)/g, '$1')
+      }
+      return expression
+    },
+    parseCondition (condition) {
+      let { item, component, prop, op, value } = condition
+      const where = {}
+      if (op === 'special') {
+        const isNot = value.startsWith('NOT_')
+        const isNe = value.startsWith('NE_')
+        if (value.includes('NULL')) {
+          value = null
+        } else if (value.includes('BLANK')) {
+          value = ''
+        }
+        if (isNot) {
+          value = { '[Op.not]': value }
+        } else if (isNe) {
+          value = { '[Op.ne]': value }
+        }
+        where[prop] = value
+        return where
+      }
+      if (op === 'like' || op === 'notLike') {
+        value = '%' + value + '%'
+      }
+      if (op === 'in' || op === 'notIn') {
+        if (!item.options) {
+          value = value.split(',')
+          if (component === 'ElInputNumber' || component === 'el-input-number' || condition.type === 'number') {
+            value = value.map(Number)
+          }
+        }
+      }
+      where[prop] = { [`[Op.${op}]`]: value }
+      return where
+    },
+    checkFilled (condition) {
+      if (!condition.prop || !condition.op) {
+        return false
+      }
+      const value = Array.isArray(condition.value) ? condition.value : [condition.value]
+      return value.length && value.every(ele => {
+        return typeof ele !== 'string' || ele.length
+      })
+    },
+    handleAdd () {
+      this.conditions.push({
+        no: this.conditionNo ++,
+        prop: '',
+        op: '',
+        value: '',
+        component: 'ElInput',
+        ops: [],
+        item: {}
+      })
+    },
+    handleDelete (index) {
+      const no = this.conditions[index].no + ''
+      const tree = this.calcTree(false)
+      const remove = (branch) => {
+        if (!branch) return
+        for (let i = branch.items.length - 1; i >= 0; i--) {
+          if (branch.items[i] === no) {
+            branch.items.splice(i, 1)
+          } else if (typeof branch.items[i] === 'object') {
+            remove(branch.items[i])
+          }
+        }
+      }
+      remove(tree)
+      this.expression = this.calcExpression(tree)
+      this.conditions.splice(index, 1)
+    },
+    handleSelectField (condition, value) {
+      condition.value = ''
+      condition.prop = value
+      condition.item = this.columns.find(col => col.prop === condition.prop) || {}
+      const { options, type, formAttrs = {} } = condition.item
+      const config = { ...condition.item, ...formAttrs }
+      const {
+        comp, universal,
+        visible, canAdd, canEdit, required, slot, span,
+        tableAttrs, formAttrs: fa, tagTypes, tagValues, width, minWidth,
+        disabled, readonly,
+        ...others
+      } = config
+      others.clearable ??= true
+      condition.config = others
+      condition.component = comp ||
+        options && 'XSelect' ||
+        type === 'number' && 'ElInputNumber' ||
+        'ElInput'
+      condition.ops = COMPONENT_OPS[universal ? 'universal' : condition.component].map(key => OPS[key])
+      condition.op = condition.ops[0].value
+      if (condition.component === 'ElDatePicker') {
+        condition.component = 'ElInput'
+        others.type = 'date'
+      }
+      if (others.type === 'textarea') delete others.type
+    },
+    handleSelectOp (condition, value) {
+      condition.op = value
+      if (value === 'between') {
+        condition.value = ['', '']
+      } else if (['in', 'notIn'].includes(value)) {
+        condition.value = []
+      }
+      if (
+        value === 'special'
+        || !['between', 'in', 'notIn'].includes(value) && Array.isArray(value)
+      ) {
+        condition.value = ''
+      }
+    },
+    handleSelectView (name) {
+      if (!name) {
+        this.handleReset()
+      } else {
+        const view = this.views.find(v => v.name === name)
+        if (!view) {
+          this.viewName = ''
+          this.handleReset()
+          return this.saveCache()
+        }
+        this.setCurrentView(deepCopy(view))
+      }
+    },
+    async handleSaveView () {
+      const view = this.getCurrentView()
+      let isSystem = false
+      if (this.viewName && this.currentView) {
+        isSystem = this.currentView.is_system
+        if (!isSystem) {
+          Object.assign(this.currentView, view)
+          this.saveCache()
+          Message.s('视图保存成功')
+          return
+        }
+      }
+      let name = await Prompt({
+        title: '提示',
+        message: (isSystem ? '系统视图不可修改，可保存为新视图，' : '') + '请输入新视图名称'
+      })
+      name = name.trim()
+      if (!name) return
+      if (this.views.some(v => v.name === name)) {
+        return Message.w('视图名称 ' + name + ' 已存在，请重新输入')
+      }
+      this.views.push({ name, ...view })
+      this.viewName = name
+      this.handleSelectView(name)
+      this.saveCache()
+      Message.s('视图保存成功')
+    },
+    async handleDeleteView (view, index, e) {
+      e.stopPropagation()
+      if (!await Confirm.w({ title: '提示', message: `确定删除查询视图 ${view.name} 吗？` })) return
+      if (this.viewName === view.name) {
+        this.viewName = ''
+        this.handleReset()
+      }
+      this.views.splice(index, 1)
+      this.saveCache()
+      Message.s(`视图 [${view.name}] 已删除`)
+    },
+    handleSearchView (view) {
+      this.setCurrentView(view)
+      if (!this.handleSearch()) return
+      this.$emit('save', { viewName: view.name })
+    },
+    handleAddSort () {
+      this.sorts.push([this.sortableColumns[0].prop, 'asc'])
+    }
+  }
+}