feat: 新增关键词自动回复相关页面

src/views/huiju/autoReply.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="autoReply" v-loading="loading">
+      <h2>关键词自动回复管理</h2>
+      <el-table
+        :data="topTable"
+        tooltip-effect="dark"
+        style="width: 100%"
+        border
+    >
+      <el-table-column
+          prop="name"
+          label="规则名称"
+          width="55">
+      </el-table-column>
+
+      <el-table-column label="有效期" width="300">
+        <template slot-scope="scope">
+          <span>{{scope.row.start_time}}</span>
+          <span>{{scope.row.end_time	}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" width="300">
+        <template slot-scope="scope">
+          <el-switch
+              :value="scope.row.state"
+              @change="onChangeState(scope.row)"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <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)"
+          >
+            <span slot="reference">
+              <i class="el-icon-delete"></i>
+            </span>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  data() {
+    return {
+      loading: false,
+      topTable: [],
+    }
+  },
+  created() {
+    this.doLoad()
+  },
+  methods: {
+    onEdit (item) {
+      this.$router.push('/huiju/editReply?id=' + item.id)
+    },
+    onDelete (item) {
+      this.$request('/reply/rule/delete').data({ id: item.id }).success((res) => {
+        if (res.status === 'success') {
+          this.$notify({
+            title: '成功',
+            message: '这是一条成功的提示消息',
+            type: 'success'
+          });
+        } else  {
+          this.$notify({
+            title: '成功',
+            message: '这是一条成功的提示消息',
+            type: 'error'
+          });
+        }
+      }).get()
+    },
+    onChangeState (item) {},
+    doAjaxSave () {},
+    doLoad (query) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      this.$request('/reply/rule/list').data(query).success((res) => {
+        this.loading = false
+        if (res.status === 'success' && res.data) {
+          this.topTable = res.data.list || []
+        }
+      }).get()
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.autoReply {
+  //
+}
+</style>

src/views/huiju/editReply.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="editReply" v-loading="loading">
+      <h2>关键词编辑</h2>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="规则名称">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="有效期">
+        <el-col :span="6">
+          <el-date-picker align="center" type="datetime" placeholder="选择日期" v-model="form.start_time" style="width: 100%;"></el-date-picker>
+        </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-col>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-switch v-model="form.state"></el-switch>
+      </el-form-item>
+      <el-form-item
+          v-for="(domain, index) in form.keywords"
+          :label="'关键词'"
+          :key="domain.key"
+          :prop="'keywords.' + index + '.value'"
+          :rules="{
+            required: true, message: '请填写关键词', trigger: 'blur'
+          }"
+      >
+        <el-col :span="6">
+          <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="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="'回复内容'"
+          :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-col>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  data() {
+    return {
+      loading: false,
+      editId: null,
+      form: {
+        name: '',
+        start_time: '',
+        end_time: '',
+        state: false,
+        keywords: [
+          {
+            key: 1,
+            value: ''
+          }
+        ],
+        replies: [
+          {
+            key: 1,
+            value: ''
+          }
+        ],
+        desc: ''
+      }
+    }
+  },
+  created() {
+    if (this.$route.query.id) {
+      this.editId = this.$route.query.id
+      this.doLoad(this.editId)
+    }
+  },
+  methods: {
+    removeKeyword(item) {
+      var index = this.form.keywords.indexOf(item)
+      if (index !== -1) {
+        this.form.keywords.splice(index, 1)
+      }
+    },
+    addKeyword() {
+      this.form.keywords.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    removeReply(item) {
+      var index = this.form.replies.indexOf(item)
+      if (index !== -1) {
+        this.form.replies.splice(index, 1)
+      }
+    },
+    addReply() {
+      this.form.replies.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    onSubmit() {
+      console.log('submit!');
+    },
+    doLoad (id) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      this.$request('/reply/rule/detail').data({ id }).success((res) => {
+        this.loading = false
+        if (res.status === 'success' && res.data) {
+          this.topTable = res.data.list || []
+        }
+      }).get()
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editReply {
+  .action-button {
+    font-size: 16px;
+    margin-left: 12px;
+  }
+  //
+}
+</style>