JSL_OrganizeInternalOAWeb_Archive/src/manager/Data/LogManage.vue

<style scoped>
.addinput{
//display: flex;
//flex-direction: column;
//justify-content: center;
//align-content: center;
}

.addinput>div>input{
    /*width:300px ;*/
    /*height: 30px;*/
    /*border-radius: 5px;*/
//margin: 0 auto;
//outline-color: #94beae;

}
</style>
<template>
    <div style="width: 87vw;height:90vh;position: relative;margin: 0;padding: 0">
        <div style="padding:20px 10px;">
            <Space>
                <span>项目名称：</span>
                <Input v-model="searchData.username" prefix="ios-contact" placeholder="projectName" clearable style="width: 200px" />
                <span>接口地址：</span>
                <Input  v-model="searchData.phone" placeholder="Enter address" style="width: auto" />
                <Button @click="searchUser"   type="primary" shape="circle" icon="ios-search">查询</Button>
                <Button type="primary" ghost  @click="showAddDialog">新增</Button>

            </Space>
        </div>
        <!--    表格内容-->
        <div style="width: 87vw; height: 78vh; margin: 0; padding: 0">
            <Table border :loading="loadingTable" ref="selection" :columns="columns" :data="states.data" style="height: 72vh ;text-align: center;" :row-class-name="setRowClassName"  >


                <template #status="{ row, index }">
                    <Switch size="large" v-model="states.data[index].accountNoLocked" :before-change="handleBeforeSwitchChange">
                        <template #open>
                            <span>开启</span>
                        </template>
                        <template #close>
                            <span>关闭</span>
                        </template>
                    </Switch>
                </template>

                <template #action="{ row, index }">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="showEditDialog(index, row)">详情</Button>
                    <Button type="error" size="small" @click="showDeleteDialog(index, row)">删除</Button>
                </template>


            </Table>
            <div style="height: 6vh ;text-align: left;padding-top: 20px">
                <Page :total="states.data.length" size="small" show-elevator show-sizer />
            </div>


        </div>

        <!--    对话框-->
        <div>
            <Modal
                    v-model="editDialog"
                    title="编辑"
                    @on-ok="editOk"
                    @on-cancel="editCancel">
                <div style="">
                    <div style="margin-bottom: 10px">
            <span>
              项目名：<Input v-model="updateData.username" placeholder="Enter something..." style="width: 180px" />
            </span>
                        <span>
              状态：
              <RadioGroup v-model="sex">
                <Radio label="正常"></Radio>
                <Radio label="停用"></Radio>
              </RadioGroup>
            </span>
                        <span style="margin-left: 20px;">
              <div style="margin-bottom: 10px">接口地址：<Input v-model="updateData.email" placeholder="Enter something..." style="width: 435px" /></div>

            </span>
                    </div>
                    <div style="margin-bottom: 10px">

<!--                        <span style="margin-left: 98px">-->
<!--              角色：-->
<!--                  <Select v-model="roleSingle" style="width:200px">-->
<!--                  <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--                  </Select>-->
<!--            </span>-->
                    </div>

                    <div style="margin-bottom: 10px">响应状态：<Input v-model="updateData.email" placeholder="Enter something..." style="width: 435px" /></div>

                    <div style="margin-bottom: 10px">响应耗时：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>
                    <div style="margin-bottom: 10px">发起时间：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>
                    <div style="margin-bottom: 10px">响应时间：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>

                    <div style="margin-bottom: 10px">日志详情：<Input v-model="updateData.description" type="textarea" placeholder="Enter something..." style="width: 435px" /></div>
                </div>
            </Modal>


            <Modal
                    v-model="deleteDialog"
                    title="删除"
                    @on-ok="deleteOk"
                    @on-cancel="deleteCancel">
                <p>请问是否要删除xxx数据</p>
            </Modal>

            <Modal v-model="addDialog" title="新增日志信息" @on-ok="addOk" @on-cancel="addCancel" >
                <div>
                    <div style="margin-left: 15px">接口地址：<Input v-model="addData.address" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
                    <div style="margin-left: 15px">响应状态：<Input v-model="addData.password" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" type="password"/></div>
                    <div style="margin-left: 15px">响应耗时：<Input v-model="addData.address" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
                    <div style="margin-left: 15px">发起时间：<Input v-model="addData.phone" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
                    <div style="margin-left: 15px">响应时间：<Input v-model="addData.email" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
<!--                    <div style="margin-left: 15px">：              <RadioGroup v-model="sex" style="margin-bottom: 10px">-->
<!--                        <Radio label='男'></Radio>-->
<!--                        <Radio label='女'></Radio>-->
<!--                    </RadioGroup></div>-->
                    <div style="margin-left: 15px">项目名称：<Input v-model="addData.age" placeholder="Enter something..." style="width: 250px" type="number" /></div>



                </div>
            </Modal>
        </div>

    </div>
</template>

<script setup>
import {Page, Radio, RadioGroup, Space, Switch} from "view-ui-plus";
import requests from "../../public/request.js"
import {reactive, ref} from "vue";
import message from "view-ui-plus/src/components/message/index.js";
import {onMounted, onBeforeUpdate} from "vue";
import modal from "view-ui-plus/src/components/modal/index.js";

const currentPage = ref(1)           // 当前页码
const pageSize = ref(10)              // 每页显示的数据条数
const addDialog = ref(false)
const deleteDialog = ref(false)
const editDialog = ref(false)
const token = window.localStorage.getItem('token')
const AllUser = reactive({
    page:1,
    limit: 10,
    search: null,
    role: null
})
const columns = reactive( [
    {
        type: "selection",
        width: 60,
        align: "center"
    },
    {
        title: "接口地址",
        key: "username",
        align: "center"
    },
    {
        title: "响应状态",
        key: "jobId",
        width: 150,
        align: "center"
    },
    {
        title: "响应耗时",
        key: "phone",
        width: 150,
        align: "center"
    },
    {
        title: "发起时间",
        key: "email",
        align: "center"
    },
    {
        title: "响应时间",
        key: "email",
        align: "center"
    },
    {
        title: "项目名称",
        key: "",
        align: "center"
    },
    {
        title: "状态",
        slot: "status",
        width: 100,
        align: "center",
    },
    {
        title: "操作",
        slot: "action",
        width: 150,
        align: "center"
    }
])
const states = reactive({
    data:[]
})
const loadingTable = ref(true)
const sex = ref('男')
const roleSingle = ref(1)
const updateData = reactive({
    id: 0,
    username: '',
    address: '',
    phone: '',
    email: '',
    age: '',
    signature: '',
    sex: '',
    avatar: '',
    nickname: '',
    description: '',
    enabled: true,
    isExpired: false,
    passwordExpired: false,
    recommend: false,
    isLocked: false
})
const cityList= reactive([
    {
        value: 1,
        label: '管理员'
    },
    {
        value: 2,
        label: '老师'
    },
    {
        value: 3,
        label: '学生'
    }
])
const userLock = reactive({
    id: -1,
    isLock: 1
})

/**
 * 配置代码
 */
message.config({
    background: true
})
function setRowClassName(row, index) {
    return 'custom-row';
}

onMounted(() => {
    getAll()
})

/**
 * 方法函数
 */

function getAll() {

    requests.userAllCurrent(AllUser,token).then((res)=>{
        console.log(res)
        // states.data = res.data.data
        // console.log(res.data.data)
        loadingTable.value = false
        for (let i = 0; i < res.data.data.length; i++) {
            states.data[i] = res.data.data[i].user
        }
        console.log("getAll:",states.data)
    })
}

function handleBeforeSwitchChange(index, row) {
    return new Promise((resolve) => {
        this.$Modal.confirm({
            title: '切换确认',
            content: '您确认要切换开关状态吗？',
            onOk: () => {
                resolve();
                message.success('切换成功')
            }
        })
    })
}

function handlePageChange(newPage) {
    this.currentPage = newPage;   // 更新当前页码
}

const addData = reactive({
    username: '',
    password: '',
    address: '',
    phone: '',
    email: '',
    sex: 1,
    age: ''
})
function showAddDialog(){
    addDialog.value = true

}
function addOk () {
    if (sex.value === '男') {
        addData.sex = 1
    }else {
        addData.sex = 0
    }
    requests.userAdd(addData, token).then((res)=>{
        if (res.data.code===200) {
            message.success('新增成功')
            getAll()
        }
        else {
            message.error('新增失败')
        }
    })
}
function addCancel () {
    message.info('取消新增')
}



const deleteId = ref(0)
function showDeleteDialog(index, row){
    deleteDialog.value = true
    deleteId.value = row.id
}
function deleteOk(){
    deleteDialog.value = false;
    console.log(deleteId.value)
    requests.userDelete(deleteId.value, token).then((res)=>{
        console.log("deleteResult:",res)
        if (res.data.code === 200) {
            message.success('删除成功')
        }else {
            message.error('删除失败')
        }
    })

}
function deleteCancel(){
    deleteDialog.value = false;
    message.info('取消删除')
}

function showEditDialog(index, row){
    editDialog.value = true
    updateData.id = row.id
    updateData.username = row.username
    updateData.address = row.address
    updateData.phone = row.phone
    updateData.email = row.email
    updateData.age = row.age
    updateData.signature = row.signature
    updateData.sex = row.sex
    updateData.avatar = row.avatar
    updateData.nickname = row.nickname
    updateData.description = row.description
    if (row.sex === 1) {
        sex.value = '男'
    }else {
        sex.value = '女'
    }
}
function editOk(){
    loadingTable.value = true
    editDialog.value = false;
    requests.userEdit(updateData,token).then((res)=>{
        console.log("editResult:",res)
        console.log("updateData:",updateData)
        if (res.data.code === 200) {
            getAll()
            message.success('修改成功')
        }
        else {
            loadingTable.value = false
            message.error('修改失败')

        }
    })

}
function editCancel(){
    editDialog.value = false;
}



const searchData = reactive({
    username: '',
    phone: ''
})
function searchUser(){
    loadingTable.value = true
    if (searchData.username === '' && searchData.phone === '') {
        getAll()
    }
    else {
        requests.userCurrent(searchData,token).then((res)=>{
            loadingTable.value = false
            console.log("searchResult:",res)
            if (res.data.code === 200) {
                states.data = []
                states.data[0] = res.data.data.user
                message.success('查询成功')
                console.log(loadingTable.value)
            }
            else {
                message.error(res.data.message)
            }
        })
    }
}


</script>