easydo-ops/src/views/dataMock/elevator/batchDel.vue

<template>
    <el-dialog v-model="visible" title="批量删除" fullscreen :close-on-click-modal="false" @closed="$emit('closed')">
        <el-tabs v-model="dataSouce">
            <el-tab-pane label="标准数据" name="normal"></el-tab-pane>
            <el-tab-pane label="考勤数据" name="attendance"></el-tab-pane>
        </el-tabs>

        <el-form ref="formRef" :model="form" :rules="rules" label-width="126">
            <el-form-item v-if="dataSouce == 'normal'" label="数据来源" prop="isTemp">
                <el-radio-group v-model="form.isTemp" @change="refreshTable">
                    <el-radio :value="true">模版项目</el-radio>
                    <el-radio :value="false">其他项目</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-row>
                <el-col :lg="8" :md="12" :xs="24">
                    <el-form-item label="数据时间" prop="targetTime">
                        <el-date-picker v-model="form.targetTime" type="datetimerange" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="refreshTable"></el-date-picker>
                    </el-form-item>
                </el-col>
                <template v-if="dataSouce == 'attendance' || !form.isTemp">
                    <el-col :lg="8" :md="12" :xs="24">
                        <el-form-item label="项目名称" prop="targetProjectId">
                            <el-select v-model="form.targetProjectId" filterable placeholder="请选择删除数据的项目" @change="refreshTable">
                                <el-option v-for="item in $TOOL.data.get('PROJECT')" :key="item.fpiId" :label="item.projectName" :value="item.fpiId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :md="12" :xs="24">
                        <el-form-item label="设备安装点" prop="targetMountedId">
                            <el-select v-model="form.targetMountedId" filterable placeholder="请选择删除数据的安装点" @change="refreshTable">
                                <el-option v-for="item in filterTargetM" :key="item.id" :label="item.mountedName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>

            <el-divider style="margin-top: 6px;" />

            <component ref="tableRef" :is="dataSouce == 'normal' ? comp['record'] : comp[dataSouce]" :isTemp="form.isTemp" hideHandler :options="tableOptions"></component>
        </el-form>

        <template #footer>
            <el-button :loading="isSaving" type="primary" auto-insert-space @click="submit">提交</el-button>
            <el-button auto-insert-space @click="visible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import moment from "moment";
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { rangeShortcuts } from "@/utils/shortcuts";
import comp from "./components";

const route = useRoute();
const $emit = defineEmits(["success", "closed"]);
const dataSouce = ref("normal");

const visible = ref(false);
const isSaving = ref(false);

const shortcuts = rangeShortcuts();
const form = ref({
    isTemp: false,
    targetProjectId: TOOL.data.get("PROJECT_ID"),
    targetProjectIdNot: 1,
    targetMountedId: null,
    recordType: "ELEVATOR_RECORD_ENTER",
    targetTime: [moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), moment().format("YYYY-MM-DD HH:mm:ss")]
});

const rules = reactive({
    isTemp: [{ required: true }],
    targetProjectId: [{ required: true, message: "请选择删除数据的项目" }],
    targetMountedId: [{ required: true, message: "请选择删除数据的安装点" }],
    targetTime: [{ required: true, message: "请选择删除数据的时间" }]
})

const tableRef = ref();
const tableOptions = reactive({
    batchDel: false,
    maxHeight: 1048,
    toolbarConfig: { enabled: true, print: false, zoom: false },
    formConfig: { enabled: false, data: form },
    paramsColums: computed(() => [
        { column: "projectId", field: form.value.isTemp ? "targetProjectIdNot" : "targetProjectId"  },
        form.value.isTemp ? {} : { column: "projectIdNot", field: "targetProjectIdNot" },
        dataSouce.value == 'normal' ? {} : { column: "recordType" },
        { column: "mountedId", field: "targetMountedId" },
        { column: "createTimeBegin", field: "targetTime[0]" },
        { column: "createTimeEnd", field: "targetTime[1]" }
    ])
})
const refreshTable = () => tableRef.value.refreshTable();

const mounteds = ref([]);
const filterTargetM = computed(() => form.value.targetProjectId ? XEUtils.filter(mounteds.value, item => item.projectId == form.value.targetProjectId) : []);
const fetchMounted = async () => {
    const res = await API.elevator.mounted.get();
    mounteds.value = res || [];
}

const open = () => {
    visible.value = true;
    fetchMounted();
}

const formRef = ref();
const submit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            const data = XEUtils.pick(form.value, "targetProjectId", "targetMountedId");
            XEUtils.set(data, "targetBeginTime", XEUtils.first(form.value.targetTime));
            XEUtils.set(data, "targetEndTime", XEUtils.last(form.value.targetTime));
            if (form.value.isTemp) {
                XEUtils.set(data, "targetProjectId", 1);
                XEUtils.set(data, "targetMountedId", XEUtils.get(XEUtils.find(mounteds.value, item => item.projectId == 1), "id"));
            }

            isSaving.value = true;
            API.elevator.dataMock.removeData[dataSouce.value](data).then(() => {
                isSaving.value = false;
                ElMessage.success("操作成功");
                visible.value = false;
                $emit("success");
            }).catch(() => isSaving.value = false);
        } else {
            return false;
        }
    });
}

defineExpose({
    open
})
</script>

<style lang="scss" scoped>
.el-form {margin-top: 5px;padding-right: var(--el-message-close-size, 16px);}
.el-form-item .el-radio-group {flex-wrap: nowrap;}
.el-form :deep(.el-main) {padding-right: 0;padding-bottom: 0;}
</style>