npm install vue-quill-editor --save

// 字典标签组件
import quillEditors from "./components/quillEditor/index";

// 注册全局容器
Vue.component("quillEditors", quillEditors); //富文本框

<-- views:查看新增编辑 flag获取到编辑的内容 -->

		flag: false,//数据是否请求完毕
    init(id,views) {
      this.flag = false;//默认设置为false 不显示quillEditors
      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;
            this.flag = true;//接口请求成功设置为true 显示quillEditors
          })
        } else {
          this.flag = true;接口没有请求也设置为true 显示quillEditors
        }
      })
    },

<el-form-item label="模板内容" prop="content">
	<!--新增编辑-->
	<div v-if="!views">
		<quillEditors class="ql-editor" v-if="flag" :disabled="views" :content="dataForm.content"
				@changeContent="changeContent"/>
	</div>

	<!--查看-->
	<div v-html="dataForm.content" v-if="views && dataForm.mailTemplateId"></div>
</el-form-item>

<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"
                disabled
                @click.native="switchChange(row)"
              >
              </el-switch>

              <template v-else>
                <el-tooltip effect="dark" content="无此权限" placement="top">
                  <el-switch
                    v-model="row.enableStatus"
                    :active-value="1"
                    :inactive-value="0"
                    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&&scope.row.enableStatus===1" type="text" size="small" icon="el-icon-view"
                         @click="addOrUpdateHandle(scope.row.mailTemplateId,1)">查看
              </el-button>
              <el-button v-if="permissions.service_mailtemplate_edit&&scope.row.enableStatus==0" type="text" size="small" icon="el-icon-edit"
                         @click="addOrUpdateHandle(scope.row.mailTemplateId)">编辑
              </el-button>
              <el-button v-if="permissions.service_mailtemplate_del&&scope.row.enableStatus==0" 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) {
      this.$confirm(
        `是否确认${row.enableStatus == 1 ? " 关闭 " : " 打开 "}该邮件模板（${
          row.name
        }）的启用功能`,
        "提示",
      ).then((res) => {
        this.dataListLoading = true;
        const result = row.enableStatus == 1 ? 0 : 1;
        putObj({
          mailTemplateId: row.mailTemplateId,
          enableStatus: result,
        })
          .then((res) => {

            this.dataListLoading = false;
            if (res.data.code === 0) {
              this.$message.success(`${result === 1 ? "打开" : "关闭"}成功`);
              // 根据接口调用成功修改switch状态
              row.enableStatus = result;
              this.getDataList();
            }
          })
          .catch(() => {
            this.dataListLoading = false;
            this.$message.error(`${result === 1 ? "打开" : "关闭"}失败`);
          });
      });

    },

  }
}
</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;
}


/deep/.eval-switch.el-switch.is-disabled {
  opacity: 1;

  .el-switch__core {
    cursor: pointer;
  }
}
</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"
      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">
        <!--新增编辑-->
        <div v-if="!views">
          <quillEditors class="ql-editor" v-if="flag" :disabled="views" :content="dataForm.content"
                        @changeContent="changeContent"
          />
        </div>

        <!--查看-->
        <div v-html="dataForm.content" v-if="views && dataForm.mailTemplateId"></div>
      </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,
      flag: false,//数据是否请求完毕
    };
  },
  created() {
  },
  components: { },
  methods: {
    init(id,views) {
      this.flag = false;
      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;
            this.flag = true;
          })
        } else {
          this.flag = true;
        }
      })
    },
    changeContent(val) {
      this.dataForm.content = val;
    },
    // 表单提交
    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>