• 日期: 2027-10-10
  • 标签: 常规
<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;!-- 表单内容 --&gt;
      &lt;t-row class=&quot;row-gap&quot; :gutter=&quot;[16, 24]&quot;&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;探索范围配置&lt;/div&gt;
            &lt;t-table :data=&quot;formData.exploreConfig.scopeConfig&quot; :columns=&quot;exploreScopeColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;定向操作配置&lt;/div&gt;
            &lt;t-table :data=&quot;formData.exploreConfig.directionalConfig&quot; :columns=&quot;exploreDirectionalColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
      &lt;/t-row&gt;

      &lt;t-row class=&quot;row-gap&quot; :gutter=&quot;[16, 24]&quot;&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;定时操作配置&lt;/div&gt;
            &lt;t-table :data=&quot;formData.exploreConfig.timingConfig&quot; :columns=&quot;exploreTimingColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;预设通用配置&lt;/div&gt;
            &lt;t-table :data=&quot;formData.exploreConfig.generalConfig&quot; :columns=&quot;exploreGeneralColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
      &lt;/t-row&gt;

      &lt;div class=&quot;sub-table-container&quot;&gt;
        &lt;div class=&quot;sub-table-title&quot;&gt;AI配置&lt;/div&gt;
        &lt;t-table :data=&quot;formData.exploreConfig.aiConfig&quot; :columns=&quot;exploreAIColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
      &lt;/div&gt;

      &lt;div class=&quot;form-basic-container-title&quot;&gt;环境配置信息&lt;/div&gt;
      &lt;!-- 表单内容 --&gt;
      &lt;t-row class=&quot;row-gap&quot; :gutter=&quot;[16, 24]&quot;&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;弱网配置&lt;/div&gt;
            &lt;t-table :data=&quot;formData.envConfig.weakNetworkConfig&quot; :columns=&quot;envWeakNetworkColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
      &lt;/t-row&gt;

      &lt;div class=&quot;form-basic-container-title&quot;&gt;数据回收信息&lt;/div&gt;
      &lt;!-- 表单内容 --&gt;
      &lt;t-row class=&quot;row-gap&quot; :gutter=&quot;[16, 24]&quot;&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;截图频率&lt;/div&gt;
            &lt;t-table :data=&quot;formData.dataCollection.screenshotFrequency&quot; :columns=&quot;dataCollectionScreenshotColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;故障监控方式&lt;/div&gt;
            &lt;t-table :data=&quot;formData.dataCollection.failureMonitoring&quot; :columns=&quot;dataCollectionFailureColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
      &lt;/t-row&gt;

      &lt;div class=&quot;form-basic-container-title&quot;&gt;故障提单信息&lt;/div&gt;
      &lt;!-- 表单内容 --&gt;
      &lt;t-row class=&quot;row-gap&quot; :gutter=&quot;[16, 24]&quot;&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;提单模板&lt;/div&gt;
            &lt;t-table :data=&quot;formData.faultTicket.template&quot; :columns=&quot;faultTicketTemplateColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;sub-table-container&quot;&gt;
            &lt;div class=&quot;sub-table-title&quot;&gt;提单过滤&lt;/div&gt;
            &lt;t-table :data=&quot;formData.faultTicket.filter&quot; :columns=&quot;faultTicketFilterColumns&quot; :bordered=&quot;false&quot; :size=&quot;small&quot; /&gt;
          &lt;/div&gt;
        &lt;/t-col&gt;
      &lt;/t-row&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: '',
exploreConfig: {
scopeConfig: [],
directionalConfig: [],
timingConfig: [],
generalConfig: [],
aiConfig: [],
},
envConfig: {
weakNetworkConfig: [],
},
dataCollection: {
screenshotFrequency: [],
failureMonitoring: [],
},
faultTicket: {
template: [],
filter: [],
},
};
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: { },
exploreScopeColumns: [/<em>探索范围配置的列定义</em>/],
exploreDirectionalColumns: [/<em>定向操作配置的列定义</em>/],
exploreTimingColumns: [/<em>定时操作配置的列定义</em>/],
exploreGeneralColumns: [/<em>预设通用配置的列定义</em>/],
exploreAIColumns: [/<em>AI配置的列定义</em>/],
envWeakNetworkColumns: [/<em>弱网配置的列定义</em>/],
dataCollectionScreenshotColumns: [/<em>截图频率的列定义</em>/],
dataCollectionFailureColumns: [/<em>故障监控方式的列定义</em>/],
faultTicketTemplateColumns: [/<em>提单模板的列定义</em>/],
faultTicketFilterColumns: [/<em>提单过滤的列定义</em>/],
};
},
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;
const content = JSON.parse(this.template.content)
if (content !== null &amp;&amp; typeof content!== 'undefined') {
this.formData.appIdentifier = content.app_identifier
this.formData.initCommandDescription = content.init_command_description
this.formData.formulatedCommandDescription = content.formulated_command_description
}
}
})
.catch((e) =&gt; {
console.log(e);
})
.finally(() =&gt; {
this.dataLoading = false;
});
},
handleFail({ file }) {
this.$message.error(<code>文件 ${file.name} 上传失败</code>);
},
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(<code>/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.$route.params.pid}</code>, {
template_title: this.formData.templateTitle,
template_description: this.formData.templateDescription,
content: JSON.stringify(contentData)
}, {
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;);
});
}
},
},
};
</script></p>
<style lang="less" scoped>
@import './index';
</style>
探索配置模板详情 - UUID:{{template.template_uuid}}

原文地址: https://www.cveoy.top/t/topic/qxxk 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录