From e26bba4e24a8d2d8b4c6a2bff8278a36d233e4ec Mon Sep 17 00:00:00 2001
From: FE_Daizhen <934621328@qq.com>
Date: Tue, 28 Jun 2022 20:55:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=85=E5=AE=B9=E7=AE=A1=E7=90=86-06282055?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editTags/index.vue  | 101 +++++++++++++++++++++++++++++++++++++
 src/views/content/content-edit.vue |  26 ++++++++--
 src/views/content/create_form.js   |   6 +--
 3 files changed, 127 insertions(+), 6 deletions(-)
 create mode 100644 src/components/editTags/index.vue

diff --git a/src/components/editTags/index.vue b/src/components/editTags/index.vue
new file mode 100644
index 0000000..972e67e
--- /dev/null
+++ b/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>
diff --git a/src/views/content/content-edit.vue b/src/views/content/content-edit.vue
index 521e6a1..b1c8eb2 100644
--- a/src/views/content/content-edit.vue
+++ b/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
diff --git a/src/views/content/create_form.js b/src/views/content/create_form.js
index 40b6fd9..e4ba9d5 100644
--- a/src/views/content/create_form.js
+++ b/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 = {