|
@@ -6,8 +6,62 @@
|
|
|
style="position: relative;"
|
|
|
>
|
|
|
<!-- <span>设备产品数据库</span> -->
|
|
|
- <el-form class="search_area" label-width="100px">
|
|
|
+ <el-form class="search_area" label-width="auto">
|
|
|
<el-row :gutter="10">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="通用名称">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="params.commonName"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="注册名">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="params.registrationName"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="厂家名称">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="params.factoryName"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="型号">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="params.model"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="参考价格">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="params.referencePrice"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
|
|
|
<el-col :span="1.5">
|
|
|
<el-form-item label="设备类别">
|
|
@@ -19,9 +73,40 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="是否项目/厂家年度授权">
|
|
|
+ <el-select clearable v-model="params.isProjectOrFactoryEmpower" size="mini" style="width: 200px">
|
|
|
+ <el-option v-for="dict in dict.type.sys_equipment_type" :key="dict.value" :label="dict.label" :value="dict.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="参数">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="params.parameters"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="params.remark"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- <div style="position: absolute;top: 10px;right: 10px;">
|
|
|
+ <div style="position: absolute;top: 18px;right: 10px;">
|
|
|
<el-button type="primary" size="mini" @click="searchList">搜索</el-button>
|
|
|
<el-button size="mini" plain @click="resetList">重置</el-button>
|
|
|
</div>
|
|
@@ -32,8 +117,10 @@
|
|
|
<el-button type="primary" size="mini" @click="delItems">删除</el-button>
|
|
|
<el-button type="primary" size="mini" @click="downLoadMb">下载模板</el-button>
|
|
|
<el-button type="primary" size="mini" @click="upload.open = true">导入数据</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="exportData">导出数据</el-button>
|
|
|
</div>
|
|
|
<el-super-ux-table
|
|
|
+ id="data-table"
|
|
|
v-model="tableData"
|
|
|
index
|
|
|
checkbox
|
|
@@ -106,10 +193,10 @@
|
|
|
<script>
|
|
|
// 导入的token
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
-import { getEquipmentDataList, downLoadMb, deleteEquipments} from '@/api/purchase/equipmentData.js'
|
|
|
+import { getEquipmentDataList, downLoadMb, deleteEquipments, exportEquipments} from '@/api/purchase/equipmentData.js'
|
|
|
export default {
|
|
|
name: "equipmentData",
|
|
|
- dicts: [],
|
|
|
+ dicts: ['sys_equipment_type'],
|
|
|
components: {
|
|
|
Add: () => import("./add.vue"),
|
|
|
ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
|
|
@@ -137,13 +224,19 @@ export default {
|
|
|
page: '',
|
|
|
disable: false,
|
|
|
rowDetail: {},
|
|
|
-
|
|
|
size: "mini",
|
|
|
loading: false,
|
|
|
params: {
|
|
|
- materialCode: '',
|
|
|
- materialName: '',
|
|
|
- deviceCategory: ''
|
|
|
+ commonName: '',
|
|
|
+ registrationName: '',
|
|
|
+ deviceCategory: '',
|
|
|
+ factoryName: '',
|
|
|
+ model: '',
|
|
|
+ referencePrice: '',
|
|
|
+ parameters: '',
|
|
|
+ isDeleteFile: '',
|
|
|
+ isProjectOrFactoryEmpower: '',
|
|
|
+ remark: ''
|
|
|
},
|
|
|
pageInfo: {
|
|
|
pageNum: 1,
|
|
@@ -154,15 +247,15 @@ export default {
|
|
|
selectData: [],
|
|
|
// SearchColumns: SearchColumns,
|
|
|
TableColumns: [
|
|
|
- { item: { key: "commonName", title: "通用名称", width: 150 }, attr: {} },
|
|
|
- { item: { key: "registrationName", title: "注册名", width: 150 }, attr: {} },
|
|
|
- { item: { key: "deviceCategory", title: "设备类别", width: 150 }, attr: {} },
|
|
|
- { item: { key: "factoryName", title: "厂家名称", width: 150 }, attr: {} },
|
|
|
- { item: { key: "model", title: "型号", width: 150 }, attr: {} },
|
|
|
- { item: { key: "referencePrice", title: "参考价格", width: 150 }, attr: {} },
|
|
|
- { item: { key: "isProjectOrFactoryEmpower", title: "是否项目/厂家年度授权", width: 150 }, attr: {} },
|
|
|
- { item: { key: "parameters", title: "参数", width: 150 }, attr: {} },
|
|
|
- { item: { key: "remark", title: "备注", width: 150 }, attr: {} },
|
|
|
+ { item: { key: "commonName", title: "通用名称" }, attr: {} },
|
|
|
+ { item: { key: "registrationName", title: "注册名" }, attr: {} },
|
|
|
+ { item: { key: "deviceCategory", title: "设备类别" }, attr: {} },
|
|
|
+ { item: { key: "factoryName", title: "厂家名称" }, attr: {} },
|
|
|
+ { item: { key: "model", title: "型号"}, attr: {} },
|
|
|
+ { item: { key: "referencePrice", title: "参考价格" }, attr: {} },
|
|
|
+ { item: { key: "isProjectOrFactoryEmpower", title: "是否项目/厂家年度授权" }, attr: {is: "el-dict-tag", dictName: "sys_equipment_type"} },
|
|
|
+ { item: { key: "parameters", title: "参数" }, attr: {} },
|
|
|
+ { item: { key: "remark", title: "备注"}, attr: {} },
|
|
|
].map(({ item, attr }) => ({
|
|
|
attr,
|
|
|
item: {
|
|
@@ -199,6 +292,37 @@ export default {
|
|
|
this.pageInfo.total = res.total
|
|
|
}
|
|
|
})
|
|
|
+ // 获取搜索框和表格元素
|
|
|
+ const searchInput = this.params.parameters;
|
|
|
+ const table = document.querySelector('#data-table');
|
|
|
+ // 监听搜索框输入事件
|
|
|
+ // searchInput.addEventListener('input', () => {
|
|
|
+ // 获取搜索关键字
|
|
|
+ const keyword = searchInput;
|
|
|
+ // 如果搜索关键字为空,移除所有高亮样式
|
|
|
+ if (!keyword) {
|
|
|
+ table.querySelectorAll('.highlight').forEach(el => {
|
|
|
+ el.classList.remove('highlight');
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 遍历表格中的每个单元格
|
|
|
+ table.querySelectorAll('td').forEach(td => {
|
|
|
+ console.log('td',td)
|
|
|
+ // 获取单元格文本内容
|
|
|
+ const cellText = td.innerHTML.trim().toLowerCase();
|
|
|
+
|
|
|
+ // 如果单元格内容包含搜索关键字,添加高亮样式
|
|
|
+ if (cellText.includes(keyword)) {
|
|
|
+ // 将匹配到的关键字替换为带有高亮样式的文本
|
|
|
+ const highlightedText = cellText.replace(new RegExp(keyword, 'gi'), match => `<span class="highlight">${match}</span>`);
|
|
|
+ td.innerHTML = highlightedText;
|
|
|
+ } else {
|
|
|
+ // 移除高亮样式
|
|
|
+ td.innerHTML = cellText;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // });
|
|
|
},
|
|
|
// 新增
|
|
|
addDivision() {
|
|
@@ -269,9 +393,16 @@ export default {
|
|
|
},
|
|
|
resetList() {
|
|
|
this.params = {
|
|
|
- materialCode: '',
|
|
|
- materialName: '',
|
|
|
+ commonName: '',
|
|
|
+ registrationName: '',
|
|
|
deviceCategory: '',
|
|
|
+ factoryName: '',
|
|
|
+ model: '',
|
|
|
+ referencePrice: '',
|
|
|
+ parameters: '',
|
|
|
+ isDeleteFile: '',
|
|
|
+ isProjectOrFactoryEmpower: '',
|
|
|
+ remark: ''
|
|
|
}
|
|
|
this.useQuery(this.params, this.pageInfo)
|
|
|
},
|
|
@@ -291,6 +422,29 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 导出
|
|
|
+ exportData() {
|
|
|
+ this.$modal.loading("正在导出数据,请稍后...");
|
|
|
+ exportEquipments(this.params).then(res => {
|
|
|
+ this.$modal.closeLoading();
|
|
|
+ const blob = new Blob([res], {
|
|
|
+ type: "application/vnd.ms-excel;charset=UTF-8",
|
|
|
+ });// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
|
|
|
+ const downloadElement = document.createElement("a"); //创建a标签
|
|
|
+ const href = window.URL.createObjectURL(blob); // 创建下载的链接
|
|
|
+ // var temp = res.headers["content-disposition"];
|
|
|
+ // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码)
|
|
|
+ // var name = fileName.split(";")[0]; //切割成文件名
|
|
|
+ downloadElement.href = href; //下载地址
|
|
|
+ downloadElement.download = '设备产品数据导出' + this.parseTime(new Date().getTime()) + ".xlsx"; // 下载后文件名
|
|
|
+ document.body.appendChild(downloadElement);
|
|
|
+ downloadElement.click(); // 点击下载
|
|
|
+ document.body.removeChild(downloadElement); // 下载完成移除元素
|
|
|
+ window.URL.revokeObjectURL(href); // 释放blob对象
|
|
|
+ }).catch(err => {
|
|
|
+ this.$modal.closeLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -306,4 +460,7 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
+::v-deep .highlight {
|
|
|
+ background: yellow !important;
|
|
|
+}
|
|
|
</style>
|