用户群特征编辑

src/pages/characteristicsEditor/index.vue

@@ -8,8 +8,230 @@
         </el-breadcrumb>
       </el-card>
     </div>
+    <div
+      <div>
+        <el-card class="box-card">
+          <el-button size="mini" icon="el-icon-plus" type="success" @click="dialogAddFormVisible = true"> 添 加 </el-button>
+        </el-card>
+      </div>
+      <div>
+        <el-card class="box-card">
+          <el-table
+            :data="tableData"
+            border
+            style="width: 100%">
+            <el-table-column
+              fixed
+              prop="created_at"
+              label="日期">
+            </el-table-column>
+            <el-table-column
+              fixed
+              prop="name"
+              label="特征名称">
+            </el-table-column>
+            <el-table-column
+              fixed
+              label="特征选项">
+              <template slot-scope="scope">
+                <span v-for="(item, index) in JSON.parse(scope.row.context)" :key="index">
+                  {{ item.options }}、{{ item.options_info }}<br/>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed
+              prop="operator"
+              label="用户">
+            </el-table-column>
+            <el-table-column
+              fixed
+              prop="updated_at"
+              label="更新时间">
+            </el-table-column>
+            <el-table-column
+              fixed="right"
+              label="操作">
+              <template slot-scope="scope">
+                <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row.id)"></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+      <div>
+        <el-dialog title="添加用户群特征模板" :visible.sync="dialogAddFormVisible">
+          <el-form size="mini" :model="addForm">
+            <el-form-item label="特征名称" :label-width="formLabelWidth">
+              <el-input v-model="addForm.name" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="特征选项" :label-width="formLabelWidth">
+              <el-col :span="12">
+                <ul class="characteristics-add">
+                  <li v-for="(item, index) in addForm.context" :key="index">
+                    <el-row :gutter="10" type="flex" align="middle">
+                      <el-col :span="1" style="margin-right: 15px">
+                         <el-tag size="mini"
+                          effect="plain">
+                          {{ item.options }}
+                        </el-tag>
+                      </el-col>
+                      <el-col :span="16">
+                        <el-input v-model="item.options_info" placeholder="请输入内容" style="width: 150px"></el-input>
+                      </el-col>
+                      <el-col :span="2" style="margin-left: 15px; margin-right: 5px">
+                        <i class="el-icon-circle-plus-outline" @click="inputAdd(index)"></i>
+                      </el-col>
+                      <el-col :span="2">
+                        <i class="el-icon-remove-outline" @click="inputRemove(index)"></i>
+                      </el-col>
+                    </el-row>
+                  </li>
+                </ul>
+              </el-col>
+            </el-form-item>
+           </el-form>
+           <div slot="footer" class="dialog-footer">
+              <el-button size="mini" @click="dialogAddFormVisible = false">取 消</el-button>
+              <el-button size="mini" type="primary" @click="saveData">保 存</el-button>
+            </div>
+        </el-dialog>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import * as templateApi from '@/api/characteristics-template'
+export default {
+  name: 'index',
+  mounted() {
+    this.AZkey = this.A_Z()
+    templateApi.characteristicsTemplateList().then(res => {
+      if (res.code === 0) {
+        this.tableData = res.data
+        return true
+      } else {
+        this.$message.error(res.message)
+        return false
+      }
+    })
+  },
+  data() {
+    return {
+      formLabelWidth: '100px',
+      dialogAddFormVisible: false,
+      tableData: [],
+      addForm: {
+        name: '',
+        context: [
+          {
+            options: 'A',
+            options_info: ''
+          }
+        ]
+      },
+      AZkey: []
+    }
+  },
+  methods: {
+    A_Z() {
+      const result = []
+      for (let i = 0; i < 26; i++) {
+        result.push(String.fromCharCode(65 + i))
+      }
+      return result
+    },
+    setKey(arr) {
+      arr.map((item, index) => {
+        item.options = this.AZkey[index]
+      })
+      console.log(arr)
+    },
+    inputAdd(index) {
+      if (this.addForm.context.length >= 26) {
+        this.$message.error('最多输入26项')
+        return false
+      }
+      const getKey = this.addForm.context[this.addForm.context.length - 1].options
+      const getIndex = this.AZkey.findIndex(item => { return item === getKey })
+      this.addForm.context.push({ options: this.AZkey[getIndex + 1], options_info: '' })
+    },
+    inputRemove(index) {
+      if (this.addForm.context.length > 1) {
+        this.addForm.context.splice(index, 1)
+        this.setKey(this.addForm.context)
+      }
+    },
+    deleteData(id) {
+      this.$confirm('确认删除？', '提示').then(_ => {
+        templateApi.characteristicsTemplateDelete(id).then(res => {
+          if (res.code === 0) {
+            this.$message.success(res.message)
+            this.AZkey = this.A_Z()
+            templateApi.characteristicsTemplateList().then(res => {
+              if (res.code === 0) {
+                this.tableData = res.data
+                return true
+              } else {
+                this.$message.error(res.message)
+                return false
+              }
+            })
+            return true
+          } else {
+            this.$message.error(res.message)
+            return false
+          }
+        }).catch(error => {
+          console.log(error)
+          this.$message.error('创建失败')
+          return false
+        })
+      }).catch(_ => {
+        return false
+      })
+    },
+    saveData() {
+      console.log(this.addForm)
+      if (!this.addForm.name) {
+        this.$message.error('特征名称不能为空')
+        return false
+      }
+      this.addForm.context.forEach(element => {
+        if (!element.options_info) {
+          this.$message.error('选项内容是必填的')
+          throw new Error('选项内容是必填的')
+        }
+      })
+
+      templateApi.characteristicsTemplateCreate(this.addForm).then(res => {
+        if (res.code === 0) {
+          this.dialogAddFormVisible = false
+          this.$message.success(res.message)
+          this.AZkey = this.A_Z()
+          templateApi.characteristicsTemplateList().then(res => {
+            if (res.code === 0) {
+              this.tableData = res.data
+              return true
+            } else {
+              this.$message.error(res.message)
+              return false
+            }
+          })
+          return true
+        } else {
+          this.$message.error(res.message)
+          return false
+        }
+      }).catch(error => {
+        console.log(error)
+        this.$message.error('创建失败')
+        return false
+      })
+    }
+  }
+}
 </script>
+<style scoped lang="scss">
+</style>>

src/pages/triggerEditor/list.vue

@@ -43,8 +43,8 @@
                   fixed="right"
                   label="操作">
                   <template slot-scope="scope">
-                    <el-button type="primary" icon="el-icon-edit" circle @click="shoWayEditView(scope.row.id)"></el-button>
-                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteWay(scope.row.id)"></el-button>
+                    <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="shoWayEditView(scope.row.id)"></el-button>
+                    <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteWay(scope.row.id)"></el-button>
                   </template>
                 </el-table-column>
                 </el-table>
@@ -77,8 +77,8 @@
                   fixed="right"
                   label="操作">
                   <template slot-scope="scope">
-                    <el-button type="primary" icon="el-icon-edit" circle @click="shoDateEditView(scope.row.id)"></el-button>
-                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteDate(scope.row.id)"></el-button>
+                    <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="shoDateEditView(scope.row.id)"></el-button>
+                    <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteDate(scope.row.id)"></el-button>
                   </template>
                 </el-table-column>
                 </el-table>