admin-template-vue3js/src/views/system/dictData/index.vue

<template>
  <div class="main animate__animated animate__backInRight" v-loading="loading">
    <custom-search-bar :fields="fields.filter((f) => f.isSearch)" v-model="searchForm" @search="search"
      @reset="toReset"></custom-search-bar>
    <custom-button-bar :fields="buttonFields" @add="toAdd"></custom-button-bar>
    <custom-table :data="data" :fields="fields" @query="search" :total="total" :opera="opera" @edit="toEdit"
      @delete="toDelete">
      <template #is_use="{ row }">
        <el-tag v-if="row.is_use == '0'" type="success">启用</el-tag>
        <el-tag v-else type="info">禁用</el-tag>
      </template>
    </custom-table>
    <el-dialog v-model="dialog" :title="$t('pages.dictData.dialogTitle')" :destroy-on-close="false" @close="toClose"
      width="30%">
      <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave">
        <template #is_use>
          <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
        </template>
      </custom-form>
    </el-dialog>
  </div>
</template>

<script setup>
const $checkRes = inject('$checkRes')
import { cloneDeep, get } from 'lodash-es'
const { t } = useI18n()
// 接口
import { DictDataStore } from '@/store/api/system/dictData'
const store = DictDataStore()
const data = ref([])
const searchForm = ref({})
const fields = [
  { label: '数据显示值', model: 'label', isSearch: true },
  { label: '数据选择值', model: 'value' },
  { label: '排序', model: 'sort' },
  { label: '是否启用', model: 'is_use', format: (i) => getDict(i), custom: true }
]
const opera = [
  { label: t('common.update'), method: 'edit' },
  { label: t('common.delete'), method: 'delete', confirm: true, type: 'danger' }
]
const buttonFields = [{ label: t('common.add'), method: 'add' }]
let skip = 0
let limit = inject('limit')
const total = ref(20)
const isUseList = inject('isUseList')
const codeInfo = inject('codeInfo')
// 加载中
const loading = ref(false)
const formFields = [
  { label: '数据显示值', model: 'label' },
  { label: '数据选择值', model: 'value' },
  { label: '排序', model: 'sort', type: 'number' },
  { label: '是否启用', model: 'is_use', type: 'radio' }
]
const rules = reactive({
  label: [{ required: true, message: '请输入数据显示值', trigger: 'blur' }],
  value: [{ required: true, message: '请输入数据选择值', trigger: 'blur' }]
})
const dialog = ref(false)
const form = ref({})
// 请求
onMounted(async () => {
  loading.value = true
  await search({ skip, limit })
  loading.value = false
})
const search = async (query = { skip: 0, limit }) => {
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value, code: codeInfo.value.code }
  const res = await store.query(info)
  if (res.errcode == '0') {
    data.value = res.data.data
    total.value = res.data.total
  }
}
// 字典数据转换
const getDict = (data) => {
  const res = isUseList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 添加
const toAdd = () => {
  dialog.value = true
}
// 修改
const toEdit = (data) => {
  form.value = data
  dialog.value = true
}
// 删除
const toDelete = async (data) => {
  const res = await store.del(data._id)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
  }
}
const toSave = async () => {
  const data = cloneDeep(form.value)
  let res
  if (get(data, '_id')) res = await store.update(data)
  else res = await store.create({ ...data, code: codeInfo.value.code })
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
    toClose()
  }
}
// 重置
const toReset = async () => {
  searchForm.value = {}
  await search({ skip, limit })
}
const toClose = () => {
  form.value = {}
  dialog.value = false
}
</script>
<style scoped lang="scss"></style>