diantou/src_product/iam/dm/netdatacollection/financlaljob/iam-dm-financlaljob-form.vue

<template>
  <audit-form-top-banner :handel-save-form="saveForm" :form-data="mode" @handelSaveForm="saveForm">
    <sd-detail-form
      ref="docform"
      form-id="iamFinFinancialJob"
      page-id="dm/financlalJob/iamFinFinancialJob"
      :record-id="this.$route.query.record ? parseInt(this.$route.query.record) : null"
      :class="$style.form"
      :read-only="!saveFlag"
      @close="close(true)"
      @saved="saved"
      @sdFormReady="sdFormReady"
    >
      <template v-slot="{ model, fields }">
        <table>
          <tr>
            <td style="padding-left:5px;border:none">
              <audit-advanced-group
                :expand="basicExpand"
                :expand-str="'basicExpand'"
                :group-label="'基本信息'"
                tablestyle="''"
                @changedClick="changedClick"
              ></audit-advanced-group>
            </td>
          </tr>
        </table>

        <table v-show="basicExpand">
          <tr>
            <td class="ant-form-item-label ant-form-item-label" :class="$style.firstTd"></td>
            <td class="ant-form-item-control-wrapper" :class="$style.firstTd"></td>
            <td class="ant-form-item-label ant-form-item-label" :class="$style.firstTd"></td>
            <td class="ant-form-item-control-wrapper" :class="$style.firstTd"></td>
          </tr>
          <tr>
            <!-- 转换名称 -->
            <sd-form-item-td name="configName" label="转换名称" :colspan="3">
              <template v-slot:read-and-edit>
                <a-select
                  v-model="model.configName"
                  :options="configOptions"
                  allow-clear
                  @change="configChange"
                ></a-select>
              </template>
            </sd-form-item-td>
            <!-- ID -->
            <sd-form-item-td name="configId" :hidden="true" />
          </tr>
          <tr>
            <!-- 执行规则 -->
            <sd-form-item-td name="jobCron" :colspan="3">
              <template v-slot:read-and-edit>
                <a-input v-model="model.jobCron" @click="fnShowCron"></a-input>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 是否启用 -->
            <sd-form-item-td name="jobStatus" :colspan="3" label="是否启用">
              <!-- <template v-slot:read-and-edit>
                <a-select v-model="model.jobStatus">
                  <a-select-option value="1">是</a-select-option>
                  <a-select-option value="0">否</a-select-option>
                </a-select>
              </template> -->
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 说明 -->
            <sd-form-item-td name="remark" :colspan="3">
              <a-textarea v-model="model.remark" :rows="3" />
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 维护人员 -->
            <sd-form-item-td name="creatorName" />
            <!-- 维护日期 -->
            <sd-form-item-td name="creationTime" />
          </tr>
        </table>

        <!-- cron选择组件 -->
        <a-modal
          width="600px"
          title="表达式"
          :footer="null"
          :visible="showCron"
          @cancel="handleCancel"
        >
          <vcrontab :expression="croninput" @hide="showCron = false" @fill="crontabFill"></vcrontab>
        </a-modal>
      </template>
    </sd-detail-form>
  </audit-form-top-banner>
</template>

<script>
import vcrontab from 'vcrontab'
import axios from '@/common/services/axios-instance'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import { message } from '@/common/one-ui'
import auditFormTopBanner from '@product/iam/components/audit-form-top-banner'
import auditAdvancedGroup from '@product/iam/components/audit-advanced-group'
import auditAdvancedGroupMixins from '@product/iam/components/audit-advanced-group-mixins'
import components from './_import-components/iam-dm-financlaljob-form-import'
import 'element-ui/lib/theme-chalk/index.css'

export default {
  name: 'IamDmFinanclaljobForm',
  metaInfo: {
    title: '定时采集配置',
  },
  components: {
    ...components,
    auditAdvancedGroup,
    auditFormTopBanner,
    vcrontab,
  },
  mixins: [auditAdvancedGroupMixins],
  data() {
    return {
      configOptions: [], // 转换配置列表
      croninput: '',
      showCron: false,
      mode: null,
      saveFlag: true,
      basicExpand: true,
      etlConfigOptions: [],
    }
  },
  mounted() {
    this.getOptions()
  },
  methods: {
    fnShowCron() {
      this.showCron = true
    },
    handleCancel(e) {
      this.showCron = !this.showCron
    },
    crontabFill(value) {
      // 确定后回传的值
      this.croninput = value
      this.$refs.docform.setFieldValue('jobCron', value)
    },
    configChange(val, option) {
      this.$refs.docform.setFieldValue('configId', Number(option.data.key))
    },
    // 页面加载完成后
    sdFormReady() {
      this.mode = this.$refs.docform.formData.mode
      this.croninput = this.$refs.docform.getFieldValue('jobCron')
    },
    // 保存
    saveForm() {
      this.$refs.docform.validateFields().then(() => {
        message.success('保存成功').then(() => {
          this.$refs.docform.saveBtnClick()
        })
      })
      // this.$refs.docform.saveBtnClick()
    },
    saved() {
      this.close(true)
    },
    close(flag) {
      crossWindowWatcher.notifyChange(this.$route.fullPath, flag)
      window.close()
    },
    getOptions() {
      axios({
        url: 'api/xcoa-mobile/v1/iamfinfinancialjob/getOptions',
        method: 'get',
      }).then((res) => {
        if (res) {
          this.configOptions = [...res.data].map((item) => {
            return {
              value: item.configName,
              label: item.configName,
              key: item.id,
            }
          })
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import '@/webflow/sd-flow-form.scss';
.connect-btn {
  float: right;
  font-weight: 400;
  font-size: 16px;
  top: 8px;
  cursor: pointer;
  margin-right: 10px;
}
.first-td {
  border: none !important;
  padding: 0;
}
</style>