【VUE-02】vue框架模板总结

前段时间猫哥在学习vue框架，这里总结了一套利用vue + elementUI展示页面数据的框架，开发人员可根据自身需求，对页面进行扩展。

<template>
    <div class="app-container">
        <!-- 条件查询 -->
            <div class="filter-container">
            <!-- 输入框 -->
            <el-input
               v-model="listQuery.keyword"
               placeholder="名称关键词"
               style="width: 200px;"
               clearable
               @keyup.enter.native="handleFilter"
            />
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="timestamp"
              style="width:400px;"
            ></el-date-picker>

            <!-- 按钮 -->
            <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
            <el-button
              style="margin-left: 5px;"
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="handleCreate"
            >增加</el-button>
        </div>

        <!-- 主表数据展示 -->
        <div class="table-main">
            <el-table
              v-loading="listLoading"
              :data="list"
              border
              fit
              highlight-current-row
              style="width: 100%;"
              :key="tableKey"
            >
                <!-- 表格列定义 -->
                <el-table-column label="名称" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.name }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="更新时间" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.updateTime | parseTime}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" class-name="small-padding " width="460px">
                    <template slot-scope="{row}">
                        <el-button type="primary" size="mini" @click="handleGet(row)">详情</el-button>
                        <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
                        <el-button
                          v-if="row.status!='deleted'"
                          size="mini"
                          type="danger"
                          @click="handleDelete(row)"
                         >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 表格分页 -->
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.rows"
              @pagination="getList"
             />
        </div>
        
        <!-- “新增”/“编辑”数据交互界面 -->
        <div class="DialogForm-add">
            <el-dialog
              :title="textMap[dialogStatus]"
              :visible.sync="dialogFormVisible_add"
              :close-on-click-modal="false"
              :close-on-press-escape="false"
              width="900px"
              ref="dataDialog_add"
            >
                <el-form
                  ref="dataForm_add"
                  :model="temp"
                  label-position="right"
                  label-width="100px"
                  style="width: 680px; margin-left:30px;"
                  :rules="rules"
                >
                    <el-form-item label="名称" prop="name">
                        <el-input
                          type="text"
                          placeholder="请输入名称"
                          v-model="temp.name"
                          maxlength="25"
                          style="width:420px"
                          show-word-limit
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="其他" >
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible_add = false">取消</el-button>
                    <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- “详情”数据交互界面 -->
        <div class="DialogForm-detail">
            <el-dialog
              :title="textMap[dialogStatus]"
              :visible.sync="dialogFormVisible_detail"
              :close-on-click-modal="false"
              :close-on-press-escape="false"
              width="920px"
            >
                 <el-form
                  ref="dataForm_detail"
                  :model="displayList"
                  label-position="right"
                  label-width="100px"
                  style="width: 830px; margin-left:30px;"
                  :rules="rules"
                >
                    <el-form-item label="名称" prop="name">
                        <el-input
                          type="text"
                          v-model="displayList.name"
                          maxlength="20"
                          style="width:350px"
                          show-word-limit
                          :disabled="true"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="其他" >
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible_detail = false">取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {fetchList, createRecord, updateRecord} from "@/api/具体js文件名";
import waves from "@/directive/waves";
import Pagination from "@/components/Pagination";
import { parseTime, parseTime2 } from "@/utils/index.js";

export default {
    name: "PopulationScreening"（该vue文件名）,
    components: { Pagination },
    directives: { waves },
    filters: { 
        parseTime,   //时间格式：yy-mm-dd-hh-mm-ss
        parseTime2 //时间格式：yy-mm-dd
    },
    data(){
        return {
            //日期选择
            pickerOptions: {
                shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit("pick", [start, end]);
                            }
                        }
                ]
            },
            rules: {
                name: [{ required: true, message: "请填名称", trigger: "blur" }],
            },
            list: [],
            displayList: [],
            rowKey: "rowKey",
            total: 0,
            tableKey: 0,
            listLoading: true,
            //传给后台的数据对象（一般用于“新增”操作）
            temp: {
                name: "",
            },
            listQuery: {
                keyword: "",
                beginDate: "",
                endDate: "",
                rows: 10,
                page: 1
            },
            textMap: {
                update: "编辑",
                create: "新增",
                get: "详情",
                 },
            dialogStatus: "",
            dateRange: "",
            dialogFormVisible_add: false,
            dialogFormVisible_detail: false,
        };
    },
    mounted() {},

    //进入页面时自动加载
    created() {
        this.getList();
    },

    //JS函数
    methods: {
        //=========== 操作函数 ==========
        //点击查询按钮
        handleFilter() {
            //每次查询后分页page参数都重新初始化为1
            this.listQuery.page = 1;
            //设置查询时间
            if (this.dateRange != null && this.dateRange != "") {
                this.listQuery.beginDate = this.dateRange[0].toString();
                this.listQuery.endDate = this.dateRange[1].toString();
            } else {
                this.listQuery.beginDate = "";
                this.listQuery.endDate = "";
            }
            this.getList();
            this.$destroy;
        },

        //点击增加按钮
        handleCreate() {
            this.dialogFormVisible_add = true;
            this.dialogStatus = "create";
            this.resetTemp();
            setTimeout(() => {
                this.$refs["dataForm_add"].clearValidate();
            }, 0);
        },

        //点击详情按钮
        handleGet(row) {
            this.dialogFormVisible_detail = true;
            this.dialogStatus = "get";
            this.displayList = row;
        },

        //点击编辑按钮
        handleUpdate(row) {
            this.dialogFormVisible_add = true;
            setTimeout(() => {
                this.$refs["dataForm_add"].clearValidate();
            }, 0);
            this.dialogStatus = "update";
            //把row中的数据赋值到this.temp中
            this.TransformData(row);
        },

        //点击删除按钮
        handleDelete(row) {
            this.$confirm("您确认要删除吗？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(async () => {
                await deleteRecord(row);
                this.$message({
                    type: "success",
                    message: "删除成功"
                });
                this.getList();
             })
            .catch(err => {
                console.error(err);
            });
        },

        //=========== 主函数 ===========
        //获取主页table的数据
        getList() {
            setTimeout(() => {
                fetchList(this.listQuery).then(response => {
                    this.list = response.value.rows;
                    this.total = response.value.records;
                    this.listLoading = false;
                }),
            0;});
        },

        //创建筛选策略
        createData() {
            this.$refs["dataForm_add"].validate(valid => {
                if (valid) {
                    createRecord(this.temp).then(() => {
                        this.$notify({
                            title: "成功",
                            message: "创建成功",
                            type: "success",
                            duration: 2000
                        });
                        this.handleFilter();
                        this.dialogFormVisible_add = false;
                    });
                } 
            });
        },

        //修改筛选策略
        updateData() {
            this.$refs["dataForm_add"].validate(valid => {
                if (valid) {
                    updateRecord(this.temp).then(() => {
                        this.$notify({
                            title: "成功",
                            message: "修改成功",
                            type: "success",
                            duration: 2000
                        });
                        this.handleFilter();
                        this.dialogFormVisible_add = false;
                    });
                }
            });
        },

        //初始化Temp
        resetTemp() {
            this.temp = {
                name: "",
            };
        },

        //把row中的数据赋值到this.temp中
        TransformData(row) {
            this.temp.id = row.id;
            this.temp.name = row.name;
        }
    }
}
</script>