rax-medical/src/views/logs-manage/dict-manage.vue

<template>
  <div class="table-page">
    <div class="search-part" v-show="isSearch">
      <div class="search-cell">
        <span class="label">词典名称</span>
        <el-input v-model="queryParams" placeholder="请输入名称"></el-input>
      </div>
      <el-button type="primary" icon="Search" @click="search">查询</el-button>
      <el-button icon="Refresh" @click="resetSearch">重置</el-button>
    </div>
    <div class="button-part" style="justify-content: space-between;">
      <div>
        <el-button type="primary" icon="FirstAidKit" @click="addDict()">新增</el-button>
      </div>
      <TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="init()"></TableAbility>
    </div>
    <div class="table-part">
      <el-table ref="tableRef"
                :data="tableData"
                row-key="id" height="100%"
                border
                show-overflow-tooltip
      >
        <el-table-column property="description" label="描述" width="300" align="center"/>
        <el-table-column property="label" label="标签名" width="260" align="center"/>
        <el-table-column property="value" label="值" width="260" align="center"/>
        <el-table-column property="remarks" label="备注" width="260" align="center"/>
        <el-table-column property="dictType" label="类型" width="180" align="center"/>
        <el-table-column property="sortOrder" label="排序" width="80" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div @click.stop>
              <el-button link icon="EditPen" v-if="!scope.row.dictId" @click="addDictItem(scope.row)">添加字典项
              </el-button>
              <el-button link icon="EditPen" @click="edit(scope.row)">修改</el-button>
              <el-button link icon="Delete" @click="remove(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-part">
      <CommonPagination :total="total" @paginationChange="paginationChange"/>
    </div>
  </div>

  <el-dialog v-model="showFormDialog" :title="formDialogTitle" width="30%">
    <DictForm ref="dictFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'"
              @save-or-update-event="dictFormEvent" @close="showFormDialog = false"/>
  </el-dialog>

  <el-dialog v-model="showItemDialog" :title="formDialogTitle" width="30%">
    <DictItemForm ref="dictItemFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'"
                  @save-or-update-event="dictItemFormEvent" @close="showItemDialog = false"/>
  </el-dialog>
</template>

<script setup lang="ts">
import DictForm from "@/views/logs-manage/form/dict-form.vue";
import CommonPagination from "@/components/common-pagination.vue";
import {onMounted, ref} from "vue";
import * as dictApi from "@/api/dict";
import DictItemForm from "@/views/logs-manage/form/dict-item-form.vue";
import {ElMessage, ElMessageBox} from "element-plus";

const tableData = ref([] as any)
let current = 0
let size = 10
const total = ref(0)
const queryParams = ref("")
const isSearch = ref(true)
const showFormDialog = ref(false)
const showItemDialog = ref(false)
const formDialogTitle = ref('')
const tableRef = ref()
const dictFormRef = ref();
const dictItemFormRef = ref();

onMounted(() => {
  init()
})

function init() {
  current = 0;
  total.value = 0;
  queryParams.value = "";
  getList()
}

function getList() {
  dictApi.dictPage(current, size, queryParams.value).then((res: any) => {
    if (res.code == 0) {
      total.value = res.data.total
      tableData.value = res.data.records;
    }
  })
}

function search() {
}

function resetSearch() {
}

function addDict() {
  formDialogTitle.value = "添加";
  showFormDialog.value = true;
  setTimeout(() => {
    dictFormRef.value.resetData();
  })
}

function dictFormEvent() {
  showFormDialog.value = false;
  getList()
}

function dictItemFormEvent() {
  showItemDialog.value = false;
  getList()
}

function addDictItem(row: any) {
  formDialogTitle.value = "添加";
  showItemDialog.value = true;
  setTimeout(() => {
    dictItemFormRef.value.resetData(row);
  })
}

function edit(row: any) {
  formDialogTitle.value = "编辑";
  if (row.dictId) {
    showItemDialog.value = true;
    setTimeout(() => {
      dictItemFormRef.value.resetData(row);
    })
  } else {
    showFormDialog.value = true;
    setTimeout(() => {
      dictFormRef.value.resetData(row);
    })
  }
}

function remove(row: any) {
  ElMessageBox.confirm("是否删除？", "提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  }).then(() => {
    if (row.dictId) {
      dictApi.deleteDictItem(row.id).then(res => {
        if (res.code == 0) {
          ElMessage.success("删除成功")
          getList()
        } else {
          ElMessage.error(res.msg ? res.msg : "删除失败")
        }
      })
    } else {
      dictApi.deleteDict([row.id]).then(res => {
        if (res.code == 0) {
          ElMessage.success("删除成功")
          getList()
        } else {
          ElMessage.error(res.msg ? res.msg : "删除失败")
        }
      })
    }
  }).catch(() => {
  })
}

const paginationChange = (page: number, s: number) => {
  current = page - 1
  size = s
  getList()
}
</script>

<style scoped lang="scss">
</style>