【实用模板】Vue代码文件常用后台管理页面模板

<template>
  <div
    :class="$options.name"
    v-loading="loading"
    :element-loading-text="elementLoadingText"
  ></div>
  <sgSearch
    :collapse.sync="collapseSearch"
    @keyup.enter="(collapseSearch = true), (currentPage = 1), initList()"
    @getHeight="(d) => (sgSearchHeight = d)"
  >
    <template slot="searchFilter">
      <li>
        <label>搜索</label>
        <el-input clearable placeholder="请输入关键词" v-model.trim="keyword" />
      </li>
      <li style="width: 150px">
        <label>状态</label>
        <el-select style="width: 100%" v-model="ZT" placeholder="请选择" clearable>
          <el-option
            v-for="(a, i) in ZTs"
            :key="i"
            :value="a.value"
            :label="a.label"
          ></el-option>
        </el-select>
      </li>
      <li>
        <label>更新时间</label>
        <el-date-picker
          v-model="GXSJ"
          ref="GXSJ"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$global.pickerOptions"
          clearable
        />
      </li>
    </template>
    <template slot="searchBtns">
      <el-button
        size="medium"
        type="primary"
        icon="el-icon-search"
        @click="(collapseSearch = true), (currentPage = 1), initList()"
        >搜索</el-button
      >
      <el-button size="medium" type="primary" @click="resetFilterData(), initList()" plain
        >重置</el-button
      >
    </template>
    <template slot="operateBtns">
      <el-button size="medium" type="primary" @click="add">添加</el-button>
      <el-button
        :disabled="selection.length === 0"
        size="medium"
        type="danger"
        @click="delAny"
        >批量删除</el-button
      >
    </template>
  </sgSearch>
  <div
    class="sg-table"
    v-loading="loading"
    :full="fullscreenTable"
    @click="collapseSearch = true"
  >
    <el-table
      :data="tableData"
      ref="table"
      stripe
      border
      :header-cell-style="{ background: '#f5f7fa' }"
      :height="`calc(100vh - ${fullscreenTable ? 10 : 160 + sgSearchHeight}px -  ${
        total > 10 ? 40 : 0
      }px)`"
      :show-header="true"
      style="width: 100%"
      @row-click="row_click"
      @selection-change="selection_change"
      :row-class-name="row_class_name"
    >
      <template slot="empty">
        <el-empty v-show="!loading" :image="require('@/assets/404.png')">
          <span slot="description">暂无数据</span>
          <el-button type="primary" icon="el-icon-s-promotion" plain @click="add"
            >去添加数据</el-button
          >
        </el-empty>
      </template>
 
      <el-table-column type="selection" width="50" />
      <el-table-column
        type="index"
        label="序号"
        width="60"
        :index="(index) => (currentPage - 1) * pageSize + index + 1"
      />
 
      <!-- 主要列 BEGIN---------------------------------------- -->
      <el-table-column prop="字段" label="列名" minWidth="200" />
      <el-table-column :resizable="false" prop="ID" label="身份证号" minWidth="200">
        <template v-slot:header="scope">
          <span>
            身份证号
            <fullscreenTable v-model="fullscreenTable" />
          </span>
        </template>
        <template slot-scope="scope">
          <span>【索引{{ scope.$index }}】{{ scope.row.ID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" show-overflow-tooltip minWidth="100">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" show-overflow-tooltip minWidth="80">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限角色" show-overflow-tooltip minWidth="100">
        <template slot-scope="scope">
          <span>{{ scope.row.role || `未分配` }}</span>
        </template>
      </el-table-column>
      <!-- 主要列 END---------------------------------------- -->
 
      <el-table-column label="操作" width="175">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click.stop="edit(scope.row)"
            @dblclick.native.stop
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click.stop="del(scope.row)"
            @dblclick.native.stop
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="width: 100%; text-align: center; margin-top: 10px"
      background
      :hidden="total <= 10"
      :layout="`total, sizes, prev, pager, next, jumper`"
      :page-sizes="[10, 20, 50, 100]"
      :pager-count="7"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      @size-change="initList"
      @current-change="initList"
    />
  </div>
</template>
<script>
import sgSearch from "@/vue/components/admin/sgSearch";
 
export default {
  name: "组件模板",
  components: {
    sgSearch,
  },
  data() {
    return {
      loading: false, //加载状态
      elementLoadingText: ``, //加载提示文字
 
      visible: false, //是否显示
      forbid: false, //是否禁用
 
      form: {}, //表单信息
 
      showEditDrawer: false, //显示编辑抽屉
      editDrawerData: null, //抽屉数据
 
      collapseSearch: false, //折叠搜索栏
      keyword: "", //搜索关键词
      ZT: 1, //当前状态
      ZTs: [
        { value: 1, label: "显示文本1" },
        { value: 2, label: "显示文本2" },
        { value: 3, label: "显示文本3" },
        { value: 4, label: "显示文本4" },
        { value: 5, label: "显示文本5" },
      ],
      GXSJ: [], //更新时间
 
      fullscreenTable: false, //全屏表格
      sgSearchHeight: 0, //搜索栏的高度(或者相关选项卡组件的高度)
      tableData: [
        { ID: "330110198704103091", username: "username1", name: "姓名1", role: "role1" },
        { ID: "330110198704103092", username: "username2", name: "姓名2", role: "role2" },
        { ID: "330110198704103093", username: "username3", name: "姓名3", role: "role3" },
        { ID: "330110198704103094", username: "username4", name: "姓名4", role: "role4" },
        { ID: "330110198704103095", username: "username5", name: "姓名5", role: "role5" },
      ], //表格数据
      selection: [], //表格选中项数组
      currentPage: 1,
      pageSize: 10,
      total: 0,
      //total: 999,
    };
  },
  props: [
    "value", //是否显示
    "disabled", //是否禁用
    "data",
  ],
  computed: {},
  watch: {
    loading(newValue, oldValue) {
      newValue || (this.elementLoadingText = ``);
    },
    value: {
      handler(d) {
        this.visible = d;
      },
      deep: true,
      immediate: true,
    },
    visible(d) {
      this.$emit("input", d);
    }, //是否显示（双向绑定）
    disabled: {
      handler(d) {
        this.forbid = d;
      },
      deep: true,
      immediate: true,
    },
    forbid(d) {
      this.$emit(`update:disabled`, d);
    }, //是否显示（双向绑定）
    data: {
      handler(newValue, oldValue) {
        //console.log('深度监听：', newValue, oldValue);
        if (newValue && Object.keys(newValue).length) {
          this.form = JSON.parse(JSON.stringify(newValue));
        } else {
          this.form = {};
        }
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  destroyed() {},
  methods: {
    row_click(row, column, event) {
      this.$refs.table.toggleRowSelection(row);
    },
    selection_change(selection) {
      this.selection = selection;
    },
    row_class_name({ row, rowIndex }) {
      return this.selection.some((v) => v.ID === row.ID) ? "selected" : "";
    },
 
    //初始化
    init({ d } = {}) {
      this.initData();
    },
    //初始化数据
    initData({ d } = {}) {
      this.initList();
    },
    // 重置
    reset(d) {
      this.resetFilterData(), this.initList();
    },
    // 重置筛选条件
    resetFilterData(d) {
      this.currentPage = 1;
      this.keyword = "";
      this.GXSJ = [];
    },
    //初始化列表
    initList({ keyword = this.keyword } = {}) {
      this.collapseSearch = true;
      // 更新时间
      let KSSJ = this.$g.date.get_yyyy_MM_dd(this.GXSJ[0]); //开始时间
      let JSSJ = this.$g.date.get_yyyy_MM_dd(this.GXSJ[1]); //结束时间
      let data = {
        KEYS: keyword,
        KSSJ,
        JSSJ,
        start: this.currentPage - 1, //当前页数（从0开始）
        limit: this.pageSize, //每页显示条目个数
        sgLog: `前端请求来源：${this.$options.name}查询数据接口`,
      };
      this.$d.查询数据接口({
        data,
        r: {
          l: { show: () => (this.loading = true), close: () => (this.loading = false) },
          s: (d) => {
            this.tableData = d.data; //列表数据赋值
            this.tableData.sort((prev, next) => prev.RANK - next.RANK); //从小到大升序(会改变原数组)
            this.total = d.totalCount; //总条数
          },
        },
      });
    },
 
    add(d) {
      this.editDrawerData = null;
      this.showEditDrawer = true;
    },
    edit(d) {
      this.editDrawerData = JSON.parse(JSON.stringify(d));
      this.showEditDrawer = true;
    },
    delAny() {
      this.del(this.selection);
    },
    del(arr) {
      Array.isArray(arr) || (arr = [arr]);
      this.$confirm(
        `此操作将永久删除${arr.length > 1 ? `这${arr.length}个` : `此`}数据，是否继续？`,
        `提示`,
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: `确定`,
          cancelButtonText: `取消`,
          type: "warning",
        }
      )
        .then(() => {
          let data = {
            IDS: arr.map((v) => v.ID),
            sgLog: `前端请求来源：${this.$options.name}删除数据接口`,
          };
          this.$d.删除数据接口({
            data,
            r: {
              l: {
                show: () => (this.loading = true),
                close: () => (this.loading = false),
              },
              s: (d) => {
                this.initList();
                this.$message.success(arr.length > 1 ? `批量删除成功` : `已删除`);
              },
            },
          });
        })
        .catch(() => {
          //this.$message(`已取消删除`);
        });
    },
    valid(d) {
      // if (!this.form.MC) return this.$message.error(this.$refs.MC.$el.querySelector("input").placeholder);
    },
    save() {
      if (this.valid()) return;
      if (this.form.ID) {
        // 修改
      } else {
        // 新增
      }
      let data = {
        ...this.form,
        sgLog: `前端请求来源：${this.$options.name}保存数据接口`,
      };
      this.$d.保存数据接口({
        data,
        r: {
          l: { show: () => (this.loading = true), close: () => (this.loading = false) },
          s: (d) => {
            this.initList({ keyword: "" });
            this.$emit(`save`, this.form);
            this.cancel(this.form);
          },
        },
      });
    },
    cancel(d) {
      this.$emit(`hide`, d);
    },
  },
};
</script>
<style lang="scss" scoped>
.组件模板 {
}
</style>