diantou/src_product/iam/audit/borrow/audit-select-project.vue

<template>
  <a-modal
    :class="$style.mainModal"
    :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: '0px',
        top: '120px !important',
        width: 'calc(100% - 40px) !important',
      }"
      :search-fun="handleSearch"
      @searchedClick="searchedClick"
      @resetForm="resetForm"
    >
      <template>
        <a-col :span="12">
          <a-form-model-item :label="'年\u2002\u2002\u2002\u2002度:'">
            <a-date-picker
              v-model="formData.year"
              mode="year"
              format="YYYY"
              :allow-clear="false"
              placeholder="选择年份"
              :input-read-only="true"
              :open="yearShow"
              style-echartclass-open-change="openChange"
              @openChange="openChange"
              @panelChange="panelYearChange"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="'项目名称'" prop="projectName">
            <a-input v-model="formData.projectName" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="'档案编号'" prop="archivesCode">
            <a-input v-model="formData.archivesCode" allow-clear />
          </a-form-model-item>
        </a-col>
      </template>
    </audit-advanced-query>
    <!-- 列表 -->
    <sd-data-table-ex
      ref="SJMXDataTable"
      :show-advance-btn="true"
      form-id="iamArchivesMaintain"
      data-url="api/xcoa-mobile/v1/iamarchivesmaintain/already_file"
      :pagination="{ pageSize: 10 }"
      :filter-expressions="filterExpressions"
      :check-type="'radio'"
      :columns="columns"
      :show-advance-query="true"
      :search-fields="['projectName', 'archivesCode']"
      show-selection
      :process-res="processRes"
      @searchbtnClick="searchbtnClick"
      @onChange="onChange"
    >
    </sd-data-table-ex>
  </a-modal>
</template>

<script>
import moment from 'moment'
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'
import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
import components from './_import-components/audit-select-project-import'
const columns = [
  {
    title: '序号',
    dataIndex: 'sortNumber',
    customRender: (text, record, index) => `${index + 1}`,
    width: '80px',
  },
  {
    title: '归档年度',
    dataIndex: 'filingYear',
    width: '100px',
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    scopedSlots: { customRender: 'islink' },
  },
  {
    title: '档案编号',
    dataIndex: 'archivesCode',
    sorter: true,
    defaultSortOrder: 'descend', // 没有点击任何排序列时，默认的排序列
  },
  {
    title: '所属机构',
    dataIndex: 'createDeptName',
  },
]
export default {
  name: 'AuditSelectProject',
  metaInfo: {
    title: '归档信息',
  },
  components: {
    ...components,
    auditAdvancedQuery,
  },
  mixins: [auditAdvancedQueryMixins],
  props: {
    // 弹出窗标题
    title: {
      type: String,
      default: '归档信息',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '1200px',
    },
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      year: '',
      searchYear: '',
      yearShow: false,
      bodyStyle: {
        // padding: 0,
      },
      // 列表展示用
      columns,

      // 高级搜索
      searchform: 'searchform',
      expand: false,
      // 列表展示过滤条件
      filterExpressions: [],
      formData: {
        modelCode: '',
        modelName: '',
      },
      period: [],
    }
  },
  methods: {
    moment,
    panelYearChange(value) {
      this.year = value
      this.formData.year = value
      this.searchYear = moment(value).format('YYYY')
      this.yearShow = false
    },
    // 弹出日历和关闭日历的回调
    openChange(status) {
      // status是打开或关闭的状态
      if (status) {
        this.yearShow = true
      } else {
        this.yearShow = false
      }
    },
    // 重置年份
    resetForm() {
      this.formData.year = null
      this.searchYear = null
    },
    processRes(data) {
      let index = 0
      data.data.forEach((item) => {
        item.id = this.$refs.SJMXDataTable.localPagination.current + '-' + index
        index++
      })
      return data
    },
    handleOk(e) {
      this.$parent.visible = !this.$parent.visible
      this.$parent.visibleY = !this.$parent.visibleY
      // 列表选择事件，返回选择的数据
      this.$emit(
        'listMxSelected',
        this.$refs.SJMXDataTable.getSelectedRowKeys(),
        this.$refs.SJMXDataTable.getSelectedRows()
      )
    },
    handleCancel(e) {
      this.$parent.visible = !this.$parent.visible
      this.$parent.visibleY = !this.$parent.visibleY
    },
    // 翻页操作
    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.searchYear) {
          this.filterExpressions.push({
            dataType: 'str',
            name: 'searchYear',
            op: 'like',
            stringValue: `${this.searchYear}`,
          })
        }
        // 项目名称
        if (this.formData.projectName) {
          this.filterExpressions.push({
            dataType: 'str',
            name: 'projectName',
            op: 'like',
            stringValue: `${this.formData.projectName}`,
          })
        }
        // 档案编号
        if (this.formData.archivesCode) {
          this.filterExpressions.push({
            dataType: 'str',
            name: 'archivesCode',
            op: 'like',
            stringValue: `${this.formData.archivesCode}`,
          })
        }
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-modal {
  :global(.ant-calendar-picker) {
    width: 100%;
  }
}
</style>