<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,
|
pageSizeOptions: ["10", "30", "60", "100"],
|
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: "key",
|
key: "key",
|
align: "center",
|
customRender: (text, record, index) => `${index + 1}`,
|
width: 60,
|
},
|
{
|
title: "名称",
|
align: "center",
|
dataIndex: "unitName",
|
},
|
{
|
title: "上级区域",
|
align: "center",
|
dataIndex: "parentName",
|
},
|
{
|
title: "所属区域",
|
align: "center",
|
dataIndex: "areaName",
|
},
|
{
|
title: "操作时间",
|
dataIndex: "updateTime",
|
},
|
{
|
title: "操作人",
|
align: "center",
|
dataIndex: "createName",
|
},
|
{
|
title: "状态",
|
dataIndex: "state",
|
align: "center",
|
customRender: this.progressStateRender,
|
},
|
{
|
title: "是否作废",
|
dataIndex: "isInvalid",
|
align: "center",
|
customRender: this.progressIsInvalidRender,
|
},
|
{
|
title: "操作",
|
align: "center",
|
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,
|
page: this.pagination.current,
|
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", 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 progressIsInvalidRender(text: Number) {
|
if (text === 0) {
|
return <a-badge status="success" text="未作废" />;
|
}
|
return <a-badge status="error" text="已作废" />;
|
}
|
|
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("record", record);
|
if (record.state === "0") {
|
if (Number(record.isInvalid) === 0) {
|
return (
|
<div>
|
<a onClick={() => this.handleDetailModalVisible(true, record)}>
|
{" "}
|
详情{" "}
|
</a>
|
<a-divider type="vertical" />
|
<a onClick={() => this.handleInvalidity(record)}>作废</a>
|
</div>
|
);
|
} else {
|
return (
|
<div>
|
<a onClick={() => this.handleDetailModalVisible(true, 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>
|
);
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped></style>
|
