antdesign vue通用表单生成页面

效果图效果图

由于涉及企业敏感信息，信息进行了打码，还请多多包涵。。。

点击左侧菜单树，右侧加载不同table，并且绑定列名不同(说明：前两列企业名称和城市名称固定不变)

技术思路

左侧菜单为标识，控制表单页面的布局和模块显示，字段显示隐藏，可根据下面2附图加深理解，由于信息敏感问题，暂时不提供表结构和数据，如有需要，请邮件[email protected]联系博主

commonForm.vue

vue代码

<template>
  <div class="bgwhite" ref="bgwhite">
    <div class="headerText"><a-icon type="unordered-list"></a-icon> {{ directoryName }}</div>
    <a-divider />
    <div class="top">
      <div class="search_item" v-if="postParams.isExistsenp === 1">
        <label class="searchLable">城市名称：</label>
        <a-tree-select
          style="width: 183px"
          v-model="searchParams.regionCode"
          :replace-fields="parentReplaceFields"
          :tree-data="treeData"
          :dropdown-style="{ maxHeight: '800px', overflow: 'auto' }"
          placeholder="请选择城市"
        >
        </a-tree-select>
      </div>
      <div class="search_item" v-if="postParams.isExistsenp === 1">
        <label class="searchLable">企业名称：</label>
        <a-input type="text" v-model="searchParams.enpName" placeholder="请输入企业名称" />
      </div>
      <div class="search_item" v-for="(field, index) in dynamicSearchForm" :key="index">
        <label class="searchLable">{{ field.itemDesc }}： </label>
        <template v-if="field.htmlType === 'input'">
          <a-date-picker
            v-if="field.itemDatatype === 'date-year'"
            mode="year"
            format="YYYY"
            allowClear
            v-model="searchParams[`${field.uriItem}Date`]"
            :placeholder="`请选择${field.itemDesc}`"
            style="width: 100%"
            :open="yearPicker"
            :disabledDate="disabledYearDate"
            @openChange="openYearChange"
            @panelChange="(date) => panelYearChange(date, field.uriItem)"
          />
          <a-month-picker
            v-else-if="field.itemDatatype === 'date-month'"
            mode="month"
            format="YYYY-MM"
            allowClear
            v-model="searchParams[`${field.uriItem}Date`]"
            :placeholder="`请选择${field.itemDesc}`"
            style="width: 100%"
            @change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
          />
          <a-date-picker
            v-else-if="field.itemDatatype === 'date-day'"
            mode="date"
            format="YYYY-MM-DD"
            allowClear
            v-model="searchParams[`${field.uriItem}Date`]"
            :placeholder="`请选择${field.itemDesc}`"
            style="width: 100%"
            @change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
          />
          <a-date-picker
            v-else-if="field.itemDatatype === 'date-hour'"
            format="YYYY-MM-DD HH"
            allowClear
            mode="time"
            v-model="searchParams[`${field.uriItem}Date`]"
            :placeholder="`请选择${field.itemDesc}`"
            style="width: 100%"
            @change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
          />
          <a-date-picker
            v-else-if="field.itemDatatype === 'date-minute'"
            mode="time"
            format="YYYY-MM-DD HH:mm"
            allowClear
            v-model="searchParams[`${field.uriItem}Date`]"
            :placeholder="`请选择${field.itemDesc}`"
            style="width: 100%"
            @change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
          />
          <a-date-picker
            v-else-if="field.itemDatatype === 'date-second'"
            mode="time"
            format="YYYY-MM-DD HH:mm:ss"
            allowClear
            v-model="searchParams[`${field.uriItem}Date`]"
            :placeholder="`请选择${field.itemDesc}`"
            style="width: 100%"
            @change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
          />
          <a-input-number
            v-model="searchParams[field.uriItem]"
            :placeholder="`请选择${field.itemDesc}`"
            v-else-if="field.itemDatatype === 'number'"
          ></a-input-number>
          <a-input v-model="searchParams[field.uriItem]" :placeholder="`请选择${field.itemDesc}`" v-else></a-input>
        </template>

        <template v-else-if="field.htmlType === 'textarea'">
          <a-textarea v-model="searchParams[field.uriItem]" :placeholder="`请输入${field.itemDesc}`" />
        </template>
        <template v-else-if="field.htmlType === 'select'">
          <a-select
            v-model="searchParams[field.uriItem]"
            :placeholder="`请选择${field.itemDesc}`"
            style="width: 183px"
            :dropdown-style="{ maxHeight: '240px', overflow: 'auto' }"
          >
            <a-select-option v-for="(item, zindex) in field.options" :key="zindex" :value="item.value">{{
              item.name
            }}</a-select-option>
          </a-select>
        </template>
        <template v-else-if="field.htmlType === 'radio'">
          <a-radio-group v-model="searchParams[field.uriItem]">
            <a-radio v-for="(item, rindex) in ZMD_YN" :key="rindex" :value="item.value">
              {{ item.name }}
            </a-radio>
          </a-radio-group>
        </template>
      </div>
      <div class="search_item">
        <a-button type="primary" v-action:query @click="handleSearch">查询</a-button>
        <a-button type="primary" v-action:query @click="handleExport">导出</a-button>
      </div>
    </div>
    <div class="mid">
      <div class="mid_header">
        <div class="mid_header_item">
          <a-button type="primary" v-action:add @click="handleAdd">新增</a-button>
          <a-button type="primary" v-action:edit @click="handleEdit">编辑</a-button>
          <a-button type="primary"
                    v-action:relation
                    @click="handleRelation"
                    v-if="postParams.isExistsenp === 1"
          >智能关联企业</a-button
          >
          <a-button type="primary" v-action:import @click="handleImport">批量入库</a-button>
          <a-button type="primary" v-action:back @click="handleBack">批量置回</a-button>
          <a-button type="primary" v-action:del @click="handleDel">批量删除</a-button>
        </div>
      </div>
      <a-table
        id="apptable"
        row-key="ids"
        :columns="columns"
        :data-source="data"
        :bordered="true"
        :pagination="pagination"
        :row-selection="rowSelection"
        :loading="isLoading"
        :scroll="{ x: 1100, y: tableH }"
        @change="TableChange"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="enpName" slot-scope="text, record">
          <a @click="OpenDetailInfo(record.ids)">{{ text }} </a>
        </span>
        <span slot="operation" slot-scope="text, record">
          <a @click="openModal(record.ids, record.enpName)"> 选择 </a><span>{{ record.relationEnpName }}</span>
        </span>
      </a-table>
      <a-modal
        :width="1080"
        centered
        v-drag-modal
        v-model="visible"
        :title="modalTitle"
        :destroyOnClose="true"
        @ok="handleOk"
        :footer="showFooter === true ? null : undefined"
      >
        <infoModal
          ref="childModal"
          :modalTitle="modalTitle"
          :form="form"
          :contentId="id"
          :postParams="postParams"
          :infoId="keyWord"
          :selectedId="selectedId"
        />
      </a-modal>
      <a-modal
        width="70%"
        centered
        v-drag-modal
        v-model="tableVisible"
        :title="tableModalTitle"
        :destroyOnClose="true"
        @ok="handletableOk"
        :footer="showFooter === true ? null : undefined"
      >
        <tableForm
          ref="childTableModal"
          :tableModalTitle="tableModalTitle"
          :form="form"
          :contentId="id"
          :postParams="postParams"
          :infoId="keyWord"
          :selectedId="selectedId"
        />
      </a-modal>
      <a-modal
        :width="900"
        centered
        v-drag-modal
        v-model="relationVisible"
        title="智能关联企业"
        :destroyOnClose="true"
        @ok="handleRelationOk"
      >
        <RelationModal ref="childRelationModal" :infoId="keyWord" />
      </a-modal>
      <a-modal
        :width="900"
        centered
        v-drag-modal
        v-model="relationInfoVisible"
        title="选择关联企业"
        :destroyOnClose="true"
      ><RelationInfoModal
         ref="childRelationInfoModal"
         :infoId="keyWord"
         :selectedId="selectedId"
         :selectedEnpName="selectedEnpName"
       />
        <template #footer>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleRelationInfoOk(1)">确定关联</a-button>
          <a-button type="primary" @click="handleRelationInfoOk(0)">取消关联</a-button>
        </template>
      </a-modal>
    </div>
  </div>
</template>

JS部分

<script>
import {
  selectResourceIdentifier,
  selectResourceField,
  queryCommonDataById,
  deleteData,
  queryCommonData,
  addData,
  updateData,
  batchEnterCommonData,
  batchPutBackCommonData,
  saveRelateEnterprise,
  getRegionTreeData,
  exportData,
  deleteRelateEnterprise,
  batchSave,
  batchUpdate
} from '@/dataCenter/commonConfig/infomationManage-api'
import moment from 'moment'
import { exportTableHead } from '@/assets/js/common'
const columns = [
  {
    title: '序号',
    align: 'center',
    scopedSlots: { customRender: 'serial' },
    width: 50,
    checked: true,
    fixed: 'left'
  }
]
const cols = [
  {
    title: '企业名称',
    align: 'left',
    dataIndex: 'enpName',
    scopedSlots: { customRender: 'enpName' },
    width: 220,
    checked: true,
    fixed: 'left'
  },
  {
    title: '城市名称',
    align: 'center',
    dataIndex: 'regionName',
    width: 150,
    checked: true,
    fixed: 'left'
  }
]
const statusMap = {
  0: {
    color: 'red',
    text: '否'
  },
  1: {
    color: 'green',
    text: '是'
  }
}
export default {
  components: {
    infoModal: () => import('@/dataCenter/commonConfig/infomationManageModal'),
    RelationModal: () => import('@/dataCenter/commonConfig/relationEnpModal'),
    RelationInfoModal: () => import('@/dataCenter/commonConfig/relationEnpInfoModal'),
    tableForm: () => import('@/dataCenter/commonConfig/tableForm')
  },
  props: {
    keyWord: {
      type: String,
      default: null
    },
    directoryName: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      columns,
      parentReplaceFields: {
        title: 'regionName',
        value: 'regionCode'
      },
      searchParams: {
        regionCode: this.$store.getters.getLngAndLat.regionCode,
        enpName: ''
      },
      dynamicSearchForm: [],
      postParams: {
        isExistsenp: 0,
        isExistFile: 0,
        colLayout: ''
      },
      treeData: [],
      modalTitle: '',
      visible: false,
      relationInfoVisible: false,
      relationVisible: false,
      tableModalTitle: '',
      tableVisible: false,
      isLoading: false,
      selectedId: '',
      id: '',
      tablename: '',
      selectedEnpName: '',
      selectedRowsArr: [], // 弹窗选中行
      selectedRowKeys: [],
      pagination: {
        current: 1,
        pageSize: 15,
        total: 0,
        showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
      },
      data: [],
      form: {
        ids: '',
        keyWord: '',
        uniCode: '',
        enpName: '',
        regionCode: this.$store.getters.getLngAndLat.regionCode,
        regionName: this.$store.getters.getLngAndLat.regionName,
        remark: null,
        status: 1,
        oldIds: null
      },
      yearPicker: false,
      showFooter: false,
      tableH: 500,
      hasChild: false
    }
  },
  computed: {
    rowSelection () {
      const { selectedRowKeys } = this
      return {
        columnWidth: 40,
        selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusColorFilter (type) {
      return statusMap[type].color
    }
  },
  watch: {
    keyWord (a) {
      this.getIdByUriId()
      this.getRegionTreeData()
    }
  },
  mounted () {
    this.getIdByUriId()
    this.getRegionTreeData()
  },
  methods: {
    resize () {
      const bgwhite = this.$refs.bgwhite.clientHeight
      const top = this.$refs.bgwhite.querySelector('.top').clientHeight
      this.tableH = bgwhite - top - 200
    },
    getIdByUriId () {
      this.isLoading = true
      const params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        uriId: this.keyWord
      }
      selectResourceIdentifier(params)
        .then((res) => {
          if (res.result.list.length > 0) {
            this.id = res.result.list[0].id
            this.postParams.isExistsenp = res.result.list[0].isExistsenp
            this.postParams.isExistFile = res.result.list[0].isExistsfile
            this.postParams.colLayout = res.result.list[0].colLayout
            this.tablename = res.result.list[0].useTable
            if (res.result.list[0].childcount > 0) {
              this.hasChild = true
            } else { this.hasChild = false }
            this.getQueryConditions(this.id)
            this.getListColumns(this.id)
          }
        })
        .catch((err) => console.log(err))
    },
    getRegionTreeData () {
      getRegionTreeData()
        .then((res) => {
          this.treeData = res.result
        })
        .catch((err) => console.log(err))
    },
    getQueryConditions (id) {
      this.dynamicSearchForm = {}
      this.searchParams = {
        regionCode: this.$store.getters.getLngAndLat.regionCode,
        enpName: ''
      }
      const params = {
        pageNum: 0,
        isQuery: 1,
        uriId: id
      }
      selectResourceField(params)
        .then((res) => {
          this.dynamicSearchForm = res.result.list
          this.dynamicSearchForm.forEach((el, index) => {
            if (el.htmlType === 'select') {
              const selectAttr = []
              var names = el.itemNames.split('|')
              var codes = el.itemCodes.split('|')
              names.forEach((val, index) => {
                selectAttr.push({
                  name: val,
                  value: codes[index]
                })
              })
              el.options = selectAttr
            }
            if (el.itemDatatype.includes('date-')) {
              // this.$set(this.searchParams, el.uriItem, moment().format(this.dealFormat(el.itemDatatype)))
              // this.$set(this.searchParams, `${el.uriItem}Date`, moment())
              this.$set(this.searchParams, el.uriItem, '')
              this.$set(this.searchParams, `${el.uriItem}Date`, null)
            }
          })
          setTimeout(() => {
            this.resize()
          }, 200)
        })
        .catch((err) => console.log(err))
    },
    dealFormat (type) {
      switch (type) {
        case 'date-year':
          return 'YYYY'
        case 'date-month':
          return 'YYYY-MM'
        case 'date-day':
          return 'YYYY-MM-DD'
        case 'date-hour':
          return 'YYYY-MM-DD HH'
        case 'date-minute':
          return 'YYYY-MM-DD HH:mm'
        case 'date-second':
          return 'YYYY-MM-DD HH:mm:ss'
      }
    },
    handleDateChange (dateStr, uriItem) {
      this.$set(this.searchParams, uriItem, dateStr)
    },
    getListColumns (id) {
      this.selectedRowKeys = []
      this.selectedRowsArr = []
      const params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        keyWord: this.keyWord,
        ...this.searchParams
      }
      queryCommonData(params).then((res) => {
        if (res.result !== null) {
          this.data = res.result.records
          this.pagination.total = res.result.total
          this.isLoading = false
        }
      })
      selectResourceField({ pageNum: 0, isShow: 1, uriId: id })
        .then((res) => {
          this.columns = [...columns]
          if (this.postParams.isExistsenp === 1) {
            this.columns = this.columns.concat(cols)
          }
          res.result.list.forEach((el) => {
            let textAlign = 'center'
            if (el.textAlign === '2') {
              textAlign = 'right'
            } else if (el.textAlign === '3') {
              textAlign = 'left'
            }
            if (el.itemDesc.includes('是否')) {
              this.columns.push({
                title: el.itemDesc,
                customRender: (i, row) => {
                  return (
                    <a-tag color={row[el.uriItem] === '1' ? 'green' : 'red'}>
                      {row[el.uriItem] === '1' ? '是' : '否'}
                    </a-tag>
                  )
                },
                align: 'center',
                width: 150,
                checked: true
              })
            } else {
              this.columns.push({
                title: el.itemDesc,
                dataIndex: el.uriItem,
                align: textAlign,
                width: el.itemDesc.length > 10 ? 260 : 200,
                ellipsis: true,
                customRender: (text, row) => {
                  return (
                    <a-tooltip placement="topLeft" title={text}>
                      {text}
                    </a-tooltip>
                  )
                },
                checked: true
              })
            }
          })
          if (this.postParams.isExistsenp === 1) {
            this.columns.push({
              title: '关联的企业名称',
              align: 'left',
              scopedSlots: { customRender: 'operation' },
              width: 200,
              checked: true,
              fixed: 'right'
            })
          }
        })
        .catch((err) => console.log(err))
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowsArr = selectedRows
    },
    // 年
    openYearChange (status) {
      this.yearPicker = status
    },
    panelYearChange (value, uriItem) {
      this.$set(this.searchParams, uriItem, value.format('YYYY'))
      this.$set(this.searchParams, `${uriItem}Date`, value)
      this.yearPicker = !this.yearPicker
    },
    disabledYearDate (current) {
      return current && current > moment().endOf('year')
    },
    // 分页改变
    TableChange (e) {
      this.pagination.current = e.current
      this.getListColumns(this.id)
    },

    // 查询
    handleSearch () {
      this.pagination.current = 1
      this.getListColumns(this.id)
    },
    handletableOk () {
      if (this.tableModalTitle === '新增') {
        this.$refs.childTableModal.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.getTenantId
            this.form.keyWord = this.keyWord
            this.form.childMap = this.$refs.childTableModal.childMap
            delete this.form.dcreate
            batchSave(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success('保存成功！')
                this.tableVisible = false
                this.getListColumns(this.id)
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            return false
          }
        })
      } else {
        this.$refs.childTableModal.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.getTenantId
            this.form.childMap = this.$refs.childTableModal.childMap
            this.form.childMap.forEach(item => {
              console.log()
              delete item.dcreate
            })
            delete this.form.dcreate
            batchUpdate(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success('保存成功！')
                this.tableVisible = false
                this.getListColumns(this.id)
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            return false
          }
        })
      }
    },
    // 新增保存
    handleOk () {
      if (this.modalTitle === '新增') {
        this.$refs.childModal.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.getTenantId
            this.form.keyWord = this.keyWord
            addData(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success('保存成功！')
                this.visible = false
                this.getListColumns(this.id)
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            return false
          }
        })
      } else {
        this.$refs.childModal.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.getTenantId
            console.log(this.form)
            updateData(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success('保存成功！')
                this.visible = false
                this.getListColumns(this.id)
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            return false
          }
        })
      }
    },
    openModal (ids, enpName) {
      this.relationInfoVisible = true
      this.selectedId = ids
      this.selectedEnpName = enpName
    },
    handleCancel () {
      this.relationInfoVisible = false
    },
    handleRelationOk () {
      const enpRelationList = []
      const childData = this.$refs.childRelationModal.data
      childData.forEach((el) => {
        const params = {
          id: '',
          datatableName: this.tablename,
          datatableId: el.ids,
          marked: this.keyWord
        }
        el.baseInfoList.forEach((element) => {
          params.enpcode = element.enpCode
          params.credit_code = element.creditCode
        })
        enpRelationList.push(params)
      })
      saveRelateEnterprise(enpRelationList).then((res) => {
        if (res.code === 200) {
          this.$message.success('智能关联成功！')
          this.relationVisible = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleRelationInfoOk (status) {
      const _that = this
      const enpRelationList = []
      if (_that.$refs.childRelationInfoModal.selectedRowsArr.length === 1) {
        this.$confirm({
          title: status === 1 ? '确定要关联吗？' : '确定要取消关联吗？',
          onOk () {
            const childData = _that.$refs.childRelationInfoModal.selectedRowsArr[0]
            const params = {
              id: '',
              datatableName: _that.tablename,
              datatableId: _that.selectedId,
              marked: _that.keyWord,
              enpCode: childData.enpCode,
              creditCode: childData.creditCode
            }
            enpRelationList.push(params)
            if (status === 1) {
              saveRelateEnterprise(enpRelationList).then((res) => {
                if (res.code === 200) {
                  _that.$message.success('关联成功！')
                  _that.getListColumns(_that.id)
                  _that.relationInfoVisible = false
                } else {
                  _that.$message.error(res.msg)
                }
              })
            } else if (status === 0) {
              deleteRelateEnterprise({ ids: _that.selectedId, datatableName: _that.tablename }).then((res) => {
                if (res.code === 200) {
                  _that.$message.success('取消关联成功！')
                  _that.getListColumns(_that.id)
                  _that.relationInfoVisible = false
                } else {
                  _that.$message.error(res.msg)
                }
              })
            }
          }
        })
      } else {
        this.$message.warning('请选择一条记录' + (status === 1 ? '关联' : '取消关联'))
        return false
      }
    },
    // 新增
    handleAdd () {
      this.showFooter = false
      this.form = {
        ids: '',
        keyWord: '',
        uniCode: '',
        enpName: '',
        regionCode: this.$store.getters.getLngAndLat.regionCode,
        regionName: this.$store.getters.getLngAndLat.regionName,
        remark: null,
        status: 1,
        oldIds: null
      }
      if (!this.hasChild) {
        this.modalTitle = '新增'
        this.visible = true
      } else {
        this.tableModalTitle = '新增'
        this.tableVisible = true
      }
    },
    OpenDetailInfo (ids) {
      this.showFooter = true
      if (!this.hasChild) {
        this.modalTitle = '查看'
        this.visible = true
      } else {
        this.tableModalTitle = '查看'
        this.tableVisible = true
      }
      queryCommonDataById(ids, { keyWord: this.keyWord })
        .then((res) => {
          for (const item in res.result) {
            this.$set(this.form, item, res.result[item])
          }
        })
        .catch((err) => console.log(err))
      this.form.ids = ids
      this.selectedId = ids
    },
    // 编辑
    handleEdit () {
      if (this.selectedRowsArr.length === 1) {
        if (!this.hasChild) {
          this.modalTitle = '编辑'
          this.visible = true
        } else {
          this.tableModalTitle = '编辑'
          this.tableVisible = true
        }
        this.selectedId = this.selectedRowsArr[0].ids
        this.form.ids = this.selectedRowsArr[0].ids
        queryCommonDataById(this.selectedRowsArr[0].ids, { keyWord: this.keyWord }).then((res) => {
          for (const item in res.result) {
            this.$set(this.form, item, res.result[item])
          }
          this.showFooter = false
        })
      } else {
        this.$message.warning('请选择一条数据！')
        return false
      }
    },

    // 删除
    handleDel () {
      if (this.selectedRowsArr.length >= 1) {
        const _that = this
        this.$confirm({
          title: '确定要删除吗？',
          onOk () {
            let ids = ''
            _that.selectedRowsArr.forEach((item) => {
              ids += item.ids + ','
            })
            ids = ids.substring(0, ids.length - 1)
            deleteData({ enpDataIds: ids, keyWord: _that.keyWord }).then((res) => {
              if (res.code === 200) {
                _that.$message.success('删除成功！')
                _that.getListColumns(_that.id)
              } else {
                _that.$message.error(res.msg)
              }
            })
          }
        })
      } else {
        this.$message.warning('请至少选择一条数据！')
      }
    },
    handleRelation () {
      this.relationVisible = true
    },
    saveRelateEnterprise () {
      if (this.selectedRowsArr.length >= 1) {
        const _that = this
        this.$confirm({
          title: '确定要关联吗？',
          onOk () {
            const enpRelationList = []
            _that.enpselectedRowsArr.forEach((item) => {
              enpRelationList.push({
                id: item.id,
                datatableName: item.datatableName,
                datatableId: item.datatableId,
                marked: _that.keyWord,
                enpCode: item.enpCode,
                credit_code: item.credit_code
              })
            })
            saveRelateEnterprise({ enpRelationList: enpRelationList }).then((res) => {
              if (res.code === 200) {
                _that.$message.success('关联成功！')
              } else {
                _that.$message.error(res.msg)
              }
            })
          }
        })
      } else {
        this.$message.warning('请至少选择一条数据！')
      }
    },
    handleBack () {
      if (this.selectedRowsArr.length >= 1) {
        const _that = this
        this.$confirm({
          title: '确定要批量置回吗？',
          onOk () {
            let ids = ''
            _that.selectedRowsArr.forEach((item) => {
              ids += item.ids + ','
            })
            ids = ids.substring(0, ids.length - 1)
            batchPutBackCommonData({ enpDataIds: ids, keyWord: _that.keyWord }).then((res) => {
              if (res.code === 200) {
                _that.$message.success('置回成功！')
              } else {
                _that.$message.error(res.msg)
              }
            })
          }
        })
      } else {
        this.$message.warning('请至少选择一条数据！')
      }
    },
    handleExport () {
      let columnNames = exportTableHead('apptable')
      if (this.postParams.isExistsenp === 1) {
        columnNames = [...columnNames[1].slice(2), ...columnNames[0].slice(4, columnNames[0].length - 1)]
      } else if (this.postParams.isExistsenp === 0) {
        columnNames = columnNames[0].slice(2)
      }
      console.log(columnNames)
      exportData({
        keyWord: this.keyWord,
        columnCodes: columnNames.map((el) => el.value).join(','),
        columnNames: columnNames.map((el) => el.name).join(',')
      })
        .then((response) => {
          if (response) {
            const dateStr = moment(new Date()).format('YYYYMMDDHHmmss')
            const aLink = document.createElement('a')
            const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
            aLink.href = window.URL.createObjectURL(blob)
            aLink.setAttribute('download', `资源信息管理_${dateStr}.xlsx`)
            aLink.click()
            window.URL.revokeObjectURL(blob)
          } else {
            this.$message.error('导出失败！')
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message.error('导出失败！')
        })
    },
    handleImport () {
      if (this.selectedRowsArr.length >= 1) {
        const _that = this
        this.$confirm({
          title: '确定要批量录入吗？',
          onOk () {
            let ids = ''
            _that.selectedRowsArr.forEach((item) => {
              ids += item.ids + ','
            })
            ids = ids.substring(0, ids.length - 1)
            batchEnterCommonData({ enpDataIds: ids, keyWord: _that.keyWord }).then((res) => {
              if (res.code === 200) {
                _that.$message.success('录入成功！')
              } else {
                _that.$message.error(res.msg)
              }
            })
          }
        })
      } else {
        this.$message.warning('请至少选择一条数据！')
      }
    }
  }
}
</script>

CSS部分

  <style lang="less" scoped>
.layout {
  height: 100%;
  padding: 0;

  ::v-deep .ant-row {
    height: 100%;

    .gutter-row {
      height: 100%;
    }
  }

  .bgwhite {
    height: 100%;
    background: #fff;
    overflow: hidden;

    .treeBox {
      padding: 15px;
      height: calc(100% - 46px);
      overflow-y: auto;
    }

    .headerText {
      line-height: 46px;
      padding: 0 20px;
      font-weight: 600;
      font-size: 15px;
    }

    ::v-deep .ant-divider-horizontal {
      margin: 0;
    }

    ::v-deep .ant-select {
      width: 100%;
    }
  }

  .top {
    padding: 15px 20px 5px;
    margin-bottom: -5px;
  }

  .mid {
    padding: 10px 20px 20px;
    .mid_header {
      ::v-deep .ant-btn {
        margin-right: 0;
      }
      .ant-btn {
        margin-right: 8px;
      }
    }
  }

  // 树
  ::v-deep .ant-tree {
    li {
      padding: 1px 0;
    }

    .ant-tree-node-content-wrapper {
      width: calc(100% - 24px);
      height: 32px;
      line-height: 32px;
    }
    span.ant-tree-switcher,
    span.ant-tree-iconEle {
      height: 32px;
      line-height: 32px;
    }
  }
}

::v-deep .ant-modal-body {
  max-height: 520px;
  overflow-y: auto;
}
</style>