游戏里的特征写好了

src/components/GameCharacter/edit.vue

@@ -1,7 +1,105 @@
 <template>
-  <div>特征编辑</div>
+  <div style="padding: 20px">
+    <h2 style="text-align: center">
+      特征实例{{ characterId ? "编辑" : "添加" }}
+    </h2>
+    <el-form ref="form" :model="form" label-width="150px" size="mini">
+      <el-form-item label="实例名称：">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入实例名（必填）"
+        />
+      </el-form-item>
+      <el-form-item label="实例图片：">
+        <UploadImage :icon="form.thumb" @handleChange="handleChange" @handleDeleteIcon="handleDeleteIcon" />
+      </el-form-item>
+      <el-form-item label="实例描述：">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+        <el-button @click="$router.go(-1)">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
+import { getGameCharacterDetail, UpdateGameCharacter, saveGameCharacter } from '@/api/gameCharacter'
+import UploadImage from '@/components/UploadImage/index.vue'
+export default {
+  components: {
+    UploadImage
+  },
+  props: {
+    gameId: String,
+    characterId: String
+  },
+  data() {
+    return {
+      form: {
+        gameId: undefined,
+        name: undefined,
+        thumb: undefined,
+        desc: undefined,
+        characterId: undefined
+      }
+    }
+  },
+  watch: {
+    characterId: function() {
+      if (this.characterId) {
+        getGameCharacterDetail(this.characterId).then((res) => {
+          this.form = res.data
+        })
+      } else {
+        this.form = {
+          name: undefined,
+          thumb: undefined,
+          desc: undefined,
+          characterId: undefined
+        }
+      }
+    },
+    gameId: function() {
+      console.log(this.gameId)
+      if (this.gameId) {
+        this.form.gameId = this.gameId
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.form.characterId = this.characterId
+      if (this.form.name) {
+        if (this.characterId) {
+          if (!this.form.thumb) {
+            this.form.thumb = ''
+          }
+          UpdateGameCharacter(this.form, this.characterId).then((res) => {
+            this.$message('修改实例成功')
+            // 告诉父页面实例表需要刷新
+            this.$emit('handleRefreshGameCharacter', true)
+          })
+        } else {
+          saveGameCharacter(this.form).then((res) => {
+            this.$message('添加实例成功')
+            // 告诉父页面实例表需要刷新
+            this.$emit('handleRefreshGameCharacter', true)
+            this.$emit('handleEditGameCharacter', res.data.characterId)
+          })
+        }
+      } else {
+        this.$message('请输入实例名')
+      }
+    },
+    handleChange(val) {
+      this.form.thumb = val
+    },
+    handleDeleteIcon() {
+      this.form.thumb = ''
+    }
+  }
+}
 </script>
 <style>
 </style>

src/components/GameCharacter/index.vue

@@ -1,33 +1,11 @@
 <template>
   <div class="body" style="font-size:14px">
-    <el-card class="box-card">
-      实例名称：<el-input
-        v-model="name"
-        size="mini"
-        style="width: 200px; margin-right: 20px"
-      />
-      创建时间：
-      <el-date-picker
-        v-model="daterange"
-        size="mini"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        value-format="yyyy-MM-dd"
-        style="margin-right: 20px"
-        @change="dateChange"
-      />
-
-      <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
-      <el-button size="mini" @click="onReset">重置</el-button>
-      <el-button type="primary" size="mini" @click="handleAdd">添加特征库</el-button>
-    </el-card>
+    <el-button type="primary" size="mini" style="float: right; margin-bottom: 20px;" @click="handleAdd">添加特征</el-button>
     <el-table stripe :data="tableData" border style="width: 100%">
       <el-table-column prop="name" label="实例名称" />
       <el-table-column prop="thumb" label="实例图片">
         <template slot-scope="scope">
-          <el-image :src="scope.row.icon" style="width: 100px; height: 100px" />
+          <el-image :src="scope.row.thumb" style="width: 100px; height: 100px" />
         </template>
       </el-table-column>
       <el-table-column prop="createDate" label="创建时间">
@@ -67,42 +45,36 @@ export default {
       startDate: undefined
     }
   },
-  mounted() {
-    this.onSearch()
+  watch: {
+    gameId() {
+      if (this.gameId) {
+        this.onSearch()
+      }
+    }
   },
   methods: {
     handleAdd() {
-      this.$emit('handleAddGameCharcter', true)
+      this.$emit('handleAddGameCharacter', true)
     },
     handleEdit(row) {
-      this.$emit('handleEditGameCharcter', row.characterId)
+      this.$emit('handleEditGameCharacter', row.characterId)
     },
     handleDelete(row) {
       deleteGameCharacter(row.characterId).then(() => {
         // 让父组件给右边编辑特征页面一个空的characterId
         // 防止当前特征正在编辑时删除了右边再次进行保存会报错
         this.$message('删除特征成功')
-        this.$emit('handleCloseGameCharcter', true)
+        this.$emit('handleCloseGameCharacter', true)
         this.onSearch()
       })
     },
     onSearch() {
       getGameCharacterList({
-        gameId: this.gameId,
-        name: this.name,
-        startDate: this.startDate,
-        endDate: this.endDate
+        gameId: this.gameId
       }).then((res) => {
         this.tableData = res.data.records
       })
     },
-    onReset() {
-      this.name = ''
-      this.daterange = ''
-      this.startDate = ''
-      this.endDate = ''
-      this.onSearch()
-    },
     dateChange(val) {
       this.startDate = this.daterange[0]
       this.endDate = this.daterange[1]

src/views/gameManage/edit.vue

@@ -40,14 +40,15 @@
         <el-row :gutter="20" style="padding-top: 20px">
           <el-col :span="13">
             <GameCharacter
+              ref="GameCharacter"
               :gameId='gameId'
-              @handleAddGameCharcter='characterId = undefined'
-              @handleCloseGameCharcter='characterId = undefined'
-              @handleEditGameCharcter='handleEditGameCharcter'
+              @handleAddGameCharacter='characterId = undefined'
+              @handleCloseGameCharacter='characterId = undefined'
+              @handleEditGameCharacter='handleEditGameCharacter'
             />
           </el-col>
           <el-col :span="11">
-            <GameCharacterEdit :characterId='characterId'/>
+            <GameCharacterEdit :characterId='characterId' :gameId='gameId' @handleRefreshGameCharacter='handleRefreshGameCharacter' @handleEditGameCharacter='handleEditGameCharacter' />
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -152,9 +153,12 @@ export default {
 
     // 特征页面方法
     // 改变编辑特征页面的初始值
-    handleEditGameCharcter(val) {
+    handleEditGameCharacter(val) {
       this.characterId = val
     },
+    handleRefreshGameCharacter() {
+      this.$refs.GameCharacter.onSearch()
+    },
 
     handleEdit(val) {
       this.questionId = val
@@ -163,7 +167,7 @@ export default {
       this.questionId = undefined
     },
     handleRefresh() {
-      this.$refs.questionList.onSearch()
+      this.$refs.GameCharacter.onSearch()
     }
   }
 }