WXL
2024-07-16 cc73ea5320fed8a39e00bfc0fa02810199559122
src/views/repositoryai/general/particulars/index.vue
@@ -1,113 +1,123 @@
<template>
  <div>
    <el-card style="margin: 20px" class="box-card">
      <div class="elcardiv">
        <div class="leftvlue-jbxx">话术列表</div>
        <el-divider></el-divider>
        <el-table :data="targetList" :row-class-name="tableRowClassName">
          <el-table-column
            label="序号"
            align="center"
            key="id"
            prop="id"
          />
          <el-table-column
            label="问题主题(缺)"
            align="center"
            key="extName"
            prop="extName"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="问题文本"
            align="center"
            key="switchText"
            width="250"
            prop="switchText"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="回复语音(缺)"
            align="center"
            key="switchTexty"
            width="200"
            prop="switchTexty"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="适用方式(缺)"
            align="center"
            key="suitWay"
            prop="suitWay"
          >
            <template slot-scope="scope">
              <span v-for="item in scope.row.suitWay">{{ item }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="语言(缺)"
            align="center"
            key="language"
            prop="language"
            width="120"
          />
          <el-table-column
            label="是否可用(改)"
            align="center"
            key="isEnable"
            prop="isEnable"
          >
            <template slot-scope="scope">
              <dict-tag :options="usable" :value="scope.row.isEnable" />
            </template>
          </el-table-column>
          <el-table-column
            label="最近修改"
            align="center"
            key="updateTime"
            width="250"
            prop="updateTime"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="200"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="text"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:user:edit']"
                ><span class="button-textxg"
                  ><i class="el-icon-edit"></i>修改</span
                ></el-button
              >
              <el-button
                size="medium"
                type="text"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:user:remove']"
                ><span class="button-textsc"
                  ><i class="el-icon-delete"></i>删除</span
                ></el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 15px; margin-top: 50px">
          <div class="leftvlue-jbxx">话术编辑</div>
      <el-form
        :model="baseForm"
        :rules="bases"
        ref="baseForm"
        label-width="100px"
        class="demo-baseForm"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="模版名称" prop="extName">
              <el-input
                v-model="baseForm.extName"
                placeholder="请输入"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="模版分类" prop="groupID">
              <el-select v-model="baseForm.groupID" placeholder="请选择分类">
                <el-option
                  v-for="item in deptOptions"
                  :key="item.intertcatid"
                  :label="item.categoryname"
                  :value="item.intertcatid"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="模版概述" prop="name">
              <el-input
                v-model="baseForm.note"
                placeholder="请输入"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="是否可用" prop="resource">
              <el-select v-model="baseForm.isEnable" placeholder="请选择状态">
                <el-option
                  v-for="item in usable"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <div style="display: flex">
        <div class="elcardiv">
          <div class="leftvlue-jbxx">话术列表</div>
          <el-divider></el-divider>
          <el-table :data="targetList" :row-class-name="tableRowClassName">
            <el-table-column label="序号" align="center" key="id" prop="id" />
            <el-table-column
              label="问题文本"
              align="center"
              key="switchText"
              width="250"
              prop="switchText"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="是否可用"
              align="center"
              key="isEnable"
              prop="isEnable"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.isEnable == 1 ? "停用" : "启用" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="最近修改"
              align="center"
              key="updateTime"
              width="250"
              prop="updateTime"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="text"
                  @click="handleUpdate(scope.row, scope.$index)"
                  ><span class="button-textxg"
                    ><i class="el-icon-edit"></i>修改</span
                  ></el-button
                >
                <el-button
                  size="medium"
                  type="text"
                  @click="handleDelete(scope.row)"
                  ><span class="button-textsc"
                    ><i class="el-icon-delete"></i>删除</span
                  ></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="elcardiv">
          <el-form
            :model="ruleForm"
            :rules="rules"
@@ -115,81 +125,161 @@
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="问题主题" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入"></el-input> </el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item label="是否可用" prop="resource">
          <div class="leftvlue-jbxx">话术编辑</div>
          <el-divider></el-divider>
            <div style="margin: 15px; margin-top: 50px">
              <el-form-item label="话术文本" prop="name">
                <el-input
                  v-model="ruleForm.switchText"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="是否启用" prop="resource">
                    <el-select v-model="ruleForm.isEnable" placeholder="请选择">
                      <el-option
                        v-for="item in usable"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="12">
                  <el-form-item label="是否为结束语" prop="resource">
                    <el-select v-model="ruleForm.isEnd" placeholder="请选择">
                      <el-option
                        v-for="item in usablend"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select> </el-form-item
                ></el-col>
              </el-row>
              <el-form-item label="问题语音" prop="verbaltrickyy">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-change="handleChange"
                  :file-list="fileList"
                  :limit="1"
                  :on-exceed="handleExceed"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <!-- <el-input v-model="indexform.userName" maxlength="30" /> -->
              </el-form-item>
              <el-form-item label="关键字(含)" prop="desc">
                <div class="xinz-inf">
                  <el-tag
                    :key="crux"
                    type="success"
                    v-for="crux in ruleForm.dynamiccruxs"
                    closable
                    effect="dark"
                    :disable-transitions="false"
                    @close="handleClosecrux(crux, ruleForm, 1)"
                  >
                    {{ crux }}
                  </el-tag>
                  <el-select
                    v-model="ruleForm.assortid"
                    placeholder="请选择状态"
                    v-model="inputValue"
                    v-if="inputVisible"
                    @change="handleInputConfirm(ruleForm)"
                    filterable
                    remote
                    allow-create
                    reserve-keyword
                    default-first-option
                    :loading="loading"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in usable"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
            </el-row>
            <el-form-item label="问题文本" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="语言" prop="resource">
                  <el-select v-model="ruleForm.language" placeholder="请选择">
                    <el-option
                      v-for="item in languagelist"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                      v-for="ruleForms in regular"
                      :key="ruleForms.label"
                      :label="ruleForms.label"
                      :value="ruleForms.label"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="适用方式" prop="resource">
                  <el-select v-model="ruleForm.mode" placeholder="请选择">
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(ruleForm)"
                    >+ 新增</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 ruleForm.nodynamiccruxs"
                    closable
                    effect="dark"
                    :disable-transitions="false"
                    @close="handleClosecrux(crux, ruleForm, 2)"
                  >
                    {{ crux }}
                  </el-tag>
                  <el-select
                    v-model="inputValue"
                    v-if="noinputVisible"
                    @change="handleInputConfirm(ruleForm)"
                    filterable
                    remote
                    allow-create
                    reserve-keyword
                    default-first-option
                    :loading="loading"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in mode"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      v-for="ruleForms in noregular"
                      :key="ruleForms.value"
                      :label="ruleForms.label"
                      :value="ruleForms.label"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
            </el-row>
            <el-form-item label="问题语音" prop="verbaltrickyy">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleChange"
                :file-list="fileList"
                :limit="1"
                :on-exceed="handleExceed"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <!-- <el-input v-model="indexform.userName" maxlength="30" /> -->
            </el-form-item>
            <el-form-item label="匹配文本" prop="desc">
              <el-input type="textarea" placeholder="请输入匹配正则" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
                  </el-select>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInputno(ruleForm)"
                    >+ 新增</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >保存模版</el-button
                >
                <el-button
                  v-if="ruleForm.id"
                  type="primary"
                  plain
                  @click="modification('edit')"
                  >保存话术</el-button
                >
                <el-button
                  v-else
                  type="success"
                  plain
                  @click="modification('add')"
                  >新增话术</el-button
                >
                <el-button @click="resetForm('ruleForm')">关闭</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
@@ -203,6 +293,10 @@
  editgeneravaluel,
  addgeneravaluel,
  getgeneravaluelinfo,
  addgeneral,
  editgeneral,
  getgeneralinfo,
  getgeneralclassify,
  delgeneravaluelinfo,
  getgeneravaluellist,
} from "@/api/AiCentre/index";
@@ -212,55 +306,164 @@
      loading: false,
      id: null,
      usable: [],
      index: "",
      languagelist: [],
      deptOptions: [],
      mode: [],
      pitchon: "还好吗",
      targetList: [{ switchText: "还好吗" }, { switchText: "还不错" }],
      pitchon: "",
      targetList: [],
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      usablend: [
        {
          value: 0,
          label: "非结束语",
        },
        {
          value: 1,
          label: "结束语",
        },
      ],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "*(人|打|班啊|唔系真人(边|咽|咩)*(单位|地方医院|中心|卫生|议员|服务)",
        dynamiccruxs: [],
        nodynamiccruxs: [],
      },
      baseForm: {
        extName: "",
      },
      rules: {},
      bases: {},
      whether: 1, //1为关键词,2为否定关键词
      inputValue: "",
      inputVisible: false,
      noinputVisible: false,
      loading: false,
      regular: [],
      noregular: [],
      nodynamiccruxs: ["别", "不"],
      dynamiccruxs: ["好"],
    };
  },
  created() {
    // this.getList();
    this.usable = store.getters.usable;
    this.id = this.$route.query.id;
    this.getList();
    this.usable = store.getters.usablesz;
    this.languagelist = store.getters.languagelist;
    this.mode = store.getters.mode;
    this.regular = store.getters.regular;
    this.noregular = store.getters.noregular;
  },
  methods: {
    getList() {
      this.loading = true;
      this.id = this.$route.query.id;
      getgeneravaluelinfo({ pid: this.id }).then((res) => {
        this.targetList = res.rows;
        console.log(this.targetList);
        this.loading = false;
      if (this.id) {
        this.$modal.loading("请稍候...");
        getgeneralinfo(this.id).then((res) => {
          if (res.code == 200) {
            this.baseForm = res.data;
          }
          this.$modal.closeLoading();
        });
        getgeneravaluellist({ extID: this.id }).then((res) => {
          if (res.code == 200) {
            this.targetList = res.rows;
          }
          this.$modal.closeLoading();
        });
      }
      getgeneralclassify({}).then((res) => {
        this.deptOptions = res.rows;
        console.log(res);
      });
    },
    /** 新增按钮操作 */
    handleAdd() {},
    /** 修改按钮操作 */
    handleUpdate(row) {
    handleUpdate(row, index) {
      this.pitchon = row.switchText;
      this.ruleForm = row;
      this.index = index;
    },
    submitForm() {},
    resetForm() {},
    // 删除
    handleDelete(item) {
      this.$modal
        .confirm("是否确认删除该话术项?")
        .then((res) => {
          if (item.id) {
            delgeneravaluelinfo(item.id).then((res) => {
              this.$modal.msgSuccess("删除成功");
            });
          }
          this.targetList = this.targetList.filter((obj) => obj !== item);
        })
        .catch(() => {});
    },
    // 保存主表
    submitForm() {
      if (this.baseForm.id) {
        editgeneral(this.baseForm).then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("修改成功");
            this.savetalk();
          }
        });
      } else {
        addgeneral(this.baseForm).then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("新增成功");
            this.baseForm.id = res.data.id;
            this.id = res.data.id;
            this.savetalk();
          }
        });
      }
    },
    // 保存话术
    savetalk() {
      this.targetList.forEach((obj) => {
        if (obj.id) {
          editgeneravaluel(obj).then((res) => {
            this.getList();
          });
        } else {
          obj.extID = this.baseForm.id;
          addgeneravaluel(obj).then((res) => {
            this.getList();
          });
        }
      });
    },
    modification(type) {
      if (type == "add") {
        console.log(this.ruleForm, "ruleForm");
        this.targetList.push(this.ruleForm);
      } else {
        this.targetList[this.index] = this.ruleForm;
      }
      this.ruleForm = {};
    },
    // 关闭
    resetForm() {
      this.$confirm("即将退出页面, 请确认数据是否保存?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.go(-1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 文件----------------------
    // 控制文件
    handleChange(file, fileList) {
@@ -276,10 +479,84 @@
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.switchText == this.pitchon) {
        console.log(123);
        return "warning-row";
      }
      return "";
    },
    // 正则-----------------
    // 生成正则
    generateRegex(row) {
      let regex = "";
      let regexno = "";
      let hostregex = "";
      let hostregexno = "";
      for (let i = 0; i < this.ruleForm.dynamiccruxs.length; i++) {
        regex += `${this.ruleForm.dynamiccruxs[i]}|`;
      }
      for (let i = 0; i < this.ruleForm.nodynamiccruxs.length; i++) {
        regexno += `${this.ruleForm.nodynamiccruxs[i]}|`;
      }
      regex = regex.slice(0, -1);
      regexno = regexno.slice(0, -1);
      hostregex = "(?=.*(?:" + `${regex}` + ")).*$";
      hostregexno = "^(?!.(?:" + `${regexno}` + ")).*$";
      this.ruleForm.selfRegex = hostregex;
      this.ruleForm.selfRegex2 = hostregexno;
      console.log(hostregex, "确定字匹配");
      console.log(hostregexno, "否定字匹配");
    },
    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 {
        console.log(2);
        item.nodynamiccruxs.splice(item.nodynamiccruxs.indexOf(crux), 1);
      }
      this.generateRegex(item);
    },
    handleInputConfirm(row) {
      // let index = this.TargetoptionList.indexOf(row);
      console.log(this.ruleForm.dynamiccruxs);
      console.log(this.ruleForm.nodynamiccruxs);
      if (this.whether == 1 && this.inputValue) {
        console.log(1);
        if (this.ruleForm.dynamiccruxs.indexOf(this.inputValue) == -1) {
          this.ruleForm.dynamiccruxs.push(this.inputValue);
          console.log(2);
        } else {
          this.$message.error("关键字已存在");
        }
        // this.inputVisible = false;
        this.inputVisible = false;
      } else if (this.whether == 2 && this.inputValue) {
        console.log(this.ruleForm.nodynamiccruxs.indexOf(this.inputValue));
        if (this.ruleForm.nodynamiccruxs.indexOf(this.inputValue) == -1) {
          this.ruleForm.nodynamiccruxs.push(this.inputValue);
        } else {
          this.$message.error("关键字已存在");
        }
        // this.noinputVisible = false;
        this.noinputVisible = false;
      }
      this.generateRegex(row);
      this.inputValue = "";
    },
    showInput(row) {
      // let index = this.TargetoptionList.indexOf(row);
      this.inputVisible = true;
      // this.$set(this.ruleForm, "inputVisible", true);
      this.whether = 1;
    },
    showInputno(row) {
      // let index = this.TargetoptionList.indexOf(row);
      this.noinputVisible = true;
      // this.$set(this.ruleForm, "noinputVisible", true);
      this.whether = 2;
    },
  },
};
@@ -301,6 +578,28 @@
.button-textsc {
  color: rgb(235, 23, 23);
}
.topicxq {
  background-color: #e2f5fc;
  border-radius: 4px;
  margin-top: 10px;
  padding: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
::v-deep.el-table .warning-row {
  background: rgb(193, 208, 250);
}