admin-draw-lots/src/components/CharacterResult/edit.vue

<template>
  <div style="padding: 20px">
    实例详情
    <h2 style="text-align: center">
      特征实例{{ this.resultId ? "编辑" : "添加" }}
    </h2>
    <el-form ref="form" :model="form" label-width="150px" size="mini">
      <el-form-item label="实例名称：">
        <el-input
          v-model="form.name"
          placeholder="请输入实例名（必填）"
        ></el-input>
      </el-form-item>
      <el-form-item label="特征库图标：">
        <UploadImage />
      </el-form-item>
      <el-form-item label="实例描述：">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>

      <el-form-item label="特征词：">
        <el-select
          v-model="nowList"
          multiple
          filterable
          default-first-option
          placeholder="请选择"
        >
          <el-option
            v-for="item in wordList"
            :key="item.wordId"
            :label="item.word"
            :value="item.wordId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  saveCharacterResult,
  UpdateCharacterResult,
  getCharacterResultDetail,
} from "@/api/characterLib";
import UploadImage from "@/components/UploadImage/index.vue";
export default {
  props: {
    libId: String,
    resultId: String,
    wordList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      form: {
        name: undefined,
        thumb: undefined,
        desc: undefined,
        libId: undefined,
        wordList: [],
      },
      nowList: [],
    };
  },
  watch: {
    resultId: function () {
      if (this.resultId) {
        this.nowList = [];
        getCharacterResultDetail(this.resultId).then((res) => {
          this.form = res.data;
          let list = res.data.wordList;
          list.map((item) => {
            this.nowList.push(item.wordId);
          });
        });
      } else {
        this.form = {
          name: undefined,
          thumb: undefined,
          desc: undefined,
          libId: undefined,
          wordList: [],
        };
        this.nowList = [];
      }
    },
  },
  methods: {
    onSubmit() {
      this.form.wordList = this.wordList.filter((item) =>
        this.nowList.some((v) => v == item.wordId)
      );
      this.form.libId = this.libId;
      if (this.form.name) {
        if (this.resultId) {
          UpdateCharacterResult(this.form, this.resultId).then((res) => {
            this.$message("修改实例成功");
            //告诉父页面实例表需要刷新并且关闭当前组件
            this.$emit("handleRefresh", true);
          });
        } else {
          saveCharacterResult(this.form).then((res) => {
            this.$message("添加实例成功");
            //告诉父页面实例表需要刷新并且关闭当前组件
            this.$emit("handleRefresh", true);
          });
        }
      } else {
        this.$message("请输入实例名");
      }
    },
  },
  components: {
    UploadImage,
  },
};
</script>
<style>
</style>