RMS-VUE/src/views/rms/InstrumentList/RmsInstrumentList.vue

<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="5">
        <locationaTree ref="locationaTree" :height="640" @onSelect="onSelectTree"></locationaTree>
      </a-col>
      <a-col :span="19">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <a-auto-complete v-model="queryParam.recipient" :dataSource="UserdataSource" style="width: 200px"
                  placeholder="请选择领用人" @select="onSelect" @search="onSearch" @change="onChange" />
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          <a-button type="primary" icon="download" @click="handleExportXls('仪器信息表')">导出</a-button>
          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
            @change="handleImportExcel">
            <a-button type="primary" icon="import">导入</a-button>
          </a-upload>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
          </a-dropdown>
        </div>
        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
              selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>

          <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
            :dataSource="dataSource" :pagination="ipagination" :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
            @change="handleTableChange">

            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>

              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a @click="handleDetail(record)">详情</a>
            </span>

          </a-table>
        </div>
        <rms-instrument-modal ref="modalForm" @ok="modalFormOk"></rms-instrument-modal>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import RmsInstrumentModal from './modules/RmsInstrumentModal'
import RmsLocationModal from '../LocationList/modules/RmsLocationModal'
import locationaTree from '../components/locationaTree'
export default {
  name: 'RmsInstrumentList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    RmsInstrumentModal,
    RmsLocationModal,
    locationaTree
  },
  data() {
    return {
      value: '',
      dataSource: [],
      UserdataSource: [],
      // 表头
      columns: [
        {
          title: '仪器编号',
          align: "center",
          dataIndex: 'instrumentNumber',
          width: 120
        },
        {
          title: '仪器名称',
          align: "center",
          dataIndex: 'instrumentName',
          width: 120
        },
        {
          title: '领用单位号',
          align: "center",
          dataIndex: 'collectingUnitNumber_dictText',
          width: 200
        },

        {
          title: '分类号',
          align: "center",
          dataIndex: 'categoryId',
          width: 120
        },
        {
          title: '型号',
          align: "center",
          dataIndex: 'model',
          width: 120

        },
        {
          title: '规格',
          align: "center",
          dataIndex: 'specifications',
          width: 120
        },
        {
          title: '单价',
          align: "center",
          dataIndex: 'unitPrice',
          width: 120
        },
        {
          title: '厂家',
          align: "center",
          dataIndex: 'manufactuer',
          width: 200
        },
        {
          title: '购置日期',
          align: "center",
          dataIndex: 'purchaseDate',
          customRender: function (text) {
            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
          },
          width: 120
        },
        {
          title: '领用人',
          align: "center",
          dataIndex: 'recipient_dictText',
          width: 80
        },
        {
          title: '入库时间',
          align: "center",
          dataIndex: 'entryDate',
          customRender: function (text) {
            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
          },
          width: 80
        },
        {
          title: '单据号',
          align: "center",
          dataIndex: 'documentNumber'
        },
        {
          title: '存放地址',
          align: "center",
          dataIndex: 'locationName',
          width: 120
        },
        {
          title: '备注',
          align: "center",
          dataIndex: 'note',
          width: 120
        },
        {
          title: '审核状态',
          align: "center",
          dataIndex: 'approvalStatus_dictText',
          width: 120
        },
        {
          title: '初审状态',
          align: "center",
          dataIndex: 'initialAudit_dictText',
          width: 120
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 160,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/rms/rmsInstrument/list",
        delete: "/rms/rmsInstrument/delete",
        deleteBatch: "/rms/rmsInstrument/deleteBatch",
        exportXlsUrl: "/rms/rmsInstrument/exportXls",
        importExcelUrl: "rms/rmsInstrument/importExcel",
        userUrl: "/sys/user/queryUserComponentData?column=createTime&order=desc&field=id,,username,realname,sex,phone,orgCodeTxt&pageNo=1&pageSize=100",
      },
      UserList: {},
    }
  },
  created() {
    this.getUserInfo();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    //获取用户信息
    getUserInfo() {
      getAction(this.url.userUrl).then(res => {
        this.UserList = res.result.records;
      })
    },
    onSearch(query) {
      this.UserdataSource = this.UserList.filter(user =>
        user.username.includes(query) || user.realname.includes(query)
      ).map(user => ({
        value: user.username,
        text: user.realname
      }));
    },
    onSelectTree(selectedRowKeys) {
      //将其切分为字符串
      selectedRowKeys = selectedRowKeys.join(',')
      console.log(selectedRowKeys)
      this.queryParam.locationId = selectedRowKeys
      this.loadData(1)
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>