| | |
| | | <el-input v-model="search" |
| | | style="width: 210px" |
| | | placeholder="输入关键字进行搜索" |
| | | @change="searchFilter" |
| | | @input="debouncedSearch" |
| | | @clear="searchFilter" |
| | | clearable |
| | | prefix-icon="Search" /> |
| | |
| | | placeholder="请输入产品名称" |
| | | maxlength="20" |
| | | show-word-limit |
| | | clearable |
| | | @keydown.enter.prevent /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="标准数量:" |
| | | prop="standardQuantity"> |
| | | <el-input v-model="form.standardQuantity" |
| | | type="number" |
| | | :step="0.001" |
| | | placeholder="请输入产品标准数量" |
| | | clearable |
| | | @keydown.enter.prevent /> |
| | | </el-form-item> |
| | |
| | | const data = reactive({ |
| | | form: { |
| | | productName: "", |
| | | standardQuantity: null, |
| | | }, |
| | | rules: { |
| | | productName: [ |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | { max: 20, message: "产品名称不能超过20个字符", trigger: "blur" }, |
| | | ], |
| | | standardQuantity: [ |
| | | { |
| | | required: false, |
| | | trigger: "blur", |
| | | validator: (rule, value, callback) => { |
| | | if (value == null || value === "") { |
| | | callback(); |
| | | return; |
| | | } |
| | | if (isNaN(value) || value < 0) { |
| | | callback(new Error("标准数量必须是非负数字")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | modelForm: { |
| | |
| | | productDia.value = true; |
| | | form.value.productName = |
| | | type === "edit" && data ? data.productName : ""; |
| | | form.value.standardQuantity = |
| | | type === "edit" && data ? data.standardQuantity : null; |
| | | }; |
| | | // 打开规格型号弹框 |
| | | const openModelDia = (type, data) => { |
| | |
| | | proxy.$modal.msg("已取消"); |
| | | }); |
| | | }; |
| | | // 调用tree过滤方法 中文英过滤 |
| | | const filterNode = (value, data, node) => { |
| | | if (!value) { |
| | | //如果数据为空,则返回true,显示所有的数据项 |
| | | return true; |
| | | } |
| | | // 查询列表是否有匹配数据,将值小写,匹配英文数据 |
| | | let val = value.toLowerCase(); |
| | | return chooseNode(val, data, node); // 调用过滤二层方法 |
| | | const debounce = (fn, delay = 300) => { |
| | | let timer; |
| | | return (...args) => { |
| | | clearTimeout(timer); |
| | | timer = setTimeout(() => fn(...args), delay); |
| | | }; |
| | | }; |
| | | // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符. |
| | | const chooseNode = (value, data, node) => { |
| | | if (data.label.indexOf(value) !== -1) { |
| | | |
| | | const debouncedSearch = debounce(() => { |
| | | searchFilter(); |
| | | }, 300); |
| | | |
| | | const filterNode = (value, data) => { |
| | | if (!value) return true; |
| | | return chooseNode(value.toLowerCase(), data); |
| | | }; |
| | | |
| | | const chooseNode = (value, data) => { |
| | | const label = (data.label || '').toLowerCase(); |
| | | if (label.indexOf(value) !== -1) { |
| | | return true; |
| | | } |
| | | const level = node.level; |
| | | // 如果传入的节点本身就是一级节点就不用校验了 |
| | | if (level === 1) { |
| | | return false; |
| | | if (data.children && data.children.length > 0) { |
| | | return data.children.some(child => chooseNode(value, child)); |
| | | } |
| | | // 先取当前节点的父节点 |
| | | let parentData = node.parent; |
| | | // 遍历当前节点的父节点 |
| | | let index = 0; |
| | | while (index < level - 1) { |
| | | // 如果匹配到直接返回,此处name值是中文字符,enName是英文字符。判断匹配中英文过滤 |
| | | if (parentData.data.label.indexOf(value) !== -1) { |
| | | return true; |
| | | } |
| | | // 否则的话再往上一层做匹配 |
| | | parentData = parentData.parent; |
| | | index++; |
| | | } |
| | | // 没匹配到返回false |
| | | return false; |
| | | }; |
| | | getProductTreeList(); |