easydo-ops/src/views/dataMock/carwash/components/record/index.vue

<template>
    <scTable ref="xGridTable" batchDel :apiObj="$API.car_rinse.record" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns" v-bind="props.options">
        <template #default_imgUrl="{ row, column }">
            <template v-if="XEUtils.get(row, `folders.${column.field}.entities[0].path`)">
                <sc-image style="cursor: pointer;" :fileName="XEUtils.get(row, `folders.${column.field}.entities[0].name`)" :path="XEUtils.get(row, `folders.${column.field}.entities[0].path`)" width="40" height="40"></sc-image>
            </template>
        </template>
        
        <template #action="{ row }">
            <el-button type="primary" link @click="table_edit(row)">
                <template #icon><sc-iconify icon="ant-design:edit-outlined"></sc-iconify></template>修改
            </el-button>
            <el-button type="primary" link @click="table_del(row)">
                <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>删除
            </el-button>
        </template>
    </scTable>

    <record-detail v-if="dialog" ref="recordRef" :projectId="props.isTemp ? 1 : TOOL.data.get('PROJECT_ID')" @success="refreshTable" @closed="dialogClose"></record-detail>
</template>

<script setup>
import moment from "moment";
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
import { dataSource } from "@/utils/basicDic";
import { carWashDic } from "@/views/dataMock/carwash/main";
import recordDetail from "./detail";

const props = defineProps({
    options: { type: Object, default: () => {} },
    isTemp: { type: Boolean, default: false },
    hideHandler: { type: Boolean, default: false }
})
const visible = computed(() => !props.isTemp);

const proConfig = reactive({
    visible,
    storageKey: "PROJECT",
    resetValue: TOOL.data.get("PROJECT_ID"),
    optionProps: { label: "projectName", value: "fpiId" },
    events: {
        change: data => XEUtils.assign(formConfig.data, data)
    }
})

const selectConfig = reactive({
    options: carWashDic.carType.map((label, value) => ({ label, value })),
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
})

const datetimerangeConfig = reactive({
    span: 7,
    resetValue: () => [moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"), moment().add(1, "hour").format("YYYY-MM-DD HH:mm:ss")],
    props: {
        type: "datetimerange",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间",
        format: "YYYY-MM-DD HH:mm"
    }
})

const toolbarConfig = reactive({
    enabled: true,
    print: false
})

const formConfig = reactive({
    data: {
        orderBy: "captureTime_desc",
        projectId: TOOL.data.get("PROJECT_ID"),
        fpiIdNot: 1,
        createTime: [moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"), moment().add(1, "hour").format("YYYY-MM-DD HH:mm:ss")]
    },
    items: [
        mapFormItemSelect("projectId", "所属项目", proConfig),
        mapFormItemDatePicker("createTime", "抓拍时间", datetimerangeConfig),
        mapFormItemInput("licensePlate", "车牌号", { span: 5 }),
        mapFormItemSelect("carType", "车辆类型", selectConfig),
        mapFormItemSelect("alarmType", "识别结果", { ...selectConfig, options: carWashDic.alarmType.map((label, value) => ({ label, value })).slice(1) }),
    ]
})

const paramsColums = reactive([
    { column: "orderBy" },
    { column: "fpiId", field: visible.value ? "projectId" : "fpiIdNot" },
    visible.value ? { column: "fpiIdNot" } : {},
    { column: "licensePlate" },
    { column: "carType" },
    { column: "alarmType" },
    { column: "captureTimeBegin", field: "createTime[0]" },
    { column: "captureTimeEnd", field: "createTime[1]" }
])

const columns = reactive([
    { visible: !props.hideHandler, type: "checkbox", fixed: "left", width: 40, align: "center" },
    { type: "seq", fixed: "left", width: 60 },
    { visible, type: "html", field: "projectName", title: "项目名称", minWidth: 160, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(TOOL.data.get("PROJECT"), item => item.fpiId == row.fpiId), "projectName") },
    { type: "html", field: "captureTime", title: "抓拍时间", minWidth: 160, sortable: true },
    { type: "html", field: "enterTime", title: "车辆入场时间", minWidth: 160, sortable: true },
    { type: "html", field: "leaveTime", title: "车辆出场时间", minWidth: 160, sortable: true },
    { type: "html", field: "licensePlate", title: "车牌号", minWidth: 120, sortable: true },
    { type: "html", field: "licensePlateColor", title: "车牌颜色", minWidth: 120, sortable: true, formatter: ({ cellValue }) => XEUtils.get(carWashDic.plateColor, cellValue, cellValue) },
    { type: "html", field: "carType", title: "车辆类型", minWidth: 120, sortable: true, formatter: ({ cellValue }) => XEUtils.get(carWashDic.carType, cellValue, cellValue) },
    { type: "html", field: "alarmType", title: "识别结果", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(carWashDic.alarmType, cellValue, cellValue) },
    { field: "carrinse/attach", title: "车身清洗图片", minWidth: 110, align: "center", slots: { default: "default_imgUrl" } },
    { field: "carrinse/side", title: "后盖密闭图片", minWidth: 110, align: "center", slots: { default: "default_imgUrl" } },
    { visible, type: "html", field: "dataSource", title: "数据来源", fixed: "right", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(dataSource, cellValue, cellValue) },
    { visible: !props.hideHandler, title: "操作", fixed: "right", width: 140, align: "center", slots: { default: "action" } }
])

// 显示隐藏 筛选表单
const xGridTable = ref();
const getTableTotal = () => xGridTable.value.getTableData().tableData.length;

const refreshTable = (mode = "add") => {
    xGridTable.value.reloadColumn(columns);
    xGridTable.value.searchData(mode);
}

const recordRef = ref();
const dialog = ref(false);

const dialogClose = isDel => {
    dialog.value = false;
    isDel && refreshTable();
}

const table_add = () => {
    dialog.value = true;
    nextTick(() => recordRef.value?.open());
}

const table_edit = row => {
    dialog.value = true;
    nextTick(() => recordRef.value?.setData(row));
}

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该冲洗记录?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.car_rinse.record.del({ id }).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    });
}

defineExpose({
    table_add,
    refreshTable,
    getTableTotal
})
</script>