laws_chery_client/src/components/selection/VehicleProjectSelectionDrawer.vue

<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="true"
    @close="onClose"
    :visible="visible"
    :maskClosable="false"
    destroyOnClose
    class="custom-drawer-style">
    <div class="custom-drawer-style-scroll">

      <!--查询区域-->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <!--项目名称-->
            <a-col :md="6" :sm="12">
              <a-form-item :label="$t('projectLibrary.projectName')">
                <j-input :placeholder="$t('pleaseEnter') + $t('projectLibrary.projectName')" v-model="queryParam.projectName"></j-input>
              </a-form-item>
            </a-col>
            <!--工作令编号-->
            <a-col :md="6" :sm="12">
              <a-form-item :label="$t('projectLibrary.workOrderNumber')">
                <j-input :placeholder="$t('pleaseEnter') + $t('projectLibrary.workOrderNumber')" v-model="queryParam.workNumber"></j-input>
              </a-form-item>
            </a-col>
            <!--项目健康状态-->
            <a-col :md="6" :sm="12">
              <a-form-item :label="$t('projectLibrary.projectHealthStatus')">
                <j-dict-select-tag
                  class="box-input"
                  v-model="queryParam.projectHealth"
                  :placeholder="$t('pleaseSelect') + $t('projectLibrary.projectHealthStatus')"
                  :type="'select'"
                  :triggerChange="false"
                  :dictCode="'project_health'" />
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchReset" icon="reload" ghost>{{ $t('reset') }}</a-button>
              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px" v-has="'vehicleItemLibrary:search'">
                {{ $t('query') }}
              </a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <j-table
        :columns="columns"
        :dataSource="dataSource"
        :can-drag="true"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :pagination="ipagination"
        :scroll="{x: '100%'}"
        :loading="loading"
        @change="handleTableChange">
      </j-table>
    </div>

    <div class="custom-drawer-style-bottom-btn">
      <a-button @click="handleCancel" style="margin-bottom: 0;" :loading="loading">{{ $t('close') }}</a-button>
      <a-button @click="handleOk" type="primary" style="margin-bottom: 0;" :loading="loading">
        {{ $t('preservation') }}
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import JTable from '../jero/JTable'
import { JeroListMixin } from '../../mixins/JeroListMixin'

export default {
  name: 'VehicleProjectSelectionDrawer',
  components: { JTable },
  mixins: [JeroListMixin],
  data () {
    return {
      visible: false,
      title: this.$t('projectLibrary.selectProject'),
      width: 1100,
      // 存储表单的数据
      form: {},
      isEdit: false,
      columns: [
        // 项目来源
        {
          dataIndex: 'projectSource_dictText',
          title: this.$t('projectLibrary.vehicleItemLibrary.projectSource'),
          width: 110
        },
        // 项目名称
        {
          dataIndex: 'projectName',
          title: this.$t('projectLibrary.projectName'),
          sorter: true,
          width: 150
        },
        // 工作令编号
        {
          dataIndex: 'workNumber',
          title: this.$t('projectLibrary.workOrderNumber'),
          sorter: true,
          width: 150
        },
        // 项目负责人
        {
          dataIndex: 'projectLeader_dictText',
          title: this.$t('projectLibrary.vehicleItemLibrary.projectLeader'),
          width: 150
        },
        // 项目健康状态
        {
          dataIndex: 'projectHealth_dictText',
          title: this.$t('projectLibrary.projectHealthStatus'),
          width: 120
        }
      ],
      disableMixinCreated: true,
      url: {
        list: '/projectLibrary/lawsProjectLibrary/page'
      }
    }
  },
  methods: {
    open () {
      this.visible = true
      this.loadData(1)
    },
    onClose () {
      this.visible = false
      this.onClearSelected()
    },
    handleCancel () {
      this.onClose()
    },
    handleOk () {
      this.$emit('change', this.selectedRowKeys.join(','))
      this.$emit('listChange', this.selectionRows)
      this.onClose()
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
  min-width: 80px;
}
</style>