修改未检人员页面，含新增、编辑、查看弹框信息

lifengge
1 parent c8e61114
Showing 2 changed files with 148 additions and 83 deletions
juvenile-prosecution-vue/src/views/business/MinorList.vue
juvenile-prosecution-vue/src/views/business/modules/MinorModal.vue
@@ -18,7 +18,8 @@
       </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-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>
@@ -71,8 +72,8 @@
  
     <minor-modal ref="modalForm" @ok="modalFormOk" />
     <!--  详情  -->
-    <a-modal v-model:visible="infoVisible" title="未成年信息" :footer=null :width="1000" >
-      <a-descriptions bordered layout="vertical" :column="4">
+    <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>
@@ -82,18 +83,18 @@
         <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.address }}</a-descriptions-item>
-        <a-descriptions-item label="是否失学">{{ info.school_dictText }}</a-descriptions-item>
-        <a-descriptions-item label="学校名称">{{ info.schoolName }}</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="重点关注原因" :span="2">{{ info.reason_dictText }}</a-descriptions-item>
-        <a-descriptions-item label="特殊原因" :span="4">{{ info.specialReason }}</a-descriptions-item>
-        <a-descriptions-item label="备注" :span="4">{{ info.remark }}</a-descriptions-item>
+        <a-descriptions-item label="重点关注原因">{{ info.reason_dictText }}</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">
+      <a-tabs v-model:activeKey="activeKey" type="card">
         <a-tab-pane key="1" tab="家庭成员">
-          <a-table bordered :columns="familyColumns" :data-source="familyDatas" :scroll="{ x: true }" rowKey="id" :loading="familyLoading" :pagination="familyPagination">
+          <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>
@@ -113,7 +114,7 @@ import { JeecgListMixin } from &#39;@/mixins/JeecgListMixin&#39;
 import { GetAge } from '@/utils/util'
 import MinorModal from './modules/MinorModal'
 import '@/assets/less/TableExpand.less'
-import { getAction,downFile } from '@api/manage'
+import { getAction, downFile } from '@api/manage'
 import { FormTypes } from '@/utils/JEditableTableUtil'
 //引入JS方法
 import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
@@ -229,33 +230,40 @@ export default {
         {
           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',
           scopedSlots: { customRender: 'longText' }
         },
         {
           title: '现住址',
           align: 'center',
+          width: 200,
+          ellipsis: true,
           dataIndex: 'address',
           scopedSlots: { customRender: 'longText' }
         },
         {
           title: '是否犯罪',
           align: 'center',
+          width: 100,
           dataIndex: 'crime',
           customRender: (text) => {
             //字典值翻译通用方法
@@ -265,12 +273,16 @@ export default {
         {
           title: '犯罪原因',
           align: 'center',
+          width: 200,
+          ellipsis: true,
           dataIndex: 'reason',
           scopedSlots: { customRender: 'longText' }
         },
         {
           title: '其他参考信息',
           align: 'center',
+          width: 200,
+          ellipsis: true,
           dataIndex: 'other',
           scopedSlots: { customRender: 'longText' }
         }
@@ -286,7 +298,7 @@ export default {
         showQuickJumper: true,
         total: 0
       },
-      familyLoading:false,
+      familyLoading: false
     }
   },
   created() {
@@ -302,19 +314,19 @@ export default {
       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){
+      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;
+        that.familyLoading = true
         getAction(this.url.familys, params).then(res => {
           if (res.success) {
-            that.familyLoading=false;
+            that.familyLoading = false
             that.familyDatas = res.result || []
           } else {
-            that.familyLoading=false;
+            that.familyLoading = false
           }
         })
       }
@@ -371,8 +383,28 @@ export default {
 </style>
  
 <style>
-.ant-modal-body{
-  max-height: 700px;
-  overflow-y: auto;
+.j-table-force-nowrap .ant-table-body {
+  scrollbar-width: thin;
 }
-</style>
+
+/* 设置滚动条的样式 */
+.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;
+}
+</style>
 \ No newline at end of file
@@ -36,13 +36,11 @@
                 <j-dict-select-tag v-model="model.gender" dictCode="sex" placeholder="请选择性别" />
               </a-form-model-item>
             </a-col>
-          </a-row>
-          <a-col :span="12">
-            <a-form-model-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="identity">
-              <a-input v-model="model.identity" placeholder="请输入身份证号"></a-input>
-            </a-form-model-item>
-          </a-col>
-          <a-row>
+            <a-col :span="12">
+              <a-form-model-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="identity">
+                <a-input v-model="model.identity" placeholder="请输入身份证号"></a-input>
+              </a-form-model-item>
+            </a-col>
             <a-col :span="12">
               <a-form-model-item label="学校名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="schoolName">
                 <a-input v-model="model.schoolName" placeholder="请输入学校名称"></a-input>
@@ -53,21 +51,12 @@
                 <a-input v-model="model.startYear" placeholder="请输入入学年份"></a-input>
               </a-form-model-item>
             </a-col>
-          </a-row>
-          <a-row>
             <a-col :span="12">
               <a-form-model-item label="是否失学" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="school">
                 <j-dict-select-tag v-model="model.school" dictCode="school_status" placeholder="请选择是否失学" />
               </a-form-model-item>
             </a-col>
             <a-col :span="12">
-              <a-form-model-item label="家庭住址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
-                <a-textarea v-model="model.address" placeholder="请输入家庭住址" :rows="1" ></a-textarea>
-              </a-form-model-item>
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :span="12">
               <a-form-model-item label="监护人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="guardian">
                 <a-input v-model="model.guardian" placeholder="请输入监护人"></a-input>
               </a-form-model-item>
@@ -77,41 +66,43 @@
                 <a-input v-model="model.relation" placeholder="请输入监护人关系"></a-input>
               </a-form-model-item>
             </a-col>
-          </a-row>
-          <a-row>
             <a-col :span="12">
-              <a-form-model-item label="重点关注原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reason">
-                <j-dict-select-tag v-model="model.reason" dictCode="attention_reason" placeholder="请选择重点关注原因" />
+              <a-form-model-item label="家庭住址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
+                <a-textarea v-model="model.address" placeholder="请输入家庭住址" :rows="1"></a-textarea>
               </a-form-model-item>
             </a-col>
             <a-col :span="12">
               <a-form-model-item label="特殊原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specialReason">
-                <a-textarea v-model="model.specialReason" placeholder="请输入特殊原因"></a-textarea>
+                <a-textarea v-model="model.specialReason" placeholder="请输入特殊原因" :rows="1"></a-textarea>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item label="重点关注原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reason">
+                <j-dict-select-tag v-model="model.reason" dictCode="attention_reason" placeholder="请选择重点关注原因" />
               </a-form-model-item>
             </a-col>
             <a-col :span="12">
               <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
-                <a-textarea v-model="model.remark" placeholder="请输入备注"></a-textarea>
+                <a-textarea v-model="model.remark" placeholder="请输入备注" :rows="1"></a-textarea>
               </a-form-model-item>
             </a-col>
           </a-row>
         </a-form-model>
       </j-form-container>
       <!-- 子表单区域 -->
-      <a-tabs activeKey="1" style="margin-top: -20px">
+      <a-tabs activeKey="1" type="card">
         <a-tab-pane tab="家庭成员" key="1" :forceRender="true">
           <j-editable-table
+            class="main_table"
             ref="editableTable"
             :loading="familyLoading"
             sticky :columns="columns"
             :dataSource="dataSource"
-            :maxHeight="190"
+            :maxHeight="192"
             :rowNumber="true"
             :rowSelection="true"
             :actionButton="true" />
-
         </a-tab-pane>
-
       </a-tabs>
     </a-spin>
   </j-modal>
@@ -133,17 +124,16 @@ export default {
     return {
       confirmLoading: false,
       title: '',
-      width: 800,
       visible: false,
       disableSubmit: false,
       model: {},
       labelCol: {
         xs: { span: 24 },
-        sm: { span: 6 }
+        sm: { span: 5 }
       },
       wrapperCol: {
         xs: { span: 24 },
-        sm: { span: 16 }
+        sm: { span: 19 }
       },
       labelCol2: {
         xs: { span: 24 },
@@ -154,12 +144,12 @@ export default {
         sm: { span: 20 }
       },
       validatorRules: {
-        householdNum:[ { required: true, message: '请输入户号' },],
-        name:[ { required: true, message: '请输入姓名' },],
-        gender:[ { required: true, message: '请选择性别' },],
-        identity:[  {required: true,validator:this.validateIdCard}],
-        relation:[ { required: true, message: '请输入监护人关系' },],
-        guardian:[ { required: true, message: '请输入监护人' },],
+        householdNum: [{ required: true, message: '请输入户号' }],
+        name: [{ required: true, message: '请输入姓名' }],
+        gender: [{ required: true, message: '请选择性别' }],
+        identity: [{ required: true, validator: this.validateIdCard }],
+        relation: [{ required: true, message: '请输入监护人关系' }],
+        guardian: [{ required: true, message: '请输入监护人' }]
       },
       url: {
         add: '/sys/minor/add',
@@ -173,7 +163,7 @@ export default {
         {
           title: '户号',
           key: 'householdNum',
-          width: '250px',
+          width: '230px',
           type: FormTypes.input,
           defaultValue: '',
           placeholder: '请输入${title}',
@@ -182,7 +172,7 @@ export default {
         {
           title: '人员编号',
           key: 'number',
-          width: '180px',
+          width: '230px',
           type: FormTypes.input,
           defaultValue: '',
           placeholder: '请输入${title}',
@@ -191,7 +181,7 @@ export default {
         {
           title: '姓名',
           key: 'name',
-          width: '180px',
+          width: '100px',
           type: FormTypes.input,
           defaultValue: '',
           placeholder: '请输入${title}',
@@ -200,20 +190,20 @@ export default {
         {
           title: '身份证号',
           key: 'identity',
-          width: '200px',
+          width: '190px',
           type: FormTypes.input,
           defaultValue: '',
           placeholder: '请输入${title}',
           validateRules: [{
             // pattern: '/(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}$)/',
-           pattern:'^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$',
+            pattern: '^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$',
             message: '${title}格式不正确'
           }]
         },
         {
           title: '与户主的关系',
           key: 'relation',
-          width: '180px',
+          width: '120px',
           type: FormTypes.input,
           defaultValue: '',
           placeholder: '请输入${title}',
@@ -231,15 +221,15 @@ export default {
         {
           title: '现住址',
           key: 'address',
-          width: '180px',
+          width: '200px',
           type: FormTypes.input_pop,
           defaultValue: '',
-          placeholder: '请输入${title}',
+          placeholder: '请输入${title}'
         },
         {
           title: '是否犯罪',
           key: 'crime',
-          width: '200px',
+          width: '100px',
           type: FormTypes.select,
           options: [],
           dictCode: 'is_crime',
@@ -249,18 +239,18 @@ export default {
         {
           title: '犯罪原因',
           key: 'reason',
-          width: '250px',
+          width: '200px',
           type: FormTypes.input_pop,
           defaultValue: '',
-          placeholder: '请输入${title}',
+          placeholder: '请输入${title}'
         },
         {
           title: '其他参考信息',
           key: 'other',
-          width: '250px',
+          width: '200px',
           type: FormTypes.input_pop,
           defaultValue: '',
-          placeholder: '请输入${title}',
+          placeholder: '请输入${title}'
         }
       ]
     }
@@ -283,17 +273,17 @@ export default {
     this.modelDefault = JSON.parse(JSON.stringify(this.model))
   },
   methods: {
-    getAgeByIdentity(identity){
-      return GetAge(identity);
+    getAgeByIdentity(identity) {
+      return GetAge(identity)
     },
-    validateIdCard(rule,value,callback){
+    validateIdCard(rule, value, callback) {
       console.log(value)
-      if(undefined==value || null==value || ''==value){
-        callback("请输入正确的公民身份号码!");
-      }else if ( !value || new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/).test(value)){
-        callback();
-      }else{
-        callback("请输入正确的公民身份号码!");
+      if (undefined == value || null == value || '' == value) {
+        callback('请输入正确的公民身份号码!')
+      } else if (!value || new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/).test(value)) {
+        callback()
+      } else {
+        callback('请输入正确的公民身份号码!')
       }
     },
     // 获取所有的editableTable实例
@@ -304,7 +294,7 @@ export default {
     },
  
     add() {
-      this.dataSource=[];
+      this.dataSource = []
       // 默认新增一条数据
       this.getAllTable().then(editableTables => {
         editableTables[0].add()
@@ -397,5 +387,48 @@ export default {
 </script>
  
 <style scoped>
+.ant-form-item {
+  margin-bottom: 10px;
+}
+</style>
+
+<style>
+.main_table .input-table .thead {
+  overflow-y: auto;
+}
  
+.main_table .input-table .thead .tr {
+  overflow-y: auto;
+}
+
+.main_table .input-table .scroll-view {
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+/* 设置滚动条的样式 */
+.main_table .input-table .scroll-view::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* 滚动槽 */
+.main_table .input-table .scroll-view::-webkit-scrollbar-track {
+  background: #f5f5f5;
+}
+
+/* 滚动条滑块 */
+.main_table .input-table .scroll-view::-webkit-scrollbar-thumb {
+  background: #dedede;
+  -webkit-box-shadow: none;
+}
+
+.main_table .ant-row-flex {
+  margin-top: -55px;
+  flex-flow: row-reverse;
+}
+
+.main_table .ant-row-flex .action-button {
+  margin-bottom: 20px;
+}
 </style>
 \ No newline at end of file