feat: 新增 富文本管理 对接接口

src/api/content/richText.js

@@ -0,0 +1,52 @@
+import { axios } from '@/utils/request'
+
+// api接口列表
+const api = {
+  list: '/content.agreement/list',
+  // detail: '/content.help/detail',
+  add: '/content.agreement/add',
+  edit: '/content.agreement/edit',
+  delete: '/content.agreement/delete'
+}
+
+// 列表记录
+export function list (params) {
+  return axios({
+    url: api.list,
+    method: 'get',
+    params
+  })
+}
+
+// 新增记录
+export function add (data) {
+  return axios({
+    url: api.add,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 编辑记录
+ * @param {*} data
+ */
+export function edit (data) {
+  return axios({
+    url: api.edit,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除记录
+ * @param {*} data
+ */
+export function deleted (data) {
+  return axios({
+    url: api.delete,
+    method: 'post',
+    data: data
+  })
+}

src/views/content/richText/Index.vue

@@ -6,7 +6,7 @@
     </div>
     <s-table
       ref="table"
-      rowKey="help_id"
+      rowKey="store_id"
       :loading="isLoading"
       :columns="columns"
       :data="loadData"
@@ -19,25 +19,28 @@
       <!-- 操作 -->
       <span slot="action" slot-scope="text, item">
         <a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
-        <a v-action:delete @click="handleDelete(item)">删除</a>
+        <a v-action:delete style="margin-right: 8px;" @click="handleDelete(item)">删除</a>
+        <a v-action:edit @click="handleView(item)">查看</a>
       </span>
     </s-table>
     <AddForm ref="AddForm" @handleSubmit="handleRefresh" />
     <EditForm ref="EditForm" @handleSubmit="handleRefresh" />
+    <ViewForm ref="ViewForm" @handleSubmit="handleRefresh" />
   </a-card>
 </template>
 
 <script>
-import * as Api from '@/api/content/help'
+import * as Api from '@/api/content/richText'
 import { STable } from '@/components'
-import { AddForm, EditForm } from './modules'
+import { AddForm, EditForm, ViewForm } from './modules'
 
 export default {
   name: 'Index',
   components: {
     STable,
     AddForm,
-    EditForm
+    EditForm,
+    ViewForm
   },
   data () {
     return {
@@ -60,10 +63,6 @@ export default {
           dataIndex: 'content',
           scopedSlots: { customRender: 'content' }
         },
-        {
-          title: '添加人',
-          dataIndex: 'add_user'
-        },
         {
           title: '更新时间',
           dataIndex: 'update_time'
@@ -83,6 +82,7 @@ export default {
       loadData: param => {
         return Api.list({ ...param, ...this.queryParam })
           .then(response => {
+            console.log(response)
             return response.data.list
           })
       }
@@ -100,6 +100,7 @@ export default {
 
     // 编辑记录
     handleEdit (item) {
+      console.log(this.$refs.EditForm)
       this.$refs.EditForm.edit(item)
     },
 
@@ -110,7 +111,7 @@ export default {
         title: '您确定要删除该记录吗?',
         content: '删除后不可恢复',
         onOk () {
-          return Api.deleted({ helpId: item.help_id })
+          return Api.deleted({ agreementId: item.id })
             .then(result => {
               app.$message.success(result.message, 1.5)
               app.handleRefresh()
@@ -120,6 +121,11 @@ export default {
       })
     },
 
+    // 查看记录
+    handleView (item) {
+      this.$refs.ViewForm.edit(item)
+    },
+
     /**
      * 刷新列表
      * @param Boolean bool 强制刷新到第一页

src/views/content/richText/modules/AddForm.vue

@@ -11,7 +11,7 @@
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
         <a-form-item label="协议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入联系人姓名' }] }]" />
+          <a-input v-decorator="['type', { rules: [{ required: true, message: '请输入协议类型' }] }]" />
         </a-form-item>
         <a-form-item label="协议内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <Ueditor v-decorator="['content', { rules: [{ required: true, message: '文章内容不能为空' }] }]" />
@@ -23,7 +23,7 @@
 
 <script>
 import pick from 'lodash.pick'
-import * as Api from '@/api/content/help'
+import * as Api from '@/api/content/richText'
 import { SelectRegion, Ueditor } from '@/components'
 
 export default {
@@ -75,6 +75,7 @@ export default {
     // 提交到后端api
     onFormSubmit (values) {
       this.confirmLoading = true
+      console.log(values)
       Api.add({ form: values })
         .then(result => {
           // 显示成功

src/views/content/richText/modules/EditForm.vue

@@ -11,7 +11,7 @@
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
         <a-form-item label="协议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入联系人姓名' }] }]" />
+          <a-input v-decorator="['type', { rules: [{ required: true, message: '请输入联系人姓名' }] }]" />
         </a-form-item>
         <a-form-item label="协议内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <Ueditor v-decorator="['content', { rules: [{ required: true, message: '文章内容不能为空' }] }]" />
@@ -23,7 +23,7 @@
 
 <script>
 import pick from 'lodash.pick'
-import * as Api from '@/api/content/help'
+import * as Api from '@/api/content/richText'
 import { SelectRegion, Ueditor } from '@/components'
 
 export default {
@@ -34,7 +34,7 @@ export default {
   data () {
     return {
       // 对话框标题
-      title: '编辑帮助',
+      title: '编辑富文本管理',
       // 标签布局属性
       labelCol: { span: 7 },
       // 输入框布局属性
@@ -53,6 +53,7 @@ export default {
 
     // 显示对话框
     edit (record) {
+      console.log(record)
       // 显示窗口
       this.visible = true
       // 当前记录
@@ -65,7 +66,7 @@ export default {
     setFieldsValue () {
       const { record, form: { setFieldsValue } } = this
       this.$nextTick(() => {
-        setFieldsValue(pick(record, ['title', 'content', 'sort']))
+        setFieldsValue(pick(record, ['type', 'content']))
       })
     },
 
@@ -89,7 +90,7 @@ export default {
     // 提交到后端api
     onFormSubmit (values) {
       this.confirmLoading = true
-      Api.edit({ helpId: this.record.help_id, form: values })
+      Api.edit({ agreementId: this.record.id, form: values })
         .then(result => {
           // 显示成功
           this.$message.success(result.message, 1.5)

src/views/content/richText/modules/ViewForm.vue

@@ -0,0 +1,106 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="720"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="协议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input v-decorator="['type', { rules: [{ required: true, message: '请输入联系人姓名' }] }]" />
+        </a-form-item>
+        <a-form-item label="协议内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <p v-html="content" v-decorator="['content', { rules: [{ required: true, message: '请输入协议内容' }] }]"></p>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/content/richText'
+import { SelectRegion } from '@/components'
+
+export default {
+  components: {
+    SelectRegion
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '编辑富文本管理',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {}
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    edit (record) {
+      console.log(record)
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+      // 设置默认值
+      this.setFieldsValue()
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      const { record, form: { setFieldsValue } } = this
+      this.$nextTick(() => {
+        setFieldsValue(pick(record, ['type', 'content']))
+      })
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.edit({ agreementId: this.record.id, form: values })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>

src/views/content/richText/modules/index.js

@@ -1,4 +1,5 @@
 import AddForm from './AddForm'
 import EditForm from './EditForm'
+import ViewForm from './ViewForm'
 
-export { AddForm, EditForm }
+export { AddForm, EditForm, ViewForm }