@jzt-packages/components 1.0.0

package/src/JztQueryTable/components/DeployToAccountLevelSetting.vue

@@ -0,0 +1,351 @@
+<script lang="tsx" setup name="DeployToAccountLevelSetting">
+import { Minus, Plus, WarningFilled } from '@element-plus/icons-vue'
+import { localGetAgencyId } from '@jzt-spd/utils'
+import {
+  createGridConfigTemplate,
+  getAgencyUserPageList,
+  getUserRole,
+  updateGridConfigTemplate
+} from '@jzt-spd/utils/commonApi'
+import { computedAsync, reactivePick, useVModel } from '@vueuse/core'
+import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
+import { computed, nextTick, reactive, ref } from 'vue'
+import JztDialog from '../../JztDialog/index.vue'
+import JztLabelTitle from '../../JztLabelTitle/index.vue'
+import Pagination from '../components/Pagination.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    mode: 'add' | 'edit' | 'view'
+    gridParams: any
+    configValue: any
+    pageSize: number
+    templateInfo: any
+  }>(),
+  {
+    modelValue: false
+  }
+)
+
+const emits = defineEmits(['update:modelValue', 'success'])
+const maxCollapseCount = 6
+const tableRef = ref<any>()
+const formRef = ref<FormInstance>()
+const visible = useVModel(props, 'modelValue', emits)
+const loading = ref<boolean>(false)
+const formData = reactive({
+  configName: '',
+  userRole: '',
+  userName: '',
+  realName: ''
+})
+const formRules = reactive({
+  configName: [{ required: true, message: '请输入配置名称', trigger: 'change' }]
+})
+const data = ref<any[]>([])
+const originUserIds = ref<string[]>([])
+const addUserIds = ref<string[]>([])
+const removeUserIds = ref<string[]>([])
+const pageable = reactive({
+  pageIndex: 0,
+  pageSize: 10,
+  total: 0,
+  pagerCount: 5
+})
+const isView = computed(() => props.mode === 'view')
+const dialogTitle = computed(() => {
+  switch (props.mode) {
+    case 'add':
+      return '下发至用户'
+    case 'edit':
+      return '编辑模版'
+    case 'view':
+      return '查看生效账号'
+  }
+})
+const labelTitle = computed(() => {
+  switch (props.mode) {
+    case 'add':
+      return '请选择列配置生效的账号'
+    case 'edit':
+      return '请选择列配置生效的账号'
+    case 'view':
+      return '列配置生效的账号'
+  }
+})
+const configValue = computed(() => {
+  return props.configValue?.map((item: any) => {
+    return {
+      columnId: item.prop,
+      field: item.prop,
+      hidden: !item.isSetShow,
+      width: item.width || item.minWidth || 60,
+      text: item.label
+    }
+  })
+})
+const userRoleEnum = computedAsync(async () => {
+  const { result } = await getUserRole({ pageSize: 99999, pageIndex: 0, name: '', normalizedName: '' })
+  return result
+})
+
+const onSelect = (selection: any[], row: any) => {
+  const isSelected = selection.includes(row)
+  const { userId } = row
+  if (isSelected) {
+    if (removeUserIds.value.includes(userId)) {
+      removeUserIds.value = removeUserIds.value.filter(item => item !== userId)
+    } else if (!originUserIds.value.includes(userId) && !addUserIds.value.includes(userId)) {
+      addUserIds.value.push(userId)
+      addUserIds.value = [...new Set(addUserIds.value)]
+    }
+  } else {
+    if (addUserIds.value.includes(userId)) {
+      addUserIds.value = addUserIds.value.filter(item => item !== userId)
+    } else if (originUserIds.value.includes(userId) && !removeUserIds.value.includes(userId)) {
+      removeUserIds.value.push(userId)
+      removeUserIds.value = [...new Set(removeUserIds.value)]
+    }
+  }
+}
+const onSelectAll = (selection: any[]) => {
+  data.value.forEach(row => onSelect(selection, row))
+}
+const onQuery = async () => {
+  try {
+    loading.value = true
+    const { result, totalCount, pagerCount } = await getAgencyUserPageList({
+      agencyId: localGetAgencyId(),
+      onlyBound: props.mode === 'view',
+      ...reactivePick(props.templateInfo, ['templateId']),
+      ...reactivePick(pageable, ['pageIndex', 'pageSize']),
+      ...reactivePick(formData, ['userRole', 'userName', 'realName'])
+    })
+    data.value = result.map(item => {
+      const { userId, isBound, creationTime, userRoles } = item
+      const userRoleList = userRoles.split(',')
+      if (isBound) {
+        originUserIds.value.push(userId)
+        originUserIds.value = [...new Set(originUserIds.value)]
+      }
+      return {
+        ...item,
+        userRoles: userRoleList,
+        creationTime: creationTime.slice(0, 10),
+        isCollapse: userRoleList.length > maxCollapseCount,
+        computedUserRoles: (row: any) => (row.isCollapse ? row.userRoles.slice(0, maxCollapseCount) : userRoleList)
+      }
+    })
+    pageable.total = totalCount
+    pageable.pagerCount = pagerCount
+    if (props.mode === 'edit') {
+      await nextTick()
+      data.value.forEach((item: any) => {
+        const { userId, isBound } = item
+        if (addUserIds.value.includes(userId)) {
+          tableRef.value?.toggleRowSelection(item, true)
+        } else if (removeUserIds.value.includes(userId)) {
+          tableRef.value?.toggleRowSelection(item, false)
+        } else {
+          tableRef.value?.toggleRowSelection(item, isBound)
+        }
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+const onSearch = () => {
+  pageable.pageIndex = 0
+  onQuery()
+}
+const onReset = () => {
+  formRef.value?.resetFields()
+  onSearch()
+}
+const onDeploy = async () => {
+  try {
+    const userIds = tableRef.value?.getSelectionRows().map(item => item.userId)
+    if (!formData.configName) {
+      ElMessage.error('请输入配置名称')
+      return
+    }
+    if (userIds.length === 0 && !props.templateInfo.id) {
+      ElMessage.error('请至少勾选一个账号')
+      return
+    }
+    await ElMessageBox.confirm('列配置保存并下发后，会对配置下的账号实时生效！', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    loading.value = true
+    const api = { add: createGridConfigTemplate, edit: updateGridConfigTemplate }
+    const params = {
+      add: {
+        userIds,
+        configValue: JSON.stringify(configValue.value),
+        ...props.gridParams
+      },
+      edit: {
+        addUserIds: addUserIds.value,
+        removeUserIds: removeUserIds.value,
+        ...reactivePick(props.templateInfo, ['id', 'concurrencyStamp'])
+      }
+    }
+    const { result, message } = await api[props.mode]({
+      ...params[props.mode],
+      ...reactivePick(formData, ['configName']),
+      pageSize: props.pageSize
+    })
+    ElMessage.success(message)
+    visible.value = false
+    emits('success', result)
+  } finally {
+    loading.value = false
+  }
+}
+const onSizeChange = (size: number) => {
+  pageable.pageSize = size
+  onQuery()
+}
+const onCurrentChange = (currentPage: number) => {
+  pageable.pageIndex = currentPage - 1
+  onQuery()
+}
+const onOpen = () => {
+  if (props.mode === 'add') {
+    formData.configName = ''
+  } else {
+    formData.configName = props.templateInfo.configName
+  }
+  onQuery()
+}
+const onClose = () => {
+  addUserIds.value = []
+  removeUserIds.value = []
+  originUserIds.value = []
+  formData.configName = ''
+  pageable.pageIndex = 0
+  pageable.pageSize = 10
+  formRef.value?.resetFields()
+  visible.value = false
+}
+</script>
+
+<template>
+  <jzt-dialog
+    v-model="visible"
+    width="1018"
+    full-content
+    :title="dialogTitle"
+    :cancel-text="false"
+    :show-footer="false"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <div v-loading="loading" class="table-box">
+      <div v-if="mode === 'add'" class="tips-box warning-bg flx-left-center">
+        <el-icon color="#FFA00C" class="mr4"><WarningFilled /></el-icon>
+        是否对当前列显示/隐藏/排序/列宽规则按照账号进行下发？下发后的账号将统一更新为当前配置。
+      </div>
+
+      <el-form v-if="!isView" ref="formRuleRef" :model="formData" :rules="formRules" inline label-width="fit-content">
+        <el-form-item label="当前列配置模版名称" prop="configName">
+          <el-input
+            v-model="formData.configName"
+            placeholder="请输入当前列配置模版名称"
+            maxlength="40"
+            show-word-limit
+            style="width: 456px"
+          />
+        </el-form-item>
+      </el-form>
+      <div v-else style="margin-bottom: 12px">
+        <el-text style="color: #999999">当前列配置模版名称：</el-text>
+        <el-text style="color: #333333">{{ formData.configName }}</el-text>
+      </div>
+      <jzt-label-title :title="labelTitle" font-size="14px" style="padding: 0 0 12px 0" />
+      <el-form ref="formRef" :model="formData" inline label-width="fit-content">
+        <el-form-item label="用户角色" prop="userRole" style="margin-right: 12px">
+          <el-select-v2
+            v-model="formData.userRole"
+            filterable
+            placeholder="请选择用户角色"
+            :options="userRoleEnum"
+            :props="{
+              label: 'name',
+              value: 'id'
+            }"
+            style="width: 210px"
+          />
+        </el-form-item>
+        <el-form-item label="用户名" prop="userName" style="margin-right: 12px">
+          <el-input v-model="formData.userName" placeholder="请输入用户名" style="width: 210px" />
+        </el-form-item>
+        <el-form-item label="真实姓名" prop="realName" style="margin-right: 12px">
+          <el-input v-model="formData.realName" placeholder="请输入真实姓名" style="width: 210px" />
+        </el-form-item>
+        <el-form-item style="margin-right: 12px">
+          <el-button type="primary" @click="onSearch">查询</el-button>
+          <el-button type="primary" plain @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        ref="tableRef"
+        row-key="userId"
+        style="width: 100%"
+        :data="data"
+        @select="onSelect"
+        @select-all="onSelectAll"
+      >
+        <el-table-column v-if="!isView" type="selection" width="60" fixed="left" reserve-selection />
+        />
+        <el-table-column type="index" width="60" label="序号" fixed="left" />
+        <el-table-column prop="userName" label="用户名" width="160" />
+        <el-table-column prop="realName" label="真实姓名" width="160" />
+        <el-table-column prop="userRoles" label="用户角色" minWidth="120">
+          <template #default="{ row, row: { userRoles } }">
+            <el-space wrap>
+              <el-tag
+                v-for="(role, index) in row.computedUserRoles(row)"
+                :key="index"
+                type="primary"
+                size="small"
+                style="cursor: pointer"
+              >
+                {{ role }}
+              </el-tag>
+              <el-button
+                v-if="userRoles.length > maxCollapseCount"
+                text
+                size="small"
+                :icon="row.isCollapse ? Plus : Minus"
+                @click="row.isCollapse = !row.isCollapse"
+              >
+                {{ row.isCollapse ? '展开' : '收起' }} {{ row.isCollapse ? userRoles.length : '' }}
+              </el-button>
+            </el-space>
+          </template>
+        </el-table-column>
+        <el-table-column prop="creationTime" label="创建日期" width="120"></el-table-column>
+      </el-table>
+      <pagination
+        :show-check-total="!isView"
+        :check-total="pageable.total || 0"
+        :pageable="{ ...pageable, pageIndex: pageable.pageIndex + 1 }"
+        :handle-size-change="onSizeChange"
+        :handle-current-change="onCurrentChange"
+      />
+    </div>
+    <template v-if="!isView" #footer>
+      <div class="flx-center">
+        <el-button @click="onClose">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="onDeploy">确认下发</el-button>
+      </div>
+    </template>
+  </jzt-dialog>
+</template>
+
+<style lang="scss" scoped></style>

package/src/JztQueryTable/components/Pagination.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 分页组件 -->
+  <div class="flx-between-center">
+    <div class="check-total">
+      <div v-if="showCheckTotal">
+        已勾选
+        <span class="check-total-num">{{ checkTotal || 0 }}</span>
+        项
+      </div>
+    </div>
+    <el-pagination
+      :background="true"
+      :teleported="false"
+      v-model:current-page="pageable.pageIndex"
+      v-model:page-size="pageable.pageSize"
+      :page-sizes="pageSizes"
+      :pager-count="pageable.pagerCount || 5"
+      :total="pageable.total || 0"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="Pagination">
+import { pageSizes } from '../const'
+interface PageableProps {
+  pageIndex: number
+  pageSize: number
+  total: number
+  pagerCount?: number
+}
+
+interface PaginationProps {
+  checkTotal?: number
+  pageable: PageableProps
+  handleSizeChange: (size: number) => void
+  handleCurrentChange: (currentPage: number) => void
+  showCheckTotal?: boolean
+}
+
+defineProps<PaginationProps>()
+</script>
+<style lang="scss" scoped>
+.check-total {
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  padding-top: 6px;
+}
+.check-total-num {
+  color: var(--el-color-primary);
+}
+</style>

package/src/JztQueryTable/components/TableColumn.vue

@@ -0,0 +1,109 @@
+<template>
+  <RenderTableColumn v-bind="column" />
+</template>
+
+<script setup lang="tsx" name="TableColumn">
+import { inject, ref, useSlots } from 'vue'
+import { ColumnProps, RenderScope, HeaderRenderScope } from '../interface'
+import {
+  filterEnum,
+  formatCellValue,
+  handleProp,
+  handleRowAccordingToProp,
+  formatNumberValue,
+} from '../../utils/index'
+import { formatValue, formatAmount } from '@jzt-spd/utils'
+
+defineProps<{ column: ColumnProps }>()
+
+const slots = useSlots()
+
+const enumMap = inject('enumColumnMap', ref(new Map()))
+
+// 渲染表格数据
+const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
+  let amount = '' as any
+  if (!item.prop) return ''
+  if (item.isFilterEnum && enumMap.value.get(item.prop)) {
+    // 字典
+    amount = filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
+  } else if (item.formatter) {
+    // 格式化方法
+    amount = item.formatter({
+      cellValue: scope.row[item.prop],
+      ...scope
+    })
+  } else if (item.decimal) {
+    // 格式化数字-几位小数
+    amount = formatNumberValue(scope.row[item.prop], item)
+  } else {
+    amount = formatCellValue(handleRowAccordingToProp(scope.row, item.prop!))
+  }
+  // 格式化数字-是否千分号处理
+  if (item.isPerMille) {
+    amount = formatAmount(amount)
+  }
+
+  return amount
+}
+// // 获取 tag 类型
+// const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
+//   return (
+//     filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, 'tag') ||
+//     'primary'
+//   )
+// }
+const RenderTableColumn = (item: ColumnProps) => {
+  return (
+    <>
+      {item.isShow && (
+        <el-table-column
+          {...item}
+          align={item.align ?? 'left'}
+          showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== 'operation'}
+        >
+          {{
+            default: (scope: RenderScope<any>) => {
+              const renderCellValue = renderCellData(item, scope)
+              if (item._children) return item._children.map(child => RenderTableColumn(child))
+              if (item.render) return item.render(scope)
+              if (item.prop && slots[handleProp(item.prop)]) return slots[handleProp(item.prop)]!(scope)
+              if (item.isUnderline && !['', '-', '/'].includes(renderCellValue))
+                return (
+                  <div
+                    class="text-underline sle el-tooltip"
+                    style="padding: 0px; white-space: nowrap;"
+                    onClick={e => {
+                      e.stopPropagation() // ⛔ 阻止冒泡到父级
+                      item.fun &&
+                        item.prop &&
+                        item.fun({
+                          ...scope,
+                          cellValue: scope.row[item.prop]
+                        })
+                    }}
+                  >
+                    {formatValue(renderCellValue)}
+                  </div>
+                )
+
+              {
+                /* {
+                if (item.tag) return <el-tag type={getTagType(item, scope)}>renderCellValue</el-tag>
+              } */
+              }
+              return renderCellValue
+            },
+            header: (scope: HeaderRenderScope<any>) => {
+              if (item.headerRender) return item.headerRender(scope)
+              if (item.prop && slots[`${handleProp(item.prop)}Header`])
+                return slots[`${handleProp(item.prop)}Header`]!(scope)
+              return item.label
+            }
+          }}
+        </el-table-column>
+      )}
+    </>
+  )
+}
+</script>

package/src/JztQueryTable/const.ts

@@ -0,0 +1 @@
+export const pageSizes = [10, 20, 50, 100]