diantou/src_product/iam/audit/dataUphold/audit-class-table.vue

<template>
  <div>
    <a-modal
      class="modalselectmaintain"
      :body-style="bodyStyle"
      :title="title"
      :destroy-on-close="true"
      :visible="visible"
      :width="modalWidth"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <audit-advanced-query
        :expand="expand"
        :search-data="formData"
        :ref-name="searchform"
        :search-style="{ height: 'auto', left: '21px', top: '105px' }"
        :search-fun="handleSearch"
        @searchedClick="searchedClick"
      >
        <template>
          <a-col :span="12">
            <a-form-model-item :label="'分类编号'" prop="categoryId">
              <a-input v-model="formData.categoryId" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="'分类名称'" prop="categoryName">
              <a-input v-model="formData.categoryName" allow-clear />
            </a-form-model-item>
          </a-col>
        </template>
      </audit-advanced-query>
      <!-- 列表 -->
      <sd-data-table-ex
        ref="SJMXDataTable"
        :show-advance-btn="true"
        form-id="iamDataCategory"
        page-id="audit/maintain/iamDataCategory"
        :pagination="{ pageSize: 10 }"
        :filter-expressions="filterExpressions"
        :check-type="'checkbox'"
        :columns="columns"
        :show-advance-query="true"
        :search-fields="['categoryName', 'categoryId']"
        show-selection
        :process-res="processRes"
        @searchbtnClick="searchbtnClick"
        @onChange="onChange"
      >
      </sd-data-table-ex>
    </a-modal>
  </div>
</template>

<script>
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'
import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
import sdDataTableEx from '@/common/components/sd-data-table-ex.vue'
import { message } from 'ant-design-vue'

const columns = [
  {
    dataIndex: 'id',
    sdHidden: true,
  },
  {
    dataIndex: 'parentId',
    sdHidden: true,
  },

  {
    title: '分类编号',
    dataIndex: 'categoryId',
  },
  {
    title: '分类名称',
    dataIndex: 'categoryName',
    scopedSlots: { customRender: 'categoryName' },
  },
  {
    title: '权重排序',
    dataIndex: 'weightNum',
  },
  {
    title: '分类描述',
    dataIndex: 'categoryDesc',
  },
]
export default {
  name: 'AuditClassTable',
  metaInfo: {
    title: '数据分类选择器',
  },
  components: {
    auditAdvancedQuery,
    sdDataTableEx,
  },
  mixins: [auditAdvancedQueryMixins],
  props: {
    // 弹出窗标题
    title: {
      type: String,
      default: '数据分类选择器',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '1200px',
    },
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
    selectType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      bodyStyle: {
        minHeight: '700px',
      },
      // 列表展示用
      columns,

      // 高级搜索
      searchform: 'searchform',
      expand: false,
      // 列表展示过滤条件
      filterExpressions: [],
      formData: {
        categoryName: '',
        categoryId: '',
      },
      period: [],
    }
  },
  methods: {
    processRes(data) {
      let index = 0
      data.data.forEach((item) => {
        item.id = this.$refs.SJMXDataTable.localPagination.current + '-' + index
        index++
      })
      return data
    },
    handleOk(e) {
      const rowKeys = this.$refs.SJMXDataTable.getSelectedRowKeys()
      if (rowKeys.length > 1 && this.selectType !== 'radio') {
        return message.warning('最多可选一个分类')
      }
      this.$parent.visible = !this.$parent.visible
      this.$parent.flTableShow = !this.$parent.flTableShow
      // 列表选择事件，返回选择的数据
      this.$emit(
        'listMxSelected',
        this.$refs.SJMXDataTable.getSelectedRowKeys(),
        this.$refs.SJMXDataTable.getSelectedRows()
      )
    },
    handleCancel(e) {
      this.$parent.visible = !this.$parent.visible
      this.$parent.flTableShow = !this.$parent.flTableShow
    },
    // 翻页操作
    onChange(pagination, filters, sorter) {
      this.pageSize = pagination.pageSize
      this.startPosition = (pagination.current - 1) * pagination.pageSize
    },
    // 开启关闭
    searchedClick() {
      this.expand = false
    },
    handleSearch() {
      const formData = this.formData
      // 获取当前表格过滤条件
      this.filterExpressions = []
      // 获取高级搜索的数据
      // 开始修改
      if (formData !== null) {
        if (this.formData.categoryId) {
          this.filterExpressions.push({
            dataType: 'str',
            name: 'categoryId',
            op: 'like',
            stringValue: `${this.formData.categoryId}`,
          })
        }

        if (this.formData.categoryName) {
          this.filterExpressions.push({
            dataType: 'str',
            name: 'categoryName',
            op: 'like',
            stringValue: `${this.formData.categoryName}`,
          })
        }
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
:global(.modalselectmaintain) {
  :global(.ant-modal-body) {
    overflow-x: hidden;
  }
}
</style>