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

<template>
    <scTable ref="xGridTable" batchDel :apiObj="$API.scc.record" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns" v-bind="props.options">
        <template #default_imgUrl="{ row }">
            <template v-if="XEUtils.get(XEUtils.toStringJSON(row.features), 'bigImage.image')">
                <vxe-image style="cursor: pointer;" :src="'/minio' + XEUtils.get(XEUtils.toStringJSON(row.features), 'bigImage.image')" width="40" height="40" :toolbar-config="imageToolbar"></vxe-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="dialog = false"></record-detail>
</template>

<script setup>
import moment from "moment";
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
import { dataSource, objectToArray } from "@/utils/basicDic";
import { typeDic, unitDic } from "@/views/dataMock/standard/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 radioConfig = reactive({
    span: props.isTemp ? 5 : 6,
    resetValue: 0,
    options: [{ label: "全部", value: 0 }, { label: "报警数据", value: 1 }],
    props: { filterable: false, clearable: false },
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
})

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, mountedId: null })
    }
})

const mountedConfig = reactive({
    visible,
    api: {
        key: "scc.mounted",
        query: {
            projectId: computed(() => formConfig.data.projectId),
            projectIdNot: 1
        }
    },
    slot: {
        style: { float: "right", paddingLeft: "6px", color: "#8492a6" }
    },
    optionProps: { label: "mountedName", value: "id", slot: ({ data }) => XEUtils.get(XEUtils.find(TOOL.data.get("PROJECT"), item => item.fpiId === data.projectId), "projectName") },
    events: {
        change: data => XEUtils.assign(formConfig.data, data)
    }
})

const selectConfig = reactive({
    options: objectToArray(typeDic),
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
})

const datetimerangeConfig = reactive({
    span: 7,
    resetValue: () => [moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), moment().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: {
        projectId: TOOL.data.get("PROJECT_ID"),
        projectIdNot: 1,
        isWarning: 0,
        createTime: [moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), moment().format("YYYY-MM-DD HH:mm:ss")]
    },
    items: [
        mapFormItemSelect("isWarning", "数据类型", radioConfig),
        mapFormItemSelect("projectId", "所属项目", proConfig),
        mapFormItemSelect("mountedId", "设备安装点", mountedConfig),
        mapFormItemSelect("vtype", "监测类型", selectConfig),
        mapFormItemDatePicker("createTime", "监测时间", datetimerangeConfig)
    ]
})

const paramsColums = reactive([
    { column: "projectId", field: visible.value ? "" : "projectIdNot" },
    visible.value ? { column: "projectIdNot" } : {},
    { column: "mountedId" },
    { column: "isWarning" },
    { column: "vtype" },
    { column: "createTimeBegin", field: "createTime[0]" },
    { column: "createTimeEnd", field: "createTime[1]" }
])

const columns = reactive([
    { visible: !props.hideHandler, type: "checkbox", fixed: "left", width: 40 },
    { 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.projectId), "projectName") },
    { visible, type: "html", field: "groundName", title: "工地场区", minWidth: 160, sortable: true },
    { visible, type: "html", field: "mountedName", title: "设备安装点", minWidth: 160, sortable: true },
    { type: "html", field: "vtype", title: "监测类型", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(typeDic, cellValue, cellValue) },
    { type: "html", field: "taskValue", title: "监测数值", minWidth: 100, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.divide(XEUtils.get(row, "value"), 100) + XEUtils.get(unitDic, XEUtils.get(row, "vtype")) },
    { type: "html", field: "createTime", title: "监测时间", minWidth: 160, sortable: true },
    { 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 imageToolbar = reactive({
    print: false,
    download: true
})

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

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

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

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.scc.record.del({ id }).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    });
}

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