smart-grp-nof-web/src/views/demo/system/operationLog/index.vue

<template>
  <div>
    <d2-container>
          <div class="nav">当前所在位置:<a href="#/index">首页</a>>操作日志</div>

      <!-- <template slot="header">首页/数据查询</template> -->
      <div class="main">
        <div class="zt_right">
          <!-- <template slot="header">首页/数据查询</template> -->
          <div class="right_main">

            <div class="right_title">
              <span><i class="fa fa-file-text-o"></i>&emsp;操作日志</span>
            </div>
            <div class="right_table">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <div class="float-left">
                

               
                      <el-form-item label="账户名称">
                  <el-input size="mini" placeholder="请输入" v-model="formInline.userName"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-search"
                      @click="search"
                      >查询</el-button
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-refresh-left"
                      @click="reset"
                      >重置</el-button
                    >
                  </el-form-item>
                </div>
              
              </el-form>
              <el-table
                :data="operaLogList"
                stripe
                style="width: 100%"
                row-key="id"
                border
              >
                <el-table-column
                  align="center"
                  label="序号"
                  type="index"
                  width="100px"
                  :index="indexMethod"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户ID"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="operTime"
                  label="操作时间"
                  align="center"
                >
                </el-table-column>

                <el-table-column prop="operType" label="动作" align="center">
                </el-table-column>
                <el-table-column
                  prop="operModul"
                  label="功能模块"
                  align="center"
                >
                </el-table-column>
                  <el-table-column
                  prop="operDesc"
                  label="操作数据"
                  align="center"
                >
                </el-table-column>
                      <el-table-column
                  prop="operIp"
                  label="登录IP"
                  align="center"
                > </el-table-column>
               
            
               
               
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- //用户弹框 -->
      <el-dialog :title="title" :visible.sync="userDialog" id="dialogStyle">
        <el-form :model="form"  ref="formData">
          <el-form-item label="用户ID" :label-width="formLabelWidth" prop="userId">
            <el-input
              v-model="form.userId"
              autocomplete="off"
             
            ></el-input>
          </el-form-item>
             <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
            <el-input
              v-model="form.userName"
              autocomplete="off"
          
            ></el-input>
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth" prop="userRole">
            <el-select v-model="form.userRole" placeholder="请选择角色">
       <el-option
      v-for="item in roleLists"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="所属仓库" :label-width="formLabelWidth" prop="orgId"> 
            <el-select v-model="form.orgId" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

             <el-form-item label="管理仓房" :label-width="formLabelWidth" prop="manageStore">
            <el-select v-model="form.manageStore" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="联系方式" :label-width="formLabelWidth" prop="userPhone">
            <el-input
              v-model="form.userPhone"
              autocomplete="off"
           
            ></el-input>
          </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth" prop="userPassword">
            <el-input
              v-model="form.userPassword"
              autocomplete="off"
           
            ></el-input>
          </el-form-item>
     
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="userDialog = false">取 消</el-button>
          <el-button type="primary" @click="defined('formData')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </d2-container>
  </div>
</template>
<script>
import api from "@/api";
export default {
  name: "operationLog",
  data() {
    return {
      // 弹框标题初始化
      title: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      roleOptions: [
      
      ],
    

      //弹框值初始化
      form: {
        userId: "",
        userName: "",
        userRole: "",
        orgId: "",
        manageStore: "",
        userPhone: "",
        userState: true,
        userPassword: "",
      },

      //查询条件
      formInline: {
        userName:"",
      },
   roleLists:[],
    
      // 表格字段
    operaLogList:[],

      userDialog: false,
      formLabelWidth: "120px",

      pagination: {
        // 每页显示的条数
        pageSize: 10,
        // 当前页
        curPage: 1,
        // 总数
        total: 20,
      },
    };
  },

  mounted() {
    this.getList();
  },
  methods: {
    //获取列表数据
    getList() {
      console.log("....");
      var condition = {
        userName:this.formInline.userName
      };
      condition = JSON.stringify(condition);
      var data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition: condition,
      };
      api
        .operaLogList(data)
        .then((res) => {
          if (res.code == 200) {
             this.operaLogList = res.data.records;
            this.pagination.pageSize = res.data.size;
            this.pagination.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //新增时角色接口

    roleList() {
      var condition = {
        enumName:"",
        enumCode: 210000,
      };
      condition = JSON.stringify(condition);
      var data = {
        condition: condition,
      };
      api
        .dataDic(data)
        .then((res) => {
          if (res.code == 200) {
            // this.roleList = res.data;
            console.log(res,"......")
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //新增接口
    addList() {
      var data = {
        userId: this.form.userId,
        userName: this.form.userName,
        userPassword: this.form.userPassword,
        userRole: this.form.userRole,
        orgId: this.form.orgId,
        manageStore: this.form.manageStore,
        userPhone: this.form.userPhone,
        userState: this.form.userState === true ? "1" : "0",
      };
      api
        .addUser(data)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("新增成功");
            this.getList();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search() {
      this.getList();
    },
    reset() {
      this.pagination.curPage=1;
      this.pagination.pageSize=10;
      this.formInline={};
      this.getList();
    },
    //表格序号
    indexMethod(index) {
      return (
        (this.pagination.curPage - 1) * this.pagination.pageSize + index + 1
      );
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.curPage = val;
      this.getList();
    },
    detail() {},
    //新建用户
    addUser() {
      this.form = {};
      this.userDialog = true;
      this.title = "新建用户";
      this.roleList()
    },
    defined(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          this.addList();
          this.userDialog = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  display: flex;
 
  .zt_right {
    width: 100%;
border: 1px solid #DEDEDE;
border-radius: 6px;
background: #fff;
    // margin-left: 20px;
    // width: calc(100% - 250px);
    .right_title{
      font-weight: bold;
      font-size: 16px;
      border-bottom:1px solid #ebeef5;
      background-color: rgba(233, 244, 243, 0.5);
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      color: #008775;
      border-bottom: 1px solid rgba(1, 164, 143, 0.3);
      padding-left: 0;
      span{
        padding: 10px;
        padding-bottom: 9px;
        border-bottom: 2px solid #01a48f;

      }
    }

  }
}
     .nav {
      padding: 10px 0 10px 10px;
      margin-bottom: 20px;
      // color: #fff;

      font-size: 14px;

      background: #FFFFFF;
      border: 1px solid #DEDEDE;
      cursor: pointer;
    }

.float-left {
  float: left;
}
.float-right {
  float: right;
}
#dialogStyle .el-select {
  width: 100%;
}
</style>