digital-medicine-front/src/views/price/models/addStation.vue

<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width">
        <template #default>
            <div class="d-flex flex-cln" style="height: 60vh;">
                <div class="pd-16">
                    <el-form ref="queryFormRef" :model="queryParams" inline>
                        <el-form-item label="企业名称">
                            <el-input v-model="queryParams.cpyName" placeholder="请输入企业名称" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleQuery">查询</el-button>
                            <el-button @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex1 ov-hd">
                    <vxe-table ref="tableRef" :loading="loading" border :data="list" height="auto" :column-config="{ resizable: true }" :row-config="{ keyField: 'id', isCurrent: true, isHover: true }" :checkbox-config="{ highlight: true, range: true, trigger: 'row', reserve: true }">
                        <vxe-column type="checkbox" width="60"></vxe-column>
                        <vxe-column type="seq" width="60" title="序号" align="center" />
                        <!-- 企业名称 -->
                        <vxe-column title="企业名称" field="cpyName" min-width="100" :formatter="colNoData" />
                        <!-- 会员级别 -->
                        <vxe-column title="会员级别" field="vipLevelName" min-width="100" :formatter="colNoData" />
                        <!-- 企业地址 -->
                        <vxe-column title="企业地址" min-width="100" :formatter="colNoData">
                            <template #default="{ row }">{{ row.regionCodeName }}{{ row.address }}</template>
                        </vxe-column>
                        <!-- 单位负责人 -->
                        <vxe-column title="单位负责人" field="contactPerson" width="90" />
                        <!-- 负责人联系电话 -->
                        <vxe-column title="负责人联系电话" field="tel" width="120" />
                    </vxe-table>
                </div>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            </div>
            <div class="d-flex j-c pd-16">
                <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" inline>
                    <el-form-item label="监测点有效期至" prop="endDate">
                        <el-date-picker v-model="form.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择监测点有效期至" clearable />
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">确认提交</el-button>
        </template>
    </vxe-modal>
</template>
<script setup name="addStation" lang="ts">
import { addOriginCpy, listByPage } from '@/api/price/station';
import { colNoData } from '@/utils/noData';
import { propTypes } from '@/utils/propTypes';
const emit = defineEmits(['update:show', 'close', 'sueccess']);
const props = defineProps({
    title: propTypes.string.def('添加监测点'),
    width: propTypes.number.def(1200),
    show: propTypes.bool.def(false)
});
const dialogVisible = ref(false);
const { query }: any = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const list = ref<any[]>([]);
const loading = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive<any>({
    form: {
        endDate: ''
    },
    rules: {
        endDate: [{ required: true, message: '请选择监测点有效期至', trigger: 'blur' }]
    },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: '1'
    }
});
const formRef = ref<ElFormInstance>();
const { queryParams, form, rules } = toRefs(data);

/** 查询会员信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await listByPage({ ...queryParams.value, packageId: props?.packageId });
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = (level?: any) => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = '';
    queryParams.value.endDate = '';
    handleQuery();
};

const close = () => {
    // formRef.value?.resetFields();
    emit('update:show', false);
    emit('close', false);
};
const tableRef = ref<any>();
const submitForm = async () => {
    const ids = tableRef.value?.getCheckboxReserveRecords(true).concat(tableRef.value?.getCheckboxRecords());
    if (!ids.length) {
        proxy?.$modal.msgWarning('请选择企业');
        return;
    }
    // 表单校验
    const valid = await formRef.value?.validate();
    if (!valid) return;
    const cpyIds = ids.map((item: any) => item.id);
    proxy?.$modal.loading('提交中...');
    const res = await addOriginCpy({ cpyIds, endDate: form.value?.endDate }).finally(() => {
        proxy?.$modal.closeLoading();
    });
    if (!res || res.code !== 200) return;
    proxy?.$modal.msgSuccess('提交成功');
    emit('sueccess', true);
    close();
};
watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
        if (val) {
            getList();
        }
    },
    { immediate: true }
);
onMounted(() => {
    getList();
});
</script>