diantou/src_product/iam/kpi/def/kpi-sendtask-form.vue

<template>
  <a-modal
    ref="sendTaskFormModal"
    :body-style="bodyStyle"
    :title="title"
    :destroy-on-close="true"
    :visible="visible"
    :width="modalWidth"
    :confirm-loading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <sd-form ref="form" :class="$style.form" :init-values="formValues">
      <a-form-item label="时间维度">
        <span>{{ indiInfo.indiFrequency }}</span>
      </a-form-item>
      <kpi-datadate-component ref="datadate" :date-type="frequencyType"></kpi-datadate-component>
      <a-form-item label="报送指标名称">
        <span>{{ indiInfo.indiName }}</span>
      </a-form-item>
      <a-form-item>
        <div :class="$style.wrapper">
          <div :class="$style.deptbtn">
            <a-button type="link" @click="selectDept">
              <a-icon type="plus-circle" :theme="'filled'" />
              选择
            </a-button>
          </div>
        </div>
        <sd-child-table
          v-model="sendDept"
          label="报送单位列表"
          :fields="fields"
          :columns="[
            { dataIndex: 'monitorDeptId', sdHidden: true },
            { dataIndex: 'submitterAccount', sdHidden: true },
          ]"
        ></sd-child-table>
      </a-form-item>
    </sd-form>
  </a-modal>
</template>

<script>
import { Message } from 'ant-design-vue'
import pickValues from '@/common/services/pick-values'
import sdListPickerVue from '@/common/components/sd-list-picker.vue'
import kpiDatadateComponent from '../components/kpi-datadate-component.vue'
import KpiService from '../kpi-service'
import components from './_import-components/kpi-sendtask-form-import'

export default {
  name: 'KpiSendtaskForm',
  metaInfo: {
    title: 'KpiSendtaskForm',
  },
  components: {
    ...components,
    kpiDatadateComponent,
  },
  props: {
    // 弹出窗标题
    title: {
      type: String,
      default: '下发报送',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '1000px',
    },
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
    // 指标信息
    indiInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      bodyStyle: {
        padding: 0,
      },
      formValues: [],
      sendDept: [],
      fields: [
        {
          name: 'monitorDeptName',
          caption: '报送单位',
          dataType: 'string',
        },
        {
          name: 'monitorDeptId',
          caption: '报送单位ID',
          dataType: 'string',
        },
        {
          name: 'submitterAccount',
          caption: '报送人账号',
          dataType: 'string',
        },
        {
          name: 'submitterName',
          caption: '报送人',
          dataType: 'string',
        },
      ],
    }
  },
  computed: {
    frequencyType() {
      // 时间维度类型
      let type = 'day' // 默认日
      switch (this.indiInfo.indiFrequency) {
        case '年':
          type = 'year'
          break
        case '半年':
          type = 'halfyear'
          break
        case '季度':
          type = 'quarter'
          break
        case '月':
          type = 'month'
          break
        case '周':
          type = 'week'
          break
        case '日':
          type = 'day'
          break
        default:
          break
      }
      return type
    },
  },
  methods: {
    selectDept() {
      // 选择报送单位列表
      const indiID = this.indiInfo.id
      pickValues(sdListPickerVue, {
        loadListData() {
          const dataSource = []
          return KpiService.getOrgsByIndiId(indiID)
            .then((res) => {
              res?.forEach((item) => {
                dataSource.push({
                  id: item.monitorDeptId + '',
                  name: item.monitorDeptName,
                  submitterAccount: item.submitterAccount,
                  submitterName: item.submitterName,
                })
              })
              return dataSource
            })
            .catch((e) => {
              Message.error({ content: '阈值参考单位获取失败，请联系管理员' })
            })
        },
      }).then((values) => {
        // 子表赋值
        values?.forEach((item) => {
          this.sendDept.push({
            monitorDeptId: item.id,
            monitorDeptName: item.name,
            submitterAccount: item.submitterAccount,
            submitterName: item.submitterName,
          })
        })
      })
    },
    handleOk(e) {
      // 下发报送
      this.loading = true
      let frequency = '' // 时间维度
      switch (this.indiInfo.indiFrequency) {
        case '年':
          frequency = '6'
          break
        case '半年':
          frequency = '5'
          break
        case '季度':
          frequency = '4'
          break
        case '月':
          frequency = '3'
          break
        case '周':
          frequency = '2'
          break
        case '日':
          frequency = '1'
          break
        default:
          break
      }
      const monitorList = [] // 报送单位
      this.sendDept?.forEach((item) => {
        monitorList.push({
          submitterAccount: item.submitterAccount,
          monitorDeptId: item.monitorDeptId,
        })
      })
      const datadate = this.$refs.datadate.getFormatDate() // 数据时期
      const params = {
        indiId: this.indiInfo.id, // 指标ID
        indiFrequency: frequency, // 指标时间维度
        year: datadate.year, // 年度
        dataPeriod: datadate.date, // 数据时期
        monitorList: monitorList, // 报送单位列表
        taskName: datadate.year + '年' + datadate.date, // 任务名称
      }
      KpiService.sendTask(params)
        .then((res) => {
          if (res.success) {
            Message.success({ content: '下发报送成功' })
            setTimeout(() => {
              // 清空子表值
              this.sendDept = []
              this.loading = false
              this.$parent.$parent.visible = !this.$parent.$parent.visible
              // 刷新列表
              this.$parent.$parent.$refs.dataTable.clearSelection()
              this.$parent.$parent.$refs.dataTable.refresh()
            }, 1000)
          } else {
            let errmsg = '下发报送任务失败，请联系管理员'
            if (res.resultDesc) errmsg = res.resultDesc
            Message.error({ content: errmsg })
            setTimeout(() => {
              this.loading = false
            }, 1000)
          }
        })
        .catch((e) => {
          Message.error({ content: '下发报送任务失败，请联系管理员' })
          setTimeout(() => {
            this.loading = false
          }, 1000)
        })
    },
    handleCancel(e) {
      // 清空子表值
      this.sendDept = []
      this.$parent.$parent.visible = !this.$parent.$parent.visible
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.form {
  :global(.ant-form-item-control-wrapper) {
    width: auto !important;
    padding: 0 20px;
  }
  .deptbtn {
    position: relative;
    float: right;
    z-index: 100;
    right: 90px;
    top: -5px;
  }
  :global(.header_sd-child-table_common) {
    > span,
    > :global(.ant-space) div:first-child {
      display: none;
    }
  }
  :global(.wrapper_sd-child-table_common) {
    position: relative;
  }
  :global(.caption_sd-child-table_common) {
    margin: 0;
  }
}
</style>