hlq-cli 1.0.0

package/templates/src/components/searchBox/height.ts

@@ -0,0 +1,9 @@
+export const HeightMap: { [key: string]: number } = {
+  input: 40,
+  select: 40,
+  date: 40,
+  time: 40,
+  cascader: 40,
+  treeSelect: 40,
+  textarea: 52,
+}

package/templates/src/components/searchBox/index.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="searchBox" ref="searchBoxRef">
+    <div
+      class="cardBox"
+      :class="state.showMore ? 'showMoreBox' : ''"
+      :style="state.showMore ? { height: listHeight + 'px' } : {}"
+    >
+      <div class="row">
+        <div
+          :style="`width: calc(100% / ${layoutMax} - 12px);`"
+          class="searchItem"
+          v-for="item in showList"
+          :key="item.key"
+        >
+          <div class="label">{{ item.label }}</div>
+          <div class="content">
+            <SearchItem
+              :config="item"
+              :formData="state.searchData"
+              @enter="search"
+              :onlyRead="false"
+            ></SearchItem>
+          </div>
+        </div>
+        <div
+          :style="`width: calc(100% / ${layoutMax} - 12px);justify-content: flex-start;`"
+          class="searchItem"
+          v-if="buttonShowRow"
+        >
+          <div class="button">
+            <el-button
+              @click="search"
+              v-if="showList.length > 0"
+              type="primary"
+            >
+              查询
+            </el-button>
+            <el-button @click="reset" v-if="showList.length > 0">
+              重置
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="searchItem"
+        v-for="item in otherList"
+        :key="item.key"
+        :style="`width: calc(100% / ${layoutMax} - 12px);`"
+      >
+        <div class="label ellipsis">{{ item.label }}</div>
+        <div class="content">
+          <SearchItem
+            :config="item"
+            :formData="state.searchData"
+            @enter="search"
+            :onlyRead="false"
+          ></SearchItem>
+        </div>
+      </div>
+    </div>
+    <div v-if="!buttonShowRow" class="openMoreBox">
+      <div class="button">
+        <el-button @click="search" v-if="showList.length > 0" type="primary">
+          查询
+        </el-button>
+        <el-button @click="reset" v-if="showList.length > 0"> 重置 </el-button>
+        <div
+          class="openMoreText"
+          v-if="otherList.length"
+          @click="state.showMore = !state.showMore"
+        >
+          {{ state.showMore ? '收起' : '展开' }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import SearchItem from '@/components/form/item.vue'
+import { chunk } from 'lodash'
+import { HeightMap } from './height'
+interface extraItem extends selectItem {
+  code: string
+  label: string
+}
+interface Props {
+  config: SearchItemConfig[]
+  /** 传入时固定一行「格子」数量（含查询按钮列），覆盖按宽度自动计算；不传则保持原逻辑 */
+  max?: number
+  extraList?: extraItem[] | null
+  buttonControl?: boolean // 是否控制按钮显隐
+  buttonList?: Array<any> // 可显示按钮列表
+  permission?: any
+  onlyRead?: boolean // 是否只读
+}
+const props = withDefaults(defineProps<Props>(), {
+  extraList: null,
+  buttonControl: false,
+})
+const searchBoxRef = ref()
+/** 未传 max 时由挂载后宽度计算得到，与改造前 state.max 一致 */
+const state = reactive({
+  searchData: {},
+  showMore: false,
+  autoMax: 3,
+})
+// 按钮是否与搜索项同行
+// 有展开按钮时增加一行
+const buttonShowRow = computed(() => {
+  return props.config.length <= layoutMax.value - 1
+})
+const layoutMax = computed(() => Math.max(2, props.max ?? state.autoMax))
+// 默认展示的搜索项
+const showList = computed(() => {
+  if (buttonShowRow.value) return props.config
+  return props.config.slice(0, layoutMax.value)
+})
+// 展开后展示的搜索项
+const otherList = computed(() => {
+  return props.config.slice(layoutMax.value)
+})
+const listHeight = computed(() => {
+  // 数组切割
+  const chunkedArray = chunk(props.config, layoutMax.value - 1)
+  let heightSum = 0
+  chunkedArray.forEach((chunk) => {
+    let MaxHeight = 0
+    chunk.forEach((item) => {
+      MaxHeight = Math.max(MaxHeight, HeightMap[item.type] || 40)
+    })
+    heightSum += MaxHeight
+  })
+  return heightSum
+})
+const emits = defineEmits(['search', 'reset', 'showMoreChange'])
+
+// 查询
+const search = () => {
+  // state.showMore = false
+  emits('search', state.searchData)
+}
+// 重置
+const reset = () => {
+  state.searchData = {}
+  emits('reset')
+}
+onMounted(() => {
+  if (props.max != null) return
+  const minWidth = 361
+  const maxWidth = 699
+  let x = Math.floor(searchBoxRef.value.clientWidth / 4)
+  x = Math.max(minWidth, Math.min(x, maxWidth))
+  state.autoMax = Math.floor(searchBoxRef.value.clientWidth / x)
+})
+watch(
+  () => [state.showMore, buttonShowRow.value],
+  () => {
+    let height = 12
+    if (!buttonShowRow.value) {
+      height += 45
+    }
+    emits(
+      'showMoreChange',
+      state.showMore ? listHeight.value + height : 40 + height,
+    )
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
+<style lang="scss" scoped>
+.el-button + .el-dropdown {
+  margin-left: 12px;
+}
+.searchBox {
+  width: 100%;
+  position: relative;
+  .cardBox {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 12px;
+    flex: 1;
+    height: 40px;
+    align-items: start;
+    overflow: hidden;
+    transition: height 0.3s;
+    // position: absolute;
+    // z-index: 99;
+    // top: 0;
+    // left: 0;
+    background-color: #fff;
+    margin-bottom: 12px;
+    .row {
+      width: 100%;
+      height: 44px;
+      display: flex;
+      align-items: center;
+      column-gap: 12px;
+      .rowBox {
+        display: flex;
+        align-items: center;
+        column-gap: 12px;
+      }
+    }
+  }
+  .showMoreBox {
+    // border-bottom: 1px solid var(--el-border-color-light);
+    margin-bottom: 0px;
+  }
+  .openMoreBox {
+    padding-bottom: 12px;
+    // border-bottom: 1px solid var(--el-border-color-light);
+    border-bottom: 1px solid #f5f4f4;
+  }
+  .searchItem {
+    width: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    margin-bottom: 12px;
+    .label {
+      margin-right: 12px;
+      width: 86px;
+      text-align: right;
+    }
+    .content {
+      width: calc(100% - 124px);
+    }
+    .button {
+      display: flex;
+    }
+  }
+  .openMoreBox {
+    cursor: pointer;
+    margin-left: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--el-color-primary);
+    .button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .openMoreText {
+        margin-left: 12px;
+      }
+    }
+  }
+}
+
+:deep() {
+  .el-button {
+    span {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

package/templates/src/components/table/index.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="queryBox" v-if="searchShow && searchConfig">
+    <SearchBox
+      @search="search"
+      @reset="reset"
+      ref="searchBoxRef"
+      :config="searchConfig"
+      :extra-list="extraList"
+      :max="max"
+      :permission="permission"
+      @showMoreChange="showMoreChange"
+    ></SearchBox>
+  </div>
+  <div class="optionBox" v-if="dropdownList && dropdownList.length > 0">
+    <el-button
+      v-for="item in dropdownList"
+      :type="item.type || 'primary'"
+      @click="command(item.code)"
+      v-if="dropdownList"
+    >
+      {{ item.label }}
+    </el-button>
+  </div>
+
+  <div
+    class="tableBox"
+    :class="{
+      tablePageBox: pageShow && pagination,
+      tabelSearchBox: searchShow && searchConfig,
+    }"
+    :style="`height: calc(100% - ${getTableHeight}px);`"
+  >
+    <el-table
+      :data="tableData"
+      style="width: 100%; height: 100%"
+      max-height="100%"
+      :row-key="rowKey"
+      @selection-change="handleSelectionChange"
+      @current-change="handleCurrentChange"
+      :highlight-current-row="selectType ? true : false"
+      :default-expand-all="defaultExpandAll"
+      ref="tableRef"
+    >
+      <el-table-column
+        fixed
+        v-if="selectType === 'checkbox'"
+        type="selection"
+      />
+      <template v-for="(item, index) in columns" :key="item.prop">
+        <el-table-column v-if="item.type === 'index'" type="index" fixed />
+        <el-table-column
+          v-else-if="item.type === 'time'"
+          :label="item.label"
+          :prop="item.prop"
+          :width="item.width"
+          :format="item.formatter"
+          :formatter="timeformatter"
+          min-width="200"
+        >
+        </el-table-column>
+        <el-table-column
+          :fixed="index === 0"
+          v-else
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :formatter="item.formatter"
+          :show-overflow-tooltip="!item.slot"
+          min-width="200"
+        >
+          <template #default="scope" v-if="item.showColor">
+            <el-text :type="scope.row[item.prop.split('.')[0]]?.displayColor">
+              {{ displayShow(scope.row, item.prop) }}
+            </el-text>
+          </template>
+          <template #default="scope" v-else-if="item.slot">
+            <slot :name="item.slot" :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column
+        v-if="option"
+        :label="option.label"
+        prop="option"
+        fixed="right"
+        class-name="optionColumn"
+        :min-width="option.actionList.length * 68"
+      >
+        <template #default="scope">
+          <template
+            v-for="item in option.actionList.length > 3
+              ? option.actionList.slice(0, 2)
+              : option.actionList.slice(0, 3)"
+          >
+            <el-popconfirm
+              :title="`确定要${item.label}吗?`"
+              @confirm="execute(item, scope.row)"
+              v-if="item.type === 'danger'"
+            >
+              <template #reference>
+                <el-link :type="item.type" style="margin-right: 12px">
+                  {{ item.label }}
+                </el-link>
+              </template>
+            </el-popconfirm>
+            <el-link
+              type="primary"
+              @click="execute(item, scope.row)"
+              style="margin-right: 12px"
+              v-else
+            >
+              {{ item.label }}
+            </el-link>
+          </template>
+
+          <template v-if="option.actionList.length > 3">
+            <el-dropdown
+              placement="bottom"
+              trigger="click"
+              class-name="moreDropdown"
+            >
+              <span class="el-link"> 更多 </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <template v-for="item in option.actionList.slice(2)">
+                    <el-dropdown-item @click="execute(item, scope.row)">
+                      {{ item.label }}
+                    </el-dropdown-item>
+                  </template>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <div class="pageBox" v-if="pageShow && pagination && state.total">
+    <el-pagination
+      size="small"
+      layout="prev, pager, next,sizes, total"
+      :total="pagination.total"
+      :page-size="pagination.pageSize"
+      v-model:current-page="pagination.currentPage"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import type { ColumnItem, TableData, OptionItem } from './table'
+import SearchBox from '@/components/searchBox/index.vue'
+import { ElMessageBox } from 'element-plus'
+import { cloneDeep, isEqual } from 'lodash'
+import type { ActionItem } from '../page/template/common'
+import dayjs from 'dayjs'
+interface extraItem extends selectItem {
+  action?: string | ActionItem // 额外按钮的操作
+  code: string
+  type?: string
+}
+interface Props {
+  pageShow?: boolean // 是否显示分页
+  searchShow?: boolean // 是否显示搜索
+  extraList?: extraItem[] | null // 额外按钮菜单
+  tableData?: Array<TableData> // 表格数据 在autoSearch为false时展示
+  columns: Array<ColumnItem> // 表格列配置
+  pagination?: PageItem // 分页
+  searchConfig?: Array<SearchItemConfig> // 搜索框配置
+  max?: number // 搜索框一行最大数量
+  selectType?: false | 'radio' | 'checkbox' // 表格选择类型(无选择 | 单选 | 多选)
+  option?: OptionItem // 操作
+  rowKey?: string // 表格数据主键
+  defaultExpandAll?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  pageShow: true,
+  searchShow: true,
+  selectType: false,
+  rowKey: 'id',
+  defaultExpandAll: false,
+})
+const state = reactive({
+  pageSize: 20,
+  currentPage: 1,
+  total: 0,
+  searchData: {},
+  tableData: [] as Array<Data>,
+  formDrawerShow: false,
+  formDrawerData: {} as Data,
+  formDrawerTitle: '',
+  formDrawerConfig: {} as FormConfig,
+  formDrawerItemConfig: [] as Array<FormItemConfig>,
+  formSubmitUrl: '',
+  selectData: [] as Array<TableData>,
+  searchHeight: 40,
+})
+const emits = defineEmits([
+  'sizeChange',
+  'currentChange',
+  'selectionChange',
+  'currentSelectChange',
+  'search',
+  'reset',
+  'upload',
+  'down',
+  'tableCommand',
+  'extraClick',
+])
+const showMoreChange = (height: number) => {
+  state.searchHeight = height
+}
+const displayShow = (data: Data, prop: string) => {
+  let showText = data
+  for (const key of prop.split('.')) {
+    if (showText[key]) {
+      showText = showText[key]
+    } else {
+      return ''
+    }
+  }
+  return showText
+}
+
+// searchPermission();
+const dropdownList = computed(() => {
+  return props.extraList || []
+})
+
+const command = (command: string) => {
+  const item = props.extraList?.find((item) => item.code === command)
+  if (item && item.action) {
+    if (typeof item.action === 'object' && item.action?.type === 'export') {
+      execute(item.action, state.searchData)
+    } else {
+      execute(item.action, {})
+    }
+  } else {
+    emits('extraClick', command)
+  }
+}
+// 计算除表格以外的控件高度
+const getTableHeight = computed(() => {
+  let height = 0
+  if (props.pageShow && props.pagination) {
+    height += 40
+  }
+  if (props.searchShow && props.searchConfig) {
+    height += state.searchHeight
+  }
+  if (dropdownList.value && dropdownList.value.length > 0) {
+    height += 44
+  }
+  return height + 18
+})
+// 页码变化
+const currentChange = (num: number) => {
+  emits('currentChange', num)
+}
+const tableRef = ref<any>(null)
+// 分页条数变化
+const sizeChange = (num: number) => {
+  nextTick(() => {
+    window.dispatchEvent(new Event('resize'))
+  })
+  emits('sizeChange', num)
+}
+// 多选
+const handleSelectionChange = (val: Array<TableData>) => {
+  emits('selectionChange', val)
+  state.selectData = val
+}
+// 单选
+const handleCurrentChange = (val: TableData) => {
+  emits('currentSelectChange', val)
+  state.selectData = [val]
+}
+// 查询
+const search = (data: Data) => {
+  emits('search', data)
+}
+// 重置
+const reset = () => {
+  emits('reset')
+}
+// 格式化
+const timeformatter = (_row: any, col: any, value: string | number) => {
+  const config = props.columns.find((item) => item.prop === col.property)
+  if (config && config.format) {
+    return dayjs(value).format(config.format)
+  }
+  return value
+}
+// 执行命令
+const execute = (command: string | ActionItem, rowData: Data) => {
+  if (
+    typeof command === 'object' &&
+    command.type === 'delRow' &&
+    props.option &&
+    props.option.actionList?.length > 3
+  ) {
+    ElMessageBox.alert('确认删除吗？', '提示', {
+      confirmButtonText: '确定',
+      callback: () => {
+        const obj = cloneDeep(command)
+        emits('tableCommand', obj)
+      },
+    })
+  } else {
+    const obj = cloneDeep(command)
+    emits('tableCommand', obj)
+  }
+}
+defineExpose({})
+onMounted(() => {})
+watch(
+  () => props.pagination,
+  (val) => {
+    if (val) {
+      state.pageSize = val.pageSize
+      state.currentPage = val.currentPage
+      state.total = val.total
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+</script>
+<style scoped lang="scss">
+.tableBox {
+  height: 100%;
+}
+.tablePageBox {
+  height: calc(100% - 40px);
+}
+.tabelSearchBox {
+  margin-top: 18px;
+  height: calc(100% - 58px);
+}
+.tabelSearchBox.tablePageBox {
+  height: calc(100% - 98px);
+}
+.pageBox {
+  height: 40px;
+  display: flex;
+  justify-content: end;
+  align-items: end;
+}
+:deep() {
+  .el-scrollbar__wrap--hidden-default {
+    max-height: 100% !important;
+  }
+  .optionColumn {
+    .cell {
+      display: flex;
+      align-items: center;
+      .el-dropdown {
+        line-height: 23px;
+      }
+    }
+  }
+}
+.optionBox {
+  display: flex;
+  justify-content: end;
+  padding-top: 12px;
+}
+</style>

package/templates/src/components/table/table.ts

@@ -0,0 +1,23 @@
+export interface ColumnItem {
+  label: string
+  prop: string
+  width?: string | number
+  slot?: string
+  formatter?: Function
+  format?: string
+  type?: string
+  showColor?: boolean
+}
+export interface ActionItem {
+  label: string
+  type: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'none'
+  icon?: string
+  code: string
+}
+export interface OptionItem {
+  label: string
+  actionList: ActionItem[]
+}
+export interface TableData {
+  [key: string]: any
+}