Anti-fraud-manage/src/views/exerciseManage/question/components/addAndEdit.vue

<template>
  <div v-loading="loading">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      :disabled="dlgType === 3"
    >
      <el-form-item label="问题分类" prop="categoryId">
        <SelectRemote
          url="/question/category/list"
          field="name"
          v-model="form.categoryId"
          :selectObj="selectObj"
          :searchParams="searchParams"
        />
      </el-form-item>
      <el-form-item label="问题类型" prop="type">
        <el-radio-group v-model="form.type" @input="changeType">
          <el-radio label="1">单选</el-radio>
          <el-radio label="2">多选</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="问题描述" prop="descripiton">
        <el-input
          type="textarea"
          :rows="4"
          v-model="form.descripiton"
          placeholder="请输入问题描述"
        />
      </el-form-item>
      <el-form-item label="选项列表" prop="itemList">
        <el-button
          type="primary"
          @click="addOption"
          style="margin-bottom: 6px"
          v-if="dlgType !== 3"
          >添加选项</el-button
        >
        <el-table :data="form.itemList" style="width: 100%">
          <el-table-column prop="code" label="选项" width="80" align="center" />
          <el-table-column prop="optVal" label="值" align="center" />
          <el-table-column
            label="操作"
            width="120"
            align="center"
            v-if="dlgType !== 3"
          >
            <template #default="{ row }">
              <el-button type="text" size="small" @click="editOption(row)"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="deleteOption(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="正确选项" prop="correctItem">
        <!--  value-key="code" -->
        <el-select
          ref="selectRef"
          :multiple="form.type === '2'"
          v-model="form.correctItem"
          placeholder="请选择正确选项"
          style="width: 100%"
        >
          <!-- :label="`${item.code} - ${item.value}`" -->
          <el-option
            v-for="item in form.itemList"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题解析" prop="analysis">
        <el-input
          type="textarea"
          :rows="4"
          v-model="form.analysis"
          placeholder="请输入问题解析"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          :rows="4"
          v-model="form.remark"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: right" v-if="dlgType !== 3">
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
    <div style="text-align: right" v-else>
      <el-button @click="handleCancel">关 闭</el-button>
    </div>
    <!-- 新增/编辑选项框 -->
    <el-dialog
      :title="dlgTitle"
      :visible.sync="optionVisible"
      width="30%"
      append-to-body
    >
      <el-form
        ref="optionForm"
        :model="optionForm"
        :rules="optionRules"
        label-width="80px"
      >
        <el-form-item label="选项">
          <el-input v-model="optionForm.code" disabled />
        </el-form-item>
        <el-form-item label="值" prop="optVal">
          <el-input
            type="textarea"
            :rows="4"
            v-model="optionForm.optVal"
            placeholder="请输入选项值"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmOption">确 定</el-button>
        <el-button @click="optionVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SelectRemote from "@/components/SelectRemote";
export default {
  components: { SelectRemote },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
    dlgType: {
      // 弹窗类型  1 - 新增   2 - 修改   3 - 查看
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      // 选中的问题分类
      selectObj: {},
      // 远程搜索框的查询条件
      searchParams: {},
      // 选项弹窗相关参数
      dlgTitle: "",
      optionVisible: false,
      optionForm: {},
      optionRules: {
        optVal: [
          { required: true, trigger: "blur", message: "选项值不能为空" },
        ],
      },
      form: {
        categoryId: "",
        type: "1",
        descripiton: "",
        itemList: [],
        correctItem: "",
        analysis: "",
        remark: "",
      },
      rules: {
        categoryId: [
          { required: true, trigger: "change", message: "请选择问题分类" },
        ],
        descripiton: [
          { required: true, trigger: "blur", message: "请输入问题描述" },
        ],
        itemList: [{ required: true, trigger: "blur", message: "请添加选项" }],
        correctItem: [
          { required: true, trigger: "change", message: "请选择正确选项" },
        ],
        analysis: [
          { required: true, trigger: "blur", message: "请输入问题解析" },
        ],
      },
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.form = {
            id: newVal.id || "",
            categoryId: newVal.categoryId || "",
            type: newVal.type || "1",
            descripiton: newVal.descripiton || "",
            itemList: newVal.itemList ? JSON.parse(newVal.itemList) : [],
            correctItem: newVal.correctItem
              ? newVal.type === "1"
                ? newVal.correctItem
                : newVal.correctItem.split(",")
              : "",
            analysis: newVal.analysis || "",
            remark: newVal.remark || "",
          };
          this.selectObj = {
            id: newVal.categoryId || "",
            selectLabel: newVal.categoryName || "",
          };
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate();
          });
        }
      },
    },
  },
  methods: {
    // 切换单选多选
    changeType(val) {
      console.log(this.form.correctItem);
      // console.log(val, this.form.correctItem, this.$refs.selectRef);
      if (val === "2") {
        this.form.correctItem = [];
        this.$refs.selectRef.selectedLabel = "";
      } else {
        this.form.correctItem = undefined;
      }
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
    },
    // 确认添加选项
    confirmOption() {
      this.$refs.optionForm.validate((valid) => {
        if (valid) {
          if (this.dlgTitle === "编辑选项") {
            let targetIndex = this.form.itemList.findIndex(
              (item) => item.code === this.optionForm.code
            );
            this.$set(this.form.itemList, targetIndex, this.optionForm);
          } else {
            this.form.itemList.push(this.optionForm);
          }
          this.optionVisible = false;
        }
      });
    },
    // 删除选项(需要更新一下code值)
    deleteOption(row) {
      console.log("删除的当前行数据", row);
      let targetIndex = this.form.itemList.findIndex(
        (item) => item.code === row.code
      );
      // 先判断一下删除的选项是否被选中为正确选项
      // 是的话 需要确认是否删除
      if (this.form.correctItem.includes(row.code)) {
        this.$modal
          .confirm("当前选项已被选中为正确选项，是否确认删除？")
          .then(() => {
            this.form.itemList.splice(targetIndex, 1);
            // 清除正确选项
            this.form.correctItem = this.form.type === "1" ? "" : [];
            // 更新选项列表的code
            this.form.itemList.forEach((item, index) => {
              item.code = String.fromCharCode(index + 65);
            });
          })
          .catch(() => {});
      } else {
        this.form.itemList.splice(targetIndex, 1);
        // 更新选项列表的code
        this.form.itemList.forEach((item, index) => {
          item.code = String.fromCharCode(index + 65);
        });
      }
    },
    // 编辑选项
    editOption(row) {
      console.log("编辑的当前行数据", row);
      this.dlgTitle = "编辑选项";
      this.optionVisible = true;
      this.optionForm = { ...row };
    },
    // 添加选项
    addOption() {
      // 首先拿到选项列表的最后一项的code,然后根据这个code生成下一项的code
      // 也可以拿到选项列表的长度，根据长度判断下一个的code, A ----  65
      let index = this.form.itemList.length;
      let nextCode = String.fromCharCode(index + 65);
      console.log("下一项的code", nextCode);
      this.dlgTitle = "新增选项";
      this.optionVisible = true;
      this.optionForm = { code: nextCode, optVal: "" };
      // 清除一下校验
      this.$refs.optionForm && this.$refs.optionForm.clearValidate();
    },
    // 确定
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = {
            ...this.form,
            itemList: JSON.stringify(this.form.itemList),
            correctItem:
              this.form.type === "1"
                ? this.form.correctItem
                : this.sortEn(this.form.correctItem).join(","),
          };
          console.log(obj);
          this.$emit("confirm", obj);
        }
      });
    },
    // 数组的值按照英文字母排序
    sortEn(arr) {
      arr.sort(function (a, b) {
        return a.charCodeAt(0).toString(16) - b.charCodeAt(0).toString(16);
      });
      return arr;
    },
    // 取消
    handleCancel() {
      this.form = {
        categoryId: "",
        type: "1",
        descripiton: "",
        itemList: [],
        correctItem: "",
        analysis: "",
        remark: "",
      };
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped></style>