diantou/src_custom/performance-tracking/user-config/xm-user-config.vue

<template>
  <a-card :class="$style.sysmangeCard">
    <h2 :class="$style.title">关键用户配置</h2>
    <sd-form
      v-if="formData.pageFormData"
      ref="form"
      :init-values="formData.pageFormData.pageFieldInfos"
    >
      <template>
        <sd-form-item name="user1" />
        <div :class="$style.button">
          <a-button type="primary" :loading="isSubmitting" @click="btnClick">
            保存
          </a-button>
        </div>
      </template>
    </sd-form>
  </a-card>
</template>

<script>
import { Message } from 'ant-design-vue'
import TrackService from '../track-service'
import components from './_import-components/xm-user-config-import'
export default {
  name: 'XmUserConfig',
  metaInfo: {
    title: '关键用户配置',
  },
  components,
  data() {
    return {
      formData: {},
      isSubmitting: false,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      TrackService.getMonitorConfig().then((res) => {
        this.formData = res.data
      })
    },
    btnClick() {
      const beanId = parseInt(this.formData.pageFormData.beanId)
      const newid = [{ name: 'id', value: beanId }]
      // 提交表单
      const input = newid.concat(this.$refs.form.getBackendValues())
      const data = {
        eventId: 'save',
        inputs: input,
        pageFlowId: this.formData.attrs.pageflowId,
        pagePath: this.formData.attrs.pagePath,
      }
      TrackService.saveMonitorConfig(data).then((res) => {
        if (res && res.data) {
          Message.success('保存成功')
          this.isSubmitting = false
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.sysmange-card {
  .title {
    text-align: center;
  }
  :global(.ant-form) {
    :global(.ant-form-item-label) {
      float: left;
      width: 30%;
    }
    :global(.ant-form-item-control-wrapper) {
      float: left;
      width: 60%;
    }
  }
  .button {
    display: flex;
    justify-content: center;
  }
  .picker {
    min-width: 70%;
    max-width: 70%;
    margin-left: 20px;
    :global(.ant-select) {
      width: 100%;
    }
  }
  .span {
    display: flex;
    justify-content: center;
  }
}
</style>