juvenile-prosecution-vue/src/views/business/MinorList.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery" :label-col="labelCol" labelAlign="right">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="姓名">
              <a-input placeholder="输入姓名查询" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="身份证号">
              <a-input placeholder="输入身份证号查询" v-model="queryParam.identity"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="性别">
              <j-dict-select-tag v-model="queryParam.gender" dictCode="sex" placeholder="请选择性别" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="重点关注" :label-col="labelCol2">
              <a-select v-model="queryParam.isReason"  placeholder="请选择" >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">是</a-select-option>
                <a-select-option value="2">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="学校">
              <a-input placeholder="输入学校名称查询" v-model="queryParam.schoolName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="家庭住址">
              <a-input placeholder="输入家庭住址查询" v-model="queryParam.address"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="年龄">
              <a-select v-model="queryParam.age"  placeholder="请选择" >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="6">6岁以下</a-select-option>
                <a-select-option value="12">6岁-12岁</a-select-option>
                <a-select-option value="18">12岁-18岁</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="重点关注原因" :label-col="labelCol2">
              <a-input placeholder="输入重点关注原因查询" v-model="queryParam.reason"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-button @click="handleAdd" type="primary" icon="plus"  >新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('未检人员模板')" style="margin-left:8px;">模板导出
      </a-button>
      <a-upload style="margin-left:8px;" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
                :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-button type="primary" @click="searchQuery" icon="search" style="margin-left:8px;">查询</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0" style="margin-left:8px;">
        <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>
    <!-- 查询区域-END -->
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;margin-top: 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"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="longText" slot-scope="text,record">
          <j-ellipsis :value="text" :length="15" />
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">查看</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
           <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
             <a>删除</a>
           </a-popconfirm>
        </span>
      </a-table>
    </div>
    <minor-modal ref="modalForm" @ok="modalFormOk" />
    <!--  详情  -->
    <a-modal v-model:visible="infoVisible" title="未成年信息" :footer=null :width="1000">
      <a-descriptions bordered size="middle" :column="2" class="desc_info">
        <a-descriptions-item label="户号">{{ info.householdNum }}</a-descriptions-item>
        <a-descriptions-item label="人员编号">{{ info.number }}</a-descriptions-item>
        <a-descriptions-item label="姓名">{{ info.name }}</a-descriptions-item>
        <a-descriptions-item label="性别">{{ info.gender_dictText }}</a-descriptions-item>
        <a-descriptions-item label="年龄">{{ getAgeByIdentity(info.identity) }}</a-descriptions-item>
        <a-descriptions-item label="身份证号">{{ info.identity }}</a-descriptions-item>
        <a-descriptions-item label="学校名称">{{ info.schoolName }}</a-descriptions-item>
        <a-descriptions-item label="入学年份">{{ info.startYear }}</a-descriptions-item>
        <a-descriptions-item label="是否失学">{{ info.school_dictText }}</a-descriptions-item>
        <a-descriptions-item label="监护人">{{ info.guardian }}</a-descriptions-item>
        <a-descriptions-item label="监护人关系">{{ info.relation }}</a-descriptions-item>
        <a-descriptions-item label="重点关注原因">{{ info.reason }}</a-descriptions-item>
        <a-descriptions-item label="特殊原因" :span="2">{{ info.specialReason }}</a-descriptions-item>
        <a-descriptions-item label="家庭住址" :span="2">{{ info.address }}</a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">{{ info.remark }}</a-descriptions-item>
      </a-descriptions>
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="家庭成员">
          <a-table bordered :columns="familyColumns" :data-source="familyDatas" :scroll="{ x: '100%', y: 240 }"
                   rowKey="id"
                   :loading="familyLoading" :pagination="familyPagination" size="middle" class="j-table-force-nowrap">
            <span slot="num" slot-scope="text,record">
              <j-ellipsis :value="text" :length="8" />
            </span>
            <span slot="longText" slot-scope="text,record">
              <j-ellipsis :value="text" :length="18" />
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { GetAge } from '@/utils/util'
import MinorModal from './modules/MinorModal'
import '@/assets/less/TableExpand.less'
import { getAction, downFile } from '@api/manage'
import { FormTypes } from '@/utils/JEditableTableUtil'
//引入JS方法
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'MinorList',
  mixins: [JeecgListMixin],
  components: {
    MinorModal
  },
  data() {
    return {
      labelCol: { style: { width: '70px' } },
      labelCol2: { style: { width: '100px' } },
      activeKey: '1',
      infoVisible: false,
      info: {},
      description: '未成年人管理页面',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          fixed: 'left',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '姓名',
          align: 'center',
          fixed: 'left',
          width: 80,
          dataIndex: 'name'
        },
        {
          title: '年龄',
          align: 'center',
          dataIndex: 'age',
          customRender: function(text, record) {
            return GetAge(record.identity)
          },
          sorter: true
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'gender_dictText'
        },
        {
          title: '学校名称',
          align: 'center',
          dataIndex: 'schoolName',
          scopedSlots: { customRender: 'longText' },
          sorter: true
        },
        {
          title: '入学年份',
          align: 'center',
          dataIndex: 'startYear'
        },
        {
          title: '是否失学',
          align: 'center',
          dataIndex: 'school_dictText'
        },
        {
          title: '家庭住址',
          align: 'center',
          dataIndex: 'address',
          scopedSlots: { customRender: 'longText' },
          sorter: true
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'identity'
        },
        {
          title: '监护人',
          align: 'center',
          dataIndex: 'guardian'
        },
        {
          title: '监护人关系',
          align: 'center',
          dataIndex: 'relation'
        },
        {
          title: '重点关注原因',
          align: 'center',
          dataIndex: 'reason',
          scopedSlots: { customRender: 'longText' },
          sorter: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      queryParam:{
        name:'',
        isReason:'0',
        reason:'',
        identity:'',
        schoolName:'',
        address:'',
        age:'0',
      },
      url: {
        list: '/sys/minor/list',
        delete: '/sys/minor/delete',
        deleteBatch: '/sys/minor/deleteBatch',
        exportXlsUrl: '/sys/minor/exportXls',
        importExcelUrl: 'sys/minor/importExcel',
        familys: '/sys/minor/getFamilysByHouseholdNum'
      },
      dictOptions: {},
      superFieldList: [],
      familyDatas: [],
      // 表头
      familyColumns: [
        {
          title: '姓名',
          align: 'center',
          width: 80,
          dataIndex: 'name'
        },
        {
          title: '身份证号',
          align: 'center',
          width: 170,
          dataIndex: 'identity'
        },
        {
          title: '与户主的关系',
          align: 'center',
          width: 120,
          dataIndex: 'relation'
        },
        {
          title: '行政区划',
          align: 'center',
          width: 120,
          dataIndex: 'division',
          ellipsis: true,
          scopedSlots: { customRender: 'longText' }
        },
        {
          title: '现住址',
          align: 'center',
          width: 200,
          ellipsis: true,
          dataIndex: 'address',
          scopedSlots: { customRender: 'longText' }
        },
        {
          title: '是否犯罪',
          align: 'center',
          width: 100,
          dataIndex: 'crime',
          customRender: (text) => {
            //字典值翻译通用方法
            return filterDictTextByCache('is_crime', text)
          }
        },
        {
          title: '犯罪原因',
          align: 'center',
          width: 200,
          ellipsis: true,
          dataIndex: 'reason',
          scopedSlots: { customRender: 'longText' }
        },
        {
          title: '其他参考信息',
          align: 'center',
          width: 200,
          ellipsis: true,
          dataIndex: 'other',
          scopedSlots: { customRender: 'longText' }
        }
      ],
      /* 分页参数 */
      familyPagination: {
        current: 1,
        pageSize: 20,
        hideOnSinglePage: true,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        total: 0
      },
      familyLoading: false,
      /* 排序参数 */
      isorter:{
        column: 'age',
        order: 'asc',
      },
    }
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    // handleTableChange(pagination, filters, sorter) {
    //   //分页、排序、筛选变化时触发
    //   //TODO 筛选
    //   console.log(pagination)
    //   if (Object.keys(sorter).length > 0) {
    //     this.isorter.column = sorter.field;
    //     this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
    //   }
    //   this.ipagination = pagination;
    //   this.loadData();
    // },
    handleExportXls(fileName){
      if(!fileName || typeof fileName != "string"){
        fileName = "导出文件"
      }
      let param = this.getQueryParams();
      if(this.selectedRowKeys && this.selectedRowKeys.length>0){
        param['selections'] = this.selectedRowKeys.join(",")
      }
      console.log("导出参数",param)
      downFile(this.url.exportXlsUrl,param).then((data)=>{
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
        }else{
          let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName+'.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    },
    getAgeByIdentity(identity) {
      return GetAge(identity)
    },
    handleDetail(record) {
      var that = this
      that.info = record
      that.infoVisible = true
      that.familyDatas = []
      if (null !== record.householdNum && '' !== record.householdNum && undefined !== record.householdNum) {
        let params = { householdNum: record.householdNum }
        that.familyLoading = true
        getAction(this.url.familys, params).then(res => {
          if (res.success) {
            that.familyLoading = false
            that.familyDatas = res.result || []
          } else {
            that.familyLoading = false
          }
        })
      }
    },
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'name', text: '姓名', dictCode: '' })
      fieldList.push({ type: 'int', value: 'gender', text: '性别', dictCode: '' })
      fieldList.push({ type: 'string', value: 'address', text: '家庭住址', dictCode: '' })
      fieldList.push({ type: 'string', value: 'identity', text: '身份证号', dictCode: '' })
      fieldList.push({ type: 'Text', value: 'reason', text: '重点关注原因', dictCode: '' })
      fieldList.push({ type: 'Text', value: 'remark', text: '备注', dictCode: '' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style>
.j-table-force-nowrap .ant-table-body {
  scrollbar-width: thin;
}
/* 设置滚动条的样式 */
.j-table-force-nowrap .ant-table-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* 滚动槽 */
.j-table-force-nowrap .ant-table-body::-webkit-scrollbar-track {
  background: #f5f5f5;
}
/* 滚动条滑块 */
.j-table-force-nowrap .ant-table-body::-webkit-scrollbar-thumb {
  background: #dedede;
  -webkit-box-shadow: none;
}
.desc_info .ant-descriptions-item-label {
  width: 140px;
}
.ant-popover-inner-content {
  min-width: 150px;
}
</style>