create-simpleadmin-ui 2.0.0

package/template/src/views/system/dict/index.vue

@@ -0,0 +1,747 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Refresh, Search, CollectionTag } from '@element-plus/icons-vue'
+import { get, post, put, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+
+interface DictTypeItem {
+  id: number
+  dictName: string
+  dictType: string
+  status: number
+  remark?: string
+}
+
+interface DictDataItem {
+  id: number
+  dictTypeId: number
+  dictType: string
+  dictLabel: string
+  dictValue: string
+  orderNum: number
+  status: number
+  isDefault: boolean
+}
+
+interface TypeForm {
+  id?: number
+  dictName: string
+  dictType: string
+  status: number
+  remark: string
+}
+
+interface DataForm {
+  id?: number
+  dictTypeId: number
+  dictType: string
+  dictLabel: string
+  dictValue: string
+  orderNum: number
+  cssClass: string
+  listClass: string
+  isDefault: boolean
+  status: number
+  remark: string
+}
+
+const typeLoading = ref(false)
+const dataLoading = ref(false)
+const saving = ref(false)
+const typeTotal = ref(0)
+const dataTotal = ref(0)
+const types = ref<DictTypeItem[]>([])
+const datas = ref<DictDataItem[]>([])
+const selectedType = ref<DictTypeItem | null>(null)
+
+const typeQuery = reactive({ pageIndex: 1, pageSize: 10, keyword: '', status: undefined as number | undefined })
+const dataQuery = reactive({ pageIndex: 1, pageSize: 10, keyword: '' })
+
+const typeDialog = ref(false)
+const dataDialog = ref(false)
+
+const typeForm = reactive<TypeForm>({
+  id: undefined,
+  dictName: '',
+  dictType: '',
+  status: 0,
+  remark: '',
+})
+
+const dataForm = reactive<DataForm>({
+  id: undefined,
+  dictTypeId: 0,
+  dictType: '',
+  dictLabel: '',
+  dictValue: '',
+  orderNum: 0,
+  cssClass: '',
+  listClass: '',
+  isDefault: false,
+  status: 0,
+  remark: '',
+})
+
+const typeStats = computed(() => {
+  let normal = 0
+  let disabled = 0
+  for (const t of types.value) {
+    if (t.status === 0) normal++
+    else disabled++
+  }
+  return { normal, disabled }
+})
+
+async function loadTypes() {
+  typeLoading.value = true
+  try {
+    const params: Record<string, unknown> = {
+      pageIndex: typeQuery.pageIndex,
+      pageSize: typeQuery.pageSize,
+      keyword: typeQuery.keyword || undefined,
+    }
+    if (typeQuery.status !== undefined && typeQuery.status !== null) params.status = typeQuery.status
+    const data = await get<{ total: number; items: DictTypeItem[] }>('/dict-types', params)
+    typeTotal.value = data.total
+    types.value = data.items || []
+    if (selectedType.value) {
+      const still = types.value.find((t) => t.id === selectedType.value!.id)
+      if (still) selectedType.value = still
+      else {
+        selectedType.value = null
+        datas.value = []
+        dataTotal.value = 0
+      }
+    }
+  } finally {
+    typeLoading.value = false
+  }
+}
+
+async function loadDatas() {
+  if (!selectedType.value) {
+    datas.value = []
+    dataTotal.value = 0
+    return
+  }
+  dataLoading.value = true
+  try {
+    const data = await get<{ total: number; items: DictDataItem[] }>('/dict-data', {
+      pageIndex: dataQuery.pageIndex,
+      pageSize: dataQuery.pageSize,
+      dictTypeId: selectedType.value.id,
+      keyword: dataQuery.keyword || undefined,
+    })
+    dataTotal.value = data.total
+    datas.value = data.items || []
+  } finally {
+    dataLoading.value = false
+  }
+}
+
+function searchTypes() {
+  typeQuery.pageIndex = 1
+  loadTypes()
+}
+
+function resetTypeQuery() {
+  typeQuery.keyword = ''
+  typeQuery.status = undefined
+  typeQuery.pageIndex = 1
+  loadTypes()
+}
+
+function selectType(row: DictTypeItem) {
+  selectedType.value = row
+  dataQuery.pageIndex = 1
+  dataQuery.keyword = ''
+  loadDatas()
+}
+
+function openCreateType() {
+  Object.assign(typeForm, { id: undefined, dictName: '', dictType: '', status: 0, remark: '' })
+  typeDialog.value = true
+}
+
+async function openEditType(row: DictTypeItem) {
+  const detail = await get<TypeForm>(`/dict-types/${row.id}`)
+  Object.assign(typeForm, {
+    id: detail.id,
+    dictName: detail.dictName || '',
+    dictType: detail.dictType || '',
+    status: detail.status ?? 0,
+    remark: detail.remark || '',
+  })
+  typeDialog.value = true
+}
+
+async function saveType() {
+  if (!typeForm.dictName.trim() || !typeForm.dictType.trim()) {
+    ElMessage.warning('请填写字典名称和类型')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      id: typeForm.id,
+      dictName: typeForm.dictName.trim(),
+      dictType: typeForm.dictType.trim(),
+      status: typeForm.status,
+      remark: typeForm.remark.trim() || null,
+    }
+    if (typeForm.id) await put('/dict-types', payload)
+    else await post('/dict-types', payload)
+    ElMessage.success('保存成功')
+    typeDialog.value = false
+    loadTypes()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function removeType(row: DictTypeItem) {
+  await ElMessageBox.confirm(`确认删除字典类型「${row.dictName}」？其下字典数据需自行确认。`, '提示', {
+    type: 'warning',
+  })
+  await del('/dict-types', { ids: [row.id] })
+  ElMessage.success('已删除')
+  if (selectedType.value?.id === row.id) {
+    selectedType.value = null
+    datas.value = []
+    dataTotal.value = 0
+  }
+  loadTypes()
+}
+
+function openCreateData() {
+  if (!selectedType.value) {
+    ElMessage.warning('请先选择字典类型')
+    return
+  }
+  Object.assign(dataForm, {
+    id: undefined,
+    dictTypeId: selectedType.value.id,
+    dictType: selectedType.value.dictType,
+    dictLabel: '',
+    dictValue: '',
+    orderNum: 0,
+    cssClass: '',
+    listClass: '',
+    isDefault: false,
+    status: 0,
+    remark: '',
+  })
+  dataDialog.value = true
+}
+
+async function openEditData(row: DictDataItem) {
+  const detail = await get<DataForm>(`/dict-data/${row.id}`)
+  Object.assign(dataForm, {
+    id: detail.id,
+    dictTypeId: detail.dictTypeId,
+    dictType: detail.dictType || '',
+    dictLabel: detail.dictLabel || '',
+    dictValue: detail.dictValue || '',
+    orderNum: detail.orderNum ?? 0,
+    cssClass: detail.cssClass || '',
+    listClass: detail.listClass || '',
+    isDefault: detail.isDefault ?? false,
+    status: detail.status ?? 0,
+    remark: detail.remark || '',
+  })
+  dataDialog.value = true
+}
+
+async function saveData() {
+  if (!dataForm.dictLabel.trim() || !dataForm.dictValue.trim()) {
+    ElMessage.warning('请填写标签和键值')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      id: dataForm.id,
+      dictTypeId: dataForm.dictTypeId,
+      dictType: dataForm.dictType,
+      dictLabel: dataForm.dictLabel.trim(),
+      dictValue: dataForm.dictValue.trim(),
+      orderNum: dataForm.orderNum,
+      cssClass: dataForm.cssClass.trim() || null,
+      listClass: dataForm.listClass.trim() || null,
+      isDefault: dataForm.isDefault,
+      status: dataForm.status,
+      remark: dataForm.remark.trim() || null,
+    }
+    if (dataForm.id) await put('/dict-data', payload)
+    else await post('/dict-data', payload)
+    ElMessage.success('保存成功')
+    dataDialog.value = false
+    loadDatas()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function removeData(row: DictDataItem) {
+  await ElMessageBox.confirm(`确认删除字典项「${row.dictLabel}」？`, '提示', { type: 'warning' })
+  await del('/dict-data', { ids: [row.id] })
+  ElMessage.success('已删除')
+  loadDatas()
+}
+
+onMounted(loadTypes)
+</script>
+
+<template>
+  <AppPage title="字典管理" description="维护业务字典类型及枚举项">
+    <div class="dict-stats">
+      <div class="dict-stats__item">
+        <span class="dict-stats__num">{{ typeTotal }}</span>
+        <span class="dict-stats__label">字典类型</span>
+      </div>
+      <div class="dict-stats__item dict-stats__item--ok">
+        <span class="dict-stats__num">{{ typeStats.normal }}</span>
+        <span class="dict-stats__label">本页正常</span>
+      </div>
+      <div class="dict-stats__item dict-stats__item--off">
+        <span class="dict-stats__num">{{ typeStats.disabled }}</span>
+        <span class="dict-stats__label">本页停用</span>
+      </div>
+      <div class="dict-stats__item dict-stats__item--hit">
+        <span class="dict-stats__num">{{ selectedType ? dataTotal : '—' }}</span>
+        <span class="dict-stats__label">选中类型数据</span>
+      </div>
+    </div>
+
+    <div class="dict-layout">
+      <section class="dict-pane">
+        <div class="toolbar">
+          <el-input
+            v-model="typeQuery.keyword"
+            clearable
+            placeholder="搜索名称 / 类型"
+            style="width: 160px"
+            @keyup.enter="searchTypes"
+          />
+          <el-select
+            v-model="typeQuery.status"
+            clearable
+            placeholder="状态"
+            style="width: 100px"
+            @change="searchTypes"
+          >
+            <el-option label="正常" :value="0" />
+            <el-option label="停用" :value="1" />
+          </el-select>
+          <el-button type="primary" :icon="Search" @click="searchTypes" />
+          <el-button :icon="Refresh" @click="resetTypeQuery" />
+          <div class="toolbar__spacer" />
+          <el-button type="success" :icon="Plus" v-permission="'system:dict:add'" @click="openCreateType">
+            新增类型
+          </el-button>
+        </div>
+
+        <div class="table-wrap" v-loading="typeLoading">
+          <el-table
+            :data="types"
+            border
+            stripe
+            highlight-current-row
+            empty-text="暂无字典类型"
+            @row-click="selectType"
+          >
+            <el-table-column label="字典名称" min-width="120" show-overflow-tooltip>
+              <template #default="{ row }">
+                <div class="name-cell">
+                  <span class="name-cell__icon">
+                    <el-icon :size="14"><CollectionTag /></el-icon>
+                  </span>
+                  <strong>{{ row.dictName }}</strong>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="类型" min-width="110" show-overflow-tooltip>
+              <template #default="{ row }">
+                <code class="mono">{{ row.dictType }}</code>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" width="72" align="center">
+              <template #default="{ row }">
+                <el-tag size="small" :type="row.status === 0 ? 'success' : 'danger'">
+                  {{ row.status === 0 ? '正常' : '停用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180" align="center" fixed="right">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:dict:edit'"
+                @click.stop="openEditType(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:dict:remove'"
+                @click.stop="removeType(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+          </el-table>
+        </div>
+        <div class="pager">
+          <el-pagination
+            small
+            background
+            layout="total, prev, pager, next"
+            :total="typeTotal"
+            v-model:current-page="typeQuery.pageIndex"
+            v-model:page-size="typeQuery.pageSize"
+            @current-change="loadTypes"
+          />
+        </div>
+      </section>
+
+      <section class="dict-pane">
+        <div class="toolbar">
+          <span class="pane-title">
+            字典数据
+            <template v-if="selectedType">
+              · <code class="mono">{{ selectedType.dictType }}</code>
+            </template>
+            <span v-else class="muted">（请选择左侧类型）</span>
+          </span>
+          <el-input
+            v-model="dataQuery.keyword"
+            clearable
+            placeholder="搜索标签"
+            style="width: 140px"
+            :disabled="!selectedType"
+            @keyup.enter="loadDatas"
+          />
+          <el-button type="primary" :icon="Search" :disabled="!selectedType" @click="loadDatas" />
+          <div class="toolbar__spacer" />
+          <el-button
+            type="success"
+            :icon="Plus"
+            :disabled="!selectedType"
+            v-permission="'system:dict:add'"
+            @click="openCreateData"
+          >
+            新增数据
+          </el-button>
+        </div>
+
+        <div class="table-wrap" v-loading="dataLoading">
+          <el-table :data="datas" border stripe empty-text="暂无字典数据">
+            <el-table-column prop="dictLabel" label="标签" min-width="120" show-overflow-tooltip />
+            <el-table-column label="键值" min-width="100" show-overflow-tooltip>
+              <template #default="{ row }">
+                <code class="mono">{{ row.dictValue }}</code>
+              </template>
+            </el-table-column>
+            <el-table-column prop="orderNum" label="排序" width="64" align="center" />
+            <el-table-column label="默认" width="64" align="center">
+              <template #default="{ row }">
+                <el-tag size="small" :type="row.isDefault ? 'warning' : 'info'">
+                  {{ row.isDefault ? '是' : '否' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" width="72" align="center">
+              <template #default="{ row }">
+                <el-tag size="small" :type="row.status === 0 ? 'success' : 'danger'">
+                  {{ row.status === 0 ? '正常' : '停用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180" align="center" fixed="right">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:dict:edit'"
+                @click="openEditData(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:dict:remove'"
+                @click="removeData(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+          </el-table>
+        </div>
+        <div class="pager">
+          <el-pagination
+            small
+            background
+            layout="total, prev, pager, next"
+            :total="dataTotal"
+            v-model:current-page="dataQuery.pageIndex"
+            v-model:page-size="dataQuery.pageSize"
+            @current-change="loadDatas"
+          />
+        </div>
+      </section>
+    </div>
+
+    <el-dialog
+      v-model="typeDialog"
+      :title="typeForm.id ? '编辑字典类型' : '新增字典类型'"
+      width="520px"
+      class="sa-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <el-form label-width="96px">
+        <el-form-item label="字典名称" required>
+          <el-input v-model="typeForm.dictName" maxlength="64" placeholder="如：用户性别" />
+        </el-form-item>
+        <el-form-item label="字典类型" required>
+          <el-input v-model="typeForm.dictType" maxlength="64" placeholder="如：sys_user_sex" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="typeForm.status">
+            <el-radio :value="0">正常</el-radio>
+            <el-radio :value="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="typeForm.remark" type="textarea" :rows="2" maxlength="200" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="typeDialog = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="saveType">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="dataDialog"
+      :title="dataForm.id ? '编辑字典数据' : '新增字典数据'"
+      width="560px"
+      class="sa-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <el-form label-width="96px">
+        <el-form-item label="字典类型">
+          <el-input :model-value="dataForm.dictType" disabled />
+        </el-form-item>
+        <el-row>
+          <el-col :span="12" class="col-l">
+            <el-form-item label="数据标签" required>
+              <el-input v-model="dataForm.dictLabel" maxlength="64" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="col-r">
+            <el-form-item label="数据键值" required>
+              <el-input v-model="dataForm.dictValue" maxlength="64" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12" class="col-l">
+            <el-form-item label="显示排序">
+              <el-input-number v-model="dataForm.orderNum" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="col-r">
+            <el-form-item label="状态">
+              <el-radio-group v-model="dataForm.status">
+                <el-radio :value="0">正常</el-radio>
+                <el-radio :value="1">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="是否默认">
+          <el-switch v-model="dataForm.isDefault" />
+        </el-form-item>
+        <el-row>
+          <el-col :span="12" class="col-l">
+            <el-form-item label="样式属性">
+              <el-input v-model="dataForm.cssClass" maxlength="64" placeholder="可选" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="col-r">
+            <el-form-item label="回显样式">
+              <el-input v-model="dataForm.listClass" maxlength="64" placeholder="如 success" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="备注">
+          <el-input v-model="dataForm.remark" type="textarea" :rows="2" maxlength="200" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dataDialog = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="saveData">保存</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.dict-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.dict-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.dict-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+.dict-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.dict-stats__item--ok .dict-stats__num {
+  color: var(--sa-accent);
+}
+.dict-stats__item--off .dict-stats__num {
+  color: #be123c;
+}
+.dict-stats__item--hit .dict-stats__num {
+  color: #0369a1;
+}
+
+.dict-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.dict-pane {
+  min-width: 0;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+.toolbar__spacer {
+  flex: 1;
+}
+.pane-title {
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--sa-ink);
+  margin-right: 4px;
+}
+
+.table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+.muted {
+  color: var(--sa-ink-muted);
+  font-weight: 400;
+}
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.col-l {
+  padding-right: 8px;
+}
+.col-r {
+  padding-left: 8px;
+}
+
+@media (max-width: 1100px) {
+  .dict-layout {
+    grid-template-columns: 1fr;
+  }
+  .dict-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+
+<style>
+.sa-dialog.el-dialog {
+  width: min(560px, calc(100vw - 32px)) !important;
+  max-height: 88vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.sa-dialog .el-dialog__body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(88vh - 140px);
+}
+</style>