<template>
|
<div class="mainContent">
|
<a-card :bordered="false" style="margin-top: 24px">
|
<a-form layout="inline">
|
<a-form-item label="名称:">
|
<a-input v-model="serch.name" style="width: 200px" />
|
</a-form-item>
|
<a-form-item label="上级区域:">
|
<a-cascader
|
placeholder="请选择"
|
labelInValue
|
v-model="serch.parentCode"
|
style="width: 200px"
|
:options="parentListOptions"
|
@change="positionLevel"
|
/>
|
</a-form-item>
|
<a-form-item label="所属区域:">
|
<a-select
|
ref="select"
|
v-model="serch.areaCode"
|
style="width: 200px"
|
placeholder="请选择"
|
>
|
<a-select-option
|
v-for="(item, index) in areaCodeList"
|
:key="index"
|
:value="item.areaCode"
|
>
|
{{ item.areaName }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item>
|
<a-button type="primary" html-type="submit" @click="handleSearch">
|
查询
|
</a-button>
|
<a-button type="primary" @click="() => this.handleModalVisible(true)">
|
新建
|
</a-button>
|
</a-form-item>
|
</a-form>
|
<div style="margin-top: 24px">
|
<av-standard-table
|
:dataSource="dataSource"
|
:selectedRows="selectedRows"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
></av-standard-table>
|
</div>
|
</a-card>
|
<a-modal
|
:title="title"
|
destroyOnClose
|
:visible.sync="visibleCreateModal"
|
@cancel="handleCreateModalCancel"
|
>
|
<!---->
|
<a-form-model
|
style="margin-top: 8px"
|
:model="editForm"
|
:rules="rules"
|
ref="ruleForm"
|
>
|
<a-form-model-item v-bind="formLayout" prop="unitName" label="名称">
|
<a-input
|
placeholder="请输入"
|
type="string"
|
v-model="editForm.unitName"
|
:disabled="pageState === 'view'"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
v-bind="formLayout"
|
label="上级编码"
|
prop="parentCode"
|
>
|
<a-cascader
|
v-model="editForm.parentCode"
|
placeholder="请选择"
|
change-on-select
|
:options="newParentListOptions"
|
@change="positionLevel"
|
:disabled="pageState === 'view'"
|
/>
|
</a-form-model-item>
|
<a-form-model-item v-bind="formLayout" prop="areaCode" label="行政区划">
|
<a-select
|
ref="select"
|
placeholder="请选择"
|
v-model="editForm.areaCode"
|
:disabled="pageState === 'view'"
|
>
|
<a-select-option
|
:value="item.areaCode"
|
v-for="item in newAreaCodeList"
|
>
|
{{ item.areaName }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item v-bind="formLayout" label="是否生效" prop="state">
|
<a-radio-group
|
name="radioGroup"
|
v-model="editForm.state"
|
:disabled="pageState === 'view'"
|
>
|
<a-radio value="0">是</a-radio>
|
<a-radio value="1">否</a-radio>
|
</a-radio-group>
|
</a-form-model-item>
|
</a-form-model>
|
<template slot="footer">
|
<a-button key="cancel" @click="handleCreateModalCancel">
|
取消
|
</a-button>
|
<a-button
|
key="forward"
|
type="primary"
|
v-if="pageState === 'add' || pageState === 'edit'"
|
@click="handleCreateModalOk"
|
>
|
提交
|
</a-button>
|
</template>
|
</a-modal>
|
<a-modal
|
title="作废"
|
destroyOnClose
|
:visible="visibleInvalidityModal"
|
@ok="handleInvalidityModalOk"
|
@cancel="handleInvalidityModalCancel"
|
>
|
<!---->
|
<a-form
|
style="margin-top: 8px"
|
:autoFormCreate="
|
(form) => {
|
this.createForm = form;
|
}
|
"
|
>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="理由"
|
fieldDecoratorId="code"
|
:fieldDecoratorOptions="{
|
rules: [{ required: true, message: '请输入理由！' }],
|
}"
|
>
|
<a-input placeholder="请输入" type="string" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Model,
|
Watch,
|
} from 'vue-property-decorator';
|
import moment from 'moment';
|
import { get, post } from "@/util/request";
|
import * as _ from 'lodash';
|
@Component({
|
components: {
|
},
|
})
|
export default class QueryList extends Vue {
|
//规则定义
|
private rules: any = {
|
unitName:[
|
{ required: true, message: '名称不能为空', trigger: 'blur' },
|
{ message: '名称字数不能超过20个！', max: 19 },
|
],
|
parentCode:[{ required: true, message: '请选择！' }],
|
areaCode:[{ required: true, message: '请选择！' }],
|
state:[{ required: true, message: '请选择！' }]
|
}
|
private formLayout = {
|
labelCol: {
|
span: 5,
|
},
|
wrapperCol: {
|
span: 15,
|
},
|
};
|
private serch:any = {
|
name:'',
|
parentCode: [],
|
areaCode:''
|
}
|
private editForm: any = {
|
unitName:'',
|
parentCode: [],
|
areaCode:'',
|
state:'0',
|
}
|
|
private pagination:any={
|
total:0,
|
current:1,
|
pageSize:10,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
showTotal: (total:number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据
|
};
|
|
@Watch('serch.name')
|
private watchsearchInform(newVal:string,oldval:string){
|
if (newVal !== '' && oldval === '') {
|
this.pagination.current = 1
|
}
|
this.handleSearch()
|
}
|
|
private expandForm: boolean = false;
|
|
private selectedRows: any[] = [];
|
|
private parentListOptions: any[] = [];
|
private newParentListOptions: any[] = [];
|
|
private tableLoading: boolean = false;
|
private visibleInvalidityModal: boolean = false;
|
|
private moment: any = moment;
|
private pageState: String = 'add';
|
|
private dataSource: any[] = [];
|
|
private areaCodeList: any[] = [];
|
|
private newAreaCodeList: any[] = [];
|
|
private visibleCreateModal: boolean = false;
|
|
private createForm: any = null;
|
|
private title: any = null;
|
|
private columns: any[] = [{
|
title: '名称',
|
dataIndex: 'unitName',
|
},
|
{
|
title: '上级区域',
|
dataIndex: 'parentName',
|
},
|
{
|
title: '所属区域',
|
dataIndex: 'areaName',
|
},
|
{
|
title: '操作时间',
|
dataIndex: 'updateTime',
|
},
|
{
|
title: '操作人',
|
dataIndex: 'createName',
|
},
|
{
|
title: '状态',
|
dataIndex: 'state',
|
customRender: this.progressStateRender,
|
},
|
{
|
title: '操作',
|
customRender: this.opRender,
|
},
|
];
|
|
|
private handleModalVisible(isVisible: boolean): void {
|
this.visibleCreateModal = isVisible;
|
this.pageState='add'
|
this.title='新建责任单位'
|
}
|
|
private handleSearch(): void {
|
console.log(this.serch)
|
const data = this.serch.parentCode
|
let code =data[data.length-1]
|
get("unit/selectUint",{
|
name:this.serch.name,
|
parentCode:code,
|
parentCodeList:this.serch.parentCode,
|
areaCode:this.serch.areaCode,
|
current: this.pagination.current,
|
page:1,
|
size: this.pagination.pageSize
|
}).then(res=>{
|
this.dataSource = res.data.data.item
|
this.pagination.total = res.data.data.total
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
}
|
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
console.log(pagination)
|
this.pagination.current = pagination.current
|
this.pagination.pageSize = pagination.pageSize
|
this.pagination.total = pagination.total
|
this.handleSearch()
|
}
|
|
private handleCreateModalOk() {
|
let api ='unit/insert'
|
if (this.pageState === 'edit') {
|
api='unit/update'
|
}
|
this.$refs.ruleForm.validate((valid: any) => {
|
console.log(valid);
|
if (valid) {
|
const data = this.editForm.parentCode
|
let code =data[data.length-1]
|
console.log(this.editForm);
|
// 插入角色
|
post(api, {
|
unitId: this.editForm.unitId,
|
unitName:this.editForm.unitName,
|
parentCode: code,
|
parentCodeList:this.editForm.parentCode,
|
areaCode: this.editForm.areaCode,
|
state:parseInt(this.editForm.state)
|
}).then((res: any) => {
|
this.handleSearch()
|
this.visibleCreateModal = false
|
this.editForm = {
|
unitName:'',
|
parentCode: [],
|
areaCode:'',
|
state: '0',
|
parentCodeList:[]
|
}
|
}).catch((err)=>{
|
console.log(err);
|
})
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
|
console.log('editForm',this.editForm)
|
}
|
|
private handleCreateModalCancel(): any {
|
this.visibleCreateModal = false;
|
this.editForm = {
|
unitName:'',
|
parentCode: [],
|
areaCode:'',
|
state: '0',
|
parentCodeList:[]
|
}
|
}
|
private handleInvalidityModalCancel(): any {
|
this.editForm = {
|
unitName:'',
|
parentCode: [],
|
areaCode:'',
|
state: '0',
|
parentCodeList:[]
|
}
|
this.visibleInvalidityModal = false;
|
}
|
|
private cityData() {
|
get("system/area/queryCity",{
|
|
}).then(res => {
|
console.log('00000000000000', res);
|
let org = res.data.data;
|
let lists = JSON.stringify(org);
|
|
lists = lists.replace(/"areaCode"/g, '"value"');
|
|
lists = lists.replace(/"areaName"/g, '"label"');
|
|
const treeLists = JSON.parse(lists)
|
this.parentListOptions = JSON.parse(JSON.stringify(treeLists))
|
this.newParentListOptions = JSON.parse(JSON.stringify(treeLists))
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
}
|
|
private positionLevel(val: any) {
|
this.serch.areaCode = ''
|
this.editForm.areaCode = ''
|
let code =val[val.length-1]
|
get("system/area/code",{
|
code:code
|
}).then(res => {
|
console.log('00000000000000', res);
|
this.areaCodeList= res.data.data;
|
this.newAreaCodeList= res.data.data;
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
}
|
|
private mounted() {
|
this.handleSearch();
|
this.cityData()
|
}
|
|
private updatedAtRender(text: string) {
|
return <span> {
|
moment(text).format('YYYY-MM-DD HH:mm:ss')
|
} </span>;
|
}
|
|
private handleAssert(record: any){
|
get("unit/state",{
|
unitId: record.unitId,
|
|
}).then(res => {
|
this.handleSearch()
|
this.$message.success('操作成功')
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
}
|
private recordTableData: any = null;
|
private handleInvalidity(record: any) {
|
this.visibleInvalidityModal = true
|
this.recordTableData=record
|
}
|
|
private handleInvalidityModalOk(record: any) {
|
this.createForm.validateFields((err: any, fieldsValue: any) => {
|
if (err) {
|
return;
|
}
|
get("unit/invalid",{
|
unitId: this.recordTableData.unitId,
|
invalidReason:this.createForm.getFieldValue('code')
|
}).then(res => {
|
this.$message.success('操作成功')
|
this.visibleInvalidityModal = false
|
this.handleSearch()
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
});
|
}
|
|
private progressStateRender(text: string) {
|
if (text === '0') {
|
return <a-badge status = 'success' text = '生效' />;
|
}
|
return <a-badge status = 'processing' text = '未生效' />;
|
}
|
|
private async handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.visibleCreateModal = true;
|
await this.positionLevel(record.parentCodeList)
|
this.title = '编辑责任单位'
|
let params = _.cloneDeep(record)
|
console.log(params)
|
params.parentCode=record.parentCodeList
|
this.editForm = params
|
this.pageState='edit'
|
console.log('editForm',record)
|
}
|
private async handleDetailModalVisible(visible: boolean, record: any): void {
|
this.visibleCreateModal = true;
|
await this.positionLevel(record.parentCodeList)
|
this.title = '责任单位详情'
|
let params = _.cloneDeep(record)
|
console.log(params)
|
params.parentCode=record.parentCodeList
|
this.editForm = params
|
this.pageState='view'
|
}
|
private opRender(text: string, record: any, index: number) {
|
// 生效console
|
console.log('1111',text)
|
console.log('2222',record)
|
console.log('333', index)
|
if (record.state ==='0') {
|
return <div>
|
<a onClick = {
|
() => this.handleDetailModalVisible(true, record)
|
} > 详情 </a>
|
<a-divider type = 'vertical' />
|
<a v-show="record.isInvalid !=='0'" onClick = {
|
() => this.handleInvalidity(record)
|
} >作废</a>
|
</div>
|
} else {
|
return <div>
|
<a onClick = {
|
() => this.handleDetailModalVisible(true, record)
|
} > 详情 </a>
|
<a-divider type='vertical' />
|
<a onClick = {
|
() => this.handleUpdateModalVisible(true, record)
|
} > 编辑 </a>
|
</div>
|
}
|
this.handleSearch();
|
}
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
</style>
|
