From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 27 五月 2025 17:52:03 +0800 Subject: [PATCH] 页面样式修改 --- src/views/system/notice/index.vue | 292 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 292 insertions(+), 0 deletions(-) diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue new file mode 100644 index 0000000..7bb7c11 --- /dev/null +++ b/src/views/system/notice/index.vue @@ -0,0 +1,292 @@ +<template> + <div class="app-container"> + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> + <el-form-item label="鍏憡鏍囬" prop="noticeTitle"> + <el-input + v-model="queryParams.noticeTitle" + placeholder="璇疯緭鍏ュ叕鍛婃爣棰�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鎿嶄綔浜哄憳" prop="createBy"> + <el-input + v-model="queryParams.createBy" + placeholder="璇疯緭鍏ユ搷浣滀汉鍛�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="绫诲瀷" prop="noticeType"> + <el-select v-model="queryParams.noticeType" placeholder="鍏憡绫诲瀷" clearable style="width: 200px"> + <el-option + v-for="dict in sys_notice_type" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </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" + v-hasPermi="['system:notice:add']" + >鏂板</el-button> + </el-col> + <el-col :span="1.5"> + <el-button + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate" + v-hasPermi="['system:notice:edit']" + >淇敼</el-button> + </el-col> + <el-col :span="1.5"> + <el-button + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['system:notice:remove']" + >鍒犻櫎</el-button> + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + + <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="搴忓彿" align="center" prop="noticeId" width="100" /> + <el-table-column + label="鍏憡鏍囬" + align="center" + prop="noticeTitle" + :show-overflow-tooltip="true" + /> + <el-table-column label="鍏憡绫诲瀷" align="center" prop="noticeType" width="100"> + <template #default="scope"> + <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" /> + </template> + </el-table-column> + <el-table-column label="鐘舵��" align="center" prop="status" width="100"> + <template #default="scope"> + <dict-tag :options="sys_notice_status" :value="scope.row.status" /> + </template> + </el-table-column> + <el-table-column label="鍒涘缓鑰�" align="center" prop="createBy" width="100" /> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="100"> + <template #default="scope"> + <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">淇敼</el-button> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >鍒犻櫎</el-button> + </template> + </el-table-column> + </el-table> + + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + + <!-- 娣诲姞鎴栦慨鏀瑰叕鍛婂璇濇 --> + <el-dialog :title="title" v-model="open" width="780px" append-to-body> + <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px"> + <el-row> + <el-col :span="12"> + <el-form-item label="鍏憡鏍囬" prop="noticeTitle"> + <el-input v-model="form.noticeTitle" placeholder="璇疯緭鍏ュ叕鍛婃爣棰�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍏憡绫诲瀷" prop="noticeType"> + <el-select v-model="form.noticeType" placeholder="璇烽�夋嫨"> + <el-option + v-for="dict in sys_notice_type" + :key="dict.value" + :label="dict.label" + :value="dict.value" + ></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="鐘舵��"> + <el-radio-group v-model="form.status"> + <el-radio + v-for="dict in sys_notice_status" + :key="dict.value" + :value="dict.value" + >{{ dict.label }}</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="鍐呭"> + <editor v-model="form.noticeContent" :min-height="192"/> + </el-form-item> + </el-col> + </el-row> + </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> + </div> +</template> + +<script setup name="Notice"> +import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice" + +const { proxy } = getCurrentInstance() +const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type") + +const noticeList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") + +const data = reactive({ + form: {}, + queryParams: { + pageNum: 1, + pageSize: 10, + noticeTitle: undefined, + createBy: undefined, + status: undefined + }, + rules: { + noticeTitle: [{ required: true, message: "鍏憡鏍囬涓嶈兘涓虹┖", trigger: "blur" }], + noticeType: [{ required: true, message: "鍏憡绫诲瀷涓嶈兘涓虹┖", trigger: "change" }] + }, +}) + +const { queryParams, form, rules } = toRefs(data) + +/** 鏌ヨ鍏憡鍒楄〃 */ +function getList() { + loading.value = true + listNotice(queryParams.value).then(response => { + noticeList.value = response.rows + total.value = response.total + loading.value = false + }) +} + +/** 鍙栨秷鎸夐挳 */ +function cancel() { + open.value = false + reset() +} + +/** 琛ㄥ崟閲嶇疆 */ +function reset() { + form.value = { + noticeId: undefined, + noticeTitle: undefined, + noticeType: undefined, + noticeContent: undefined, + status: "0" + } + proxy.resetForm("noticeRef") +} + +/** 鎼滅储鎸夐挳鎿嶄綔 */ +function handleQuery() { + queryParams.value.pageNum = 1 + getList() +} + +/** 閲嶇疆鎸夐挳鎿嶄綔 */ +function resetQuery() { + proxy.resetForm("queryRef") + handleQuery() +} + +/** 澶氶�夋閫変腑鏁版嵁 */ +function handleSelectionChange(selection) { + ids.value = selection.map(item => item.noticeId) + single.value = selection.length != 1 + multiple.value = !selection.length +} + +/** 鏂板鎸夐挳鎿嶄綔 */ +function handleAdd() { + reset() + open.value = true + title.value = "娣诲姞鍏憡" +} + +/**淇敼鎸夐挳鎿嶄綔 */ +function handleUpdate(row) { + reset() + const noticeId = row.noticeId || ids.value + getNotice(noticeId).then(response => { + form.value = response.data + open.value = true + title.value = "淇敼鍏憡" + }) +} + +/** 鎻愪氦鎸夐挳 */ +function submitForm() { + proxy.$refs["noticeRef"].validate(valid => { + if (valid) { + if (form.value.noticeId != undefined) { + updateNotice(form.value).then(response => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) + } else { + addNotice(form.value).then(response => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) + } + } + }) +} + +/** 鍒犻櫎鎸夐挳鎿嶄綔 */ +function handleDelete(row) { + const noticeIds = row.noticeId || ids.value + proxy.$modal.confirm('鏄惁纭鍒犻櫎鍏憡缂栧彿涓�"' + noticeIds + '"鐨勬暟鎹」锛�').then(function() { + return delNotice(noticeIds) + }).then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }).catch(() => {}) +} + +getList() +</script> -- Gitblit v1.9.3