@wp1001/ui 2.9.13

package/packages/components/xtable/searcher.jsx

@@ -0,0 +1,330 @@
+import { h, resolveComponent } from 'vue'
+
+export const OPS = {
+  eq: { text: '等于', value: 'eq' },
+  ne: { text: '不等于', value: 'ne' },
+  gt: { text: '大于', value: 'gt' },
+  gte: { text: '大于等于', value: 'gte' },
+  lt: { text: '小于', value: 'lt' },
+  lte: { text: '小于等于', value: 'lte' },
+  'in': { text: '包含', value: 'in' },
+  like: { text: '模糊匹配', value: 'like' },
+  notIn: { text: '不包含', value: 'notIn' },
+  notLike: { text: '模糊不匹配', value: 'notLike' },
+  between: { text: '介于', value: 'between' },
+  special: { text: '特殊值', value: 'special' }
+}
+
+export const SPECIAL_OPTIONS = [
+  { text: 'NULL', value: 'NULL' },
+  { text: '空文本', value: 'BLANK' },
+  { text: '非NULL', value: 'NOT_NULL' },
+  { text: '非空文本', value: 'NE_BLANK' },
+]
+
+export const COMPONENT_OPS = {
+  'XSelect': ['eq', 'ne', 'in', 'notIn', 'special'],
+  'XRadios': ['eq', 'ne', 'special'],
+  'XCheckboxs': ['eq', 'ne', 'in', 'notIn', 'special'],
+  'XSearcher': ['eq', 'ne', 'special'],
+  'ElDatePicker': ['eq', 'gt', 'gte', 'lt', 'lte', 'between', 'in', 'notIn', 'special'],
+  'ElInputNumber': ['eq', 'ne', 'gt', 'gte', 'lt', 'lte', 'between', 'in', 'notIn', 'special'],
+  'ElInput': ['eq', 'ne', 'like', 'notLike', 'between', 'in', 'notIn', 'special'],
+  'universal': ['eq', 'ne', 'gt', 'gte', 'lt', 'lte', 'in', 'like', 'notIn', 'notLike', 'between', 'special']
+}
+COMPONENT_OPS['x-select'] = COMPONENT_OPS['XSelect']
+COMPONENT_OPS['XSelectV2'] = COMPONENT_OPS['XSelect']
+COMPONENT_OPS['x-select-v2'] = COMPONENT_OPS['XSelect']
+COMPONENT_OPS['x-radios'] = COMPONENT_OPS['XRadios']
+COMPONENT_OPS['x-checkboxs'] = COMPONENT_OPS['XCheckboxs']
+COMPONENT_OPS['x-searcher'] = COMPONENT_OPS['XSearcher']
+COMPONENT_OPS['XImageUploader'] = COMPONENT_OPS['ElInput']
+COMPONENT_OPS['x-image-uploader'] = COMPONENT_OPS['ElInput']
+COMPONENT_OPS['XFileUploader'] = COMPONENT_OPS['ElInput']
+COMPONENT_OPS['x-file-uploader'] = COMPONENT_OPS['ElInput']
+COMPONENT_OPS['el-date-picker'] = COMPONENT_OPS['ElDatePicker']
+COMPONENT_OPS['el-input-number'] = COMPONENT_OPS['ElInputNumber']
+COMPONENT_OPS['el-input'] = COMPONENT_OPS['ElInput']
+
+export default function () {
+  const size = window.isMobile ? 'small' : ''
+  const {
+    $attrs, config, columns, visible, conditions, expression, uid, views, viewName, sorts, currentView,
+    handleSearch, handleReset, handleAdd, handleDelete, handleSelectField, handleSelectOp,
+    handleSelectView, handleSaveView, handleDeleteView, handleSearchView
+  } = this
+
+  const tourGuide = h(resolveComponent('el-tour'), {
+    modelValue: this.tourGuide.visible,
+    'onUpdate:modelValue': value => this.tourGuide.visible = value
+  }, this.tourGuide.steps.map(s => h(resolveComponent('el-tour-step'), s, {
+    default: () => h('div', { innerHTML: s.description })
+  })))
+
+  return (
+    <x-dialog
+      append-to-body
+      drawer
+      width="700px"
+      title={$attrs.title || '高级查询'}
+      class="searcher"
+      cancel-text="重置"
+      submit-text={$attrs['submit-text'] || '查询'}
+      {...{
+        modelValue: visible,
+        'onUpdate:modelValue': value => this.visible = value,
+        onCancel: handleReset,
+        onSubmit: handleSearch
+      }}
+    >
+      <el-tabs
+        {...{
+          modelValue: this.activeName,
+          'onUpdate:modelValue': value => this.activeName = value,
+        }}
+      >
+        <el-tab-pane name="search" label="查询设置" class="search">
+          {
+          config.traditional
+          ? null
+          : <el-row gutter={10} class="searcher-tools">
+              <el-col span={8}>
+                <x-button
+                  type="primary"
+                  size={size}
+                  icon="plus"
+                  class="add-condition"
+                  onClick={handleAdd}
+                >新增条件</x-button>
+              </el-col>
+              <el-col span={16} class="views-select">
+                {
+                  uid && conditions.length
+                  ? <el-button
+                    type="primary"
+                    text
+                    class="save-view"
+                    onClick={() => handleSaveView()}
+                  >保存当前视图</el-button>
+                  : null
+                }
+                {
+                  views.length
+                  ? <el-select
+                    placeholder={views.length ? '选择查询视图' : '自查询条件可保存为视图'}
+                    clearable
+                    class="views-select"
+                    {...{
+                      modelValue: viewName,
+                      'onUpdate:modelValue': value => this.viewName = value
+                    }}
+                    onChange={name => handleSelectView(name)}
+                  >
+                    {views.map((view, index) => (
+                      <el-option
+                        label={view.name}
+                        value={view.name}
+                        class="view-option flex-center"
+                      >
+                        <span>{view.name}</span>
+                        {
+                          view.is_system
+                          ? <el-tag type="success">系统</el-tag>
+                          : <el-button
+                            type="danger"
+                            plain
+                            size="small"
+                            icon="DeleteFilled"
+                            class="delete-view"
+                            onClick={e => handleDeleteView(view, index, e)}
+                          />
+                        }
+                      </el-option>
+                    ))}
+                  </el-select>
+                  : null
+                }
+              </el-col>
+              </el-row>
+          }
+          <div class="conditions">
+            {
+              conditions.map((condition, index) => {
+                return (
+                  <div class="condition flex-center" key={condition.no}>
+                    {
+                      config.traditional
+                      ? null
+                      : <el-button
+                        type="danger"
+                        size={size}
+                        plain
+                        icon="Delete"
+                        onClick={() => handleDelete(index)}
+                      />
+                    }
+                    {
+                      config.traditional
+                      ? null
+                      : <span class="title">{condition.no}</span>
+                    }
+                    <div class="expression">
+                      {
+                        config.traditional
+                        ? <el-input modelValue={condition.item.label} readonly />
+                        : <pc-x-select
+                          modelValue={condition.prop}
+                          onChange={value => handleSelectField(condition, value)}
+                          options={columns}
+                          text="label"
+                          value="prop"
+                          class="field-select"
+                        ></pc-x-select>
+                      }
+                      <pc-x-select
+                        modelValue={condition.op}
+                        onChange={value => handleSelectOp(condition, value)}
+                        options={condition.ops}
+                        class="condition-select"
+                      />
+                      <div class="value-container">
+                        {calcConditionValueComponent(this, condition)}
+                      </div>
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </div>
+          {
+            config.traditional ? null : <div>
+              <el-input
+                type="textarea"
+                autosize={{ minRows: 3, maxRows: 10 }}
+                placeholder="分组条件表达式, 使用 () and or 组合上述条件, 示例: 1, 1 and 2, (1 or 2) and 3"
+                class="condition-expression"
+                {...{
+                  modelValue: expression,
+                  'onUpdate:modelValue': value => this.expression = value
+                }}
+              ></el-input>
+            </div>
+          }
+          {
+            config.traditional ? null : <div class="view-tags">
+              <el-button type="primary" link class="guide" onClick={() => this.tourGuide.visible = true}>高级查询-使用指南</el-button>
+              <span class="search-views">搜索视图：</span>
+              {
+                views.map((view, index) => (
+                  <el-tag type="success" key={index} onClick={() => handleSearchView(view)}>{ view.name }</el-tag>
+                ))
+              }
+            </div>
+          }
+          {tourGuide}
+        </el-tab-pane>
+        {
+          !currentView || currentView.is_system
+          ? null
+          : <el-tab-pane name="sorts" label={'多列排序 [视图: ' + currentView?.name + ']'} class="sorts">
+            <el-button type="primary" icon="Plus" onClick={this.handleAddSort}>添加排序</el-button>
+            <div class="sort-list">
+              {
+                sorts.map((sort, index) => (
+                  <div
+                    key={sort[0]}
+                    data-prop={sort[0]}
+                    class="row flex-center"
+                  >
+                    <x-select
+                      {...{
+                        modelValue: sort[0],
+                        'onUpdate:modelValue': value => sort[0] = value
+                      }}
+                      options={this.sortableColumns}
+                      text="label"
+                      value="prop"
+                      teleported={false}
+                      clearable={false}
+                    />
+                    <x-radios
+                      {...{
+                        modelValue: sort[1],
+                        'onUpdate:modelValue': value => sort[1] = value
+                      }}
+                      options={this.sortOptions}
+                    />
+                    <el-button
+                      type="danger" plain icon="DeleteFilled"
+                      onClick={() => sorts.splice(index, 1)}
+                    />
+                  </div>
+                ))
+              }
+            </div>
+          </el-tab-pane>
+        }
+      </el-tabs>
+    </x-dialog>
+  )
+}
+
+function calcConditionValueComponent (vm, condition) {
+  const component = (options) => {
+    let comp = options?.component || condition.component
+    if (comp.startsWith('x-select')) {
+      comp = 'pc-' + comp
+    }
+    if (comp.includes('ploader')) comp = 'ElInput'
+    return h(
+      resolveComponent(comp),
+      Object.assign(
+        {},
+        { ...condition.config, style: undefined },
+        {
+          modelValue: condition.value,
+          'onUpdate:modelValue': (value) => condition.value = value,
+          onKeyup: e => {
+            if (e.key === 'Enter' && (!comp || !/select/i.test(comp))) {
+              vm.handleSearch()
+            }
+          }
+        },
+        options
+      )
+    )
+  }
+  const options = { multiple: false }
+  if (condition.op === 'between') {
+    return <div class="col-2">
+      {
+        component({
+          ...options,
+          modelValue: condition.value[0],
+          'onUpdate:modelValue': (value) => condition.value[0] = value
+        })
+      }
+      {
+        component({
+          ...options,
+          modelValue: condition.value[1],
+          'onUpdate:modelValue': (value) => condition.value[1] = value
+        })
+      }
+    </div>
+  } else if (['in', 'notIn'].includes(condition.op)) {
+    options.multiple = true
+    if (!condition.item.options) {
+      options.placeholder = '可以填写多项，用英文逗号分割'
+    }
+    return component(options)
+  } else if (condition.op === 'special') {
+    return component({
+      ...options,
+      component: 'pc-x-select',
+      placeholder: '请选择特殊值',
+      options: SPECIAL_OPTIONS
+    })
+  }
+  return component()
+}

package/packages/components/xtable/searcher.vue

@@ -0,0 +1,133 @@
+<script>
+export { default } from './searcher.js'
+</script>
+
+<style lang="scss" scoped>
+.searcher {
+  .views-select {
+    position: relative;
+    .el-select {
+      position: absolute;
+      right: 5px;
+      top: 0;
+      width: calc(100% - 115px);
+    }
+    .el-button {
+      width: 100px;
+      margin-right: 10px;
+    }
+  }
+  .view-tags {
+    margin-bottom: 10px;
+    .guide {
+      margin-top: 10px;
+      margin-right: 10px;
+    }
+    .search-views {
+      display: inline-block;
+      margin-top: 10px;
+      line-height: 24px;
+      vertical-align: top;
+    }
+    .el-tag {
+      margin-right: 10px;
+      margin-top: 10px;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+  .conditions {
+    margin: 10px 0;
+    max-height: 60vh;
+    overflow-y: auto;
+    border-top: 1px solid #d0dddd;
+  }
+  .condition {
+    border: 1px solid #d0dddd;
+    border-top: 0;
+    padding: 7px;
+  }
+  .el-tag {
+    cursor: pointer;
+    flex: 1;
+  }
+  .title {
+    margin: 0 10px;
+    flex: 1;
+  }
+  .expression {
+    flex: 30;
+    display: grid;
+    grid-template-columns: 27% 19% 50%;
+    column-gap: 10px;
+    & > * {
+      width: 100%;
+    }
+    .field-select {
+      max-width: 151px;
+    }
+    .condition-select {
+      max-width: 106px;
+    }
+    :deep(.value-container) > * {
+      width: 100%;
+      max-width: 280px;
+    }
+  }
+  .col-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 10px;
+    position: relative;
+    &::after {
+      content: '-';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .el-tabs {
+    height: 100%;
+    margin-top: -15px;
+    :deep(.el-tabs__content) {
+      height: calc(100% - 40px);
+      .el-tab-pane {
+        height: 100%;
+      }
+    }
+  }
+  .sorts {
+    .sort-list {
+      height: calc(100% - 10px);
+      overflow-y: auto;
+    }
+    .row {
+      justify-content: start;
+      margin: 10px 0;
+    }
+    .el-select {
+      width: 200px;
+      margin-right: 10px;
+    }
+    .el-radio-group {
+      width: 180px;
+    }
+  }
+}
+:deep(.col-2) > * {
+  width: 100% !important;
+}
+.mobile-x-dialog .expression {
+  display: block;
+  & > * {
+    margin: 3px 0;
+  }
+}
+.view-option {
+  justify-content: space-between;
+  padding: 0 10px;
+}
+</style>

package/packages/components/xtable/settings.js

@@ -0,0 +1,80 @@
+import { Confirm } from '../../utils/message.js'
+
+export default {
+  name: 'Settings',
+  props: {
+    modelValue: Object
+  },
+  emits: ['update:modelValue', 'reset', 'init', 'save'],
+  data () {
+    return {
+      activeName: 'columns',
+      columns: []
+    }
+  },
+  computed: {
+    hideColumns () {
+      const value = this.$attrs['hide-settings-columns']
+      return value === '' || value === true
+    }
+  },
+  watch: {
+    modelValue: {
+      handler (value) {
+        this.columns = value.columns.map(col => {
+          return {
+            ...col,
+            show: col.show !== false,
+            width: col.width || col.minWidth
+          }
+        })
+      },
+      immediate: true
+    }
+  },
+  async mounted () {
+    await window.DynamicLibs?.use('Sortable')
+    this.initDraggable()
+  },
+  beforeUnmount () {
+    this.sortable?.destroy()
+  },
+  methods: {
+    initDraggable () {
+      const dict = {}
+      this.columns.forEach(col => dict[col.prop] = col)
+      this.sortable = new window.Sortable(this.$refs.colsTable, {
+        sort: true,
+        draggable: '.row',
+        onEnd: (e) => {
+          const props = [...e.to.querySelectorAll('.row')].map(e => e.dataset.prop)
+          this.columns = props.map(p => dict[p])
+          this.update()
+        }
+      })
+    },
+    async handleResetColumns () {
+      if (!await Confirm.w({ message: '确定重置吗？', title: '警告' })) return
+      this.columns = []
+      this.update()
+      this.$emit('init')
+    },
+    handleToggle (column) {
+      column.show = !column.show
+      this.update()
+    },
+    update () {
+      this.columns.forEach(col => {
+        col.hide = !col.show
+      })
+      const modelValue = {
+        ...this.modelValue,
+        columns: this.columns.map(col => {
+          const { prop, label, show, hide, width } = col
+          return { prop, label, show, hide, width }
+        })
+      }
+      this.$emit('save', modelValue)
+    }
+  }
+}

package/packages/components/xtable/settings.vue

@@ -0,0 +1,77 @@
+<script>
+export { default } from './settings.js'
+</script>
+
+<template>
+  <div>
+    <el-popover
+      placement="bottom"
+      trigger="hover"
+      popper-class="table-settings"
+      v-bind="$attrs"
+    >
+      <template #reference>
+        <el-button class="settings-reference" icon="Setting" />
+      </template>
+
+      <el-tabs v-model="activeName">
+        <el-tab-pane v-if="!hideColumns" name="columns" label="展示列">
+          <el-button type="warning" plain icon="Close" @click="handleResetColumns">重置</el-button>
+          <div class="table" ref="colsTable">
+            <div
+              v-for="column in columns"
+              :key="column.prop"
+              :data-prop="column.prop"
+              class="row flex-center"
+            >
+              <el-icon><Sort /></el-icon>
+              <ElCheckbox v-model="column.show" @change="update" />
+              <span class="label overflow-text" :title="column.label" @click="handleToggle(column)">
+                {{ column.label }}
+              </span>
+              <el-input-number v-model="column.width" @change="update" />
+              <span class="unit">px</span>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.table-settings {
+  .el-tabs {
+    :deep(.el-tabs__content) {
+      max-height: 60vh !important;
+      overflow-y: auto;
+    }
+  }
+  .el-checkbox {
+    margin: 0 5px;
+  }
+  .table {
+    margin-top: 10px;
+    border-top: 1px solid #d0dddd;
+    min-height: 200px;
+  }
+  .row {
+    justify-content: space-between;
+    border: 1px solid #d0dddd;
+    padding: 5px 10px;
+    border-top: 0;
+  }
+  .label {
+    display: inline-block;
+    width: calc(100% - 200px);
+    cursor: pointer;
+  }
+  .el-input-number {
+    width: 130px;
+  }
+}
+.settings-reference {
+  padding: 0 10px;
+  font-size: 18px;
+}
+</style>