From 5eb6903bde0b9be730b35fc116eabf808f8f64e0 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 18 三月 2025 11:33:58 +0800
Subject: [PATCH] fix:简化项目模板&剔除无用部分
---
src/views/system/dict/index.vue | 665 ++++++++++++++++++++++++++++---------------------------
1 files changed, 339 insertions(+), 326 deletions(-)
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 85e27a5..81625f0 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,38 +1,38 @@
-
-<script setup name="Post">
-import { sysDictType,sysDictData} from "@/api/system/dict";
-import { onMounted } from "vue";
+<script setup>
+import {sysDictType, sysDictData} from "@/api/system/dict";
+import {onMounted} from "vue";
import setPostParams from "@/utils/searchParams.js";
-const { proxy } = getCurrentInstance();
+
+const {proxy} = getCurrentInstance();
const loading = ref(true); //加载状态
/** 区域table相关 */
const tableData = ref([]); //数据字典列表
-const total = ref(0);
+const total = ref(0);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
-let tableHeader = ref({
+let tableHeader = ref({
dictName: '字典名称',
dictType: '字典类型',
- remark:'备注',
- updateTimeView:'更新时间'
- })
- //获取列表数据
-const getList = async(val) => {
+ remark: '备注',
+ updateTimeView: '更新时间'
+})
+//获取列表数据
+const getList = async (val) => {
- loading.value = true;
+ loading.value = true;
let postParam = setPostParams(val)
- let res = await sysDictType().search(postParam)
- if(res.code == 200) {
- loading.value = false;
- tableData.value = res.data.list;
-
- total.value = res.data.total;
- search.page = res.data.page;
- search.limit = res.data.limit;
- }
+ let res = await sysDictType().search(postParam)
+ if (res.code == 200) {
+ loading.value = false;
+ tableData.value = res.data.list;
+
+ total.value = res.data.total;
+ search.page = res.data.page;
+ search.limit = res.data.limit;
+ }
}
/**
* 添加修改表单相关
@@ -41,126 +41,127 @@
const showSearch = ref(true);
const title = ref("");
const data = reactive({
- //表单
- form: {
- dictName:'',
- dictType:'',
- remark:'',
- },
+ //表单
+ form: {
+ dictName: '',
+ dictType: '',
+ remark: '',
+ },
- //查询数据
- search: {
- page: 1, //当前页
- limit: 10, //每页条数
- dictName: '',
- status: ''
- },
- //表单验证
- rules: {
- dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
- dictType: [{ required: true, message: "请输入字典类型", trigger: "blur" }],
- },
+ //查询数据
+ search: {
+ page: 1, //当前页
+ limit: 10, //每页条数
+ dictName: '',
+ status: ''
+ },
+ //表单验证
+ rules: {
+ dictName: [{required: true, message: "请输入字典名称", trigger: "blur"}],
+ dictType: [{required: true, message: "请输入字典类型", trigger: "blur"}],
+ },
});
-const { search, form, rules } = toRefs(data);
-/**
- * 提交添加修改表单按钮
+const {search, form, rules} = toRefs(data);
+
+/**
+ * 提交添加修改表单按钮
*/
function submitForm() {
-
- proxy.$refs["postRef"].validate(async valid => {
- if (valid) {
- if(!form.value.id){
- let res = await sysDictType().create(form.value)
- if(res.code == 200) {
- proxy.$modal.msgSuccess("添加成功")
- openForm.value = false
- getList()
- reset()
- }else{
- proxy.$modal.msgError("添加失败")
- openForm.value = false
- reset()
- }
- }else{
- let res = await sysDictType().modify(form.value)
- if(res.code == 200) {
- proxy.$modal.msgSuccess("修改成功")
- openForm.value = false
- getList()
- reset()
- }else{
- proxy.$modal.msgError("修改失败")
- openForm.value = false
- reset()
- }
+
+ proxy.$refs["postRef"].validate(async valid => {
+ if (valid) {
+ if (!form.value.id) {
+ let res = await sysDictType().create(form.value)
+ if (res.code == 200) {
+ proxy.$modal.msgSuccess("添加成功")
+ openForm.value = false
+ getList()
+ reset()
+ } else {
+ proxy.$modal.msgError("添加失败")
+ openForm.value = false
+ reset()
+ }
+ } else {
+ let res = await sysDictType().modify(form.value)
+ if (res.code == 200) {
+ proxy.$modal.msgSuccess("修改成功")
+ openForm.value = false
+ getList()
+ reset()
+ } else {
+ proxy.$modal.msgError("修改失败")
+ openForm.value = false
+ reset()
+ }
+ }
}
- }
- });
+ });
}
+
/**
* 字典类型操作相关
*/
/** 搜索按钮操作 */
function handleQuery() {
- getList({keywords:search.value.dictName,page:1});
+ getList({keywords: search.value.dictName, page: 1});
}
+
/** 重置按钮操作 */
function resetQuery() {
- proxy.resetForm("queryRef");
- handleQuery();
+ proxy.resetForm("queryRef");
+ handleQuery();
}
+
/** 多选框选中数据 */
function handleSelectionChange(selection) {
- ids.value = selection.map(item => item.id);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
+ ids.value = selection.map(item => item.id);
+ single.value = selection.length != 1;
+ multiple.value = !selection.length;
}
+
/** 新增按钮操作 */
function handleAdd() {
- reset();
- openForm.value = true;
- title.value = "添加字典";
+ reset();
+ openForm.value = true;
+ title.value = "添加字典";
}
/** 修改按钮操作 */
function handleUpdate(row) {
- reset();
- //将表单数据更新为table对应值
- Object.keys(row).forEach(key => {
- if (form.value.hasOwnProperty(key)) {
- form.value[key] = row[key];
- }
- });
- form.value.id = row.id
- console.log('form',form.value);
- openForm.value = true;
- title.value = "修改字典";
+ reset();
+ //将表单数据更新为table对应值
+ Object.keys(row).forEach(key => {
+ if (form.value.hasOwnProperty(key)) {
+ form.value[key] = row[key];
+ }
+ });
+ form.value.id = row.id
+ console.log('form', form.value);
+ openForm.value = true;
+ title.value = "修改字典";
}
/** 删除按钮操作 */
function handleDelete(row) {
- proxy.$modal.confirm('确认删除"' + row.dictName +'？')
- .then(async() => {
- console.log("无删除功能");
- // let res = await areaApi().remove(row.id)
- // if(res.code == 200) {
- // proxy.$modal.msgSuccess("删除成功");
- // openForm.value = false
- // getList()
- // }
- }).catch(() => {});
+ proxy.$modal.confirm('确认删除"' + row.dictName + '？')
+ .then(async () => {
+ console.log("无删除功能");
+ }).catch(() => {
+ });
}
/** 关闭弹窗 */
function cancel() {
- openForm.value = false;
- reset();
+ openForm.value = false;
+ reset();
}
+
/** 表单重置 */
const reset = () => {
- proxy.resetForm("postRef");
- openForm.value = false
+ proxy.resetForm("postRef");
+ openForm.value = false
}
/**
@@ -171,126 +172,129 @@
//判断
const isHandle = ref(false)
//table
-const tableDictData = ref([]);
-let tableDataHeader = ref({
- dictType: '字典类型',
- dictValue: '字典键值',
- dictLabel: '字典描述',
- remark:'备注',
- })
+const tableDictData = ref([]);
+let tableDataHeader = ref({
+ dictType: '字典类型',
+ dictValue: '字典键值',
+ dictLabel: '字典描述',
+ remark: '备注',
+})
//获取列表
-const getDataList = async(val) => {
- console.log('val',val);
- loading.value = true;
- let res = await sysDictData().searchType(val)
- if(res.code == 200) {
- loading.value = false;
- tableDictData.value = res.data;
- }
+const getDataList = async (val) => {
+ console.log('val', val);
+ loading.value = true;
+ let res = await sysDictData().searchType(val)
+ if (res.code == 200) {
+ loading.value = false;
+ tableDictData.value = res.data;
+ }
}
const postDataRef = ref()
- //表单
+//表单
const dataForm = ref({
- dictLabel:'',
- dictValue:'',
- dictType:'',
- remark:''
+ dictLabel: '',
+ dictValue: '',
+ dictType: '',
+ remark: ''
})
const dataRules = ref({
- dictLabel: [{ required: true, message: "请输入字典描述", trigger: "blur" }],
- dictValue: [{ required: true, message: "请输入字典键值", trigger: "blur" }],
+ dictLabel: [{required: true, message: "请输入字典描述", trigger: "blur"}],
+ dictValue: [{required: true, message: "请输入字典键值", trigger: "blur"}],
})
//提交
-const handleData = () =>{
-
- proxy.$refs["postDataRef"].validate(async valid => {
- if (valid) {
- if(!dataForm.value.id){
- let res = await sysDictData().create(dataForm.value)
- if(res.code == 200) {
- proxy.$modal.msgSuccess("添加成功")
- isHandle.value = false
- getDataList(dataForm.value.dictType)
- proxy.resetForm("postDataRef");
- }else{
- proxy.$modal.msgError("添加失败")
- isHandle.value = false
- proxy.resetForm("postDataRef");
- }
- }else{
- let res = await sysDictData().modify(dataForm.value)
- if(res.code == 200) {
- proxy.$modal.msgSuccess("修改成功")
- isHandle.value = false
- getDataList(dataForm.value.dictType)
- proxy.resetForm("postDataRef");
-
- }else{
- proxy.$modal.msgError("修改失败")
- isHandle.value = false
- proxy.resetForm("postDataRef");
- }
+const handleData = () => {
+
+ proxy.$refs["postDataRef"].validate(async valid => {
+ if (valid) {
+ if (!dataForm.value.id) {
+ let res = await sysDictData().create(dataForm.value)
+ if (res.code == 200) {
+ proxy.$modal.msgSuccess("添加成功")
+ isHandle.value = false
+ getDataList(dataForm.value.dictType)
+ proxy.resetForm("postDataRef");
+ } else {
+ proxy.$modal.msgError("添加失败")
+ isHandle.value = false
+ proxy.resetForm("postDataRef");
+ }
+ } else {
+ let res = await sysDictData().modify(dataForm.value)
+ if (res.code == 200) {
+ proxy.$modal.msgSuccess("修改成功")
+ isHandle.value = false
+ getDataList(dataForm.value.dictType)
+ proxy.resetForm("postDataRef");
+
+ } else {
+ proxy.$modal.msgError("修改失败")
+ isHandle.value = false
+ proxy.resetForm("postDataRef");
+ }
+ }
}
- }
- });
+ });
}
//取消
-const cancelData = () =>{
- isHandle.value = false
- proxy.resetForm("postDataRef");
+const cancelData = () => {
+ isHandle.value = false
+ proxy.resetForm("postDataRef");
}
//查看按钮相关
-const handleDetail = (row) =>{
- getDataList(row.dictType)
- openDataForm.value = true
- console.log('form',dataForm.value);
- dataForm.value.dictType = row.dictType
- isHandle.value = false
+const handleDetail = (row) => {
+ getDataList(row.dictType)
+ openDataForm.value = true
+ console.log('form', dataForm.value);
+ dataForm.value.dictType = row.dictType
+ isHandle.value = false
}
//关闭按钮相关
-const close = () =>{
- openDataForm.value = false
- proxy.resetForm('postDataRef')
- isHandle.value = false
+const close = () => {
+ openDataForm.value = false
+ proxy.resetForm('postDataRef')
+ isHandle.value = false
}
-// 新增
+
+// 新增
function handleAddData() {
- let type = dataForm.value.dictType
- proxy.resetForm("postDataRef");
- dataForm.value.dictType = type
- console.log('form1',dataForm.value);
- isHandle.value = true
- if(dataForm.value.id){
- delete dataForm.value.id
- }
+ let type = dataForm.value.dictType
+ proxy.resetForm("postDataRef");
+ dataForm.value.dictType = type
+ console.log('form1', dataForm.value);
+ isHandle.value = true
+ if (dataForm.value.id) {
+ delete dataForm.value.id
+ }
}
/** 修改 */
async function handleUpdateData(row) {
- //将表单数据更新为table对应值
- Object.keys(row).forEach(key => {
- if (dataForm.value.hasOwnProperty(key)) {
- dataForm.value[key] = row[key];
- }
- });
- dataForm.value.id = row.id
- isHandle.value = true
+ //将表单数据更新为table对应值
+ Object.keys(row).forEach(key => {
+ if (dataForm.value.hasOwnProperty(key)) {
+ dataForm.value[key] = row[key];
+ }
+ });
+ dataForm.value.id = row.id
+ isHandle.value = true
}
/** 删除 */
function handleDeleteData(row) {
- proxy.$modal.confirm('确认删除"' + row.dictValue +'？')
- .then(async() => {
- let res = await sysDictData().remove(row.id)
- if(res.code == 200) {
- proxy.$modal.msgSuccess("删除成功");
- getDataList(row.dictType)
- }
- }).catch(() => {});
+ proxy.$modal.confirm('确认删除"' + row.dictValue + '？')
+ .then(async () => {
+ let res = await sysDictData().remove(row.id)
+ if (res.code == 200) {
+ proxy.$modal.msgSuccess("删除成功");
+ getDataList(row.dictType)
+ }
+ }).catch(() => {
+ });
}
-onMounted(async()=>{
-
- getList();
+
+onMounted(async () => {
+
+ getList();
})
@@ -300,153 +304,162 @@
<!--搜索框-->
<el-form :model="search" ref="queryRef" :inline="true" v-show="showSearch">
<el-form-item label="" prop="dictName">
- <el-input
- v-model="search.dictName"
- placeholder="请输入管点名称或编号"
- clearable
- style="width: 200px"
- @keyup.enter="handleQuery"
- />
+ <el-input
+ v-model="search.dictName"
+ placeholder="请输入管点名称或编号"
+ clearable
+ style="width: 200px"
+ @keyup.enter="handleQuery"
+ />
</el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-
- </el-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+
+ </el-form-item>
</el-form>
<!--操作按钮列-->
<el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="primary"
- plain
- icon="Plus"
- @click="handleAdd"
- >新增</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+ <el-col :span="1.5">
+ <el-button
+ type="primary"
+ plain
+ icon="Plus"
+ @click="handleAdd"
+ >新增
+ </el-button>
+ </el-col>
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!--表格及分页-->
<el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align ="center" />
- <el-table-column
- v-for="(item, key, index) of tableHeader"
- :prop="key.toString()"
- :label="item"
- :key="index"
- align="center"
- ></el-table-column>
- <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)">查看字典数据</el-button>
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
- </template>
- </el-table-column>
+ <el-table-column type="selection" width="55" align="center"/>
+ <el-table-column
+ v-for="(item, key, index) of tableHeader"
+ :prop="key.toString()"
+ :label="item"
+ :key="index"
+ align="center"
+ ></el-table-column>
+ <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)">查看字典数据</el-button>
+ <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+ <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+ </template>
+ </el-table-column>
</el-table>
<pagination
- v-show="total > 0"
- :total="total"
- v-model:page="search.page"
- v-model:limit="search.limit"
- @pagination="getList"
+ v-show="total > 0"
+ :total="total"
+ v-model:page="search.page"
+ v-model:limit="search.limit"
+ @pagination="getList"
/>
<!-- 添加/修改弹窗 -->
<el-dialog :title="title" v-model="openForm" width="45vw" center append-to-body>
- <el-form class="form-box" ref="postRef" :model="form" :rules="rules">
- <el-form-item label="字典名称" prop="dictName">
- <el-input v-model="form.dictName" placeholder="请输入字典名称" />
- </el-form-item>
- <el-form-item label="字典类型" prop="dictType">
- <el-input v-model="form.dictType" placeholder="请输入字典类型" />
- </el-form-item>
- <el-form-item label="备注" prop="remark">
- <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
- </el-form-item>
- <el-form-item></el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
+ <el-form class="form-box" ref="postRef" :model="form" :rules="rules">
+ <el-form-item label="字典名称" prop="dictName">
+ <el-input v-model="form.dictName" placeholder="请输入字典名称"/>
+ </el-form-item>
+ <el-form-item label="字典类型" prop="dictType">
+ <el-input v-model="form.dictType" placeholder="请输入字典类型"/>
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
+ </el-form-item>
+ <el-form-item></el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="cancel">取 消</el-button>
+ </div>
+ </template>
</el-dialog>
<!-- 字典数据弹窗 -->
<el-dialog title="字典数据" v-model="openDataForm" width="50vw" center append-to-body>
- <!--操作按钮列-->
- <el-row>
- <el-col>
- <el-button
- type="primary"
- plain
- icon="Plus"
- @click="handleAddData"
- >新增</el-button>
- </el-col>
- </el-row>
- <!--表格-->
- <el-table v-loading="loading" :data="tableDictData">
- <el-table-column
- v-for="(item, key, index) of tableDataHeader"
- :prop="key.toString()"
- :label="item"
- :key="index"
- align="center"
-
- >
- </el-table-column>
- <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link :type="dataForm.dictValue == scope.row.dictValue ? 'warning' : 'primary'" icon="Edit" @click="handleUpdateData(scope.row)">修改</el-button>
- <el-button link type="primary" icon="Delete" @click="handleDeleteData(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-form title="添加数据" v-show="isHandle" class="dataForm-box" ref="postDataRef" :rules="dataRules" :model="dataForm" inline label-width="100px">
- <el-form-item prop="dictType">
- <span>{{ dataForm.dictType }}</span>
- </el-form-item>
- <el-form-item prop="dictValue">
- <el-input v-model="dataForm.dictValue" placeholder="请输入字典键值"></el-input>
- </el-form-item>
- <el-form-item prop="dictLabel">
- <el-input v-model="dataForm.dictLabel" placeholder="请输入字典描述"></el-input>
- </el-form-item>
- <el-form-item prop="remark">
- <el-input v-model="dataForm.remark" placeholder="请输入备注"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleData">确 认</el-button>
- <el-button @click="cancelData">取 消</el-button>
- </el-form-item>
- </el-form>
-
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="close">关 闭</el-button>
- </div>
- </template>
- </el-dialog>
+ <!--操作按钮列-->
+ <el-row>
+ <el-col>
+ <el-button
+ type="primary"
+ plain
+ icon="Plus"
+ @click="handleAddData"
+ >新增
+ </el-button>
+ </el-col>
+ </el-row>
+ <!--表格-->
+ <el-table v-loading="loading" :data="tableDictData">
+ <el-table-column
+ v-for="(item, key, index) of tableDataHeader"
+ :prop="key.toString()"
+ :label="item"
+ :key="index"
+ align="center"
+
+ >
+ </el-table-column>
+ <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-button link :type="dataForm.dictValue == scope.row.dictValue ? 'warning' : 'primary'"
+ icon="Edit" @click="handleUpdateData(scope.row)">修改
+ </el-button>
+ <el-button link type="primary" icon="Delete" @click="handleDeleteData(scope.row)">删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-form title="添加数据" v-show="isHandle" class="dataForm-box" ref="postDataRef" :rules="dataRules"
+ :model="dataForm" inline label-width="100px">
+ <el-form-item prop="dictType">
+ <span>{{ dataForm.dictType }}</span>
+ </el-form-item>
+ <el-form-item prop="dictValue">
+ <el-input v-model="dataForm.dictValue" placeholder="请输入字典键值"></el-input>
+ </el-form-item>
+ <el-form-item prop="dictLabel">
+ <el-input v-model="dataForm.dictLabel" placeholder="请输入字典描述"></el-input>
+ </el-form-item>
+ <el-form-item prop="remark">
+ <el-input v-model="dataForm.remark" placeholder="请输入备注"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleData">确 认</el-button>
+ <el-button @click="cancelData">取 消</el-button>
+ </el-form-item>
+ </el-form>
+
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="close">关 闭</el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<style scoped lang="scss">
-.dataForm-box{
- background-color: #ffffff;
- display:flex;
- .el-form-item{
- width: 18%;
- margin: 10px 1%;
- span{
- margin: 0 auto;
- // font-weight: 600;
- }
- }
+.dataForm-box {
+ background-color: #ffffff;
+ display: flex;
+
+ .el-form-item {
+ width: 18%;
+ margin: 10px 1%;
+
+ span {
+ margin: 0 auto;
+ // font-weight: 600;
+ }
+ }
}
-.focus{
- color: aqua;
+
+.focus {
+ color: aqua;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3