309 lines
12 KiB
Vue
309 lines
12 KiB
Vue
<template>
|
|
<Dialog v-bind="$attrs" class="index-modal" :openVis="visible" width="60%" :title="dialogTitle" @close="handleClose" :maskClosable="false">
|
|
<template #container>
|
|
<Form style="width: 100%">
|
|
<div style="width: 100%">
|
|
<Row style="display: flex; flex-wrap: wrap; width: 100%; align-items: center">
|
|
<Col :span="6">
|
|
<a-form-item label="被救助人">
|
|
<a-input
|
|
style="background: #082147; border-color: #082147; color: #ffffff"
|
|
placeholder="请输入姓名"
|
|
v-model:value="name"
|
|
/>
|
|
</a-form-item>
|
|
</Col>
|
|
<Col :span="6">
|
|
<a-form-item label="性别">
|
|
<a-select
|
|
placeholder="选择性别"
|
|
v-model:value="salvageUserSex"
|
|
:options="[
|
|
{
|
|
label: '全部',
|
|
value: '',
|
|
},
|
|
{
|
|
label: '男',
|
|
value: SexType.male,
|
|
},
|
|
{
|
|
label: '女',
|
|
value: SexType.female,
|
|
},
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
</Col>
|
|
<Col :span="6">
|
|
<a-form-item label="救助方式">
|
|
<a-select
|
|
placeholder="选择救助方式"
|
|
v-model:value="initiatorType"
|
|
:options="[
|
|
{
|
|
label: '全部',
|
|
value: '',
|
|
},
|
|
{
|
|
label: '120',
|
|
value: '0',
|
|
},
|
|
{
|
|
label: '应急就医',
|
|
value: '1',
|
|
},
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
</Col>
|
|
<Col :span="6">
|
|
<a-form-item label="单位">
|
|
<a-select
|
|
:filterOption="
|
|
(input: string, option: any): boolean => {
|
|
const str: string = input.trim().toLowerCase();
|
|
return option.label.toLowerCase().indexOf(str) >= 0;
|
|
}
|
|
"
|
|
:show-search="true"
|
|
placeholder="选择单位"
|
|
@change="changeSecond"
|
|
v-model:value="orgCode1"
|
|
:options="option1"
|
|
/>
|
|
</a-form-item>
|
|
</Col>
|
|
<Col :span="6">
|
|
<a-form-item label="部门">
|
|
<a-select
|
|
:filterOption="
|
|
(input: string, option: any): boolean => {
|
|
const str: string = input.trim().toLowerCase();
|
|
return option.label.toLowerCase().indexOf(str) >= 0;
|
|
}
|
|
"
|
|
:show-search="true"
|
|
placeholder="选择部门"
|
|
v-model:value="orgCode2"
|
|
:options="option2"
|
|
/>
|
|
</a-form-item>
|
|
</Col>
|
|
<Col :span="8">
|
|
<a-form-item label="时间">
|
|
<a-range-picker
|
|
v-model:value="dateTime"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
:bordered="false"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</Col>
|
|
<Col :span="8">
|
|
<div class="form-btn">
|
|
<a-button size="middle" @click="handleClickReset" style="border-color: #00ccff">重置</a-button>
|
|
<a-button
|
|
size="middle"
|
|
@click="handleClickSearch"
|
|
:loading="loading"
|
|
style="margin-left: 10px; background: #00ccff; border-color: #00ccff; color: #ffffff"
|
|
>
|
|
搜索
|
|
</a-button>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</Form>
|
|
<BasicTable
|
|
@table-load="tableLoad"
|
|
ref="registerTable"
|
|
class="table-container"
|
|
:api="twoLModalApi"
|
|
:columns="columns[1]"
|
|
:api-params="formState"
|
|
/>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import Dialog from '/@/components/dialog/Dialog.vue';
|
|
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { Form, Row, Col } from 'ant-design-vue';
|
|
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
|
|
import { allSecondaryDepartsApi, getThreeDepartByOrgCodeApi, twoLModalApi } from '/@/views/indexSun/indexSun.api.ts';
|
|
import { columns } from '/@/views/indexSun/indexSun.ts';
|
|
import { SexType } from '/@/utils/settings.ts';
|
|
|
|
const loading = ref<boolean>(false);
|
|
const registerTable = ref();
|
|
const dialogTitle = ref('');
|
|
const option1 = ref([{ label: '全部', value: '' }]);
|
|
const option2 = ref([{ label: '全部', value: '' }]);
|
|
const name = ref('');
|
|
const salvageUserSex = ref('');
|
|
const initiatorType = ref('');
|
|
const orgCode1 = ref('');
|
|
const orgCode2 = ref('');
|
|
const formState = ref({});
|
|
const dateTime = ref([]);
|
|
const initForm = ref({});
|
|
onMounted(() => {
|
|
getSecondDepart();
|
|
});
|
|
function getSecondDepart() {
|
|
allSecondaryDepartsApi({})
|
|
.then((res: any) => {
|
|
if (res.code === 200) {
|
|
const op: any[] = res?.result
|
|
? res.result.map((it: any) => {
|
|
return {
|
|
label: it.departName,
|
|
value: it.orgCode,
|
|
};
|
|
})
|
|
: [];
|
|
option1.value = option1.value.concat(op);
|
|
} else {
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
function changeSecond() {
|
|
orgCode2.value = '';
|
|
option2.value = [{ label: '全部', value: '' }];
|
|
if (orgCode1.value) {
|
|
getThirdD();
|
|
}
|
|
}
|
|
|
|
function getThirdD() {
|
|
getThreeDepartByOrgCodeApi({ orgCode: orgCode1.value })
|
|
.then((res: any) => {
|
|
if (res.code === 200) {
|
|
const op: any[] = res?.result
|
|
? res.result.map((it: any) => {
|
|
return {
|
|
label: it.departName,
|
|
value: it.orgCode,
|
|
};
|
|
})
|
|
: [];
|
|
option2.value = option2.value.concat(op);
|
|
} else {
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
function tableLoad(b: boolean) {
|
|
loading.value = b;
|
|
}
|
|
|
|
function handleClickSearch() {
|
|
formState.value = {
|
|
orgCode: orgCode2.value || orgCode1.value,
|
|
realName: name.value,
|
|
type: initForm.value.type,
|
|
search: initForm.value.search,
|
|
createTimeStart: dateTime.value && dateTime.value.length > 0 ? dateTime.value[0] : '',
|
|
createTimeEnd: dateTime.value && dateTime.value.length > 0 ? dateTime.value[1] : '',
|
|
};
|
|
}
|
|
|
|
function handleClickReset() {
|
|
orgCode1.value = '';
|
|
orgCode2.value = '';
|
|
name.value = '';
|
|
salvageUserSex.value = '';
|
|
initiatorType.value = '';
|
|
dateTime.value = [initForm.value.createTimeStart, initForm.value.createTimeEnd];
|
|
formState.value = initForm.value;
|
|
}
|
|
|
|
const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
|
|
|
|
function handleClose() {
|
|
orgCode2.value = '';
|
|
orgCode1.value = '';
|
|
name.value = '';
|
|
salvageUserSex.value = '';
|
|
initiatorType.value = '';
|
|
closeDialog();
|
|
}
|
|
|
|
function openD(params: any) {
|
|
dialogTitle.value = '应急求助详情';
|
|
formState.value = { ...params };
|
|
dateTime.value = [params?.createTimeStart, params?.createTimeEnd];
|
|
delete params['createTimeStart'];
|
|
delete params['createTimeEnd'];
|
|
initForm.value = params;
|
|
openDialog();
|
|
}
|
|
defineExpose({
|
|
openDialog: openD,
|
|
closeDialog,
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
:deep(.dialog) {
|
|
border: 1px solid #00ccff !important;
|
|
}
|
|
.index-modal {
|
|
.form-btn {
|
|
margin-bottom: 8px;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
:deep(.ant-form-item-label > label) {
|
|
color: #ffffff !important;
|
|
padding-left: 20px;
|
|
width: 100px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
:deep(.ant-form-item) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
:deep(.ant-picker) {
|
|
width: 250px;
|
|
color: #fff !important;
|
|
background-color: #082147 !important;
|
|
border: 1px solid transparent !important;
|
|
border-radius: 4px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 30px;
|
|
}
|
|
:deep(.ant-picker-input > input) {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.ant-col {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
:deep(.anticon-calendar) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
:deep(.anticon-close-circle) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
:deep(.ant-picker-clear) {
|
|
background: #061731;
|
|
}
|
|
</style>
|