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

<template>
    <scTable ref="xGridTable" :apiObj="$API.car_rinse.carInfo" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns">
        <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>

    <info-detail v-if="dialog" ref="infoRef" @success="refreshTable" @closed="dialog = false"></info-detail>
</template>

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

const proConfig = reactive({
    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 toolbarConfig = reactive({
    enabled: true,
    print: false
})

const formConfig = reactive({
    data: {
        projectId: TOOL.data.get("PROJECT_ID"),
        projectIdNot: 1
    },
    items: [
        mapFormItemSelect("projectId", "所属项目", proConfig),
        mapFormItemInput("plateNumberLike", "车牌号"),
        mapFormItemSelect("vehicleType", "车辆类型", selectConfig),
        mapFormItemSelect("vehicleColor", "车辆颜色", { ...selectConfig, options: carWashDic.carColor.map((label, value) => ({ label, value })) }),
        mapFormItemSelect("isSupervise", "使用状态", { ...selectConfig, options: carWashDic.isSupervise.map(({ label, value }) => ({ label, value: XEUtils.toValueString(value) })) })
    ]
})

const paramsColums = reactive([
    { column: "projectId" },
    { column: "projectIdNot" },
    { column: "plateNumberLike" },
    { column: "vehicleType" },
    { column: "vehicleColor" },
    { column: "isSupervise" }
])

const columns = reactive([
    { type: "seq", width: 60 },
    { 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.projectId), "projectName") },
    { type: "html", field: "plateNumber", title: "车牌号", minWidth: 120, sortable: true },
    { type: "html", field: "vehicleType", title: "车辆类型", minWidth: 120, sortable: true, formatter: ({ cellValue }) => XEUtils.get(carWashDic.carType, cellValue, "/") },
    { type: "html", field: "vehicleColor", title: "车辆颜色", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(carWashDic.carColor, cellValue, "/") },
    { type: "html", field: "status", title: "使用状态", minWidth: 100, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(carWashDic.isSupervise, item => item.value == row.isSupervise), "label", "/") },
    { type: "html", field: "createTime", title: "创建时间", minWidth: 160, sortable: true },
    { title: "操作", width: 140, fixed: "right", slots: { default: "action" } }
])

// 显示隐藏 筛选表单
const xGridTable = ref();
const refreshTable = (mode = "add") => {
    xGridTable.value.reloadColumn(columns);
    xGridTable.value.searchData(mode);
}

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

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

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

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

defineExpose({
    table_add
})
</script>