259 lines
		
	
	
		
			8.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			259 lines
		
	
	
		
			8.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <section class="cadreFiles">
 | |
|     <ai-search-bar>
 | |
|       <template #left>
 | |
|         <ai-select placeholder="档案状态" v-model="search.status" :selectList="dict.getDict('status')"
 | |
|                    @change="page.current=1,getTableData()"/>
 | |
|         <ai-select placeholder="性别" v-model="search.gender" :selectList="dict.getDict('sex')"
 | |
|                    @change="page.current=1,getTableData()"/>
 | |
|         <ai-select placeholder="民族" v-model="search.nation" :selectList="dict.getDict('nation')"
 | |
|                    @change="page.current=1,getTableData()"/>
 | |
|         <ai-select placeholder="离任状态" v-model="search.outStatus" :selectList="dict.getDict('outStatus')"
 | |
|                    @change="page.current=1,getTableData()"/>
 | |
|         <el-select
 | |
|             v-model="search.servingInfo"
 | |
|             size="small"
 | |
|             multiple
 | |
|             placeholder="职务信息(多选)"
 | |
|             clearable
 | |
|             @change="page.current=1,getTableData()"
 | |
|             collapse-tags>
 | |
|           <el-option v-for="(op,i) in dict.getDict('appVillageSearchType')" :key="i"
 | |
|                      :label="op.dictName" :value="op.dictValue"/>
 | |
|         </el-select>
 | |
|         <ai-search label="出生年月">
 | |
|           <el-date-picker
 | |
|               size="small"
 | |
|               v-model="search.birthdayRangeBegin"
 | |
|               type="date"
 | |
|               placeholder="开始日期"
 | |
|               unlink-panels
 | |
|               class="border-radius-tl border-radius-br ve-middle"
 | |
|               format="yyyy-MM-dd"
 | |
|               value-format="yyyy-MM-dd HH:mm:ss"
 | |
|               @change="page.current=1,getTableData()"
 | |
|           />
 | |
|           <el-date-picker
 | |
|               size="small"
 | |
|               v-model="search.birthdayRangeEnd"
 | |
|               type="date"
 | |
|               placeholder="结束日期"
 | |
|               unlink-panels
 | |
|               class="border-radius-tl border-radius-br ve-middle"
 | |
|               format="yyyy-MM-dd"
 | |
|               value-format="yyyy-MM-dd HH:mm:ss"
 | |
|               @change="page.current=1,getTableData()"
 | |
|           />
 | |
|         </ai-search>
 | |
|         <ai-search label="入党时间">
 | |
|           <el-date-picker
 | |
|               size="small"
 | |
|               v-model="search.membershipTimeRangeBegin"
 | |
|               @change="page.current=1,getTableData()"
 | |
|               type="date"
 | |
|               placeholder="开始日期"
 | |
|               unlink-panels
 | |
|               class="border-radius-tl border-radius-br ve-middle"
 | |
|               value-format="yyyy-MM-dd HH:mm:ss"
 | |
|               format="yyyy-MM-dd"/>
 | |
|           <el-date-picker
 | |
|               size="small"
 | |
|               v-model="search.membershipTimeRangeEnd"
 | |
|               @change="page.current=1,getTableData()"
 | |
|               type="date"
 | |
|               placeholder="结束日期"
 | |
|               unlink-panels
 | |
|               class="border-radius-tl border-radius-br ve-middle"
 | |
|               value-format="yyyy-MM-dd HH:mm:ss"
 | |
|               format="yyyy-MM-dd"/>
 | |
|         </ai-search>
 | |
|       </template>
 | |
|       <template #right>
 | |
|         <el-input
 | |
|             v-model="search.param"
 | |
|             size="small"
 | |
|             placeholder="姓名/身份证号/联系方式"
 | |
|             prefix-icon="iconfont iconSearch"
 | |
|             clearable
 | |
|             @clear="page.current = 1,search.param = '', getTableData()"
 | |
|             v-throttle="() => {page.current = 1, getTableData()}"
 | |
|         />
 | |
|         <el-button
 | |
|             type="primary"
 | |
|             icon="iconfont iconSearch"
 | |
|             style="margin-left:5px;"
 | |
|             @click="page.current=1,getTableData()"
 | |
|         >查询
 | |
|         </el-button>
 | |
|         <el-button
 | |
|             icon="el-icon-refresh-right"
 | |
|             style="margin-left:5px;"
 | |
|             @click="resetSearch"
 | |
|         >重置
 | |
|         </el-button>
 | |
|       </template>
 | |
|     </ai-search-bar>
 | |
|     <ai-search-bar>
 | |
|       <template #left>
 | |
|         <el-button
 | |
|             type="primary"
 | |
|             icon="iconfont iconAdd"
 | |
|             size="small"
 | |
|             v-if="$permissions('app_appvillagecadresnew_edit')"
 | |
|             @click="handleShowDetail">添加
 | |
|         </el-button>
 | |
|         <el-button
 | |
|             icon="iconfont iconDelete"
 | |
|             size="small"
 | |
|             v-if="$permissions('app_appvillagecadresnew_del')"
 | |
|             @click="handleDel"
 | |
|             class="del-btn-list"
 | |
|             :disabled="!hasSelected"
 | |
|         >删除
 | |
|         </el-button>
 | |
|         <ai-download url="/app/appvillagecadresnew/export" :instance="instance"
 | |
|                      :params="{areaId,ids:ids.toString()}" fileName="村干部档案"/>
 | |
|       </template>
 | |
|     </ai-search-bar>
 | |
|     <ai-table :tableData="tableData" :colConfigs="colConfigs" :dict="dict" :total="page.total"
 | |
|               :current.sync="page.current" :size.sync="page.size"
 | |
|               @selection-change="v=>ids=v.map(e=>e.id)"
 | |
|               @getList="getTableData">
 | |
|       <el-table-column slot="options" prop="operate" label="操作" align="center">
 | |
|         <div slot-scope="{row}">
 | |
|           <el-button type="text" v-if="$permissions('app_appvillagecadresnew_detail')"
 | |
|                      @click="handleShowDetail(row)">详情
 | |
|           </el-button>
 | |
|         </div>
 | |
|       </el-table-column>
 | |
|     </ai-table>
 | |
|   </section>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import {mapState} from "vuex";
 | |
| 
 | |
| export default {
 | |
|   name: "cadreFiles",
 | |
|   inject: ['top'],
 | |
|   props: {
 | |
|     instance: Function,
 | |
|     dict: Object,
 | |
|     permissions: Function,
 | |
|     areaId: {default: ""}
 | |
|   },
 | |
|   watch: {
 | |
|     areaId(v) {
 | |
|       v && this.getTableData()
 | |
|     }
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       tableData: [],
 | |
|       search: {
 | |
|         name: "",
 | |
|         gender: "",
 | |
|         nation: "",
 | |
|         birthdayRangeBegin: "",
 | |
|         birthdayRangeEnd: "",
 | |
|         membershipTimeRangeBegin: "",
 | |
|         membershipTimeRangeEnd: "",
 | |
|         servingInfo: [],
 | |
|         param: "",
 | |
|         areaId: ""
 | |
|       },
 | |
|       page: {current: 1, size: 10, total: 0},
 | |
|       ids: []
 | |
|     };
 | |
|   },
 | |
|   methods: {
 | |
|     resetSearch() {
 | |
|       this.page.current = 1;
 | |
|       this.page.size = 10;
 | |
|       this.search = {};
 | |
|       this.getTableData()
 | |
|     },
 | |
|     ///请求列表+查询参数
 | |
|     getTableData() {
 | |
|       this.instance.post(`/app/appvillagecadresnew/list`, {
 | |
|         ...this.search, ...this.page,
 | |
|         areaId: this.areaId
 | |
|       }).then(res => {
 | |
|         this.tableData = res.data.records;
 | |
|         this.page.total = res.data.total;
 | |
|       })
 | |
|     },
 | |
|     //新增|查看村干部档案
 | |
|     handleShowDetail(e) {
 | |
|       let {id} = e
 | |
|       if (id) {
 | |
|         this.$router.push({query: {id}})
 | |
|       } else {
 | |
|         this.$router.push({hash: "#add"})
 | |
|       }
 | |
|     },
 | |
|     //删除
 | |
|     handleDel() {
 | |
|       this.$confirm("是否要删除这些村干部档案?").then(() => {
 | |
|         this.instance.post("app/appvillagecadresnew/delete", null, {
 | |
|           params: {ids: this.ids.toString()}
 | |
|         }).then(res => {
 | |
|           if (res?.code == 0) {
 | |
|             this.getTableData();
 | |
|             this.$message.success("删除成功!");
 | |
|           }
 | |
|         })
 | |
|       }).catch(() => 0);
 | |
|     },
 | |
|     ///导出个人信息
 | |
|     exportExcel() {
 | |
|       let {areaId} = this.user.info
 | |
|       this.instance.post(`/app/appvillagecadresnew/export`, {areaId, ids: this.ids.toString()}).then(res => {
 | |
|         if (res?.code == 0) {
 | |
|           this.$message.success(res.data);
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|   },
 | |
|   created() {
 | |
|     this.dict.load("cadrePositionType", "sex", "status", "appVillageSearchType", 'outStatus')
 | |
|     this.resetSearch();
 | |
|   },
 | |
|   computed: {
 | |
|     ...mapState(["user"]),
 | |
|     colConfigs() {
 | |
|       return [
 | |
|         {type: 'selection'},
 | |
|         {prop: "name", label: "姓名", align: 'center'},
 | |
|         {prop: "gender", label: "性别", align: 'center', dict: 'sex'},
 | |
|         {
 | |
|           prop: "idNumber", label: "身份证号",
 | |
|           render: (h, {row}) => h('span', null, this.idCardNoUtil.hideId(row.idNumber))
 | |
|         },
 | |
|         {label: "年龄", align: 'center', render: (h, {row}) => h('span', null, this.$calcAge(row.idNumber))},
 | |
|         {
 | |
|           prop: "membershipTime", label: "入党时间", align: 'center',
 | |
|           render: (h, {row}) => h('span', null, this.$moment(row.membershipTime).format('YYYY-MM-DD')?.replace("Invalid Date", "-"))
 | |
|         },
 | |
|         {prop: "phone", label: "联系方式", align: 'center'},
 | |
|         {prop: "outStatus", label: "离任状态", align: 'center', dict: 'outStatus'},
 | |
|         {prop: "status", label: "档案状态", align: 'center', dict: 'status'},
 | |
|         {slot: 'options'}
 | |
|       ]
 | |
|     },
 | |
|     hasSelected() {
 | |
|       return !!this.ids?.toString()
 | |
|     }
 | |
|   }
 | |
| };
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .cadreFiles {
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
| }
 | |
| </style>
 | |
| 
 | |
| 
 |