element ui 列表页 新增修改查看表单

列表页直接操作删除，新增修改查看用一个子组件表单实现

列表

<template>
  <div class="mod-config ml10">
    <!--搜索-->
    <div class="search searchHead" v-show="showSearch">
      <el-form ref="searchForm" :model="searchForm" :inline="true" size="mini">
        <el-form-item label="申请时间" prop="timeArray">
          <el-date-picker style="width: 360px" type="daterange" range-separator="至" v-model.trim="timeArray"
                          value-format="yyyy-MM-dd hh:mm:ss" start-placeholder="申请开始时间" end-placeholder="申请结束时间" size="small"
                          @change="timeArrayChange"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否启用" prop="enableStatus">
          <el-select
            v-model="searchForm.enableStatus"
            clearable
            placeholder="请选择是否启用"
            size="small"
          >
            <el-option label="关闭" :value="0"></el-option>
            <el-option label="开启" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-delete" size="small" @click="resetQuery">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableContent">
      <!--搜索刷新-->
      <toolbar @refreshTable="getDataList" :showSearch.sync="showSearch">
        <el-button slot="add" type="primary" icon="el-icon-plus" size="small" @click="addOrUpdateHandle()">新增模板</el-button>
      </toolbar>

      <div class="avue-crud">
        <el-table
            :data="dataList"
            border
            :default-sort = "{prop: 'createTime', order: 'descending'}"
            v-loading="dataListLoading">
          <el-table-column label="序号" align="left" min-width="50px" width="50">
            <template slot-scope="scope">
              {{ helper.generateIndex(scope.$index, searchForm) }}
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              header-align="left"
              align="left"
              label="模板名称">
          </el-table-column>

          <el-table-column
            align="center"
            label="是否启用"
            prop="enableStatus"
            width="150"
          >
            <template slot-scope="{ row }">

              <el-switch
                v-if="permissions.service_mailtemplate_edit"
                class="eval-switch"
                v-model="row.enableStatus"
                :active-value="1"
                :inactive-value="0"
                @change="switchChange(row,$event)"
              >
              </el-switch>

              <template v-else>
                <el-tooltip effect="dark" content="无此权限" placement="top">
                  <el-switch
                    v-model="row.enableStatus"
                    :active-value="0"
                    :inactive-value="1"
                    disabled
                  >
                  </el-switch>
                </el-tooltip>
              </template>
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            header-align="left"
            align="left"
            label="创建时间"
            width="300"
          >
          </el-table-column>
          <el-table-column
              header-align="center"
              align="center"
              label="操作">
            <template slot-scope="scope">
              <el-button v-if="permissions.service_mailtemplate_view" type="text" size="small" icon="el-icon-view"
                         @click="addOrUpdateHandle(scope.row.mailTemplateId,1)">查看
              </el-button>
              <el-button v-if="permissions.service_mailtemplate_edit" type="text" size="small" icon="el-icon-edit"
                         @click="addOrUpdateHandle(scope.row.mailTemplateId)">编辑
              </el-button>
              <el-button v-if="permissions.service_mailtemplate_del" type="text" size="small" icon="el-icon-delete"
                         @click="deleteHandle(scope.row.mailTemplateId,scope.row.name)">删除
              </el-button>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <el-image
              src="https://cdn.hnjngl.hnrrcz.com/common/noData.png"
              style="margin-top: 70px; width: 255px"
              fit="fill"
            ></el-image>
            <div
              class="noData"
              style="
                  position: relative;
                  margin: -70px auto -5px;
                  font-size: 14px;
                  color: #999;
                "
            >
              你还没有邮件模板信息，请点击去新增
            </div>
            <el-button
              type="primary"
              size="medium"
              style="min-width: 129px; margin-bottom: 50px"
              @click="addOrUpdateHandle()"
            >去新增</el-button
            >
          </template>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                       :current-page="searchForm.current" :page-sizes="[10,20,50,100]"
                       :page-size="searchForm.size" :total="totalPage" background
                       layout="total,sizes,prev,pager,next,jumper"></el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    </div>



  </div>
</template>

<script>
import {fetchList,delObj,putObj,} from '@/api/service/mailTemplate'
import TableForm from './mailTemplate-form'
import Toolbar from "@/components/Toolbar"
import {mapGetters} from 'vuex'
import {getDicDataSource} from "@/util/common";
import {getStore} from "@/util/store";



export default {
  data() {
    return {
      searchForm: {
        current: 1,
        size: 10,
        enableStatus: '',
      },
      timeArray: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      showSearch: true,
      dataListLoading: false,
      addOrUpdateVisible: false,
      load: false,
      userInfo: {},
    }
  },
  components: {
    TableForm,
    Toolbar
  },
  created() {
    this.userInfo = getStore({name: 'userInfo'});
    console.log("this.userInfo:",this.userInfo);
    this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    //时间搜索
    timeArrayChange(val) {
      if (val) {
        val[0] = val[0].substr(0, 10) + " 00:00:00";
        val[1] = val[1].substr(0, 10) + " 23:59:59";
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.load = false;
      let data = {
        timeArray: this.timeArray,
        ...this.searchForm
      }
      fetchList(data).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
        this.load = true;
      })
      this.dataListLoading = false
      console.log("list");
    },
    //每页数
    sizeChangeHandle(val) {
      this.searchForm.size = val;
      this.searchForm.current = 1;
      this.load = false;//重新加载
      this.getDataList();
    },
    //当前页
    currentChangeHandle(val) {
      console.log("page");
      this.searchForm.current = val;
      this.load = false;//重新加载
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id,views) {
      this.addOrUpdateVisible = true
      console.log(id, views);
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id,views);
      })
    },
    // 删除
    deleteHandle(id, name) {
      let that = this
      this.$confirm('是否确认删除：' + name, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        delObj(id).then(res => {
          if (res.data.data){
            that.$message.success('删除成功')
            that.getDataList()
          }else {
            that.$message.error('删除失败，当前文件有模板选用')
            that.getDataList()
          }
        })
      }).then(data => {

      })
    },
    handleQuery() {
      this.searchForm.current = 1;
      this.load = false;//重新加载
      this.getDataList();
    },
    resetQuery() {
      this.searchForm.enableStatus = "";
      this.timeArray = [];
      this.searchForm.name = '';

      this.$refs['searchForm'].resetFields();
      this.handleQuery();
    },
    switchChange(row,val) {

      this.$confirm(
        `是否确认${row.enableStatus !== 1 ? "打开" : "关闭"}该邮件模板（${
          row.name
        }）的启用功能`,
        "提示"
      ).then((res) => {
        this.dataListLoading = true;

        //const result = row.enableStatus == 1 ? 0 : 1;

        putObj({
          mailTemplateId: row.mailTemplateId,
          enableStatus: val,
        })
          .then((res) => {

            this.dataListLoading = false;
            row.enableStatus = result;
            this.getDataList();

          })
          .catch(() => {
            this.dataListLoading = false;
          });
      });
    },

  }
}
</script>
<style scoped lang="scss">
/deep/.cell {
  max-height: 110px;
  overflow-y: hidden;
}
/*查看截图水平居中*/
/*
/deep/.drag-inner {
  top: 50%!important;
  left: 50%;
  transform: translate(-50%,-50%);
}
*/

/deep/.el-icon-zoom-in {
  margin-right: 0!important;
}


.div-mask-one {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100px;
  cursor: pointer;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.37);
  /* 垂直居中展示 注意点 如果使用绝对居中，其内容内容要用一个div包起来 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  transition: height 300ms;
  top: 1px;
}

.mask-one-p {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}



</style>

表单

<template>
  <el-dialog
    :title="!dataForm.mailTemplateId ? '新增邮件模板' : views && dataForm.mailTemplateId ? '查看邮件模板' : '修改邮件模板'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    v-if="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="95px"
      label-position="left"
    >
      <el-form-item label="模板名称" prop="name">
        <cl-input v-model="dataForm.name" placeholder="请输入模板名称" :disabled="views"></cl-input>
      </el-form-item>

      <el-form-item label="模板内容" prop="content">
        <cl-input v-model="dataForm.content" placeholder="请输入模板内容" :disabled="views" type="textarea"  ></cl-input>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确认{{ !dataForm.mailTemplateId ? '新增邮件模板' : '修改邮件模板'}}</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getObj, addObj, putObj } from "@/api/service/mailTemplate";

import { getDicDataSource } from "@/util/common";

export default {
  data() {
    return {
      visible: false,
      canSubmit: false,
      views: false,
      dataForm: {
        name: "",
        content: "",
      },
      dataRule: {
        name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
        content: [{ required: true, message: "模板内容不能为空", trigger: "blur" }],
      },
      load:false
    };
  },
  created() {
  },
  components: { },
  methods: {
    init(id,views) {
      console.log('views', id, views);
      if (views == 1) {
        this.views = true;
        this.canSubmit = false;
      } else {
        this.views = false;
        this.canSubmit = true;
      }
      this.dataForm.mailTemplateId = id || '';

      this.dataForm.content = "";
      this.dataForm.name = "";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()

        if (this.dataForm.mailTemplateId) {
          getObj(this.dataForm.mailTemplateId).then((response) => {
            this.dataForm = response.data.data;
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.dataForm);

      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.mailTemplateId) {
            putObj(this.dataForm)
              .then((data) => {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.visible = false;
                this.$emit("refreshDataList");
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            addObj(this.dataForm)
              .then((data) => {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.visible = false;
                this.$emit("refreshDataList");
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
/deep/ #uploadContent {
  width: 440px;
}
</style>

接口

/*
 *    Copyright (c) 2018-2025, rs All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 * Redistributions of source code must retain the above copyright notice,
 * this list of conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright
 * notice, this list of conditions and the following disclaimer in the
 * documentation and/or other materials provided with the distribution.
 * Neither the name of the pig4cloud.com developer nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 * Author: rs
 */

import request from '@/router/axios'

//分页
export function fetchList(query) {
  return request({
    url: '/rs-service/mailtemplate/page',
    method: 'get',
    params: query
  })
}

//新增
export function addObj(obj) {
  return request({
    url: '/rs-service/mailtemplate',
    method: 'post',
    data: obj
  })
}

//修改
export function putObj(obj) {
  return request({
    url: '/rs-service/mailtemplate',
    method: 'put',
    data: obj
  })
}

//查询
export function getObj(id) {
  return request({
    url: '/rs-service/mailtemplate/' + id,
    method: 'get',
  })
}

//删除
export function delObj(id) {
  return request({
    url: '/rs-service/mailtemplate/' + id,
    method: 'delete'
  })
}