devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小小林熬夜学编程 | 2024-03-20 15:02:15

赞

踩

【实用模板】Vue代码文件常用后台管理页面模板
  1. <template>
  2.   <div
  3.     :class="$options.name"
  4.     v-loading="loading"
  5.     :element-loading-text="elementLoadingText"
  6.   ></div>
  7.   <sgSearch
  8.     :collapse.sync="collapseSearch"
  9.     @keyup.enter="(collapseSearch = true), (currentPage = 1), initList()"
  10.     @getHeight="(d) => (sgSearchHeight = d)"
  11.   >
  12.     <template slot="searchFilter">
  13.       <li>
  14.         <label>搜索</label>
  15.         <el-input clearable placeholder="请输入关键词" v-model.trim="keyword" />
  16.       </li>
  17.       <li style="width: 150px">
  18.         <label>状态</label>
  19.         <el-select style="width: 100%" v-model="ZT" placeholder="请选择" clearable>
  20.           <el-option
  21.             v-for="(a, i) in ZTs"
  22.             :key="i"
  23.             :value="a.value"
  24.             :label="a.label"
  25.           ></el-option>
  26.         </el-select>
  27.       </li>
  28.       <li>
  29.         <label>更新时间</label>
  30.         <el-date-picker
  31.           v-model="GXSJ"
  32.           ref="GXSJ"
  33.           type="daterange"
  34.           align="right"
  35.           unlink-panels
  36.           range-separator="至"
  37.           start-placeholder="开始日期"
  38.           end-placeholder="结束日期"
  39.           :picker-options="$global.pickerOptions"
  40.           clearable
  41.         />
  42.       </li>
  43.     </template>
  44.     <template slot="searchBtns">
  45.       <el-button
  46.         size="medium"
  47.         type="primary"
  48.         icon="el-icon-search"
  49.         @click="(collapseSearch = true), (currentPage = 1), initList()"
  50.         >搜索</el-button
  51.       >
  52.       <el-button size="medium" type="primary" @click="resetFilterData(), initList()" plain
  53.         >重置</el-button
  54.       >
  55.     </template>
  56.     <template slot="operateBtns">
  57.       <el-button size="medium" type="primary" @click="add">添加</el-button>
  58.       <el-button
  59.         :disabled="selection.length === 0"
  60.         size="medium"
  61.         type="danger"
  62.         @click="delAny"
  63.         >批量删除</el-button
  64.       >
  65.     </template>
  66.   </sgSearch>
  67.   <div
  68.     class="sg-table"
  69.     v-loading="loading"
  70.     :full="fullscreenTable"
  71.     @click="collapseSearch = true"
  72.   >
  73.     <el-table
  74.       :data="tableData"
  75.       ref="table"
  76.       stripe
  77.       border
  78.       :header-cell-style="{ background: '#f5f7fa' }"
  79.       :height="`calc(100vh - ${fullscreenTable ? 10 : 160 + sgSearchHeight}px -  ${
  80.         total > 10 ? 40 : 0
  81.       }px)`"
  82.       :show-header="true"
  83.       style="width: 100%"
  84.       @row-click="row_click"
  85.       @selection-change="selection_change"
  86.       :row-class-name="row_class_name"
  87.     >
  88.       <template slot="empty">
  89.         <el-empty v-show="!loading" :image="require('@/assets/404.png')">
  90.           <span slot="description">暂无数据</span>
  91.           <el-button type="primary" icon="el-icon-s-promotion" plain @click="add"
  92.             >去添加数据</el-button
  93.           >
  94.         </el-empty>
  95.       </template>
  96.  
  97.       <el-table-column type="selection" width="50" />
  98.       <el-table-column
  99.         type="index"
  100.         label="序号"
  101.         width="60"
  102.         :index="(index) => (currentPage - 1) * pageSize + index + 1"
  103.       />
  104.  
  105.       <!-- 主要列 BEGIN---------------------------------------- -->
  106.       <el-table-column prop="字段" label="列名" minWidth="200" />
  107.       <el-table-column :resizable="false" prop="ID" label="身份证号" minWidth="200">
  108.         <template v-slot:header="scope">
  109.           <span>
  110.             身份证号
  111.             <fullscreenTable v-model="fullscreenTable" />
  112.           </span>
  113.         </template>
  114.         <template slot-scope="scope">
  115.           <span>【索引{{ scope.$index }}】{{ scope.row.ID }}</span>
  116.         </template>
  117.       </el-table-column>
  118.       <el-table-column label="用户名" show-overflow-tooltip minWidth="100">
  119.         <template slot-scope="scope">
  120.           <span>{{ scope.row.username }}</span>
  121.         </template>
  122.       </el-table-column>
  123.       <el-table-column label="姓名" show-overflow-tooltip minWidth="80">
  124.         <template slot-scope="scope">
  125.           <span>{{ scope.row.name }}</span>
  126.         </template>
  127.       </el-table-column>
  128.       <el-table-column label="权限角色" show-overflow-tooltip minWidth="100">
  129.         <template slot-scope="scope">
  130.           <span>{{ scope.row.role || `未分配` }}</span>
  131.         </template>
  132.       </el-table-column>
  133.       <!-- 主要列 END---------------------------------------- -->
  134.  
  135.       <el-table-column label="操作" width="175">
  136.         <template slot-scope="scope">
  137.           <el-button
  138.             size="mini"
  139.             type="primary"
  140.             @click.stop="edit(scope.row)"
  141.             @dblclick.native.stop
  142.             >修改</el-button
  143.           >
  144.           <el-button
  145.             size="mini"
  146.             type="danger"
  147.             @click.stop="del(scope.row)"
  148.             @dblclick.native.stop
  149.             >删除</el-button
  150.           >
  151.         </template>
  152.       </el-table-column>
  153.     </el-table>
  154.     <el-pagination
  155.       style="width: 100%; text-align: center; margin-top: 10px"
  156.       background
  157.       :hidden="total <= 10"
  158.       :layout="`total, sizes, prev, pager, next, jumper`"
  159.       :page-sizes="[10, 20, 50, 100]"
  160.       :pager-count="7"
  161.       :current-page.sync="currentPage"
  162.       :page-size.sync="pageSize"
  163.       :total="total"
  164.       @size-change="initList"
  165.       @current-change="initList"
  166.     />
  167.   </div>
  168. </template>
  169. <script>
  170. import sgSearch from "@/vue/components/admin/sgSearch";
  171.  
  172. export default {
  173.   name: "组件模板",
  174.   components: {
  175.     sgSearch,
  176.   },
  177.   data() {
  178.     return {
  179.       loading: false, //加载状态
  180.       elementLoadingText: ``, //加载提示文字
  181.  
  182.       visible: false, //是否显示
  183.       forbid: false, //是否禁用
  184.  
  185.       form: {}, //表单信息
  186.  
  187.       showEditDrawer: false, //显示编辑抽屉
  188.       editDrawerData: null, //抽屉数据
  189.  
  190.       collapseSearch: false, //折叠搜索栏
  191.       keyword: "", //搜索关键词
  192.       ZT: 1, //当前状态
  193.       ZTs: [
  194.         { value: 1, label: "显示文本1" },
  195.         { value: 2, label: "显示文本2" },
  196.         { value: 3, label: "显示文本3" },
  197.         { value: 4, label: "显示文本4" },
  198.         { value: 5, label: "显示文本5" },
  199.       ],
  200.       GXSJ: [], //更新时间
  201.  
  202.       fullscreenTable: false, //全屏表格
  203.       sgSearchHeight: 0, //搜索栏的高度(或者相关选项卡组件的高度)
  204.       tableData: [
  205.         { ID: "330110198704103091", username: "username1", name: "姓名1", role: "role1" },
  206.         { ID: "330110198704103092", username: "username2", name: "姓名2", role: "role2" },
  207.         { ID: "330110198704103093", username: "username3", name: "姓名3", role: "role3" },
  208.         { ID: "330110198704103094", username: "username4", name: "姓名4", role: "role4" },
  209.         { ID: "330110198704103095", username: "username5", name: "姓名5", role: "role5" },
  210.       ], //表格数据
  211.       selection: [], //表格选中项数组
  212.       currentPage: 1,
  213.       pageSize: 10,
  214.       total: 0,
  215.       //total: 999,
  216.     };
  217.   },
  218.   props: [
  219.     "value", //是否显示
  220.     "disabled", //是否禁用
  221.     "data",
  222.   ],
  223.   computed: {},
  224.   watch: {
  225.     loading(newValue, oldValue) {
  226.       newValue || (this.elementLoadingText = ``);
  227.     },
  228.     value: {
  229.       handler(d) {
  230.         this.visible = d;
  231.       },
  232.       deep: true,
  233.       immediate: true,
  234.     },
  235.     visible(d) {
  236.       this.$emit("input", d);
  237.     }, //是否显示（双向绑定）
  238.     disabled: {
  239.       handler(d) {
  240.         this.forbid = d;
  241.       },
  242.       deep: true,
  243.       immediate: true,
  244.     },
  245.     forbid(d) {
  246.       this.$emit(`update:disabled`, d);
  247.     }, //是否显示（双向绑定）
  248.     data: {
  249.       handler(newValue, oldValue) {
  250.         //console.log('深度监听：', newValue, oldValue);
  251.         if (newValue && Object.keys(newValue).length) {
  252.           this.form = JSON.parse(JSON.stringify(newValue));
  253.         } else {
  254.           this.form = {};
  255.         }
  256.       },
  257.       deep: true, //深度监听
  258.       immediate: true, //立即执行
  259.     },
  260.   },
  261.   created() {
  262.     this.init();
  263.   },
  264.   mounted() {},
  265.   destroyed() {},
  266.   methods: {
  267.     row_click(row, column, event) {
  268.       this.$refs.table.toggleRowSelection(row);
  269.     },
  270.     selection_change(selection) {
  271.       this.selection = selection;
  272.     },
  273.     row_class_name({ row, rowIndex }) {
  274.       return this.selection.some((v) => v.ID === row.ID) ? "selected" : "";
  275.     },
  276.  
  277.     //初始化
  278.     init({ d } = {}) {
  279.       this.initData();
  280.     },
  281.     //初始化数据
  282.     initData({ d } = {}) {
  283.       this.initList();
  284.     },
  285.     // 重置
  286.     reset(d) {
  287.       this.resetFilterData(), this.initList();
  288.     },
  289.     // 重置筛选条件
  290.     resetFilterData(d) {
  291.       this.currentPage = 1;
  292.       this.keyword = "";
  293.       this.GXSJ = [];
  294.     },
  295.     //初始化列表
  296.     initList({ keyword = this.keyword } = {}) {
  297.       this.collapseSearch = true;
  298.       // 更新时间
  299.       let KSSJ = this.$g.date.get_yyyy_MM_dd(this.GXSJ[0]); //开始时间
  300.       let JSSJ = this.$g.date.get_yyyy_MM_dd(this.GXSJ[1]); //结束时间
  301.       let data = {
  302.         KEYS: keyword,
  303.         KSSJ,
  304.         JSSJ,
  305.         start: this.currentPage - 1, //当前页数（从0开始）
  306.         limit: this.pageSize, //每页显示条目个数
  307.         sgLog: `前端请求来源：${this.$options.name}查询数据接口`,
  308.       };
  309.       this.$d.查询数据接口({
  310.         data,
  311.         r: {
  312.           l: { show: () => (this.loading = true), close: () => (this.loading = false) },
  313.           s: (d) => {
  314.             this.tableData = d.data; //列表数据赋值
  315.             this.tableData.sort((prev, next) => prev.RANK - next.RANK); //从小到大升序(会改变原数组)
  316.             this.total = d.totalCount; //总条数
  317.           },
  318.         },
  319.       });
  320.     },
  321.  
  322.     add(d) {
  323.       this.editDrawerData = null;
  324.       this.showEditDrawer = true;
  325.     },
  326.     edit(d) {
  327.       this.editDrawerData = JSON.parse(JSON.stringify(d));
  328.       this.showEditDrawer = true;
  329.     },
  330.     delAny() {
  331.       this.del(this.selection);
  332.     },
  333.     del(arr) {
  334.       Array.isArray(arr) || (arr = [arr]);
  335.       this.$confirm(
  336.         `此操作将永久删除${arr.length > 1 ? `这${arr.length}个` : `此`}数据，是否继续？`,
  337.         `提示`,
  338.         {
  339.           dangerouslyUseHTMLString: true,
  340.           confirmButtonText: `确定`,
  341.           cancelButtonText: `取消`,
  342.           type: "warning",
  343.         }
  344.       )
  345.         .then(() => {
  346.           let data = {
  347.             IDS: arr.map((v) => v.ID),
  348.             sgLog: `前端请求来源：${this.$options.name}删除数据接口`,
  349.           };
  350.           this.$d.删除数据接口({
  351.             data,
  352.             r: {
  353.               l: {
  354.                 show: () => (this.loading = true),
  355.                 close: () => (this.loading = false),
  356.               },
  357.               s: (d) => {
  358.                 this.initList();
  359.                 this.$message.success(arr.length > 1 ? `批量删除成功` : `已删除`);
  360.               },
  361.             },
  362.           });
  363.         })
  364.         .catch(() => {
  365.           //this.$message(`已取消删除`);
  366.         });
  367.     },
  368.     valid(d) {
  369.       // if (!this.form.MC) return this.$message.error(this.$refs.MC.$el.querySelector("input").placeholder);
  370.     },
  371.     save() {
  372.       if (this.valid()) return;
  373.       if (this.form.ID) {
  374.         // 修改
  375.       } else {
  376.         // 新增
  377.       }
  378.       let data = {
  379.         ...this.form,
  380.         sgLog: `前端请求来源：${this.$options.name}保存数据接口`,
  381.       };
  382.       this.$d.保存数据接口({
  383.         data,
  384.         r: {
  385.           l: { show: () => (this.loading = true), close: () => (this.loading = false) },
  386.           s: (d) => {
  387.             this.initList({ keyword: "" });
  388.             this.$emit(`save`, this.form);
  389.             this.cancel(this.form);
  390.           },
  391.         },
  392.       });
  393.     },
  394.     cancel(d) {
  395.       this.$emit(`hide`, d);
  396.     },
  397.   },
  398. };
  399. </script>
  400. <style lang="scss" scoped>
  401. .组件模板 {
  402. }
  403. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/274406
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号