From d57fd8a7a23cc82cf420022b7c6267ab58560581 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 6 Jul 2022 11:12:15 +0800
Subject: [PATCH] BUG 30387

---
 .../components/AiEditInput.vue                |  73 +++++++++
 .../AppContentManage/components/List.vue      | 154 ++++++------------
 2 files changed, 124 insertions(+), 103 deletions(-)
 create mode 100644 packages/publicity/AppContentManage/components/AiEditInput.vue

diff --git a/packages/publicity/AppContentManage/components/AiEditInput.vue b/packages/publicity/AppContentManage/components/AiEditInput.vue
new file mode 100644
index 00000000..645f375d
--- /dev/null
+++ b/packages/publicity/AppContentManage/components/AiEditInput.vue
@@ -0,0 +1,73 @@
+<template>
+  <section class="AiEditInput" :class="{[align]:true,error}">
+    <el-input v-if="edit" size="small" v-model="content" @change="handleChange" @blur="cancel" clearable autofocus/>
+    <div class="valueText" v-else v-text="value" @click="edit=true"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiEditInput",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {default: ""},
+    align: {default: ""},
+    error: Boolean
+  },
+  data() {
+    return {
+      edit: false,
+      content: ""
+    }
+  },
+  methods: {
+    cancel() {
+      this.edit = false
+    },
+    handleChange(v) {
+      this.$emit('change', v)
+      this.$emit('update:error', false)
+    }
+  },
+  watch: {
+    edit(v) {
+      v && (this.content = this.$copy(this.value))
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep.AiEditInput {
+  &.error {
+    background: rgba(#f46, .2);
+  }
+
+  input {
+    text-align: center;
+  }
+
+  .valueText {
+    width: 100%;
+    height: 100%;
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.left {
+    input {
+      text-align: left
+    }
+
+    .valueText {
+      justify-content: flex-start;
+    }
+  }
+}
+</style>
diff --git a/packages/publicity/AppContentManage/components/List.vue b/packages/publicity/AppContentManage/components/List.vue
index 456b3bd0..7fd0f34c 100644
--- a/packages/publicity/AppContentManage/components/List.vue
+++ b/packages/publicity/AppContentManage/components/List.vue
@@ -6,7 +6,7 @@
     <template slot="content">
       <ai-search-bar class="search-bar">
         <template #left>
-          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加模块</el-button>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd()">添加模块</el-button>
         </template>
       </ai-search-bar>
       <ai-table
@@ -21,46 +21,25 @@
           <template slot-scope="{ row }">
             <div class="table-options">
               <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
-              <el-button type="text" @click="moduleId = row.id, form.moduleId = row.id, getCateList(),  isShowAdd = true">分类</el-button>
+              <el-button type="text" @click="getCateList(row.id),isShowAdd = true">分类</el-button>
               <el-button type="text" @click="remove(row.id)">删除</el-button>
             </div>
           </template>
         </el-table-column>
       </ai-table>
-      <ai-dialog
-          :visible.sync="isShowAdd"
-          width="880px"
-          height="580px"
-          title="文章分类"
-          @close="onClose"
-          @onConfirm="onConfirm(false)">
-        <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
-          <el-form-item label="分类名称" style="width: 500px;" prop="categoryName" :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
-            <div class="catewrapper">
-              <el-input size="small" style="width: 300px;" placeholder="请输入分类名称" v-model="form.categoryName">
-              </el-input>
-              <el-button style="margin-left: 20px;" size="small" type="primary" icon="iconfont iconAdd" v-if="!id" @click="onConfirm(true)">添加</el-button>
-            </div>
-          </el-form-item>
-        </el-form>
-        <ai-table
-            v-if="!id"
-            class="detail-table__table"
-            :border="true"
-            tableSize="small"
-            :total="cateTotal"
-            :tableData="cateList"
-            :col-configs="cateColConfigs"
-            :current.sync="cateSearch.current"
-            :size.sync="cateSearch.size"
-            :stripe="false"
-            @getList="getCateList">
+      <ai-dialog :visible.sync="isShowAdd" width="880px" height="580px" title="文章分类" @close="onClose" @onConfirm="submitCategory">
+        <el-button icon="iconfont iconAdd" type="text" @click="cateList.push({error:false,categoryName:null})">添加分类</el-button>
+        <ai-table v-if="moduleId" :tableData="cateList" :col-configs="cateColConfigs" :isShowPagination="false" @getList="getCateList">
+          <el-table-column slot="category" label="分类名称" align="center">
+            <template slot-scope="{row}">
+              <ai-edit-input v-model="row.categoryName" :error.sync="row.error"/>
+            </template>
+          </el-table-column>
           <el-table-column slot="options" width="220px" fixed="right" label="操作" align="center">
-            <template slot-scope="{ row }">
-              <div class="table-options">
-                <el-button type="text" @click="id = row.id, form.categoryName = row.categoryName">编辑</el-button>
-                <el-button type="text" @click="removeCate(row.id)">删除</el-button>
-              </div>
+            <template slot-scope="{ row,$index }">
+              <el-button type="text" @click="handleMove(row,$index,-1)" :disabled="$index==0">上移</el-button>
+              <el-button type="text" @click="handleMove(row,$index,1)" :disabled="$index==(cateList.length-1)">下移</el-button>
+              <el-button type="text" @click="removeCate($index)">删除</el-button>
             </template>
           </el-table-column>
         </ai-table>
@@ -70,9 +49,11 @@
 </template>
 
 <script>
+import AiEditInput from "./AiEditInput";
+
 export default {
   name: 'List',
-
+  components: {AiEditInput},
   props: {
     instance: Function,
     dict: Object
@@ -86,10 +67,6 @@ export default {
         title: ''
       },
       moduleId: '',
-      cateSearch: {
-        current: 1,
-        size: 10
-      },
       total: 10,
       cateList: [],
       colConfigs: [
@@ -100,17 +77,10 @@ export default {
         {prop: 'isComment', label: '是否可以评论', align: 'center', dict: 'yesOrNo'}
       ],
       cateColConfigs: [
-        {prop: 'showIndex', label: '排序', align: 'center', width: 80},
-        {prop: 'categoryName', label: '分类名称', align: 'center'}
+        {type: 'index', label: "排序", align: 'center'},
+        {slot: 'category'}
       ],
-      form: {
-        categoryName: '',
-        moduleId: '',
-        showIndex: 1
-      },
-      cateTotal: 0,
       isShowAdd: false,
-      id: '',
       tableData: []
     }
   },
@@ -132,33 +102,26 @@ export default {
         }
       })
     },
-
-    getCateList() {
+    getCateList(moduleId) {
+      this.moduleId = moduleId
       this.instance.post(`/app/appcontentmodulecategory/list`, null, {
-        params: {
-          ...this.cateSearch,
-          moduleId: this.moduleId
-        }
+        params: {size: 99999, moduleId}
       }).then(res => {
-        if (res.code == 0) {
-          this.cateList = res.data.records
-          this.cateTotal = res.data.total
+        if (res?.data) {
+          this.cateList = res.data.records.map(e => ({...e, error: false}))
         }
       })
     },
-
-    removeCate(id) {
+    removeCate(i) {
       this.$confirm('确定删除该数据？').then(() => {
-        this.instance.post(`/app/appcontentmodulecategory/delete?ids=${id}`).then(res => {
-          if (res.code == 0) {
-            this.$message.success('删除成功！')
-            this.getList()
-            this.getCateList()
-          }
-        })
+        this.cateList.splice(i, 1)
       })
     },
-
+    handleMove(row, i, forward) {
+      const tmp = this.$copy(row), target = i + forward
+      this.cateList.splice(i, 1, this.cateList[target])
+      this.cateList.splice(target, 1, tmp)
+    },
     remove(id) {
       this.$confirm('确定删除该数据？').then(() => {
         this.instance.post(`/app/appcontentmoduleinfo/delete?ids=${id}`).then(res => {
@@ -169,50 +132,35 @@ export default {
         })
       })
     },
-
-    onConfirm(flag) {
-      if (!flag && !this.id) {
-        this.isShowAdd = false
-
-        return false
-      }
-
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.instance.post(`/app/appcontentmodulecategory/addOrUpdate`, {
-            ...this.form,
-            id: this.id || ''
-          }).then(res => {
-            if (res.code == 0) {
-              this.$message.success('提交成功')
-              this.getList()
-              this.getCateList()
-              this.form.categoryName = ''
-
-              if (this.id) {
-                this.id = ''
-
-                return false
-              }
-            }
-          })
+    submitCategory() {
+      if (!this.cateList.some((e, i, arr) => {
+        arr[i].error = !e.categoryName
+        if (!e.categoryName) {
+          this.$message.error(`第${i + 1}行未填写分类名称!`)
+          return true
         }
-      })
+      })) {
+        const {cateList: categorys, moduleId} = this
+        this.instance.post(`/app/appcontentmodulecategory/addOrUpdate2`, {
+          categorys, moduleId
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success('提交成功')
+            this.isShowAdd = false
+            this.getList()
+          }
+        })
+      }
     },
-
     onClose() {
-      this.id = ''
       this.moduleId = ''
-      this.form.categoryName = ''
-      this.form.moduleId = ''
+      this.cateList = []
     },
 
     toAdd(id) {
       this.$emit('change', {
         type: 'Add',
-        params: {
-          id: id || ''
-        }
+        params: {id}
       })
     }
   }