<template>
  <n-form
    inline
    :label-width="80"
    label-placement="left"
    :model="queryForm"
    size="medium"
    ref="queryFormRef"
  >
    <n-form-item label="用户或编码：" path="value">
      <n-input
        v-model:value="queryForm.value"
        clearable
        placeholder="请输入···"
      />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="handleClick('row', 'search')"
        ><template #icon>
          <n-icon>
            <Search />
          </n-icon> </template
        >搜索</n-button
      >
    </n-form-item>
  </n-form>
  <n-data-table
    ref="tableRef"
    :bordered="false"
    :max-height="700"
    striped
    :columns="columns"
    :data="data"
    :pagination="pagination"
  ></n-data-table>
</template>

<script>
import { ref, reactive, toRefs, h, onMounted } from "vue";
import { NButton, useMessage, useDialog, NTag } from "naive-ui";
import { Search, Add } from "@vicons/ionicons5";
export default {
  name: "logs",
  components: { Search, Add },
  setup() {
    const state = reactive({
      //搜索相关
      queryForm: {
        value: "",
      },
      //表格相关
      columns: [
        {
          title: "ID",
          key: "id",
          align: "center",
          width:'60'
        },
        {
          title: "用户名称",
          key: "username",
          align: "center",
        },
        {
          title: "用户操作",
          key: "operation",
          align: "center",
        },
        {
          title: "请求方法",
          key: "method",
          align: "center",
          ellipsis:true,

        },
        {
          title: "请求参数",
          key: "params",
          align: "center",
          ellipsis:true,


        },
        {
          title: "执行时长(毫秒)",
          key: "time",
          align: "center",

        },

        {
          title: "ip地址",
          key: "ip",
          align: "center",

        },
        {
          title: "创建时间",
          key: "createDate",
          align: "center",
        },
      ],
      data: [
        {
          createDate: "2022-02-13 14:28:38",
          id: 0,
          ip: "192.168.16.151",
          method:
            "com.newfiber.modules.sys.controller.SysRoleController.save()",
          operation: "保存角色",
          params:
            '[{"roleId":1,"roleName":"1","remark":"","createUserId":1,"menuIdList":[1,2,15,16,17,18,3,19,20,21,22,4,23,24,25,26,5,6,7,8,9,10,11,12,13,14,27,29,30,-666666],"createTime":"Feb 13, 2022 2:28:36 PM"}]',
          time: 1797,
          username: "admin",
        },
      ],
    });
    return{
      ...toRefs(state)
  }
  },
  
};
</script>

<style>
</style>