内容管理-06282055

src/components/editTags/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <el-tag
+      :key="tag"
+      v-for="tag in dynamicTags"
+      closable
+      :disable-transitions="false"
+      @close="handleClose(tag)">
+      {{tag}}
+    </el-tag>
+    <el-input
+      class="input-new-tag"
+      v-if="inputVisible"
+      v-model="inputValue"
+      ref="saveTagInput"
+      size="small"
+      @keyup.enter.native="handleInputConfirm"
+      @blur="handleInputConfirm"
+    >
+    </el-input>
+    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'editTags',
+    model: {
+      prop: 'dynamicTags',
+      event: 'change'
+    },
+    props: {
+      // 值
+      value: String,
+      // 是否禁用
+      disabled: Boolean
+    },
+    data() {
+      return {
+        // dynamicTags: ['标签一', '标签二', '标签三'],
+        inputVisible: false,
+        inputValue: ''
+      };
+    },
+    computed: {
+      dynamicTags() {
+        console.log(this.value)
+        if (this.value === '' || this.value === undefined) {
+          return []
+        } else {
+          if (this.value.indexOf(',') !== -1) {
+            return [this.value]
+          } else {
+            return this.value.split(',')
+          }
+        }
+      }
+    },
+    methods: {
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(() => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+        // this.value = this.dynamicTags.join(',')
+        this.$emit('change', this.dynamicTags.join(','));
+      }
+    }
+  }
+</script>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>

src/views/content/content-edit.vue

@@ -10,6 +10,7 @@
 <script>
 import formCreate from '@form-create/element-ui'
 import TinymceEditor from '@/components/TinymceEditor';
+import editTags from '@/components/editTags';
 
   export default {
     name: 'ContentEdit',
@@ -91,12 +92,25 @@ import TinymceEditor from '@/components/TinymceEditor';
     },
     created() {
       formCreate.component('editor', TinymceEditor);
+      formCreate.component('tags', editTags);
     },
     mounted() {
       console.log('表单已加载')
       const _em = this
       this.dig_option.onSubmit = (formData) => {
-        alert(JSON.stringify(formData))
+        if (formData.image && typeof formData.image !== 'string' && formData.image.length > 0) {
+          formData.image = formData.image.join(',')
+        }
+        if (formData.images && typeof formData.images !== 'string' && formData.images.length > 0) {
+          formData.images = formData.images.join(',')
+        }
+        if (formData.download && typeof formData.download !== 'string' && formData.download.length > 0) {
+          formData.download = formData.download.join(',')
+        }
+        if (formData.tags && typeof formData.tags !== 'string' && formData.tags.length > 0) {
+          formData.tags = formData.tags.join(',')
+        }
+        // alert(JSON.stringify(formData))
         _em.save(formData)
       }
     },
@@ -113,9 +127,15 @@ import TinymceEditor from '@/components/TinymceEditor';
         // this.$refs['form'].validate((valid) => {
         //   if (valid) {
             this.loading = true;
-            this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', formData).then(res => {
+            console.log(this.isUpdate)
+            let url = '/content/add'
+            if (this.isUpdate) {
+              url = '/content/edit'
+              formData.id = this.edit_data.id
+            }
+            this.$http.post(url, formData).then(res => {
               this.loading = false;
-              if (res.data.code === 0) {
+              if (res.data.code === 200) {
                 this.$message({
                   type: 'success',
                   message: res.data.msg

src/views/content/create_form.js

@@ -30,6 +30,9 @@ export function getForm(valNew) {
     if (e.type === 'editor') {
       eItem.type = 'editor'
     }
+    if (e.type === 'tag') {
+      eItem.type = 'tags'
+    }
     if (e.type === 'radio') {
       eItem.type = 'switch'
       eItem.props = {
@@ -86,9 +89,6 @@ export function getForm(valNew) {
         }
       }
     }
-    if (e.type === 'tag') {
-      eItem.type = 'input'
-    }
     if (e.type === 'cascader') {
       eItem.type = 'cascader'
       eItem.props = {