118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<template>
|
|
<Dialog class="phone-dialog" :openVis="visible" width="60%" :title="dialogTitle" @close="closeDialog" :maskClosable="false">
|
|
<template #container>
|
|
<div v-if="useForm" class="form-container">
|
|
<Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
|
|
<a-form-item label="性别">
|
|
<a-select v-model:value="formRecord.sex" placeholder="请选择" :options="sexTypeList" />
|
|
</a-form-item>
|
|
</Form>
|
|
</div>
|
|
<BasicTable ref="registerTable" class="table-container" :class="[themeType]" :key="visible" :columns="columns" :apiParams="formState" />
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue';
|
|
import Dialog from '/@/components/dialog/Dialog.vue';
|
|
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
|
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
|
|
import { Form } from 'ant-design-vue';
|
|
import { SexType, sexTypeList } from '/@/utils/settings.ts';
|
|
// import { getPhoneList } from '/@/views/yinChuan/yinChuan.api.ts';
|
|
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
|
|
|
const props = defineProps({
|
|
record: Object,
|
|
title: String,
|
|
useForm: Boolean,
|
|
labelCol: Object,
|
|
wrapperCol: Object,
|
|
setting: Object,
|
|
phoneType: String,
|
|
});
|
|
const { themeType } = useTheme();
|
|
const formItemLayout = {
|
|
labelCol: {
|
|
style: { width: '100px' },
|
|
...props.labelCol,
|
|
},
|
|
wrapperCol: {
|
|
span: 6,
|
|
...props.wrapperCol,
|
|
},
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'realName',
|
|
key: 'realName',
|
|
},
|
|
{
|
|
title: '单位',
|
|
dataIndex: 'departName',
|
|
key: 'departName',
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '部门',
|
|
dataIndex: 'orgName',
|
|
key: 'orgName',
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '性别',
|
|
dataIndex: 'sex_dictText',
|
|
key: 'sex_dictText',
|
|
width: 80,
|
|
},
|
|
{
|
|
title: '时间',
|
|
dataIndex: 'time',
|
|
key: 'time',
|
|
},
|
|
{
|
|
title: '电话',
|
|
dataIndex: 'phone',
|
|
key: 'phone',
|
|
},
|
|
];
|
|
const formRecord = ref({
|
|
sex: SexType.all,
|
|
});
|
|
const formState = computed(() => ({
|
|
...formRecord.value,
|
|
dataType: props.setting.dataType,
|
|
phoneType: props.phoneType,
|
|
showType: '0',
|
|
}));
|
|
const dialogTitle = ref();
|
|
const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
|
|
const registerTable = ref();
|
|
watch(props, () => {
|
|
registerTable.value?.getRecords();
|
|
dialogTitle.value = props.title;
|
|
});
|
|
defineExpose({
|
|
openDialog,
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.phone-dialog {
|
|
overflow: auto;
|
|
}
|
|
|
|
.form-container {
|
|
margin: 10px 0;
|
|
|
|
:deep(.ant-form-item-label > label) {
|
|
color: var(--formLabel);
|
|
}
|
|
}
|
|
|
|
.table-container {
|
|
margin: 0 10px;
|
|
}
|
|
</style>
|