探索配置模板详情

<template>
  <t-card :bordered="false">
    <t-form
      ref="form"
      :data="formData"
      :rules="FORM_RULES"
      label-align="top"
      :label-width="100"
      @reset="onReset"
      @submit="onSubmit"
    >
      <div class="form-basic-container">
        <div class="form-basic-item">
          <div class="form-basic-container-title">模板信息【UUID:{{template.template_uuid}}】</div>
          <t-form-item label="模板名称" name="templateTitle">
            <t-input v-model="formData.templateTitle" :style="{ width: '322px' }"  />
          </t-form-item>
          <t-form-item label="模板描述" name="templateDescription">
            <t-textarea v-model="formData.templateDescription" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="模板描述" />
          </t-form-item>
<pre><code>      &lt;div class=&quot;form-basic-container-title&quot;&gt;探索配置信息&lt;/div&gt;
      &lt;t-form-item label=&quot;探索范围配置&quot; name=&quot;explorationConfig&quot;&gt;
        &lt;t-table :data=&quot;explorationConfigData&quot; :columns=&quot;explorationConfigColumns&quot; /&gt;
      &lt;/t-form-item&gt;
      &lt;t-form-item label=&quot;定向操作配置&quot; name=&quot;directionalOperationConfig&quot;&gt;
        &lt;t-table :data=&quot;directionalOperationConfigData&quot; :columns=&quot;directionalOperationConfigColumns&quot; /&gt;
      &lt;/t-form-item&gt;
      &lt;t-form-item label=&quot;定时操作配置&quot; name=&quot;scheduledOperationConfig&quot;&gt;
        &lt;t-table :data=&quot;scheduledOperationConfigData&quot; :columns=&quot;scheduledOperationConfigColumns&quot; /&gt;
      &lt;/t-form-item&gt;
      &lt;t-form-item label=&quot;预设通用配置&quot; name=&quot;presetConfig&quot;&gt;
        &lt;t-table :data=&quot;presetConfigData&quot; :columns=&quot;presetConfigColumns&quot; /&gt;
      &lt;/t-form-item&gt;
      &lt;t-form-item label=&quot;AI配置&quot; name=&quot;aiConfig&quot;&gt;
        &lt;t-table :data=&quot;aiConfigData&quot; :columns=&quot;aiConfigColumns&quot; /&gt;
      &lt;/t-form-item&gt;

      &lt;div class=&quot;form-basic-container-title&quot;&gt;环境配置信息&lt;/div&gt;
      &lt;t-form-item label=&quot;环境配置&quot; name=&quot;environmentConfig&quot;&gt;
        &lt;t-table :data=&quot;environmentConfigData&quot; :columns=&quot;environmentConfigColumns&quot; /&gt;
      &lt;/t-form-item&gt;

      &lt;div class=&quot;form-basic-container-title&quot;&gt;数据回收信息&lt;/div&gt;
      &lt;t-form-item label=&quot;数据回收&quot; name=&quot;dataCollection&quot;&gt;
        &lt;t-table :data=&quot;dataCollectionData&quot; :columns=&quot;dataCollectionColumns&quot; /&gt;
      &lt;/t-form-item&gt;

      &lt;div class=&quot;form-basic-container-title&quot;&gt;故障提单信息&lt;/div&gt;
      &lt;t-form-item label=&quot;故障提单&quot; name=&quot;faultTicket&quot;&gt;
        &lt;t-table :data=&quot;faultTicketData&quot; :columns=&quot;faultTicketColumns&quot; /&gt;
      &lt;/t-form-item&gt;

    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;form-submit-container&quot;&gt;
    &lt;div class=&quot;form-submit-sub&quot;&gt;
      &lt;div class=&quot;form-submit-left&quot;&gt;
        &lt;t-button theme=&quot;primary&quot; class=&quot;form-submit-confirm&quot; type=&quot;submit&quot;&gt; 提交 &lt;/t-button&gt;
        &lt;t-button type=&quot;reset&quot; class=&quot;form-submit-cancel&quot; theme=&quot;default&quot; variant=&quot;base&quot;&gt; 取消 &lt;/t-button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/t-form&gt;
</code></pre>
  </t-card>
</template>
<script>
import { prefix } from '@/config/global';
<p>const INITIAL_DATA = {
templateTitle: '',
templateDescription: '',
appIdentifier: '',
initCommandDescription: '',
formulatedCommandDescription: '',
explorationConfigData: [],
directionalOperationConfigData: [],
scheduledOperationConfigData: [],
presetConfigData: [],
aiConfigData: [],
environmentConfigData: [],
dataCollectionData: [],
faultTicketData: [],
};
const FORM_RULES = {
appIdentifier: [{ required: true, message: '请输入app的标识符', type: 'error' }],
initCommandDescription: [{ required: true, message: '请输入需要执行的操作描述', type: 'error' }],
formulatedCommandDescription: [{ required: false, message: '请输入转化后的标准操作流程', type: 'error' }],
};</p>
<p>export default {
name: 'FormBase',
data() {
return {
prefix,
stepSuccess: true,
formData: { ...INITIAL_DATA },
FORM_RULES,
dataLoading: false,
template: { },
explorationConfigColumns: [
// 列定义
],
directionalOperationConfigColumns: [
// 列定义
],
scheduledOperationConfigColumns: [
// 列定义
],
presetConfigColumns: [
// 列定义
],
aiConfigColumns: [
// 列定义
],
environmentConfigColumns: [
// 列定义
],
dataCollectionColumns: [
// 列定义
],
faultTicketColumns: [
// 列定义
],
};
},
watch: {
// eslint-disable-next-line func-names
'$route': function(to, from) {
if (to.path.endsWith('/explore_config_details')) {
console.log(&quot;to explore_config_detail&quot;)
// 只有在 /tasks 路由的参数改变时才执行
this.getTemplate();
}
}
},
mounted() {
console.log(&quot;this is template detail page&quot;)
this.getTemplate()
},
methods: {
getTemplate() {
this.dataLoading = true;
this.$request
.get(<code>/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.$route.params.pid}</code>, {
headers: {
},
withCredentials: true
})
.then((res) =&gt; {
console.log(res)
if (res.status === 200) {
const tp = res.data;
console.log(tp)
this.template = tp;
this.formData.templateTitle = this.template.template_title;
this.formData.templateDescription = this.template.template_description;</p>
<pre><code>        // 设置子表格数据
        this.formData.explorationConfigData = tp.explorationConfigData;
        this.formData.directionalOperationConfigData = tp.directionalOperationConfigData;
        this.formData.scheduledOperationConfigData = tp.scheduledOperationConfigData;
        this.formData.presetConfigData = tp.presetConfigData;
        this.formData.aiConfigData = tp.aiConfigData;
        this.formData.environmentConfigData = tp.environmentConfigData;
        this.formData.dataCollectionData = tp.dataCollectionData;
        this.formData.faultTicketData = tp.faultTicketData;
      }
    })
    .catch((e) =&gt; {
      console.log(e);
    })
    .finally(() =&gt; {
      this.dataLoading = false;
    });
},
handleFail({ file }) {
  this.$message.error(`文件 ${file.name} 上传失败`);
},
beforeUpload(file) {
  if (!/.(pdf)$/.test(file.name)) {
    this.$message.warning('请上传pdf文件');
    return false;
  }
  return true;
},
// 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
formatResponse(res) {
  return { ...res, error: '上传失败，请重试', url: res.url };
},
changeStatus() {
  this.stepSuccess = !this.stepSuccess;
},
onReset() {
  this.$message.warning('取消新建');
},
onSubmit({ validateResult }) {
  if (validateResult === true) {
    const contentData = {
      app_identifier : this.formData.appIdentifier,
      init_command_description : this.formData.initCommandDescription,
      formulated_command_description : this.formData.formulatedCommandDescription
    }
    this.$request
      .put(`/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.$route.params.pid}`, {
        template_title: this.formData.templateTitle,
        template_description: this.formData.templateDescription,
        content: JSON.stringify(contentData),
        explorationConfigData: this.formData.explorationConfigData,
        directionalOperationConfigData: this.formData.directionalOperationConfigData,
        scheduledOperationConfigData: this.formData.scheduledOperationConfigData,
        presetConfigData: this.formData.presetConfigData,
        aiConfigData: this.formData.aiConfigData,
        environmentConfigData: this.formData.environmentConfigData,
        dataCollectionData: this.formData.dataCollectionData,
        faultTicketData: this.formData.faultTicketData,
      }, {
        withCredentials: true
      })
      .then((res) =&gt; {
        console.log(res)
        if (res.status === 200) {
          this.$message.success('保存成功');
        }
      })
      .catch((e) =&gt; {
        console.log(e);
        this.$message.error('保存失败');
      })
      .finally(() =&gt; {
        console.log(&quot;save&quot;);
      });
  }
},
</code></pre>
<p>},
};
</script></p>
<style lang="less" scoped>
@import './index';
</style>