<template>
<!
-- 模板部分保持不变
-->
<div class="app
-container">
<!
-- 物料类型数据
-->
<
el-row :gutter="20">
<splitpanes :horizontal="appStore
.device === 'mobile'" class="default
-theme">
<!
--物料类型数据
-->
<pane size="16">
<
el-col>
<div class="head
-container">
<
el-input v
-mod
el="materiaTyp
elName" placeholder="请输入物料类型名称" clearable prefix
-icon="Search" style="margin
-bottom: 20px"/>
</div>
<div class="head
-container">
<
el-tree :data="typeOptions" :props="{ lab
el: 'lab
el', children: 'children' }" :expand
-on
-click
-node="false" :filter
-node
-method="filterNode" ref="treeRef" node
-key="id" highlight
-current default
-expand
-all @node
-click="handleNodeClick"/>
</div>
</
el-col>
</pane>
<!
-- 属性数据
-->
<pane size="84">
<
el-col>
<
el-form :mod
el="queryParams" ref="queryForm" :inline="true" v
-show="showSearch" lab
el-width="68px">
<
el-form
-item lab
el="编号" prop="number">
<
el-input v
-mod
el="queryParams
.number" placeholder="请输入编号" clearable @keyup
.enter
.native="handleQuery"
style="width: 240px"/>
</
el-form
-item>
<
el-form
-item lab
el="名称" prop="name">
<
el-input v
-mod
el="queryParams
.name" placeholder="请输入名称" clearable @keyup
.enter
.native="handleQuery"
style="width: 240px"/>
</
el-form
-item>
<
el-form
-item lab
el="状态" prop="status">
<
el-select v
-mod
el="queryParams
.status" placeholder="请
选择状态" clearable style="width: 240px">
<
el-option v
-for="dict in mdm_common_status_list" :key="dict
.value" :lab
el="dict
.lab
el"
:value="dict
.value"/>
</
el-select>
</
el-form
-item>
<
el-form
-item>
<
el-button type="primary" icon="search" @click="handleQuery">搜索</
el-button>
<
el-button icon="refresh" @click="resetQuery">重置</
el-button>
</
el-form
-item>
</
el-form>
<
el-row :gutter="10" class="mb8">
<
el-col :span="1
.5">
<
el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v
-hasPermi="['mdm:typeAttr:add']"
>新增
</
el-button>
</
el-col>
<
el-col :span="1
.5">
<
el-button
type="success"
plain
icon="edit"
:disabled="single"
@click="handleUpdate"
v
-hasPermi="['mdm:typeAttr:edit']"
>修改
</
el-button>
</
el-col>
<
el-col :span="1
.5">
<
el-button
type="danger"
plain
icon="d
elete"
:disabled="
multiple"
@click="handleD
elete"
v
-hasPermi="['mdm:typeAttr:remove']"
>删除
</
el-button>
</
el-col>
<
el-col :span="1
.5">
<
el-button
type="warning"
plain
icon="download"
@click="handleExport"
v
-hasPermi="['mdm:typeAttr:export']"
>导出
</
el-button>
</
el-col>
<
el-col :span="1
.5">
<
el-button
type="info"
plain
icon="upload"
@click="handleImport"
v
-hasPermi="['mdm:typeAttr:import']"
>导入
</
el-button>
</
el-col>
<
el-col :span="1
.5">
<
el-button
type="warning"
plain
icon="edit"
@click="handleUrlUpdate"
v
-hasPermi="['mdm:mdmMaterialType:edit']">
编辑命名规则
</
el-button>
</
el-col>
<right
-toolbar v
-mod
el:showSearch="showSearch" @queryTable="getList"></right
-toolbar>
</
el-row>
<
el-table v
-loading="loading" :data="typeAttrList" @
selection
-change="handle
SelectionChange">
<
el-table
-column type="
selection" width="45" align="center" fixed/>
<
el-table
-column lab
el="编号" align="center" prop="number"/>
<
el-table
-column lab
el="名称" align="center" prop="name"/>
<
el-table
-column lab
el="类型名称" align="center" prop="typemgrName" width="140"/>
<
el-table
-column lab
el="类型编号" align="center" prop="typemgrNum" width="140"/>
<
el-table
-column lab
el="字段类型" align="center" prop="dataType">
<template #default="scope">
<dict
-tag :options="mdm_common_column_type" :value="scope
.row
.dataType"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="文本最大长度" align="center" prop="length" width="120"/>
<
el-table
-column lab
el="数值最大值" align="center" prop="maxVal" width="120"/>
<
el-table
-column lab
el="数值最小值" align="center" prop="minVal" width="120"/>
<
el-table
-column lab
el="默认值" align="center" prop="defaultVal"/>
<
el-table
-column lab
el="枚举ID" align="center" prop="enumerateId"/>
<
el-table
-column lab
el="枚举表" align="center" prop="enumerateTable"/>
<
el-table
-column lab
el="单位" align="center" prop="unit"/>
<
el-table
-column lab
el="是否必填" align="center" prop="isNull">
<template #default="scope">
<dict
-tag :options="mdm_common_flag_list" :value="scope
.row
.isNull"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="弹窗编辑器ID" align="center" prop="popupEditId" width="120"/>
<
el-table
-column lab
el="URL地址" align="center" prop="href"/>
<
el-table
-column lab
el="是否可查询" align="center" prop="isQuery" width="120">
<template #default="scope">
<dict
-tag :options="mdm_common_flag_list" :value="scope
.row
.isQuery"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="是否
表单显示" align="center" prop="isShowForm" width="120">
<template #default="scope">
<dict
-tag :options="mdm_common_flag_list" :value="scope
.row
.isShowForm"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="是否列表
显示" align="center" prop="isShowList" width="120">
<template #default="scope">
<dict
-tag :options="mdm_common_flag_list" :value="scope
.row
.isShowList"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="是否只读" align="center" prop="isReadOnly">
<template #default="scope">
<dict
-tag :options="mdm_common_flag_list" :value="scope
.row
.isReadOnly"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="
表单排序" align="center" prop="orderNum"/>
<
el-table
-column lab
el="是否支持排序" align="center" prop="sortFlag" width="120">
<template #default="scope">
<dict
-tag :options="mdm_common_flag_list" :value="scope
.row
.sortFlag"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="数值是否有公差" align="center" prop="isTolerance" width="120">
<template #default="scope">
<dict
-tag :options="mdm_common_flag_list" :value="scope
.row
.isTolerance"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="正则表达式
校验" align="center" prop="regularCheck" width="120"/>
<
el-table
-column lab
el="状态" align="center" prop="status">
<template #default="scope">
<dict
-tag :options="mdm_common_status_list" :value="scope
.row
.status"/>
</template>
</
el-table
-column>
<
el-table
-column lab
el="合法值" align="center" prop="validStr" width="150"/>
<
el-table
-column lab
el="操作" align="center" class
-name="small
-padding fixed
-width" width="240"
fixed="right">
<template #default="scope">
<
el-button
link
icon="edit"
type="primary"
@click="handleUpdate(scope
.row)"
v
-hasPermi="['mdm:typeAttr:edit']"
>修改
</
el-button>
<
el-button
link
type="primary"
icon="d
elete"
@click="handleD
elete(scope
.row)"
v
-hasPermi="['mdm:typeAttr:remove']"
>删除
</
el-button>
<
el-button
link
type="primary"
icon="edit"
@click="eidtValid(scope
.row)"
v
-hasPermi="['mdm:typeAttr:remove']"
>编辑合法值
</
el-button>
</template>
</
el-table
-column>
</
el-table>
<pagination v
-show="total>0" :total="total" v
-mod
el:page="queryParams
.pageNum"
v
-mod
el::limit="queryParams
.pageSize" @pagination="getList"/>
</
el-col>
</pane>
</splitpanes>
</
el-row>
<!
-- 添加或修改属性规则对话框
-->
<
el-dialog :title="title" v
-mod
el="open" width="850px" append
-to
-body>
<
el-form :mod
el="form" :rules="rules" ref="formRef" lab
el-width="120px">
<!
-- 基本信息
-->
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="编号" prop="number">
<
el-input v
-mod
el="form
.number" placeholder="请输入编号" style="width: 240px"/>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="名称" prop="name">
<
el-input v
-mod
el="form
.name" placeholder="请输入名称" style="width: 240px"/>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="类型ID" prop="typemgrId">
<
el-tree
-select v
-mod
el="form
.typemgrId" :data="typeOptions"
:props="{ value: 'id', lab
el: 'lab
el', children: 'children' }"
value
-key="id"
:current
-node
-key="form
.typemgrId"
placeholder="请
选择物料类型"
check
-strictly
style="width: 240px"/>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="字段类型" prop="dataType">
<
el-select v
-mod
el="form
.dataType" placeholder="请
选择字段类型" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_column_type"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
</
el-row>
<!
-- 数值与文本配置
-->
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="文本最大长度" prop="length">
<
el-input v
-mod
el="form
.length" placeholder="请输入文本最大长度" style="width: 240px"/>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="数值最大值" prop="maxVal">
<
el-input v
-mod
el="form
.maxVal" placeholder="请输入数值最大值" style="width: 240px"/>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="数值最小值" prop="minVal">
<
el-input v
-mod
el="form
.minVal" placeholder="请输入数值最小值" style="width: 240px"/>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="默认值" prop="defaultVal">
<
el-input v
-mod
el="form
.defaultVal" placeholder="请输入默认值" style="width: 240px"/>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="枚举ID" prop="enumerateId">
<
el-input v
-mod
el="form
.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="正则表达式
校验" prop="regularCheck">
<
el-input v
-mod
el="form
.regularCheck" placeholder="请输入正则表达式
校验" style="width: 240px"/>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="枚举表" prop="enumerateTable">
<
el-input v
-mod
el="form
.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="单位" prop="unit">
<
el-input v
-mod
el="form
.unit" placeholder="请输入单位" style="width: 240px"/>
</
el-form
-item>
</
el-col>
</
el-row>
<!
-- 状态与布尔
选项
-->
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="是否必填" prop="isNull">
<
el-select v
-mod
el="form
.isNull" placeholder="请
选择是否必填" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_flag_list"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="是否可查询" prop="isQuery">
<
el-select v
-mod
el="form
.isQuery" placeholder="请
选择是否可查询" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_flag_list"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="是否
表单显示" prop="isShowForm">
<
el-select v
-mod
el="form
.isShowForm" placeholder="请
选择是否
表单显示" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_flag_list
"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="是否列表
显示" prop="isShowList">
<
el-select v
-mod
el="form
.isShowList" placeholder="请
选择是否列表
显示" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_flag_list"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="是否只读" prop="isReadOnly">
<
el-select v
-mod
el="form
.isReadOnly" placeholder="请
选择是否只读" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_flag_list"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="是否支持排序" prop="sortFlag">
<
el-select v
-mod
el="form
.sortFlag" placeholder="请
选择是否支持排序" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_flag_list"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="数值是否有公差" prop="isTolerance">
<
el-select v
-mod
el="form
.isTolerance" placeholder="请
选择数值是否有公差" style="width: 240px">
<
el-option
v
-for="dict in mdm_common_flag_list"
:key="dict
.value"
:lab
el="dict
.lab
el"
:value="dict
.value"
></
el-option>
</
el-select>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="
表单排序" prop="orderNum">
<
el-input v
-mod
el="form
.orderNum" placeholder="请输入
表单排序" style="width: 240px"/>
</
el-form
-item>
</
el-col>
</
el-row>
<!
-- 高级设置
-->
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="弹窗编辑器ID" prop="popupEditId">
<
el-input v
-mod
el="form
.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="URL地址" prop="href">
<
el-input v
-mod
el="form
.href" placeholder="请输入URL地址" style="width: 240px"/>
</
el-form
-item>
</
el-col>
</
el-row>
<
el-row>
<
el-col :span="12">
<
el-form
-item lab
el="状态" prop="status">
<
el-radio
-group v
-mod
el="form
.status">
<
el-radio
v
-for="dict in mdm_common_status_list"
:key="dict
.value"
:value="dict
.value"
>{{ dict
.lab
el }}
</
el-radio>
</
el-radio
-group>
</
el-form
-item>
</
el-col>
</
el-row>
</
el-form>
<template #footer>
<div slot="footer" class="dialog
-footer">
<
el-button type="primary" @click="submitForm">确 定</
el-button>
<
el-button @click="canc
el">取 消</
el-button>
</div>
</template>
</
el-dialog>
<!
-- 修改命名规则对话框
-->
<
el-dialog title="修改命名规则" v
-mod
el="openUrledit" width="500px" append
-to
-body>
<
el-form ref="urlformRef" :mod
el="urlform" :rules="urlEditrules" lab
el-width="80px">
<
el-form
-item lab
el="命名规则" prop="namingrule">
<
el-input v
-mod
el="urlform
.namingrule" placeholder="请输入命名规则"/>
</
el-form
-item>
</
el-form>
<template #footer>
<div slot="footer" class="dialog
-footer">
<
el-button type="primary" @click="submitFormNamingrule">确 定</
el-button>
<
el-button @click="canc
elSubmitUrlEdit">取 消</
el-button>
</div>
</template>
</
el-dialog>
<!
-- 合法值列表对话框
-->
<
el-dialog :title="validtitle" v
-mod
el="validOpen" width="650px" append
-to
-body>
<
el-row :gutter="10" class="mb8">
<
el-col :span="1
.5">
<
el-button
type="primary"
plain
icon="plus"
@click="handleValidAdd"
v
-hasPermi="['mdm:validlist:add']"
>新增
</
el-button>
</
el-col>
<
el-col :span="1
.5">
<
el-button
type="success"
plain
icon="edit"
:disabled="validsingle"
@click="handleValidUpdate"
v
-hasPermi="['mdm:validlist:edit']"
>修改
</
el-button>
</
el-col>
<
el-col :span="1
.5">
<
el-button
type="danger"
plain
icon="d
elete"
:disabled="valid
Multiple"
@click="handleValidD
eleteBtn"
v
-hasPermi="['mdm:validlist:remove']"
>删除
</
el-button>
</
el-col>
</
el-row>
<
el-table v
-loading="validTabl
eLoading" :data="validlistList" @
selection
-change="handleValid
SelectionChange">
<
el-table
-column type="
selection" width="55" align="center"/>
<!
-- <
el-table
-column lab
el="ID" align="center" prop="id" />
-->
<
el-table
-column lab
el="合法值名称" align="center" prop="name"/>
<
el-table
-column lab
el="排序" align="center" prop="orderNum"/>
<
el-table
-column lab
el="操作" align="center" class
-name="small
-padding fixed
-width">
<template #default="scope">
<
el-button
link
icon="edit"
type="primary"
@click="handleValidUpdate(scope
.row)"
v
-hasPermi="['mdm:validlist:edit']"
>修改
</
el-button>
<
el-button
link
icon="d
elete"
type="primary"
@click="handleValidD
elete(scope
.row)"
v
-hasPermi="['mdm:validlist:remove']"
>删除
</
el-button>
</template>
</
el-table
-column>
</
el-table>
<template #footer>
<div slot="footer" class="dialog
-footer">
<
el-button type="primary" @click="validSubmitForm">关 闭</
el-button>
</div>
</template>
</
el-dialog>
<!
-- 添加或修改合法值列表对话框
-->
<
el-dialog :title="validAddtitle" v
-mod
el="validAddOpen" width="500px" append
-to
-body>
<
el-form ref="validformRef" :mod
el="validform" :rules="validRules" lab
el-width="80px">
<
el-form
-item lab
el="合法值名称" prop="name" lab
el-width="95px">
<
el-input v
-mod
el="validform
.name" placeholder="请输入合法值名称"/>
</
el-form
-item>
<
el-form
-item lab
el="排序" prop="orderNum" lab
el-width="95px">
<
el-input v
-mod
el="validform
.orderNum" placeholder="请输入排序"/>
</
el-form
-item>
</
el-form>
<template #footer>
<div slot="footer" class="dialog
-footer">
<
el-button type="primary" @click="validAddSubmitForm">确 定</
el-button>
<
el-button @click="validAddCanc
el">取 消</
el-button>
</div>
</template>
</
el-dialog>
<!
-- 用户导入对话框
-->
<
el-dialog :title="upload
.title" v
-mod
el="upload
.open" width="400px" append
-to
-body>
<
el-upload ref="uploadRef" :limit="1" accept="
.xlsx,
.xls" :headers="upload
.headers"
:action="upload
.url + '?updateSupport=' + upload
.updateSupport"
:disabled="upload
.isUploading"
:on
-progress="handleFileUploadProgress"
:on
-success="handleFileSuccess"
:auto
-upload="false" drag>
<
el-icon class="
el-icon
--upload"><upload
-filled /></
el-icon>
<div class="
el-upload__text">将文件拖到此处，或
点击上传</div>
<template #tip>
<div class="
el-upload__tip text
-center">
<div class="
el-upload__tip">
<
el-checkbox v
-mod
el="upload
.updateSupport" />是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<
el-link type="primary" :underline="false" style="font
-size: 12px; vertical
-align: bas
eline" @click="importTemplate">下载模板</
el-link>
</div>
</template>
</
el-upload>
<template #footer>
<div class="dialog
-footer">
<
el-button type="primary" @click="submitFileForm">确 定</
el-button>
<
el-button @click="upload
.open = false">取 消</
el-button>
</div>
</template>
</
el-dialog>
</div>
</template>
<script setup name="typeAtrr">
import {listTypeAttr, getTypeAttr, d
elTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr";
import {getMdmMaterialType, updateMdmMaterialType} from "@/api/mdm/mdmMaterialType";
import { tree
select } from "@/api/mdm/mdmMaterialType";
import {listValidlist, getValidlist, d
elValidlist, addValidlist, updateValidlist} from "@/api/mdm/validlist";
import useAppStore from '@/store/modules/app'
import { getToken } from "@/utils/auth";
import "splitpanes/dist/splitpanes
.css"
import {Splitpanes, Pane} from "splitpanes"
const { proxy } = getCurrentInstance();
const appStore = useAppStore()
// 使用字典
const {
mdm_common_flag_list,
mdm_common_status_list,
mdm_common_column_type
} = proxy
.useDict("mdm_common_flag_list", "mdm_common_status_list", "mdm_common_column_type");
// 响应式状态
const loading = ref(true);
const showSearch = ref(true);
const open = ref(false);
const validOpen = ref(false);
const validAddOpen = ref(false);
const openUrledit = ref(false);
const title = ref('');
const validtitle = ref('');
const validAddtitle = ref('');
const total = ref(0);
const single = ref(true);
const
multiple = ref(true);
const validsingle = ref(false);
const valid
Multiple = ref(true);
const validTabl
eLoading = ref(true);
const materiaTyp
elName = ref('');
const typeOptions = ref([]);
const typeAttrList = ref([]);
const validlistList = ref([]);
const formRef = ref(null);
const validformRef = ref(null);
const urlformRef = ref(null);
const uploadRef = ref(null);
//
表单数据
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
number: null,
name: null,
typemgrId: null,
dataType: null,
length: null,
maxVal: null,
minVal: null,
defaultVal: null,
validList: null,
enumerateId: null,
enumerateTable: null,
unit: null,
isNull: null,
popupEditId: null,
href: null,
isQuery: null,
isShowForm: null,
isShowList: null,
isReadOnly: null,
orderNum: null,
sortFlag: null,
isTolerance: null,
regularCheck: null,
status: null,
},
form: {
id: null,
number: null,
name: null,
typemgrId: null,
dataType: null,
length: null,
maxVal: null,
minVal: null,
defaultVal: null,
validList: null,
enumerateId: null,
enumerateTable: null,
unit: null,
isNull: null,
popupEditId: null,
href: null,
isQuery: null,
isShowForm: null,
isShowList: null,
isReadOnly: null,
orderNum: null,
sortFlag: null,
isTolerance: null,
regularCheck: null,
status: null
},
//合法值
validform: {
id: null,
attributeId: null,
name: null,
orderNum: null,
},
//命名规则
urlform: {
id: null,
namingrule: null,
}
});
const { form, validform, urlform, queryParams} = toRefs(data);
// 上传配置
const upload = reactive({
open: false,
title: "",
isUploading: false,
updateSupport: 0,
headers: {Authorization: "Bearer " + getToken()},
url: import
.meta
.env
.VITE_APP_BASE_API + "/mdm/typeAttr/importData"
});
//
选中ID集合
const ids = ref([]);
const validIds = ref([]);
// 当前
选中属性行
const
selectedAttrRow = ref(null);
//
表单验证规则
const rules = reactive({
number: [{required: true, message: "编号不能为空", trigger: "blur"}],
name: [{required: true, message: "名称不能为空", trigger: "blur"}],
typemgrId: [{required: true, message: "类型ID不能为空", trigger: "blur"}],
dataType: [{required: true, message: "字段类型不能为空", trigger: "change"}],
});
const urlEditrules = reactive({
namingrule: [{required: true, message: "命名规则不能为空", trigger: "blur"}],
});
const validRules = reactive({
name: [{required: true, message: "名称不能为空", trigger: "blur"}],
});
// 监听物料类型名称变化
watch(materiaTyp
elName, (val) => {
proxy
.$refs["treeRef"]
.filter(val);
});
// 获取列表
function getList() {
console
.log("========属性规则getList======");
loading
.value = true;
try {
listTypeAttr(queryParams
.value)
.then(response => {
// console
.log("========属性规则getList======", response);
typeAttrList
.value = response
.rows;
total
.value = response
.total;
})
} catch (error) {
console
.error('获取列表失败:', error);
} finally {
loading
.value = false;
}
};
function resetFormState() {
form
.value = {
id: null,
number: null,
name: null,
typemgrId: null,
dataType: null,
length: null,
maxVal: null,
minVal: null,
defaultVal: null,
validList: null,
enumerateId: null,
enumerateTable: null,
unit: null,
isNull: null,
popupEditId: null,
href: null,
isQuery: null,
isShowForm: null,
isShowList: null,
isReadOnly: null,
orderNum: null,
sortFlag: null,
isTolerance: null,
regularCheck: null,
status: null
};
proxy
.resetForm("formRef");
};
function resetValidAddForm() {
validform
.value = {
id: null,
attributeId: null,
name: null,
orderNum: null
}
proxy
.resetForm("validformRef");
};
function resetUrlForm() {
urlform
.value = {
id: null,
namingrule: null
}
proxy
.resetForm("urlformRef");
};
function handleQuery() {
queryParams
.value
.pageNum = 1;
getList();
};
function resetQuery() {
proxy
.resetForm("queryForm");
handleQuery();
};
function handle
SelectionChange(
selection) {
ids
.value =
selection
.map(item => item
.id);
single
.value =
selection
.length != 1;
multiple.value = !
selection
.length;
};
function handleAdd() {
resetFormState();
// getTree
select();
open
.value = true;
title
.value = "添加属性规则";
};
function handleUpdate(row) {
resetFormState();
// getTree
select()
const id = row
.id || ids
.value;
getTypeAttr(id)
.then(response => {
open
.value = true;
title
.value = "修改属性规则";
form
.value = response
.data;
});
};
function submitForm() {
proxy
.$refs["formRef"]
.validate(valid => {
if (valid) {
if (form
.value
.id != null) {
updateTypeAttr(form
.value)
.then(response => {
proxy
.$modal
.msgSuccess("修改成功");
open
.value = false;
getList();
});
}
else {
// console
.log(form
.value);
addTypeAttr(form
.value)
.then(response => {
proxy
.$modal
.msgSuccess("新增成功");
open
.value = false;
getList();
});
}
}
})
};
function canc
el() {
open
.value = false;
resetFormState();
};
function handleD
elete(row) {
// console
.log('删除ids', ids
.value);
const d
elIds = row
.id || ids
.value;
proxy
.$modal
.confirm('是否确认删除属性规则编号为"' + d
elIds + '"的数据项？')
.then(function () {
return d
elTypeAttr(d
elIds);
})
.then(() => {
getList();
proxy
.$modal
.msgSuccess("删除成功");
})
.catch(() => {
});
};
function handleExport() {
proxy
.download('mdm/typeAttr/export', {
...queryParams
.value
}, `typeAttr_${new Date()
.getTime()}
.xlsx`)
};
function filterNode(value, data) {
if (!value) return true;
return data
.lab
el.includes(value);
};
function handleNodeClick(data) {
queryParams
.value
.typemgrId = data
.id;
handleQuery();
};
function getTree
select() {
tree
select()
.then(response => {
// console
.log('获取树形数据成功:', response);
typeOptions
.value = response
.data;
});
};
function eidtValid(row) {
selectedAttrRow
.value = row;
getValidDataList(row);
};
function getValidDataList(row) {
validOpen
.value = true;
validTabl
eLoading
.value = true;
try {
const query = {
pageNum: 1,
pageSize: 1000,
attributeId: row
.id
};
listValidlist(query)
.then(response => {
// console
.log('获取合法值列表成功:', response);
validlistList
.value = response
.rows;
});
} catch (error) {
// console
.error('获取合法值列表失败:', error);
//
ElMessage
.error('获取合法值列表失败');
} finally {
validTabl
eLoading
.value = false;
}
};
function validSubmitForm() {
validOpen
.value = false;
};
function handleValidAdd() {
validAddOpen
.value = true;
validAddtitle
.value = "添加合法值";
resetValidAddForm();
};
function validAddSubmitForm() {
console
.log('添加合法值',
selectedAttrRow
.value
.id);
validform
.value
.attributeId =
selectedAttrRow
.value
.id
proxy
.$refs["validformRef"]
.validate(valid => {
if (valid) {
if (validform
.value
.id != null) {
updateValidlist(validform
.value)
.then(response => {
proxy
.$modal
.msgSuccess("修改成功");
validAddOpen
.value = false;
getValidDataList(
selectedAttrRow
.value);
});
}
else {
addValidlist(validform
.value)
.then(response => {
proxy
.$modal
.msgSuccess("新增成功");
validAddOpen
.value = false;
getValidDataList(
selectedAttrRow
.value);
});
}
}
});
};
function validAddCanc
el() {
validAddOpen
.value = false;
resetValidAddForm();
};
function handleValid
SelectionChange(
selection) {
validIds
.value =
selection
.map(item => item
.id);
validsingle
.value =
selection
.length !== 1;
valid
Multiple.value = !
selection
.length;
};
function handleValidD
eleteBtn() {
const ids = validIds
.value;
proxy
.$modal
.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项？')
.then(function () {
return d
elValidlist(ids);
})
.then(() => {
proxy
.$modal
.msgSuccess("删除成功");
getValidDataList(
selectedAttrRow
.value);
})
.catch(() => {
});
};
function handleValidD
elete(row) {
const ids = row
.id;
proxy
.$modal
.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项？')
.then(function () {
return d
elValidlist(ids);
})
.then(() => {
getValidDataListByAttrId(row
.attributeId);
proxy
.$modal
.msgSuccess("删除成功");
})
.catch(() => {
});
};
function getValidDataListByAttrId(attrId) {
const query = {
pageNum: 1,
pageSize: 1000,
attributeId: attrId
};
try {
listValidlist(query)
.then(response => {
validlistList
.value = response
.rows;
});
} catch (error) {
console
.error('获取合法值列表失败:', error);
}
};
function handleUrlUpdate() {
// openUrledit
.value = true;
resetUrlForm();
// console
.log('修改命名规则');
const currentNode = proxy
.$refs
.treeRef
.getCurrentNode();
// const currentNode = treeRef
.value
.getCurrentNode();
if (!currentNode) {
proxy
.$modal
.msgWarning("请先在左侧树中
选择一个物料类型");
return;
}
console
.log('进入到', currentNode
.id);
getMdmMaterialType(currentNode
.id)
.then(response => {
openUrledit
.value = true;
// console
.log('获取数据成功:', response);
urlform
.value = response
.data;
});
};
function submitFormNamingrule() {
proxy
.$refs["urlformRef"]
.validate(valid => {
if (valid) {
if (urlform
.value
.id != null) {
updateMdmMaterialType(urlform
.value)
.then(response => {
proxy
.$modal
.msgSuccess("修改成功");
openUrledit
.value = false;
});
}
}
});
};
function canc
elSubmitUrlEdit() {
openUrledit
.value = false;
resetUrlForm();
};
function handleImport() {
upload
.title = "导入属性";
upload
.open = true;
};
function importTemplate() {
proxy
.download("mdm/typeAttr/importTemplate", {
}, `attr_template_${new Date()
.getTime()}
.xlsx`);
};
const handleFileUploadProgress = (event, file, fil
eList) => {
upload
.isUploading = true;
};
const handleFileSuccess = (response, file, fil
eList) =>{
upload
.open = false;
upload
.isUploading = false;
proxy
.$refs["uploadRef"]
.handleRemove(file);
proxy
.$alert("<div style='overflow: auto;overflow
-x: hidden;max
-height: 70vh;padding: 10px 20px 0;'>" + response
.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
getList();
};
function submitFileForm() {
if (uploadRef
.value) {
uploadRef
.value
.submit();
}
};
// 编辑合法值
function handleValidUpdate(row) {
resetValidAddForm()
const id = row
.id || validIds
.value
getValidlist(id)
.then(response => {
validform
.value = response
.data;
validAddOpen
.value = true;
title
.value = "修改合法值列表";
});
}
getList()
getTree
select()
</script> 这个页面会导致应用崩溃，请优化，指出可能的
问题点
前端表单验证与初始值问题解决
本文讲述了在前端开发中遇到的一个关于表单验证的问题。当使用Vue.js的el-select组件时，由于后端需要的下一步执行人为字符串类型，最初将messageReceiver字段初始化为字符串，导致页面加载时触发了不必要的表单验证。解决方案是将初始值改为空数组，从而避免了页面加载时的验证错误。这个案例强调了正确设置初始值对于前端表单管理的重要性。
7928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
