Jsl-OA-Web-Re/src/views/error-log/index.vue

<template>
  
  <div style=" width:100%">
        <el-card style="max-width: 100vw;margin: 1.5vw;">
          <template #header>
                <span>消息</span>
            </template>
            <div style="display:flex;flex-direction:row;justify-content: space-between ">
                <div>
                    时间
                    <el-date-picker
                        v-model="value2"
                        type="daterange"
                        unlink-panels
                        range-separator="——"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :shortcuts="shortcuts"
                        :size="large"
                        style="margin-left:0.5vw"
                    />
                </div>
<!--                <div>-->
<!--                    状态-->
<!--                    <el-select-->
<!--                        v-model="value"-->
<!--                        clearable-->
<!--                        placeholder="Status"-->
<!--                        style="width: 240px;margin-left:0.5vw"-->
<!--                    >-->
<!--                        <el-option-->
<!--                            v-for="item in options"-->
<!--                            :key="item.value"-->
<!--                            :label="item.label"-->
<!--                            :value="item.value"-->
<!--                        />-->
<!--                    </el-select>-->

<!--                </div>-->

                <div>
                  <el-button type="primary" style="width:80px">查询</el-button>
                    <el-button style="width:80px">重置</el-button>

                </div>
            </div>
        </el-card>
        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
            <div style="display:flex;flex-direction: row;justify-content: space-between">
                <el-button
                        text
                        type=''
                >历史记录</el-button
                >
            </div>

            <div v-for="(row, index) in tableData" :key="index" class="table-row">
                <div class="table-cell">
                    <div class="date" style="display:flex;flex-direction: column">
                        <span style="color:skyblue">{{row.name}}</span>
                        <span>{{ row.text }}</span>
                    </div>
                </div>
                <div class="table-cell createdTime">
                            <div>{{ row.createdAt }}</div>
                </div>
                <div class="table-cell table-cell-right">
                    <el-button size="small" type="danger" @click="handleDelete(index, row);centerDialogVisible = true">Delete</el-button>
                    <el-dialog v-model="centerDialogVisible" title="删除" width="500"  :modal="false">
    <span>
是否确认删除此条信息？
    </span>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button @click="centerDialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="centerDialogVisible = false">
                                    确认
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </div>
            </div>
            <el-pagination
                size="large"
                background
                layout="prev, pager, next"
                :total="50"
                style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
            />
        </el-card>

    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
// 删除对话框
const centerDialogVisible = ref(false);
// 时间选择器
const value2 = ref('');
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

// 状态选择器

const value = ref('');
const options = [
  {
    value: 'Option1',
    label: '未开始'
  },
  {
    value: 'Option2',
    label: '进行中'
  },
  {
    value: 'Option3',
    label: '暂停'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: '已完成'
  }
];

// 表格
interface Message {
    id: number
    createdAt: string
    name: string
    text: string
}

const handleDelete = (index: number, row: Message) => {
  console.log(index, row);
};

const tableData: Message[] = [
  {
      id:1 ,
    createdAt: '2016-05-03',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
    {
        id:1 ,
        createdAt: '2016-05-03',
        name: 'Tom',
        text: 'No. 189, Grove St, Los Angeles'
    },
    {
        id:1 ,
        createdAt: '2016-05-03',
        name: 'Tom',
        text: 'No. 189, Grove St, Los Angeles'
    },
    {
        id:1 ,
        createdAt: '2016-05-03',
        name: 'Tom',
        text: 'No. 189, Grove St, Los Angeles'
    },

];
</script>
<style>
.my-autocomplete li {
    line-height: normal;
    padding: 7px;
}
.my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
}
.my-autocomplete li .addr {
    font-size: 12px;
    color: #b4b4b4;
}
.my-autocomplete li .highlighted .addr {
    color: #ddd;
}

.table-row {
    display: flex;
    align-items: center;
    /*margin-bottom: 10px;*/
}

.table-cell {
    flex: 1;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.createdTime{
    margin-left: 50px;
}
.table-cell-right {
    justify-content: flex-end;
    margin-right:5vw;
}
.date {
    display: flex;
    /*align-items: center;*/
}

.date el-icon {
    margin-right: 10px;
}
</style>