bonus-ui/src/views/material/lease/apply/component/addToolsApply.vue

1033 lines
31 KiB
Vue

<template>
<!-- 新增工机具 -->
<div>
<el-form
:model="maForm"
ref="maForm"
size="small"
:rules="rules"
:inline="true"
label-width="120px"
>
<!-- <el-form-item label="租赁单位" prop="leaseUnitId">
<el-select
v-model="maForm.leaseUnitId"
placeholder="请选择租赁单位"
clearable
filterable
style="width: 240px"
@change="uniteChange"
>
<el-option
v-for="item in uniteList"
:key="item.unitId"
:label="item.unitName"
:value="item.unitId"
/>
</el-select>
</el-form-item> -->
<el-form-item label="租赁单位" prop="unitId">
<treeselect
v-model="maForm.unitId" :disabled="isEdit"
:options="uniteList" :normalizer="normalizer"
:show-count="true" style="width: 240px" :disable-branch-nodes="true"
noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
placeholder="请选择租赁单位" @select="uniteChange"
/>
<!-- <el-cascader
v-model="unitId"
:show-all-levels="false"
:options="uniteList"
:props="selectTreeProps"
filterable
clearable
collapse-tags
@change="uniteChange"
:disabled="isEdit"
placeholder="请选择租赁单位"
></el-cascader> -->
</el-form-item>
<el-form-item label="租赁工程" prop="projectId">
<treeselect
v-model="maForm.projectId" :disabled="isEdit"
:options="projectList" :normalizer="normalizer"
:show-count="true" style="width: 240px" :disable-branch-nodes="true"
noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
placeholder="请选择租赁工程" @select="projectChange"
/>
<!-- <el-cascader
v-model="projectId"
:show-all-levels="false"
:options="projectList"
:props="selectTreeProps"
filterable
clearable
collapse-tags
@change="projectChange"
:disabled="isEdit"
placeholder="请选择租赁工程"
></el-cascader> -->
</el-form-item>
<el-form-item label="领料人" prop="leasePerson">
<el-input
v-model="maForm.leasePerson"
placeholder="请输入领料人"
clearable
maxlength="50"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input
v-model="maForm.phone"
placeholder="请输入联系电话"
clearable
maxlength="50"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="类型规格" prop="deviceType">
<el-row :gutter="10">
<el-col :span="15">
<el-select
ref="typeSelect"
v-model="tempDeviceType"
multiple
filterable
placeholder="请输入类型规格"
style="width: 500px"
@change="handleTypeChange"
clearable
collapse-tags
:filter-method="handleSearchImpl"
:popper-class="'type-select-dropdown'"
:popper-append-to-body="false"
@visible-change="handleVisibleChange"
>
<el-option
v-for="item in filteredOptions"
:key="item.typeId"
:label="item.fullPath"
:value="item.typeId"
:data-key="item.typeId"
>
<span v-html="highlightText(item.fullPath, searchKeyword)"></span>
<span style="float: right; color: #8492a6; font-size: 13px">
库存:{{ item.storageNum }}
</span>
</el-option>
</el-select>
</el-col>
<el-col :span="6">
<el-input
ref="searchInput"
v-model="searchKeyword"
placeholder="输入类型规格高亮搜索"
prefix-icon="el-icon-search"
clearable
style="width: 300px"
@input="handleHighlightSearch"
@focus="handleSearchFocus"
@click.native="handleSearchClick"
>
<template slot="append">
<span v-if="matchedOptions.length" style="margin: 0 5px">
{{ currentMatchIndex + 1 }}/{{ matchedOptions.length }}
</span>
</template>
</el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="maForm.remark"
placeholder="请输入备注"
clearable
maxlength="150"
type="textarea"
style="width: 240px"
rows="2"
/>
</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="handleSave"
>保存</el-button
>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-if="isEdit">导出</el-button>
</el-col> -->
</el-row>
<el-table
v-loading="loading"
:data="equipmentList"
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column align="center" label="序号" type="index" width="55" />
<el-table-column
align="center"
label="类型名称"
prop="maTypeName"
show-overflow-tooltip
></el-table-column>
<el-table-column
align="center"
label="规格型号"
prop="typeName"
show-overflow-tooltip
/>
<el-table-column align="center" label="计量单位" prop="unitName" />
<el-table-column align="center" label="当前库存" prop="storageNum" />
<el-table-column label="预领数量" prop="preNum" align="center">
<template v-slot="scope">
<el-input
v-model.number="scope.row.preNum"
controls-position="right" type="number"
style="width: 100%" :disabled="scope.row.alNum&&scope.row.alNum!=0"
:min="0" @input="(v)=>(scope.row.unitValue==1?scope.row.preNum=Number(v.replace(/[^\d.]/g,'')) : scope.row.preNum=Number(v.replace(/[^\d]/g,'')))"
></el-input>
</template>
</el-table-column>
<el-table-column label="已出库数量" align="center" prop="alNum" v-if="maForm.taskId" :show-overflow-tooltip="true"/>
<!-- <el-table-column align="center" label="出库数量" prop="alNum" /> -->
<el-table-column
label="备注"
prop="remark"
align="center"
label-width="500px"
>
<template v-slot="scope">
<el-input
v-model="scope.row.remark"
controls-position="right"
style="width: 100%"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
style="color: red" v-if="!scope.row.alNum||scope.row.alNum==0"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
getPurchaseCheckInfo,
equipmentTypeTree,
} from "@/api/purchase/goodsArrived";
import {
getListProject,
getListUnite,
addApplyInfo,
updateApplyInfo,
getApplyInfo,
getAgreement,
} from "@/api/lease/apply";
import { getToken } from "@/utils/auth";
import {
uploadPurchaseFile,
getPurchaseFileList,
} from "@/api/purchase/goodsAccept";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name: "AddTools",
dicts: ["purchase_task_status"],
components: { Treeselect },
props: {
isEdit: {
type: Boolean,
default: () => {
return false;
},
},
editTaskId: {
type: [String, Number],
default: () => {
return "";
},
},
editId: {
type: [String, Number],
default: () => {
return "";
},
},
},
data() {
return {
taskId: "",
// isEdit: false,
// 遮罩层
loading: false,
loadingTwo: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
selectTreeProps: {
children: "children",
label: "name",
// multiple: false,
value: "id",
// multiple: true,
},
//租赁单位
uniteList: [],
//租赁工程
projectList: [],
//机具类型
equipmentTypeList: [],
// 角色表格数据
equipmentList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
rowData: {},
unitId: null,
projectId: null,
// 查询参数
queryParams: {
equipmentId: undefined,
productionTime: "",
},
maForm: {
unitId: undefined,
projectId: undefined,
arrivalTime: "",
purchaser: "",
remark: "",
purchaseNumber: "",
},
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label",
},
// 表单校验
rules: {
unitId: [
{
required: true,
message: "请选择租赁单位",
trigger: "blur",
},
],
projectId: [
{
required: true,
message: "请选择租赁工程",
trigger: "blur",
},
],
leasePerson: [
{
required: true,
message: "请输入领料人",
trigger: "blur",
},
],
phone: [
{ required: true, message: "联系电话不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
// purchaser: [
// { required: true, message: "采购员不能为空", trigger: "blur" }
// ]
},
deviceTypeTreeProps: {
children: "children",
label: "typeName",
value: "typeId",
multiple: true,
emitPath: true
},
deviceType: [],
propsKey: 1000,
projectTemp: undefined,
unitTemp: undefined,
agreementId: undefined,
// taxRate:0,
flattenOptions: [], // 扁平化后的选项数据
typePopoverVisible: false,
typeOptions: [], // 类型选项
allTypeList: [], // 所有类型数据
flattenTypeOptions: [], // 扁平化后的选项数据(缓存所有选项)
typeGroups: [], // 分组后的类型选项
typeGroupsBackup: [], // 备份原始分组数据,用于搜索
typeMap: new Map(), // 用于快速查找类型数据
tempDeviceType: [], // 临时选中值
filteredOptions: [], // 过滤后的选项(用于显示)
maxShowOptions: 100, // 最大显示选项数
searchTimer: null, // 用于自定义防抖
searchKeyword: '', // 高亮搜索关键字
currentMatchIndex: -1, // 当前匹配项索引
matchedOptions: [], // 匹配的选项
keepSelectOpen: false, // 控制下拉框是否保持打开
isSearching: false, // 添加搜索状态标记
};
},
computed: {
pickerOptions() {
return {
disabledDate(time) {
const currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
return time.getTime() < currentDate.getTime();
},
};
},
},
mounted() {
this.projectInfoList();//单位工程下拉选
this.equipmentType();//机具类型下拉选
if (this.isEdit) {
console.log("isEdit", this.isEdit);
this.taskId = this.editTaskId;
this.id = this.editId;
this.getTaskInfo();
this.equipmentType();
}
// this.projectInfoList();
// this.equipmentType();
},
methods: {
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.name,
children: node.children,
};
},
uniteChange(val) {
// this.projectList = [];
// if (val && val.length > 0) {
// this.maForm.unitId = this.unitId[this.unitId.length - 1];
// } else if (val && val.length == 0) {
// this.maForm.unitId = "";
// }
setTimeout(()=>{
getListProject({ unitId: this.maForm.unitId }).then((response) => {
this.projectList = response.data;
this.maForm.projectId=null
});
},500)
},
projectChange(val) {
// if (val && val.length > 0) {
// this.maForm.projectId = this.projectId[this.projectId.length - 1];
// } else if (val && val.length == 0) {
// this.maForm.projectId = "";
// }
setTimeout(()=>{
// projectId: this.maForm.projectId
getListUnite({ }).then((response) => {
this.uniteList = response.data;
});
},500)
},
/** 租赁单位和工程-下拉选 */
projectInfoList() {
if (!this.isEdit) {
getListUnite({ projectId: null }).then((response) => {
this.uniteList = response.data;
});
getListProject({ unitId: null }).then((response) => {
this.projectList = response.data;
});
} else {
getListUnite({ projectId: null }).then((response) => {
this.uniteList = response.data;
});
getListProject({ unitId: this.maForm.unitId }).then((response) => {
this.projectList = response.data;
});
}
},
// filterTree(nodes) {
// return nodes.map((node) => {
// if (node.children) {
// node.children = this.filterTree(node.children);
// }
// return node;
// });
// },
//选择物资厂家
// changeSupplier(supplierId) {
// this.equipmentList.forEach((item) => {
// this.$set(item, 'supplierId', supplierId)
// })
// },
/** 机具类型 */
equipmentType() {
equipmentTypeTree().then((response) => {
this.equipmentTypeList = response.data;
// 处理并扁平化所有类型数据
this.flattenTypeOptions = this.processTypeData(response.data);
// 初始显示所有选项
this.filteredOptions = [...this.flattenTypeOptions];
// 反显选中数据
if (this.equipmentList.length > 0) {
this.deviceType = this.equipmentList.map(item => item.typeId);
}
});
},
// 处理类型数据
processTypeData(data) {
const result = [];
const traverse = (node, parents = []) => {
const path = [...parents, node.typeName];
if (!node.children || node.children.length === 0) {
result.push({
typeId: node.typeId,
typeName: node.typeName,
fullPath: path.join(' / '),
searchKey: path.join('').toLowerCase(),
storageNum: node.storageNum || 0,
maTypeName: parents[parents.length - 1] || '',
specificationType: node.typeName,
unitName: node.unitName,
unitValue: node.unitValue
});
}
if (node.children) {
node.children.forEach(child => traverse(child, path));
}
};
data.forEach(node => traverse(node));
return result;
},
// 搜索处理函数
handleSearchImpl(query) {
if (!query) {
this.filteredOptions = [...this.flattenTypeOptions];
return;
}
const lowercaseQuery = query.toLowerCase();
this.filteredOptions = this.flattenTypeOptions.filter(item =>
item.searchKey.includes(lowercaseQuery) ||
item.fullPath.toLowerCase().includes(lowercaseQuery)
);
},
// 选择变化处理
handleTypeChange(val) {
if (!val || val.length === 0) return;
// 获取新选中的项
const lastSelected = val[val.length - 1];
const typeData = this.flattenTypeOptions.find(item => item.typeId === lastSelected);
if (typeData) {
if (this.equipmentList.some(item => item.typeId === lastSelected)) {
this.$message({
message: `${typeData.typeName} 已添加到列表中`,
type: 'warning'
});
this.tempDeviceType = this.tempDeviceType.filter(id => id !== lastSelected);
} else if (typeData.storageNum <= 0) {
this.$message.error("所选物资规格类型暂时无库存,无法申请!");
this.tempDeviceType = this.tempDeviceType.filter(id => id !== lastSelected);
} else {
// 将新项添加到数组开头,实现倒序
this.equipmentList.unshift({
...typeData,
preNum: 0
});
this.deviceType.push(lastSelected);
this.$message({
message: `已添加 ${typeData.typeName}`,
type: 'success'
});
}
}
// 清空临时选中值
this.$nextTick(() => {
this.tempDeviceType = [];
});
},
//获取任务详情--- 编辑回显数据
async getTaskInfo() {
// this.loading = true;
await getApplyInfo(this.id).then((response) => {
this.maForm = response.data.leaseApplyInfo;
this.maForm.unitId = response.data.leaseApplyInfo.leaseUnitId;
this.maForm.projectId = response.data.leaseApplyInfo.leaseProjectId;
this.unitId = this.treeParentsById(this.uniteList, this.maForm.unitId);
this.projectId = this.treeParentsById(
this.projectList,
this.maForm.projectId
);
this.equipmentList = response.data.leaseApplyDetailsList;
// this.loading = false;
});
// await this.projectInfoList();
},
checkNum(row) {
// let maxNum = row.storageNum
// if (row.preNum <= 1) {
// row.preNum = 1
// } else if (row.preNum > maxNum) {
// row.preNum = maxNum-1
// }
},
//单位,工程树结构数据获取父
treeParentsById(list, id) {
for (let i in list) {
if (list[i].id == id) {
//查询到就返回该数组对象的value
return [list[i].id];
}
if (list[i].children) {
let node = this.treeParentsById(list[i].children, id);
if (node !== undefined) {
//查询到把父节把父节点加到数组前面
node.unshift(list[i].id);
return node;
}
}
}
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.roleId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 保存按钮操作 */
handleSave() {
// console.log(this.equipmentList)
console.log("maForm", this.maForm);
if (this.equipmentList.length > 0) {
this.$refs["maForm"].validate(async (valid) => {
if (valid) {
for(let i = 0;i<this.equipmentList.length;i++){
if(this.equipmentList[i].preNum<=0){
this.$message.error(`第 ${i + 1} 行的 ${'预领数量必须大于0'} `);
return
}
if(this.equipmentList[i].preNum>this.equipmentList[i].storageNum){
this.$message.error(`第 ${i + 1} 行的 ${'预领数量不可大于库存量'} `);
return
}
}
console.log("projectId", this.projectTemp);
await getAgreement({
unitId: this.maForm.unitId,
projectId: this.maForm.projectId,
}).then((response) => {
this.agreementId = response.data.agreementId;
this.maForm.agreementId = this.agreementId;
});
this.maForm.taskId = this.taskId;
// this.maForm.checkDetailsList = this.equipmentList
await this.$modal
.confirm("是否确认保存当前页面")
.then(function () {})
.then(() => {
if (this.isEdit) {
this.maForm.leaseUnitId = this.maForm.unitId;
this.maForm.leaseProjectId = this.maForm.projectId;
console.log("编辑");
this.loading = true;
updateApplyInfo({
leaseApplyDetailsList: this.equipmentList,
leaseApplyInfo: this.maForm,
}).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("编辑成功");
// this.$tab.closeOpenPage({
// path: '/store/newBuy/newDevicesList',
// })
this.$emit("addToolsSuccess");
}
this.loading = false;
});
} else if (!this.isEdit) {
console.log("新增");
// console.log(this.equipmentList)
this.loading = true;
addApplyInfo({
leaseApplyDetailsList: this.equipmentList,
leaseApplyInfo: this.maForm,
}).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("新增成功");
// this.$tab.closeOpenPage({
// path: '/store/newBuy/newDevicesList',
// })
this.$emit("addToolsSuccess");
}
this.loading = false;
});
}
})
.catch(() => {});
}
});
} else {
this.$modal.msgError("请先添加类型规格");
}
},
//文件管理
openFileDialog(row) {
this.rowData = row;
this.fileDataList = [
{ dictLabel: "合格证", fileType: "0", name: "", url: "" },
{ dictLabel: "型式试验报告", fileType: "1", name: "", url: "" },
{ dictLabel: "出厂检测报告", fileType: "2", name: "", url: "" },
{ dictLabel: "第三方监测报告", fileType: "3", name: "", url: "" },
{ dictLabel: "其他", fileType: "4", name: "", url: "" },
];
if (this.taskId == "") {
// console.log(this.rowData)
// console.log(this.rowData.bmFileInfos)
if (this.rowData.bmFileInfos.length > 0) {
this.rowData.bmFileInfos.forEach((item) => {
let index = this.fileDataList.findIndex(
(v) => v.fileType == item.fileType
);
this.fileDataList[index].name = item.name;
this.fileDataList[index].url = item.url;
});
}
} else {
this.getFileData();
}
this.open = true;
},
getFileData() {
let param = {
modelId: this.rowData.typeId,
taskType: 0,
taskId: this.rowData.taskId,
};
getPurchaseFileList(param)
.then((response) => {
if (response.rows.length > 0) {
response.rows.forEach((item) => {
let index = this.fileDataList.findIndex(
(v) => v.fileType == item.fileType
);
this.fileDataList[index].name = item.name;
this.fileDataList[index].url = item.url;
});
}
})
.catch(() => {});
},
beforeFileUpload(row) {
this.rowData.fileType = row.fileType;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if (response.code == 200) {
if (this.taskId == "") {
//新增逻辑
// console.log(response)
// console.log(this.rowData)
// console.log(this.rowData.bmFileInfos)
let obj = {
taskId: this.taskId,
taskType: "0",
name: response.data.name,
url: response.data.url,
modelId: this.rowData.typeId,
fileType: this.rowData.fileType,
// "dictLabel": this.rowData.dictLabel,
};
//根据文件上传返回更新文件管理弹窗内容
let index = this.fileDataList.findIndex(
(v) => v.fileType == this.rowData.fileType
);
this.fileDataList[index].name = response.data.name;
this.fileDataList[index].url = response.data.url;
//判断当前上传的文件是否已上传过-再往机具类型数据中插入
if (this.rowData.bmFileInfos.length > 0) {
let index2 = this.rowData.bmFileInfos.findIndex(
(v) => v.fileType == this.rowData.fileType
);
if (index2 > -1) {
//相同类型文件重复上传-替换
this.rowData.bmFileInfos.splice(index2, 0, obj);
} else {
//不存在相同类型文件-添加
this.rowData.bmFileInfos.push(obj);
}
} else {
this.rowData.bmFileInfos.push(obj);
}
} else {
//编辑逻辑
let param = {
taskId: this.taskId,
taskType: "0",
name: response.data.name,
url: response.data.url,
modelId: this.rowData.typeId,
fileType: this.rowData.fileType,
// "dictLabel": this.rowData.dictLabel,
};
uploadPurchaseFile(param)
.then((response) => {
this.$modal.msgSuccess("上传成功");
this.getFileData();
})
.catch(() => {
this.$modal.msgError("上传失败");
});
}
}
},
//图片查看
picturePreview(file) {
this.dialogImageUrl = file.url;
const parts = file.name.split(".");
const extension = parts.pop();
if (extension === 'doc' || extension === 'DOC' || extension === 'docx' || extension === 'DOCX' || extension === 'pdf' || extension === 'PDF') {
const windowName = file.name;
window.open(file.url, windowName);
} else {
this.dialogVisible = true;
}
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal
.confirm("是否确认删除所选择的数据项?")
.then(() => {
this.equipmentList = this.equipmentList.filter(
item => item.typeId !== row.typeId
);
// 更新实际存储的选中值
this.deviceType = this.equipmentList.map(item => item.typeId);
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"/material/purchase_check_info/exportDetails",
{ taskId: this.taskId },
`新购到货详情_${new Date().getTime()}.xlsx`
);
},
// 高亮文本
highlightText(text, keyword) {
if (!keyword) return text;
const reg = new RegExp(keyword, 'gi');
return text.replace(reg, match => `<span class="highlight-text">${match}</span>`);
},
// 处理下拉框可见性变化
handleVisibleChange(visible) {
if (!visible && this.keepSelectOpen && !this.isSearching) {
// 只有在非搜索状态下才重新打开下拉框
this.$nextTick(() => {
this.$refs.typeSelect.focus();
});
}
},
// 处理搜索框点击
handleSearchClick() {
this.isSearching = true;
this.keepSelectOpen = true;
// 确保下拉框打开
this.$refs.typeSelect.focus();
// 立即将焦点返回给搜索框
this.$nextTick(() => {
this.$refs.searchInput.focus();
});
},
// 处理搜索框获得焦点
handleSearchFocus() {
this.isSearching = true;
if (!this.$refs.typeSelect.visible) {
this.$refs.typeSelect.focus();
this.$nextTick(() => {
this.$refs.searchInput.focus();
});
}
},
// 高亮搜索处理
handleHighlightSearch() {
this.isSearching = true;
this.keepSelectOpen = true;
if (!this.searchKeyword) {
this.currentMatchIndex = -1;
this.matchedOptions = [];
return;
}
// 找到所有匹配项
this.matchedOptions = this.filteredOptions.filter(item =>
item.fullPath.toLowerCase().includes(this.searchKeyword.toLowerCase())
);
if (this.matchedOptions.length > 0) {
this.currentMatchIndex = 0;
this.$nextTick(() => {
this.scrollToMatch();
});
}
},
// 滚动到匹配项
scrollToMatch() {
if (this.currentMatchIndex === -1 || !this.matchedOptions.length) return;
const option = this.matchedOptions[this.currentMatchIndex];
const selectDom = this.$el.querySelector('.el-select-dropdown__wrap');
const optionDom = selectDom?.querySelector(`[data-key="${option.typeId}"]`);
if (optionDom) {
optionDom.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
},
},
// 添加组件销毁时的清理
beforeDestroy() {
this.keepSelectOpen = false;
this.isSearching = false;
}
};
</script>
<style lang="scss">
.popper-select {
.el-cascader-panel .el-scrollbar .el-checkbox {
display: none;
}
.el-cascader-panel .el-scrollbar:nth-child(4) .el-checkbox {
display: block !important;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.el-icon-arrow-down.is-reverse {
transform: rotateZ(180deg);
}
// .el-tree {
// max-height: 300px;
// overflow-y: auto;
// }
.highlight-text {
background-color: #ffd04b;
color: #000;
}
::v-deep .el-input-group__append {
padding: 0;
.el-button {
padding: 0 10px;
border: none;
height: 100%;
&:first-child {
border-right: 1px solid #dcdfe6;
}
&[disabled] {
color: #c0c4cc;
}
}
}
.type-select-dropdown {
.el-select-dropdown__wrap {
max-height: 400px !important;
}
.el-select-dropdown__item {
height: auto;
padding: 8px 20px;
white-space: normal;
word-break: break-all;
}
}
.highlight-text {
background-color: #ffd04b;
color: #000;
}
.el-input-group__append {
padding: 0;
.el-button {
padding: 0 10px;
border: none;
height: 100%;
&:first-child {
border-right: 1px solid #dcdfe6;
}
&[disabled] {
color: #c0c4cc;
}
}
}
</style>