erp/resources/frontend/src/views/shuju/shuju.vue

<template>
  <div>
    <!-- 筛选框 -->
    <el-card class="box-card">
      <div class="goods" style="margin: 20px">
        <el-form ref="form" :inline="true" :model="form">
          <el-form-item label="模块:" style="margin-right: 40px">
            <el-select v-model="form.moudule">
              <el-option v-for="item in mouduleOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作:" style="margin-right: 40px">
            <el-select v-model="form.action">
              <el-option v-for="item in actionOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目标类型:" style="margin-right: 40px">
            <el-select v-model="form.target_ype">
              <el-option v-for="item in target_ypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类别:" style="margin-right: 40px">
            <el-select v-model="form.targetField">
              <el-option v-for="item in target_fieldOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作人:" style="margin-right: 40px">
            <el-select v-model="form.userId" placeholder="输入操作人">
              <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="起"
              end-placeholder="止" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin-top: 30px" class="box-card">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="module" label="模块"> </el-table-column>
        <el-table-column prop="action" label="操作"> </el-table-column>
        <el-table-column prop="target_type" label="目标类型"> </el-table-column>
        <el-table-column prop="target_id" label="目标ID"> </el-table-column>
        <el-table-column prop="target_field" label="类别"> </el-table-column>
        <el-table-column prop="before_update" label="操作前"> </el-table-column>
        <el-table-column prop="after_update" label="操作后"> </el-table-column>
        <el-table-column prop="message" label="信息"> </el-table-column>
        <el-table-column prop="user.name" label="操作人"> </el-table-column>
        <el-table-column prop="created_at" label="操作时间"> </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页功能 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page"
        :page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper"
        :total="Paginationdata.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { recordList } from "../../api/record";
  import { userList } from "../../api/user";
  export default {
    data() {
      return {
        target_fieldOptions: [
          {
            value: "add",
            label: "创建",
          },
          {
            value: "status",
            label: "状态",
          },
          {
            value: "name",
            label: "名称",
          },
          {
            value: "title",
            label: "标题",
          },
          {
            value: "import",
            label: "导入",
          },
          {
            value: "export",
            label: "导出",
          },
          {
            value: "set",
            label: "设置",
          },
          {
            value: "cost",
            label: "成本",
          },
          {
            value: "stock",
            label: "库存",
          },
          {
            value: "inventory",
            label: "库存盘点",
          },
          {
            value: "reserve",
            label: "预留量",
          },
          {
            value: "timingInventory",
            label: "7点盘点",
          },
          {
            value: "pdd.ktt.goods.query.list",
            label: "快团团下载绑定商品",
          },
          {
            value: "arrived_today_num",
            label: "今日到货",
          },
          {
            value: "loss_num",
            label: "损耗",
          },
          {
            value: "pdd.pop.auth.token.create",
            label: "快团团授权",
          },
          {
            value: "reference_price",
            label: "参考价格",
          },
          {
            value: "update",
            label: "更新",
          },
          {
            value: "pdd.ktt.goods.incr.quantity",
            label: "快团团库存同步",
          },
          {
            value: "pdd.ktt.order.list",
            label: "快团团下载订单",
          },
          {
            value: "pdd.ktt.increment.order.query",
            label: "快团团增量下载订单",
          },
        ], //类别
        mouduleOptions:[
          {
            value: "menu",
            label: "菜单",
          },
          {
            value: "goods",
            label: "商品",
          },
          {
            value: "file",
            label: "文件",
          },
          {
            value: "permission",
            label: "权限",
          },
          {
            value: "role",
            label: "角色",
          },
          {
            value: "user",
            label: "用户",
          },
          {
            value: "plat",
            label: "平台",
          },
        ],//模块
        actionOptions:[
          {
            value: "POST",
            label: "新增",
          },
          {
            value: "PATCH",
            label: "更新",
          },
          {
            value: "DELETE",
            label: "删除",
          },
          {
            value: "GET",
            label: "查看",
          },
        ],//操作
        target_ypeOptions:[
          {
            value: "upload",
            label: "上传",
          },
          {
            value: "goods_sku",
            label: "商品规格",
          },
          {
            value: "goods_brand",
            label: "商品品牌",
          },
          {
            value: "goods_type",
            label: "种类",
          },
          {
            value: "menu",
            label: "菜单",
          },
          {
            value: "role",
            label: "角色",
          },
          {
            value: "permission",
            label: "权限",
          },
          {
            value: "user",
            label: "用户",
          },
          {
            value: "kuaituantuan",
            label: "快团团",
          },
          {
            value: "miaoxuan",
            label: "秒选",
          },
          {
            value: "goods",
            label: "商品",
          },
        ],//目标类型
        userOptions: [], //查询用户列表
        form: {
          moudule:'',//模块 goods-商品(单个商品记录必传),'menu' => '菜单',file-文件,permission-权限,role-角色,user-用户,plat-平台
          action:'',//操作 POST-新增,PATCH-更新,DELETE-删除,'GET' => '查看',
          target_ype:'',//目标类型 upload-上传,goods_sku商品规格,goods_brand-商品品牌,goods_type-商品种类,menu-菜单,permission-权限,role-角色,user-用户,kuaituantuan-快团团,miaoxuan-妙选,'goods' => '商品',
          targetField: "",//影响字段
          userId: "",//操作人id(用户列表)
        },
        value1: "", //筛选时间变量

        tableData: [], //列表数据
        Paginationdata: {}, //分页相关数据
        current_page: 1, //当前页
        per_page: 15, //每页显示数量
      };
    },
    methods: {
      //请求列表数据
      getList() {
        let page = {
          page: this.current_page,
          per_page: this.per_page,
        };
        recordList(page).then((res) => {
          this.tableData = res.data.data;
          this.Paginationdata = res.data.meta;
        });
      },

      // 获取用户列表
      getUser() {
        userList().then((res) => {
          this.userOptions = res.data.data;
        });
      },

      // 查询
      query() {
        let queryData = {
          page: this.current_page,
          per_page: this.per_page,
          moudule: this.form.moudule,
          action:this.form.action,
          target_ype:this.form.target_ype,
          target_id: this.$route.query.id,
          target_field: this.form.targetField,
          user_id: this.form.userId,
          startTime: this.value1[0],
          endTime: this.value1[1],
        };

        // 对象值为空清除
        const newObj = filterParams(queryData);
        function filterParams(obj) {
          const _newPar = {};
          for (const key in obj) {
            // 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
            if (
              (obj[key] === 0 || obj[key]) &&
              obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
            ) {
              // 记录属性
              _newPar[key] = obj[key];
            }
          }
          // 返回对象
          return _newPar;
        }

        recordList(newObj).then((res) => {
          this.tableData = res.data.data;
          this.Paginationdata = res.data.meta;
        });
      },

      //分页功能
      handleSizeChange(val) {
        //当前条数
        this.per_page = val;
        this.query();
      },
      handleCurrentChange(val) {
        //当前页
        this.current_page = val;
        this.query();
      },
    },
    mounted() {
      this.getList();
      this.getUser();
    },
  };
</script>

<style>
  .block {
    margin-top: 30px;
  }
</style>