From 360d6e62a487d66f0771aa93a95d95a5fb55e2a3 Mon Sep 17 00:00:00 2001
From: dute7liang <383200134@qq.com>
Date: Mon, 15 Jan 2024 23:29:04 +0800
Subject: [PATCH] init

---
 package.json                             |   3 +-
 src/api/cai/agreementSetting.js          |  30 +--
 src/components/WangEdit/index.vue        |  78 ++++++
 src/views/cai/agreementSetting/index.vue | 300 ++++-------------------
 4 files changed, 129 insertions(+), 282 deletions(-)
 create mode 100644 src/components/WangEdit/index.vue

diff --git a/package.json b/package.json
index 820e667..dcca6ff 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,8 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
diff --git a/src/api/cai/agreementSetting.js b/src/api/cai/agreementSetting.js
index 5d8a012..4f84984 100644
--- a/src/api/cai/agreementSetting.js
+++ b/src/api/cai/agreementSetting.js
@@ -1,31 +1,13 @@
 import request from '@/utils/request'
 
-// 查询协议设置列表
-export function listAgreementSetting(query) {
-  return request({
-    url: '/cai/agreementSetting/list',
-    method: 'get',
-    params: query
-  })
-}
-
 // 查询协议设置详细
-export function getAgreementSetting(id) {
+export function getAgreementSetting() {
   return request({
-    url: '/cai/agreementSetting/' + id,
+    url: '/cai/agreementSetting/info',
     method: 'get'
   })
 }
 
-// 新增协议设置
-export function addAgreementSetting(data) {
-  return request({
-    url: '/cai/agreementSetting',
-    method: 'post',
-    data: data
-  })
-}
-
 // 修改协议设置
 export function updateAgreementSetting(data) {
   return request({
@@ -34,11 +16,3 @@ export function updateAgreementSetting(data) {
     data: data
   })
 }
-
-// 删除协议设置
-export function delAgreementSetting(id) {
-  return request({
-    url: '/cai/agreementSetting/' + id,
-    method: 'delete'
-  })
-}
diff --git a/src/components/WangEdit/index.vue b/src/components/WangEdit/index.vue
new file mode 100644
index 0000000..10eabda
--- /dev/null
+++ b/src/components/WangEdit/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="editor" id="editor"></div>
+</template>
+
+<script>
+  import wangEditor from 'wangeditor'
+  export default {
+    name:"WangEdit",
+    props:{
+      /* 编辑器的内容 */
+      value: {
+        type: String,
+        default: "",
+      },
+      /* 高度 */
+      height: {
+        type: Number,
+        default: null,
+      },
+    },
+    data() {
+      return {
+        editor: null,
+        editorData: ''
+      }
+    },
+    /*computed: {
+      styles() {
+        let style = {};
+        if (this.minHeight) {
+          style.minHeight = `${this.minHeight}px`;
+        }
+        if (this.height) {
+          style.height = `${this.height}px`;
+        }
+        return style;
+      },
+    },*/
+    watch:{
+      value:{
+        handler(val){
+          if(val !== this.editorData){
+            this.editorData = val === null ? "" : val;
+            if (this.editor) {
+              this.editor.txt.html(this.editorData);
+            }
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {
+      const editor = new wangEditor(`#editor`)
+      editor.config.height = this.height ? this.height : 500;
+      // 创建编辑器
+      editor.create()
+      this.editor = editor
+      this.editor.txt.html(this.editorData);
+      // 配置 onchange 回调函数，将数据同步到 vue 中
+      editor.config.onchange = (newHtml) => {
+        this.editorData = newHtml
+        this.$emit("input", this.editorData);
+      }
+    },
+    methods: {
+      getEditorData() {
+        // 通过代码获取编辑器内容
+        let data = this.editor.txt.html()
+        alert(data)
+      }
+    },
+    beforeDestroy() {
+      // 调用销毁 API 对当前编辑器实例进行销毁
+      this.editor.destroy()
+      this.editor = null
+    }
+  }
+</script>
diff --git a/src/views/cai/agreementSetting/index.vue b/src/views/cai/agreementSetting/index.vue
index 5f2137b..86fa9f5 100644
--- a/src/views/cai/agreementSetting/index.vue
+++ b/src/views/cai/agreementSetting/index.vue
@@ -1,281 +1,75 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="用户协议" prop="userAgreement">
-        <el-input
-          v-model="queryParams.userAgreement"
-          placeholder="请输入用户协议"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="主播入驻协议" prop="anchorJoinAgreement">
-        <el-input
-          v-model="queryParams.anchorJoinAgreement"
-          placeholder="请输入主播入驻协议"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['cai:agreementSetting:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['cai:agreementSetting:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['cai:agreementSetting:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['cai:agreementSetting:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="agreementSettingList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="ID" align="center" prop="id" v-if="true"/>
-      <el-table-column label="用户协议" align="center" prop="userAgreement" />
-      <el-table-column label="主播入驻协议" align="center" prop="anchorJoinAgreement" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['cai:agreementSetting:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['cai:agreementSetting:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改协议设置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="用户协议" prop="userAgreement">
-          <el-input v-model="form.userAgreement" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="主播入驻协议" prop="anchorJoinAgreement">
-          <el-input v-model="form.anchorJoinAgreement" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+    <el-tabs v-model="activeName" type="card">
+      <el-tab-pane label="用户协议" name="loansAgreement">
+        <el-button type="primary" size="mini" v-if="!userAgreement" @click="showEdit('userAgreement')">编辑</el-button>
+        <el-button :loading="buttonLoading" v-if="userAgreement"  type="primary" size="mini" @click="submitForm2('userAgreement')">保存</el-button>
+        <div v-if="!userAgreement" v-html="form.userAgreement" style="width: 98%" />
+        <wang-edit v-if="userAgreement" v-model="form.userAgreement" :min-height="800" />
+      </el-tab-pane>
+      <el-tab-pane label="主播入驻协议" name="anchorJoinAgreement">
+        <el-button type="primary" size="mini" v-if="!anchorJoinAgreement" @click="showEdit('anchorJoinAgreement')">编辑</el-button>
+        <el-button :loading="buttonLoading" v-if="anchorJoinAgreement" type="primary" size="mini" @click="submitForm2('anchorJoinAgreement')">保存</el-button>
+        <div v-if="!anchorJoinAgreement" v-html="form.anchorJoinAgreement" style="width: 98%" />
+        <editor v-if="anchorJoinAgreement" v-model="form.anchorJoinAgreement" :min-height="192"></editor>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import { listAgreementSetting, getAgreementSetting, delAgreementSetting, addAgreementSetting, updateAgreementSetting } from "@/api/cai/agreementSetting";
+import Editor from '@/components/Editor'
+import WangEdit from '@/components/WangEdit'
+import {getAgreementSetting, updateAgreementSetting} from "@/api/cai/agreementSetting";
 
 export default {
   name: "AgreementSetting",
+  components: {
+    Editor,WangEdit
+  },
   data() {
     return {
-      // 按钮loading
+      //按钮loading
       buttonLoading: false,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 协议设置表格数据
-      agreementSettingList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        userAgreement: undefined,
-        anchorJoinAgreement: undefined
+      form: {
+        id: undefined,
+        userAgreement:undefined,
+        anchorJoinAgreement:undefined,
       },
-      // 表单参数
-      form: {},
+      activeName:'loansAgreement',
       // 表单校验
       rules: {
-        id: [
-          { required: true, message: "ID不能为空", trigger: "blur" }
-        ],
-        userAgreement: [
-          { required: true, message: "用户协议不能为空", trigger: "blur" }
-        ],
-        anchorJoinAgreement: [
-          { required: true, message: "主播入驻协议不能为空", trigger: "blur" }
-        ]
-      }
+      },
+      formDisable:true,
+      userAgreement:false,
+      anchorJoinAgreement:false,
     };
   },
   created() {
-    this.getList();
+    this.init();
   },
   methods: {
-    /** 查询协议设置列表 */
-    getList() {
-      this.loading = true;
-      listAgreementSetting(this.queryParams).then(response => {
-        this.agreementSettingList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        userAgreement: undefined,
-        anchorJoinAgreement: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加协议设置";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const id = row.id || this.ids
-      getAgreementSetting(id).then(response => {
-        this.loading = false;
+    init(){
+      getAgreementSetting().then(response => {
         this.form = response.data;
-        this.open = true;
-        this.title = "修改协议设置";
-      });
+      })
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.id != null) {
-            updateAgreementSetting(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addAgreementSetting(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
+    showEdit(key){
+      this[key] = true;
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除协议设置编号为"' + ids + '"的数据项？').then(() => {
-        this.loading = true;
-        return delAgreementSetting(ids);
-      }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+    submitForm2(key){
+      const params = {
+        id: this.form.id,
+        [key]: this.form[key],
+      };
+      this.buttonLoading = true;
+      updateAgreementSetting(params).then(response => {
+        this.buttonLoading = false;
+        this[key] = false;
+        this.msgSuccess("修改成功");
       }).catch(() => {
-      }).finally(() => {
-        this.loading = false;
+        this.buttonLoading = false;
       });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('cai/agreementSetting/export', {
-        ...this.queryParams
-      }, `agreementSetting_${new Date().getTime()}.xlsx`)
     }
   }
 };