feat: 新增关键词管理页面

src/views/huiju/autoReply.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="autoReply" v-loading="loading">
+    <div class="title-group">
       <h2>关键词自动回复管理</h2>
+      <el-button @click="addReply">新增规则</el-button>
+    </div>
+      <br>
       <el-table
         :data="topTable"
         tooltip-effect="dark"
@@ -10,17 +14,20 @@
       <el-table-column
           prop="name"
           label="规则名称"
-          width="55">
+          width="300">
       </el-table-column>
 
-      <el-table-column label="有效期" width="300">
+      <el-table-column label="有效期" width="200">
         <template slot-scope="scope">
           <span>{{scope.row.start_time}}</span>
+          <br>
+          <span>-</span>
+          <br>
           <span>{{scope.row.end_time	}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="状态" width="300">
+      <el-table-column label="状态" width="100">
         <template slot-scope="scope">
           <el-switch
               :value="scope.row.state"
@@ -33,22 +40,31 @@
       <el-table-column
           prop="keys"
           label="关键词"
-          width="80">
+      >
       </el-table-column>
       <el-table-column label="操作" width="100">
         <template slot-scope="scope">
-          <i class="el-icon-edit" @click="onEdit(scope.row)"></i>
-          <el-popconfirm
-            title="确定删除吗？"
-            @confirm="onDelete(scope.row)"
-          >
+          <div class="action-icon">
+            <i class="el-icon-edit" @click="onEdit(scope.row)"></i>
+            <el-popconfirm
+                title="确定删除吗？"
+                @confirm="onDelete(scope.row)"
+            >
             <span slot="reference">
               <i class="el-icon-delete"></i>
             </span>
-          </el-popconfirm>
+            </el-popconfirm>
+          </div>
         </template>
       </el-table-column>
     </el-table>
+      <el-pagination
+          background
+          layout="prev, pager, next"
+          @current-change="onChangePage"
+          :current-page.sync="pageNum"
+          :total="pageCount">
+      </el-pagination>
   </div>
 </template>
 
@@ -58,6 +74,8 @@ export default {
   data() {
     return {
       loading: false,
+      pageCount: 0,
+      pageNum: 1,
       topTable: [],
     }
   },
@@ -65,6 +83,9 @@ export default {
     this.doLoad()
   },
   methods: {
+    addReply () {
+      this.$router.push('/huiju/editReply')
+    },
     onEdit (item) {
       this.$router.push('/huiju/editReply?id=' + item.id)
     },
@@ -72,14 +93,13 @@ export default {
       this.$request('/reply/rule/delete').data({ id: item.id }).success((res) => {
         if (res.status === 'success') {
           this.$notify({
-            title: '成功',
-            message: '这是一条成功的提示消息',
+            title: res.info || '操作成功',
             type: 'success'
           });
+          this.doLoad()
         } else  {
           this.$notify({
-            title: '成功',
-            message: '这是一条成功的提示消息',
+            title: res.info || '操作失败',
             type: 'error'
           });
         }
@@ -87,17 +107,27 @@ export default {
     },
     onChangeState (item) {},
     doAjaxSave () {},
+    onChangePage () {
+      this.doLoad({
+        pageSize: 10,
+        offset: this.pageNum
+      })
+    },
     doLoad (query) {
       if (this.loading) {
         return
       }
       this.loading = true
-      this.$request('/reply/rule/list').data(query).success((res) => {
+      this.$request('/reply/rule/list').data(Object.assign({
+        pageSize: 10,
+        offset: 0
+      }, query)).success((res) => {
         this.loading = false
         if (res.status === 'success' && res.data) {
           this.topTable = res.data.list || []
+          this.pageCount = res.data.total
         }
-      }).get()
+      }).post()
     },
   }
 }
@@ -105,6 +135,19 @@ export default {
 
 <style lang="scss" scoped>
 .autoReply {
+  .title-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
   //
+  ::v-deep {
+    .action-icon i{
+      font-size:20px;
+      cursor: pointer;
+      margin-left: 12px;
+    }
+  }
 }
 </style>

src/views/huiju/editReply.vue

@@ -3,7 +3,9 @@
       <h2>关键词编辑</h2>
     <el-form ref="form" :model="form" label-width="80px">
       <el-form-item label="规则名称">
-        <el-input v-model="form.name"></el-input>
+        <el-col :span="8">
+          <el-input v-model="form.name"></el-input>
+        </el-col>
       </el-form-item>
       <el-form-item label="有效期">
         <el-col :span="6">
@@ -11,7 +13,7 @@
         </el-col>
         <el-col class="line" :span="1" style="text-align: center;">-</el-col>
         <el-col :span="6">
-          <el-time-picker align="center"  type="datetime" placeholder="选择日期" v-model="form.end_time" style="width: 100%;"></el-time-picker>
+          <el-date-picker align="center"  type="datetime" placeholder="选择日期" v-model="form.end_time" style="width: 100%;"></el-date-picker>
         </el-col>
       </el-form-item>
       <el-form-item label="状态">
@@ -19,7 +21,7 @@
       </el-form-item>
       <el-form-item
           v-for="(domain, index) in form.keywords"
-          :label="'关键词'"
+          :label="index === 0 ? '关键词': ''"
           :key="domain.key"
           :prop="'keywords.' + index + '.value'"
           :rules="{
@@ -30,40 +32,59 @@
           <el-input v-model="domain.value"></el-input>
         </el-col>
         <el-col :span="3">
-          <el-button v-if="index > 0" class="action-button" size="small" circle type="danger" @click.prevent="removeKeyword(domain)"  icon="el-icon-remove-outline"></el-button>
+          <el-button v-if="form.keywords.length > 1" class="action-button" size="small" circle type="danger" @click.prevent="removeKeyword(domain)"  icon="el-icon-remove-outline"></el-button>
           <el-button v-if="index === form.keywords.length - 1" class="action-button" size="small" circle type="success" @click.prevent="addKeyword()"   icon="el-icon-circle-plus-outline"></el-button>
         </el-col>
       </el-form-item>
       <el-form-item
           v-for="(reply, index) in form.replies"
-          :label="'回复内容'"
+          :label="index === 0 ? '回复内容': ''"
           :key="reply.key"
           :prop="'replies.' + index + '.value'"
       >
         <el-col :span="8">
-        <el-tabs type="border-card">
-          <el-tab-pane label="文本"></el-tab-pane>
-          <el-tab-pane label="图片">配置管理</el-tab-pane>
-          <el-tab-pane label="图文">
-            <div slot="label">
-              <span>图文</span>
-              <el-button v-if="index > 0" class="action-button" size="small" circle type="danger" @click.prevent="removeReply(reply)"  icon="el-icon-remove-outline"></el-button>
-              <el-button v-if="index === form.replies.length - 1" class="action-button" size="small" circle type="success" @click.prevent="addReply()"   icon="el-icon-circle-plus-outline"></el-button>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
+          <el-tabs v-model="reply.reply_type" type="border-card">
+            <el-tab-pane label="文本" name="1">
+              <el-input v-model="reply.title" placeholder="请输入文本"></el-input>
+            </el-tab-pane>
+            <el-tab-pane label="图片" name="2">
+              <el-input v-model="reply.pic_url" placeholder="请输入图片地址"></el-input>
+            </el-tab-pane>
+            <el-tab-pane label="图文" name="3">
+              <el-input v-model="reply.title" placeholder="请输入文本"></el-input>
+              <el-input v-model="reply.pic_url" placeholder="请输入图片地址"></el-input>
+              <el-input v-model="reply.url" placeholder="请输入URL"></el-input>
+              <el-input v-model="reply.desc" placeholder="请输入描述"></el-input>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+        <el-col :span="3">
+            <el-button v-if="index === form.replies.length - 1" class="action-button" size="small" circle type="success" @click.prevent="addReply()"   icon="el-icon-circle-plus-outline"></el-button>
+            <el-button v-if="form.replies.length > 1" class="action-button" size="small" circle type="danger" @click.prevent="removeReply(reply)"  icon="el-icon-remove-outline"></el-button>
         </el-col>
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">立即创建</el-button>
-        <el-button>取消</el-button>
+        <el-button type="primary" @click="onSubmit">{{editId ? '保存修改' : '立即创建'}}</el-button>
+        <el-button @click="goBackList">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import qs from 'qs'
+function createNewReply () {
+  return {
+    reply_type: '1',
+    desc: '',
+    title: '',
+    url: '',
+    pic_url: '',
+    key: Date.now()
+  }
+}
+
 export default {
   name: 'list',
   data() {
@@ -81,13 +102,7 @@ export default {
             value: ''
           }
         ],
-        replies: [
-          {
-            key: 1,
-            value: ''
-          }
-        ],
-        desc: ''
+        replies: [createNewReply()]
       }
     }
   },
@@ -117,13 +132,30 @@ export default {
       }
     },
     addReply() {
-      this.form.replies.push({
-        value: '',
-        key: Date.now()
-      });
+      this.form.replies.push(createNewReply());
+    },
+    goBackList () {
+      this.$router.replace('/huiju/autoReply')
     },
     onSubmit() {
-      console.log('submit!');
+      const params = Object.assign({}, this.form, {
+        state: this.form.state ? 1: -1,
+        keys: this.form.keywords.map((v) => v.value).join(','),
+        contents: this.form.replies.map(v => {
+          v.reply_type = Number(v.reply_type)
+          return v
+        })
+      })
+      console.log('submit!', params);
+      this.$request('/reply/rule/save').data(params).success((res) => {
+        console.log(res)
+        if (res.status === 'success') {
+          this.$toast(res.info || '操作成功')
+          this.goBackList()
+        } else {
+          this.$toast(res.info || '操作失败')
+        }
+      }).post()
     },
     doLoad (id) {
       if (this.loading) {
@@ -133,7 +165,22 @@ export default {
       this.$request('/reply/rule/detail').data({ id }).success((res) => {
         this.loading = false
         if (res.status === 'success' && res.data) {
-          this.topTable = res.data.list || []
+          const data = res.data || {}
+          this.form.id = id
+          this.form.name = data.name
+          this.form.start_time = data.start_time
+          this.form.end_time = data.end_time
+          this.form.state = data.state === 1
+          this.form.keywords = data.keys.split(',').map(v => {
+            return {
+              value: v,
+              key: Date.now()
+            }
+          })
+          this.form.replies = data.contents.map(v => {
+            v.reply_type = String(v.reply_type)
+            return v
+          })
         }
       }).get()
     },