AnalysisSystemForRadionuclide_vue/src/views/system/stationList.vue

<template>
  <a-card :bordered="false">
    <!-- 搜索栏 -->
    <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
      <a-space style="float: right" class="btn-group" slot="additional">
        <a-button @click="onAdd" type="primary">
          <img src="@/assets/images/global/add.png" alt="" />
          Add
        </a-button>
        <a-button @click="onEdit" type="primary">
          <img src="@/assets/images/global/edit.png" alt="" />
          Edit
        </a-button>
        <a-button @click="onDel" type="primary">
          <img src="@/assets/images/global/delete.png" alt="" />
          Delete
        </a-button>
      </a-space>
    </search-form>
    <!-- 搜索栏结束 -->
    <!-- 列表 -->
    <div>
      <custom-table
        size="middle"
        rowKey="stationId"
        :columns="columns"
        :list="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        :selectedRowKeys.sync="selectedRowKeys"
        :scroll="{ y: 'calc(100vh - 365px)' }"
      >
        <template slot="index" slot-scope="{ index }">
          {{ index + 1 }}
        </template>
        <template slot="roles" slot-scope="{ text }">
          <span v-for="role of text" :key="role.id">
            {{ role.roleName }}
          </span>
        </template>
      </custom-table>
    </div>
    <!-- 列表结束 -->
    <!-- 新增/编辑 -->
    <custom-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :width="475" :okHandler="submit">
      <a-form-model
        ref="form"
        layout="horizontal"
        :model="model"
        :rules="rules"
        :colon="false"
        :labelCol="{ style: { width: '105px' } }"
        :wrapperCol="{ style: { width: '300px' } }"
        autocomplete="off"
      >
        <a-form-model-item label="Station Id" prop="stationId">
          <a-input v-model="model.stationId" type="number"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Station Code" prop="stationCode">
          <a-input v-model="model.stationCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Country Code" prop="countryCode">
          <a-input v-model="model.countryCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Type" prop="type">
          <a-input v-model="model.type"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Lon" prop="lon">
          <a-input v-model="model.lon" type="number"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Lat" prop="lat">
          <a-input v-model="model.lat" type="number"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Elevation" prop="elevation">
          <a-input v-model="model.elevation" type="number"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Description" prop="description">
          <a-textarea v-model="model.description" :rows="3"></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="Status" prop="status">
          <j-dict-select-tag v-model="model.status" dictCode="STATION_STATUS"></j-dict-select-tag>
        </a-form-model-item>
      </a-form-model>
    </custom-modal>
    <!-- 新增/编辑 结束 -->
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FormMixin from '@/mixins/FormMixin'
import { cloneDeep } from 'lodash'
import { getAction } from '../../api/manage'

const columns = [
  {
    title: 'NO',
    align: 'left',
    width: 100,
    scopedSlots: {
      customRender: 'index'
    },
    customHeaderCell: () => {
      return {
        style: {
          'padding-left': '60px !important'
        }
      }
    },
    customCell: () => {
      return {
        style: {
          'padding-left': '60px !important'
        }
      }
    }
  },
  {
    title: 'STATION ID',
    align: 'left',
    dataIndex: 'stationId',
    width: 100
  },
  {
    title: 'STATION CODE',
    align: 'left',
    width: 100,
    dataIndex: 'stationCode'
  },
  {
    title: 'COUNTRY CODE',
    align: 'left',
    width: 100,
    dataIndex: 'countryCode'
  },
  {
    title: 'TYPE',
    align: 'left',
    width: 100,
    dataIndex: 'type'
  },
  {
    title: 'LON',
    align: 'left',
    width: 100,
    dataIndex: 'lon'
  },
  {
    title: 'LAT',
    align: 'left',
    width: 100,
    dataIndex: 'lat'
  },
  {
    title: 'ELEVATION',
    width: 100,
    dataIndex: 'elevation'
  },
  {
    title: 'DESCRIPTION',
    width: 100,
    dataIndex: 'description',
    ellipsis: true
  },
  {
    title: 'STATUS',
    align: 'left',
    width: 100,
    dataIndex: 'status'
  }
]

export default {
  mixins: [JeecgListMixin, FormMixin],
  data() {
    this.columns = columns
    const validateStationCode = (_, value, callback) => {
      if (!value) {
        callback(new Error('Please Enter Station Code'))
      } else {
        if (value.length > 5) {
          callback(new Error('Station Code Limit 5 Charactor'))
        } else {
          callback()
        }
      }
    }

    const validateCountryCode = (_, value, callback) => {
      if (value && value.length > 2) {
        callback(new Error('Country Code Limit 2 Char'))
      } else {
        callback()
      }
    }
    return {
      queryParam: {},
      rules: {
        stationId: [{ required: true, message: 'Please Enter Station Id' }],
        stationCode: [{ required: true, validator: validateStationCode }],
        countryCode: [{ validator: validateCountryCode }]
      },
      url: {
        list: '/gardsStations/findPage',
        delete: '/gardsStations/deleteById',
        add: '/gardsStations/create',
        edit: '/gardsStations/update'
      },
      countryCodeList: [],
      typeList: []
    }
  },
  created() {
    this.getTypeList()
    this.getCountryCodeList()
  },
  methods: {
    async getTypeList() {
      try {
        const res = await getAction('/gardsStations/findType')
        this.typeList = res.filter(item => item).map(item => ({ label: item, value: item }))
      } catch (error) {
        console.error(error)
      }
    },

    async getCountryCodeList() {
      try {
        const res = await getAction('/gardsStations/findCountryCode')
        this.countryCodeList = res.filter(item => item).map(item => ({ label: item, value: item }))
      } catch (error) {
        console.error(error)
      }
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    onAdd() {
      this.isAdd = true
      this.model = {}
      this.visible = true
    },
    onEdit() {
      if (this.selectedRowKeys && this.selectedRowKeys.length) {
        this.isAdd = false
        this.visible = true
        const find = this.dataSource.find(item => item.stationId === this.selectedRowKeys[0])
        this.model = cloneDeep(find)
      } else {
        this.$message.warn('Please Select An Item To Edit')
      }
    },
    onDel() {
      if (this.selectedRowKeys && this.selectedRowKeys.length) {
        this.$confirm({
          title: 'Do You Want To Delete This Item?',
          okText: 'OK',
          cancelText: 'Cancel',
          onOk: () => {
            this.handleDelete(this.selectedRowKeys[0], 'stationId')
          }
        })
      } else {
        this.$message.warn('Please Select An Item To Delete')
      }
    }
  },
  computed: {
    formItems() {
      return [
        {
          label: 'Country Code',
          type: 'custom-select',
          name: 'countryCode',
          props: {
            options: this.countryCodeList,
            allowClear: true,
            showSearch: true,
            filterOption: this.filterOption,
            style: {
              width: '261px'
            }
          },
          style: {
            width: 'auto'
          }
        },
        {
          label: 'Type',
          type: 'custom-select',
          name: 'type',
          props: {
            options: this.typeList,
            allowClear: true,
            showSearch: true,
            filterOption: this.filterOption,
            style: {
              width: '261px'
            }
          },
          style: {
            width: 'auto'
          }
        },
        {
          label: 'Status',
          type: 'j-dict-select-tag',
          name: 'status',
          props: {
            dictCode: 'STATION_STATUS',
            getPopupContainer: () => {
              return document.body
            },
            style: {
              width: '261px'
            }
          },
          style: {
            width: 'auto'
          }
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.btn-group {
  img {
    margin-right: 12px;
    height: 18px;
  }
}
</style>