探索配置模板详情 - 探索配置管理

<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;div class=&quot;form-basic-item&quot;&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 label=&quot;所在界面名&quot; name=&quot;interfaceName&quot;&gt;
                &lt;t-input v-model=&quot;formData.interfaceName&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;所在界面名&quot; /&gt;
              &lt;/t-form-item&gt;
              &lt;t-form-item label=&quot;包含元素&quot; name=&quot;includedElements&quot;&gt;
                &lt;t-input v-model=&quot;formData.includedElements&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;包含元素&quot; /&gt;
              &lt;/t-form-item&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;div class=&quot;form-basic-container-title&quot;&gt;定时操作配置&lt;/div&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;div class=&quot;form-basic-container-title&quot;&gt;预设通用配置&lt;/div&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;div class=&quot;form-basic-container-title&quot;&gt;AI配置&lt;/div&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&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';

const INITIAL_DATA = {
  templateTitle: '',
  templateDescription: '',
  controlWhitelist: '',
  controlBlacklist: '',
  interfaceWhitelist: '',
  interfaceBlacklist: '',
  recognizer: '',
  operator: '',
  timingOperation: '',
  presetConfig: '',
  aiConfig: '',
  networkConfig: '',
  screenshotFrequency: '',
  faultMonitoring: '',
  ticketTemplate: '',
  ticketFilter: '',
  interfaceName: '',
  includedElements: '',
};
const FORM_RULES = {
  templateTitle: [{ required: true, message: '请输入模板名', type: 'error' }],
  templateDescription: [{ required: true, message: '请输入模板描述', type: 'error' }],
};

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("to explore_config_detail")
        // 只有在 /tasks 路由的参数改变时才执行
        this.getTemplate();
      }
    }
  },
  mounted() {
    console.log("this is template detail page")
    this.getTemplate()
  },
  methods: {
    getTemplate() {
      this.dataLoading = true;
      this.$request
        .get(`/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.$route.params.pid}`, {
          headers: {
          },
          withCredentials: true
        })
        .then((res) => {
          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 && 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
              this.formData.interfaceName = content.interface_name
              this.formData.includedElements = content.included_elements
            }
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          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 = {
          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,
          interface_name: this.formData.interfaceName,
          included_elements: this.formData.includedElements,
        }
        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)
          }, {
            withCredentials: true
          })
          .then((res) => {
            console.log(res)
            if (res.status === 200) {
              this.$message.success('保存成功');
            }
          })
          .catch((e) => {
            console.log(e);
            this.$message.error('保存失败');
          })
          .finally(() => {
            console.log("save");
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import './index';
</style>