解析块和解析方法的页面开发和功能开发

liudong

2024-08-02 feb1bc83e9d2e2b57fef8bdafaa2e24a43fec96c

 src/views/dmx/knowledgeLib/addDetails.vue

@@ -5,11 +5,42 @@
      <icon-plus />
    </template>
  </a-button>
  <a-modal v-model:visible="visible" title="创建知识库" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start">
    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" >
      <a-form-item field="name" label="名称">
        <a-input v-model="form.name" placeholder="请输入名称"/>
  <a-modal v-model:visible="visible" title="创建解析块" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start">
    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" layout="vertical" >
      <a-form-item field="content_with_weight" label="解析块">
        <a-textarea v-model="form.content_with_weight" placeholder="" style="height: 100px"  auto-size />
      </a-form-item>
      <a-form-item field="important_kwd_key" label="关键词 *">
        <div style="width: auto">
          <a-tag
            v-for="(item,index) in form.important_kwd"
            :key="index"
            closable
            bordered
            @close="form.important_kwd.splice(index,1)"
            style="margin-right: 10px"
          >
            {{item}}
          </a-tag>


          <a-input
            ref="formInput"
            v-show="keyVisible"
            v-model="form.important_kwd_key"
            placeholder=""
            size="small"
            style="width: 80px;margin-right: 16px"
            @blur="inputChange"
          />
          <a-button type="dashed" shape="circle" size="small" @click="addKey">
            <icon-plus />
          </a-button>
        </div>

      </a-form-item>


      <a-form-item>
        <div style="width: 100%;text-align: right">
          <a-button @click="visible = false">取消</a-button>
@@ -22,29 +53,39 @@

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";
import { achunkCreate } from "@/api/kbList";

const props = defineProps(['item'])

const visible = ref(false);
const keyVisible = ref(false);
const loading = ref(false);
const form = reactive({
  name: '',// 用户名
  nameJoin: '',// 昵称
  post: '',// 岗位
  txt: '',// 备注
  content_with_weight: '',
  important_kwd: [],
  important_kwd_key: '',
});
const formRef = ref(null);

const formInput = ref(null);
const rules = {
  name: [
  content_with_weight: [
    {
      required: true,
      message:'名称不允许为空',
      message:'请输入值！',
    },
  ],
}


const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
const handleSubmit = async ({values, errors}) => {
  console.log(props.item.id);
  if(!errors){
    const res = await achunkCreate({
      content_with_weight: values.content_with_weight,
      important_kwd: values.important_kwd,
      doc_id: props.item.id,
    })
  }
}

const handleClick = () => {
@@ -53,12 +94,6 @@
const handleBeforeOk = (done) => {
    formRef.value.validate().then(res => {
      console.log('form:', form)
      if (!form.name) {
        done(false)
      }else {
        console.log('请求数据');

      }
    })
};
const handleCancel = () => {
@@ -67,13 +102,32 @@

const handleOpened =(el) => {
  Object.assign(form,{
    name: '',// 用户名
    nameJoin: '',// 昵称
    post: '',// 岗位
    txt: '',// 备注
    content_with_weight: '',
    important_kwd: [],
    important_kwd_key: '',
  });
  formRef.value.resetFields();
  keyVisible.value= false;
}

const addKey = () => {
  form.important_kwd_key = '';
  formInput.value.focus();
  keyVisible.value= true;
}

const inputChange = (e) => {
  if (!form.important_kwd.includes(form.important_kwd_key) && form.important_kwd_key){
    form.important_kwd.push(form.important_kwd_key)
  }else {

  }
  keyVisible.value= false;
}





onBeforeMount(()=>{

@@ -82,13 +136,4 @@


})
</script>

<script lang="ts">
export default {
  name: 'add',
  methods: {

  }
};
</script>