123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340 |
- <!-- 字典数据 -->
- <script setup lang="ts">
- import {
- getDictPage,
- getDictFormData,
- addDict,
- updateDict,
- deleteDict,
- } from "@/api/system/dict";
- import { DictPageVO, DictForm, DictQuery } from "@/api/system/dict/types";
- import ButtonPermKeys from "@/common/configs/buttonPermission";
- defineOptions({
- name: "DictData",
- inheritAttrs: false,
- });
- const props = defineProps({
- typeCode: {
- type: String,
- default: () => {
- return "";
- },
- },
- typeName: {
- type: String,
- default: () => {
- return "";
- },
- },
- });
- watch?.(
- () => props.typeCode,
- (newVal: string) => {
- queryParams.dictCode = newVal;
- formData.dictCode = newVal;
- resetQuery();
- }
- );
- const queryFormRef = ref(ElForm);
- const dataFormRef = ref(ElForm);
- const loading = ref(false);
- const ids = ref<string[]>([]);
- const total = ref(0);
- const queryParams = reactive<any>({
- pageNo: 1,
- pageSize: 10,
- dictCode: props.typeCode,
- });
- const dictList = ref<DictPageVO[]>();
- const dialog = reactive({
- title: "",
- visible: false,
- });
- const formData = reactive<any>({
- state: 0,
- dictCode: props.typeCode,
- dictSort: 1,
- });
- const rules = reactive({
- name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
- value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
- });
- /**
- * 查询
- */
- function handleQuery() {
- if (queryParams.dictCode) {
- loading.value = true;
- getDictPage(queryParams)
- .then(({ data }) => {
- dictList.value = data.records;
- total.value = data.totalCount;
- })
- .finally(() => (loading.value = false));
- }
- }
- /**
- * 重置查询
- */
- function resetQuery() {
- queryParams.pageNo = 1;
- handleQuery();
- }
- /**
- * 行checkbox change事件
- *
- * @param selection
- */
- function handleSelectionChange(selection: any) {
- ids.value = selection.map((item: any) => item.id);
- }
- /**
- * 打开字典表单弹窗
- *
- * @param dictId 字典ID
- */
- function openDialog(form?: any) {
- dialog.visible = true;
- if (form) {
- dialog.title = "修改字典";
- Object.assign(formData, form);
- } else {
- dialog.title = "新增字典";
- dataFormRef.value.label = "";
- dataFormRef.value = "";
- formData.dictLabel = "";
- formData.dictValue = ""
- }
- }
- /**
- * 字典表单提交
- */
- function handleSubmit() {
- dataFormRef.value.validate((isValid: boolean) => {
- if (isValid) {
- const dictId = formData.id;
- if (dictId) {
- updateDict(formData)
- .then(() => {
- ElMessage.success("修改成功");
- closeDialog();
- resetQuery();
- })
- .finally(() => (loading.value = false));
- } else {
- addDict(formData)
- .then(() => {
- ElMessage.success("新增成功");
- closeDialog();
- resetQuery();
- })
- .finally(() => (loading.value = false));
- }
- }
- });
- }
- /**
- * 关闭弹窗
- */
- function closeDialog() {
- dialog.visible = false;
- resetForm();
- }
- /**
- * 重置表单
- */
- function resetForm() {
- dataFormRef.value.resetFields();
- dataFormRef.value.clearValidate();
- formData.id = undefined;
- formData.state = 0;
- formData.dictSort = 1;
- formData.dictCode = props.typeCode;
- }
- /**
- * 删除字典
- */
- function handleDelete(dictId?: string) {
- if (dictId) {
- ids.value.push(dictId);
- }
- if (!ids.value) {
- ElMessage.warning("请勾选删除项");
- return;
- }
- ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- }).then(() => {
- deleteDict(ids.value).then(() => {
- ElMessage.success("删除成功");
- resetQuery();
- });
- });
- }
- onMounted?.(() => {
- handleQuery();
- });
- </script>
- <template>
- <div class="app-container">
- <!-- <div class="search-container">
- <!– 搜索表单 –>
- <el-form ref="queryFormRef" :model="queryParams" :inline="true">
- <el-form-item label="关键字" prop="name">
- <el-input
- v-model="queryParams.name"
- placeholder="字典名称"
- clearable
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleQuery"
- ><i-ep-search />搜索</el-button
- >
- <el-button @click="resetQuery"> <i-ep-refresh />重置</el-button>
- </el-form-item>
- </el-form>
- </div>-->
- <el-card shadow="never">
- <template #header>
- <el-button
- v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.dict_add]"
- type="primary"
- @click="openDialog()"
- ><i-ep-plus />新增</el-button
- >
- <!-- <el-button
- v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.dict_del]"
- type="danger"
- :disabled="ids.length === 0"
- @click="handleDelete()"
- ><i-ep-delete />删除</el-button
- >-->
- </template>
- <!-- 数据表格 -->
- <el-table
- v-loading="loading"
- :data="dictList"
- border
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="50" />
- <el-table-column label="字典名称" prop="dictLabel" />
- <el-table-column label="字典值" prop="dictValue" />
- <el-table-column label="排序" prop="dictSort" />
- <el-table-column label="状态" align="center">
- <template #default="scope">
- <el-tag v-if="scope.row.state === 0" type="success">启用</el-tag>
- <el-tag v-else type="info">禁用</el-tag>
- </template>
- </el-table-column>
- <el-table-column fixed="right" label="操作" align="center">
- <template #default="scope">
- <el-button
- v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.dict_edit]"
- type="primary"
- link
- @click="openDialog(scope.row)"
- ><i-ep-edit />编辑</el-button
- >
- <!-- <el-button
- v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.dict_del]"
- type="primary"
- link
- @click.stop="handleDelete(scope.row.id)"
- ><i-ep-delete />删除</el-button
- >-->
- </template>
- </el-table-column>
- </el-table>
- <pagination
- v-if="total > 0"
- v-model:total="total"
- v-model:page="queryParams.pageNo"
- v-model:limit="queryParams.pageSize"
- @pagination="handleQuery"
- />
- </el-card>
- <!-- 表单弹窗 -->
- <el-dialog
- v-model="dialog.visible"
- :title="dialog.title"
- width="500px"
- @close="closeDialog"
- >
- <el-form
- ref="dataFormRef"
- :model="formData"
- :rules="rules"
- label-width="100px"
- >
- <el-form-item label="字典名称" prop="dictLabel">
- <el-input v-model="formData.dictLabel" placeholder="请输入字典名称" />
- </el-form-item>
- <el-form-item label="字典值" prop="dictValue">
- <el-input
- v-if="formData.id"
- disabled
- v-model="formData.dictValue"
- placeholder="字典值"
- />
- <el-input
- v-if="!formData.id"
- v-model="formData.dictValue"
- placeholder="字典值"
- />
- </el-form-item>
- <el-form-item label="排序" prop="dictSort">
- <el-input-number
- v-model="formData.dictSort"
- controls-position="right"
- :min="0"
- />
- </el-form-item>
- <el-form-item label="状态" prop="status">
- <el-radio-group v-model="formData.state">
- <el-radio :value="0">正常</el-radio>
- <el-radio :value="1">停用</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="备注" prop="remark">
- <el-input v-model="formData.remark" type="textarea" />
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="handleSubmit">确 定</el-button>
- <el-button @click="closeDialog">取 消</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
|