admin/src/views/desk/wbs/create-new-excel.vue

<template>
    <hc-dialog
        v-model="isShow"
        is-footer-center
        title="创建新的元素表"
        @close="dialogClose"
        @save="saveFormAndElementHandle"
        widths="56rem"
        :loading="submitLoading"
    >
        <el-form
            ref="formRef"
            :model="formModel"
            :rules="formRules"
            label-position="top"
            label-width="auto"
        >
            <el-row :gutter="60">
                <el-col :span="12">
                    <el-form-item label="表名" prop="tableName">
                        <el-input v-model="formModel.tableName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报率">
                        <el-input v-model="formModel.fillRate" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="60">
                <el-col :span="12">
                    <el-form-item label="表类型：" prop="tableType">
                        <el-select
                            v-model="formModel.tableType"
                            placeholder="选择表类型"
                            filterable
                            block
                        >
                            <el-option
                                v-for="item in tableTypelist"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属方：" prop="tableOwner">
                        <el-select
                            v-model="formModel.tableOwner"
                            placeholder="选择所属方"
                            filterable
                            block
                        >
                            <el-option
                                v-for="item in ownerTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <hc-card-item>
            <template #header>
                <el-tooltip
                    :visible="editVisible"
                    effect="light"
                    placement="bottom-start"
                >
                    <template #content>
                        <div class="text-sm text-red">
                            1.元素名称不能为空<br />
                            2.数据类型不能为空<br />
                            3.元素长度不能为空<br />
                        </div>
                    </template>
                    <el-button
                        type="danger"
                        @mouseenter="editVisible = true"
                        @mouseleave="editVisible = false"
                    >
                        <HcIcon name="question" />
                        <span>编辑说明</span>
                    </el-button>
                </el-tooltip>
            </template>
            <template #extra>
                <el-button size="small" type="success" @click="addRowClick"
                    >新增</el-button
                >
                <el-button size="small" type="primary" @click="uploadClick"
                    >快捷导入</el-button
                >
                <el-button size="small" type="warning">下载导入模板</el-button>
            </template>

            <hc-table :column="tableColumn" :datas="editEleList">
                <template #eName="{ row }">
                    <hc-table-input v-model="row.eName" />
                </template>
                <template #eType="{ row }">
                    <el-select
                        v-model="row.eType"
                        @change="setDefaultLength(row)"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in dataTypeList"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </template>
                <template #eLength="{ row }">
                    <hc-table-input v-model="row.eLength" />
                </template>
                <template #eAllowDeviation="{ row }">
                    <div class="flex">
                        <el-select
                            v-model="row.allow"
                            :popper-append-to-body="false"
                            placeholder="请选择"
                        >
                            <el-option :key="1" label="-" value="-"></el-option>
                            <el-option :key="2" label=">" value=">"></el-option>
                            <el-option :key="3" label="<" value="<"></el-option>
                            <el-option :key="4" label="≥" value="≥"></el-option>
                            <el-option :key="5" label="≤" value="≤"></el-option>
                            <el-option :key="6" label="±" value="±"></el-option>
                            <el-option
                                :key="7"
                                label="【】"
                                value="【】"
                            ></el-option>
                        </el-select>
                        <hc-table-input v-model="row.deviation" />
                    </div>
                </template>
                <template #eInspectionMethod="{ row }">
                    <hc-table-input v-model="row.eInspectionMethod" />
                </template>
                <template #action="{ row, index }">
                    <el-link type="danger" @click="rowDelClick(row, index)"
                        >删除</el-link
                    >
                </template>
            </hc-table>
        </hc-card-item>
    </hc-dialog>
    <!-- 模板导入 -->
    <hc-dialog v-model="fileModal" title="模板导入" @save="saveFileImport">
        <hc-card-item>
            <template #header>
                <div class="text-sm text-red">
                    提示：必须按照系统要求的模版格式上传，否则系统识别无效
                </div>
            </template>

            <template #extra>
                <el-button
                    size="small"
                    type="primary"
                    @click="downLoadFile"
                    :loading="downloadLoading"
                    >下载导入模板</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    @click="importModalClick"
                    :loading="uploadsLoading"
                    >本地上传</el-button
                >
            </template>
            <hc-table :column="fileTableColumn" :datas="fileTableData">
                <template #elementAllowDeviation="{ row }">
                    <div class="flex">
                        <el-select
                            v-model="row.allow"
                            :popper-append-to-body="false"
                            placeholder="请选择"
                        >
                            <el-option :key="1" label="-" value="-"></el-option>
                            <el-option :key="2" label=">" value=">"></el-option>
                            <el-option :key="3" label="<" value="<"></el-option>
                            <el-option :key="4" label="≥" value="≥"></el-option>
                            <el-option :key="5" label="≤" value="≤"></el-option>
                            <el-option :key="6" label="±" value="±"></el-option>
                            <el-option
                                :key="7"
                                label="【】"
                                value="【】"
                            ></el-option>
                        </el-select>
                        <hc-table-input v-model="row.elementAllowDeviation" />
                    </div>
                </template>
            </hc-table>
        </hc-card-item>
    </hc-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { getDictionaryData, getDictionaryName } from "~src/utils/tools";
import mainApi from "~api/wbs/wbsforelement";
import { useAppStore } from "~src/store";
import { HcDelMsg, HcUploadFileApi } from "hc-vue3-ui";
import {
    deepClone,
    formValidate,
    getArrValue,
    isNullES,
    getObjValue,
    downloadBlob,
} from "js-fast-way";
const store = useAppStore();
const userInfo = ref(store.getUserInfo);
const props = defineProps({
    ownerTypeList: {
        type: Array,
        default: () => [],
    },
    tableTypelist: {
        type: Array,
        default: () => [],
    },
    wid: {
        type: [String, Number],
        default: "",
    },
    node: {
        type: Object,
        default: () => {},
    },
});
//事件
const emit = defineEmits(["close"]);
//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel("modelValue", {
    default: false,
});
//监听显示
watch(isShow, (val) => {
    if (val) {
        getDataTypelist();
    } else {
        emit("close");
    }
});
const ownerTypeList = ref(props.ownerTypeList);
const tableTypelist = ref(props.tableTypelist);
const wbsId = ref(props.wid);
const node = ref(props.node);
//监听数据
watch(
    () => [props.ownerTypeList, props.tableTypelist, props.wid, props.node],
    ([own, table, wbsid, nodeInfo]) => {
        ownerTypeList.value = own;
        tableTypelist.value = table;
        wbsId.value = wbsid;
        node.value = nodeInfo;
    },
    { deep: true }
);
//表单
const formRef = ref(null);
const formRules = {
    tableName: {
        required: true,
        trigger: "blur",
        message: "请输入表单名称",
    },
    tableType: {
        required: true,
        trigger: "blur",
        message: "请选择表单类型",
    },
    tableOwner: {
        required: true,
        trigger: "blur",
        message: "请选择所属方",
    },
    wid: {
        type: [String, Number],
        default: "",
    },
};

const curEleTable = ref({});
const formModel = ref({});
const editVisible = ref(false);
const tableColumn = [
    { key: "eName", name: "元素名称", width: 150 },
    { key: "eType", name: "数据类型", width: 120 },
    { key: "eLength", name: "长度" },
    { key: "eAllowDeviation", name: "允许偏差值", width: 180 },
    { key: "eInspectionMethod", name: "检查方法和频率" },
    { key: "action", name: "操作", width: 80, align: "center" },
];
const editEleList = ref([]);
const dataTypeList = ref([]);
const getDataTypelist = async () => {
    if (dataTypeList.value.length > 1) {
        return;
    }
    dataTypeList.value = await getDictionaryData("data_type", false);
};
const setDefaultLength = (row) => {
    const dataTypeDefaultMap = {
        1: 250, //字符串
        2: 50, //整数
        3: 50, //小数
        4: 50, //日期
        5: 50, //数值
        6: 50, //签名
        7: 100, //文件
    };
    row.eLength = dataTypeDefaultMap[row.eType];
};
const rowDelClick = (row, index) => {
    editEleList.value.splice(index, 1);
};
const addRowClick = () => {
    editEleList.value.push({});
};
const submitLoading = ref(false);
const editSubmitClick = async () => {
    const formRes = await formValidate(formRef.value);
    if (!formRes) return false;
    for (let i = 0; i < editEleList.value.length; i++) {
        if (!editEleList.value[i].id) {
            window.$message.warning("请先将新增的元素点击保存");
            return;
        }
        if (!editEleList.value[i].eName) {
            window.$message.warning("请填写第" + (i + 1) + "条元素名称");
            return;
        }
        if (!editEleList.value[i].eType) {
            window.$message.warning("请选择第" + (i + 1) + "条数据类型");
            return;
        }
        if (!editEleList[i].value.eLength) {
            window.$message.warning("请填写第" + (i + 1) + "条数据长度");
            return;
        }
    }
    if (editEleList.value.length > 0) {
        editEleList.value.forEach((element) => {
            element.eAllowDeviation =
                (element.allow ? element.allow : "") +
                (element.deviation ? element.deviation : "");
        });
        submitLoading.value = true;
        const { error, code } = await mainApi.updateBatchElements(
            editEleList.value,
            curEleTable.value.initTableName
        );
        submitLoading.value = false;
        if (!error && code === 200) {
            window?.$message?.success("操作成功");
            dialogClose();
        }
    } else {
        window.$message.warning("请填写完整元素表信息");
    }
};
const saveFormAndElementHandle = async () => {
    const formRes = await formValidate(formRef.value);
    if (!formRes) return false;
    formModel.value.wbsId = wbsId.value;
    formModel.value.tenantId = userInfo.value.tenant_id;
    formModel.value.nodeType = -1;
    formModel.value.type = 2; //	'1'节点 '2'表
    formModel.value.parentId = node.value.id;
    formModel.value.nodeName = node.value.nodeName;
    for (let i = 0; i < editEleList.value.length; i++) {
        if (!editEleList.value[i].eName) {
            window.$message.warning("请填写第" + (i + 1) + "条元素名称");
            return;
        }
        if (!editEleList.value[i].eType) {
            window.$message.warning("请选择第" + (i + 1) + "条数据类型");
            return;
        }
        if (!editEleList.value[i].eLength) {
            window.$message.warning("请填写第" + (i + 1) + "条数据长度");
            return;
        }
    }
    if (editEleList.value.length > 0) {
        editEleList.value.forEach((element) => {
            element.eAllowDeviation =
                (element.allow ? element.allow : "") +
                (element.deviation ? element.deviation : "");
        });
        submitLoading.value = true;
        formModel.value.elementList = editEleList;
        const { error, code } = await mainApi.saveFormAndElement({
            ...formModel.value,
        });
        submitLoading.value = false;
        if (!error && code === 200) {
            window?.$message?.success("操作成功");
            dialogClose();
        }
    } else {
        window.$message.warning("请填写完整元素表信息");
    }
};
//关闭弹窗
const dialogClose = () => {
    isShow.value = false;
    emit("close");
};
const fileModal = ref(false);
const uploadClick = () => {
    fileModal.value = true;
    fileTableData.value = [];
};
const fileTableColumn = [
    { key: "elementName", name: "元素名称" },
    { key: "elementType", name: "数据类型" },
    { key: "elementLength", name: "长度" },
    { key: "elementAllowDeviation", name: "允许偏差值" },
    { key: "elementInspectionMethod", name: "检查方法和频率" },
];
const fileTableData = ref([]);
const downloadLoading = ref(false);
const downLoadFile = async () => {
    downloadLoading.value = true;
    const { error, disposition, res } = await mainApi.getExportTem();
    //处理数据
    downloadLoading.value = false;
    if (!error) {
        if (disposition) {
            downloadBlob(res, disposition);
        } else {
            window.$message?.error("数据异常");
        }
    }
};
const uploadsLoading = ref(false);
const importModalClick = () => {
    HcUploadFileApi({
        multiple: false,
        url: "/api/blade-manager/wbsFormElement/import-wbsElement",
        target: "/api/blade-manager/wbsFormElement/import-wbsElement",
        progress: () => {
            uploadsLoading.value = true;
        },
        success: (file, res) => {
            fileTableData.value = getArrValue(res.data);
        },
        error: (file) => {
            uploadsLoading.value = false;
            window.$message.error(`${file.name} 上传失败`);
        },
        finish: () => {
            uploadsLoading.value = false;
            window.$message.success("上传完成");
        },
    });
};
const saveFileImport = () => {
    fileModal.value = false;
    fileTableData.value.forEach((ele) => {
        editEleList.value.push({
            eName: ele.elementName,
            eAllowDeviation: ele.elementAllowDeviation,
            eName: ele.elementInspectionMethod,
            eLength: ele.elementLength,
            eType: ele.elementType,
        });
    });
    // editEleList.value
};
</script>