1

Surpriseplus

2022-09-20 653f68cdc278005b958b2ed93f6d867740ce54c7

 src/views/maintenance/logLog.vue

@@ -4,66 +4,69 @@
    <el-divider />
    <div class="inquire">
      <el-form ref="formData1" :model="form" :inline="true">
        <el-form-item label="登录地址" prop="name">
          <el-input v-model="form.name" placeholder="请输入" />
        <!-- 用户名 -->
        <el-form-item :label="$t('common.username')" prop="name">
          <el-input
            style="width: 300px"
            v-model="form.name"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item label="登录名称" prop="jurisdiction">
          <el-input v-model="form.jurisdiction" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="登录状态" prop="region">
          <el-select v-model="form.region" placeholder="请选择">
        <!-- 所属系统 -->
        <el-form-item :label="$t('loglog.systematic')" prop="region">
          <el-select v-model="form.region" :placeholder="$t('common.choose')">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="登录时间">
        <!-- 操作时间 -->
        <el-form-item :label="$t('loglog.operationtime')">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              :placeholder="$t('common.selectdate')"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line text-center" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
            <el-date-picker
              type="date"
              :placeholder="$t('common.selectdate')"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- 查询 清空 -->
        <el-form-item>
          <el-button @click="onSubmit">查询</el-button>
          <el-button @click="onSubmit">{{ $t("common.iquery") }}</el-button>
          <el-button @click="onEmpty('formData1')">{{
            $t("common.empty")
          }}</el-button>
        </el-form-item>
      </el-form>
      <div class="btn_box">
        <el-button>添加</el-button>
        <el-button>修改</el-button>
        <el-button>导出</el-button>
        <el-button>清空</el-button>

      </div>
    </div>
    <!-- 表格显示 -->
    <div class="table_box">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="Accessnumber" label="访问编号" />
        <el-table-column prop="name" label="登录名称" />
        <el-table-column prop="ip" label="登录地址" />
        <el-table-column prop="loginaddress" label="登录地点" />
        <el-table-column prop="browser" label="浏览器" />
        <el-table-column prop="operatingsystem" label="操作系统" />
        <el-table-column prop="state" label="操作状态" />
        <el-table-column prop="operatinginformation" label="操作信息" />
        <el-table-column prop="date" label="登录时间" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default>
            <el-button type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          type="index"
          :label="$t('loglog.serialnumber')"
        />
        <el-table-column prop="name" :label="$t('loglog.coverage')" />
        <el-table-column prop="ip" :label="$t('loglog.systematic')" />
        <el-table-column prop="loginaddress" :label="$t('loglog.ipadress')" />
        <el-table-column prop="browser" :label="$t('loglog.operationtime')" />
        <el-table-column
          prop="operatingsystem"
          :label="$t('loglog.operationtype')"
        />
        <el-table-column prop="state" :label="$t('loglog.operationStatus')" />
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 40px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
@@ -97,107 +100,7 @@
        region: "",
        jurisdiction: "",
      },
      tableData: [
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "chrome",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "IE11",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "chrome",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "chrome",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "chrome",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "IE11",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "chrome",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "chrome",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          name: "admin",
          Accessnumber: "1",
          loginaddress: "北京市",
          browser: "IE11",
          operatingsystem: "windows10",
          state: "成功",
          operatinginformation: "登录成功",
          ip: "221.182.31.12",
        },
      ],
      tableData: [],
    };
  },
  methods: {
@@ -210,8 +113,11 @@
    onSubmit() {
      console.log("submit!");
    },
    onEmpty(formData1) {
      this.$refs[formData1].resetFields()//重置表单数据
    }
  },
  created() {},
  created() { },
};
</script>
<style lang="less" scoped>