diantou/src_product/iam/audit/rectplanproject/audit-selectfind-modal.vue

<template>
  <a-modal
    :body-style="bodyStyle"
    :title="title"
    :destroy-on-close="true"
    :visible="visible"
    :width="1800"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-card :bordered="false" :class="$style.newcard">
      <!-- 列表 -->
      <xmDataTableEx
        ref="findDataTable"
        class="findDataTablexm"
        :show-advance-btn="true"
        form-id="iamAuditReportFind"
        data-url="api/xcoa-mobile/v1/rectPlan-project/find-reportFind"
        :filter-expressions="filterExpressions"
        :check-type="'checkbox'"
        :columns="columns"
        :show-advance-query="false"
        :search-fields="['findTitle', 'findCode']"
        show-selection
        :process-res="processRes"
        @onChange="onChange"
      >
        <div slot="auditedUnitNames" slot-scope="text, record">
          {{
            text !== null
              ? text
                  .split(',')
                  .filter((item) => item.trim())
                  .join(',')
              : ''
          }}
        </div>
      </xmDataTableEx>
    </a-card>
  </a-modal>
</template>

<script>
import { Modal } from 'ant-design-vue'
import xmDataTableEx from './table/xm-data-table-ex.vue'
import components from './_import-components/audit-selectfind-modal-import'
const columns = [
  {
    title: '序号',
    dataIndex: 'sortNumber',
    customRender: (text, record, index) => `${index + 1}`,
    width: '40px',
  },
  {
    title: '问题Id',
    dataIndex: 'id',
    sdHidden: true,
  },
  { dataIndex: 'findTitle', title: '问题名称', width: '40%' },
  { dataIndex: 'findCode', title: '问题编号' },
  {
    dataIndex: 'auditedUnitNames',
    title: '被审计单位',
    scopedSlots: { customRender: 'auditedUnitNames' },
  },
  { dataIndex: 'issuedUnits', title: '已下发单位' },
]
export default {
  name: 'AuditSelectfindModal',
  metaInfo: {
    title: 'AuditSelectfindModal',
  },
  components: {
    ...components,
    xmDataTableEx,
  },
  props: {
    // 弹出窗标题
    title: {
      type: String,
      default: '请选择',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '1800px',
    },
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columns,
      bodyStyle: {
        padding: 0,
        minHight: '700px',
      },
      filterExpressions: [],
    }
  },
  methods: {
    handleOk(e) {
      if (this.$refs.findDataTable.getSelectedRowKeys().length === 0) {
        Modal.warning({
          title: '提示',
          content: '请选择项目!',
        })
        return false
      }
      this.$emit(
        'Selectedfind',
        this.$refs.findDataTable.getSelectedRowKeys(),
        this.$refs.findDataTable.getSelectedRows()
      )
      this.$emit('closefind')
    },
    handleCancel(e) {
      // this.$parent.visible = !this.$parent.visible
      // this.$parent.visibleY = !this.$parent.visibleY
      this.$emit('closefind')
    },
    processRes(data) {
      let index = 0
      data.data.forEach((item) => {
        item.id = this.$refs.findDataTable.localPagination.current + '-' + index
        index++
      })
      return data
    },
    // 翻页操作
    onChange(pagination, filters, sorter) {
      this.pageSize = pagination.pageSize
      this.startPosition = (pagination.current - 1) * pagination.pageSize
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
:global(.findDataTablexm) {
  :global(.header_sd-data-table_common) {
    padding-right: 15px;
  }
}
</style>