aiccs/src/views/expelled/notice/index.vue

<template>
  <div class="page">
    <edit-table
      ref="EditTable"
      v-model="data"
      :table-prop="tableProp"
      :fields="fields"
      :dialog-prop="dialogProp"
      :show-search-form="true"
      row-key="id"
      :search-form-prop="searchFormProp"
      :form-prop="formProp"
      :search-loader="searchLoader"
      @update:selected="(value)=>{selected = value}"
    >
      <template v-slot:divider="scope">
        <div class="divider">
          <span class="text">{{ scope.getPropValue(scope.field.label) }}</span>
        </div>
      </template>
      <template v-slot:table-top="btns">
        <div style="margin-bottom: 12px;">
          <el-button
            type="primary"
            @click="() => {
              visible = true
              isViewDetail = false
            }"
          >发起除名告知</el-button>
        </div>
      </template>
      <template v-slot:ExplusionInfo="scope">
        <div style="margin-bottom: 12px;">
          <div>
            <p style="text-indent: 2em">您拟对{{ removeEntBases }}等市场主体进行除名处理，请按照相关的法定法规，作出除名决定的事实、理由、依据、后果，并将以上情况告知拟被除名市场主体。</p>
            <p style="text-indent: 2em">除名告知书无法使用其他方式送达的，市场监管部门应当通过国家企业信用信息公示系统发布除名告知公告。</p>
            <p style="text-indent: 2em">自公告发出之日起，经过三十日，即视为送达。</p>
          </div>
        </div>
      </template>
    </edit-table>
    <el-dialog
      title="市场主体拟除名名单库"
      :visible.sync="visible"
      width="90vw"
      top="153px"
      custom-class="dialog-abnormal-list"
    >
      <ExpelledList :is-components="true" @confirm-remove="confirmRemove" />
    </el-dialog>

    <!-- <el-dialog
      title="市场主体拟除名名单库"
      :visible.sync="openDialog"
      width="90vw"
      top="153px"
      custom-class="dialog-abnormal-list"
    >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item></el-form-item>
    </el-form> -->
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import { expelledNoticeList, expelledNoticeSave } from '@/api/除名公告.js'
import ExpelledList from '@/views/expelled/list/index.vue'
export default {
  components: {
    ExpelledList
  },
  data() {
    return {
      visible: false,
      isViewDetail: false,
      noticeVisible: false,
      expelledDatas: [],
      removeEntBases: '',
      data: [],
      selected: [],
      tableProp: {
        emitLoadOnCreate: true,
        tableConfig: {
          showIndex: true,
          selection: false,
          indexWidth: '80px',
          handlerWidth: '120px',
          showPagination: true,
          tableSelectionProps: {
            selectable: (row, index) => {
              return row.status === '1'
            }
          },
          tableProps: {
            headerCellStyle: { background: '#F5F5F5!important', color: '#333333!important', padding: '0px' },
            headerRowStyle: { height: '48px' },
            rowStyle: { height: '48px' },
            cellStyle: { padding: '16px 0', color: '#333' }
          }
        },
        buttons: [
          {
            label: '查看详情',
            type: 'text',
            show: true,
            handler: (scope, { row }) => {
              this.$refs.EditTable.editReady(row)
              this.isViewDetail = true
            }
          }
        ]
      },
      searchFormProp: {
        formConfig: {
          labelWidth: '100px',
          labelPosition: 'right',
          gutter: 32
        }
      },
      formProp: {
        formConfig: {
          labelWidth: '210px',
          labelPosition: 'right',
          gutter: 32,
          buttonPosition: 'right'
        },
        buttons: [
          {
            label: '返回',
            type: 'primary',
            buttonProps: {
              plain: true
            },
            handler: (scope, { row }) => {
              this.noticeVisible = false
              this.$refs.EditTable.cancelEdit()
            }
          },
          {
            label: '同意',
            type: 'primary',
            handler: (scope, { row }) => {
              return scope.formInstance.submitForm().then((formData) => {
                return this.$confirm('是否继续提交', '提示', {
                  type: 'info',
                  customClass: 'type-1'
                })
                  .then(() => {
                    return (() => {
                      return expelledNoticeSave
                    })()({
                      ...formData,
                      entIds: this.expelledDatas.map((item) => {
                        return item.id
                      }),
                      bizType: '1'
                    })
                      .then(() => {
                        this.$message.success('保存成功')
                        this.$refs.EditTable.editConfirm(formData)
                        this.noticeVisible = false
                        return this.$refs.EditTable.search({ reset: true })
                      })
                      .catch(error => {
                        this.$message.error('保存失败: ' + (error.message || '未知错误'))
                        throw error
                      })
                  })
                  .catch(error => {
                    // 如果只是取消操作，不抛出错误
                    if (error !== 'cancel') {
                      throw error
                    }
                  })
              })
            },
            show: () => {
              return !this.isViewDetail
            }
          }
        ]
      },
      dialogProp: {
        title: (scope) => {
          if (scope.editRowClone && scope.editRowClone._isAdd) {
            return !scope.editRowClone.selected ? '除名告知通知书管理' : '除名告知通知书管理'
          } else if (scope.editRowClone) {
            return '除名告知通知书管理'
          }
          return '除名告知通知书管理'
        },
        width: '1200px',
        customClass: 'dialog-abnormal-list'
      },
      fields: [
        {
          type: 'input',
          label: '业务号',
          prop: 'bizNo',
          span: 9,
          showInForm: ({ meta }) => {
            return meta.isSearchForm === true
          }
          // showInTable: false
        },
        {
          type: 'buttons',
          showInTable: false,
          showInForm: ({ meta }) => {
            return meta.isSearchForm === true
          },
          hiddenLabel: true,
          label: '搜索操作',
          prop: '搜索操作',
          span: 6,
          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,
                  resetData: {
                    status: '1'
                  }
                })
              }
            }
          ]
        },
        {
          type: 'slot',
          label: '',
          slotName: 'ExplusionInfo',
          showInTable: false,
          showInForm: ({ meta }) => {
            return meta.isForm === true && this.noticeVisible === true
          },
          formItemProp: {
            labelWidth: '0px'
          }
        },
        {
          type: 'divider',
          label: '除名告知通知书管理',
          showInTable: false,
          showInForm: ({ meta }) => {
            return meta.isForm === true
          }
        },
        // {
        //   type: 'input',
        //   label: '业务号',
        //   prop: 'bizNo',
        //   required: true,
        //   showInForm: ({ meta }) => {
        //     return meta.isForm === true
        //   },
        //   showInTable: true
        // },
        {
          type: 'input',
          label: '除名决定的事实',
          prop: 'truth',
          required: true,
          showInForm: ({ meta }) => {
            return meta.isForm === true
          },
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'input',
          label: '除名决定的理由',
          prop: 'reason',
          required: true,
          showInForm: ({ meta }) => {
            return meta.isForm === true
          },
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'input',
          label: '除名决定的依据',
          prop: 'law',
          required: true,
          showInForm: ({ meta }) => {
            return meta.isForm === true
          },
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'input',
          label: '除名决定的后果',
          prop: 'result',
          required: true,
          showInForm: ({ meta }) => {
            return meta.isForm === true
          },
          tableProps: {
            showOverflowTooltip: true
          }
        }
      ]
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 使用 $nextTick 确保组件完全渲染后再调用
      vm.$nextTick(() => {
        if (vm.$refs.EditTable) {
          vm.$refs.EditTable.search({ reset: true })
        }
      })
    })
  },
  methods: {
    searchLoader(pageParam, parseSearchFormData, instance) {
      return expelledNoticeList({
        size: pageParam.size,
        current: pageParam.current,
        entity: {
          bizType: '1',
          ...parseSearchFormData
        }
      }).then((data) => {
        // 确保每条记录都有必要的属性
        const records = data.data.records.map(record => ({
          ...record,
          _isAdd: record._isAdd || false
        }))
        console.log(records)
        return {
          tableData: records,
          total: data.data.total
        }
      })
    },
    confirmRemove(datas) {
      this.expelledDatas = datas
      console.log(this.expelledDatas)
      for (let i = 0; i < datas.length; i++) {
        if (i >= 10) {
          break
        }
        this.removeEntBases += datas[i].entName + '（' + datas[i].uscc + '）、'
      }
      this.removeEntBases = this.removeEntBases.substring(0, this.removeEntBases.length - 1)
      this.visible = false
      this.noticeVisible = true
      this.$refs.EditTable.editReady({})
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/abnormal-list.scss";
</style>