merchant_feedov_web/src/views/system/dict/index.vue

<template>
    <div class="container">
        <div class="head-title">
            <span> 字典 </span>
            <div class="form-row">
                <a-input v-model="formData.type_key" style="margin: 0 0.6rem" placeholder="请输入type_key" />
                <a-input v-model="formData.type_label" style="margin: 0 0.6rem" placeholder="请输入type_label" />
                <a-button type="primary" style="margin: 0 0.6rem" @click="intData">
                    <template #icon>
                        <icon-search />
                    </template>
                    查询
                </a-button>
                <!-- <a-button style="margin: 0 0.6rem 0 0" @click="intData">重置</a-button> -->
                <a-button type="primary" @click="dictShowModel(1, null)">添加字典</a-button>
            </div>
        </div>

        <a-table :data="dataSource" :columns="columns" :scroll="{ x: 'auto' }">
            <template #operation="{ record }">
                <a class="a-link" href="javascript:;" style="margin: 0 1rem;" @click="dictShowModel(2, record)">修改</a>
                <a-popconfirm :content="`是否确认删除字典编号为 ${record.id} 的数据项?`" @ok="deleteChange(record.id)" type="warning">
                    <a class="a-link" href="javascript:;" style="color: red;">删除</a>
                </a-popconfirm>

            </template>
        </a-table>

        <!-- 弹框 -->
        <a-modal :title="typeCurrent == 1 ? '添加字典' : '修改字典'" v-model:visible="visible" @onCancel="resetForm" centered
            :maskClosable="false" :footer="null">
            <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
                <a-form-item label="字典名称" field="label">
                    <a-input v-model="formState.label" />
                </a-form-item>
                <a-form-item label="key" field="value">
                    <a-input v-model="formState.value" />
                </a-form-item>
                <a-form-item label="字典类型" field="typeLabel">
                    <a-input v-model="formState.typeLabel" />
                </a-form-item>
                <a-form-item label="数据键值" field="typeKey">
                    <a-input v-model="formState.typeKey" />
                </a-form-item>
                <a-form-item label="备注" field="remark">
                    <a-textarea v-model="formState.remark" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit" style="margin-right: 10px;">确定</a-button>
                    <a-button @click="$refs.formRef.resetFields(); visible = false;">取消</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { dictionaryList, dictionaryAdd, dictionaryDelete, dictionaryUpdate } from '@/api/path/dict';

const visible = ref(false);
const typeCurrent = ref(null);
const formRef = ref();
const dicId = ref(null);

const formData = ref({
    type_key: '',
    type_label: ''
});
const columns = ref([
    { title: '字典编号', dataIndex: 'id', align: 'center', width: 120 },
    { title: '字典名称', dataIndex: 'label', align: 'center', width: 120 },
    { title: '字典类型', dataIndex: 'type_label', align: 'center', width: 120 },
    {
        title: '备注',
        dataIndex: 'remark',
        align: 'center',
        width: 180
    },
    { title: '创建时间', dataIndex: 'created_at', align: 'center', width: 200 },
    {
        title: '操作',
        dataIndex: 'id',
        slotName: 'operation',
        align: 'center',
        width: 220,
        fixed: "right",
    }
])

const rules = {
    label: [{ required: true, trigger: 'change', }],
    value: [
        {
            required: true,
            trigger: 'change',
        },
    ],
    typeKey: [
        {
            required: true,
            trigger: 'change',
        },
    ],
    typeLabel: [
        {
            required: true,
            trigger: 'change',
        },
    ],
    remark: [
        {
            required: true,
            trigger: 'change',
        },
    ],
};

const formState = reactive({
    label: '',
    value: '',
    typeKey: '',
    typeLabel: '',
    remark: '',
});

const pageData = ref({
    total: 0,
    pageSize: 10,
    current: 1,
})
const dataSource = ref([]);

// 列表
const intData = async () => {
    const param = {
        current: pageData.value.current,
        size: pageData.value.pageSize,
        ...formData.value
    }
    const { data } = await dictionaryList(param)
    dataSource.value = data.records;
    pageData.value.total = data.total;
}
// 提交
const handleSubmit = ({ values, errors }) => {
    const submitData = {
        label: formState.label,
        value: formState.value,
        typeKey: formState.typeKey,
        typeLabel: formState.typeLabel,
        remark: formState.remark,
        id: typeCurrent == 1 ? undefined : dicId.value
    }
    if (typeCurrent == 1) {
        dictionaryAdd(submitData).then(res => {
            intData();
            visible.value = false;
        })
    } else {
        dictionaryUpdate(submitData).then(res => {
            intData();
            visible.value = false;
        })
    }

}
// 删除
const deleteChange = (e) => {
    dictionaryDelete({ id: e }).then(res => {
        console.log(res, '///////////');
    })
}
// 弹框
const dictShowModel = (type, data) => {
    typeCurrent.value = type;
    visible.value = true;
    if (type == 2) {
        console.log(data.id);
        dicId.value = data.id;
        formState.label = data.label;
        formState.value = data.value;
        formState.typeKey = data.type_key;
        formState.typeLabel = data.type_label;
        formState.remark = data.remark;
    }
}

// 取消
const resetForm = () => {
    visible.value = false;
}

onMounted(() => {
    intData();
})

</script>

<style scoped lang="less">
.container {
    .head-title {
        display: flex;
        justify-content: space-between;
    }

    .form-row {
        display: flex;
    }
}
</style>