探索配置模板详情 - 探索范围配置、定向操作配置、环境配置、数据回收、故障提单

<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;form-basic-container-title&quot;&gt;探索范围配置&lt;/div&gt;
          &lt;t-form-item label=&quot;控件白名单&quot; name=&quot;controlWhitelist&quot;&gt;
            &lt;t-textarea v-model=&quot;formData.controlWhitelist&quot; :autosize=&quot;{ minRows: 3, maxRows: 5 }&quot; placeholder=&quot;控件白名单&quot; /&gt;
          &lt;/t-form-item&gt;
          &lt;t-form-item label=&quot;控件黑名单&quot; name=&quot;controlBlacklist&quot;&gt;
            &lt;t-textarea v-model=&quot;formData.controlBlacklist&quot; :autosize=&quot;{ minRows: 3, maxRows: 5 }&quot; placeholder=&quot;控件黑名单&quot; /&gt;
          &lt;/t-form-item&gt;
          &lt;t-form-item label=&quot;界面白名单&quot; name=&quot;interfaceWhitelist&quot;&gt;
            &lt;t-textarea v-model=&quot;formData.interfaceWhitelist&quot; :autosize=&quot;{ minRows: 3, maxRows: 5 }&quot; placeholder=&quot;界面白名单&quot; /&gt;
          &lt;/t-form-item&gt;
          &lt;t-form-item label=&quot;界面黑名单&quot; name=&quot;interfaceBlacklist&quot;&gt;
            &lt;t-textarea v-model=&quot;formData.interfaceBlacklist&quot; :autosize=&quot;{ minRows: 3, maxRows: 5 }&quot; placeholder=&quot;界面黑名单&quot; /&gt;
          &lt;/t-form-item&gt;
        &lt;/t-col&gt;
        &lt;t-col :span=&quot;12&quot;&gt;
          &lt;div class=&quot;form-basic-container-title&quot;&gt;定向操作配置&lt;/div&gt;
          &lt;t-form-item label=&quot;识别器&quot; name=&quot;recognizer&quot;&gt;
            &lt;t-input v-model=&quot;formData.recognizer&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;识别器&quot; /&gt;
          &lt;/t-form-item&gt;
          &lt;t-form-item label=&quot;操作器&quot; name=&quot;operator&quot;&gt;
            &lt;t-input v-model=&quot;formData.operator&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;操作器&quot; /&gt;
          &lt;/t-form-item&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;6&quot;&gt;
          &lt;t-form-item label=&quot;定时操作配置&quot; name=&quot;timingOperation&quot;&gt;
            &lt;t-textarea v-model=&quot;formData.timingOperation&quot; :autosize=&quot;{ minRows: 8, maxRows: 10 }&quot; placeholder=&quot;定时操作配置&quot; /&gt;
          &lt;/t-form-item&gt;
        &lt;/t-col&gt;
        &lt;t-col :span=&quot;6&quot;&gt;
          &lt;t-form-item label=&quot;预设通用配置&quot; name=&quot;presetConfig&quot;&gt;
            &lt;t-textarea v-model=&quot;formData.presetConfig&quot; :autosize=&quot;{ minRows: 8, maxRows: 10 }&quot; placeholder=&quot;预设通用配置&quot; /&gt;
          &lt;/t-form-item&gt;
        &lt;/t-col&gt;
        &lt;t-col :span=&quot;6&quot;&gt;
          &lt;t-form-item label=&quot;AI配置&quot; name=&quot;aiConfig&quot;&gt;
            &lt;t-textarea v-model=&quot;formData.aiConfig&quot; :autosize=&quot;{ minRows: 8, maxRows: 10 }&quot; placeholder=&quot;AI配置&quot; /&gt;
          &lt;/t-form-item&gt;
        &lt;/t-col&gt;
      &lt;/t-row&gt;

      &lt;div class=&quot;form-basic-container-title&quot;&gt;环境配置信息&lt;/div&gt;
      &lt;t-form-item label=&quot;弱网配置&quot; name=&quot;networkConfig&quot;&gt;
        &lt;t-input v-model=&quot;formData.networkConfig&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;弱网配置&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;screenshotFrequency&quot;&gt;
        &lt;t-input v-model=&quot;formData.screenshotFrequency&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;截图频率&quot; /&gt;
      &lt;/t-form-item&gt;
      &lt;t-form-item label=&quot;故障监控方式&quot; name=&quot;faultMonitoring&quot;&gt;
        &lt;t-input v-model=&quot;formData.faultMonitoring&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;故障监控方式&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;ticketTemplate&quot;&gt;
        &lt;t-input v-model=&quot;formData.ticketTemplate&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;提单模板&quot; /&gt;
      &lt;/t-form-item&gt;
      &lt;t-form-item label=&quot;提单过滤&quot; name=&quot;ticketFilter&quot;&gt;
        &lt;t-input v-model=&quot;formData.ticketFilter&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;提单过滤&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: '',
controlWhitelist: '',
controlBlacklist: '',
interfaceWhitelist: '',
interfaceBlacklist: '',
recognizer: '',
operator: '',
timingOperation: '',
presetConfig: '',
aiConfig: '',
networkConfig: '',
screenshotFrequency: '',
faultMonitoring: '',
ticketTemplate: '',
ticketFilter: '',
};
const FORM_RULES = {
appIdentifier: [{ required: true, message: '请输入app的标识符', type: 'error' }],
initCommandDescription: [{ required: true, message: '请输入需要执行的操作描述', type: 'error' }],
formulatedCommandDescription: [{ required: false, message: '请输入转化后的标准操作流程', type: 'error' }],
controlWhitelist: [{ required: true, message: '请输入控件白名单', type: 'error' }],
controlBlacklist: [{ required: true, message: '请输入控件黑名单', type: 'error' }],
interfaceWhitelist: [{ required: true, message: '请输入界面白名单', type: 'error' }],
interfaceBlacklist: [{ required: true, message: '请输入界面黑名单', type: 'error' }],
recognizer: [{ required: true, message: '请输入识别器', type: 'error' }],
operator: [{ required: true, message: '请输入操作器', type: 'error' }],
timingOperation: [{ required: true, message: '请输入定时操作配置', type: 'error' }],
presetConfig: [{ required: true, message: '请输入预设通用配置', type: 'error' }],
aiConfig: [{ required: true, message: '请输入AI配置', type: 'error' }],
networkConfig: [{ required: true, message: '请输入弱网配置', type: 'error' }],
screenshotFrequency: [{ required: true, message: '请输入截图频率', type: 'error' }],
faultMonitoring: [{ required: true, message: '请输入故障监控方式', type: 'error' }],
ticketTemplate: [{ required: true, message: '请输入提单模板', type: 'error' }],
ticketFilter: [{ required: true, message: '请输入提单过滤', type: 'error' }],
};</p>
<p>export default {
name: 'FormBase',
data() {
return {
prefix,
stepSuccess: true,
formData: { ...INITIAL_DATA },
FORM_RULES,
dataLoading: false,
template: { },
};
},
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.controlWhitelist = content.control_whitelist
this.formData.controlBlacklist = content.control_blacklist
this.formData.interfaceWhitelist = content.interface_whitelist
this.formData.interfaceBlacklist = content.interface_blacklist
this.formData.recognizer = content.recognizer
this.formData.operator = content.operator
this.formData.timingOperation = content.timing_operation
this.formData.presetConfig = content.preset_config
this.formData.aiConfig = content.ai_config
this.formData.networkConfig = content.network_config
this.formData.screenshotFrequency = content.screenshot_frequency
this.formData.faultMonitoring = content.fault_monitoring
this.formData.ticketTemplate = content.ticket_template
this.formData.ticketFilter = content.ticket_filter
}
}
})
.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 = {
control_whitelist : this.formData.controlWhitelist,
control_blacklist : this.formData.controlBlacklist,
interface_whitelist : this.formData.interfaceWhitelist,
interface_blacklist : this.formData.interfaceBlacklist,
recognizer : this.formData.recognizer,
operator : this.formData.operator,
timing_operation : this.formData.timingOperation,
preset_config : this.formData.presetConfig,
ai_config : this.formData.aiConfig,
network_config : this.formData.networkConfig,
screenshot_frequency : this.formData.screenshotFrequency,
fault_monitoring : this.formData.faultMonitoring,
ticket_template : this.formData.ticketTemplate,
ticket_filter : this.formData.ticketFilter
}
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>