js中怎样获取<tags:treeselect/>中value的值,sys:treeselect取值

本文介绍了一种在页面中使用treeselect组件时如何获取特定值的方法。通过查看页面源代码定位到input标签及其id,从而实现对所需值的读取。此外还提供了JavaScript代码示例来进一步说明这一过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

treeselect 会在页面生成一些input标签,打开浏览器,找到你要取值的页面,【查看框架的源代码】,可以看到input的id,取值即可,几个都可以试一下

页面截图



下边是html部分

<div class="control-group">
			<label class="control-label">检查元素:</label>
			<div class="controls">
			  <sys:treeselect id="checkTypeClass" name="checkTypeClass.id" value="${checkItemCheck.inspct.checkTypeClass.id}" 
							labelName="checkTypeClass.name" labelValue="${checkItemCheck.inspct.checkTypeClass.name}"
							title="检查元素" url="/check/checkTypeClass/treeData" extId="${checkItemCheck.inspct.checkTypeClass.id}" cssClass="required" allowClear="true"/>
			 <span class="help-inline"><font color="red">*</font></span>	 
			</div>
		</div>

js部分取值

var ii=document.getElementById("checkedOfficeName").value;
				$("#dutyCompany").val(ii);
页面截图



<template> <div class="app-container"> <!--物料类型数据 --> <el-row :gutter="20"> <el-col :span="4" :xs="24"> <div class="head-container"> <el-input v-model="materiaTypelName" placeholder="请输入物料类型名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> </div> <div class="head-container"> <el-tree :data="typeOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current @node-click="handleNodeClick" /> </div> </el-col> <el-col :span="20" :xs="24"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="编号" prop="number"> <el-input v-model="queryParams.number" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable> <el-option v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['mdm:typeAttr:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['mdm:typeAttr:export']" >导出 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleUrlUpdate" v-hasPermi="['mdm:mdmMaterialType:edit']" >编辑命名规则 </el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="typeAttrList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" fixed/> <el-table-column label="编号" align="center" prop="number"/> <el-table-column label="名称" align="center" prop="name"/> <el-table-column label="类型名称" align="center" prop="typemgrName" width="140"/> <el-table-column label="类型编号" align="center" prop="typemgrNum" width="140"/> <el-table-column label="字段类型" align="center" prop="dataType"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_column_type" :value="scope.row.dataType"/> </template> </el-table-column> <el-table-column label="文本最大长度" align="center" prop="length" width="120"/> <el-table-column label="数最大" align="center" prop="maxVal" width="120"/> <el-table-column label="数最小" align="center" prop="minVal" width="120"/> <el-table-column label="默认" align="center" prop="defaultVal"/> <el-table-column label="合法列表" align="center" prop="validList" width="120"/> <el-table-column label="枚举ID" align="center" prop="enumerateId"/> <el-table-column label="枚举表" align="center" prop="enumerateTable"/> <el-table-column label="单位" align="center" prop="unit"/> <el-table-column label="是否必填" align="center" prop="isNull"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isNull"/> </template> </el-table-column> <el-table-column label="弹窗编辑器ID" align="center" prop="popupEditId" width="120"/> <el-table-column label="URL地址" align="center" prop="href"/> <el-table-column label="是否可查询" align="center" prop="isQuery" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isQuery"/> </template> </el-table-column> <el-table-column label="是否表单显示" align="center" prop="isShowForm" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isShowForm"/> </template> </el-table-column> <el-table-column label="是否列表显示" align="center" prop="isShowList" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isShowList"/> </template> </el-table-column> <el-table-column label="是否只读" align="center" prop="isReadOnly"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isReadOnly"/> </template> </el-table-column> <el-table-column label="表单排序" align="center" prop="orderNum"/> <el-table-column label="是否支持排序" align="center" prop="sortFlag" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.sortFlag"/> </template> </el-table-column> <el-table-column label="数是否有公差" align="center" prop="isTolerance" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isTolerance"/> </template> </el-table-column> <el-table-column label="正则表达式校验" align="center" prop="regularCheck" width="120"/> <el-table-column label="状态" align="center" prop="status"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_status_list" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220" fixed="right"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> <el-button size="mini" type="text" icon="el-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" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改属性规则对话框 --> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body destroy-on-close> <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"> <!-- 基本信息 --> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="number"> <el-input v-model="form.number" placeholder="请输入编号" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="类型ID" prop="typemgrId"> <!-- <el-input v-model="form.typemgrId" placeholder="请输入类型ID" style="width: 240px"/>--> <treeselect v-model="form.typemgrId" :options="typeOptions" :show-count="true" placeholder="请选择物料类型" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="字段类型" prop="dataType"> <el-select v-model="form.dataType" placeholder="请选择字段类型" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_column_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 数与文本配置 --> <el-row> <el-col :span="12"> <el-form-item label="文本最大长度" prop="length"> <el-input v-model="form.length" placeholder="请输入文本最大长度" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="数最大" prop="maxVal"> <el-input v-model="form.maxVal" placeholder="请输入数最大" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数最小" prop="minVal"> <el-input v-model="form.minVal" placeholder="请输入数最小" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="默认" prop="defaultVal"> <el-input v-model="form.defaultVal" placeholder="请输入默认" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举ID" prop="enumerateId"> <el-input v-model="form.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="正则表达式校验" prop="regularCheck"> <el-input v-model="form.regularCheck" placeholder="请输入正则表达式校验" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举表" prop="enumerateTable"> <el-input v-model="form.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="单位" prop="unit"> <el-input v-model="form.unit" placeholder="请输入单位" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 状态与布尔选项 --> <el-row> <el-col :span="12"> <el-form-item label="是否必填" prop="isNull"> <el-select v-model="form.isNull" placeholder="请选择是否必填" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否可查询" prop="isQuery"> <el-select v-model="form.isQuery" placeholder="请选择是否可查询" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否表单显示" prop="isShowForm"> <el-select v-model="form.isShowForm" placeholder="请选择是否表单显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否列表显示" prop="isShowList"> <el-select v-model="form.isShowList" placeholder="请选择是否列表显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否只读" prop="isReadOnly"> <el-select v-model="form.isReadOnly" placeholder="请选择是否只读" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否支持排序" prop="sortFlag"> <el-select v-model="form.sortFlag" placeholder="请选择是否支持排序" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数是否有公差" prop="isTolerance"> <el-select v-model="form.isTolerance" placeholder="请选择数是否有公差" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="表单排序" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="请输入表单排序" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 高级设置 --> <el-row> <el-col :span="12"> <el-form-item label="弹窗编辑器ID" prop="popupEditId"> <el-input v-model="form.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="URL地址" prop="href"> <el-input v-model="form.href" placeholder="请输入URL地址" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- <!– 枚举与校验 –> <el-row> <el-col :span="24"> <el-form-item label="合法列表" prop="validList"> <!–<el-input v-model="form.validList" placeholder="请输入合法列表" style="width: 240px"/>–> <el-table :data="validDataList" v-loading="validLoading" ref="validTable" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="字典编码" align="center" prop="dictCode" /> <el-table-column label="字典标签" align="center" prop="dictLabel"> <template slot-scope="scope"> <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span> <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag> </template> </el-table-column> <el-table-column label="字典键" align="center" prop="dictValue" /> </el-table> </el-form-item> </el-col> </el-row>--> <el-row> <el-col :span="12"> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.value" >{{ dict.label }} </el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </el-col> </el-row> <!-- 合法列表对话框 --> <el-dialog :title="validtitle" :visible.sync="validOpen" width="650px" append-to-body> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleValidAdd" v-hasPermi="['mdm:validlist:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="validsingle" @click="handleValidUpdate" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="validMultiple" @click="handleValidDeleteBtn" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </el-col> </el-row> <el-table v-loading="validTableLoading" :data="validlistList" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <!-- <el-table-column label="ID" align="center" prop="id" />--> <el-table-column label="合法名称" align="center" prop="name"/> <el-table-column label="排序" align="center" prop="orderNum"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleValidUpdate(scope.row)" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleValidDelete(scope.row)" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </template> </el-table-column> </el-table> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="validSubmitForm">关 闭</el-button> <!-- <el-button @click="validCancel">取 消</el-button>--> </div> </el-dialog> <!-- 添加或修改合法列表对话框 --> <el-dialog :title="validAddtitle" :visible.sync="validAddOpen" width="500px" append-to-body> <el-form ref="validform" :model="validform" :rules="validRules" label-width="80px"> <el-form-item label="合法名称" prop="name" label-width="95px"> <el-input v-model="validform.name" placeholder="请输入合法名称"/> </el-form-item> <el-form-item label="排序" prop="orderNum" label-width="95px"> <el-input v-model="validform.orderNum" placeholder="请输入排序"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="validAddSubmitForm">确 定</el-button> <el-button @click="validAddCancel">取 消</el-button> </div> </el-dialog> <!-- 修改命名规则对话框--> <el-dialog title="修改命名规则" :visible.sync="openUrledit" width="500px" append-to-body> <el-form ref="urlform" :model="urlform" :rules="UrlEditrules" label-width="80px"> <el-form-item label="命名规则" prop="namingrule"> <el-input v-model="urlform.namingrule" placeholder="请输入命名规则" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitFormNamingrule">确 定</el-button> <el-button @click="cancelSubmitUrlEdit">取 消</el-button> </div> </el-dialog> </div> </template> <script> import {listTypeAttr, getTypeAttr, delTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr"; import {treeselect} from "@/api/mdm/mdmMaterialType"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import {listData, getData, delData, addData, updateData} from "@/api/system/dict/data"; import {listValidlist, getValidlist, delValidlist, addValidlist, updateValidlist} from "@/api/mdm/validlist"; export default { name: "TypeAttr", dicts: ['mdm_common_flag_list', 'mdm_common_status_list', 'mdm_common_column_type'], components: {Treeselect}, data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 属性规则表格数据 typeAttrList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 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: {}, // 表单校验 rules: { 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"} ], }, validRules: { name: [ {required: true, message: "名称不能为空", trigger: "blur"} ], }, defaultProps: { children: "children", label: "label" }, typeOptions: undefined, materiaTypelName: undefined, //合法列表字典 validDataList: undefined, validDataListTotal: undefined, validLoading: true, // treeselectOptions: [], selectedValues: [],// 存储当前选中的 dictValue 数组 isInitSelection: false, validtitle: "", validOpen: false, validform: {}, // 合法列表表格数据 validlistList: [], validTableLoading: true, validAddOpen: false, validAddtitle: "", //选中的属性ID selectedAttrId: null, //选中的属性行 selectedAttrRow: null, validIds: [], validMultiple: true, validsingle: false, openUrledit:false, urlform:{}, UrlEditrules:{} }; }, watch: { // 根据名称筛选部门树 materiaTypelName(val) { this.$refs.tree.filter(val); } }, created() { this.getList(); this.getTreeselect() }, methods: { /** 查询属性规则列表 */ getList() { this.loading = true; listTypeAttr(this.queryParams).then(response => { this.typeAttrList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.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, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("form"); }, resetRrlform(){ this.urlform ={ id: null, number: null, name: null, parentId: null, status: null, createBy: null, createTime: null, updateBy: null, updateTime: null, icon: null, namingrule: null } this.resetForm("urlform"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.getTreeselect(); this.open = true; this.title = "添加属性规则"; // this.getValidList() }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getTypeAttr(id).then(response => { this.form = response.data; // this.form = {}; // this.$set(this, 'form', response.data); // 强制设置响应式 console.log("点击修改按钮后:") console.log(this.form.validList) this.open = true; this.title = "修改属性规则"; // this.getValidList(); // this.$nextTick().then(() => { // this.initDefaultSelection() // }) }); }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateTypeAttr(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addTypeAttr(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('是否确认删除属性规则编号为"' + ids + '"的数据项?').then(function () { return delTypeAttr(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { this.download('mdm/typeAttr/export', { ...this.queryParams }, `typeAttr_${new Date().getTime()}.xlsx`) }, // 筛选节点 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 节点单击事件 handleNodeClick(data) { this.queryParams.typemgrId = data.id; this.handleQuery(); }, /** 查询物料类型树结构 */ getTreeselect() { treeselect().then(response => { const originalData = response.data; this.typeOptions = response.data; }); }, /** 查询字典数据列表 */ getValidList() { console.log("进入字典初始化") this.validLoading = true; const query = { pageNum: 1, pageSize: 1000, dictType: "mdm_validlist_dict", } listData(query).then(response => { this.validDataList = response.rows; this.validDataListTotal = response.total; // 数据加载完成后使用 nextTick 确保 DOM 已渲染表格 this.$nextTick(() => { this.initDefaultSelection(); // 安全地初始化选中 }); this.validLoading = false; }); }, initDefaultSelection() { this.isInitSelection = true; if (this.form.validList == null) { return } const table = this.$refs.validTable; const selectedArray = this.form.validList.split(','); console.log("初始化字典数据:"); console.log(selectedArray); // 根据唯一标识(如 dictCode)查找要选中的行 // 遍历数据,匹配需要默认选中的行 this.selectedValues = []; this.validDataList.forEach(row => { if (selectedArray.includes(row.dictValue)) { table.toggleRowSelection(row, true); this.selectedValues.push(row.dictValue); } }); // 初始化完成后恢复标志位 this.$nextTick(() => { this.isInitSelection = false; }); }, // handleValidSelectionChange(selection) { // console.log("进入选中方法"); // if (this.isInitSelection) { // return; // } // console.log("进入选中方法"); // // 更新选中项的 dictValue 到 selectedValues 并同步到 form.validList // this.selectedValues = selection.map(item => item.dictValue); // this.form.validList = this.selectedValues.join(','); // console.log("选中后:"); // console.log(this.form.validList); // }, // 编辑合法 handleValidUpdate(row) { this.resetValidAddForm() const id = row.id || this.validIds getValidlist(id).then(response => { this.validform = response.data; this.validAddOpen = true; this.title = "修改合法列表"; }); }, //编辑合法按钮 eidtValid(row) { this.selectedAttrRow = row this.getValidDataList(row); }, //获取合法列表 getValidDataList(row) { this.validOpen = true; this.title = "编辑合法"; this.validTableLoading = true; const query = { pageNum: 1, pageSize: 1000, attributeId: row.id } listValidlist(query).then(response => { this.validlistList = response.rows; this.total = response.total; this.validTableLoading = false; }); }, validSubmitForm() { this.validOpen = false; }, //新增合法按钮操作 handleValidAdd() { this.validAddOpen = true; this.validAddtitle = "添加合法"; this.resetValidAddForm(); }, //确定添加合法按钮操作 validAddSubmitForm() { this.validform.attributeId = this.selectedAttrRow.id this.$refs["validform"].validate(valid => { if (valid) { if (this.validform.id != null) { updateValidlist(this.validform).then(response => { this.$modal.msgSuccess("修改成功"); this.validAddOpen = false; this.getValidDataList(this.selectedAttrRow); }); } else { addValidlist(this.validform).then(response => { this.$modal.msgSuccess("新增成功"); this.validAddOpen = false; this.getValidDataList(this.selectedAttrRow); }); } } }); // this.resetValidAddForm() }, validAddCancel() { this.validAddOpen = false; this.resetValidAddForm(); }, // 表单重置 resetValidAddForm() { this.validform = { id: null, attributeId: null, name: null, orderNum: null, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("validform"); }, /** 删除合法按钮操作 */ handleValidDeleteBtn() { const ids = this.validIds; this.$modal.confirm('是否确认删除合法列表编号为"' + ids + '"的数据项?').then(function () { return delValidlist(ids); }).then(() => { this.getValidDataList(this.selectedAttrRow); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 删除单个合法按钮操作 */ handleValidDelete(row) { const ids = row.id; this.$modal.confirm('是否确认删除合法列表编号为"' + ids + '"的数据项?').then(function () { return delValidlist(ids); }).then(() => { this.getValidDataListByAttrId(row.attributeId); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, //获取合法列表 getValidDataListByAttrId(attrId) { const query = { pageNum: 1, pageSize: 1000, attributeId: attrId } listValidlist(query).then(response => { this.validlistList = response.rows; this.total = response.total; // this.validTableLoading = false; }); }, // 多选框选中数据 handleValidSelectionChange(selection) { this.validIds = selection.map(item => item.id) this.validsingle = selection.length !== 1 this.validMultiple = !selection.length }, handleUrlUpdate(){ // 1. 获取当前选中的节点 const currentNode = this.$refs.tree.getCurrentNode(); // 2. 检查是否选中了有效节点 if (!currentNode) { this.$message.warning("请先在左侧树中选择一个物料类型"); return; } // 3. 重置表单 this.resetRrlform(); // 4. 使用节点ID请求数据 getMdmMaterialType(currentNode.id).then(response => { this.urlform = response.data; this.openUrledit = true; }); }, submitFormNamingrule(){ this.$refs["urlform"].validate(valid => { if (valid) { if (this.urlform.id != null) { updateMdmMaterialType(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.openUrledit = false; }); } } }); }, cancelSubmitUrlEdit(){ this.openUrledit = false; this.resetRrlform(); } } }; </script> 转为 vue3 语法
07-08
<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-model="materiaTypelName" placeholder="请输入物料类型名称" clearable prefix-icon="Search" style="margin-bottom: 20px"/> </div> <div class="head-container"> <el-tree :data="typeOptions" :props="{ label: 'label', 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 :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="编号" prop="number"> <el-input v-model="queryParams.number" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" style="width: 240px"/> </el-form-item> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" style="width: 240px"/> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 240px"> <el-option v-for="dict in mdm_common_status_list" :key="dict.value" :label="dict.label" :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="delete" :disabled="multiple" @click="handleDelete" 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-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="typeAttrList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" fixed/> <el-table-column label="编号" align="center" prop="number"/> <el-table-column label="名称" align="center" prop="name"/> <el-table-column label="类型名称" align="center" prop="typemgrName" width="140"/> <el-table-column label="类型编号" align="center" prop="typemgrNum" width="140"/> <el-table-column label="字段类型" 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 label="文本最大长度" align="center" prop="length" width="120"/> <el-table-column label="数最大" align="center" prop="maxVal" width="120"/> <el-table-column label="数最小" align="center" prop="minVal" width="120"/> <el-table-column label="默认" align="center" prop="defaultVal"/> <el-table-column label="枚举ID" align="center" prop="enumerateId"/> <el-table-column label="枚举表" align="center" prop="enumerateTable"/> <el-table-column label="单位" align="center" prop="unit"/> <el-table-column label="是否必填" 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 label="弹窗编辑器ID" align="center" prop="popupEditId" width="120"/> <el-table-column label="URL地址" align="center" prop="href"/> <el-table-column label="是否可查询" 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 label="是否表单显示" 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 label="是否列表显示" 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 label="是否只读" 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 label="表单排序" align="center" prop="orderNum"/> <el-table-column label="是否支持排序" 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 label="数是否有公差" 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 label="正则表达式校验" align="center" prop="regularCheck" width="120"/> <el-table-column label="状态" 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 label="合法" align="center" prop="validStr" width="150"/> <el-table-column label="操作" 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="delete" @click="handleDelete(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-model:page="queryParams.pageNum" v-model::limit="queryParams.pageSize" @pagination="getList"/> </el-col> </pane> </splitpanes> </el-row> <!-- 添加或修改属性规则对话框 --> <el-dialog :title="title" v-model="open" width="850px" append-to-body> <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"> <!-- 基本信息 --> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="number"> <el-input v-model="form.number" placeholder="请输入编号" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="类型ID" prop="typemgrId"> <el-tree-select v-model="form.typemgrId" :data="typeOptions" :props="{ value: 'id', label: 'label', 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 label="字段类型" prop="dataType"> <el-select v-model="form.dataType" placeholder="请选择字段类型" style="width: 240px"> <el-option v-for="dict in mdm_common_column_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 数与文本配置 --> <el-row> <el-col :span="12"> <el-form-item label="文本最大长度" prop="length"> <el-input v-model="form.length" placeholder="请输入文本最大长度" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="数最大" prop="maxVal"> <el-input v-model="form.maxVal" placeholder="请输入数最大" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数最小" prop="minVal"> <el-input v-model="form.minVal" placeholder="请输入数最小" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="默认" prop="defaultVal"> <el-input v-model="form.defaultVal" placeholder="请输入默认" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举ID" prop="enumerateId"> <el-input v-model="form.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="正则表达式校验" prop="regularCheck"> <el-input v-model="form.regularCheck" placeholder="请输入正则表达式校验" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举表" prop="enumerateTable"> <el-input v-model="form.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="单位" prop="unit"> <el-input v-model="form.unit" placeholder="请输入单位" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 状态与布尔选项 --> <el-row> <el-col :span="12"> <el-form-item label="是否必填" prop="isNull"> <el-select v-model="form.isNull" placeholder="请选择是否必填" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否可查询" prop="isQuery"> <el-select v-model="form.isQuery" placeholder="请选择是否可查询" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否表单显示" prop="isShowForm"> <el-select v-model="form.isShowForm" placeholder="请选择是否表单显示" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否列表显示" prop="isShowList"> <el-select v-model="form.isShowList" placeholder="请选择是否列表显示" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否只读" prop="isReadOnly"> <el-select v-model="form.isReadOnly" placeholder="请选择是否只读" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否支持排序" prop="sortFlag"> <el-select v-model="form.sortFlag" placeholder="请选择是否支持排序" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数是否有公差" prop="isTolerance"> <el-select v-model="form.isTolerance" placeholder="请选择数是否有公差" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="表单排序" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="请输入表单排序" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 高级设置 --> <el-row> <el-col :span="12"> <el-form-item label="弹窗编辑器ID" prop="popupEditId"> <el-input v-model="form.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="URL地址" prop="href"> <el-input v-model="form.href" placeholder="请输入URL地址" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in mdm_common_status_list" :key="dict.value" :value="dict.value" >{{ dict.label }} </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="cancel">取 消</el-button> </div> </template> </el-dialog> <!-- 修改命名规则对话框--> <el-dialog title="修改命名规则" v-model="openUrledit" width="500px" append-to-body> <el-form ref="urlformRef" :model="urlform" :rules="urlEditrules" label-width="80px"> <el-form-item label="命名规则" prop="namingrule"> <el-input v-model="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="cancelSubmitUrlEdit">取 消</el-button> </div> </template> </el-dialog> <!-- 合法列表对话框 --> <el-dialog :title="validtitle" v-model="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="delete" :disabled="validMultiple" @click="handleValidDeleteBtn" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </el-col> </el-row> <el-table v-loading="validTableLoading" :data="validlistList" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <!-- <el-table-column label="ID" align="center" prop="id" />--> <el-table-column label="合法名称" align="center" prop="name"/> <el-table-column label="排序" align="center" prop="orderNum"/> <el-table-column label="操作" 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="delete" type="primary" @click="handleValidDelete(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-model="validAddOpen" width="500px" append-to-body> <el-form ref="validformRef" :model="validform" :rules="validRules" label-width="80px"> <el-form-item label="合法名称" prop="name" label-width="95px"> <el-input v-model="validform.name" placeholder="请输入合法名称"/> </el-form-item> <el-form-item label="排序" prop="orderNum" label-width="95px"> <el-input v-model="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="validAddCancel">取 消</el-button> </div> </template> </el-dialog> <!-- 用户导入对话框 --> <el-dialog :title="upload.title" v-model="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-model="upload.updateSupport" />是否更新已经存在的用户数据 </div> <span>仅允许导入xls、xlsx格式文件。</span> <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @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, delTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr"; import {getMdmMaterialType, updateMdmMaterialType} from "@/api/mdm/mdmMaterialType"; import { treeselect } from "@/api/mdm/mdmMaterialType"; import {listValidlist, getValidlist, delValidlist, 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 validMultiple = ref(true); const validTableLoading = ref(true); const materiaTypelName = 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(materiaTypelName, (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 handleSelectionChange(selection) { ids.value = selection.map(item => item.id); single.value = selection.length != 1; multiple.value = !selection.length; }; function handleAdd() { resetFormState(); // getTreeselect(); open.value = true; title.value = "添加属性规则"; }; function handleUpdate(row) { resetFormState(); // getTreeselect() 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 cancel() { open.value = false; resetFormState(); }; function handleDelete(row) { // console.log('删除ids', ids.value); const delIds = row.id || ids.value; proxy.$modal.confirm('是否确认删除属性规则编号为"' + delIds + '"的数据项?').then(function () { return delTypeAttr(delIds); }).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.label.includes(value); }; function handleNodeClick(data) { queryParams.value.typemgrId = data.id; handleQuery(); }; function getTreeselect() { treeselect().then(response => { // console.log('获取树形数据成功:', response); typeOptions.value = response.data; }); }; function eidtValid(row) { selectedAttrRow.value = row; getValidDataList(row); }; function getValidDataList(row) { validOpen.value = true; validTableLoading.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 { validTableLoading.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 validAddCancel() { validAddOpen.value = false; resetValidAddForm(); }; function handleValidSelectionChange(selection) { validIds.value = selection.map(item => item.id); validsingle.value = selection.length !== 1; validMultiple.value = !selection.length; }; function handleValidDeleteBtn() { const ids = validIds.value; proxy.$modal.confirm('是否确认删除合法列表编号为"' + ids + '"的数据项?').then(function () { return delValidlist(ids); }).then(() => { proxy.$modal.msgSuccess("删除成功"); getValidDataList(selectedAttrRow.value); }).catch(() => { }); }; function handleValidDelete(row) { const ids = row.id; proxy.$modal.confirm('是否确认删除合法列表编号为"' + ids + '"的数据项?').then(function () { return delValidlist(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 cancelSubmitUrlEdit() { 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, fileList) => { upload.isUploading = true; }; const handleFileSuccess = (response, file, fileList) =>{ 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() getTreeselect() </script> 这个页面会导致应用崩溃,请优化,指出可能的问题点
08-07
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="公告标题" prop="noticeTitle"> <el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="操作人员" prop="createBy"> <el-input v-model="queryParams.createBy" placeholder="请输入操作人员" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="类型" prop="noticeType"> <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable> <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:notice:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:notice:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:notice:remove']" >删除</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="序号" align="center" prop="noticeId" width="100" /> <el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" /> <el-table-column label="公告类型" align="center" prop="noticeType" width="100"> <template slot-scope="scope"> <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/> </template> </el-table-column> <el-table-column label="状态" align="center" prop="status" width="100"> <template slot-scope="scope"> <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="创建者" align="center" prop="createBy" width="100" /> <el-table-column label="创建时间" align="center" prop="createTime" width="100"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >删除</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改公告对话框 --> <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-row> <el-col :span="12"> <el-form-item label="公告标题" prop="noticeTitle"> <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="归属部门" prop="deptId"> <treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true" placeholder="请选择归属部门" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="公告类型" prop="noticeType"> <el-select v-model="form.noticeType" placeholder="请选择公告类型"> <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="状态"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.sys_notice_status" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="内容"> <editor v-model="form.noticeContent" :min-height="192"/> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice" import Treeselect from "@riophae/vue-treeselect"; export default { name: "Notice", components: {Treeselect}, dicts: ['sys_notice_status', 'sys_notice_type'], data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 公告表格数据 noticeList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 部门搜索关键词 deptName: undefined, // 所有部门树选项 deptOptions: undefined, // 过滤掉已禁用部门的树选项 enabledDeptOptions: undefined, defaultProps: { children: "children", label: "label"}, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, noticeTitle: undefined, createBy: undefined, deptId: undefined, status: undefined }, // 表单参数 form: {}, // 表单校验 rules: { noticeTitle: [ { required: true, message: "公告标题不能为空", trigger: "blur" } ], noticeType: [ { required: true, message: "公告类型不能为空", trigger: "change" } ] } } }, watch: { // 根据名称筛选部门树 deptName(val) { this.$refs.tree.filter(val) } }, created() { this.getList() this.getDeptTree() }, methods: { /** 查询公告列表 */ getList() { this.loading = true listNotice(this.queryParams).then(response => { this.noticeList = response.rows this.total = response.total this.loading = false }) }, // 取消按钮 cancel() { this.open = false this.reset() }, // 表单重置 reset() { this.form = { noticeId: undefined, noticeTitle: undefined, noticeType: undefined, noticeContent: undefined, deptId: undefined, status: "0" } this.resetForm("form") }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1 this.getList() }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm") this.handleQuery() }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.noticeId) this.single = selection.length!=1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset() this.open = true this.title = "添加公告" }, /** 修改按钮操作 */ handleUpdate(row) { this.reset() const noticeId = row.noticeId || this.ids getNotice(noticeId).then(response => { this.form = response.data this.open = true this.title = "修改公告" }) }, /** 提交按钮 */ submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.noticeId != undefined) { updateNotice(this.form).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { addNotice(this.form).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() }) } } }) }, // 查询部门下拉树结构 getDeptTree() { deptTreeSelect().then(response => { this.deptOptions = response.data this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data))) }) }, // 过滤禁用的部门 filterDisabledDept(deptList) { return deptList.filter(dept => { if (dept.disabled) { return false } if (dept.children && dept.children.length) { dept.children = this.filterDisabledDept(dept.children) } return true }) }, // 筛选节点 filterNode(value, data) { if (!value) return true return data.label.indexOf(value) !== -1 }, // 节点单击事件 handleNodeClick(data) { this.queryParams.deptId = data.id // 设置查询参数中的部门ID this.handleQuery() // 触发查询 }, /** 删除按钮操作 */ handleDelete(row) { const noticeIds = row.noticeId || this.ids this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项?').then(function() { return delNotice(noticeIds) }).then(() => { this.getList() this.$modal.msgSuccess("删除成功") }).catch(() => {}) } } } </script> 请优化这段代码 修改问题 部门选择数据不展示 样式错误等 主要是所属部门功能
最新发布
08-22
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值