BJ_ZTEITS-Developers / parking-cloud-ui

<script setup lang="ts">
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  DictDataApi,
  DictTypeApi,
  type DictDataPageReqVO,
  type DictDataSaveReqVO,
  type DictDataVO,
  type DictTypePageReqVO,
  type DictTypeSaveReqVO,
  type DictTypeVO
} from '@/api/system/dict'
import { useDictStore } from '@/store/modules/dict'
import { formatDateTime } from '@/utils'

/**
 * 系统管理 - 字典（类型 + 数据）
 *
 * 接口：/admin-api/system/dict-type 与 /admin-api/system/dict-data（权限点都是 system:dict:*）
 *
 * 一个页面管两个资源，因为它们是**父子关系**：字典类型只是「分类」，
 * 真正被业务读取的是它下面的字典数据。只有类型没有数据的字典是没有任何意义的，
 * 所以「字典数据」是个基于当前类型打开的抽屉，而不是一个独立的菜单页。
 *
 * ⚠️ 字典数据增删改后必须 `dictStore.reset()`：
 *    `DictTag` 组件与各页面的下拉框都读 pinia 里的字典缓存，不清缓存的话，
 *    刚改完的字典项在其它页面还是旧值，直到刷新浏览器。
 */
defineOptions({ name: 'SystemDict' })

const dictStore = useDictStore()

/** el-tag 支持的四种颜色，与后端 `colorType` 列的约定一致 */
const COLOR_TYPES = [
  { label: '默认（info）', value: 'info' },
  { label: '成功（success）', value: 'success' },
  { label: '警告（warning）', value: 'warning' },
  { label: '危险（danger）', value: 'danger' }
]

// ---------------------------------------------------------------------------
// 字典类型列表
// ---------------------------------------------------------------------------

const loading = ref(false)
const list = ref<DictTypeVO[]>([])
const total = ref(0)
const selectedIds = ref<number[]>([])

const queryParams = reactive<DictTypePageReqVO>({
  pageNo: 1,
  pageSize: 10,
  name: '',
  type: ''
})

async function loadList() {
  loading.value = true
  try {
    const page = await DictTypeApi.getDictTypePage(queryParams)
    list.value = page.list || []
    total.value = page.total || 0
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  queryParams.pageNo = 1
  loadList()
}

function handleReset() {
  queryParams.name = ''
  queryParams.type = ''
  queryParams.status = undefined
  handleSearch()
}

function handleSelectionChange(rows: DictTypeVO[]) {
  selectedIds.value = rows.map((row) => row.id)
}

const typeDialogVisible = ref(false)
const typeSubmitting = ref(false)
const typeFormRef = ref<FormInstance>()

function emptyTypeForm(): DictTypeSaveReqVO {
  return { name: '', type: '', status: 0, remark: '' }
}

const typeForm = reactive<DictTypeSaveReqVO>(emptyTypeForm())
const isTypeUpdate = computed(() => !!typeForm.id)

const typeRules: FormRules = {
  name: [
    { required: true, message: '请输入字典名称', trigger: 'blur' },
    { max: 100, message: '字典名称长度不能超过 100 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请输入字典类型', trigger: 'blur' },
    { max: 100, message: '字典类型长度不能超过 100 个字符', trigger: 'blur' }
  ]
}

function handleCreateType() {
  Object.assign(typeForm, emptyTypeForm())
  typeDialogVisible.value = true
  nextTick(() => typeFormRef.value?.clearValidate())
}

async function handleUpdateType(row: DictTypeVO) {
  const detail = await DictTypeApi.getDictType(row.id)
  Object.assign(typeForm, emptyTypeForm(), {
    id: detail.id,
    name: detail.name,
    type: detail.type,
    status: detail.status ?? 0,
    remark: detail.remark || ''
  })
  typeDialogVisible.value = true
  nextTick(() => typeFormRef.value?.clearValidate())
}

async function handleSubmitType() {
  try {
    await typeFormRef.value?.validate()
  } catch {
    return
  }
  typeSubmitting.value = true
  try {
    const data: DictTypeSaveReqVO = { ...typeForm }
    if (data.id) {
      await DictTypeApi.updateDictType(data)
    } else {
      await DictTypeApi.createDictType(data)
    }
    ElMessage.success(data.id ? '修改成功' : '新增成功')
    typeDialogVisible.value = false
    loadList()
    // 字典类型本身不被 DictTag 读取，但改了 type 字符串后缓存里的旧 key 就没用了
    dictStore.reset()
  } finally {
    typeSubmitting.value = false
  }
}

function handleDeleteType(row: DictTypeVO) {
  ElMessageBox.confirm(`确认删除字典类型「${row.name}」吗？其下的字典数据也会一并失效。`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await DictTypeApi.deleteDictType(row.id)
      ElMessage.success('删除成功')
      loadList()
      dictStore.reset()
    })
    .catch(() => {})
}

function handleDeleteTypeList() {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请先勾选要删除的字典类型')
    return
  }
  ElMessageBox.confirm(`确认删除选中的 ${selectedIds.value.length} 个字典类型吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await DictTypeApi.deleteDictTypeList(selectedIds.value)
      ElMessage.success('删除成功')
      selectedIds.value = []
      loadList()
      dictStore.reset()
    })
    .catch(() => {})
}

async function handleExportType() {
  await DictTypeApi.exportDictType(queryParams)
}

// ---------------------------------------------------------------------------
// 字典数据（按类型打开的抽屉）
// ---------------------------------------------------------------------------

const dataDrawerVisible = ref(false)
/** 当前正在维护数据的字典类型 */
const currentType = ref<DictTypeVO | null>(null)

const dataLoading = ref(false)
const dataList = ref<DictDataVO[]>([])
const dataTotal = ref(0)
const dataSelectedIds = ref<number[]>([])

const dataQuery = reactive<DictDataPageReqVO>({
  pageNo: 1,
  pageSize: 10,
  label: ''
})

async function loadDataList() {
  if (!currentType.value) return
  dataLoading.value = true
  try {
    const page = await DictDataApi.getDictDataPage({
      ...dataQuery,
      // dictType 由当前打开的抽屉决定，不在工具栏里给用户改
      dictType: currentType.value.type
    })
    dataList.value = page.list || []
    dataTotal.value = page.total || 0
  } finally {
    dataLoading.value = false
  }
}

function handleOpenData(row: DictTypeVO) {
  currentType.value = row
  dataQuery.pageNo = 1
  dataQuery.label = ''
  dataSelectedIds.value = []
  dataDrawerVisible.value = true
  loadDataList()
}

function handleSearchData() {
  dataQuery.pageNo = 1
  loadDataList()
}

function handleDataSelectionChange(rows: DictDataVO[]) {
  dataSelectedIds.value = rows.map((row) => row.id)
}

const dataDialogVisible = ref(false)
const dataSubmitting = ref(false)
const dataFormRef = ref<FormInstance>()

function emptyDataForm(): DictDataSaveReqVO {
  return {
    sort: 0,
    label: '',
    value: '',
    dictType: currentType.value?.type || '',
    status: 0,
    colorType: 'info',
    cssClass: '',
    remark: ''
  }
}

const dataForm = reactive<DictDataSaveReqVO>(emptyDataForm())
const isDataUpdate = computed(() => !!dataForm.id)

const dataRules: FormRules = {
  label: [
    { required: true, message: '请输入字典标签', trigger: 'blur' },
    { max: 100, message: '字典标签长度不能超过 100 个字符', trigger: 'blur' }
  ],
  value: [
    { required: true, message: '请输入字典键值', trigger: 'blur' },
    { max: 100, message: '字典键值长度不能超过 100 个字符', trigger: 'blur' }
  ],
  sort: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

function handleCreateData() {
  Object.assign(dataForm, emptyDataForm())
  dataDialogVisible.value = true
  nextTick(() => dataFormRef.value?.clearValidate())
}

function handleUpdateData(row: DictDataVO) {
  Object.assign(dataForm, emptyDataForm(), {
    id: row.id,
    sort: row.sort ?? 0,
    label: row.label,
    value: row.value,
    dictType: row.dictType,
    status: row.status ?? 0,
    colorType: row.colorType || 'info',
    cssClass: row.cssClass || '',
    remark: row.remark || ''
  })
  dataDialogVisible.value = true
  nextTick(() => dataFormRef.value?.clearValidate())
}

async function handleSubmitData() {
  try {
    await dataFormRef.value?.validate()
  } catch {
    return
  }
  dataSubmitting.value = true
  try {
    const data: DictDataSaveReqVO = { ...dataForm }
    if (data.id) {
      await DictDataApi.updateDictData(data)
    } else {
      await DictDataApi.createDictData(data)
    }
    ElMessage.success(data.id ? '修改成功' : '新增成功')
    dataDialogVisible.value = false
    loadDataList()
    dictStore.reset()
  } finally {
    dataSubmitting.value = false
  }
}

function handleDeleteData(row: DictDataVO) {
  ElMessageBox.confirm(`确认删除字典数据「${row.label}」吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await DictDataApi.deleteDictData(row.id)
      ElMessage.success('删除成功')
      loadDataList()
      dictStore.reset()
    })
    .catch(() => {})
}

function handleDeleteDataList() {
  if (dataSelectedIds.value.length === 0) {
    ElMessage.warning('请先勾选要删除的字典数据')
    return
  }
  ElMessageBox.confirm(`确认删除选中的 ${dataSelectedIds.value.length} 条字典数据吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await DictDataApi.deleteDictDataList(dataSelectedIds.value)
      ElMessage.success('删除成功')
      dataSelectedIds.value = []
      loadDataList()
      dictStore.reset()
    })
    .catch(() => {})
}

onMounted(loadList)
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-3">
      <el-form :model="queryParams" inline class="search-form">
        <el-form-item label="字典名称">
          <el-input v-model="queryParams.name" placeholder="请输入字典名称" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="字典类型">
          <el-input v-model="queryParams.type" placeholder="请输入字典类型" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
            <el-option label="开启" :value="0" />
            <el-option label="停用" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div class="mb-3">
        <el-button v-hasPermi="'system:dict:create'" type="primary" @click="handleCreateType">新增</el-button>
        <el-button v-hasPermi="'system:dict:delete'" type="danger" plain @click="handleDeleteTypeList">
          批量删除
        </el-button>
        <el-button v-hasPermi="'system:dict:export'" plain @click="handleExportType">导出</el-button>
        <el-button plain @click="loadList">刷新</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column type="index" label="#" width="50" align="center" />
        <el-table-column prop="name" label="字典名称" min-width="160" />
        <el-table-column prop="type" label="字典类型" min-width="180" show-overflow-tooltip />
        <el-table-column label="状态" width="90" align="center">
          <template #default="{ row }">
            <DictTag dict-type="system_common_status" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
        <el-table-column label="创建时间" width="170">
          <template #default="{ row }">{{ formatDateTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="210" fixed="right" align="center">
          <template #default="{ row }">
            <el-button v-hasPermi="'system:dict:query'" link type="primary" @click="handleOpenData(row)">
              字典数据
            </el-button>
            <el-button v-hasPermi="'system:dict:update'" link type="primary" @click="handleUpdateType(row)">
              编辑
            </el-button>
            <el-button v-hasPermi="'system:dict:delete'" link type="danger" @click="handleDeleteType(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-3 justify-end"
        @current-change="loadList"
        @size-change="handleSearch"
      />
    </el-card>

    <!-- 字典类型表单 -->
    <el-dialog v-model="typeDialogVisible" :title="isTypeUpdate ? '修改字典类型' : '新增字典类型'" width="560px">
      <el-form ref="typeFormRef" :model="typeForm" :rules="typeRules" label-width="90px">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="typeForm.name" placeholder="如 通用状态" maxlength="100" />
        </el-form-item>
        <el-form-item label="字典类型" prop="type">
          <!-- 这个字符串就是代码里 getDictOptions('system_common_status') 的入参，改了会导致读取不到 -->
          <el-input v-model="typeForm.type" placeholder="如 system_common_status" maxlength="100" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="typeForm.status">
            <el-radio :label="0">开启</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="typeForm.remark" type="textarea" :rows="2" maxlength="500" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="typeDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="typeSubmitting" @click="handleSubmitType">确定</el-button>
      </template>
    </el-dialog>

    <!-- 字典数据抽屉 -->
    <el-drawer v-model="dataDrawerVisible" :title="`字典数据 - ${currentType?.name || ''}`" size="70%">
      <el-form :model="dataQuery" inline class="search-form">
        <el-form-item label="字典标签">
          <el-input v-model="dataQuery.label" placeholder="请输入字典标签" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="字典类型">
          <el-input :model-value="currentType?.type" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchData">搜索</el-button>
        </el-form-item>
      </el-form>

      <div class="mb-3">
        <el-button v-hasPermi="'system:dict:create'" type="primary" @click="handleCreateData">新增</el-button>
        <el-button v-hasPermi="'system:dict:delete'" type="danger" plain @click="handleDeleteDataList">
          批量删除
        </el-button>
      </div>

      <el-table
        v-loading="dataLoading"
        :data="dataList"
        border
        stripe
        size="small"
        @selection-change="handleDataSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column prop="sort" label="排序" width="70" align="center" />
        <el-table-column prop="label" label="字典标签" min-width="140" />
        <el-table-column prop="value" label="字典键值" min-width="140" />
        <!-- 用该字典自己的数据渲染这一行，等于在列表里直接预览标签的实际显示效果
             （文案 + colorType 决定的颜色），不用另开弹窗确认配置对不对 -->
        <el-table-column label="效果预览" width="120" align="center">
          <template #default="{ row }">
            <DictTag :dict-type="row.dictType" :value="row.value" />
          </template>
        </el-table-column>
        <el-table-column label="状态" width="90" align="center">
          <template #default="{ row }">
            <DictTag dict-type="system_common_status" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip />
        <el-table-column label="操作" width="130" fixed="right" align="center">
          <template #default="{ row }">
            <el-button v-hasPermi="'system:dict:update'" link type="primary" @click="handleUpdateData(row)">
              编辑
            </el-button>
            <el-button v-hasPermi="'system:dict:delete'" link type="danger" @click="handleDeleteData(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="dataQuery.pageNo"
        v-model:page-size="dataQuery.pageSize"
        :total="dataTotal"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-3 justify-end"
        @current-change="loadDataList"
        @size-change="handleSearchData"
      />
    </el-drawer>

    <!-- 字典数据表单 -->
    <el-dialog v-model="dataDialogVisible" :title="isDataUpdate ? '修改字典数据' : '新增字典数据'" width="560px">
      <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="90px">
        <el-form-item label="字典标签" prop="label">
          <el-input v-model="dataForm.label" placeholder="显示文案，如 开启" maxlength="100" />
        </el-form-item>
        <el-form-item label="字典键值" prop="value">
          <el-input v-model="dataForm.value" placeholder="业务取到的值，如 0" maxlength="100" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="sort">
          <el-input-number v-model="dataForm.sort" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="标签颜色" prop="colorType">
          <el-select v-model="dataForm.colorType" placeholder="请选择标签颜色" class="w-full">
            <el-option v-for="c in COLOR_TYPES" :key="c.value" :label="c.label" :value="c.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="0">开启</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dataForm.remark" type="textarea" :rows="2" maxlength="500" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dataDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="dataSubmitting" @click="handleSubmitData">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>