后台管理页面、菜单配置

zhouwenxuan

2023-11-30 25fa992e12447e535b801da2cc497bdafe0b7b9b

后台管理页面、菜单配置

 src/api/backManage/notice.js

@@ -2,7 +2,39 @@

export function getNoticeList() {
    return request({
        url: 'api/system/notice/noticeList',
        url: '/system/notice/noticeList',
        method: 'get'
    })
}

export function addNotice(data) {
    return request({
        url: '/system/notice/addNotice',
        method: 'post',
        data: data
    })
}

export function getNoticeDetail(params) {
    return request({
        url: '/system/notice/getNoticeById',
        method: 'get',
        params: params
    })
}

export function editNotice(params) {
    return request({
        url: `/system/notice/editNotice`,
        method: 'put',
        data: params
    })
}

export function delNotice(data) {
    return request({
        url: `/system/notice/remove/` + data.id,
        method: 'delete'
    })
}


 src/components/Editor/index.vue

@@ -33,8 +33,30 @@

const { proxy } = getCurrentInstance();

import{ Quill } from 'vue-quill-editor';
// 自定义插入a链接
var Link = Quill.import('formats/link');
class FileBlot extends Link {  // 继承Link Blot
    static create(value) {
        let node = undefined
        if (value&&!value.href){  // 适应原本的Link Blot
            node = super.create(value);
        }
        else{  // 自定义Link Blot
            node = super.create(value.href);
            // node.setAttribute('download', value.innerText);  // 左键点击即下载
            node.innerText = value.innerText;
            node.download = value.innerText;
        }
        return node;
    }
}
FileBlot.blotName = 'link';
FileBlot.tagName = 'A';
Quill.register(FileBlot);

const quillEditorRef = ref();
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/system/common/uploadFile"); // 上传的图片服务器地址
const headers = ref({
  Authorization: "Bearer " + getToken()
});
@@ -87,7 +109,7 @@
      [{ color: [] }, { background: [] }],            // 字体颜色、字体背景颜色
      [{ align: [] }],                                // 对齐方式
      ["clean"],                                      // 清除文本格式
      ["link", "image", "video"]                      // 链接、图片、视频
      ["link", "image", "upload"]                      // 链接、图片、视频
    ],
  },
  placeholder: props.readOnly ? "" : "请输入内容",
@@ -156,6 +178,7 @@
    // 获取光标位置
    let length = quill.selection.savedRange.index;
    // 插入图片，res.url为服务器返回的图片链接地址

    quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName);
    // 调整光标到最后
    quill.setSelection(length + 1);

 src/layout/components/Sidebar/index.vue

@@ -39,16 +39,18 @@
const permissionStore = usePermissionStore()
// const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
const sidebarRouters = ref([])

onMounted(() => {
    getMenu();
    sidebarRouters.value = JSON.parse(Cookies.get('routers'))
});
const getMenu = () => {
    const userInfo = JSON.parse(Cookies.get('userInfo'))
    if(userInfo.identity === 0) {
        sidebarRouters.value =  menu.adminMenu
        Cookies.set('routers',JSON.stringify(sidebarRouters.value))
    }
}
// const getMenu = () => {
//     const userInfo = JSON.parse(Cookies.get('userInfo'))
//     if(userInfo.identity === 0) {
//
//         sidebarRouters.value =  menu.adminMenu
//         Cookies.set('routers',JSON.stringify(sidebarRouters.value))
//     }
// }




 src/utils/request.js

@@ -27,7 +27,7 @@
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    config.headers['Authorization'] =  getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {

 src/views/components/loginForm.vue

@@ -73,6 +73,7 @@
import useUserStore from '@/store/modules/user'
import { Register } from "@/layout/components";
import { Base64 } from 'js-base64'
import menu from "@/layout/components/Sidebar/menu";

const userStore = useUserStore()
const route = useRoute();
@@ -80,8 +81,8 @@
const { proxy } = getCurrentInstance();

const loginForm = ref({
  username: "",
  password: "",
  username: "admin",
  password: "admin@123",
  code: "",
  uuid: ""
});
@@ -113,6 +114,8 @@
    redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });


const sidebarRouters = ref([])
function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
@@ -138,9 +141,14 @@
          }
          return acc;
        }, {});
        const routers = JSON.parse(Cookies.get('routers'))
          const userInfo = JSON.parse(Cookies.get('userInfo'))
            if(userInfo.identity === 0) {
                sidebarRouters.value =  menu.adminMenu
                Cookies.set('routers',JSON.stringify(sidebarRouters.value))
            }
          console.log("sidebarRouters.value",sidebarRouters.value)
          router.push({
              path: routers[0].path
              path: sidebarRouters.value[0].path
          })
        // router.push({ path: redirect.value || "/", query: otherQueryParams });
      }).catch(() => {

 src/views/safetyReview/notice/components/noticeDialog.vue

@@ -33,7 +33,9 @@
                    </div>
                </el-form-item>
                <el-form-item v-if="!isReview" style="margin-left: -80px" prop="noticeContent">
<!--                    <tinymce v-model="state.noticeForm.noticeContent"></tinymce>-->
                    <editor  ref="myQuillEditor" v-model="state.noticeForm.noticeContent" :height="300"></editor>

                </el-form-item>
                <el-form-item label="公告内容:" v-else>
                    <div class="ql-container ql-snow" style="height: 300px;width: 100%;margin-top: 10px;" >
@@ -56,6 +58,8 @@
import {reactive, ref, toRefs} from 'vue'
import Editor from "@/components/Editor/index.vue";
import {ElMessage} from "element-plus";
import {addNotice, editNotice, getNoticeDetail} from "@/api/backManage/notice";
const emit = defineEmits(["getList"]);

const dialogVisible = ref(false);
const title = ref("");
@@ -65,26 +69,39 @@
const isReview = ref(false);
const state = reactive({
    noticeForm: {
        id: '',
        noticeTitle: '',
        noticeContent: '',
        fileList: []
    },
    formRules:{
        noticeTitle: [{ required: true, message: '请填写公告标题', trigger: 'blur' }],
        noticeContent: [{ required: true, message: '请输入公告内容', trigger: 'change' }],
        noticeContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
    },

})

const openDialog = (type, value) => {
const openDialog = async (type, value) => {
    isReview.value = false;
    title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '查看' ;
    if(type === 'edit') {
        state.noticeForm = value;
    if(type === 'edit' || type === 'review') {
        const param = {
            noticeId: value.id
        }
        const res = await getNoticeDetail(param);
        if(res.code === 200){
            state.noticeForm.id = res.data.id
            state.noticeForm.noticeTitle = res.data.title
            state.noticeForm.noticeContent = res.data.content
        }else{
            ElMessage.warning(res.message)
        }
    }
    if(type === 'review') {
        isReview.value = true;
        state.noticeForm = value;
    }
    if(type === 'add'){
        reset()
    }
    dialogVisible.value = true;
}
@@ -99,22 +116,55 @@
            });
            return;
        }
        console.log('file, fileList',state.noticeForm.noticeContent);
        noticeRef.value.clearValidate();
        reset();
        dialogVisible.value = false;

        if(title.value === '新增'){
            const param = {
                content: state.noticeForm.noticeContent,
                title: state.noticeForm.noticeTitle
            }
            const res = await addNotice(param)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '新增成功'
                });
            }else{
                ElMessage.warning(res.message)
            }
            emit("getList")
            reset();
            noticeRef.value.clearValidate();
            dialogVisible.value = false;
        }else if(title.value === '编辑') {
            const nowDate = new Date()
            const param = {
                id: state.noticeForm.id,
                content: state.noticeForm.noticeContent,
                title: state.noticeForm.noticeTitle
            }
            const res = await editNotice(param)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '编辑成功'
                });
            }else{
                ElMessage.warning(res.message)
            }
            emit("getList")
            reset();
            noticeRef.value.clearValidate();
            dialogVisible.value = false;
        }
    }
}

const handleClose = () => {
    noticeRef.value.clearValidate();
    reset();
    dialogVisible.value = false;

}
const reset = () => {
    state.noticeForm = {
        id: '',
        noticeTitle: '',
        noticeContent: ''
    }

 src/views/safetyReview/notice/notice.vue

@@ -10,33 +10,38 @@
        </div>
        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="dataList" :border="true">
            <el-table-column label="发布时间" prop="publishTime" align="center"  />
            <el-table-column label="标题" prop="noticeTitle" align="center" :show-overflow-tooltip="true" width="650" />
            <el-table-column label="发布时间" prop="createTime" align="center"  />
            <el-table-column label="标题" prop="title" align="center" :show-overflow-tooltip="true" width="650" />
            <el-table-column label="最近修改时间" prop="updateTime" align="center"  />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template #default="scope">
                    <el-button link type="primary"  @click="openDialog('review',scope.row)" >查看</el-button>
                    <el-button link type="primary"  @click="openDialog('edit',scope.row)" v-hasPermi="['system:role:edit']">编辑</el-button>
                    <el-button link type="danger"  @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除</el-button>
                    <el-button link type="primary"  @click="openDialog('edit',scope.row)" >编辑</el-button>
                    <el-button link type="danger"  @click="handleDelete(scope.row)" >删除</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"
        />
        <div class="pag-container">
            <el-pagination
                v-model:current-page="data.queryParams.pageNum"
                v-model:page-size="data.queryParams.pageSize"
                :page-sizes="[10,15,20,25]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <notice-dialog ref="noticeRef" @getList = "getList"></notice-dialog>
    </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import noticeDialog from "./components/noticeDialog.vue"
import {ElMessageBox} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import {getNoticeList, delNotice} from "@/api/backManage/notice";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const noticeRef = ref();
@@ -44,23 +49,47 @@
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: '',
        content: '',
    },
    total: 0,
    dataList: []


});
const dataList = ref([]);
const total = ref(0);

const { queryParams, total, dataList } = toRefs(data);
const { queryParams } = toRefs(data);

const getList = () => {
onMounted(() => {
    getList();
});
const getList = async () => {
    loading.value = true;
    console.log("获取数据")
    const res = await getNoticeList(data.queryParams);
    if(res.code === 200){
        dataList.value = res.data.list.map(item => {
            return {
                ...item,
                createTime: item.createTime.replace(/T/g," ")
            }
        })
        total.value = res.data.total
    }else{
        ElMessage.warning(res.message)
    }
    loading.value = false;

}

const openDialog = (type, value) => {
    noticeRef.value.openDialog(type, value);
}

const handleSizeChange = (val) => {
    data.queryParams.pageSize = val
    getList()
}
const handleCurrentChange = (val) => {
    data.queryParams.pageNum = val
    getList()
}

/** 重置新增的表单以及其他数据  */
@@ -77,8 +106,23 @@
            type: 'warning',
        })
        .then( async() => {

            const res = await delNotice(val);
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                });
                getList();
            }else{
                ElMessage.warning(res.message)
            }
        })
}

</script>
<style lang="scss">
.pag-container{
    float: right;
    margin-top: 10px;
}
</style>