njzscloud-dispose-web/src/pages/sys/dict/DictItem.vue

<template>
  <div>
    <div class="tool-bar">
      <ElForm inline @submit.prevent="paging">
        <ElFormItem>
          <ElInput
            v-model="searchForm.dictKey"
            placeholder="请选择左侧的字典"
            readonly/>
        </ElFormItem>
        <ElFormItem>
          <ElInput
            v-model="searchForm.txt"
            clearable
            placeholder="请输入要搜索的文字"
            @clear="reset"/>
        </ElFormItem>
        <ElFormItem>
          <ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
          <ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
    <ElTable v-loading="searching" :data="tableData"
      cell-class-name="table-cell"
      class="table-list"
      empty-text="暂无数据"
      header-row-class-name="table-header"
      row-key="id">
      <!-- <ElTableColumn label="字典 Id" prop="dictId"/> -->

      <ElTableColumn label="字典标识" prop="dictKey" width="180"/>

      <ElTableColumn label="值" prop="val"/>

      <ElTableColumn label="显示文本" prop="txt"/>

      <ElTableColumn label="排序" prop="sort"/>

      <ElTableColumn label="备注" prop="memo"/>

      <ElTableColumn label="操作" width="180">
        <template #default="scope">
          <div class="action-btn">
            <ElPopconfirm
              cancel-button-text="否"
              cancel-button-type="primary"
              confirm-button-text="是"
              confirm-button-type="danger"
              placement="top"
              title="是否删除当前数据?"
              width="180"
              @confirm="delHandler(scope)">
              <template #reference>
                <ElButton :loading="deling" text type="danger">删除</ElButton>
              </template>
            </ElPopconfirm>
            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>
    <DictItemForm ref="dictItemForm" @edit-succ="paging"/>
  </div>
</template>
<script lang="ts" setup>
import DictApi from '@/pages/sys/dict/dict-api.ts'
import DictItemApi from '@/pages/sys/dict/dict-item-api.ts'
import { elIcons } from '@/common/element/element.ts'
import DictItemForm from '@/pages/sys/dict/DictItemForm.vue'
import Strings from '@/common/utils/strings.ts'

const tableData = ref<DictItemTypes.SearchDictItemResult[]>([])
const searchForm = reactive<DictItemTypes.SearchDictItemParam>({
  current: 1,
  size: 20,
})
const searching = ref(false)
const deling = ref(false)
const currentDict = reactive<DictTypes.SearchDictResult>({})
const dictItemFormIns = useTemplateRef<InstanceType<typeof DictItemForm>>('dictItemForm')

function showDialog(data?: DictItemTypes.SearchDictItemResult) {
  dictItemFormIns.value?.open(data)
}

function delHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
  deling.value = true
  DictItemApi.del([ row.id! ])
    .then(() => {
      ElMessage.success('删除成功')
      paging()
    })
    .finally(() => {
      deling.value = false
    })
}

function modifyHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
  showDialog(row)
}

function addHandler() {
  if (Strings.isBlank(searchForm.dictKey)) {
    ElMessage.error('请选择左侧的字典')
    return
  }
  showDialog({dictId: currentDict.id, dictKey: currentDict.dictKey})
}

function reset() {
  searchForm.txt = ''
  paging()
}

function paging() {
  if (Strings.isBlank(searchForm.dictKey)) {
    ElMessage.error('请选择左侧的字典')
    return
  }
  searching.value = true
  DictApi.obtainDictData(searchForm)
    .then(res => {
      tableData.value = res.data ?? []
    })
    .finally(() => {
      searching.value = false
    })
}

defineExpose({
  reload(data: DictTypes.SearchDictResult) {
    searchForm.dictKey = data.dictKey
    Object.assign(currentDict, data)
    paging()
  },
})
</script>
<style lang="stylus" scoped>
.table-list {
  flex 1;
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }

  .action-btn {
    width 100%
    display flex
    flex-wrap wrap

    & > button {
      margin 0
    }
  }
}

.tool-bar {
  display flex
  justify-content space-between
  margin 0 0 20px 0
}
</style>