WXL
2024-08-22 0733833340a773ec9ea4d3acee3d37526161bfd9
src/components/Regular/index.vue
@@ -1,166 +1,219 @@
<template>
  <div>
    <div class="topicxq" v-for="item in TargetoptionList">
      <el-row :gutter="10">
        <el-col :span="12"
          ><el-form-item label="选项名">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="item.targetvalue"
              show-word-limit
            >
            </el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="节点ID">
            <el-input
              type="text"
              placeholder="请输入节点"
              v-model="item.targetid"
              show-word-limit
            >
            </el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12"
          ><el-form-item label="处理">
            <el-input
              type="text"
              placeholder="(默认)无声"
              v-model="item.text"
              maxlength="10"
              show-word-limit
            >
            </el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="选中跳转(缺)">
            <el-input
              type="text"
              placeholder="请输入题目节点"
              v-model="item.jump"
              show-word-limit
            >
            </el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-form-item label="关键字(含)" prop="desc">
        <div class="xinz-inf">
          <el-tag
            :key="crux"
            type="success"
            v-for="crux in dynamiccruxs"
            closable
            effect="dark"
            :disable-transitions="false"
            @close="handleClosecrux(crux)"
      <el-form :inline="true" :rules="rules" :model="item">
        <el-row :gutter="10">
          <el-col :span="12"
            ><el-form-item prop="targetvalue" label="选项名称">
              <el-input
                type="text"
                placeholder="请输入(必填项)"
                v-model="item.targetvalue"
                show-word-limit
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="预警提醒">
              <el-radio-group v-model="item.isabnormal">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item></el-col
          >
            {{ crux }}
          </el-tag>
          <el-select
            v-model="inputValue"
            v-if="inputVisible"
            @change="handleInputConfirm"
            filterable
            remote
            allow-create
            reserve-keyword
            default-first-option
            :loading="loading"
            placeholder="请选择"
          >
            <el-option
              v-for="item in regular"
              :key="item.label"
              :label="item.label"
              :value="item.label"
          <!-- <el-col :span="12" v-if="intent"
            ><el-form-item label="选项节点">
              <el-input
                type="text"
                placeholder="请输入节点"
                v-model="item.targetid"
                show-word-limit
              >
              </el-input> </el-form-item
          ></el-col> -->
        </el-row>
        <el-row :gutter="10" v-if="!intent">
          <el-col :span="20"
            ><el-form-item label="选项说明">
              <el-input
                type="text"
                placeholder="请输入"
                v-model="item.optiondesc"
                show-word-limit
              >
              </el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="10" v-if="intent">
          <el-col :span="12"
            ><el-form-item label="处理">
              <el-input
                type="text"
                placeholder="(默认)无声"
                v-model="item.text"
                maxlength="10"
                show-word-limit
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="选中跳转">
              <el-input
                type="text"
                placeholder="请输入题目节点"
                v-model="item.nextQuestion"
                show-word-limit
              >
              </el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item label="关键字(含)" prop="desc" v-if="hasValue">
          <div class="xinz-inf">
            <el-tag
              :key="crux"
              type="success"
              v-for="crux in item.dynamiccruxs"
              closable
              effect="dark"
              :disable-transitions="false"
              @close="handleClosecrux(crux, item, 1)"
            >
            </el-option>
          </el-select>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 新增</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="关键字(非)" prop="desc">
        <div class="xinz-inf">
          <el-tag
            :key="crux"
            type="warning"
            v-for="crux in nodynamiccruxs"
            closable
            effect="dark"
            :disable-transitions="false"
            @close="handleClosecrux(crux)"
          >
            {{ crux }}
          </el-tag>
          <el-select
            v-model="inputValue"
            v-if="noinputVisible"
            @change="handleInputConfirm"
            filterable
            remote
            allow-create
            reserve-keyword
            default-first-option
            :loading="loading"
            placeholder="请选择"
          >
            <el-option
              v-for="item in noregular"
              :key="item.value"
              :label="item.label"
              :value="item.label"
              {{ crux }}
            </el-tag>
            <el-select
              v-model="inputValue"
              v-if="item.inputVisible"
              @change="handleInputConfirm(item)"
              filterable
              remote
              allow-create
              reserve-keyword
              default-first-option
              :loading="loading"
              placeholder="请选择"
            >
            </el-option>
          </el-select>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInputno"
            >+ 新增</el-button
          >
        </div>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="16">
          <el-form-item label="语音文件">
              <el-option
                v-for="items in regular"
                :key="items.label"
                :label="items.label"
                :value="items.label"
              >
              </el-option>
            </el-select>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(item)"
              >+ 新增</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="关键字(非)" prop="adesc" v-if="hasValue">
          <div class="xinz-inf">
            <el-tag
              :key="crux"
              type="warning"
              v-for="crux in item.nodynamiccruxs"
              closable
              effect="dark"
              :disable-transitions="false"
              @close="handleClosecrux(crux, item, 2)"
            >
              {{ crux }}
            </el-tag>
            <el-select
              v-model="inputValue"
              v-if="item.noinputVisible"
              @change="handleInputConfirm(item)"
              filterable
              remote
              allow-create
              reserve-keyword
              default-first-option
              :loading="loading"
              placeholder="请选择"
            >
              <el-option
                v-for="items in noregular"
                :key="items.value"
                :label="items.label"
                :value="items.label"
              >
              </el-option>
            </el-select>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInputno(item)"
              >+ 新增</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="选项文件" prop="sickness" v-if="Verbalproblem">
          <div style="width: 40vw">
            <el-upload
              class="upload-demo"
              style="display: flex"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :file-list="fileList"
              :limit="1"
              :on-exceed="handleExceed"
              :action="uploadImgUrl"
              :headers="headers"
              accept=".jpg,.png,image/*"
              :on-success="handleChange.bind(this, item)"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <div style="text-align: right; padding-right: 10px">
            <el-button type="danger" @click="deloption(item)" round
              >删除</el-button
            >
            <div style="margin: 20px">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.picturePath"
                :preview-src-list="[...item.picturePath]"
              >
              </el-image>
            </div>
          </div>
        </el-col>
      </el-row>
        </el-form-item>
        <el-row :gutter="10">
          <el-col>
            <div style="text-align: right; padding-right: 10px">
              <el-button
                v-if="controlsc || addoption"
                @click="$emit('addoption', item)"
                type="success"
                icon="el-icon-circle-plus-outline"
                circle
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="$emit('deloption', item)"
              ></el-button>
              <el-button
                v-if="controlsc"
                @click="$emit('syioption', item)"
                type="primary"
                icon="el-icon-top"
                circle
              ></el-button>
              <el-button
                v-if="controlsc"
                @click="$emit('xiayioption', item)"
                type="primary"
                icon="el-icon-bottom"
                circle
              ></el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import store from "@/store";
import { getToken } from "@/utils/auth";
export default {
  data() {
@@ -173,6 +226,10 @@
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadSort",
      whether: 1, //1为关键词,2为否定关键词
      inputValue: "",
      inputVisible: false,
@@ -180,8 +237,13 @@
      loading: false,
      regular: [],
      noregular: [],
      nodynamiccruxs: ["别"],
      nodynamiccruxs: ["别", "不"],
      dynamiccruxs: ["好"],
      rules: {
        targetvalue: [
          { required: true, message: "请输入选项名称", trigger: "blur" },
        ],
      },
    };
  },
  props: {
@@ -189,6 +251,26 @@
      type: Array,
      required: true,
      default: () => [],
    },
    controlsc: {
      type: Boolean,
      default: true,
    },
    addoption: {
      type: Boolean,
      default: false,
    },
    intent: {
      type: Boolean,
      default: true,
    },
    hasValue: {
      type: Boolean,
      default: true,
    },
    Verbalproblem: {
      type: Boolean,
      default: true,
    },
  },
@@ -199,27 +281,46 @@
  methods: {
    // 生成正则
    generateRegex() {
    generateRegex(row) {
      let index = this.TargetoptionList.indexOf(row);
      console.log(index);
      let regex = "";
      let regexno = "";
      let hostregex = "";
      let hostregexno = "";
      for (let i = 0; i < this.dynamiccruxs.length; i++) {
        regex += `${this.dynamiccruxs[i]}|`;
      for (
        let i = 0;
        i < this.TargetoptionList[index].dynamiccruxs.length;
        i++
      ) {
        regex += `${this.TargetoptionList[index].dynamiccruxs[i]}|`;
      }
      for (let i = 0; i < this.nodynamiccruxs.length; i++) {
        regexno += `${this.nodynamiccruxs[i]}|`;
      for (
        let i = 0;
        i < this.TargetoptionList[index].nodynamiccruxs.length;
        i++
      ) {
        regexno += `${this.TargetoptionList[index].nodynamiccruxs[i]}|`;
      }
      regex = regex.slice(0, -1);
      regexno = regexno.slice(0, -1);
      hostregex = "^(?!." + `${regexno}` + ")(.(" + `${regex}` + ")+.*)$";
      console.log(hostregex);
      if (regexno) {
        hostregexno = "^(?!.*(?:" + `${regexno}` + ")).*$";
      } else {
        hostregexno = "";
      }
      hostregex = "(?=.*(?:" + `${regex}` + ")).*$";
      this.TargetoptionList[index].targetregex = hostregex;
      this.TargetoptionList[index].targetregex2 = hostregexno;
      console.log(hostregex, "确定字匹配");
      console.log(hostregexno, "否定字匹配");
      this.handleSelectionChange();
    },
    // 控制文件
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // handleChange(file, fileList) {
    //   this.fileList = fileList.slice(-3);
    // },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$message.warning(
@@ -229,47 +330,80 @@
      );
    },
    handleClosecrux(crux) {
      if (this.whether == 1) {
        this.dynamiccruxs.splice(this.dynamiccruxs.indexOf(crux), 1);
    handleClosecrux(crux, item, whether) {
      if (whether == 1) {
        item.dynamiccruxs.splice(item.dynamiccruxs.indexOf(crux), 1);
        console.log(1);
        console.log(item.dynamiccruxs);
        console.log(item.nodynamiccruxs);
      } else {
        this.nodynamiccruxs.splice(this.nodynamiccruxs.indexOf(crux), 1);
        console.log(2);
        item.nodynamiccruxs.splice(item.nodynamiccruxs.indexOf(crux), 1);
      }
      this.generateRegex();
      this.generateRegex(item);
    },
    handleInputConfirm() {
    handleInputConfirm(row) {
      console.log(this.TargetoptionList, "TargetoptionList");
      let index = this.TargetoptionList.indexOf(row);
      console.log(1112);
      if (this.whether == 1 && this.inputValue) {
        if (this.dynamiccruxs.indexOf(this.inputValue) == -1) {
          this.dynamiccruxs.push(this.inputValue);
        if (
          this.TargetoptionList[index].dynamiccruxs.indexOf(this.inputValue) ==
          -1
        ) {
          this.TargetoptionList[index].dynamiccruxs.push(this.inputValue);
        } else {
          this.$message.error("关键字已存在");
        }
        this.inputVisible = false;
        // this.inputVisible = false;
        this.TargetoptionList[index].inputVisible = false;
      } else if (this.whether == 2 && this.inputValue) {
        console.log(this.inputValue);
        console.log(this.nodynamiccruxs.indexOf(this.inputValue));
        if (this.nodynamiccruxs.indexOf(this.inputValue) == -1) {
          this.nodynamiccruxs.push(this.inputValue);
        console.log(
          this.TargetoptionList[index].nodynamiccruxs.indexOf(this.inputValue)
        );
        if (
          this.TargetoptionList[index].nodynamiccruxs.indexOf(
            this.inputValue
          ) == -1
        ) {
          this.TargetoptionList[index].nodynamiccruxs.push(this.inputValue);
        } else {
          this.$message.error("关键字已存在");
        }
        this.noinputVisible = false;
        // this.noinputVisible = false;
        this.TargetoptionList[index].noinputVisible = false;
      }
      this.generateRegex();
      this.generateRegex(row);
      this.inputValue = "";
    },
    showInput() {
      this.inputVisible = true;
    showInput(row) {
      let index = this.TargetoptionList.indexOf(row);
      // this.TargetoptionList[index].inputVisible = true;
      this.$set(this.TargetoptionList[index], "inputVisible", true);
      this.whether = 1;
    },
    showInputno() {
      this.noinputVisible = true;
    showInputno(row) {
      let index = this.TargetoptionList.indexOf(row);
      // this.TargetoptionList[index].noinputVisible = true;
      this.$set(this.TargetoptionList[index], "noinputVisible", true);
      this.whether = 2;
      console.log(2);
    },
    handleSelectionChange(selection) {
      $emit("handleSelectionChange", selection);
      console.log(this.TargetoptionList);
      this.$emit("handleSelectionChange", selection);
    },
    // 选项文件上传
    handleChange(item, response, file, fileList) {
      console.log(response, "response");
      console.log(item, "item");
      console.log(this.TargetoptionList, "this.TargetoptionList");
      let index = this.TargetoptionList.findIndex(
        (obj) => obj.guid == item.guid
      );
      console.log(index);
      this.TargetoptionList[index].picturePath = response.url;
    },
  },
};