aiccs/src/views/forceNotice/component/EntList.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="90vw"
    top="153px"
    custom-class="dialog-abnormal-list"
  >
    <edit-table
      v-if="visible"
      v-model="tableData"
      :table-prop="tableProp"
      :fields="fields"
      :show-search-form="true"
      row-key="pripid"
      :search-form-prop="searchFormProp"
      :search-loader="searchLoader"
      :selected.sync="selected"
    />
    <!-- 当没有输入条件时显示提示 -->
    <div v-if="showNoDataMessage" class="no-data-message">请输入条件进行查询！</div>

    <div slot="footer">
      <el-button type="primary" plain @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">办理</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { baseinfoListByRegOrg, getIsUserProp } from '@/api/force'
export default {
  props: {
    type: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      visible: false,
      isExSearch: false,
      tableData: [],
      selected: [],
      showNoDataMessage: false, // 新增属性
      fields: [
        {
          type: 'input',
          label: '统一社会信用代码/注册号',
          prop: 'searchUscc',
          span: 8,
          tableProps: {
            showOverflowTooltip: true,
            formatter: (row, column, cellValue, index) => {
              return `${row.uniscid || row.regNO || ''}`
            }
          }
        },
        {
          type: 'input',
          label: ({ meta }) => {
            return meta.isSearchForm ? '主体名称（模糊）' : '主体名称'
          },
          prop: 'entName',
          span: 8,
          tableProps: {
            showOverflowTooltip: true,
            formatter: (row, column, cellValue, index) => {
              return `${row.entname || ''}`
            }
          }
        },
        {
          type: 'buttons',
          showInTable: false,
          hiddenLabel: true,
          label: '搜索操作',
          prop: '搜索操作',
          span: 8,
          formItemProp: {
            labelWidth: '0px'
          },
          buttons: [
            {
              label: '查询',
              type: 'primary',
              handler: (scope) => {
                const { meta } = scope
                const { _editTable } = meta
                const { editTableInstance } = _editTable
                editTableInstance.search()
              }
            },
            {
              label: '重置',
              type: 'primary',
              buttonProps: {
                plain: true
              },
              handler: (scope) => {
                const { meta } = scope
                const { _editTable } = meta
                const { editTableInstance } = _editTable
                editTableInstance.search({
                  reset: true
                })
              }
            }
          ]
        },
        {
          type: 'input',
          label: '登记机关',
          prop: 'regorgCn',
          span: 6,
          isView: false,
          tableProps: {
            width: '200px',
            formatter: (row, column, cellValue, index) => {
              return `${row.regorgCn || ''}`
            }
          },
          showInForm: false
        },
        {
          type: 'input',
          label: '法定代表人',
          prop: 'leRep',
          span: 6,
          tableProps: {
            formatter: (row, column, cellValue, index) => {
              return `${row.name || ''}`
            }
          },
          showInForm: false
        },
        {
          type: 'input',
          label: '经营地址',
          prop: 'dom',
          span: 10,
          tableProps: {
            showOverflowTooltip: true,
            formatter: (row, column, cellValue, index) => {
              return `${row.dom || ''}`
            }
          },
          showInForm: false
        },
        {
          type: 'input',
          label: '属地机关',
          prop: 'localadm',
          span: 6,
          isView: false,
          tableProps: {
            width: '200px',
            formatter: (row, column, cellValue, index) => {
              return `${row.localadmCn || cellValue}`
            }
          },
          showInForm: false
        }
      ],
      searchFormProp: {
        formConfig: {
          labelWidth: '100px',
          labelPosition: 'right',
          gutter: 32
        }
      },
      tableProp: {
        emitLoadOnCreate: true,
        tableConfig: {
          selection: true,
          // eslint-disable-next-line no-mixed-spaces-and-tabs
      	  tableSelectionProps: {
            reserveSelection: true,
            selectable: (row, index) => {
              return this.selected.length === 0 || this.selected[0] === row
            }
            // eslint-disable-next-line no-mixed-spaces-and-tabs
		      },
          disableSelectAll: false,
          showIndex: true,
          indexWidth: '100px',
          showPagination: true,
          rowKey: 'pripid',
          tableProps: {
            headerCellStyle: { background: '#F5F5F5!important', color: '#333333!important', padding: '0px' },
            headerRowStyle: { height: '48px' },
            rowStyle: { height: '48px' },
            cellStyle: { padding: '16px 0', color: '#333' }
          }
        }
      }
    }
  },
  computed: {
    title() {
      return '经营主体信息'
    }
  },
  created() {
    // 判断是否是管理员
    getIsUserProp().then(res => {
      this.data = {
        ...this.data,
        userProp: res.userProp
      }
    })
  },
  methods: {
    open() {
      this.selected = []
      this.visible = true
    },
    searchLoader(pageParam, parseSearchFormData, instance) {
      const { searchUscc, entName } = parseSearchFormData
      return baseinfoListByRegOrg({
        size: pageParam.size,
        current: pageParam.current,
        entity: {
          ...parseSearchFormData
        }
      }).then((data) => {
        this.showNoDataMessage = !searchUscc && !entName
        return {
          tableData: data.dataPage.records,
          total: data.dataPage.total
        }
      })
    },
    confirm() {
      this.$emit('confirm', this.selected)
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.no-data-message {
  color: red;
  text-align: center; /* 可选：让文字居中 */
  font-size: 16px;     /* 可选：设置字体大小 */
  margin-top: 20px;    /* 可选：增加顶部间距 */
}
</style>